@gx-design-vue/context 0.0.3 → 0.0.5-alpha.0

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 vue6 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: vue6.DefineComponent<vue6.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, {}, {}, {}, vue6.ComponentOptionsMixin, vue6.ComponentOptionsMixin, {}, string, vue6.PublicProps, Readonly<vue6.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, vue6.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 | undefined) => 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 | undefined) => 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,42 +1,60 @@
 {
   "name": "@gx-design-vue/context",
   "type": "module",
-  "version": "0.0.3",
-  "description": "Gx Design context",
+  "version": "0.0.5-alpha.0",
+  "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",
-    "ant-design-vue": "^4.2.6"
+    "vue": ">=3.2.0"
   },
   "dependencies": {
-    "@vueuse/core": "^14.0.0",
-    "@gx-design-vue/pro-provider": "^0.1.0-beta.130"
+    "@vueuse/core": "^14.2.0",
+    "@gx-design-vue/pro-utils": "0.2.0-alpha.0"
   },
-  "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.2
-  * Author: gx12358
-  * Copyright (C) 2024 gx12358
-  * License: MIT License
-  * Description: Gx Design context
-  * Date Created: 2025-11-23 
-  * 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"})}));