Heavy Industries vue-modal
Note This is highly experimental. It could spontaneously combust while using.
What it is
A plugin to add modal functionality to a Vue application. It depends on Vuex.
What it isn't
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.
Installation
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>
Usage
Getting started
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
Configuration must include the Vuex store object that you intend to use.
Default
The default configuration object has the following form:
{ store: null,
mixin: false,
mixinNamespace: "$modal"
storeNamespace: "modal"
}
Configuration in-depth
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);
API
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.
License
MIT