vue-final-modal@5

First of all, I would like to thank all users of vue-final-modal. I learned a lot through creating and maintaining this component library.
I am planing to implement v5 recently. If you have any practical suggestions, please leave a message below.

Roadmap

Features

• useDialog() composable and VueFinalDialog component based on <dialog />, see Any thoughts on supporting <dialog />? #419

  • use vue-use-template that provide Container, useTemplate, etc.

• useTemplate composable, can be used to render components without using VueFinalModal.vue. For example:

  import { useTemplate, defineTemplate } from 'vue-final-modal'
  import CardAction from './path/to/CardAction.vue'
  
  const { open, close } = useTemplate({
    component: Card
    slots: {
      title: '<h1>The card title</h1>', // string, will be render as html
      content: defineAsyncComponent(() => import('path/to/CardContent.vue')), // put a component or async component
      action: defineTemplate({
        component: CardAction, // put a component or async component
        attrs: {
          confirmText: 'Confirm',
          onConfirm: () => {}
        },
        slots: {
          ...
        }
      })
    }
  })
  
  show() // show the template
  hide() // hide the template

  useTemplate is useful if you want to define a modal yourself with <dialog> element for example. see Any thoughts on supporting <dialog />? #419

Breaking Change

• Replace body-scroll-lock with scroll-lock, see input type="range" is unusable inside modal #403

• Rename API useModalSlot() to defineTemplate() and support infinite recursive nested slots to useModal(). For example:

  import { useModal, defineTemplate } from 'vue-final-modal'
  import CardAction from './path/to/CardAction.vue'
  
  useModal({
    component: VueFinalModal,
    attrs: { ... },
    slots: {
      default: defineTemplate({
        component: Card
        slots: {
          title: '<h1>The card title</h1>', // string, will be render as html
          content: defineAsyncComponent(() => import('path/to/CardContent.vue')), // put a component or async component
          action: defineTemplate({
            component: CardAction, // put a component or async component
            attrs: {
              confirmText: 'Confirm',
              onConfirm: () => {}
            },
            slots: {
              ...
            }
          })
        }
      })
    }
  })

Compatibility

1. For Option API

[email protected] is for Vue 2,
[email protected] is for Vue 3.

2.x and 3.x have pretty much the same API.

2. For Composition API

[email protected] introduce the useModal() composable and fully rewrite with Typescript.

However it's not support Vue 2.

• Make [email protected] support both Vue 2 and Vue 3
  • After some research, it might be impossible to make it with vue-demi only because vue-final-modal is not only a composable library but also provide components. The easiest way might be having two split version, but this way I'll have to copy and paste a lot of same codes which I want to avoid. (I'm open to any suggestions)