@gx-design-vue/context 0.0.2 → 0.0.4

package/README.md

@@ -6,5 +6,5 @@ pnpm add @gx-design-vue/context
 
 ```ts
 // 可全局引入，也可以单独引入
-import { Gcontext } from '@gx-design-vue/context'
+import { useContext } from '@gx-design-vue/context'
 ```

package/dist/context/ContextProvider.d.ts

@@ -0,0 +1,26 @@
+import type { PropType, SlotsType } from 'vue';
+declare const ContextProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    contextKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    value: {
+        type: PropType<any>;
+        required: true;
+    };
+}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    contextKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    value: {
+        type: PropType<any>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, SlotsType<{
+    default: any;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const useContextProvider: <T = any>(contextInjectKey: string, defaultValue?: T) => T & {
+    contextId: string;
+};
+export { ContextProvider, useContextProvider };

package/dist/context/index.d.ts

@@ -0,0 +1,7 @@
+import type { InjectionKey } from 'vue';
+export * from './ContextProvider';
+export declare function useContext<T>(key: string, defaultValue?: T): {
+    provideContext: (value: T) => void;
+    useInjectContext: (injectDefaultValue?: T) => T;
+    contextInjectKey: InjectionKey<T>;
+};

package/dist/context.js

@@ -1,21 +1,85 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.1
+  * Version: 0.0.3
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
-  * Description: Gx Design context
-  * Date Created: 2025-11-23 
+  * Description: Gx Design Context
+  * Date Created: 2025-12-14 
   * 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 { 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";
+import { isObject as k, getRandomNumber as w } from "@gx-design-vue/pro-utils";
+import { useDark as b, useToggle as j, useColorMode as D } from "@vueuse/core";
+let u = null;
+function g(e) {
+  return u || (u = Symbol(e), u);
+}
+const P = /* @__PURE__ */ y({
+  name: "ContextProvider",
+  inheritAttrs: !1,
+  props: {
+    contextKey: {
+      type: [String],
+      required: !0
+    },
+    value: {
+      type: Object,
+      required: !0
+    }
+  },
+  slots: Object,
+  setup(e, {
+    slots: n
+  }) {
+    return e.contextKey && e.value && k(e.value) ? x(g(e.contextKey), {
+      ...C(e.value),
+      contextId: `${e.contextKey}-${w().uuid(10)}`
+    }) : console.warn("[ContextProvider]: contextKey is required"), () => n.default?.();
+  }
+}), q = (e, n) => {
+  if (typeof u == "symbol")
+    return v(g(e), n || {});
+};
+function K(e, n) {
+  const a = Symbol(e);
+  return {
+    provideContext: (t) => {
+      x(a, t);
+    },
+    useInjectContext: (t) => v(a, t || n || {}),
+    contextInjectKey: a
+  };
+}
+const { provideContext: S, useInjectContext: B } = K("theme-provider"), A = b({
+  storageKey: "gx-pro-theme-appearance"
+}), O = j(A);
+function F(e, n) {
+  if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
+    n.setTheme?.(n.isDark ? "dark" : "light");
+    return;
+  }
+  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;
+  document.startViewTransition(async () => {
+    n.setTheme?.(n.isDark ? "dark" : "light"), await T();
+  }).ready.then(() => {
+    const l = [
+      `circle(0% at ${m}% ${s}%)`,
+      `circle(${i}% at ${m}% ${s}%)`
+    ];
+    document.documentElement.animate({
+      clipPath: n.isDark ? [...l].reverse() : l
+    }, {
+      duration: 400,
+      // 保持最终状态
+      fill: "forwards",
+      easing: "ease-in",
+      pseudoElement: n.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+    });
+  });
+}
+const H = /* @__PURE__ */ y({
   name: "ThemeContext",
   inheritAttrs: !1,
   props: {
@@ -38,43 +102,49 @@ const {
   },
   emits: ["change", "changeBase", "update:theme"],
   slots: Object,
-  setup(m, {
-    slots: r,
-    emit: i
+  setup(e, {
+    slots: n,
+    emit: a
   }) {
-    const o = document.querySelector("html"), t = h(), n = h(m.theme || m.defaultTheme || "system");
-    a(() => m.theme, (e) => {
-      e && (n.value = e);
+    const r = document.querySelector("html"), o = f(), t = f(e.theme || e.defaultTheme || "system");
+    d(() => e.theme, (i) => {
+      i && (t.value = i);
     });
     const {
-      system: s,
-      store: l
-    } = f();
-    a(() => s.value, () => {
-      u();
+      system: c,
+      store: m
+    } = D();
+    d(() => c.value, () => {
+      s();
     }, {
       immediate: !0
-    }), a(() => t.value, (e) => {
-      e && m.onChangeBase?.(e);
+    }), d(() => o.value, (i) => {
+      i && e.onChangeBase?.(i);
     }, {
       immediate: !0
-    }), a(n, (e) => {
-      m.onChange?.(e), i("update:theme", e), u();
+    }), d(t, (i) => {
+      e.onChange?.(i), a("update:theme", i), s();
     });
-    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 s() {
+      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);
     }
-    function c(e) {
-      n.value = e, u();
+    function h(i) {
+      t.value = i, s();
     }
-    return p({
-      theme: n,
-      resolvedTheme: t,
-      isDark: C(() => t.value === "dark"),
-      setTheme: c
-    }), () => r.default();
+    return S({
+      theme: t,
+      resolvedTheme: o,
+      isDark: p(() => o.value === "dark"),
+      setTheme: h
+    }), () => n.default();
   }
 });
 export {
-  S as ThemeContext
+  P as ContextProvider,
+  H as ThemeContext,
+  F as toggleAnimateTheme,
+  O as toggleDark,
+  K as useContext,
+  q as useContextProvider,
+  B as useThemeContext
 };

package/dist/context.umd.cjs

@@ -1,12 +1,12 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.1
+  * Version: 0.0.3
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
-  * Description: Gx Design context
-  * Date Created: 2025-11-23 
+  * Description: Gx Design Context
+  * Date Created: 2025-12-14 
   * 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(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@gx-design-vue/pro-utils"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@gx-design-vue/pro-utils","@vueuse/core"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.GContext={},n.vue,n.proUtils,n.core))})(this,(function(n,t,y,l){"use strict";let d=null;function g(e){return d||(d=Symbol(e),d)}const T=t.defineComponent({name:"ContextProvider",inheritAttrs:!1,props:{contextKey:{type:[String],required:!0},value:{type:Object,required:!0}},slots:Object,setup(e,{slots:o}){return e.contextKey&&e.value&&y.isObject(e.value)?t.provide(g(e.contextKey),{...t.toRefs(e.value),contextId:`${e.contextKey}-${y.getRandomNumber().uuid(10)}`}):console.warn("[ContextProvider]: contextKey is required"),()=>o.default?.()}}),v=(e,o)=>{if(typeof d=="symbol")return t.inject(g(e),o||{})};function x(e,o){const u=Symbol(e);return{provideContext:i=>{t.provide(u,i)},useInjectContext:i=>t.inject(u,i||o||{}),contextInjectKey:u}}const{provideContext:p,useInjectContext:w}=x("theme-provider"),k=l.useDark({storageKey:"gx-pro-theme-appearance"}),j=l.useToggle(k);function b(e,o){if(!(document.startViewTransition&&!window.matchMedia("(prefers-reduced-motion: reduce)").matches)){o.setTheme?.(o.isDark?"dark":"light");return}const s=e.getBoundingClientRect(),r=s.left+s.width/2,i=s.top+s.height/2,m=Math.hypot(Math.max(r,innerWidth-r),Math.max(i,innerHeight-i)),h=100*r/innerWidth,c=100*i/innerHeight,f=Math.hypot(innerWidth,innerHeight)/Math.SQRT2,a=100*m/f;document.startViewTransition(async()=>{o.setTheme?.(o.isDark?"dark":"light"),await t.nextTick()}).ready.then(()=>{const C=[`circle(0% at ${h}% ${c}%)`,`circle(${a}% at ${h}% ${c}%)`];document.documentElement.animate({clipPath:o.isDark?[...C].reverse():C},{duration:400,fill:"forwards",easing:"ease-in",pseudoElement:o.isDark?"::view-transition-old(root)":"::view-transition-new(root)"})})}const S=t.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(e,{slots:o,emit:u}){const s=document.querySelector("html"),r=t.ref(),i=t.ref(e.theme||e.defaultTheme||"system");t.watch(()=>e.theme,a=>{a&&(i.value=a)});const{system:m,store:h}=l.useColorMode();t.watch(()=>m.value,()=>{c()},{immediate:!0}),t.watch(()=>r.value,a=>{a&&e.onChangeBase?.(a)},{immediate:!0}),t.watch(i,a=>{e.onChange?.(a),u("update:theme",a),c()});function c(){s&&(i.value==="system"?(r.value=m.value,s.setAttribute("data-theme",r.value)):(r.value=i.value,s.setAttribute("data-theme",i.value)),h.value=r.value)}function f(a){i.value=a,c()}return p({theme:i,resolvedTheme:r,isDark:t.computed(()=>r.value==="dark"),setTheme:f}),()=>o.default()}});n.ContextProvider=T,n.ThemeContext=S,n.toggleAnimateTheme=b,n.toggleDark=j,n.useContext=x,n.useContextProvider=v,n.useThemeContext=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -1 +1,2 @@
-export { default as ThemeContext } from './theme-context';
+export * from './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,8 +1,8 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.2",
-  "description": "Gx Design context",
+  "version": "0.0.4",
+  "description": "Gx Design Context",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,12 +26,11 @@
     "lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "peerDependencies": {
-    "vue": ">=3.0.0",
-    "ant-design-vue": "^4.2.6"
+    "vue": ">=3.0.0"
   },
   "dependencies": {
     "@vueuse/core": "^14.0.0",
-    "@gx-design-vue/pro-provider": "^0.1.0-beta.130"
+    "@gx-design-vue/pro-utils": "^0.2.0-beta.85"
   },
   "devDependencies": {
     "typescript": "^5.3.3"