Vue-js-modal: Set modal default properties?

[scheMeZa]

Is there a way to set the defaults for all instances of modals?

I have to set the height to auto for every modal I instantiate:

this.$modal.show(
    ListItemModalDelete,
    {},
    {height: 'auto'}
);

[euvl]

Hey, there is currently no way, but there were a lot of requests for this feature, so I am planning to add it at some point.

I think the best way would be to reuse existing Vue.use(plugin, options) pattern and do something like:

Vue.use(VModal, {
  defaultProps: {
     height: 'auto',
     draggable: true
  }
})

Let me know what your think about it

[scheMeZa]

I like that, my first instinct was to do:

Vue.use(VModal, {
   height: 'auto',
   dynamic: true,
});

[cirokd]

You can set the defaults currently by writing a wrapper function for $modal.show after initializing the plugin, like this:

Vue.use(VModal, { dynamic: true, injectModalsContainer: true })
Vue.prototype.$showModal = (component, props, options, events) => {
  Vue.prototype.$modal.show(
    component,
    props || {},
    {
      adaptive: true,
      height: 'auto',
      width: '100%',
      ...options
    },
    events
  )
}

This will behave exactly as expected:

this.$showModal(MyComponent) // default properties
this.$showModal(MyComponent, { myProp: 52 }, { width: 300 }) // overwrite default

[euvl]

Hey, i've added this feature (i think 😄), please check out example: https://github.com/euvl/vue-js-modal/releases/tag/1.3.30

[p0psicles]

@cirokd the events param in your example. Is that really possible, or just a suggestion of yours?