Support html for slot property in show() dynamic api

[kytosai]

Is your feature request related to a problem? Please describe.

#57

Describe the solution you'd like

Today when experimenting with different modal plugins, I think that in addition to string support, we should support adding html content in the slot property instead of forcing to create unnecessary redundant components.

Example:

$vfm?.show({
  component: AlertModal,
  bind: {
    name: 'alert-modal',
  },
  on: {
    opened() {
      console.log('@opened');
    },
    closed() {
      console.log('@closed');
    }
  },
  slots: {
    default: 'Please enter <b class="tw-red-500">password</b> !', 
  },
});

however, assigning html directly like the one above can cause some error. So I think there should be an option that allows this to be done. But I have not thought of any ideas yet, hope you can support this feature!

Thank you !

[hunterliu1003]

Hi @kytosai,

I have no idea how to support html, and I don't think this would be a good practice.
Maybe you can try to use Vue.compile, but I'm not sure if this works:

var res = Vue.compile('Please enter <b class="tw-red-500">password</b> !')

$vfm?.show({
  component: AlertModal,
  bind: {
    name: 'alert-modal'
  },
  on: {
    opened() {
      console.log('@opened')
    },
    closed() {
      console.log('@closed')
    }
  },
  slots: {
    default: {
        component: {
            render: res.render
        }
    }
  }
})

[kytosai]

Thanks you ! ^^

[hunterliu1003]

Released the enhancement in version:

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