Programmatic modal

[ldiellyoungl]

Programmatic modal usage like accept dialog (yes/no)

[benjamincanac]

This could be nice indeed, there is something we could do with https://vueuse.org/core/createTemplatePromise/, I'll look into it!

[acidjazz]

requested a similar feature confirmations

[AbdallahAlhaddad]

Hi @benjamincanac

I think we could replace HeadlessUI Dialog with vue-final-modal

Added benefits in addition to providing a Styleless component

• useModal() composable to manage your modals programmatically.
• Nested modals support.

What do you think?

[benjamincanac]

I'd rather implement the useModal composable ourself and add a <UModals /> container like we do for notifications.

[rizhenkov]

Vue-final-modal is also a good option, but I agree with @benjamincanac: his option may be more customizable and may offer better availability for people with limited accessibility.

[noook]

I'm interested in contributing to this, following @benjamincanac 's recommendation.

I'd have a few questions regarding the implementation, and what I have in mind:

I believe OP expects an API like this (types are fictives, I don't know the exact ones but interested to know them):

interface UseModalControls {
  // Optional modal component param would allow chaining Modals
  reveal: (modalComponent?: Component) => Promise<void>
  hide: () => Promise<void>
  isOpen: Ref<boolean>
}

function useModal<T extends Component>(modalComponent: T, props: ComponentProps<T>, modalLifeCycleOptions?: ModalLifeCycleOptions): UseModalControls {}

// modalLifeCycleOptions -> onReveal, onClose ...

Dealing with this composable across multiple components means that we need to persist the state of the current configured modal (selected component, open/close state...). -> Should we use inject/provide (with createInjectionState() or createSharedComposable() for example) to provide the state at the root level when installing the module, and inject in the composable so it is aware of the current state ?