vue-multiple-themes 1.3.0 → 1.5.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+1.0.1
+
+- Add Documents
+- Add License
+
+1.0.8
+
+- Add font-icon
+- Fix bug after change routing in mounted
+- Persisted an array for 3 constant colors
+- Add new props for custom style

package/dist/vue-multiple-themes.esm.js

@@ -253,7 +253,7 @@ var __vue_staticRenderFns__ = [];
 
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-942c8fea_0", {
+  inject("data-v-183ac2ec_0", {
     source: "@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?5gakus);src:url(fonts/icomoon.eot?5gakus#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?5gakus) format('truetype'),url(fonts/icomoon.woff?5gakus) format('woff'),url(fonts/icomoon.svg?5gakus#icomoon) format('svg');font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-coffee:before{content:\"\\e900\"}.icon-moon:before{content:\"\\e901\"}.icon-sun:before{content:\"\\e902\"}:root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",
     map: undefined,
     media: undefined

package/dist/vue-multiple-themes.min.js

@@ -1 +1 @@
-var VueMultipleThemes=function(e){"use strict";var t={name:"VueMultipleThemes",props:{defaultTheme:{default:"light",type:String},themeColorList:{default:function(){return["light","dark","sepia"]},type:Array},extraClass:{default:"",type:String},changeThemeOff:{default:!0,type:Boolean}},data:function(){return{theme:this.defaultTheme,counter:0,themeName:this.defaultTheme,showChangeTheme:this.changeThemeOff}},computed:{showChangeThemeHandler:function(){this.showChangeTheme||(this.theme=this.defaultTheme,this.themeName=this.theme,this.themeColor(this.theme))}},methods:{themeColor:function(e){this.theme="".concat(e),document.title="Multiple Themes in Vue.js",document.body.classList.add("app-background"),document.documentElement.setAttribute("theme","".concat(e)),localStorage.setItem("theme",JSON.stringify("".concat(e)))},changeTheme:function(){this.counter=this.counter+1,this.counter===this.themeColorList.length&&(this.counter=0),this.themeName=this.themeColorList[this.counter],this.themeColor(this.themeName)}},mounted:function(){(this.showChangeTheme||this.showChangeThemeHandler(),localStorage.getItem("theme")&&this.showChangeTheme)?(this.theme=JSON.parse(localStorage.getItem("theme")),document.documentElement.setAttribute("theme",this.theme),this.themeName=this.theme,this.themeColor(this.theme)):(this.theme=this.defaultTheme,this.themeName=this.theme,this.themeColor(this.theme))}};function o(e,t,o,n,s,i,a,l,r,c){"boolean"!=typeof a&&(r=l,l=a,a=!1);const h="function"==typeof o?o.options:o;let m;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,s&&(h.functional=!0)),n&&(h._scopeId=n),i?(m=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=m):t&&(m=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),m)if(h.functional){const e=h.render;h.render=function(t,o){return m.call(o),e(t,o)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,m):[m]}return o}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return(e,t)=>function(e,t){const o=n?t.media||"default":e,s=a[o]||(a[o]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);let o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===i&&(i=document.head||document.getElementsByTagName("head")[0]),i.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const e=s.ids.size-1,t=document.createTextNode(o),n=s.element.childNodes;n[e]&&s.element.removeChild(n[e]),n.length?s.element.insertBefore(t,n[e]):s.element.appendChild(t)}}}(e,t)}let i;const a={};var l=o({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"vue-multiple-themes",class:e.extraClass},[e.changeThemeOff?o("span",{staticClass:"change-theme-box",on:{click:function(t){return e.changeTheme()}}},["dark"===e.themeName?o("span",{staticClass:"icon-moon"}):e._e(),e._v(" "),"light"===e.themeName?o("span",{staticClass:"icon-sun"}):e._e(),e._v(" "),"sepia"===e.themeName?o("span",{staticClass:"icon-coffee"}):e._e()]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-942c8fea_0",{source:"@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?5gakus);src:url(fonts/icomoon.eot?5gakus#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?5gakus) format('truetype'),url(fonts/icomoon.woff?5gakus) format('woff'),url(fonts/icomoon.svg?5gakus#icomoon) format('svg');font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-coffee:before{content:\"\\e900\"}.icon-moon:before{content:\"\\e901\"}.icon-sun:before{content:\"\\e902\"}:root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,s,void 0,void 0),r=function(e){r.installed||(r.installed=!0,e.component("VueMultipleThemes",l))},c={install:r},h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(c),l.install=r,e.default=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
+var VueMultipleThemes=function(e){"use strict";var t={name:"VueMultipleThemes",props:{defaultTheme:{default:"light",type:String},themeColorList:{default:function(){return["light","dark","sepia"]},type:Array},extraClass:{default:"",type:String},changeThemeOff:{default:!0,type:Boolean}},data:function(){return{theme:this.defaultTheme,counter:0,themeName:this.defaultTheme,showChangeTheme:this.changeThemeOff}},computed:{showChangeThemeHandler:function(){this.showChangeTheme||(this.theme=this.defaultTheme,this.themeName=this.theme,this.themeColor(this.theme))}},methods:{themeColor:function(e){this.theme="".concat(e),document.title="Multiple Themes in Vue.js",document.body.classList.add("app-background"),document.documentElement.setAttribute("theme","".concat(e)),localStorage.setItem("theme",JSON.stringify("".concat(e)))},changeTheme:function(){this.counter=this.counter+1,this.counter===this.themeColorList.length&&(this.counter=0),this.themeName=this.themeColorList[this.counter],this.themeColor(this.themeName)}},mounted:function(){(this.showChangeTheme||this.showChangeThemeHandler(),localStorage.getItem("theme")&&this.showChangeTheme)?(this.theme=JSON.parse(localStorage.getItem("theme")),document.documentElement.setAttribute("theme",this.theme),this.themeName=this.theme,this.themeColor(this.theme)):(this.theme=this.defaultTheme,this.themeName=this.theme,this.themeColor(this.theme))}};function o(e,t,o,n,s,i,a,l,r,c){"boolean"!=typeof a&&(r=l,l=a,a=!1);const h="function"==typeof o?o.options:o;let m;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,s&&(h.functional=!0)),n&&(h._scopeId=n),i?(m=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,r(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},h._ssrRegister=m):t&&(m=a?function(e){t.call(this,c(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,l(e))}),m)if(h.functional){const e=h.render;h.render=function(t,o){return m.call(o),e(t,o)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,m):[m]}return o}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function s(e){return(e,t)=>function(e,t){const o=n?t.media||"default":e,s=a[o]||(a[o]={ids:new Set,styles:[]});if(!s.ids.has(e)){s.ids.add(e);let o=t.source;if(t.map&&(o+="\n/*# sourceURL="+t.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),s.element||(s.element=document.createElement("style"),s.element.type="text/css",t.media&&s.element.setAttribute("media",t.media),void 0===i&&(i=document.head||document.getElementsByTagName("head")[0]),i.appendChild(s.element)),"styleSheet"in s.element)s.styles.push(o),s.element.styleSheet.cssText=s.styles.filter(Boolean).join("\n");else{const e=s.ids.size-1,t=document.createTextNode(o),n=s.element.childNodes;n[e]&&s.element.removeChild(n[e]),n.length?s.element.insertBefore(t,n[e]):s.element.appendChild(t)}}}(e,t)}let i;const a={};var l=o({render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"vue-multiple-themes",class:e.extraClass},[e.changeThemeOff?o("span",{staticClass:"change-theme-box",on:{click:function(t){return e.changeTheme()}}},["dark"===e.themeName?o("span",{staticClass:"icon-moon"}):e._e(),e._v(" "),"light"===e.themeName?o("span",{staticClass:"icon-sun"}):e._e(),e._v(" "),"sepia"===e.themeName?o("span",{staticClass:"icon-coffee"}):e._e()]):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-183ac2ec_0",{source:"@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?5gakus);src:url(fonts/icomoon.eot?5gakus#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?5gakus) format('truetype'),url(fonts/icomoon.woff?5gakus) format('woff'),url(fonts/icomoon.svg?5gakus#icomoon) format('svg');font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-coffee:before{content:\"\\e900\"}.icon-moon:before{content:\"\\e901\"}.icon-sun:before{content:\"\\e902\"}:root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",map:void 0,media:void 0})}),t,void 0,!1,void 0,!1,s,void 0,void 0),r=function(e){r.installed||(r.installed=!0,e.component("VueMultipleThemes",l))},c={install:r},h=null;return"undefined"!=typeof window?h=window.Vue:"undefined"!=typeof global&&(h=global.Vue),h&&h.use(c),l.install=r,e.default=l,Object.defineProperty(e,"__esModule",{value:!0}),e}({});

package/dist/vue-multiple-themes.ssr.js

@@ -218,7 +218,7 @@ var __vue_staticRenderFns__ = [];
 
 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-942c8fea_0", {
+  inject("data-v-183ac2ec_0", {
     source: "@font-face{font-family:icomoon;src:url(fonts/icomoon.eot?5gakus);src:url(fonts/icomoon.eot?5gakus#iefix) format('embedded-opentype'),url(fonts/icomoon.ttf?5gakus) format('truetype'),url(fonts/icomoon.woff?5gakus) format('woff'),url(fonts/icomoon.svg?5gakus#icomoon) format('svg');font-weight:400;font-style:normal;font-display:block}[class*=\" icon-\"],[class^=icon-]{font-family:icomoon!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-coffee:before{content:\"\\e900\"}.icon-moon:before{content:\"\\e901\"}.icon-sun:before{content:\"\\e902\"}:root{--app-background-color:#ffffff;--app-title-color:#333333;--app-subtitle-color:#555555}[theme=dark]{--app-background-color:#333333;--app-title-color:#ffffff;--app-subtitle-color:#dddddd}[theme=sepia]{--app-background-color:#d0bc91;--app-title-color:#8a6c44;--app-subtitle-color:#5f4938}.app-background{background-color:var(--app-background-color)}.app-title{color:var(--app-title-color)}.app-subtitle{color:var(--app-subtitle-color);padding-top:10px}.change-theme-box{cursor:pointer;color:var(--app-subtitle-color);font-size:1em;font-weight:400}",
     map: undefined,
     media: undefined
@@ -230,7 +230,7 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
 var __vue_scope_id__ = undefined;
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-942c8fea";
+var __vue_module_identifier__ = "data-v-183ac2ec";
 /* functional template */
 
 var __vue_is_functional_template__ = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-multiple-themes",
-  "version": "1.3.0",
+  "version": "1.5.1",
   "description": "Vue Multiple Themes",
   "author": "Pooya Golchian(pooya.golchian@gmail.com)",
   "main": "dist/vue-multiple-themes.ssr.js",

package/readme.md

@@ -4,6 +4,11 @@
 
 2- Easy to use and add themes (Color Plallet)
 
+---
+
+## Demo
+- [Demo of Vue Multiple Theme package](https://vuemultipletheme.netlify.app/)
+
 ![vue-multiple-themes](vue-multiple-themes.gif)
 
 ### Install package
@@ -84,6 +89,11 @@ After import and register component in your Vue.js application:
 }
 ```
 
+
+---
+### Icon font issue
+**You need add fonts to your public project folder**
+
 ## Documents
 
 | Attribute      |                 Description                 |    Type | Default                                               |

package/src/vue-multiple-themes.vue

@@ -97,7 +97,7 @@ export default {
 }
 
 [class^="icon-"], [class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change ./fonts */
+  /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
   speak: never;
   font-style: normal;