@maz-ui/themes 4.1.3 → 4.1.4
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.
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { ref as d, onMounted as k, computed as s, toValue as
|
|
2
|
-
import { setCookie as
|
|
3
|
-
import { generateCriticalCSS as
|
|
4
|
-
import { getColorMode as
|
|
5
|
-
import { getPreset as
|
|
6
|
-
import { mergePresets as
|
|
7
|
-
function
|
|
1
|
+
import { ref as d, onMounted as k, computed as s, toValue as w, watch as y, watchEffect as T, inject as C, getCurrentInstance as S } from "vue";
|
|
2
|
+
import { setCookie as z } from "../utils/cookie-storage.js";
|
|
3
|
+
import { generateCriticalCSS as E, generateFullCSS as L, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
|
|
4
|
+
import { getColorMode as x, isSystemPrefersDark as D } from "../utils/get-color-mode.js";
|
|
5
|
+
import { getPreset as I } from "../utils/get-preset.js";
|
|
6
|
+
import { mergePresets as O } from "../utils/preset-merger.js";
|
|
7
|
+
function $() {
|
|
8
8
|
return typeof document > "u" || typeof globalThis.window > "u";
|
|
9
9
|
}
|
|
10
|
-
function
|
|
10
|
+
function F() {
|
|
11
11
|
return typeof document < "u";
|
|
12
12
|
}
|
|
13
|
-
function
|
|
13
|
+
function R(e) {
|
|
14
14
|
return !!e;
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function U(e, o, r = {}) {
|
|
17
17
|
const {
|
|
18
|
-
internalWindow: u =
|
|
18
|
+
internalWindow: u = F() ? globalThis : void 0,
|
|
19
19
|
...l
|
|
20
20
|
} = r;
|
|
21
21
|
let n;
|
|
@@ -25,12 +25,12 @@ function R(e, o, r = {}) {
|
|
|
25
25
|
});
|
|
26
26
|
const m = () => {
|
|
27
27
|
n && (n.disconnect(), n = void 0);
|
|
28
|
-
},
|
|
29
|
-
const a =
|
|
28
|
+
}, b = s(() => {
|
|
29
|
+
const a = w(e);
|
|
30
30
|
let i;
|
|
31
|
-
return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(
|
|
32
|
-
}),
|
|
33
|
-
|
|
31
|
+
return a && "$el" in a ? i = a.$el : a && (i = a), new Set([i].filter(R));
|
|
32
|
+
}), P = y(
|
|
33
|
+
b,
|
|
34
34
|
(a) => {
|
|
35
35
|
m(), c.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, l)));
|
|
36
36
|
},
|
|
@@ -39,7 +39,7 @@ function R(e, o, r = {}) {
|
|
|
39
39
|
return {
|
|
40
40
|
isSupported: c,
|
|
41
41
|
stop: () => {
|
|
42
|
-
|
|
42
|
+
P(), m();
|
|
43
43
|
},
|
|
44
44
|
takeRecords: () => n?.takeRecords()
|
|
45
45
|
};
|
|
@@ -48,11 +48,11 @@ const t = d();
|
|
|
48
48
|
function M(e) {
|
|
49
49
|
typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
|
|
50
50
|
}
|
|
51
|
-
function
|
|
51
|
+
function j() {
|
|
52
52
|
const e = S()?.appContext.app;
|
|
53
53
|
e && t.value && (e.config.globalProperties.$mazThemeState = t.value);
|
|
54
54
|
}
|
|
55
|
-
function
|
|
55
|
+
function N(e) {
|
|
56
56
|
if (e.currentPreset && e.colorMode !== void 0) {
|
|
57
57
|
g({
|
|
58
58
|
currentPreset: e.currentPreset,
|
|
@@ -64,7 +64,7 @@ function j(e) {
|
|
|
64
64
|
});
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
67
|
-
const o =
|
|
67
|
+
const o = x(e.colorMode), r = o === "auto" ? D() : o === "dark";
|
|
68
68
|
g({
|
|
69
69
|
currentPreset: e.currentPreset,
|
|
70
70
|
colorMode: o,
|
|
@@ -81,46 +81,46 @@ function g(e) {
|
|
|
81
81
|
};
|
|
82
82
|
o.addEventListener("change", r), r();
|
|
83
83
|
}
|
|
84
|
-
|
|
85
|
-
t.value && (M(t.value),
|
|
84
|
+
T(() => {
|
|
85
|
+
t.value && (M(t.value), j());
|
|
86
86
|
});
|
|
87
87
|
}
|
|
88
|
-
const
|
|
88
|
+
const W = s({
|
|
89
89
|
get: () => t.value?.colorMode,
|
|
90
90
|
set: (e) => f(e)
|
|
91
|
-
}),
|
|
92
|
-
async function
|
|
91
|
+
}), _ = s(() => t.value?.isDark ?? !1), A = s(() => t.value?.strategy), G = s(() => t.value?.mode), Q = s(() => t.value?.darkModeStrategy), h = s(() => t.value?.currentPreset), V = s(() => h.value?.name);
|
|
92
|
+
async function Y(e) {
|
|
93
93
|
if (!t.value)
|
|
94
94
|
return;
|
|
95
|
-
const o = typeof e == "string" ? await
|
|
95
|
+
const o = typeof e == "string" ? await I(e) : e;
|
|
96
96
|
if (!o || !t.value.currentPreset) {
|
|
97
97
|
console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
|
-
const r = "name" in o && o.name !== t.value.currentPreset.name ? o :
|
|
100
|
+
const r = "name" in o && o.name !== t.value.currentPreset.name ? o : O(t.value.currentPreset, o);
|
|
101
101
|
if (t.value.currentPreset = r, t.value.strategy === "runtime" || t.value.strategy === "hybrid") {
|
|
102
102
|
const u = {
|
|
103
103
|
mode: t.value.mode,
|
|
104
104
|
darkSelectorStrategy: t.value.darkModeStrategy,
|
|
105
105
|
prefix: "maz"
|
|
106
|
-
}, l =
|
|
106
|
+
}, l = E(r, u), n = L(r, u);
|
|
107
107
|
p(v.CRITICAL, l), p(v.FULL, n);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
function f(e) {
|
|
111
|
-
t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", M(t.value),
|
|
111
|
+
t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", M(t.value), z("maz-color-mode", e));
|
|
112
112
|
}
|
|
113
|
-
function
|
|
113
|
+
function q() {
|
|
114
114
|
t.value && f(t.value.isDark ? "light" : "dark");
|
|
115
115
|
}
|
|
116
|
-
function
|
|
116
|
+
function oe() {
|
|
117
117
|
const e = d();
|
|
118
118
|
k(() => {
|
|
119
119
|
e.value = document.documentElement;
|
|
120
|
-
}),
|
|
120
|
+
}), U(
|
|
121
121
|
e,
|
|
122
122
|
() => {
|
|
123
|
-
!t.value ||
|
|
123
|
+
!t.value || $() || (t.value.isDark = document.documentElement.classList.contains("dark"));
|
|
124
124
|
},
|
|
125
125
|
{
|
|
126
126
|
attributes: !0
|
|
@@ -128,7 +128,7 @@ function te() {
|
|
|
128
128
|
);
|
|
129
129
|
let o;
|
|
130
130
|
try {
|
|
131
|
-
if (o =
|
|
131
|
+
if (o = C("mazThemeState", void 0), !o)
|
|
132
132
|
throw new Error("mazThemeState not found");
|
|
133
133
|
} catch {
|
|
134
134
|
const r = S();
|
|
@@ -137,25 +137,26 @@ function te() {
|
|
|
137
137
|
if (o && (t.value ? (typeof document > "u" || typeof globalThis.window > "u") && (t.value = {
|
|
138
138
|
...t.value,
|
|
139
139
|
...o
|
|
140
|
-
}) :
|
|
140
|
+
}) : N(o)), y(() => o?.currentPreset, (r) => {
|
|
141
141
|
t.value && r && (t.value.currentPreset = r);
|
|
142
142
|
}, {
|
|
143
143
|
once: !0
|
|
144
144
|
}), !t.value)
|
|
145
145
|
throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
|
|
146
146
|
return {
|
|
147
|
-
presetName:
|
|
148
|
-
colorMode:
|
|
149
|
-
isDark:
|
|
150
|
-
strategy:
|
|
151
|
-
updateTheme:
|
|
147
|
+
presetName: V,
|
|
148
|
+
colorMode: W,
|
|
149
|
+
isDark: _,
|
|
150
|
+
strategy: A,
|
|
151
|
+
updateTheme: Y,
|
|
152
152
|
setColorMode: f,
|
|
153
|
-
toggleDarkMode:
|
|
154
|
-
mode:
|
|
155
|
-
darkModeStrategy:
|
|
153
|
+
toggleDarkMode: q,
|
|
154
|
+
mode: G,
|
|
155
|
+
darkModeStrategy: Q,
|
|
156
|
+
currentPreset: h
|
|
156
157
|
};
|
|
157
158
|
}
|
|
158
159
|
export {
|
|
159
160
|
g as initThemeState,
|
|
160
|
-
|
|
161
|
+
oe as useTheme
|
|
161
162
|
};
|
|
@@ -13,6 +13,7 @@ export declare function useTheme(): {
|
|
|
13
13
|
toggleDarkMode: typeof toggleDarkMode;
|
|
14
14
|
mode: import('vue').ComputedRef<ThemeMode>;
|
|
15
15
|
darkModeStrategy: import('vue').ComputedRef<DarkModeStrategy>;
|
|
16
|
+
currentPreset: import('vue').ComputedRef<ThemePreset | undefined>;
|
|
16
17
|
};
|
|
17
18
|
export {};
|
|
18
19
|
//# sourceMappingURL=useTheme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;
|
|
1
|
+
{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAcD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;;EAuEvB"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maz-ui/themes",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "4.1.
|
|
4
|
+
"version": "4.1.4",
|
|
5
5
|
"description": "Theme system for Maz-UI with TypeScript support and CSS variables",
|
|
6
6
|
"author": "Louis Mazel <me@loicmazuel.com>",
|
|
7
7
|
"license": "MIT",
|
|
@@ -102,5 +102,5 @@
|
|
|
102
102
|
"lint-staged": {
|
|
103
103
|
"*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "47076f614176b9d1f95f83e797593a8264148a9b"
|
|
106
106
|
}
|