\n\n```\n\n## Store Extending\n\nThis plugin is extending Vuex store.\n\n```\n const state = {\n activePopup: ''\n };\n\n const mutations = {\n POPUP_SHOW(state, popupName) {\n state.activePopup = popupName;\n },\n\n POPUP_HIDE(state) {\n state.activePopup = ''\n }\n };\n\n store.registerModule('mi-touch', {\n namespaced: true,\n state,\n mutations\n });\n```\n\nDoing mutations:\n\n```\n methods: {\n ...\n popupOpen(popupName) {\n this.$store.commit('mi-touch/POPUP_SHOW', popupName);\n },\n \n popupClose() {\n this.$store.commit('mi-touch/POPUP_HIDE')\n }\n }\n```\n\n\n## Registered components\n\nPlugin register components `mt-menu`, `mt-popup` and `pdf-popup` globally.\n\nFor using components, just [include](#usage) it in template.\n\nMI Touch components have basic functional and styles.\n\nBasically, you don't need pass any props, it automatic find `current slide`, `main slide`, `current flow` and `popup text data`.\n\nBut, in some cases you can pass following props:\n\n### mt-menu\n\nProp | Type | Default | Description\n --- | --- | --- |---\n mainSlide | Object | `this.structure[0]` | First slide in [structure](#https://github.com/serhiichuk/vue-cli-plugin-clm-helper#structure). Must have following keys: `id`, `path`, `name`.\n currentSlide | Object | `this.$store.state.currentSlide` | Object with following keys: `id`, `path`, `name`.\n slides | Array | ``this.structure.filter(sl => new RegExp(`slide-${this.currentFlow}`).test(sl.id))`` | Filtered slides from current flow name, will rendering in top list in menu. \n flows | Array | `this.structure.filter(sl => /\\d_1$/.test(sl.id));` | Filtered slides from each first slide in each flow, will rendering in bottom list in menu. \n btnInstrCb | Function | `() => this.popupOpen('instructions')` | Callback for `Instructions button` \n btnFaqCb | Function | `() => this.navigateTo()` | Callback for `FAQ button` \n slidesToActiveAutoTransform | Number | `6` | If `slidesToActiveAutoTransform` >= `slides.length` then current slide list item will be moved to left side.\n flowsToActiveAutoTransform | Number | `6` | If `flowsToActiveAutoTransform` >= `flows.length` then current slide list item will be moved to left side.\n \n **:info: For deactivate necessary swiper, please set `slidesToActiveAutoTransform` or `flowsToActiveAutoTransform` to `0`.**\n\n```\n// Now slides and flows will not be a swipable.\n\n```\n\n### mt-popup\n\nProp | Type | Default | Description\n --- | --- | --- |---\n dataPopup | Object | `this.$store.state.currentData.popup[this.activePopup]` | Object with text data. Popup DOM three will render with [vue-json-to-html](#https://github.com/serhiichuk/vue-json-to-html) \n animation | String | `'fade'` | Name for [transition wrapper component](https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components). Don't forget to describe custom transition classes\n instrPath | String | `'media/pdf/instruction.pdf'` | Path to `pdf` file which will open after click on `Instruction Button`, file must contain in `public/${instrPath}`\n\n### pdf-popup\n\n**:warning: Show `pdf-popup` only with `v-if` directive.**\n\nProp | Type | Default | Description\n --- | --- | --- |---\ninstrPath | String | `undefined` | Path to `pdf` file which must have `.pdf` end of string.\nclosePdf | Function | `() => {this.$store.commit('mi-touch/POPUP_HIDE')}` | Callback for close button in ``. \n\nExample: Using custom instructions popup.\n\n```\n// App.vue\n\n
\n ...\n \n \n \n \n \n \n \n\n \n \n \n ...\n
\n\n\n\n\n```\n\nAlso tou can use [named slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots) to pass some HTML to necessary popup:\n\nSlot content bellow will be added to actual popup block:\n```\n\n \n