@gx-design-vue/context 0.0.3 → 0.0.5

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,6 @@
+import type { InjectionKey } from 'vue';
+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,45 +1,84 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.2
+  * Version: 0.0.4
   * 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 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({
+import { provide as y, inject as x, defineComponent as v, toRefs as C, 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";
+function K(e, n) {
+  const a = Symbol(e);
+  return {
+    provideContext: (t) => {
+      y(a, t);
+    },
+    useInjectContext: (t) => x(a, t || n || {}),
+    contextInjectKey: a
+  };
+}
+let u = null;
+function g(e) {
+  return u || (u = Symbol(e), u);
+}
+const P = /* @__PURE__ */ v({
+  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) ? y(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 x(g(e), n || {});
+}, { provideContext: S, useInjectContext: B } = K("theme-provider"), A = b({
   storageKey: "gx-pro-theme-appearance"
-}), S = T(k);
-function $(o, a) {
+}), O = j(A);
+function F(e, n) {
   if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
-    a.setTheme?.(a.isDark ? "dark" : "light");
+    n.setTheme?.(n.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;
+  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 () => {
-    a.setTheme?.(a.isDark ? "dark" : "light"), await v();
+    n.setTheme?.(n.isDark ? "dark" : "light"), await T();
   }).ready.then(() => {
-    const d = [
-      `circle(0% at ${m}% ${r}%)`,
-      `circle(${e}% at ${m}% ${r}%)`
+    const l = [
+      `circle(0% at ${m}% ${s}%)`,
+      `circle(${i}% at ${m}% ${s}%)`
     ];
     document.documentElement.animate({
-      clipPath: a.isDark ? [...d].reverse() : d
+      clipPath: n.isDark ? [...l].reverse() : l
     }, {
       duration: 400,
       // 保持最终状态
       fill: "forwards",
       easing: "ease-in",
-      pseudoElement: a.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+      pseudoElement: n.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
     });
   });
 }
-const B = /* @__PURE__ */ p({
+const H = /* @__PURE__ */ v({
   name: "ThemeContext",
   inheritAttrs: !1,
   props: {
@@ -62,46 +101,49 @@ const B = /* @__PURE__ */ p({
   },
   emits: ["change", "changeBase", "update:theme"],
   slots: Object,
-  setup(o, {
-    slots: a,
-    emit: u
+  setup(e, {
+    slots: n,
+    emit: a
   }) {
-    const i = document.querySelector("html"), t = l(), n = l(o.theme || o.defaultTheme || "system");
-    h(() => o.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,
+      system: c,
       store: m
-    } = y();
-    h(() => s.value, () => {
-      r();
+    } = D();
+    d(() => c.value, () => {
+      s();
     }, {
       immediate: !0
-    }), h(() => t.value, (e) => {
-      e && o.onChangeBase?.(e);
+    }), d(() => o.value, (i) => {
+      i && e.onChangeBase?.(i);
     }, {
       immediate: !0
-    }), h(n, (e) => {
-      o.onChange?.(e), u("update:theme", e), r();
+    }), d(t, (i) => {
+      e.onChange?.(i), a("update:theme", i), s();
     });
-    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 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, r();
+    function h(i) {
+      t.value = i, s();
     }
-    return x({
-      theme: n,
-      resolvedTheme: t,
-      isDark: C(() => t.value === "dark"),
-      setTheme: c
-    }), () => a.default();
+    return S({
+      theme: t,
+      resolvedTheme: o,
+      isDark: p(() => o.value === "dark"),
+      setTheme: h
+    }), () => n.default();
   }
 });
 export {
-  B as ThemeContext,
-  $ as toggleAnimateTheme,
-  S as toggleDark,
-  R as useThemeContext
+  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.2
+  * Version: 0.0.4
   * 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(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"})}));
+(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.Context={},n.vue,n.proUtils,n.core))})(this,(function(n,t,y,l){"use strict";function g(e,o){const u=Symbol(e);return{provideContext:i=>{t.provide(u,i)},useInjectContext:i=>t.inject(u,i||o||{}),contextInjectKey:u}}let d=null;function x(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(x(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(x(e),o||{})},{provideContext:p,useInjectContext:w}=g("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=g,n.useContextProvider=v,n.useThemeContext=w,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})}));

package/dist/index.d.ts

@@ -1 +1,4 @@
+import { useContext } from './context';
+import { ContextProvider, useContextProvider } from './context/ContextProvider';
 export * from './theme-context';
+export { ContextProvider, useContext, useContextProvider };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.3",
-  "description": "Gx Design context",
+  "version": "0.0.5",
+  "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"