vue-final-modal@5.x 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

vue-final-modal@2.x is for Vue 2, vue-final-modal@3.x is for Vue 3.

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

2. For Composition API

vue-final-modal@4.x introduce the useModal() composable and fully rewrite with Typescript.

However it's not support Vue 2.

• [ ] Make vue-final-modal@5.x 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 vue-final-modal@5.x 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 vue-final-modal@5.x 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())

[AmitJoki]

In nested modals, it would be nice if we could hide the parent modal so the child modal appears alone but when it is closed, the parent modal is shown again.

[beard7]

If multiple modals are open it would be good to have the option of automatically raising the z-index of the 'active' modal so it appears above other modals.