vue-multiple-themes 2.0.2 → 3.0.0
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.
|
@@ -28,16 +28,9 @@ var script = {
|
|
|
28
28
|
changeThemeOff: {
|
|
29
29
|
default: true,
|
|
30
30
|
type: Boolean
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
data() {
|
|
35
|
-
return {
|
|
36
|
-
theme: this.defaultTheme,
|
|
37
|
-
counter: 0,
|
|
38
|
-
themeName: this.defaultTheme,
|
|
39
|
-
showChangeTheme: this.changeThemeOff,
|
|
40
|
-
themeIcons: [{
|
|
31
|
+
},
|
|
32
|
+
themeIcons: {
|
|
33
|
+
default: () => [{
|
|
41
34
|
name: "dark",
|
|
42
35
|
width: "24px",
|
|
43
36
|
height: "24px",
|
|
@@ -61,7 +54,17 @@ var script = {
|
|
|
61
54
|
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",
|
|
62
55
|
stroke: "#000000",
|
|
63
56
|
strokeWidth: "2"
|
|
64
|
-
}]
|
|
57
|
+
}],
|
|
58
|
+
type: Array
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
|
|
62
|
+
data() {
|
|
63
|
+
return {
|
|
64
|
+
theme: this.defaultTheme,
|
|
65
|
+
counter: 0,
|
|
66
|
+
themeName: this.defaultTheme,
|
|
67
|
+
showChangeTheme: this.changeThemeOff
|
|
65
68
|
};
|
|
66
69
|
},
|
|
67
70
|
|
|
@@ -284,7 +287,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
284
287
|
|
|
285
288
|
const __vue_inject_styles__ = function (inject) {
|
|
286
289
|
if (!inject) return;
|
|
287
|
-
inject("data-v-
|
|
290
|
+
inject("data-v-e3caa164_0", {
|
|
288
291
|
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}",
|
|
289
292
|
map: undefined,
|
|
290
293
|
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}
|
|
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},themeIcons:{default:function(){return[{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"}]},type:Array}},data:function(){return{theme:this.defaultTheme,counter:0,themeName:this.defaultTheme,showChangeTheme:this.changeThemeOff}},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-e3caa164_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}({});
|
|
@@ -30,6 +30,36 @@ var script = {
|
|
|
30
30
|
changeThemeOff: {
|
|
31
31
|
default: true,
|
|
32
32
|
type: Boolean
|
|
33
|
+
},
|
|
34
|
+
themeIcons: {
|
|
35
|
+
default: function _default() {
|
|
36
|
+
return [{
|
|
37
|
+
name: "dark",
|
|
38
|
+
width: "24px",
|
|
39
|
+
height: "24px",
|
|
40
|
+
viewBox: "0 0 24 24",
|
|
41
|
+
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",
|
|
42
|
+
stroke: "#ffffff",
|
|
43
|
+
strokeWidth: "2"
|
|
44
|
+
}, {
|
|
45
|
+
name: "light",
|
|
46
|
+
width: "24px",
|
|
47
|
+
height: "24px",
|
|
48
|
+
viewBox: "0 0 24 24",
|
|
49
|
+
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",
|
|
50
|
+
stroke: "#000000",
|
|
51
|
+
strokeWidth: "2"
|
|
52
|
+
}, {
|
|
53
|
+
name: "sepia",
|
|
54
|
+
width: "24px",
|
|
55
|
+
height: "24px",
|
|
56
|
+
viewBox: "0 0 24 24",
|
|
57
|
+
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",
|
|
58
|
+
stroke: "#000000",
|
|
59
|
+
strokeWidth: "2"
|
|
60
|
+
}];
|
|
61
|
+
},
|
|
62
|
+
type: Array
|
|
33
63
|
}
|
|
34
64
|
},
|
|
35
65
|
data: function data() {
|
|
@@ -37,32 +67,7 @@ var script = {
|
|
|
37
67
|
theme: this.defaultTheme,
|
|
38
68
|
counter: 0,
|
|
39
69
|
themeName: this.defaultTheme,
|
|
40
|
-
showChangeTheme: this.changeThemeOff
|
|
41
|
-
themeIcons: [{
|
|
42
|
-
name: "dark",
|
|
43
|
-
width: "24px",
|
|
44
|
-
height: "24px",
|
|
45
|
-
viewBox: "0 0 24 24",
|
|
46
|
-
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",
|
|
47
|
-
stroke: "#ffffff",
|
|
48
|
-
strokeWidth: "2"
|
|
49
|
-
}, {
|
|
50
|
-
name: "light",
|
|
51
|
-
width: "24px",
|
|
52
|
-
height: "24px",
|
|
53
|
-
viewBox: "0 0 24 24",
|
|
54
|
-
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",
|
|
55
|
-
stroke: "#000000",
|
|
56
|
-
strokeWidth: "2"
|
|
57
|
-
}, {
|
|
58
|
-
name: "sepia",
|
|
59
|
-
width: "24px",
|
|
60
|
-
height: "24px",
|
|
61
|
-
viewBox: "0 0 24 24",
|
|
62
|
-
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",
|
|
63
|
-
stroke: "#000000",
|
|
64
|
-
strokeWidth: "2"
|
|
65
|
-
}]
|
|
70
|
+
showChangeTheme: this.changeThemeOff
|
|
66
71
|
};
|
|
67
72
|
},
|
|
68
73
|
methods: {
|
|
@@ -237,7 +242,7 @@ var __vue_staticRenderFns__ = [];
|
|
|
237
242
|
|
|
238
243
|
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
239
244
|
if (!inject) return;
|
|
240
|
-
inject("data-v-
|
|
245
|
+
inject("data-v-e3caa164_0", {
|
|
241
246
|
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}",
|
|
242
247
|
map: undefined,
|
|
243
248
|
media: undefined
|
|
@@ -249,7 +254,7 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
|
|
|
249
254
|
var __vue_scope_id__ = undefined;
|
|
250
255
|
/* module identifier */
|
|
251
256
|
|
|
252
|
-
var __vue_module_identifier__ = "data-v-
|
|
257
|
+
var __vue_module_identifier__ = "data-v-e3caa164";
|
|
253
258
|
/* functional template */
|
|
254
259
|
|
|
255
260
|
var __vue_is_functional_template__ = false;
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
### Vue.js 2 Multiple Themes
|
|
2
2
|
|
|
3
|
-
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides
|
|
3
|
+
The Vue.js 2 Multiple Themes package allows you to implement multiple themes in your Vue.js application. It provides
|
|
4
|
+
easy integration and customization options through CSS variables. This version exclusively uses SVG icons, eliminating
|
|
5
|
+
the need for icon fonts.
|
|
4
6
|
|
|
5
7
|
---
|
|
6
8
|
|
|
@@ -25,21 +27,23 @@ You can install the package via npm or yarn:
|
|
|
25
27
|
After importing and registering the component in your Vue.js application, you can use it in your template:
|
|
26
28
|
|
|
27
29
|
```vue
|
|
30
|
+
|
|
28
31
|
<template>
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
<div>
|
|
33
|
+
<vue-multiple-themes
|
|
34
|
+
:defaultTheme="'light'"
|
|
35
|
+
:themeColorList="['light', 'dark', 'sepia']"
|
|
36
|
+
:changeThemeOff="true"
|
|
37
|
+
></vue-multiple-themes>
|
|
38
|
+
</div>
|
|
36
39
|
</template>
|
|
37
40
|
|
|
38
41
|
<script>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
42
|
+
import VueMultipleThemes from "vue-multiple-themes";
|
|
43
|
+
|
|
44
|
+
export default {
|
|
45
|
+
components: {VueMultipleThemes}
|
|
46
|
+
};
|
|
43
47
|
</script>
|
|
44
48
|
```
|
|
45
49
|
|
|
@@ -87,9 +91,13 @@ You can also customize the styles and color palette by overriding the CSS variab
|
|
|
87
91
|
|
|
88
92
|
### Attributes
|
|
89
93
|
|
|
90
|
-
| Attribute | Description
|
|
91
|
-
|
|
92
|
-
| defaultTheme | Default theme color
|
|
93
|
-
| themeColorList | List of available theme colors
|
|
94
|
-
| changeThemeOff | Show or hide the theme change button
|
|
95
|
-
| extraClass | Additional custom class for the icon wrapper
|
|
94
|
+
| Attribute | Description | Type | Default |
|
|
95
|
+
|----------------|----------------------------------------------|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
96
|
+
| defaultTheme | Default theme color | String | 'light' |
|
|
97
|
+
| themeColorList | List of available theme colors | Array | ['light', 'dark', 'sepia'] |
|
|
98
|
+
| changeThemeOff | Show or hide the theme change button | Boolean | true |
|
|
99
|
+
| extraClass | Additional custom class for the icon wrapper | String | null |
|
|
100
|
+
| themeIcons | SVG icon array | Array | [{ 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" }] |
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
@@ -30,6 +30,14 @@ export default {
|
|
|
30
30
|
default: true,
|
|
31
31
|
type: Boolean,
|
|
32
32
|
},
|
|
33
|
+
themeIcons: {
|
|
34
|
+
default: () => [
|
|
35
|
+
{ 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" },
|
|
36
|
+
{ 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" },
|
|
37
|
+
{ 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" }
|
|
38
|
+
],
|
|
39
|
+
type: Array
|
|
40
|
+
}
|
|
33
41
|
},
|
|
34
42
|
data() {
|
|
35
43
|
return {
|
|
@@ -37,11 +45,6 @@ export default {
|
|
|
37
45
|
counter: 0,
|
|
38
46
|
themeName: this.defaultTheme,
|
|
39
47
|
showChangeTheme: this.changeThemeOff,
|
|
40
|
-
themeIcons: [
|
|
41
|
-
{ 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" },
|
|
42
|
-
{ 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" },
|
|
43
|
-
{ 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" }
|
|
44
|
-
]
|
|
45
48
|
};
|
|
46
49
|
},
|
|
47
50
|
methods: {
|