@gx-design-vue/context 0.0.4 → 0.0.5-alpha.1

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