@yh-ui/theme 1.0.51 → 1.0.53

package/dist/theme.cjs

@@ -420,8 +420,9 @@ const colorBlindPalettes = exports.colorBlindPalettes = {
 const THEME_TRANSITION_CLASS = "yh-theme-transitioning";
 const DEFAULT_TRANSITION_DURATION = 300;
 const DEFAULT_TRANSITION_TIMING = "cubic-bezier(0.4, 0, 0.2, 1)";
-function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING) {
+function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING, el = null) {
   if (typeof document === "undefined") return;
+  const target = el || document.documentElement;
   const style = document.createElement("style");
   style.id = "yh-theme-transition";
   style.textContent = `
@@ -439,9 +440,9 @@ function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing =
     }
   `;
   document.head.appendChild(style);
-  document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+  target.classList.add(THEME_TRANSITION_CLASS);
   setTimeout(() => {
-    document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+    target.classList.remove(THEME_TRANSITION_CLASS);
     style.remove();
   }, duration);
 }
@@ -556,6 +557,7 @@ class ThemeManager {
   };
   themeHistory = [];
   maxHistoryLength = 10;
+  responsiveVars = /* @__PURE__ */new Map();
   // 响应式状态
   state = (0, _vue.reactive)({
     theme: "default",
@@ -576,7 +578,8 @@ class ThemeManager {
       this.persistKey = options?.persistKey || "yh-ui-theme";
       this.restoreFromStorage();
     }
-    this.apply({
+    this.targetEl = getTargetElement(options?.scope);
+    this.applyFullConfig({
       preset: "default",
       ...options
     });
@@ -667,11 +670,12 @@ class ThemeManager {
   setDarkMode(dark) {
     this.isDark = dark;
     this.state.dark = dark;
-    if (typeof document !== "undefined") {
+    const el = this.targetEl || (typeof document !== "undefined" ? document.documentElement : null);
+    if (el) {
       if (dark) {
-        document.documentElement.classList.add("dark");
+        el.classList.add("dark");
       } else {
-        document.documentElement.classList.remove("dark");
+        el.classList.remove("dark");
       }
     }
     const currentColors = {
@@ -918,7 +922,7 @@ class ThemeManager {
     try {
       const snapshot = JSON.parse(json);
       if (this.transitionEnabled) {
-        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
       }
       this.setPreset(snapshot.preset);
       if (snapshot.colors && Object.keys(snapshot.colors).length > 0) {
@@ -965,8 +969,8 @@ class ThemeManager {
     this.state.colorBlindMode = "none";
     this.state.algorithm = "default";
     this.state.componentThemeVersion += 1;
-    document.documentElement.classList.remove("dark");
     const el = this.targetEl || document.documentElement;
+    el.classList.remove("dark");
     const colorTypes = ["primary", "success", "warning", "danger", "info"];
     const suffixes = ["", "light-1", "light-2", "light-3", "light-4", "light-5", "light-6", "light-7", "light-8", "light-9", "dark-2", "hover", "active", "disabled", "focus", "rgb"];
     colorTypes.forEach(type => {
@@ -984,7 +988,7 @@ class ThemeManager {
   /** 设置密度 */
   setDensity(density) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
     }
     this.currentDensity = density;
     this.state.density = density;
@@ -1004,7 +1008,7 @@ class ThemeManager {
   /** 设置色盲友好模式 */
   setColorBlindMode(mode) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing, this.targetEl);
     }
     this.colorBlindMode = mode;
     this.state.colorBlindMode = mode;
@@ -1109,7 +1113,7 @@ class ThemeManager {
         duration: DEFAULT_TRANSITION_DURATION,
         timing: DEFAULT_TRANSITION_TIMING
       };
-      enableThemeTransition(transitionConfig.duration, transitionConfig.timing);
+      enableThemeTransition(transitionConfig.duration, transitionConfig.timing, this.targetEl);
     }
     this.pushHistory();
     const snapshot = this.createTheme(config);
@@ -1194,6 +1198,7 @@ class ThemeManager {
   /** 设置响应式变量 (根据断点自动切换) */
   setResponsiveVar(name, values) {
     if (typeof document === "undefined") return;
+    this.responsiveVars.set(name, values);
     let style = document.getElementById("yh-responsive-vars");
     if (!style) {
       style = document.createElement("style");
@@ -1201,23 +1206,25 @@ class ThemeManager {
       document.head.appendChild(style);
     }
     let css = "";
-    const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
-    orderedBreakpoints.forEach(bp => {
-      if (values[bp]) {
-        if (bp === "xs") {
-          css += `
-            :root { ${name}: ${values[bp]}; }
-          `;
-        } else {
-          css += `
-            @media (min-width: ${breakpoints[bp]}px) {
-              :root { ${name}: ${values[bp]}; }
-            }
-          `;
+    this.responsiveVars.forEach((vals, varName) => {
+      const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
+      orderedBreakpoints.forEach(bp => {
+        if (vals[bp]) {
+          if (bp === "xs") {
+            css += `
+              :root { ${varName}: ${vals[bp]}; }
+            `;
+          } else {
+            css += `
+              @media (min-width: ${breakpoints[bp]}px) {
+                :root { ${varName}: ${vals[bp]}; }
+              }
+            `;
+          }
         }
-      }
+      });
     });
-    style.textContent += css;
+    style.textContent = css;
   }
   /** 销毁 */
   destroy() {
@@ -1229,6 +1236,7 @@ class ThemeManager {
     if (style) {
       style.remove();
     }
+    this.responsiveVars.clear();
   }
 }
 exports.ThemeManager = ThemeManager;

package/dist/theme.d.ts

@@ -148,6 +148,7 @@ export declare class ThemeManager {
     private transitionConfig;
     private themeHistory;
     private maxHistoryLength;
+    private responsiveVars;
     readonly state: {
         theme: PresetTheme;
         dark: boolean;
@@ -164,9 +165,9 @@ export declare class ThemeManager {
         algorithm: ColorAlgorithm;
         componentThemeVersion: number;
     };
-    constructor(options?: ThemeOptions);
+    constructor(options?: FullThemeConfig);
     /** 初始化主题 */
-    initTheme(options?: ThemeOptions): void;
+    initTheme(options?: FullThemeConfig): void;
     /** 应用主题 */
     apply(options: ThemeOptions): void;
     /** 设置预设主题 */
@@ -278,7 +279,7 @@ export declare function useTheme(): ThemeManager;
 export declare function setThemeColor(color: string): void;
 export declare function toggleDarkMode(): boolean;
 export declare function setThemePreset(preset: PresetTheme): void;
-export declare function initTheme(options?: ThemeOptions): ThemeManager;
+export declare function initTheme(options?: FullThemeConfig): ThemeManager;
 /** Vue Composition API Hook - 获取主题变量 */
 export declare function useThemeVars(): {
     getCssVar: (name: string) => string;
@@ -310,7 +311,7 @@ export declare function checkContrast(foreground: string, background: string, le
 export declare function getTextColorForBackground(background: string): string;
 export declare const THEME_INJECTION_KEY: InjectionKey<ThemeManager>;
 export declare const ThemePlugin: {
-    install(app: App, options?: ThemeOptions): void;
+    install(app: App, options?: FullThemeConfig): void;
 };
 export default ThemePlugin;
 export { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, mixColor, adjustSaturation, adjustLightness, getContrastRatio, ensureContrast, getRelativeLuminance, getComplementaryColor, getAnalogousColors, getTriadicColors, generatePaletteFromPrimary };

package/dist/theme.mjs

@@ -391,8 +391,9 @@ const colorBlindPalettes = {
 const THEME_TRANSITION_CLASS = "yh-theme-transitioning";
 const DEFAULT_TRANSITION_DURATION = 300;
 const DEFAULT_TRANSITION_TIMING = "cubic-bezier(0.4, 0, 0.2, 1)";
-function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING) {
+function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing = DEFAULT_TRANSITION_TIMING, el = null) {
   if (typeof document === "undefined") return;
+  const target = el || document.documentElement;
   const style = document.createElement("style");
   style.id = "yh-theme-transition";
   style.textContent = `
@@ -410,9 +411,9 @@ function enableThemeTransition(duration = DEFAULT_TRANSITION_DURATION, timing =
     }
   `;
   document.head.appendChild(style);
-  document.documentElement.classList.add(THEME_TRANSITION_CLASS);
+  target.classList.add(THEME_TRANSITION_CLASS);
   setTimeout(() => {
-    document.documentElement.classList.remove(THEME_TRANSITION_CLASS);
+    target.classList.remove(THEME_TRANSITION_CLASS);
     style.remove();
   }, duration);
 }
@@ -497,6 +498,7 @@ export class ThemeManager {
   };
   themeHistory = [];
   maxHistoryLength = 10;
+  responsiveVars = /* @__PURE__ */ new Map();
   // 响应式状态
   state = reactive({
     theme: "default",
@@ -517,7 +519,8 @@ export class ThemeManager {
       this.persistKey = options?.persistKey || "yh-ui-theme";
       this.restoreFromStorage();
     }
-    this.apply({
+    this.targetEl = getTargetElement(options?.scope);
+    this.applyFullConfig({
       preset: "default",
       ...options
     });
@@ -597,11 +600,12 @@ export class ThemeManager {
   setDarkMode(dark) {
     this.isDark = dark;
     this.state.dark = dark;
-    if (typeof document !== "undefined") {
+    const el = this.targetEl || (typeof document !== "undefined" ? document.documentElement : null);
+    if (el) {
       if (dark) {
-        document.documentElement.classList.add("dark");
+        el.classList.add("dark");
       } else {
-        document.documentElement.classList.remove("dark");
+        el.classList.remove("dark");
       }
     }
     const currentColors = {
@@ -836,7 +840,11 @@ export class ThemeManager {
     try {
       const snapshot = JSON.parse(json);
       if (this.transitionEnabled) {
-        enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+        enableThemeTransition(
+          this.transitionConfig.duration,
+          this.transitionConfig.timing,
+          this.targetEl
+        );
       }
       this.setPreset(snapshot.preset);
       if (snapshot.colors && Object.keys(snapshot.colors).length > 0) {
@@ -883,8 +891,8 @@ export class ThemeManager {
     this.state.colorBlindMode = "none";
     this.state.algorithm = "default";
     this.state.componentThemeVersion += 1;
-    document.documentElement.classList.remove("dark");
     const el = this.targetEl || document.documentElement;
+    el.classList.remove("dark");
     const colorTypes = ["primary", "success", "warning", "danger", "info"];
     const suffixes = [
       "",
@@ -919,7 +927,11 @@ export class ThemeManager {
   /** 设置密度 */
   setDensity(density) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(
+        this.transitionConfig.duration,
+        this.transitionConfig.timing,
+        this.targetEl
+      );
     }
     this.currentDensity = density;
     this.state.density = density;
@@ -939,7 +951,11 @@ export class ThemeManager {
   /** 设置色盲友好模式 */
   setColorBlindMode(mode) {
     if (this.transitionEnabled) {
-      enableThemeTransition(this.transitionConfig.duration, this.transitionConfig.timing);
+      enableThemeTransition(
+        this.transitionConfig.duration,
+        this.transitionConfig.timing,
+        this.targetEl
+      );
     }
     this.colorBlindMode = mode;
     this.state.colorBlindMode = mode;
@@ -1034,7 +1050,7 @@ export class ThemeManager {
   applyFullConfig(config) {
     if (this.transitionEnabled || config.transition) {
       const transitionConfig = typeof config.transition === "object" ? config.transition : { duration: DEFAULT_TRANSITION_DURATION, timing: DEFAULT_TRANSITION_TIMING };
-      enableThemeTransition(transitionConfig.duration, transitionConfig.timing);
+      enableThemeTransition(transitionConfig.duration, transitionConfig.timing, this.targetEl);
     }
     this.pushHistory();
     const snapshot = this.createTheme(config);
@@ -1117,6 +1133,7 @@ export class ThemeManager {
   /** 设置响应式变量 (根据断点自动切换) */
   setResponsiveVar(name, values) {
     if (typeof document === "undefined") return;
+    this.responsiveVars.set(name, values);
     let style = document.getElementById("yh-responsive-vars");
     if (!style) {
       style = document.createElement("style");
@@ -1124,23 +1141,25 @@ export class ThemeManager {
       document.head.appendChild(style);
     }
     let css = "";
-    const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
-    orderedBreakpoints.forEach((bp) => {
-      if (values[bp]) {
-        if (bp === "xs") {
-          css += `
-            :root { ${name}: ${values[bp]}; }
-          `;
-        } else {
-          css += `
-            @media (min-width: ${breakpoints[bp]}px) {
-              :root { ${name}: ${values[bp]}; }
-            }
-          `;
+    this.responsiveVars.forEach((vals, varName) => {
+      const orderedBreakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
+      orderedBreakpoints.forEach((bp) => {
+        if (vals[bp]) {
+          if (bp === "xs") {
+            css += `
+              :root { ${varName}: ${vals[bp]}; }
+            `;
+          } else {
+            css += `
+              @media (min-width: ${breakpoints[bp]}px) {
+                :root { ${varName}: ${vals[bp]}; }
+              }
+            `;
+          }
         }
-      }
+      });
     });
-    style.textContent += css;
+    style.textContent = css;
   }
   /** 销毁 */
   destroy() {
@@ -1152,6 +1171,7 @@ export class ThemeManager {
     if (style) {
       style.remove();
     }
+    this.responsiveVars.clear();
   }
 }
 let globalThemeManager = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh-ui/theme",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "description": "YH-UI theme and design tokens",
   "type": "module",
   "sideEffects": [