@gx-design-vue/context 0.0.2 → 0.0.3

package/dist/context.js

@@ -1,6 +1,6 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.1
+  * Version: 0.0.2
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
@@ -9,13 +9,37 @@
   * Homepage: 
   * Contact: gx12358@gmail.com
 */
-import { useContext as d } from "@gx-design-vue/pro-provider";
-import { useColorMode as f } from "@vueuse/core";
-import { defineComponent as v, ref as h, watch as a, computed as C } from "vue";
-const {
-  provideContext: p,
-  useInjectContext: x
-} = d("theme-provider"), S = /* @__PURE__ */ v({
+import { useContext as g } from "@gx-design-vue/pro-provider";
+import { useDark as f, useToggle as T, useColorMode as y } from "@vueuse/core";
+import { nextTick as v, defineComponent as p, ref as l, watch as h, computed as C } from "vue";
+const { provideContext: x, useInjectContext: R } = g("theme-provider"), k = f({
+  storageKey: "gx-pro-theme-appearance"
+}), S = T(k);
+function $(o, a) {
+  if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
+    a.setTheme?.(a.isDark ? "dark" : "light");
+    return;
+  }
+  const i = o.getBoundingClientRect(), t = i.left + i.width / 2, n = i.top + i.height / 2, s = Math.hypot(Math.max(t, innerWidth - t), Math.max(n, innerHeight - n)), m = 100 * t / innerWidth, r = 100 * n / innerHeight, c = Math.hypot(innerWidth, innerHeight) / Math.SQRT2, e = 100 * s / c;
+  document.startViewTransition(async () => {
+    a.setTheme?.(a.isDark ? "dark" : "light"), await v();
+  }).ready.then(() => {
+    const d = [
+      `circle(0% at ${m}% ${r}%)`,
+      `circle(${e}% at ${m}% ${r}%)`
+    ];
+    document.documentElement.animate({
+      clipPath: a.isDark ? [...d].reverse() : d
+    }, {
+      duration: 400,
+      // 保持最终状态
+      fill: "forwards",
+      easing: "ease-in",
+      pseudoElement: a.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+    });
+  });
+}
+const B = /* @__PURE__ */ p({
   name: "ThemeContext",
   inheritAttrs: !1,
   props: {
@@ -38,43 +62,46 @@ const {
   },
   emits: ["change", "changeBase", "update:theme"],
   slots: Object,
-  setup(m, {
-    slots: r,
-    emit: i
+  setup(o, {
+    slots: a,
+    emit: u
   }) {
-    const o = document.querySelector("html"), t = h(), n = h(m.theme || m.defaultTheme || "system");
-    a(() => m.theme, (e) => {
+    const i = document.querySelector("html"), t = l(), n = l(o.theme || o.defaultTheme || "system");
+    h(() => o.theme, (e) => {
       e && (n.value = e);
     });
     const {
       system: s,
-      store: l
-    } = f();
-    a(() => s.value, () => {
-      u();
+      store: m
+    } = y();
+    h(() => s.value, () => {
+      r();
     }, {
       immediate: !0
-    }), a(() => t.value, (e) => {
-      e && m.onChangeBase?.(e);
+    }), h(() => t.value, (e) => {
+      e && o.onChangeBase?.(e);
     }, {
       immediate: !0
-    }), a(n, (e) => {
-      m.onChange?.(e), i("update:theme", e), u();
+    }), h(n, (e) => {
+      o.onChange?.(e), u("update:theme", e), r();
     });
-    function u() {
-      o && (n.value === "system" ? (t.value = s.value, o.setAttribute("data-theme", t.value)) : (t.value = n.value, o.setAttribute("data-theme", n.value)), l.value = t.value);
+    function r() {
+      i && (n.value === "system" ? (t.value = s.value, i.setAttribute("data-theme", t.value)) : (t.value = n.value, i.setAttribute("data-theme", n.value)), m.value = t.value);
     }
     function c(e) {
-      n.value = e, u();
+      n.value = e, r();
     }
-    return p({
+    return x({
       theme: n,
       resolvedTheme: t,
       isDark: C(() => t.value === "dark"),
       setTheme: c
-    }), () => r.default();
+    }), () => a.default();
   }
 });
 export {
-  S as ThemeContext
+  B as ThemeContext,
+  $ as toggleAnimateTheme,
+  S as toggleDark,
+  R as useThemeContext
 };

package/dist/context.umd.cjs

@@ -1,6 +1,6 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.1
+  * Version: 0.0.2
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
@@ -9,4 +9,4 @@
   * Homepage: 
   * Contact: gx12358@gmail.com
 */
-(function(t,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("@gx-design-vue/pro-provider"),require("@vueuse/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@gx-design-vue/pro-provider","@vueuse/core","vue"],i):(t=typeof globalThis<"u"?globalThis:t||self,i(t.GContext={},t.proProvider,t.core,t.vue))})(this,(function(t,i,h,n){"use strict";const{provideContext:d,useInjectContext:y}=i.useContext("theme-provider"),c=n.defineComponent({name:"ThemeContext",inheritAttrs:!1,props:{theme:{type:String},defaultTheme:{type:String,default:"system"},onChange:{type:Function},"onUpdate:theme":{type:Function},onChangeBase:{type:Function}},emits:["change","changeBase","update:theme"],slots:Object,setup(s,{slots:f,emit:l}){const r=document.querySelector("html"),o=n.ref(),u=n.ref(s.theme||s.defaultTheme||"system");n.watch(()=>s.theme,e=>{e&&(u.value=e)});const{system:a,store:p}=h.useColorMode();n.watch(()=>a.value,()=>{m()},{immediate:!0}),n.watch(()=>o.value,e=>{e&&s.onChangeBase?.(e)},{immediate:!0}),n.watch(u,e=>{s.onChange?.(e),l("update:theme",e),m()});function m(){r&&(u.value==="system"?(o.value=a.value,r.setAttribute("data-theme",o.value)):(o.value=u.value,r.setAttribute("data-theme",u.value)),p.value=o.value)}function v(e){u.value=e,m()}return d({theme:u,resolvedTheme:o,isDark:n.computed(()=>o.value==="dark"),setTheme:v}),()=>f.default()}});t.ThemeContext=c,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})}));
+(function(e,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("@gx-design-vue/pro-provider"),require("@vueuse/core"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@gx-design-vue/pro-provider","@vueuse/core","vue"],h):(e=typeof globalThis<"u"?globalThis:e||self,h(e.GContext={},e.proProvider,e.core,e.vue))})(this,(function(e,h,d,a){"use strict";const{provideContext:T,useInjectContext:y}=h.useContext("theme-provider"),p=d.useDark({storageKey:"gx-pro-theme-appearance"}),v=d.useToggle(p);function C(s,o){if(!(document.startViewTransition&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches)){o.setTheme?.(o.isDark?"dark":"light");return}const r=s.getBoundingClientRect(),n=r.left+r.width/2,i=r.top+r.height/2,c=Math.hypot(Math.max(n,innerWidth-n),Math.max(i,innerHeight-i)),m=100*n/innerWidth,u=100*i/innerHeight,l=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,t=100*c/l;document.startViewTransition(async()=>{o.setTheme?.(o.isDark?"dark":"light"),await a.nextTick()}).ready.then(()=>{const g=[`circle(0% at ${m}% ${u}%)`,`circle(${t}% at ${m}% ${u}%)`];document.documentElement.animate({clipPath:o.isDark?[...g].reverse():g},{duration:400,fill:"forwards",easing:"ease-in",pseudoElement:o.isDark?"::view-transition-old(root)":"::view-transition-new(root)"})})}const x=a.defineComponent({name:"ThemeContext",inheritAttrs:!1,props:{theme:{type:String},defaultTheme:{type:String,default:"system"},onChange:{type:Function},"onUpdate:theme":{type:Function},onChangeBase:{type:Function}},emits:["change","changeBase","update:theme"],slots:Object,setup(s,{slots:o,emit:f}){const r=document.querySelector("html"),n=a.ref(),i=a.ref(s.theme||s.defaultTheme||"system");a.watch(()=>s.theme,t=>{t&&(i.value=t)});const{system:c,store:m}=d.useColorMode();a.watch(()=>c.value,()=>{u()},{immediate:!0}),a.watch(()=>n.value,t=>{t&&s.onChangeBase?.(t)},{immediate:!0}),a.watch(i,t=>{s.onChange?.(t),f("update:theme",t),u()});function u(){r&&(i.value==="system"?(n.value=c.value,r.setAttribute("data-theme",n.value)):(n.value=i.value,r.setAttribute("data-theme",i.value)),m.value=n.value)}function l(t){i.value=t,u()}return T({theme:i,resolvedTheme:n,isDark:a.computed(()=>n.value==="dark"),setTheme:l}),()=>o.default()}});e.ThemeContext=x,e.toggleAnimateTheme=C,e.toggleDark=v,e.useThemeContext=y,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -1 +1 @@
-export { default as ThemeContext } from './theme-context';
+export * from './theme-context';

package/dist/theme-context/ThemeContext.d.ts

@@ -0,0 +1,46 @@
+import type { PropType, SlotsType } from 'vue';
+import type { BaseTheme, ThemeValue } from './types';
+declare const ThemeContext: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    theme: {
+        type: PropType<ThemeValue>;
+    };
+    defaultTheme: {
+        type: PropType<ThemeValue>;
+        default: string;
+    };
+    onChange: {
+        type: PropType<(theme: ThemeValue) => void>;
+    };
+    'onUpdate:theme': {
+        type: PropType<(theme: ThemeValue) => void>;
+    };
+    onChangeBase: {
+        type: PropType<(theme: BaseTheme) => void>;
+    };
+}>, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "changeBase" | "update:theme")[], "change" | "changeBase" | "update:theme", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    theme: {
+        type: PropType<ThemeValue>;
+    };
+    defaultTheme: {
+        type: PropType<ThemeValue>;
+        default: string;
+    };
+    onChange: {
+        type: PropType<(theme: ThemeValue) => void>;
+    };
+    'onUpdate:theme': {
+        type: PropType<(theme: ThemeValue) => void>;
+    };
+    onChangeBase: {
+        type: PropType<(theme: BaseTheme) => void>;
+    };
+}>> & Readonly<{
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
+    onChangeBase?: ((...args: any[]) => any) | undefined;
+}>, {
+    defaultTheme: ThemeValue;
+}, SlotsType<{
+    default(): void;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default ThemeContext;

package/dist/theme-context/context.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeProviderContext } from './types';
+export declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext | undefined) => ThemeProviderContext;

package/dist/theme-context/index.d.ts

@@ -1,54 +1,6 @@
-import type { ComputedRef, PropType, Ref, SlotsType } from 'vue';
-export type BaseTheme = 'light' | 'dark';
-export type ThemeValue = 'light' | 'dark' | 'system';
-export interface ThemeProviderContext {
-    theme: Ref<ThemeValue>;
-    resolvedTheme: Ref<BaseTheme>;
-    isDark: ComputedRef<boolean>;
-    setTheme: (theme: ThemeValue) => void;
-}
-export declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext | undefined) => ThemeProviderContext;
-declare const ThemeContext: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    theme: {
-        type: PropType<ThemeValue>;
-    };
-    defaultTheme: {
-        type: PropType<ThemeValue>;
-        default: string;
-    };
-    onChange: {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    'onUpdate:theme': {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    onChangeBase: {
-        type: PropType<(theme: BaseTheme) => void>;
-    };
-}>, () => void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "changeBase" | "update:theme")[], "change" | "changeBase" | "update:theme", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    theme: {
-        type: PropType<ThemeValue>;
-    };
-    defaultTheme: {
-        type: PropType<ThemeValue>;
-        default: string;
-    };
-    onChange: {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    'onUpdate:theme': {
-        type: PropType<(theme: ThemeValue) => void>;
-    };
-    onChangeBase: {
-        type: PropType<(theme: BaseTheme) => void>;
-    };
-}>> & Readonly<{
-    onChange?: ((...args: any[]) => any) | undefined;
-    "onUpdate:theme"?: ((...args: any[]) => any) | undefined;
-    onChangeBase?: ((...args: any[]) => any) | undefined;
-}>, {
-    defaultTheme: ThemeValue;
-}, SlotsType<{
-    default(): void;
-}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default ThemeContext;
+import { useThemeContext } from './context';
+import { toggleDark } from './dark';
+export { toggleDark, useThemeContext };
+export * from './utils';
+export * from './types';
+export { default as ThemeContext } from './ThemeContext';

package/dist/theme-context/types.d.ts

@@ -0,0 +1,9 @@
+import type { ComputedRef, Ref } from 'vue';
+export type BaseTheme = 'light' | 'dark';
+export type ThemeValue = 'light' | 'dark' | 'system';
+export interface ThemeProviderContext {
+    theme: Ref<ThemeValue>;
+    resolvedTheme: Ref<BaseTheme>;
+    isDark: ComputedRef<boolean>;
+    setTheme: (theme: ThemeValue) => void;
+}

package/dist/theme-context/utils.d.ts

@@ -1,4 +1,4 @@
-import type { BaseTheme } from './index';
+import type { BaseTheme } from './types';
 export declare function toggleAnimateTheme(el: HTMLElement, props: {
     isDark: boolean;
     setTheme?: (value: BaseTheme) => void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Gx Design context",
   "exports": {
     ".": {