vue-multiple-themes 2.0.0 → 2.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -68,7 +68,6 @@ var script = {
|
|
|
68
68
|
methods: {
|
|
69
69
|
themeColor(themeColor) {
|
|
70
70
|
this.theme = `${themeColor}`;
|
|
71
|
-
document.title = "Multiple Themes in Vue.js";
|
|
72
71
|
const bodyElement = document.body;
|
|
73
72
|
bodyElement.classList.add("app-background");
|
|
74
73
|
const htmlElement = document.documentElement;
|
|
@@ -285,7 +284,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
285
284
|
|
|
286
285
|
const __vue_inject_styles__ = function (inject) {
|
|
287
286
|
if (!inject) return;
|
|
288
|
-
inject("data-v-
|
|
287
|
+
inject("data-v-16c949d0_0", {
|
|
289
288
|
source: ":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}",
|
|
290
289
|
map: undefined,
|
|
291
290
|
media: undefined
|
|
@@ -1 +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,themeIcons:[{name:"dark",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z",stroke:"#ffffff",strokeWidth:"2"},{name:"light",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z",stroke:"#000000",strokeWidth:"2"},{name:"sepia",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",stroke:"#000000",strokeWidth:"2"}]}},methods:{themeColor:function(e){this.theme="".concat(e),document.
|
|
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,themeIcons:[{name:"dark",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M13 6V3M18.5 12V7M14.5 4.5H11.5M21 9.5H16M15.5548 16.8151C16.7829 16.8151 17.9493 16.5506 19 16.0754C17.6867 18.9794 14.7642 21 11.3698 21C6.74731 21 3 17.2527 3 12.6302C3 9.23576 5.02061 6.31331 7.92462 5C7.44944 6.05072 7.18492 7.21708 7.18492 8.44523C7.18492 13.0678 10.9322 16.8151 15.5548 16.8151Z",stroke:"#ffffff",strokeWidth:"2"},{name:"light",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z",stroke:"#000000",strokeWidth:"2"},{name:"sepia",width:"24px",height:"24px",viewBox:"0 0 24 24",path:"M4 20H10.9433M10.9433 20H11.0567M10.9433 20C10.9622 20.0002 10.9811 20.0002 11 20.0002C11.0189 20.0002 11.0378 20.0002 11.0567 20M10.9433 20C7.1034 19.9695 4 16.8468 4 12.9998V8.92285C4 8.41305 4.41305 8 4.92285 8H17.0767C17.5865 8 18 8.41305 18 8.92285V9M11.0567 20H18M11.0567 20C14.8966 19.9695 18 16.8468 18 12.9998M18 9H19.5C20.8807 9 22 10.1193 22 11.5C22 12.8807 20.8807 14 19.5 14H18V12.9998M18 9V12.9998M15 3L14 5M12 3L11 5M9 3L8 5",stroke:"#000000",strokeWidth:"2"}]}},methods:{themeColor:function(e){this.theme="".concat(e),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.themeColor(this.defaultTheme),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,i,s,a,r,h,l){"boolean"!=typeof a&&(h=r,r=a,a=!1);const c="function"==typeof o?o.options:o;let d;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),n&&(c._scopeId=n),s?(d=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,h(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},c._ssrRegister=d):t&&(d=a?function(e){t.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,r(e))}),d)if(c.functional){const e=c.render;c.render=function(t,o){return d.call(o),e(t,o)}}else{const e=c.beforeCreate;c.beforeCreate=e?[].concat(e,d):[d]}return o}const n="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function i(e){return(e,t)=>function(e,t){const o=n?t.media||"default":e,i=a[o]||(a[o]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.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))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",t.media&&i.element.setAttribute("media",t.media),void 0===s&&(s=document.head||document.getElementsByTagName("head")[0]),s.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{const e=i.ids.size-1,t=document.createTextNode(o),n=i.element.childNodes;n[e]&&i.element.removeChild(n[e]),n.length?i.element.insertBefore(t,n[e]):i.element.appendChild(t)}}}(e,t)}let s;const a={};var r=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.showChangeTheme?o("span",{staticClass:"change-theme-box",on:{click:function(t){return e.changeTheme()}}},e._l(e.themeIcons,(function(t,n){return o("span",{key:n},[e.themeName===t.name?o("svg",{class:"icon-"+t.name,attrs:{width:t.width,height:t.height,viewBox:t.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg"}},[o("path",{attrs:{d:t.path,stroke:t.stroke,"stroke-width":t.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round"}})]):e._e()])})),0):e._e()])},staticRenderFns:[]},(function(e){e&&e("data-v-16c949d0_0",{source:":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,i,void 0,void 0),h=function(e){h.installed||(h.installed=!0,e.component("VueMultipleThemes",r))},l={install:h},c=null;return"undefined"!=typeof window?c=window.Vue:"undefined"!=typeof global&&(c=global.Vue),c&&c.use(l),r.install=h,e.default=r,Object.defineProperty(e,"__esModule",{value:!0}),e}({});
|
|
@@ -68,7 +68,6 @@ var script = {
|
|
|
68
68
|
methods: {
|
|
69
69
|
themeColor: function themeColor(_themeColor) {
|
|
70
70
|
this.theme = "".concat(_themeColor);
|
|
71
|
-
document.title = "Multiple Themes in Vue.js";
|
|
72
71
|
var bodyElement = document.body;
|
|
73
72
|
bodyElement.classList.add("app-background");
|
|
74
73
|
var htmlElement = document.documentElement;
|
|
@@ -238,7 +237,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
238
237
|
|
|
239
238
|
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
240
239
|
if (!inject) return;
|
|
241
|
-
inject("data-v-
|
|
240
|
+
inject("data-v-16c949d0_0", {
|
|
242
241
|
source: ":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}",
|
|
243
242
|
map: undefined,
|
|
244
243
|
media: undefined
|
|
@@ -250,7 +249,7 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
|
250
249
|
var __vue_scope_id__ = undefined;
|
|
251
250
|
/* module identifier */
|
|
252
251
|
|
|
253
|
-
var __vue_module_identifier__ = "data-v-
|
|
252
|
+
var __vue_module_identifier__ = "data-v-16c949d0";
|
|
254
253
|
/* functional template */
|
|
255
254
|
|
|
256
255
|
var __vue_is_functional_template__ = false;
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
### Vue.js Multiple Themes
|
|
1
|
+
### Vue.js 2 Multiple Themes
|
|
2
2
|
|
|
3
|
-
The Vue.js Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides easy integration and customization options through CSS variables. This version exclusively uses SVG icons, eliminating the need for icon fonts.
|
|
3
|
+
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides easy integration and customization options through CSS variables. This version exclusively uses SVG icons, eliminating the need for icon fonts.
|
|
4
4
|
|
|
5
5
|
---
|
|
6
6
|
|
|
@@ -46,8 +46,6 @@ After importing and registering the component in your Vue.js application, you ca
|
|
|
46
46
|
You can also customize the styles and color palette by overriding the CSS variables:
|
|
47
47
|
|
|
48
48
|
```scss
|
|
49
|
-
@import "fonts.scss";
|
|
50
|
-
|
|
51
49
|
:root {
|
|
52
50
|
--app-background-color: #ffffff;
|
|
53
51
|
--app-title-color: #333333;
|
|
@@ -47,7 +47,6 @@ export default {
|
|
|
47
47
|
methods: {
|
|
48
48
|
themeColor(themeColor) {
|
|
49
49
|
this.theme = `${themeColor}`;
|
|
50
|
-
document.title = "Multiple Themes in Vue.js";
|
|
51
50
|
const bodyElement = document.body;
|
|
52
51
|
bodyElement.classList.add("app-background");
|
|
53
52
|
const htmlElement = document.documentElement;
|