@duxweb/dvha-core 1.0.38 → 1.0.40
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.
package/dist/cjs/hooks/theme.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("@vueuse/core"),F=require("colorizr"),H=require("pinia"),s=require("vue"),J=require("../config/color.cjs");require("lodash-es");const K=require("../stores/theme.cjs"),Q=require("./manage.cjs");function W(){const u=K.useThemeStore(),{mode:E}=H.storeToRefs(u),$=q.useColorMode({storageRef:E}),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("@vueuse/core"),F=require("colorizr"),H=require("pinia"),s=require("vue"),J=require("../config/color.cjs");require("lodash-es");const K=require("../stores/theme.cjs"),Q=require("./manage.cjs");function W(){const u=K.useThemeStore(),{mode:E}=H.storeToRefs(u),$=q.useColorMode({storageRef:E}),d=Q.useManage(),{state:S,next:L,go:v}=q.useCycleList(["dark","light","auto"],{initialValue:$.store.value});s.watchEffect(()=>{$.value=S.value});const V=t=>{switch(t){case"auto":v(2);break;case"light":v(1);break;case"dark":v(0);break}},f=s.computed(()=>{const{system:t,store:e}=$;return e.value==="auto"?t.value==="dark":e.value==="dark"}),y=s.computed(()=>f.value?{logo:d.config?.theme?.darkLogo,appLogo:d.config?.theme?.appDarkLogo,banner:d.config?.theme?.darkBanner}:{logo:d.config?.theme?.logo,appLogo:d.config?.theme?.appLogo,banner:d.config?.theme?.banner}),r={...{colors:J.themeColor,colorTypes:["primary","info","success","warning","error","gray"],colorShades:["50","100","200","300","400","500","600","700","800","900","950"],colorScenes:{light:{default:{default:"600",hover:"600",pressed:"700",focus:"500",disabled:"300"}},dark:{default:{default:"500",hover:"400",pressed:"300",focus:"500",disabled:"600"}}},colorSemantic:{light:{text:{dimmed:"300",muted:"400",toned:"600",base:"800",highlighted:"900",inverted:"white"},bg:{base:"white",muted:"50",elevated:"100",accented:"200",inverted:"900"},border:{base:"100",muted:"200",accented:"300",inverted:"900"}},dark:{text:{dimmed:"600",muted:"500",toned:"300",base:"400",highlighted:"100",inverted:"black"},bg:{base:"950",muted:"900",elevated:"800",accented:"700",inverted:"100"},border:{base:"900",muted:"800",accented:"700",inverted:"100"}}},colorBase:{white:"#ffffff",black:"#000000"}},...d.config?.theme?.config},{colorShades:C,colorTypes:k}=r,g=s.computed(()=>u.theme),h=s.computed(()=>Object.keys(r.colors)),x=["default","hover","pressed","focus","disabled"];function B(){return f.value?r.colorScenes.dark:r.colorScenes.light}function w(t,e){const o=B(),l=o.default;if(o.overrides?.[t]){const i=o.overrides[t]?.[e];if(i)return i}return l[e]||"500"}function T(t,e){const o=g.value[t];return r.colors[o]?.[e]||""}function n(t,e,o){const c=(f.value?r.colorSemantic.dark:r.colorSemantic.light)[t][e];return c==="white"||c==="black"?`var(--ui-color-${c})`:`var(--base-color-${o}-${c})`}const p=t=>{const e=F.hex2rgb(t);return`${e.r} ${e.g} ${e.b}`};function M(){const t=[];Object.entries(r.colors).forEach(([c,i])=>{typeof i=="object"&&Object.entries(i).forEach(([a,m])=>{try{t.push(`--base-color-${c}-${a}: ${p(m)};`)}catch{t.push(`--base-color-${c}-${a}: ${m};`)}})});const e=[];k.forEach(c=>{const i=g.value[c];C.forEach(a=>{e.push(`--ui-color-${c}-${a}: var(--base-color-${i}-${a});`)}),x.forEach(a=>{const m=w(c,a);a==="default"?e.push(`--ui-color-${c}: var(--base-color-${i}-${m});`):e.push(`--ui-color-${c}-${a}: var(--base-color-${i}-${m});`)})});const o=g.value.gray,l=[`--ui-color-white: ${p(r.colorBase?.white||"#ffffff")};`,`--ui-color-black: ${p(r.colorBase?.black||"#000000")};`,`--ui-text-dimmed: ${n("text","dimmed",o)};`,`--ui-text-muted: ${n("text","muted",o)};`,`--ui-text-toned: ${n("text","toned",o)};`,`--ui-text: ${n("text","base",o)};`,`--ui-text-highlighted: ${n("text","highlighted",o)};`,`--ui-text-inverted: ${n("text","inverted",o)};`,`--ui-bg: ${n("bg","base",o)};`,`--ui-bg-muted: ${n("bg","muted",o)};`,`--ui-bg-elevated: ${n("bg","elevated",o)};`,`--ui-bg-accented: ${n("bg","accented",o)};`,`--ui-bg-inverted: ${n("bg","inverted",o)};`,`--ui-border: ${n("border","base",o)};`,`--ui-border-muted: ${n("border","muted",o)};`,`--ui-border-accented: ${n("border","accented",o)};`,`--ui-border-inverted: ${n("border","inverted",o)};`];return`:root {
|
|
2
2
|
${t.join(`
|
|
3
3
|
`)}
|
|
4
4
|
${e.join(`
|
|
5
5
|
`)}
|
|
6
6
|
${l.join(`
|
|
7
7
|
`)}
|
|
8
|
-
}`}let
|
|
8
|
+
}`}let b=null;function j(){const t=M();b||(b=document.createElement("style"),b.id="dvha-variables",document.head.appendChild(b)),b.textContent=t}function O(){u.cssInit||(u.setCssInit(),j())}s.watch([g,f],()=>{u.cssInit&&j()},{deep:!0,immediate:!1});function I(t,e){h.value.includes(e)?u.setThemeColor(t,e):console.warn(`Color "${e}" is not available`)}function z(t){u.setThemeColors(t)}function R(){u.resetTheme()}function D(t,e,o=!1){return o?`--ui-color-${t}-${e}`:T(t,e)}function U(t,e,o=!1){if(e||(e="default"),o)return e==="default"?`--ui-color-${t})`:`--ui-color-${t}-${e})`;const l=w(t,e);return T(t,l)}function G(t,e,o=!1){if(o){let a;switch(t){case"text":a=e==="base"?"--ui-text":`--ui-text-${e}`;break;case"bg":a=e==="base"?"--ui-bg":`--ui-bg-${e}`;break;case"border":a=e==="base"?"--ui-border":`--ui-border-${e}`;break;default:a=`--ui-${t}-${e}`}return`${a}`}const l=g.value.gray,i=(f.value?r.colorSemantic.dark:r.colorSemantic.light)[t][e];return i==="white"?r.colorBase?.white||"#ffffff":i==="black"?r.colorBase?.black||"#000000":r.colors[l]?.[i]||""}const P=s.computed(()=>h.value?.filter(t=>["slate","gray","zinc","neutral","stone"].includes(t))),A=s.computed(()=>h.value?.filter(t=>!["slate","gray","zinc","neutral","stone"].includes(t)));return{toggle:L,mode:S,setMode:V,isDark:f,resources:y,config:s.readonly(r),colorMapping:s.readonly(g),colors:h,neutralColors:P,primaryColors:A,colorShades:C,colorTypes:k,colorScenes:x,cssInit:O,cssReset:R,setColor:I,setColors:z,getSceneColor:U,getShadeColor:D,getSemanticColor:G}}exports.useTheme=W;
|
package/dist/esm/hooks/theme.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
import { useColorMode as H, useCycleList as J } from "@vueuse/core";
|
|
2
2
|
import { hex2rgb as K } from "colorizr";
|
|
3
3
|
import { storeToRefs as P } from "pinia";
|
|
4
|
-
import { watchEffect as Q, computed as
|
|
4
|
+
import { watchEffect as Q, computed as b, watch as W, readonly as L } from "vue";
|
|
5
5
|
import { themeColor as X } from "../config/color.js";
|
|
6
6
|
import "lodash-es";
|
|
7
7
|
import { useThemeStore as Y } from "../stores/theme.js";
|
|
8
8
|
import { useManage as Z } from "./manage.js";
|
|
9
9
|
function ie() {
|
|
10
|
-
const s = Y(), { mode:
|
|
11
|
-
storageRef:
|
|
12
|
-
}),
|
|
10
|
+
const s = Y(), { mode: j } = P(s), $ = H({
|
|
11
|
+
storageRef: j
|
|
12
|
+
}), u = Z(), { state: S, next: B, go: v } = J(["dark", "light", "auto"], {
|
|
13
13
|
initialValue: $.store.value
|
|
14
14
|
});
|
|
15
15
|
Q(() => {
|
|
16
16
|
$.value = S.value;
|
|
17
17
|
});
|
|
18
|
-
const
|
|
18
|
+
const V = (t) => {
|
|
19
19
|
switch (t) {
|
|
20
20
|
case "auto":
|
|
21
21
|
v(2);
|
|
@@ -27,15 +27,17 @@ function ie() {
|
|
|
27
27
|
v(0);
|
|
28
28
|
break;
|
|
29
29
|
}
|
|
30
|
-
},
|
|
30
|
+
}, d = b(() => {
|
|
31
31
|
const { system: t, store: e } = $;
|
|
32
32
|
return e.value === "auto" ? t.value === "dark" : e.value === "dark";
|
|
33
|
-
}),
|
|
34
|
-
logo:
|
|
35
|
-
|
|
33
|
+
}), M = b(() => d.value ? {
|
|
34
|
+
logo: u.config?.theme?.darkLogo,
|
|
35
|
+
appLogo: u.config?.theme?.appDarkLogo,
|
|
36
|
+
banner: u.config?.theme?.darkBanner
|
|
36
37
|
} : {
|
|
37
|
-
logo:
|
|
38
|
-
|
|
38
|
+
logo: u.config?.theme?.logo,
|
|
39
|
+
appLogo: u.config?.theme?.appLogo,
|
|
40
|
+
banner: u.config?.theme?.banner
|
|
39
41
|
}), r = { ...{
|
|
40
42
|
colors: X,
|
|
41
43
|
// 色彩类型
|
|
@@ -65,12 +67,12 @@ function ie() {
|
|
|
65
67
|
}
|
|
66
68
|
},
|
|
67
69
|
colorBase: { white: "#ffffff", black: "#000000" }
|
|
68
|
-
}, ...
|
|
69
|
-
function
|
|
70
|
-
return
|
|
70
|
+
}, ...u.config?.theme?.config }, { colorShades: C, colorTypes: x } = r, f = b(() => s.theme), h = b(() => Object.keys(r.colors)), k = ["default", "hover", "pressed", "focus", "disabled"];
|
|
71
|
+
function y() {
|
|
72
|
+
return d.value ? r.colorScenes.dark : r.colorScenes.light;
|
|
71
73
|
}
|
|
72
74
|
function w(t, e) {
|
|
73
|
-
const o =
|
|
75
|
+
const o = y(), l = o.default;
|
|
74
76
|
if (o.overrides?.[t]) {
|
|
75
77
|
const i = o.overrides[t]?.[e];
|
|
76
78
|
if (i)
|
|
@@ -79,39 +81,39 @@ function ie() {
|
|
|
79
81
|
return l[e] || "500";
|
|
80
82
|
}
|
|
81
83
|
function T(t, e) {
|
|
82
|
-
const o =
|
|
84
|
+
const o = f.value[t];
|
|
83
85
|
return r.colors[o]?.[e] || "";
|
|
84
86
|
}
|
|
85
87
|
function n(t, e, o) {
|
|
86
|
-
const c = (
|
|
88
|
+
const c = (d.value ? r.colorSemantic.dark : r.colorSemantic.light)[t][e];
|
|
87
89
|
return c === "white" || c === "black" ? `var(--ui-color-${c})` : `var(--base-color-${o}-${c})`;
|
|
88
90
|
}
|
|
89
91
|
const p = (t) => {
|
|
90
92
|
const e = K(t);
|
|
91
93
|
return `${e.r} ${e.g} ${e.b}`;
|
|
92
94
|
};
|
|
93
|
-
function
|
|
95
|
+
function I() {
|
|
94
96
|
const t = [];
|
|
95
97
|
Object.entries(r.colors).forEach(([c, i]) => {
|
|
96
|
-
typeof i == "object" && Object.entries(i).forEach(([a,
|
|
98
|
+
typeof i == "object" && Object.entries(i).forEach(([a, m]) => {
|
|
97
99
|
try {
|
|
98
|
-
t.push(`--base-color-${c}-${a}: ${p(
|
|
100
|
+
t.push(`--base-color-${c}-${a}: ${p(m)};`);
|
|
99
101
|
} catch {
|
|
100
|
-
t.push(`--base-color-${c}-${a}: ${
|
|
102
|
+
t.push(`--base-color-${c}-${a}: ${m};`);
|
|
101
103
|
}
|
|
102
104
|
});
|
|
103
105
|
});
|
|
104
106
|
const e = [];
|
|
105
107
|
x.forEach((c) => {
|
|
106
|
-
const i =
|
|
108
|
+
const i = f.value[c];
|
|
107
109
|
C.forEach((a) => {
|
|
108
110
|
e.push(`--ui-color-${c}-${a}: var(--base-color-${i}-${a});`);
|
|
109
111
|
}), k.forEach((a) => {
|
|
110
|
-
const
|
|
111
|
-
a === "default" ? e.push(`--ui-color-${c}: var(--base-color-${i}-${
|
|
112
|
+
const m = w(c, a);
|
|
113
|
+
a === "default" ? e.push(`--ui-color-${c}: var(--base-color-${i}-${m});`) : e.push(`--ui-color-${c}-${a}: var(--base-color-${i}-${m});`);
|
|
112
114
|
});
|
|
113
115
|
});
|
|
114
|
-
const o =
|
|
116
|
+
const o = f.value.gray, l = [
|
|
115
117
|
`--ui-color-white: ${p(r.colorBase?.white || "#ffffff")};`,
|
|
116
118
|
`--ui-color-black: ${p(r.colorBase?.black || "#000000")};`,
|
|
117
119
|
`--ui-text-dimmed: ${n("text", "dimmed", o)};`,
|
|
@@ -139,15 +141,15 @@ function ie() {
|
|
|
139
141
|
`)}
|
|
140
142
|
}`;
|
|
141
143
|
}
|
|
142
|
-
let
|
|
144
|
+
let g = null;
|
|
143
145
|
function E() {
|
|
144
|
-
const t =
|
|
145
|
-
|
|
146
|
+
const t = I();
|
|
147
|
+
g || (g = document.createElement("style"), g.id = "dvha-variables", document.head.appendChild(g)), g.textContent = t;
|
|
146
148
|
}
|
|
147
149
|
function O() {
|
|
148
150
|
s.cssInit || (s.setCssInit(), E());
|
|
149
151
|
}
|
|
150
|
-
W([
|
|
152
|
+
W([f, d], () => {
|
|
151
153
|
s.cssInit && E();
|
|
152
154
|
}, { deep: !0, immediate: !1 });
|
|
153
155
|
function R(t, e) {
|
|
@@ -186,18 +188,18 @@ function ie() {
|
|
|
186
188
|
}
|
|
187
189
|
return `${a}`;
|
|
188
190
|
}
|
|
189
|
-
const l =
|
|
191
|
+
const l = f.value.gray, i = (d.value ? r.colorSemantic.dark : r.colorSemantic.light)[t][e];
|
|
190
192
|
return i === "white" ? r.colorBase?.white || "#ffffff" : i === "black" ? r.colorBase?.black || "#000000" : r.colors[l]?.[i] || "";
|
|
191
193
|
}
|
|
192
|
-
const A =
|
|
194
|
+
const A = b(() => h.value?.filter((t) => ["slate", "gray", "zinc", "neutral", "stone"].includes(t))), F = b(() => h.value?.filter((t) => !["slate", "gray", "zinc", "neutral", "stone"].includes(t)));
|
|
193
195
|
return {
|
|
194
|
-
toggle:
|
|
196
|
+
toggle: B,
|
|
195
197
|
mode: S,
|
|
196
|
-
setMode:
|
|
197
|
-
isDark:
|
|
198
|
-
resources:
|
|
199
|
-
config:
|
|
200
|
-
colorMapping:
|
|
198
|
+
setMode: V,
|
|
199
|
+
isDark: d,
|
|
200
|
+
resources: M,
|
|
201
|
+
config: L(r),
|
|
202
|
+
colorMapping: L(f),
|
|
201
203
|
colors: h,
|
|
202
204
|
neutralColors: A,
|
|
203
205
|
primaryColors: F,
|
|
@@ -3,12 +3,16 @@ import type { ThemeState } from '../stores';
|
|
|
3
3
|
export interface IConfigTheme {
|
|
4
4
|
logo?: string;
|
|
5
5
|
darkLogo?: string;
|
|
6
|
+
appLogo?: string;
|
|
7
|
+
appDarkLogo?: string;
|
|
6
8
|
banner?: string;
|
|
7
9
|
darkBanner?: string;
|
|
8
10
|
config?: ThemeConfig;
|
|
9
11
|
defaultTheme?: ThemeState;
|
|
12
|
+
[key: string]: any;
|
|
10
13
|
}
|
|
11
14
|
export interface ITheme {
|
|
12
15
|
logo?: string;
|
|
16
|
+
appLogo?: string;
|
|
13
17
|
banner?: string;
|
|
14
18
|
}
|