Dynamic modals

[dominykasgithub]

Hello,

I'm transitioning from vue2 to vue3 and I was using vue-js-modal, but owner won't update package for a year as you can see his reply here (euvl/vue-js-modal#626)

So I decided to use this modal but it lacks features, so I'll build them myself, but I want to suggest copying dynamic modals creations like:

methods: {
            createDynamicModal(){
                this.$modal.show(SideModalReadMore, //just imported component
                    { //component props
                        product: this.product,
                        locale: this.locale,
                        isInit: this.isInit,
                    },
                    { //modal props
                        name: 'side-page-modal',
                        style: 'z-index: 99999',
                        class: "side-page-modal",
                        transition: "scale"
                    },
                    {} //events
                )
            },
        },

[hunterliu1003]

Hi @dominykasgithub,

Glad to receive your feedback.
I already add your proposal to the roadmap project, but I cannot guarantee when the feature would be released (at least 2 weeks or more).

If this feature is necessary and urgent for you, maybe you should continue to use Vue 2 with vue-js-modal.

[dominykasgithub]

@hunterliu1003 Thx, don't rush, make it good :)

[hunterliu1003]

@dominykasgithub

The feature of dynamic modal is finished, but still missing docs.
I released the beta version

• v2.0.0-beta.1 for Vue 2.x,
• v3.0.0-beta.1 for Vue 3.x

I will keep testing the new feature, and officially release it until stable and document ready

[Saltibarsciai]

Thanks, I'm interested how good this works :) 👍

[Saltibarsciai]

@hunterliu1003 even without docs maybe you could provide basic usage example, I tried

                this.$vfm.show({
                    component: KittenModal
                });

but it's not right, I tried looking into this code snippet

case 'object':
            {
              const defaultModal = {
                component: options.componentName,
                bind: {},
                slots: {},
                on: {}
              }
              modal = Object.assign(defaultModal, modal)
              const id = generateId()
              const name = modal.bind.name || PREFIX + id
              this.dynamicModals.push(
                shallowReactive({
                  value: true,
                  id,
                  ...modal,
                  component: modal.component,
                  slots: modal.slots,
                  bind: { ...modal.bind, name },
                  params: args[0]
                })
              )
            }
            break

it looks that it should be something like from my first example

[hunterliu1003]

@Saltibarsciai thanks for your advice. You can check out the docs from here temporarily.

https://github.com/vue-final/vue-final-modal/blob/feature%2Fzh-Hant/docs/content/en/dynamic-modal.md

You have to add ModalsContainer in App.vue

<div>
  ...
  <modals-container></modals-container>
</div>