vuex-stateshot/docs/js/index.3dc143f7.js

A state snapshot plugin on actions/mutations for Vuex3.1+.

(function(t){function e(e){for(var s,i,a=e[0],u=e[1],c=e[2],d=0,h=[];d<a.length;d++)i=a[d],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&h.push(n[i][0]),n[i]=0;for(s in u)Object.prototype.hasOwnProperty.call(u,s)&&(t[s]=u[s]);l&&l(e);while(h.length)h.shift()();return r.push.apply(r,c||[]),o()}function o(){for(var t,e=0;e<r.length;e++){for(var o=r[e],s=!0,a=1;a<o.length;a++){var u=o[a];0!==n[u]&&(s=!1)}s&&(r.splice(e--,1),t=i(i.s=o[0]))}return t}var s={},n={index:0},r=[];function i(e){if(s[e])return s[e].exports;var o=s[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=t,i.c=s,i.d=function(t,e,o){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var s in t)i.d(o,s,function(e){return t[e]}.bind(null,s));return o},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],u=a.push.bind(a);a.push=e,a=a.slice();for(var c=0;c<a.length;c++)e(a[c]);var l=u;r.push([0,"chunk-vendors"]),o()})({0:function(t,e,o){t.exports=o("f161")},"0981":function(t,e,o){},"2ac8":function(t,e,o){"use strict";o.r(e);const s=o("f939"),n={};s.keys().forEach(t=>{"./index.js"!==t&&(n[t.replace(/(\.\/|\.js)/g,"")]=s(t).default)}),e["default"]=n},"379a":function(t,e,o){"use strict";o.d(e,"a",(function(){return s})),o.d(e,"b",(function(){return n})),o.d(e,"c",(function(){return r}));const s="SET_STATE",n="SET_THEME",r={SET_GLOBAL_STATE:"SET_GLOBAL_STATE",SET_LAYOUT:"SET_LAYOUT",UNDO_LAYOUT:"UNDO_LAYOUT",REDO_LAYOUT:"REDO_LAYOUT",CHANGE_COLOR:"CHANGE_COLOR",RESET_LAYOUT:"RESET_LAYOUT",widget:{TOGGLE_SHOW_CARD:"TOGGLE_SHOW_CARD"}}},"41a0":function(t,e,o){"use strict";o.r(e);var s=o("379a"),n=o("bc69");const r={layout:[{x:0,y:0,w:6,h:4,i:"One",color:"#4AF"},{x:6,y:0,w:6,h:3,i:"Two",color:"#4FA"},{x:0,y:4,w:6,h:3,i:"Three",color:"#A4F"},{x:6,y:3,w:6,h:4,i:"Four",color:"#AF4"},{x:0,y:6,w:12,h:4,i:"Five",color:"#F4A"}],cloneLayout:[]},i={...Object(n["makeActions"])({setGlobalState:s["c"].SET_GLOBAL_STATE,setLayout:s["c"].SET_LAYOUT,resetLayout:s["c"].RESET_LAYOUT})},a={[s["c"].SET_GLOBAL_STATE](t,e){Object.assign(t,e)},[s["c"].SET_LAYOUT](t,e){t.layout=e},[s["c"].RESET_LAYOUT](t,e){t.layout=t.cloneLayout},[s["c"].CHANGE_COLOR](t,e){const o=([...t])=>{let e=t.length;while(e){let o=null;const s=Math.floor(Math.random()*e--);o=t[e],t[e]=t[s],t[s]=o}return t};t.layout=t.layout.map(t=>{const e=o(["F","A","4"]).join("");return{...t,color:`#${e}`}})}},u={widget:{namespaced:!0,state:{isShowCard:!1},actions:{...Object(n["makeActions"])({toggleShowCard:s["c"].widget.TOGGLE_SHOW_CARD})},mutations:{[s["c"].widget.TOGGLE_SHOW_CARD](t,e){t.isShowCard=!t.isShowCard}}}};e["default"]={namespaced:!0,state:r,actions:i,mutations:a,modules:u}},"4ad6":function(t,e,o){"use strict";var s=o("4c12"),n=o.n(s);n.a},"4c12":function(t,e,o){},bc69:function(t,e,o){"use strict";o.r(e),o.d(e,"makeActions",(function(){return n})),o.d(e,"setState",(function(){return r}));const s=t=>{return({commit:e},...o)=>e(t,...o)},n=(t={})=>{const e={};for(const o of Object.keys(t)){const n={[o]:s(t[o])};Object.assign(e,n)}return e},r=s("SET_STATE")},c028:function(t,e,o){"use strict";var s=o("0981"),n=o.n(s);n.a},ce0e:function(t,e,o){"use strict";var s=o("fc43"),n=o.n(s);n.a},f161:function(t,e,o){"use strict";o.r(e);var s=o("2b0e"),n=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{class:{"dark-mode":t.isDarkmode},attrs:{id:"app"}},[o("GridBlock",{attrs:{"is-darkmode":t.isDarkmode}})],1)},r=[],i=function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("div",{staticClass:"grid-block"},[o("h1",[t._v("Play with the Widget 👇")]),o("div",{staticClass:"button-group actions"},[o("label",{attrs:{for:"actions"}},[t._v("Undo/Redo:")]),o("button",{attrs:{disabled:!t.hasUndo},on:{click:t.handleUndo}},[t._v("Undo("),o("strong",[t._v(t._s(t.undoCount))]),t._v(")(Ctrl/⌘ + Z)")]),o("button",{attrs:{disabled:!t.hasRedo},on:{click:t.handleRedo}},[t._v("Redo("),o("strong",[t._v(t._s(t.redoCount))]),t._v(")(Ctrl/⌘ + Y)")])]),o("hr"),o("div",{staticClass:"button-group mutations"},[o("label",{attrs:{for:"mutations"}},[t._v("Mutations:")]),o("button",{on:{click:t.handleChangeColor}},[t._v("Change Color")]),o("button",{on:{click:t.handleChangeTheme}},[t._v("Switch "+t._s(this.isDarkmode?"Light":"Dark")+" Mode")])]),o("div",{staticClass:"button-group namespaced"},[o("label",{attrs:{for:"mutations"}},[t._v("Nested Actions:")]),o("button",{on:{click:t.toggleShowCard}},[t._v("Toggle Show Card")])]),o("div",{staticClass:"button-group subscribe"},[o("label",{attrs:{for:"mutations"}},[t._v("Subscribe Toggle:")]),o("button",{on:{click:t.unsubscribeActions}},[t._v("Unsubscribe Actions")]),o("button",{on:{click:t.subscribeActions}},[t._v("Subscribe Actions")]),o("button",{on:{click:t.unsubscribeMutations}},[t._v("Unsubscribe Mutations")]),o("button",{on:{click:t.subscribeMutations}},[t._v("Subscribe Mutations")])]),o("div",{staticClass:"button-group custom"},[o("label",{attrs:{for:"mutations"}},[t._v("Custom:")]),o("button",{on:{click:t.handleChangeGrid}},[t._v("Change Grid")]),o("button",{on:{click:t.handleResetGrid}},[t._v("Reset Grid")])]),o("div",{staticClass:"button-group restore"},[o("label",{attrs:{for:"mutations"}},[t._v("Restore:")]),o("button",{on:{click:t.handleResetHistory}},[t._v("Reset History")])]),o("hr"),o("smart-widget-grid",{attrs:{margin:[5,5],"row-height":36,layout:t.layout},on:{"layout-updated":t.handleLayoutUpdated}},t._l(t.layout,(function(e){return o("smart-widget",{key:e.i,attrs:{slot:e.i,simple:!t.isShowCard,shadow:"never",padding:[0,0]},slot:e.i},[t.isShowCard?[o("div",{staticClass:"widget-title",attrs:{slot:"title"},slot:"title"},[o("span",[t._v("Card "+t._s(e.i))])]),o("div",{staticClass:"layout-center",style:{"background-color":e.color}},[t._v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! ")])]:o("div",{staticClass:"layout-center",style:{"background-color":e.color}},[o("h3",[t._v(t._s(e.i))])])],2)})),1)],1)},a=[],u=o("4d7f"),c=o.n(u),l=o("cd3f"),d=o.n(l),h=o("f7fe"),b=o.n(h),f=o("2f62");const y=Object(f["a"])("vuexstateshot");var g={name:"GirdBlock",props:{isDarkmode:Boolean},computed:{...Object(f["d"])("global",{layout:t=>t.layout}),...y.mapGetters(["undoCount","redoCount","hasUndo","hasRedo"]),...Object(f["d"])("global/widget",{isShowCard:t=>t.isShowCard})},mounted(){this.setGlobalState({cloneLayout:d()(this.layout)}),this.bindKeys()},beforeDestroy(){this.unbindKeys()},methods:{...Object(f["c"])(["setState"]),...Object(f["c"])("global",["setGlobalState","setLayout","resetLayout"]),...Object(f["c"])("global/widget",["toggleShowCard"]),...y.mapActions(["undo","redo","reset"]),handleLayoutUpdated(t){this.setLayout(t)},async handleUndo(){const{theme:t,global:e}=await this.undo();this.setState({theme:t}),this.setGlobalState({...e})},async handleRedo(){const{theme:t,global:e}=await this.redo();this.setState({theme:t}),this.setGlobalState({...e})},handleChangeColor(){this.$store.commit("global/CHANGE_COLOR")},handleChangeTheme(){this.$store.commit("SET_THEME",this.isDarkmode?"light":"dark")},handleChangeGrid:b()((function(){const t=[{x:0,y:0,w:4,h:3,i:"One",color:"#4AF"},{x:4,y:0,w:4,h:3,i:"Two",color:"#4FA"},{x:8,y:0,w:4,h:3,i:"Three",color:"#A4F"},{x:0,y:3,w:12,h:4,i:"Four",color:"#AF4"},{x:0,y:7,w:12,h:4,i:"Five",color:"#F4A"}];this.setGlobalState({layout:t}),this.$stateshot.syncState("global")}),333),handleResetGrid(){this.resetLayout(),this.$stateshot.syncState("global")},unsubscribeActions(){this.$stateshot.unsubscribeAction()},subscribeActions(){this.$stateshot.subscribeAction()},unsubscribeMutations(){this.$stateshot.unsubscribe()},subscribeMutations(){this.$stateshot.subscribe()},handleResetHistory(){this.reset()},bindKeys(){const t=this,e=()=>{return t.hasUndo&&t.handleUndo(),!1},o=()=>{return t.hasRedo&&t.handleRedo(),!1};c()("⌘+z, ctrl+z",e),c()("⌘+y, ctrl+y",o)},unbindKeys(){c.a.unbind("⌘+z, ctrl+z"),c.a.unbind("⌘+y, ctrl+y")}}},m=g,p=(o("ce0e"),o("c028"),o("2877")),_=Object(p["a"])(m,i,a,!1,null,"7604dcd2",null),S=_.exports,O={name:"app",computed:{isDarkmode(){return"dark"===this.$store.state.theme}},components:{GridBlock:S}},T=O,v=(o("4ad6"),Object(p["a"])(T,n,r,!1,null,null,null)),C=v.exports,A=o("61e5");const w="vuexstateshot",E="__SYNC_STATE__",L="STATESHOT_UNDO",k="STATESHOT_REDO";class R{constructor(t,e,o){const{maxLength:s=100,delay:n=50,...r}=o,i=new A["History"]({maxLength:s+1,delay:n,...r});this.store=t,this.modules=e,this.moduleNames=Object.keys(e),this.rootModule=t._modules.root,this.actions=this.getSubscribeTypes("actions"),this.mutations=this.getSubscribeTypes("mutations"),this.unsubscribeAction=null,this.unsubscribe=null,this.history=i}getHistoryLength(){return this.history.$records.filter(t=>t).length}getSubscribeTypes(t){let e=[];for(const s of this.moduleNames){const o=this.modules[s][t],n=o&&o.map(t=>{return"rootModule"===s?t:`${s}/${t}`});e=[...e,n]}const o=t=>[].concat(...t.map(t=>Array.isArray(t)?o(t):t));return o(e.filter(t=>t))}findNamespacedModule(t,e=this.rootModule){if("root"===t)return this.rootModule;const o=t.split("/");if(!o.length)return!1;const s=e._children[o[0]],n=o.slice(1).join("/");if(s&&s.namespaced)return 1===o.length?s:this.findNamespacedModule(n,s);for(const r in e._children){const o=this.findNamespacedModule(t,e._children[r]);if(o)return o}return!1}registerPluginMoudle(){this.store.registerModule(w,{namespaced:!0,state:{prevState:{},nextState:{},hasUndo:!1,hasRedo:!1,historyLength:0,undoCount:0,redoCount:0},actions:{snapshot:({commit:t,dispatch:e,state:o,rootState:s},n)=>{this.history.pushSync(s);const r=this.getHistoryLength();t(E,{hasUndo:r-1>0,hasRedo:!1,historyLength:r,undoCount:r-1,redoCount:0})},undo:({commit:t,state:e},o)=>{const{hasUndo:s}=e,n=this.history.undo().get();return n&&s&&t("STATESHOT_UNDO",n),n},redo:({commit:t,state:e},o)=>{const{hasRedo:s}=e,n=this.history.redo().get();return n&&s&&t("STATESHOT_REDO",n),n},reset:({commit:t},e)=>{this.history.reset(),t(E,{nextState:{},prevState:{},hasUndo:!1,hasRedo:!1,historyLength:0,undoCount:0,redoCount:0})}},mutations:{[E](t,e){Object.assign(t,e)},[L](t,e){t.prevState=e,t.undoCount-=1,0===t.undoCount&&(t.hasUndo=!1),t.redoCount+=1,t.hasRedo=t.redoCount>0},[k](t,e){t.nextState=e,t.redoCount-=1,0===t.redoCount&&(t.hasRedo=!1),t.undoCount+=1,t.hasUndo=t.undoCount>0}},getters:{hasUndo:t=>t.hasUndo,hasRedo:t=>t.hasRedo,undoCount:t=>t.undoCount,redoCount:t=>t.redoCount,historyLength:t=>t.historyLength}})}syncState(t="root"){const{state:e}=this.findNamespacedModule(t,this.rootModule);this.store.dispatch(`${w}/snapshot`,e)}stateshotFromAction(t){return{before:(t,e)=>{},after:(t,e)=>{this.actions.includes(t.type)&&this.syncState()}}}stateshotFromMutation(t,e){this.mutations.includes(t.type)&&this.syncState()}subscribeAction(){this.unsubscribeAction=this.store.subscribeAction(this.stateshotFromAction(this.store))}subscribe(){this.unsubscribe=this.store.subscribe((t,e)=>this.stateshotFromMutation(t,e))}}function U(t,e){return o=>{const n=new R(o,t,e);n.registerPluginMoudle(),n.syncState(),n.subscribeAction(),n.subscribe(),s["default"].prototype.$stateshot=n}}var G=o("bc69"),M=o("379a"),j=o("2ac8");s["default"].use(f["b"]);var x=new f["b"].Store({state:{theme:"light"},actions:G,mutations:{[M["a"]](t,e){Object.assign(t,e)},[M["b"]](t,e){t.theme=e}},modules:j["default"],plugins:[U({rootModule:{mutations:["SET_THEME"]},global:{actions:["syncState","setLayout"],mutations:["CHANGE_COLOR"]},"global/widget":{actions:["toggleShowCard"]}},{maxLength:20})]}),D=o("d352"),H=o.n(D);s["default"].use(H.a),s["default"].config.productionTip=!1,new s["default"]({store:x,render:t=>t(C)}).$mount("#app")},f939:function(t,e,o){var s={"./global.js":"41a0","./index.js":"2ac8"};function n(t){var e=r(t);return o(e)}function r(t){if(!o.o(s,t)){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}return s[t]}n.keys=function(){return Object.keys(s)},n.resolve=r,t.exports=n,n.id="f939"},fc43:function(t,e,o){}});