skillbox/client/src/plugins/modal.js

58 lines
1.2 KiB
JavaScript

// adapted from
// https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
import Vue from 'vue';
class ModalStore {
constructor(data = {}) {
this.vm = new Vue({
data: () => ({
component: '',
payload: {}
})
});
}
get state() {
return this.vm.$data;
}
}
const ModalPlugin = {
install(Vue, options) {
const store = new ModalStore({});
const reset = () => {
store.state.component = '';
store.state.payload = {};
};
Vue.prototype.$modal = {
state: store.state,
component: store.state.component,
payload: store.state.payload,
open: (component, payload) => {
store.state.payload = payload;
store.state.component = component;
return new Promise((resolve, reject) => {
this._resolve = resolve;
this._reject = reject;
});
},
confirm: (res) => {
reset();
this._resolve(res);
},
cancel: () => {
reset();
this._reject();
},
_resolve: () => {
},
_reject: () => {
},
};
}
};
export default ModalPlugin;