Vue-js-modal: Default options

[ciceropablo]

Something like that:

// ...
Vue.use(VueModal, {
  componentName: 'foo-modal',
  width: '80%',
  clickToClose: false
})
// ...

The properties should overwrite default options:

<!-- // Modal 'Bar' -->
<foo-modal name="bar" width="50%" :clickToClose="true">
<!-- ... -->
</foo-modal>

<!-- // Modal 'Baz' -->
<foo-modal name="baz" width="75%">
<!-- ... -->
</foo-modal>

What do you think?

[euvl]

Hey @ciceropablo, after some consideration I think I will not implement this.
One can easily make wrapper component for modal which will handle default values. That is something v-dialog implementation does and it is pretty easy.

[tekook]

I would like this feature very much, to set a default value globally.
If you work with a wrapper for then you loose all other props or have do declare them all again in the wrapper component.
E.G. I want all my Modals to have the transition "modal". If I now write a wrapper, I cannot set "draggable" anywhere, or need to write the prop "draggable" into the wrapper.

I could very much be mistaken, just starting to get to know vue

[euvl]

You can pass draggable and other props by passing $attrs and $listeners to wrapped component.

https://vuejs.org/v2/api/#vm-attrs

[tekook]

As I said, I'm just starting to learn vue.
Could you give me a small example?

EDIT: OK, got it!

<base-modal transition="pop-out" v-bind="$attrs">
  <slot/>
</base-modal>

works like a charm! thank you!

[euvl]

no worries man, its a very good approach to create HoCs[1] in vue.

[1] https://reactjs.org/docs/higher-order-components.html (hocs in react)
[2] https://medium.com/tldr-tech/higher-order-components-in-vue-js-38b500c6d49f (hocs in vue)

[adamreisnz]

How would you approach this for dynamic modals?
The settings need to be specified every time when calling the this.$modal.show() method.

It would be simpler if the defaults could be exposed and modified globally.
Something as simple as:

VueModal.setDefaults({...});

[kdekooter]

Totally agree with @adamreisnz. Please consider reopening this issue, @euvl. Or otherwise provide sample code for writing a HoC.

[liatreis]

Since @adamreisnz has been blocked from interacting with this repo, I'm posting this work around for those interested, given the thumbs up received above.

This simple wrapper will allow you to specify default options for dynamic modals, so you don’t need to repeat yourself 50x in the same project. Would be great if this could be implemented in the actual plugin, but since @euvl has indicated he doesn’t want to implement support for default options, I hope this workaround will be of use to someone.

Wrapper plugin file:

import vueModal from 'vue-js-modal';

/**
 * Modal service
 */
class ModalService {

  /**
   * Constructor
   */
  constructor(defaults, service) {
    this.service = service;
    this.setDefaults(defaults);
  }

  /**
   * Set defaults
   */
  setDefaults(defaults = {}) {
    this.defaults = defaults;
  }

  /**
   * Show a modal
   */
  show(modal, props, params, events) {

    //Merge defaults into params
    params = Object.assign({}, this.defaults, params || {});

    //Call underlying service
    this.service.show(modal, props, params, events);
  }

  /**
   * Hide
   */
  hide(name, params) {
    this.service.hide(name, params);
  }

  /**
   * Toggle
   */
  toggle(name, params) {
    this.service.toggle(name, params);
  }
}

/**
 * Modal plugin
 */
const Plugin = {

  /**
   * Install plugin
   */
  install(Vue, options) {

    //First, install the vue modal plugin and pass through the options
    Vue.use(vueModal, options);

    //Get defaults from options
    const {defaults} = options;

    //Override with own wrapper service
    Vue.prototype.$modal = new ModalService(defaults, Vue.prototype.$modal);
  },
};

/**
 * Export plugin
 */
export default Plugin;

Then, specify default params when installing in your main.js:

import Modal from './plugins/modal/modal.plugin';
Vue.use(Modal, {

  //Any options you pass in here will be passed through to vue-js-modal
  dynamic: true,

  //Specify your defaults for dynamic modals here
  defaults: {
    clickToClose: false,
    scrollable: true,
    height: 'auto',
  },
});

Usage in your components:

//No need to repeat params anymore
this.$modal.show(ContactEdit, {
    contact, isEdit, onSave, onRemove,
});

Caveat: since you now no longer need to pass in params to every .show() call, the method can’t differentiate between you passing in props or params when you only pass in two arguments. So the function signature assumes a fixed order of arguments, and assumes you always pass in both props and params. You can easily modify the function signature to your own needs though.

cc @kdekooter, @prookie, @raneio, @Landen13, @arpit9295, @PinkiNice, @jbrown0824, @tekook, @ciceropablo

[euvl]

Hey, please check this feature here:

https://github.com/euvl/vue-js-modal/releases/tag/1.3.31

[chriswdmr]

Hey there, I'm also trying to set height: 'auto' for all dynamic modals.
@euvl you posted a link to the 1.3.30 tag, but there was no code change which enables this?

Thanks for your effort!

[euvl]

Ah, should be https://github.com/euvl/vue-js-modal/releases/tag/1.3.31

Fixed comment

[chriswdmr]

Even with 1.3.31 :(
Could you please provide an example with dynamic modals and global defaults (like the height) for all dynamic modals?

[JJBocanegra]

It's not working with dynamicDefaults

[kdekooter]

Not working here either. Settings in dynamicDefaults have no effect whatsoever. Please reopen @euvl .

[JJBocanegra]

I made a this pull request #445 to solve this issue

[vis97c]

Since @adamreisnz has been blocked from interacting with this repo, I'm posting this work around for those interested, given the thumbs up received above.

This simple wrapper will allow you to specify default options for dynamic modals, so you don’t need to repeat yourself 50x in the same project. Would be great if this could be implemented in the actual plugin, but since @euvl has indicated he doesn’t want to implement support for default options, I hope this workaround will be of use to someone.

Wrapper plugin file:

import vueModal from 'vue-js-modal';

/**
 * Modal service
 */
class ModalService {

  /**
   * Constructor
   */
  constructor(defaults, service) {
    this.service = service;
    this.setDefaults(defaults);
  }

  /**
   * Set defaults
   */
  setDefaults(defaults = {}) {
    this.defaults = defaults;
  }

  /**
   * Show a modal
   */
  show(modal, props, params, events) {

    //Merge defaults into params
    params = Object.assign({}, this.defaults, params || {});

    //Call underlying service
    this.service.show(modal, props, params, events);
  }

  /**
   * Hide
   */
  hide(name, params) {
    this.service.hide(name, params);
  }

  /**
   * Toggle
   */
  toggle(name, params) {
    this.service.toggle(name, params);
  }
}

/**
 * Modal plugin
 */
const Plugin = {

  /**
   * Install plugin
   */
  install(Vue, options) {

    //First, install the vue modal plugin and pass through the options
    Vue.use(vueModal, options);

    //Get defaults from options
    const {defaults} = options;

    //Override with own wrapper service
    Vue.prototype.$modal = new ModalService(defaults, Vue.prototype.$modal);
  },
};

/**
 * Export plugin
 */
export default Plugin;

Then, specify default params when installing in your main.js:

import Modal from './plugins/modal/modal.plugin';
Vue.use(Modal, {

  //Any options you pass in here will be passed through to vue-js-modal
  dynamic: true,

  //Specify your defaults for dynamic modals here
  defaults: {
    clickToClose: false,
    scrollable: true,
    height: 'auto',
  },
});

Usage in your components:

//No need to repeat params anymore
this.$modal.show(ContactEdit, {
    contact, isEdit, onSave, onRemove,
});

Caveat: since you now no longer need to pass in params to every .show() call, the method can’t differentiate between you passing in props or params when you only pass in two arguments. So the function signature assumes a fixed order of arguments, and assumes you always pass in both props and params. You can easily modify the function signature to your own needs though.

cc @kdekooter, @prookie, @raneio, @Landen13, @arpit9295, @PinkiNice, @jbrown0824, @tekook, @ciceropablo

I was unable to make it work, more taking into account that the $modal property cannot be overriden. I think the best approach is still to modify the plugin so i will fork this and do it on my own. These defaults are for the static modal and not the dynamic one.