ok-modals
v1.0.0
Published
vue2 modals plugin
Downloads
3
Readme
Modal Plugin
- Register plugin in the root js-file
import Vue from "vue";
import ModalPlugin from "@/plugins/modal/ModalPlugin";
...
Vue.use(ModalPlugin);
...
new Vue({ ... })
- Use
<modals-wrapper />
inside vue-component as a root modal-component (no need to import and register it, plugin does it globally). - To create/show/hide modal:
import ModalDialog from "@/ui/modals/ModalDialog";
methods: {
...
myShowModalFn() {
this.$modal.create({
// The names of properties do matter!
id: "foo", // Required, unique, string or number
modalComponent: ModalDialog, // Required, vue-component
text: "Lorem ipsum", // Optional
props: {
myFirstPropName: myFirstPropValue,
mySecondPropName: mySecondPropValue,
....
}, // Optional
onConfirm: someFn, // Optional, async fn is ok
onCancel: someFn, // Optional, async fn is ok
});
this.$modal.show("foo"); // Pass an id of modal here
},
myHideModalFn() {
this.$modal.hide("foo"); // Pass an id of modal here
}
}
- Modal-component (
ModalDialog
in example) gets from parent such props:
disabled: {
type: Boolean,
},
text: {
type: String,
},
isVisible: {
type: Boolean,
},
- Modal-component (
ModalDialog
in example) must emit"cancel"
and"confirm"
events on related buttons click. - Modal-component (
ModalDialog
in example) does not getonConfirm
andonCancel
functions. These functions run inModalsWrapper
. ModalsWrapper
is transparent for custom-events and for props.- For testing
create
,show
,hide
methods usespyOn
:
// wrapper here is the VTU-wrapper for component where the modal was created
const modalCreateSpyOn = jest.spyOn(wrapper.vm.$modal, "create");
// do something to show a modal (click on button for instance)
expect(modalCreateSpyOn).toHaveBeenCalled();
expect(modalCreateSpyOn).toHaveBeenCalledWith({
id: `your-expected-id`,
modalComponent: `YourExpectedComponent`,
text: `your-expected-text`,
onCancel: expect.any(Function), // or particular fn
onConfirm: expect.any(Function), // or particular fn
});
modalCreateSpyOn.mockReset();
- Testing of
onConfirm
/onCancel
methods should be done in the component that includes<modals-wrapper>
.