Default options about vue-js-modal HOT 16 CLOSED

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({...});

from vue-js-modal.

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.

from vue-js-modal.

It's not working with dynamicDefaults

from vue-js-modal.

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

from vue-js-modal.

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

from vue-js-modal.

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

from vue-js-modal.

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

from vue-js-modal.

Hey, please check this feature here:

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

from vue-js-modal.

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

from vue-js-modal.

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

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

from vue-js-modal.

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!

from vue-js-modal.

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)

from vue-js-modal.

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

from vue-js-modal.

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!

from vue-js-modal.

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

Fixed comment

from vue-js-modal.

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.

from vue-js-modal.