Note This is highly experimental. It could spontaneously combust while using.
A plugin to add modal functionality to a Vue application. It depends on Vuex.
It is not a kitchen sink solution, nor is it even a modal component. There are plenty of fantastic packages out there already for those looking for pre-built components.
This project is rather a Vuex API for handling modal components. It is abstracted out for the sake of consistency and simplicity across projects, and eschews complex configurations objects and stylistic assumptions. It requires a little more boilerplate, but its minimal interface demands little familiarity with anything other than Vue itself.
Via npm:
npm i --save @heavyind/vue-modal
Via yarn:
yarn add @heavyind/vue-modal
Via unpkg:
<script src="https://unpkg.com/@heavyind/vue-modal"></script>
Pass a configuration object containing your store into the plugin:
import VueModalPlugin from "@heavyind/vue-modal";
Vue.use(VueModalPlugin, { store })
By default, you must access the API by assigning it to component properties and methods (mapState, mapActions).
Configuration must include the Vuex store object that you intend to use.
The default configuration object has the following form:
{ store: null,
mixin: false,
mixinNamespace: "$modal"
storeNamespace: "modal"
}
store
The Vuex store you intend to use.
mixin
A boolean representing whether or not the plugin should attach a global mixin that allows you to access properties and methods on each object. This mixin will be scoped to mixinNamespace
, which defaults to "$modal"
.
storeNamespace
The namespace of the VueModal module in your Vuex store. Defaults to "modal"
.
mixinNamespace
The name bound to each component that allows you to easily access modal properties and methods, should mixin
be set to true
. Defaults to "$modal"
(e.g., this.modal.open
);
isOpen
The open state of the modal.
settings
The settings object, which takes the form { component, props }
, where component
represents the optional component inside the modal and props
represents the optional props of that component.
component
An alias of settings.component
.
props
An alias of settings.props
.
open
Sets open
state to true
.
openWith
Sets open
state to true and stores a settings object of type { component: Component, props: Object }
which contains the current modal component and any props that should be passed to it.
close
Sets the open
state to false.
toggle
Sets the open
state to !open
.
setComponent
Sets the inner component of the modal.
setProps
Sets any props you would like to pass to the inner component of the modal.
MIT