How to use `slot` option in dynamic show() api dont' need pass `component` property ?

[kytosai]

Version

vue-final-modal: v3.0.0
vue: v3.0.7

OS

Mac

What is Expected?

I hope can pass a string to slot.default option in dynamic show (), but don't work because slot required component property.

Exam:

$vfm?.show({
  component: TestModal,
  bind: {
    name: 'test-modal',
  },
  on: {
    opened() {
      console.log('@opened');
    },
    closed() {
      console.log('@closed');
    }
  },
  slots: {
    default: "Content with string value", // It don't work
  },
});

I think this is unnecessary and has to create unnecessary redundant components

[hunterliu1003]

Hi @kytosai,

In this case, I think you can bind the message with prop in TestModal.

TestModal.vue:

<template>
  <vue-final-modal v-bind="$attrs" v-on="$listeners" ...>
    <div>{{ message }}</div>
  </vue-final-modal>
</template>

<script>
export default {
  name: 'TestModal',
  inheritAttrs: false,
  props: {
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
...
</style>

and open a dynamic modal:

$vfm?.show({
  component: TestModal,
  bind: {
    name: 'test-modal',
    message: "Here are some message you want to put in TestModal"
  }
});

[kytosai]

I think this is inappropriate because the nature of the slot can contain a string or a component inside

Using the message prop will make me change the structure of the component I have created. And the message prop cannot be as flexible as the message slot

I hope that there is a way that using either the api dynamic modal directly or through the same structure is possible
Specific slot property can pass a string or component (as at present)

[hunterliu1003]

Hi @kytosai ,

The enhancement is released in

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

[kytosai]

Hi @kytosai ,

The enhancement is released in

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

Thank you ! ^^