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>

[Saltibarsciai]

thanks!

[v1r0x]

Thank you very much for your modal and dynamic modal feature!

On problem I have with dynamic modals:
I can't get params (neither using @beforeOpen nor v-slot="{params}").

Could you give me an example how I should do it?

Edit: I also can't find a way to close the modal again (set v-model to false does not work) and I don't know how else I could close it.

Thank you!

This is my current setup:

<template>
  <vue-final-modal
    @beforeOpen="open"
    v-model="state.show"
    name="user-info-modal">
    <template v-slot="{ params }">
      Hello {{ params }}
    </template>
  </vue-final-modal>
</template>
<script>
    import {
        onMounted,
        reactive,
    } from 'vue';

    export default {
        setup(props, context) {
            const state = reactive({
                show: false,
            });

            const open = e => {
                console.log(e.ref.params); // is empty proxy
            }

            onMounted(_ => {
                state.show = true;
            });

            return {
                open,
                state,
            }
        },
    }
</script>

and from another component I call

import MyModal from 'MyModal.vue';
$vfm.show({
    component: MyModal
}, {
    param1: 'Foo',
    param2: 'Bar',
})

[hunterliu1003]

Hi @v1r0x,

Thanks for your feedback.

• I am working on fixing params in event @beforeOpen issue.
• However, I have no idea about how to support params in scoped-slot for dynamic modal.

In addition, I think params is not needed when using dynamic modal, because dynamic modal already provide huge flexibility for developers to bind props, events, slots.

In my opinion, using props not params in dynamic modal, you can get the benefit from the type check and validation by Vue.

I would pass props param1, param2 into MyModal component with key bind

import MyModal from 'MyModal.vue';

$vfm.show({
    component: MyModal,
    bind: {
        param1: 'Foo',
        param2: 'Bar',
    }
})

So that you can get these props in MyModal.vue:

<template>
  <vue-final-modal v-model="state.show" name="user-info-modal">
    <p>Hello {{ param1 }} and {{ param2 }}</p>
  </vue-final-modal>
</template>
<script>
import { onMounted, reactive } from 'vue'

export default {
  props: {
    param1: {
      type: String,
      default: ''
    }
    param2: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const state = reactive({
      show: false
    })

    return {
      open,
      state
    }
  }
}
</script>

I think this is a more concise way.

[v1r0x]

Thanks for your reply.

I'm fine with props 👍 I just thought it was a bug 😉 I already used this way as workaround. Good to know it is the intended way 😊

Thanks again. Very happy with it so far! 🎉

[hunterliu1003]

Yes, this is a bug 😂, and I’ll fix it as soon as posible.

[v1r0x]

I prefer props over @before-open, so take your time 😉

[hunterliu1003]

This feature has been officially released in

• v2.0.0 for Vue 2
• v3.0.0 for Vue 3