@gx-design-vue/context 0.0.5-alpha.5 → 0.0.5-alpha.7
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,4 +1,3 @@
|
|
|
1
|
-
import * as _$vue from "vue";
|
|
2
1
|
import { PropType, SlotsType } from "vue";
|
|
3
2
|
|
|
4
3
|
//#region src/context/ContextProvider.d.ts
|
|
@@ -19,7 +18,7 @@ declare const contextProps: {
|
|
|
19
18
|
required: boolean;
|
|
20
19
|
};
|
|
21
20
|
};
|
|
22
|
-
declare const ContextProvider:
|
|
21
|
+
declare const ContextProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
23
22
|
contextKey: {
|
|
24
23
|
type: PropType<ContextProviderProps["contextKey"]>;
|
|
25
24
|
required: boolean;
|
|
@@ -28,7 +27,7 @@ declare const ContextProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
|
|
28
27
|
type: PropType<ContextProviderProps["value"]>;
|
|
29
28
|
required: boolean;
|
|
30
29
|
};
|
|
31
|
-
}>, () => any, {}, {}, {},
|
|
30
|
+
}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
32
31
|
contextKey: {
|
|
33
32
|
type: PropType<ContextProviderProps["contextKey"]>;
|
|
34
33
|
required: boolean;
|
|
@@ -37,7 +36,7 @@ declare const ContextProvider: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
|
|
37
36
|
type: PropType<ContextProviderProps["value"]>;
|
|
38
37
|
required: boolean;
|
|
39
38
|
};
|
|
40
|
-
}>> & Readonly<{}>, {}, SlotsType<ContextProviderSlots>, {}, {}, string,
|
|
39
|
+
}>> & Readonly<{}>, {}, SlotsType<ContextProviderSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
41
40
|
declare function useContextProvider<T = any>(contextInjectKey: string, defaultValue?: T): T & {
|
|
42
41
|
contextId: string;
|
|
43
42
|
};
|
package/dist/context.esm.js
CHANGED
|
@@ -1,30 +1,31 @@
|
|
|
1
|
-
import { computed as e,
|
|
1
|
+
import { computed as e, defineComponent as t, inject as n, nextTick as r, provide as i, ref as a, toRefs as o, watch as s } from "vue";
|
|
2
|
+
import { useColorMode as c, useDark as l, useToggle as u } from "@vueuse/core";
|
|
2
3
|
//#region src/context/index.ts
|
|
3
|
-
function
|
|
4
|
-
let
|
|
4
|
+
function d(e, t) {
|
|
5
|
+
let r = Symbol(e);
|
|
5
6
|
return {
|
|
6
7
|
provideContext: (e) => {
|
|
7
|
-
|
|
8
|
+
i(r, e);
|
|
8
9
|
},
|
|
9
|
-
useInjectContext: (e) =>
|
|
10
|
-
contextInjectKey:
|
|
10
|
+
useInjectContext: (e) => n(r, e || t || {}),
|
|
11
|
+
contextInjectKey: r
|
|
11
12
|
};
|
|
12
13
|
}
|
|
13
14
|
//#endregion
|
|
14
15
|
//#region ../pro-utils/dist/is/type.js
|
|
15
|
-
function
|
|
16
|
+
function f(e, t) {
|
|
16
17
|
return Object.prototype.toString.call(e) === `[object ${t}]`;
|
|
17
18
|
}
|
|
18
|
-
function
|
|
19
|
-
return e !== null &&
|
|
19
|
+
function p(e) {
|
|
20
|
+
return e !== null && f(e, "Object");
|
|
20
21
|
}
|
|
21
22
|
//#endregion
|
|
22
23
|
//#region ../pro-utils/dist/string/uuid.js
|
|
23
|
-
var
|
|
24
|
-
function
|
|
24
|
+
var m = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
|
|
25
|
+
function h() {
|
|
25
26
|
return {
|
|
26
27
|
uuid(e, t) {
|
|
27
|
-
let n =
|
|
28
|
+
let n = m, r = t || n.length;
|
|
28
29
|
if (e) {
|
|
29
30
|
let t = "";
|
|
30
31
|
for (let i = 0; i < e; i += 1) t += n[Math.floor(Math.random() * r)];
|
|
@@ -36,7 +37,7 @@ function T() {
|
|
|
36
37
|
});
|
|
37
38
|
},
|
|
38
39
|
uuidFast() {
|
|
39
|
-
let e =
|
|
40
|
+
let e = m, t = Array.from({ length: 36 });
|
|
40
41
|
for (let n = 0; n < 36; n += 1) if (n === 8 || n === 13 || n === 18 || n === 23) t[n] = "-";
|
|
41
42
|
else if (n === 14) t[n] = "4";
|
|
42
43
|
else {
|
|
@@ -58,11 +59,11 @@ function T() {
|
|
|
58
59
|
}
|
|
59
60
|
//#endregion
|
|
60
61
|
//#region src/context/ContextProvider.tsx
|
|
61
|
-
var
|
|
62
|
-
function
|
|
63
|
-
return
|
|
62
|
+
var g = null;
|
|
63
|
+
function _(e) {
|
|
64
|
+
return g || (g = Symbol(e), g);
|
|
64
65
|
}
|
|
65
|
-
var
|
|
66
|
+
var v = /* @__PURE__ */ t({
|
|
66
67
|
name: "ContextProvider",
|
|
67
68
|
props: {
|
|
68
69
|
contextKey: {
|
|
@@ -75,371 +76,17 @@ var O = /* @__PURE__ */ n({
|
|
|
75
76
|
}
|
|
76
77
|
},
|
|
77
78
|
slots: Object,
|
|
78
|
-
setup: (e, { slots: t }) => (e.contextKey && e.value &&
|
|
79
|
-
...
|
|
80
|
-
contextId: `${e.contextKey}-${
|
|
79
|
+
setup: (e, { slots: t }) => (e.contextKey && e.value && p(e.value) ? i(_(e.contextKey), {
|
|
80
|
+
...o(e.value),
|
|
81
|
+
contextId: `${e.contextKey}-${h().uuid(10)}`
|
|
81
82
|
}) : console.warn("[ContextProvider]: contextKey is required"), () => t.default?.())
|
|
82
83
|
});
|
|
83
|
-
function
|
|
84
|
-
if (typeof
|
|
84
|
+
function y(e, t) {
|
|
85
|
+
if (typeof g == "symbol") return n(_(e), t || {});
|
|
85
86
|
}
|
|
86
87
|
//#endregion
|
|
87
88
|
//#region src/theme-context/context.ts
|
|
88
|
-
var { provideContext:
|
|
89
|
-
let t = e[0], n = r()?.proxy ?? i();
|
|
90
|
-
if (n == null && !a()) throw Error("injectLocal must be called in setup");
|
|
91
|
-
return n && M.has(n) && t in M.get(n) ? M.get(n)[t] : o(...e);
|
|
92
|
-
}, P = typeof window < "u" && typeof document < "u";
|
|
93
|
-
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
|
|
94
|
-
var ee = Object.prototype.toString, te = (e) => ee.call(e) === "[object Object]", F = () => {};
|
|
95
|
-
function I(...e) {
|
|
96
|
-
if (e.length !== 1) return h(...e);
|
|
97
|
-
let n = e[0];
|
|
98
|
-
return typeof n == "function" ? d(t(() => ({
|
|
99
|
-
get: n,
|
|
100
|
-
set: F
|
|
101
|
-
}))) : f(n);
|
|
102
|
-
}
|
|
103
|
-
function ne(e, t) {
|
|
104
|
-
function n(...n) {
|
|
105
|
-
return new Promise((r, i) => {
|
|
106
|
-
Promise.resolve(e(() => t.apply(this, n), {
|
|
107
|
-
fn: t,
|
|
108
|
-
thisArg: this,
|
|
109
|
-
args: n
|
|
110
|
-
})).then(r).catch(i);
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
return n;
|
|
114
|
-
}
|
|
115
|
-
var L = (e) => e();
|
|
116
|
-
function R(e = L, t = {}) {
|
|
117
|
-
let { initialState: n = "active" } = t, r = I(n === "active");
|
|
118
|
-
function i() {
|
|
119
|
-
r.value = !1;
|
|
120
|
-
}
|
|
121
|
-
function a() {
|
|
122
|
-
r.value = !0;
|
|
123
|
-
}
|
|
124
|
-
return {
|
|
125
|
-
isActive: p(r),
|
|
126
|
-
pause: i,
|
|
127
|
-
resume: a,
|
|
128
|
-
eventFilter: (...t) => {
|
|
129
|
-
r.value && e(...t);
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
function z(e) {
|
|
134
|
-
return e.endsWith("rem") ? Number.parseFloat(e) * 16 : Number.parseFloat(e);
|
|
135
|
-
}
|
|
136
|
-
function B(e) {
|
|
137
|
-
return Array.isArray(e) ? e : [e];
|
|
138
|
-
}
|
|
139
|
-
function V(e) {
|
|
140
|
-
return e || r();
|
|
141
|
-
}
|
|
142
|
-
function re(e, t, n = {}) {
|
|
143
|
-
let { eventFilter: r = L, ...i } = n;
|
|
144
|
-
return y(e, ne(r, t), i);
|
|
145
|
-
}
|
|
146
|
-
function ie(e, t, n = {}) {
|
|
147
|
-
let { eventFilter: r, initialState: i = "active", ...a } = n, { eventFilter: o, pause: s, resume: c, isActive: l } = R(r, { initialState: i });
|
|
148
|
-
return {
|
|
149
|
-
stop: re(e, t, {
|
|
150
|
-
...a,
|
|
151
|
-
eventFilter: o
|
|
152
|
-
}),
|
|
153
|
-
pause: s,
|
|
154
|
-
resume: c,
|
|
155
|
-
isActive: l
|
|
156
|
-
};
|
|
157
|
-
}
|
|
158
|
-
function H(e, t = !0, n) {
|
|
159
|
-
V(n) ? l(e, n) : t ? e() : c(e);
|
|
160
|
-
}
|
|
161
|
-
function ae(e = !1, t = {}) {
|
|
162
|
-
let { truthyValue: n = !0, falsyValue: r = !1 } = t, i = s(e), a = m(e);
|
|
163
|
-
function o(e) {
|
|
164
|
-
if (arguments.length) return a.value = e, a.value;
|
|
165
|
-
{
|
|
166
|
-
let e = _(n);
|
|
167
|
-
return a.value = a.value === e ? _(r) : e, a.value;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
return i ? o : [a, o];
|
|
171
|
-
}
|
|
172
|
-
function U(e, t, n) {
|
|
173
|
-
return y(e, t, {
|
|
174
|
-
...n,
|
|
175
|
-
immediate: !0
|
|
176
|
-
});
|
|
177
|
-
}
|
|
178
|
-
//#endregion
|
|
179
|
-
//#region ../../node_modules/.pnpm/@vueuse+core@14.3.0_vue@3.5.27_typescript@6.0.3_/node_modules/@vueuse/core/dist/index.js
|
|
180
|
-
var W = P ? window : void 0;
|
|
181
|
-
P && window.document, P && window.navigator, P && window.location;
|
|
182
|
-
function G(e) {
|
|
183
|
-
let t = _(e);
|
|
184
|
-
return t?.$el ?? t;
|
|
185
|
-
}
|
|
186
|
-
function K(...t) {
|
|
187
|
-
let n = (e, t, n, r) => (e.addEventListener(t, n, r), () => e.removeEventListener(t, n, r)), r = e(() => {
|
|
188
|
-
let e = B(_(t[0])).filter((e) => e != null);
|
|
189
|
-
return e.every((e) => typeof e != "string") ? e : void 0;
|
|
190
|
-
});
|
|
191
|
-
return U(() => [
|
|
192
|
-
r.value?.map((e) => G(e)) ?? [W].filter((e) => e != null),
|
|
193
|
-
B(_(r.value ? t[1] : t[0])),
|
|
194
|
-
B(v(r.value ? t[2] : t[1])),
|
|
195
|
-
_(r.value ? t[3] : t[2])
|
|
196
|
-
], ([e, t, r, i], a, o) => {
|
|
197
|
-
if (!e?.length || !t?.length || !r?.length) return;
|
|
198
|
-
let s = te(i) ? { ...i } : i, c = e.flatMap((e) => t.flatMap((t) => r.map((r) => n(e, t, r, s))));
|
|
199
|
-
o(() => {
|
|
200
|
-
c.forEach((e) => e());
|
|
201
|
-
});
|
|
202
|
-
}, { flush: "post" });
|
|
203
|
-
}
|
|
204
|
-
function q() {
|
|
205
|
-
let e = m(!1), t = r();
|
|
206
|
-
return t && l(() => {
|
|
207
|
-
e.value = !0;
|
|
208
|
-
}, t), e;
|
|
209
|
-
}
|
|
210
|
-
/* @__NO_SIDE_EFFECTS__ */
|
|
211
|
-
function oe(t) {
|
|
212
|
-
let n = q();
|
|
213
|
-
return e(() => (n.value, !!t()));
|
|
214
|
-
}
|
|
215
|
-
var se = Symbol("vueuse-ssr-width");
|
|
216
|
-
/* @__NO_SIDE_EFFECTS__ */
|
|
217
|
-
function ce() {
|
|
218
|
-
let e = a() ? N(se, null) : null;
|
|
219
|
-
return typeof e == "number" ? e : void 0;
|
|
220
|
-
}
|
|
221
|
-
function le(t, n = {}) {
|
|
222
|
-
let { window: r = W, ssrWidth: i = /* @__PURE__ */ ce() } = n, a = /* @__PURE__ */ oe(() => r && "matchMedia" in r && typeof r.matchMedia == "function"), o = m(typeof i == "number"), s = m(), c = m(!1);
|
|
223
|
-
return b(() => {
|
|
224
|
-
if (o.value) {
|
|
225
|
-
o.value = !a.value, c.value = _(t).split(",").some((e) => {
|
|
226
|
-
let t = e.includes("not all"), n = e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), r = e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), a = !!(n || r);
|
|
227
|
-
return n && a && (a = i >= z(n[1])), r && a && (a = i <= z(r[1])), t ? !a : a;
|
|
228
|
-
});
|
|
229
|
-
return;
|
|
230
|
-
}
|
|
231
|
-
a.value && (s.value = r.matchMedia(_(t)), c.value = s.value.matches);
|
|
232
|
-
}), K(s, "change", (e) => {
|
|
233
|
-
c.value = e.matches;
|
|
234
|
-
}, { passive: !0 }), e(() => c.value);
|
|
235
|
-
}
|
|
236
|
-
var J = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, Y = "__vueuse_ssr_handlers__", ue = /* @__PURE__ */ de();
|
|
237
|
-
function de() {
|
|
238
|
-
return Y in J || (J[Y] = J[Y] || {}), J[Y];
|
|
239
|
-
}
|
|
240
|
-
function X(e, t) {
|
|
241
|
-
return ue[e] || t;
|
|
242
|
-
}
|
|
243
|
-
function fe(e) {
|
|
244
|
-
return le("(prefers-color-scheme: dark)", e);
|
|
245
|
-
}
|
|
246
|
-
function pe(e) {
|
|
247
|
-
return e == null ? "any" : e instanceof Set ? "set" : e instanceof Map ? "map" : e instanceof Date ? "date" : typeof e == "boolean" ? "boolean" : typeof e == "string" ? "string" : typeof e == "object" ? "object" : Number.isNaN(e) ? "any" : "number";
|
|
248
|
-
}
|
|
249
|
-
var me = {
|
|
250
|
-
boolean: {
|
|
251
|
-
read: (e) => e === "true",
|
|
252
|
-
write: (e) => String(e)
|
|
253
|
-
},
|
|
254
|
-
object: {
|
|
255
|
-
read: (e) => JSON.parse(e),
|
|
256
|
-
write: (e) => JSON.stringify(e)
|
|
257
|
-
},
|
|
258
|
-
number: {
|
|
259
|
-
read: (e) => Number.parseFloat(e),
|
|
260
|
-
write: (e) => String(e)
|
|
261
|
-
},
|
|
262
|
-
any: {
|
|
263
|
-
read: (e) => e,
|
|
264
|
-
write: (e) => String(e)
|
|
265
|
-
},
|
|
266
|
-
string: {
|
|
267
|
-
read: (e) => e,
|
|
268
|
-
write: (e) => String(e)
|
|
269
|
-
},
|
|
270
|
-
map: {
|
|
271
|
-
read: (e) => new Map(JSON.parse(e)),
|
|
272
|
-
write: (e) => JSON.stringify(Array.from(e.entries()))
|
|
273
|
-
},
|
|
274
|
-
set: {
|
|
275
|
-
read: (e) => new Set(JSON.parse(e)),
|
|
276
|
-
write: (e) => JSON.stringify(Array.from(e))
|
|
277
|
-
},
|
|
278
|
-
date: {
|
|
279
|
-
read: (e) => new Date(e),
|
|
280
|
-
write: (e) => e.toISOString()
|
|
281
|
-
}
|
|
282
|
-
}, Z = "vueuse-storage";
|
|
283
|
-
function he(t, n, r, i = {}) {
|
|
284
|
-
let { flush: a = "pre", deep: o = !0, listenToStorageChanges: s = !0, writeDefaults: l = !0, mergeDefaults: u = !1, shallow: d, window: p = W, eventFilter: h, onError: g = (e) => {
|
|
285
|
-
console.error(e);
|
|
286
|
-
}, initOnMounted: v } = i, b = (d ? m : f)(typeof n == "function" ? n() : n), x = e(() => _(t));
|
|
287
|
-
if (!r) try {
|
|
288
|
-
r = X("getDefaultStorage", () => W?.localStorage)();
|
|
289
|
-
} catch (e) {
|
|
290
|
-
g(e);
|
|
291
|
-
}
|
|
292
|
-
if (!r) return b;
|
|
293
|
-
let S = _(n), C = pe(S), w = i.serializer ?? me[C], { pause: T, resume: E } = ie(b, (e) => k(e), {
|
|
294
|
-
flush: a,
|
|
295
|
-
deep: o,
|
|
296
|
-
eventFilter: h
|
|
297
|
-
});
|
|
298
|
-
y(x, () => j(), { flush: a });
|
|
299
|
-
let D = !1;
|
|
300
|
-
p && s && (r instanceof Storage ? K(p, "storage", (e) => {
|
|
301
|
-
v && !D || j(e);
|
|
302
|
-
}, { passive: !0 }) : K(p, Z, (e) => {
|
|
303
|
-
v && !D || M(e);
|
|
304
|
-
})), v ? H(() => {
|
|
305
|
-
D = !0, j();
|
|
306
|
-
}) : j();
|
|
307
|
-
function O(e, t) {
|
|
308
|
-
if (p) {
|
|
309
|
-
let n = {
|
|
310
|
-
key: x.value,
|
|
311
|
-
oldValue: e,
|
|
312
|
-
newValue: t,
|
|
313
|
-
storageArea: r
|
|
314
|
-
};
|
|
315
|
-
p.dispatchEvent(r instanceof Storage ? new StorageEvent("storage", n) : new CustomEvent(Z, { detail: n }));
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
function k(e) {
|
|
319
|
-
try {
|
|
320
|
-
let t = r.getItem(x.value);
|
|
321
|
-
if (e == null) O(t, null), r.removeItem(x.value);
|
|
322
|
-
else {
|
|
323
|
-
let n = w.write(e);
|
|
324
|
-
t !== n && (r.setItem(x.value, n), O(t, n));
|
|
325
|
-
}
|
|
326
|
-
} catch (e) {
|
|
327
|
-
g(e);
|
|
328
|
-
}
|
|
329
|
-
}
|
|
330
|
-
function A(e) {
|
|
331
|
-
let t = e ? e.newValue : r.getItem(x.value);
|
|
332
|
-
if (t == null) return l && S != null && r.setItem(x.value, w.write(S)), S;
|
|
333
|
-
if (!e && u) {
|
|
334
|
-
let e = w.read(t);
|
|
335
|
-
return typeof u == "function" ? u(e, S) : C === "object" && !Array.isArray(e) ? {
|
|
336
|
-
...S,
|
|
337
|
-
...e
|
|
338
|
-
} : e;
|
|
339
|
-
} else if (typeof t != "string") return t;
|
|
340
|
-
else return w.read(t);
|
|
341
|
-
}
|
|
342
|
-
function j(e) {
|
|
343
|
-
if (!(e && e.storageArea !== r)) {
|
|
344
|
-
if (e && e.key == null) {
|
|
345
|
-
b.value = S;
|
|
346
|
-
return;
|
|
347
|
-
}
|
|
348
|
-
if (!(e && e.key !== x.value)) {
|
|
349
|
-
T();
|
|
350
|
-
try {
|
|
351
|
-
let t = w.write(b.value);
|
|
352
|
-
(e === void 0 || e?.newValue !== t) && (b.value = A(e));
|
|
353
|
-
} catch (e) {
|
|
354
|
-
g(e);
|
|
355
|
-
} finally {
|
|
356
|
-
e ? c(E) : E();
|
|
357
|
-
}
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
}
|
|
361
|
-
function M(e) {
|
|
362
|
-
j(e.detail);
|
|
363
|
-
}
|
|
364
|
-
return b;
|
|
365
|
-
}
|
|
366
|
-
var ge = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
|
|
367
|
-
function Q(t = {}) {
|
|
368
|
-
let { selector: n = "html", attribute: r = "class", initialValue: i = "auto", window: a = W, storage: o, storageKey: s = "vueuse-color-scheme", listenToStorageChanges: c = !0, storageRef: l, emitAuto: u, disableTransition: d = !0 } = t, f = {
|
|
369
|
-
auto: "",
|
|
370
|
-
light: "light",
|
|
371
|
-
dark: "dark",
|
|
372
|
-
...t.modes || {}
|
|
373
|
-
}, p = fe({ window: a }), m = e(() => p.value ? "dark" : "light"), h = l || (s == null ? I(i) : he(s, i, o, {
|
|
374
|
-
window: a,
|
|
375
|
-
listenToStorageChanges: c
|
|
376
|
-
})), g = e(() => h.value === "auto" ? m.value : h.value), _ = X("updateHTMLAttrs", (e, t, n) => {
|
|
377
|
-
let r = typeof e == "string" ? a?.document.querySelector(e) : G(e);
|
|
378
|
-
if (!r) return;
|
|
379
|
-
let i = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s = null;
|
|
380
|
-
if (t === "class") {
|
|
381
|
-
let e = n.split(/\s/g);
|
|
382
|
-
Object.values(f).flatMap((e) => (e || "").split(/\s/g)).filter(Boolean).forEach((t) => {
|
|
383
|
-
e.includes(t) ? i.add(t) : o.add(t);
|
|
384
|
-
});
|
|
385
|
-
} else s = {
|
|
386
|
-
key: t,
|
|
387
|
-
value: n
|
|
388
|
-
};
|
|
389
|
-
if (i.size === 0 && o.size === 0 && s === null) return;
|
|
390
|
-
let c;
|
|
391
|
-
d && (c = a.document.createElement("style"), c.appendChild(document.createTextNode(ge)), a.document.head.appendChild(c));
|
|
392
|
-
for (let e of i) r.classList.add(e);
|
|
393
|
-
for (let e of o) r.classList.remove(e);
|
|
394
|
-
s && r.setAttribute(s.key, s.value), d && (a.getComputedStyle(c).opacity, document.head.removeChild(c));
|
|
395
|
-
});
|
|
396
|
-
function v(e) {
|
|
397
|
-
_(n, r, f[e] ?? e);
|
|
398
|
-
}
|
|
399
|
-
function b(e) {
|
|
400
|
-
t.onChanged ? t.onChanged(e, v) : v(e);
|
|
401
|
-
}
|
|
402
|
-
y(g, b, {
|
|
403
|
-
flush: "post",
|
|
404
|
-
immediate: !0
|
|
405
|
-
}), H(() => b(g.value));
|
|
406
|
-
let x = e({
|
|
407
|
-
get() {
|
|
408
|
-
return u ? h.value : g.value;
|
|
409
|
-
},
|
|
410
|
-
set(e) {
|
|
411
|
-
h.value = e;
|
|
412
|
-
}
|
|
413
|
-
});
|
|
414
|
-
return Object.assign(x, {
|
|
415
|
-
store: h,
|
|
416
|
-
system: m,
|
|
417
|
-
state: g
|
|
418
|
-
});
|
|
419
|
-
}
|
|
420
|
-
function _e(t = {}) {
|
|
421
|
-
let { valueDark: n = "dark", valueLight: r = "" } = t, i = Q({
|
|
422
|
-
...t,
|
|
423
|
-
onChanged: (e, n) => {
|
|
424
|
-
var r;
|
|
425
|
-
t.onChanged ? (r = t.onChanged) == null || r.call(t, e === "dark", n, e) : n(e);
|
|
426
|
-
},
|
|
427
|
-
modes: {
|
|
428
|
-
dark: n,
|
|
429
|
-
light: r
|
|
430
|
-
}
|
|
431
|
-
}), a = e(() => i.system.value);
|
|
432
|
-
return e({
|
|
433
|
-
get() {
|
|
434
|
-
return i.value === "dark";
|
|
435
|
-
},
|
|
436
|
-
set(e) {
|
|
437
|
-
let t = e ? "dark" : "light";
|
|
438
|
-
a.value === t ? i.value = "auto" : i.value = t;
|
|
439
|
-
}
|
|
440
|
-
});
|
|
441
|
-
}
|
|
442
|
-
var ve = ae(_e({ storageKey: "gx-theme-appearance" })), $ = {
|
|
89
|
+
var { provideContext: b, useInjectContext: x } = d("theme-provider"), S = u(l({ storageKey: "gx-theme-appearance" })), C = {
|
|
443
90
|
theme: { type: String },
|
|
444
91
|
defaultTheme: {
|
|
445
92
|
type: String,
|
|
@@ -448,50 +95,50 @@ var ve = ae(_e({ storageKey: "gx-theme-appearance" })), $ = {
|
|
|
448
95
|
onChange: { type: Function },
|
|
449
96
|
onChangeBase: { type: Function },
|
|
450
97
|
onUpdateTheme: { type: Function }
|
|
451
|
-
},
|
|
98
|
+
}, w = /* @__PURE__ */ t({
|
|
452
99
|
name: "ThemeContext",
|
|
453
100
|
inheritAttrs: !1,
|
|
454
|
-
props:
|
|
101
|
+
props: C,
|
|
455
102
|
slots: Object,
|
|
456
103
|
setup: (t, { slots: n, emit: r }) => {
|
|
457
|
-
let i = document.querySelector("html"),
|
|
458
|
-
|
|
459
|
-
e && (
|
|
104
|
+
let i = document.querySelector("html"), o = a(), l = a(t.theme || t.defaultTheme || "system");
|
|
105
|
+
s(() => t.theme, (e) => {
|
|
106
|
+
e && (l.value = e);
|
|
460
107
|
});
|
|
461
|
-
let { system:
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
}, { immediate: !0 }),
|
|
108
|
+
let { system: u, store: d } = c();
|
|
109
|
+
s(() => u.value, () => {
|
|
110
|
+
f();
|
|
111
|
+
}, { immediate: !0 }), s(() => o.value, (e) => {
|
|
465
112
|
e && t.onChangeBase?.(e);
|
|
466
|
-
}, { immediate: !0 }),
|
|
467
|
-
t.onChange?.(e), r("update:theme", e),
|
|
113
|
+
}, { immediate: !0 }), s(l, (e) => {
|
|
114
|
+
t.onChange?.(e), r("update:theme", e), f();
|
|
468
115
|
});
|
|
469
|
-
function
|
|
470
|
-
i && (
|
|
116
|
+
function f() {
|
|
117
|
+
i && (l.value === "system" ? (o.value = u.value, i.setAttribute("data-theme", o.value)) : (o.value = l.value, i.setAttribute("data-theme", l.value)), d.value = o.value);
|
|
471
118
|
}
|
|
472
|
-
function
|
|
473
|
-
|
|
119
|
+
function p(e) {
|
|
120
|
+
l.value = e, f();
|
|
474
121
|
}
|
|
475
|
-
return
|
|
476
|
-
theme:
|
|
477
|
-
resolvedTheme:
|
|
478
|
-
isDark: e(() =>
|
|
479
|
-
setTheme:
|
|
122
|
+
return b({
|
|
123
|
+
theme: l,
|
|
124
|
+
resolvedTheme: o,
|
|
125
|
+
isDark: e(() => o.value === "dark"),
|
|
126
|
+
setTheme: p
|
|
480
127
|
}), () => n.default?.();
|
|
481
128
|
}
|
|
482
129
|
});
|
|
483
130
|
//#endregion
|
|
484
131
|
//#region src/theme-context/utils.ts
|
|
485
|
-
function
|
|
132
|
+
function T(e, t) {
|
|
486
133
|
if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
|
|
487
134
|
t.setTheme?.(t.isDark ? "dark" : "light");
|
|
488
135
|
return;
|
|
489
136
|
}
|
|
490
|
-
let n = e.getBoundingClientRect(),
|
|
137
|
+
let n = e.getBoundingClientRect(), i = n.left + n.width / 2, a = n.top + n.height / 2, o = Math.hypot(Math.max(i, innerWidth - i), Math.max(a, innerHeight - a)), s = 100 * i / innerWidth, c = 100 * a / innerHeight, l = Math.hypot(innerWidth, innerHeight) / Math.SQRT2, u = 100 * o / l;
|
|
491
138
|
document.startViewTransition(async () => {
|
|
492
|
-
t.setTheme?.(t.isDark ? "dark" : "light"), await
|
|
139
|
+
t.setTheme?.(t.isDark ? "dark" : "light"), await r();
|
|
493
140
|
}).ready.then(() => {
|
|
494
|
-
let e = [`circle(0% at ${
|
|
141
|
+
let e = [`circle(0% at ${s}% ${c}%)`, `circle(${u}% at ${s}% ${c}%)`];
|
|
495
142
|
document.documentElement.animate({ clipPath: t.isDark ? [...e].reverse() : e }, {
|
|
496
143
|
duration: 400,
|
|
497
144
|
fill: "forwards",
|
|
@@ -501,4 +148,4 @@ function be(e, t) {
|
|
|
501
148
|
});
|
|
502
149
|
}
|
|
503
150
|
//#endregion
|
|
504
|
-
export {
|
|
151
|
+
export { v as ContextProvider, w as ThemeContext, C as themeContextProps, T as toggleAnimateTheme, S as toggleDark, d as useContext, y as useContextProvider, x as useThemeContext };
|
package/dist/context.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Context={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function n(e,n){let r=Symbol(e);return{provideContext:e=>{(0,t.provide)(r,e)},useInjectContext:e=>(0,t.inject)(r,e||n||{}),contextInjectKey:r}}function r(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function i(e){return e!==null&&r(e,`Object`)}var a=`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`.split(``);function o(){return{uuid(e,t){let n=a,r=t||n.length;if(e){let t=``;for(let i=0;i<e;i+=1)t+=n[Math.floor(Math.random()*r)];return t}return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,e=>{let t=Math.floor(Math.random()*16);return(e===`x`?t:t&3|8).toString(16)})},uuidFast(){let e=a,t=Array.from({length:36});for(let n=0;n<36;n+=1)if(n===8||n===13||n===18||n===23)t[n]=`-`;else if(n===14)t[n]=`4`;else{let r=Math.floor(Math.random()*16);t[n]=e[n===19?r&3|8:r]}return t.join(``)},uuidString(){return this.uuidFast().replace(/-/g,``)},uuidCompact(){return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,e=>{let t=Math.floor(Math.random()*16);return(e===`x`?t:t&3|8).toString(16)})}}}var s=null;function c(e){return s||(s=Symbol(e),s)}var l={contextKey:{type:String,required:!0},value:{type:Object,required:!0}},u=(0,t.defineComponent)({name:`ContextProvider`,props:l,slots:Object,setup:(e,{slots:n})=>(e.contextKey&&e.value&&i(e.value)?(0,t.provide)(c(e.contextKey),{...(0,t.toRefs)(e.value),contextId:`${e.contextKey}-${o().uuid(10)}`}):console.warn(`[ContextProvider]: contextKey is required`),()=>n.default?.())});function d(e,n){if(typeof s==`symbol`)return(0,t.inject)(c(e),n||{})}var{provideContext:f,useInjectContext:p}=n(`theme-provider`),m=new WeakMap,h=(...e)=>{let n=e[0],r=(0,t.getCurrentInstance)()?.proxy??(0,t.getCurrentScope)();if(r==null&&!(0,t.hasInjectionContext)())throw Error(`injectLocal must be called in setup`);return r&&m.has(r)&&n in m.get(r)?m.get(r)[n]:(0,t.inject)(...e)},g=typeof window<`u`&&typeof document<`u`;typeof WorkerGlobalScope<`u`&&globalThis instanceof WorkerGlobalScope;var _=Object.prototype.toString,v=e=>_.call(e)===`[object Object]`,y=()=>{};function b(...e){if(e.length!==1)return(0,t.toRef)(...e);let n=e[0];return typeof n==`function`?(0,t.readonly)((0,t.customRef)(()=>({get:n,set:y}))):(0,t.ref)(n)}function x(e,t){function n(...n){return new Promise((r,i)=>{Promise.resolve(e(()=>t.apply(this,n),{fn:t,thisArg:this,args:n})).then(r).catch(i)})}return n}var S=e=>e();function C(e=S,n={}){let{initialState:r=`active`}=n,i=b(r===`active`);function a(){i.value=!1}function o(){i.value=!0}return{isActive:(0,t.shallowReadonly)(i),pause:a,resume:o,eventFilter:(...t)=>{i.value&&e(...t)}}}function w(e){return e.endsWith(`rem`)?Number.parseFloat(e)*16:Number.parseFloat(e)}function T(e){return Array.isArray(e)?e:[e]}function E(e){return e||(0,t.getCurrentInstance)()}function D(e,n,r={}){let{eventFilter:i=S,...a}=r;return(0,t.watch)(e,x(i,n),a)}function O(e,t,n={}){let{eventFilter:r,initialState:i=`active`,...a}=n,{eventFilter:o,pause:s,resume:c,isActive:l}=C(r,{initialState:i});return{stop:D(e,t,{...a,eventFilter:o}),pause:s,resume:c,isActive:l}}function k(e,n=!0,r){E(r)?(0,t.onMounted)(e,r):n?e():(0,t.nextTick)(e)}function A(e=!1,n={}){let{truthyValue:r=!0,falsyValue:i=!1}=n,a=(0,t.isRef)(e),o=(0,t.shallowRef)(e);function s(e){if(arguments.length)return o.value=e,o.value;{let e=(0,t.toValue)(r);return o.value=o.value===e?(0,t.toValue)(i):e,o.value}}return a?s:[o,s]}function j(e,n,r){return(0,t.watch)(e,n,{...r,immediate:!0})}var M=g?window:void 0;g&&window.document,g&&window.navigator,g&&window.location;function N(e){let n=(0,t.toValue)(e);return n?.$el??n}function P(...e){let n=(e,t,n,r)=>(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)),r=(0,t.computed)(()=>{let n=T((0,t.toValue)(e[0])).filter(e=>e!=null);return n.every(e=>typeof e!=`string`)?n:void 0});return j(()=>[r.value?.map(e=>N(e))??[M].filter(e=>e!=null),T((0,t.toValue)(r.value?e[1]:e[0])),T((0,t.unref)(r.value?e[2]:e[1])),(0,t.toValue)(r.value?e[3]:e[2])],([e,t,r,i],a,o)=>{if(!e?.length||!t?.length||!r?.length)return;let s=v(i)?{...i}:i,c=e.flatMap(e=>t.flatMap(t=>r.map(r=>n(e,t,r,s))));o(()=>{c.forEach(e=>e())})},{flush:`post`})}function F(){let e=(0,t.shallowRef)(!1),n=(0,t.getCurrentInstance)();return n&&(0,t.onMounted)(()=>{e.value=!0},n),e}function I(e){let n=F();return(0,t.computed)(()=>(n.value,!!e()))}var L=Symbol(`vueuse-ssr-width`);function ee(){let e=(0,t.hasInjectionContext)()?h(L,null):null;return typeof e==`number`?e:void 0}function R(e,n={}){let{window:r=M,ssrWidth:i=ee()}=n,a=I(()=>r&&`matchMedia`in r&&typeof r.matchMedia==`function`),o=(0,t.shallowRef)(typeof i==`number`),s=(0,t.shallowRef)(),c=(0,t.shallowRef)(!1);return(0,t.watchEffect)(()=>{if(o.value){o.value=!a.value,c.value=(0,t.toValue)(e).split(`,`).some(e=>{let t=e.includes(`not all`),n=e.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),r=e.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/),a=!!(n||r);return n&&a&&(a=i>=w(n[1])),r&&a&&(a=i<=w(r[1])),t?!a:a});return}a.value&&(s.value=r.matchMedia((0,t.toValue)(e)),c.value=s.value.matches)}),P(s,`change`,e=>{c.value=e.matches},{passive:!0}),(0,t.computed)(()=>c.value)}var z=typeof globalThis<`u`?globalThis:typeof window<`u`?window:typeof global<`u`?global:typeof self<`u`?self:{},B=`__vueuse_ssr_handlers__`,V=H();function H(){return B in z||(z[B]=z[B]||{}),z[B]}function U(e,t){return V[e]||t}function W(e){return R(`(prefers-color-scheme: dark)`,e)}function G(e){return e==null?`any`:e instanceof Set?`set`:e instanceof Map?`map`:e instanceof Date?`date`:typeof e==`boolean`?`boolean`:typeof e==`string`?`string`:typeof e==`object`?`object`:Number.isNaN(e)?`any`:`number`}var K={boolean:{read:e=>e===`true`,write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},q=`vueuse-storage`;function J(e,n,r,i={}){let{flush:a=`pre`,deep:o=!0,listenToStorageChanges:s=!0,writeDefaults:c=!0,mergeDefaults:l=!1,shallow:u,window:d=M,eventFilter:f,onError:p=e=>{console.error(e)},initOnMounted:m}=i,h=(u?t.shallowRef:t.ref)(typeof n==`function`?n():n),g=(0,t.computed)(()=>(0,t.toValue)(e));if(!r)try{r=U(`getDefaultStorage`,()=>M?.localStorage)()}catch(e){p(e)}if(!r)return h;let _=(0,t.toValue)(n),v=G(_),y=i.serializer??K[v],{pause:b,resume:x}=O(h,e=>w(e),{flush:a,deep:o,eventFilter:f});(0,t.watch)(g,()=>E(),{flush:a});let S=!1;d&&s&&(r instanceof Storage?P(d,`storage`,e=>{m&&!S||E(e)},{passive:!0}):P(d,q,e=>{m&&!S||D(e)})),m?k(()=>{S=!0,E()}):E();function C(e,t){if(d){let n={key:g.value,oldValue:e,newValue:t,storageArea:r};d.dispatchEvent(r instanceof Storage?new StorageEvent(`storage`,n):new CustomEvent(q,{detail:n}))}}function w(e){try{let t=r.getItem(g.value);if(e==null)C(t,null),r.removeItem(g.value);else{let n=y.write(e);t!==n&&(r.setItem(g.value,n),C(t,n))}}catch(e){p(e)}}function T(e){let t=e?e.newValue:r.getItem(g.value);if(t==null)return c&&_!=null&&r.setItem(g.value,y.write(_)),_;if(!e&&l){let e=y.read(t);return typeof l==`function`?l(e,_):v===`object`&&!Array.isArray(e)?{..._,...e}:e}else if(typeof t!=`string`)return t;else return y.read(t)}function E(e){if(!(e&&e.storageArea!==r)){if(e&&e.key==null){h.value=_;return}if(!(e&&e.key!==g.value)){b();try{let t=y.write(h.value);(e===void 0||e?.newValue!==t)&&(h.value=T(e))}catch(e){p(e)}finally{e?(0,t.nextTick)(x):x()}}}}function D(e){E(e.detail)}return h}var Y=`*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;function X(e={}){let{selector:n=`html`,attribute:r=`class`,initialValue:i=`auto`,window:a=M,storage:o,storageKey:s=`vueuse-color-scheme`,listenToStorageChanges:c=!0,storageRef:l,emitAuto:u,disableTransition:d=!0}=e,f={auto:``,light:`light`,dark:`dark`,...e.modes||{}},p=W({window:a}),m=(0,t.computed)(()=>p.value?`dark`:`light`),h=l||(s==null?b(i):J(s,i,o,{window:a,listenToStorageChanges:c})),g=(0,t.computed)(()=>h.value===`auto`?m.value:h.value),_=U(`updateHTMLAttrs`,(e,t,n)=>{let r=typeof e==`string`?a?.document.querySelector(e):N(e);if(!r)return;let i=new Set,o=new Set,s=null;if(t===`class`){let e=n.split(/\s/g);Object.values(f).flatMap(e=>(e||``).split(/\s/g)).filter(Boolean).forEach(t=>{e.includes(t)?i.add(t):o.add(t)})}else s={key:t,value:n};if(i.size===0&&o.size===0&&s===null)return;let c;d&&(c=a.document.createElement(`style`),c.appendChild(document.createTextNode(Y)),a.document.head.appendChild(c));for(let e of i)r.classList.add(e);for(let e of o)r.classList.remove(e);s&&r.setAttribute(s.key,s.value),d&&(a.getComputedStyle(c).opacity,document.head.removeChild(c))});function v(e){_(n,r,f[e]??e)}function y(t){e.onChanged?e.onChanged(t,v):v(t)}(0,t.watch)(g,y,{flush:`post`,immediate:!0}),k(()=>y(g.value));let x=(0,t.computed)({get(){return u?h.value:g.value},set(e){h.value=e}});return Object.assign(x,{store:h,system:m,state:g})}function Z(e={}){let{valueDark:n=`dark`,valueLight:r=``}=e,i=X({...e,onChanged:(t,n)=>{var r;e.onChanged?(r=e.onChanged)==null||r.call(e,t===`dark`,n,t):n(t)},modes:{dark:n,light:r}}),a=(0,t.computed)(()=>i.system.value);return(0,t.computed)({get(){return i.value===`dark`},set(e){let t=e?`dark`:`light`;a.value===t?i.value=`auto`:i.value=t}})}var Q=A(Z({storageKey:`gx-theme-appearance`})),$={theme:{type:String},defaultTheme:{type:String,default:`system`},onChange:{type:Function},onChangeBase:{type:Function},onUpdateTheme:{type:Function}},te=(0,t.defineComponent)({name:`ThemeContext`,inheritAttrs:!1,props:$,slots:Object,setup:(e,{slots:n,emit:r})=>{let i=document.querySelector(`html`),a=(0,t.ref)(),o=(0,t.ref)(e.theme||e.defaultTheme||`system`);(0,t.watch)(()=>e.theme,e=>{e&&(o.value=e)});let{system:s,store:c}=X();(0,t.watch)(()=>s.value,()=>{l()},{immediate:!0}),(0,t.watch)(()=>a.value,t=>{t&&e.onChangeBase?.(t)},{immediate:!0}),(0,t.watch)(o,t=>{e.onChange?.(t),r(`update:theme`,t),l()});function l(){i&&(o.value===`system`?(a.value=s.value,i.setAttribute(`data-theme`,a.value)):(a.value=o.value,i.setAttribute(`data-theme`,o.value)),c.value=a.value)}function u(e){o.value=e,l()}return f({theme:o,resolvedTheme:a,isDark:(0,t.computed)(()=>a.value===`dark`),setTheme:u}),()=>n.default?.()}});function ne(e,n){if(!(document.startViewTransition&&!window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)){n.setTheme?.(n.isDark?`dark`:`light`);return}let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=r.top+r.height/2,o=Math.hypot(Math.max(i,innerWidth-i),Math.max(a,innerHeight-a)),s=100*i/innerWidth,c=100*a/innerHeight,l=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,u=100*o/l;document.startViewTransition(async()=>{n.setTheme?.(n.isDark?`dark`:`light`),await(0,t.nextTick)()}).ready.then(()=>{let e=[`circle(0% at ${s}% ${c}%)`,`circle(${u}% at ${s}% ${c}%)`];document.documentElement.animate({clipPath:n.isDark?[...e].reverse():e},{duration:400,fill:`forwards`,easing:`ease-in`,pseudoElement:n.isDark?`::view-transition-old(root)`:`::view-transition-new(root)`})})}e.ContextProvider=u,e.ThemeContext=te,e.themeContextProps=$,e.toggleAnimateTheme=ne,e.toggleDark=Q,e.useContext=n,e.useContextProvider=d,e.useThemeContext=p});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@vueuse/core")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@vueuse/core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Context={},e.Vue,e._vueuse_core))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function r(e,n){let r=Symbol(e);return{provideContext:e=>{(0,t.provide)(r,e)},useInjectContext:e=>(0,t.inject)(r,e||n||{}),contextInjectKey:r}}function i(e,t){return Object.prototype.toString.call(e)===`[object ${t}]`}function a(e){return e!==null&&i(e,`Object`)}var o=`0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`.split(``);function s(){return{uuid(e,t){let n=o,r=t||n.length;if(e){let t=``;for(let i=0;i<e;i+=1)t+=n[Math.floor(Math.random()*r)];return t}return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,e=>{let t=Math.floor(Math.random()*16);return(e===`x`?t:t&3|8).toString(16)})},uuidFast(){let e=o,t=Array.from({length:36});for(let n=0;n<36;n+=1)if(n===8||n===13||n===18||n===23)t[n]=`-`;else if(n===14)t[n]=`4`;else{let r=Math.floor(Math.random()*16);t[n]=e[n===19?r&3|8:r]}return t.join(``)},uuidString(){return this.uuidFast().replace(/-/g,``)},uuidCompact(){return`xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g,e=>{let t=Math.floor(Math.random()*16);return(e===`x`?t:t&3|8).toString(16)})}}}var c=null;function l(e){return c||(c=Symbol(e),c)}var u={contextKey:{type:String,required:!0},value:{type:Object,required:!0}},d=(0,t.defineComponent)({name:`ContextProvider`,props:u,slots:Object,setup:(e,{slots:n})=>(e.contextKey&&e.value&&a(e.value)?(0,t.provide)(l(e.contextKey),{...(0,t.toRefs)(e.value),contextId:`${e.contextKey}-${s().uuid(10)}`}):console.warn(`[ContextProvider]: contextKey is required`),()=>n.default?.())});function f(e,n){if(typeof c==`symbol`)return(0,t.inject)(l(e),n||{})}var{provideContext:p,useInjectContext:m}=r(`theme-provider`),h=(0,n.useDark)({storageKey:`gx-theme-appearance`}),g=(0,n.useToggle)(h),_={theme:{type:String},defaultTheme:{type:String,default:`system`},onChange:{type:Function},onChangeBase:{type:Function},onUpdateTheme:{type:Function}},v=(0,t.defineComponent)({name:`ThemeContext`,inheritAttrs:!1,props:_,slots:Object,setup:(e,{slots:r,emit:i})=>{let a=document.querySelector(`html`),o=(0,t.ref)(),s=(0,t.ref)(e.theme||e.defaultTheme||`system`);(0,t.watch)(()=>e.theme,e=>{e&&(s.value=e)});let{system:c,store:l}=(0,n.useColorMode)();(0,t.watch)(()=>c.value,()=>{u()},{immediate:!0}),(0,t.watch)(()=>o.value,t=>{t&&e.onChangeBase?.(t)},{immediate:!0}),(0,t.watch)(s,t=>{e.onChange?.(t),i(`update:theme`,t),u()});function u(){a&&(s.value===`system`?(o.value=c.value,a.setAttribute(`data-theme`,o.value)):(o.value=s.value,a.setAttribute(`data-theme`,s.value)),l.value=o.value)}function d(e){s.value=e,u()}return p({theme:s,resolvedTheme:o,isDark:(0,t.computed)(()=>o.value===`dark`),setTheme:d}),()=>r.default?.()}});function y(e,n){if(!(document.startViewTransition&&!window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)){n.setTheme?.(n.isDark?`dark`:`light`);return}let r=e.getBoundingClientRect(),i=r.left+r.width/2,a=r.top+r.height/2,o=Math.hypot(Math.max(i,innerWidth-i),Math.max(a,innerHeight-a)),s=100*i/innerWidth,c=100*a/innerHeight,l=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,u=100*o/l;document.startViewTransition(async()=>{n.setTheme?.(n.isDark?`dark`:`light`),await(0,t.nextTick)()}).ready.then(()=>{let e=[`circle(0% at ${s}% ${c}%)`,`circle(${u}% at ${s}% ${c}%)`];document.documentElement.animate({clipPath:n.isDark?[...e].reverse():e},{duration:400,fill:`forwards`,easing:`ease-in`,pseudoElement:n.isDark?`::view-transition-old(root)`:`::view-transition-new(root)`})})}e.ContextProvider=d,e.ThemeContext=v,e.themeContextProps=_,e.toggleAnimateTheme=y,e.toggleDark=g,e.useContext=r,e.useContextProvider=f,e.useThemeContext=m});
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { BaseTheme, ThemeValue } from "./types.js";
|
|
2
|
-
import * as _$vue from "vue";
|
|
3
2
|
import { PropType, SlotsType } from "vue";
|
|
4
3
|
|
|
5
4
|
//#region src/theme-context/ThemeContext.d.ts
|
|
@@ -36,7 +35,7 @@ declare const themeContextProps: {
|
|
|
36
35
|
type: PropType<(theme: ThemeValue) => void>;
|
|
37
36
|
};
|
|
38
37
|
};
|
|
39
|
-
declare const ThemeContext:
|
|
38
|
+
declare const ThemeContext: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
40
39
|
theme: {
|
|
41
40
|
type: PropType<ThemeValue>;
|
|
42
41
|
};
|
|
@@ -53,7 +52,7 @@ declare const ThemeContext: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
|
|
53
52
|
onUpdateTheme: {
|
|
54
53
|
type: PropType<(theme: ThemeValue) => void>;
|
|
55
54
|
};
|
|
56
|
-
}>, () => any, {}, {}, {},
|
|
55
|
+
}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
57
56
|
theme: {
|
|
58
57
|
type: PropType<ThemeValue>;
|
|
59
58
|
};
|
|
@@ -72,6 +71,6 @@ declare const ThemeContext: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
|
|
|
72
71
|
};
|
|
73
72
|
}>> & Readonly<{}>, {
|
|
74
73
|
defaultTheme: ThemeValue;
|
|
75
|
-
}, SlotsType<ThemeContextSlots>, {}, {}, string,
|
|
74
|
+
}, SlotsType<ThemeContextSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
76
75
|
//#endregion
|
|
77
76
|
export { ThemeContextEmits, ThemeContextProps, ThemeContextSlots, ThemeContext as default, themeContextProps };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import * as _$_vueuse_core0 from "@vueuse/core";
|
|
2
|
-
|
|
3
1
|
//#region src/theme-context/dark.d.ts
|
|
4
|
-
declare const isDark:
|
|
2
|
+
declare const isDark: import("@vueuse/core").UseDarkReturn;
|
|
5
3
|
declare const toggleDark: (value?: boolean) => boolean;
|
|
6
4
|
//#endregion
|
|
7
5
|
export { isDark, toggleDark };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gx-design-vue/context",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.5-alpha.
|
|
4
|
+
"version": "0.0.5-alpha.7",
|
|
5
5
|
"description": "Gx Design Context",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "gx12358",
|
|
@@ -37,17 +37,20 @@
|
|
|
37
37
|
"package.json"
|
|
38
38
|
],
|
|
39
39
|
"peerDependencies": {
|
|
40
|
+
"@gx-design-vue/pro-utils": "^0.2.0-alpha.9",
|
|
40
41
|
"vue": ">=3.2.0"
|
|
41
42
|
},
|
|
42
43
|
"dependencies": {
|
|
43
|
-
"@vueuse/core": "^14.3.0"
|
|
44
|
-
"@gx-design-vue/pro-utils": "^0.2.0-alpha.5"
|
|
44
|
+
"@vueuse/core": "^14.3.0"
|
|
45
45
|
},
|
|
46
46
|
"browserslist": [
|
|
47
47
|
"> 1%",
|
|
48
48
|
"not ie 11",
|
|
49
49
|
"not op_mini all"
|
|
50
50
|
],
|
|
51
|
+
"devDependencies": {
|
|
52
|
+
"@gx-design-vue/pro-utils": "^0.2.0-alpha.9"
|
|
53
|
+
},
|
|
51
54
|
"scripts": {
|
|
52
55
|
"test": "vitest run",
|
|
53
56
|
"build": "run-s build:esm build:vite:parallel",
|