[email protected] is work in progress, please let me know if you have any practical suggestions 😉

[hunterliu1003]

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 #419~

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

• [x] 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 #419

Breaking Change

• [x] Replace body-scroll-lock with scroll-lock, see #403

• [x] 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)

[cooper667]

Make [email protected] support both Vue 2 and Vue 3

Why is this the aim? Vue 2 reached end of life at the end of last year so supporting it seems like a completely unnecessary overhead?

https://v2.vuejs.org/lts/

[hunterliu1003]

Make [email protected] support both Vue 2 and Vue 3

Why is this the aim? Vue 2 reached end of life at the end of last year so supporting it seems like a completely unnecessary overhead?

https://v2.vuejs.org/lts/

I just want to try it out and play with vue-demi vue-final-modal@2 supports Vue 2, vue-final-modal@3 supports Vue 3 and their syntax is exactly the same. But vue-final-modal@4 only supports Vue 3 and the syntax has breaking change. I understand that Vue 2 has reached end of life, but if the new syntax of vue-final-modal@5 can both support Vue 2 and 3, Vue 2 users can upgrade to vue-final-modal@5 before migrating to Vue 3 to reduce the complexity of migration.

After some research, vue-demi is not aimed at component compatibility but is purely logical composable. So if vue-final-modal@5 needs to support both Vue 2 and Vue 3, there may be a lot of duplicate code in the project. I'm not sure if it's worth it.

[ZWkang]

Does it still in progress? useTemplate looks great and looking forward to the custom dialog container. Thanks your contribution

[a982246809]

与vue-router绑定?

[negezor]

Hi. What's the status of the 5.x? I just see a lot of potential places for performance improvements, like reducing the amount of WatchEffect. But I'm not sure if it's worth doing a PR for version 4 now, since a lot of things have already been changed in 5.

Also about Vue 2 support, it's clearly not worth it, I'd even say it's better to support Vue from 3.3+ to get toRef() and toValue() for getters.

[lilkimo]

It would be nice if the onBeforeClose()/onClosed() event provides more information on how the modal was closed (by clicking the overlay, esc key, swipe, useModal().close())