You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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'importCardActionfrom'./path/to/CardAction.vue'const{ open, close }=useTemplate({component: Cardslots: {title: '<h1>The card title</h1>',// string, will be render as htmlcontent: defineAsyncComponent(()=>import('path/to/CardContent.vue')),// put a component or async componentaction: defineTemplate({component: CardAction,// put a component or async componentattrs: {confirmText: 'Confirm',onConfirm: ()=>{}},slots: {
...
}})}})show()// show the templatehide()// hide the template
Rename API useModalSlot() to defineTemplate() and support infinite recursive nested slots to useModal(). For example:
import{useModal,defineTemplate}from'vue-final-modal'importCardActionfrom'./path/to/CardAction.vue'useModal({component: VueFinalModal,attrs: { ... },slots: {default: defineTemplate({component: Cardslots: {title: '<h1>The card title</h1>',// string, will be render as htmlcontent: defineAsyncComponent(()=>import('path/to/CardContent.vue')),// put a component or async componentaction: defineTemplate({component: CardAction,// put a component or async componentattrs: {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)
The text was updated successfully, but these errors were encountered:
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.
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 andVueFinalDialog
component based on<dialog />
, see Any thoughts on supporting<dialog />
?聽#419vue-use-template
that provideContainer
,useTemplate
, etc.useTemplate
composable, can be used to render components without using VueFinalModal.vue. For example:useTemplate
is useful if you want to define a modal yourself with<dialog>
element for example. see Any thoughts on supporting<dialog />
?聽#419Breaking Change
Replace body-scroll-lock with scroll-lock, see input type="range" is unusable inside modal聽#403
Rename API
useModalSlot()
todefineTemplate()
and support infinite recursive nested slots touseModal()
. For example:Compatibility
1. For Option API
vue-final-modal@2.x
is for Vue 2,vue-final-modal@3.x
is for Vue 3.2. For Composition API
vue-final-modal@4.x
introduce theuseModal()
composable and fully rewrite with Typescript.vue-final-modal@5.x
support both Vue 2 and Vue 3vue-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)The text was updated successfully, but these errors were encountered: