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

package/dist/index.js

@@ -0,0 +1,9 @@
+import { useContext } from "./context/index.js";
+import { ContextProvider, useContextProvider } from "./context/ContextProvider.js";
+import { useThemeContext } from "./theme-context/context.js";
+import { toggleDark } from "./theme-context/dark.js";
+import ThemeContext_default, { themeContextProps } from "./theme-context/ThemeContext.js";
+import { toggleAnimateTheme } from "./theme-context/utils.js";
+import "./theme-context/index.js";
+
+export { ContextProvider, ThemeContext_default as ThemeContext, themeContextProps, toggleAnimateTheme, toggleDark, useContext, useContextProvider, useThemeContext };

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

@@ -1,46 +1,77 @@
-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;
+import { BaseTheme, ThemeValue } from "./types.js";
+import * as vue0 from "vue";
+import { PropType, SlotsType } from "vue";
+
+//#region src/theme-context/ThemeContext.d.ts
+interface ThemeContextProps {
+  theme?: ThemeValue;
+  defaultTheme?: ThemeValue;
+  onChange?: (theme: ThemeValue) => void;
+  onChangeBase?: (theme: BaseTheme) => void;
+  onUpdateTheme?: (theme: ThemeValue) => void;
+}
+interface ThemeContextEmits {
+  change: (value: ThemeValue) => void;
+  changeBase: (value: BaseTheme) => void;
+  'update:theme': (value: ThemeValue) => void;
+}
+interface ThemeContextSlots {
+  default?: () => any;
+}
+declare const themeContextProps: {
+  theme: {
+    type: PropType<ThemeValue>;
+  };
+  defaultTheme: {
+    type: PropType<ThemeValue>;
+    default: string;
+  };
+  onChange: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+  onChangeBase: {
+    type: PropType<(theme: BaseTheme) => void>;
+  };
+  onUpdateTheme: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+};
+declare const ThemeContext: vue0.DefineComponent<vue0.ExtractPropTypes<{
+  theme: {
+    type: PropType<ThemeValue>;
+  };
+  defaultTheme: {
+    type: PropType<ThemeValue>;
+    default: string;
+  };
+  onChange: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+  onChangeBase: {
+    type: PropType<(theme: BaseTheme) => void>;
+  };
+  onUpdateTheme: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+}>, () => any, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
+  theme: {
+    type: PropType<ThemeValue>;
+  };
+  defaultTheme: {
+    type: PropType<ThemeValue>;
+    default: string;
+  };
+  onChange: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+  onChangeBase: {
+    type: PropType<(theme: BaseTheme) => void>;
+  };
+  onUpdateTheme: {
+    type: PropType<(theme: ThemeValue) => void>;
+  };
+}>> & Readonly<{}>, {
+  defaultTheme: ThemeValue;
+}, SlotsType<ThemeContextSlots>, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { ThemeContextEmits, ThemeContextProps, ThemeContextSlots, ThemeContext as default, themeContextProps };

package/dist/theme-context/ThemeContext.js

@@ -0,0 +1,68 @@
+import { createThemeContext } from "./context.js";
+import { computed, defineComponent, ref, watch } from "vue";
+import { useColorMode } from "@vueuse/core";
+
+//#region src/theme-context/ThemeContext.tsx
+const themeContextProps = {
+	theme: { type: String },
+	defaultTheme: {
+		type: String,
+		default: "system"
+	},
+	onChange: { type: Function },
+	onChangeBase: { type: Function },
+	onUpdateTheme: { type: Function }
+};
+const ThemeContext = /* @__PURE__ */ defineComponent({
+	name: "ThemeContext",
+	inheritAttrs: false,
+	props: themeContextProps,
+	slots: Object,
+	setup: (props, { slots, emit }) => {
+		const html = document.querySelector("html");
+		const theme = ref();
+		const systemTheme = ref(props.theme || props.defaultTheme || "system");
+		watch(() => props.theme, (val) => {
+			if (val) systemTheme.value = val;
+		});
+		const { system, store } = useColorMode();
+		watch(() => system.value, () => {
+			updateSystemThem();
+		}, { immediate: true });
+		watch(() => theme.value, (val) => {
+			if (val) props.onChangeBase?.(val);
+		}, { immediate: true });
+		watch(systemTheme, (val) => {
+			props.onChange?.(val);
+			emit("update:theme", val);
+			updateSystemThem();
+		});
+		function updateSystemThem() {
+			if (html) {
+				if (systemTheme.value === "system") {
+					theme.value = system.value;
+					html.setAttribute("data-theme", theme.value);
+				} else {
+					theme.value = systemTheme.value;
+					html.setAttribute("data-theme", systemTheme.value);
+				}
+				store.value = theme.value;
+			}
+		}
+		function setTheme(val) {
+			systemTheme.value = val;
+			updateSystemThem();
+		}
+		createThemeContext({
+			theme: systemTheme,
+			resolvedTheme: theme,
+			isDark: computed(() => theme.value === "dark"),
+			setTheme
+		});
+		return () => slots.default?.();
+	}
+});
+var ThemeContext_default = ThemeContext;
+
+//#endregion
+export { ThemeContext_default as default, themeContextProps };

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

@@ -1,2 +1,6 @@
-import type { ThemeProviderContext } from './types';
-export declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext | undefined) => ThemeProviderContext;
+import { ThemeProviderContext } from "./types.js";
+
+//#region src/theme-context/context.d.ts
+declare const createThemeContext: (value: ThemeProviderContext) => void, useThemeContext: (injectDefaultValue?: ThemeProviderContext) => ThemeProviderContext;
+//#endregion
+export { createThemeContext, useThemeContext };

package/dist/theme-context/context.js

@@ -0,0 +1,7 @@
+import { useContext } from "../context/index.js";
+
+//#region src/theme-context/context.ts
+const { provideContext: createThemeContext, useInjectContext: useThemeContext } = useContext("theme-provider");
+
+//#endregion
+export { createThemeContext, useThemeContext };

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

@@ -1,2 +1,7 @@
-export declare const isDark: import("vue").WritableComputedRef<boolean, boolean>;
-export declare const toggleDark: (value?: boolean | undefined) => boolean;
+import * as _vueuse_core0 from "@vueuse/core";
+
+//#region src/theme-context/dark.d.ts
+declare const isDark: _vueuse_core0.UseDarkReturn;
+declare const toggleDark: (value?: boolean) => boolean;
+//#endregion
+export { isDark, toggleDark };

package/dist/theme-context/dark.js

@@ -0,0 +1,8 @@
+import { useDark, useToggle } from "@vueuse/core";
+
+//#region src/theme-context/dark.ts
+const isDark = useDark({ storageKey: "gx-theme-appearance" });
+const toggleDark = useToggle(isDark);
+
+//#endregion
+export { isDark, toggleDark };

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

@@ -1,6 +1,6 @@
-import { useThemeContext } from './context';
-import { toggleDark } from './dark';
-export { toggleDark, useThemeContext };
-export * from './utils';
-export * from './types';
-export { default as ThemeContext } from './ThemeContext';
+import { BaseTheme, ThemeProviderContext, ThemeValue } from "./types.js";
+import { useThemeContext } from "./context.js";
+import { toggleDark } from "./dark.js";
+import ThemeContext, { ThemeContextEmits, ThemeContextProps, ThemeContextSlots, themeContextProps } from "./ThemeContext.js";
+import { toggleAnimateTheme } from "./utils.js";
+export { BaseTheme, ThemeContext, ThemeContextEmits, ThemeContextProps, ThemeContextSlots, ThemeProviderContext, ThemeValue, themeContextProps, toggleAnimateTheme, toggleDark, useThemeContext };

package/dist/theme-context/index.js

@@ -0,0 +1,6 @@
+import { useThemeContext } from "./context.js";
+import { toggleDark } from "./dark.js";
+import ThemeContext_default, { themeContextProps } from "./ThemeContext.js";
+import { toggleAnimateTheme } from "./utils.js";
+
+export { ThemeContext_default as ThemeContext, themeContextProps, toggleAnimateTheme, toggleDark, useThemeContext };

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

@@ -1,9 +1,13 @@
-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;
+import { ComputedRef, Ref } from "vue";
+
+//#region src/theme-context/types.d.ts
+type BaseTheme = 'light' | 'dark';
+type ThemeValue = 'light' | 'dark' | 'system';
+interface ThemeProviderContext {
+  theme: Ref<ThemeValue>;
+  resolvedTheme: Ref<BaseTheme>;
+  isDark: ComputedRef<boolean>;
+  setTheme: (theme: ThemeValue) => void;
 }
+//#endregion
+export { BaseTheme, ThemeProviderContext, ThemeValue };

package/dist/theme-context/types.js

@@ -0,0 +1 @@
+export {  };

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

@@ -1,5 +1,9 @@
-import type { BaseTheme } from './types';
-export declare function toggleAnimateTheme(el: HTMLElement, props: {
-    isDark: boolean;
-    setTheme?: (value: BaseTheme) => void;
+import { BaseTheme } from "./types.js";
+
+//#region src/theme-context/utils.d.ts
+declare function toggleAnimateTheme(el: HTMLElement, props: {
+  isDark: boolean;
+  setTheme?: (value: BaseTheme) => void;
 }): void;
+//#endregion
+export { toggleAnimateTheme };

package/dist/theme-context/utils.js

@@ -0,0 +1,32 @@
+import { nextTick } from "vue";
+
+//#region src/theme-context/utils.ts
+function toggleAnimateTheme(el, props) {
+	if (!(document.startViewTransition && !window.matchMedia("(prefers-reduced-motion: reduce)").matches)) {
+		props.setTheme?.(props.isDark ? "dark" : "light");
+		return;
+	}
+	const rect = el.getBoundingClientRect();
+	const x = rect.left + rect.width / 2;
+	const y = rect.top + rect.height / 2;
+	const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
+	const ratioX = 100 * x / innerWidth;
+	const ratioY = 100 * y / innerHeight;
+	const referR = Math.hypot(innerWidth, innerHeight) / Math.SQRT2;
+	const ratioR = 100 * endRadius / referR;
+	document.startViewTransition(async () => {
+		props.setTheme?.(props.isDark ? "dark" : "light");
+		await nextTick();
+	}).ready.then(() => {
+		const clipPath = [`circle(0% at ${ratioX}% ${ratioY}%)`, `circle(${ratioR}% at ${ratioX}% ${ratioY}%)`];
+		document.documentElement.animate({ clipPath: props.isDark ? [...clipPath].reverse() : clipPath }, {
+			duration: 400,
+			fill: "forwards",
+			easing: "ease-in",
+			pseudoElement: props.isDark ? "::view-transition-old(root)" : "::view-transition-new(root)"
+		});
+	});
+}
+
+//#endregion
+export { toggleAnimateTheme };

package/global.d.ts

@@ -0,0 +1,8 @@
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    ThemeContext: typeof import('@gx-design-vue/context')['ThemeContext']
+    ContextProvider: typeof import('@gx-design-vue/context')['ContextProvider']
+  }
+}

package/package.json

@@ -1,41 +1,60 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5-alpha.1",
   "description": "Gx Design Context",
+  "author": {
+    "name": "gx12358",
+    "email": "gx12358@gmail.com",
+    "url": "https://github.com/gx12358"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gx12358/pro-components-next.git",
+    "directory": "packages/context"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/context.js",
-      "require": "./dist/context.umd.cjs"
-    }
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    },
+    "./global.d.ts": "./global.d.ts",
+    "./global": "./global.d.ts",
+    "./package.json": "./package.json"
   },
-  "main": "./dist/context.umd.cjs",
-  "module": "./dist/context.js",
-  "types": "./dist",
+  "unpkg": "dist/context.js",
+  "jsdelivr": "dist/context.js",
   "files": [
-    "dist"
+    "dist",
+    "global.d.ts",
+    "package.json"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "types": "vue-tsc --declaration --emitDeclarationOnly",
-    "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom",
-    "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "TIMING=1 eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
-  },
   "peerDependencies": {
-    "vue": ">=3.0.0"
+    "vue": ">=3.2.0"
   },
   "dependencies": {
-    "@vueuse/core": "^14.0.0",
-    "@gx-design-vue/pro-utils": "^0.2.0-beta.85"
+    "@vueuse/core": "^14.2.0",
+    "@gx-design-vue/pro-utils": "0.2.0-alpha.1"
   },
-  "devDependencies": {
-    "typescript": "^5.3.3"
-  },
-  "authors": [
-    "gx12358 <gx12358@gmail.com> (https://github.com/gx12358)"
-  ]
-}
+  "browserslist": [
+    "> 1%",
+    "not ie 11",
+    "not op_mini all"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "build": "run-s build:esm build:vite:parallel",
+    "build:esm": "tsdown",
+    "build:vite:parallel": "run-p build:umd build:full-esm",
+    "build:full-esm": "vite build --config ./vite.esm.config.ts",
+    "build:umd": "vite build",
+    "prepublish": "pnpm build"
+  }
+}

package/dist/context.umd.cjs

@@ -1,12 +0,0 @@
-/*!
-  * Gx Design Pro
-  * Version: 0.0.3
-  * Author: gx12358
-  * Copyright (C) 2024 gx12358
-  * License: MIT License
-  * Description: Gx Design Context
-  * Date Created: 2025-12-14 
-  * 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"})}));