Programmatically opening Modal from setup script

[kikuomax]

I found that it is challenging to open a Modal (or other components with programmatic open; e.g., Toast) from a setup script; i.e., inside <script setup>...</script>. The problem is twofold:

1. Since this is not available in a setup script, we cannot simply do:

   <script setup>
   const openModal = () => {
       this.$buefy.modal.open({ ... })  // Error: no this
   }
   </script>

2. Importing ModalProgrammatic no longer works (due to Fix: No plugins available on programmatically opened Modal.open (#101) #102):

   <script setup>
   import { ModalProgrammatic } from '@ntohq/buefy-next'
   
   const openModal = () => {
       ModalProgrammatic.open({ ... })  // Error: ModalProgrammatic is not an instance but a class
   }
   </script>

A workaround is to use Vue's internal API (getCurrentInstance) and field (proxy).

<script setup>
import { getCurrentInstance } from 'vue'  // https://stackoverflow.com/a/68958963

const self = getCurrentInstance()  // calling getCurrentInstance inside openModal won't work; end up with null

const openModal = () => {
    self.proxy.$buefy.modal.open({ ... })  // self.proxy is kind-of equivalent to this
}
</script>

Proposal

I do not think it is a good idea to force users to explicitly depend on internal APIs. So I suggest introducing new composition APIs like useModal in place of ModalProgrammatic:

<script setup>
import { useModal } from '@ntohq/buefy-next`

const { open } = useModal()

const openModal = () => {
    open({ ... })
}
</script>

useModal will be something similar to:

import { getCurrentInstance } from 'vue'

export const useModal = () => {
    const self = getCurrentInstance()

    const open = (props) => {
        self.proxy.$buefy.modal.open(props)
    }

    return { open }
}