@gx-design-vue/context 0.0.4 → 0.0.5

package/dist/context/index.d.ts

@@ -1,5 +1,4 @@
 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;

package/dist/context.js

@@ -1,6 +1,6 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.3
+  * Version: 0.0.4
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
@@ -9,14 +9,24 @@
   * Homepage: 
   * Contact: gx12358@gmail.com
 */
-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 { 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__ */ y({
+const P = /* @__PURE__ */ v({
   name: "ContextProvider",
   inheritAttrs: !1,
   props: {
@@ -33,26 +43,15 @@ const P = /* @__PURE__ */ y({
   setup(e, {
     slots: n
   }) {
-    return e.contextKey && e.value && k(e.value) ? x(g(e.contextKey), {
+    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 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({
+    return x(g(e), n || {});
+}, { provideContext: S, useInjectContext: B } = K("theme-provider"), A = b({
   storageKey: "gx-pro-theme-appearance"
 }), O = j(A);
 function F(e, n) {
@@ -79,7 +78,7 @@ function F(e, n) {
     });
   });
 }
-const H = /* @__PURE__ */ y({
+const H = /* @__PURE__ */ v({
   name: "ThemeContext",
   inheritAttrs: !1,
   props: {

package/dist/context.umd.cjs

@@ -1,6 +1,6 @@
 /*!
   * Gx Design Pro
-  * Version: 0.0.3
+  * Version: 0.0.4
   * Author: gx12358
   * Copyright (C) 2024 gx12358
   * License: MIT License
@@ -9,4 +9,4 @@
   * Homepage: 
   * Contact: gx12358@gmail.com
 */
-(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"})}));
+(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,2 +1,4 @@
-export * from './context';
+import { useContext } from './context';
+import { ContextProvider, useContextProvider } from './context/ContextProvider';
 export * from './theme-context';
+export { ContextProvider, useContext, useContextProvider };

package/package.json

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