@hlw-uni/mp-vue 1.0.34 → 1.0.35

package/dist/composables/theme/font.d.ts

@@ -0,0 +1,9 @@
+export type FontScale = "small" | "normal" | "large" | "xlarge";
+export interface FontPreset {
+    label: string;
+    vars: Record<string, string>;
+}
+export declare const FONT_SCALE_KEY = "hlw_font_scale";
+export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
+export declare function getCurrentFontScale(): FontScale;
+export declare function getCurrentFontVars(): Record<string, string>;

package/dist/composables/theme/index.d.ts

@@ -0,0 +1,9 @@
+export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
+export declare function buildThemeStyle(): string;
+export declare function useThemePageStyle(): {
+    themePageStyle: any;
+};
+export type { FontScale, FontPreset } from './font';
+export { FONT_SCALE_KEY, FONT_PRESETS, getCurrentFontScale, getCurrentFontVars } from './font';
+export type { ThemeColor } from './palette';
+export { THEME_COLOR_KEY, DEFAULT_THEMES, getCurrentThemeColor, getCurrentThemeVars } from './palette';

package/dist/composables/theme/palette.d.ts

@@ -0,0 +1,8 @@
+export interface ThemeColor {
+    label: string;
+    value: string;
+}
+export declare const THEME_COLOR_KEY = "hlw_theme_color";
+export declare const DEFAULT_THEMES: ThemeColor[];
+export declare function getCurrentThemeColor(): string;
+export declare function getCurrentThemeVars(): Record<string, string>;

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("pinia")) : typeof define === "function" && define.amd ? define(["exports", "vue", "pinia"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue, global.pinia));
-})(this, function(exports2, vue, pinia) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue"), require("@hlw-uni/mp-core"), require("pinia")) : typeof define === "function" && define.amd ? define(["exports", "vue", "@hlw-uni/mp-core", "pinia"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.HlwUniVue = {}, global.vue, global.mpCore, global.pinia));
+})(this, function(exports2, vue, mpCore, pinia) {
   "use strict";
   const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "HlwAd" },
@@ -564,24 +564,7 @@
     }
   });
   const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8833363"]]);
-  function varsToStyle(vars) {
-    return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
-  }
-  function hexToRgba(hex, alpha) {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-  }
-  function darkenHex(hex, amount = 0.15) {
-    const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
-    const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
-    const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
-    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-  }
   const FONT_SCALE_KEY = "hlw_font_scale";
-  const THEME_COLOR_KEY = "hlw_theme_color";
-  const THEME_CHANGE_EVENT = "hlw:theme-change";
   const FONT_PRESETS = {
     small: {
       label: "小字体",
@@ -640,6 +623,8 @@
   function getCurrentFontVars() {
     return FONT_PRESETS[getCurrentFontScale()].vars;
   }
+  const { hexToRgba, darkenHex } = mpCore.useColor();
+  const THEME_COLOR_KEY = "hlw_theme_color";
   const DEFAULT_THEMES = [
     { label: "默认蓝", value: "#3b82f6" },
     { label: "活力橙", value: "#f97316" },
@@ -665,6 +650,8 @@
       "--primary-dark": darkenHex(color)
     };
   }
+  const { varsToStyle } = mpCore.useColor();
+  const THEME_CHANGE_EVENT = "hlw:theme-change";
   function buildThemeStyle() {
     return varsToStyle({
       ...getCurrentFontVars(),

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import { defineComponent, resolveComponent, openBlock, createBlock, ref, computed, createElementBlock, normalizeClass, createElementVNode, toDisplayString, useSlots, renderSlot, createCommentVNode, normalizeStyle, unref, Fragment, renderList, withCtx, createVNode, onMounted, onUnmounted } from "vue";
+import { useColor } from "@hlw-uni/mp-core";
 import { defineStore } from "pinia";
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...{ name: "HlwAd" },
@@ -562,24 +563,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d8833363"]]);
-function varsToStyle(vars) {
-  return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
-}
-function hexToRgba(hex, alpha) {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r},${g},${b},${alpha})`;
-}
-function darkenHex(hex, amount = 0.15) {
-  const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
-  const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
-  const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
 const FONT_SCALE_KEY = "hlw_font_scale";
-const THEME_COLOR_KEY = "hlw_theme_color";
-const THEME_CHANGE_EVENT = "hlw:theme-change";
 const FONT_PRESETS = {
   small: {
     label: "小字体",
@@ -638,6 +622,8 @@ function getCurrentFontScale() {
 function getCurrentFontVars() {
   return FONT_PRESETS[getCurrentFontScale()].vars;
 }
+const { hexToRgba, darkenHex } = useColor();
+const THEME_COLOR_KEY = "hlw_theme_color";
 const DEFAULT_THEMES = [
   { label: "默认蓝", value: "#3b82f6" },
   { label: "活力橙", value: "#f97316" },
@@ -663,6 +649,8 @@ function getCurrentThemeVars() {
     "--primary-dark": darkenHex(color)
   };
 }
+const { varsToStyle } = useColor();
+const THEME_CHANGE_EVENT = "hlw:theme-change";
 function buildThemeStyle() {
   return varsToStyle({
     ...getCurrentFontVars(),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hlw-uni/mp-vue",
-    "version": "1.0.34",
+    "version": "1.0.35",
     "description": "hlw-uni Vue 组件库 — 供小程序业务方使用的 UI 组件集合",
     "main": "src/index.ts",
     "module": "src/index.ts",
@@ -26,19 +26,19 @@
         "access": "public"
     },
     "peerDependencies": {
-        "vue": ">=3.4.0",
-        "pinia": ">=2.0.0"
+        "pinia": ">=2.0.0",
+        "vue": ">=3.4.0"
     },
     "devDependencies": {
-        "@dcloudio/types": "^3.4.8",
-        "@types/node": "^20.11.0",
-        "@vitejs/plugin-vue": "^5.0.0",
-        "typescript": "^4.9.4",
+        "@dcloudio/types": "^3.4.30",
+        "@types/node": "^20.19.39",
+        "@vitejs/plugin-vue": "^5.2.4",
+        "typescript": "^4.9.5",
         "vite": "5.2.8",
         "vite-plugin-dts": "^4.5.4",
-        "vue": "^3.4.0"
+        "vue": "^3.5.32"
     },
     "dependencies": {
-        "@hlw-uni/mp-core": "^1.0.10"
+        "@hlw-uni/mp-core": "^1.0.28"
     }
 }

package/src/composables/theme/font.ts

@@ -0,0 +1,51 @@
+export type FontScale = "small" | "normal" | "large" | "xlarge";
+
+export interface FontPreset {
+    label: string;
+    vars: Record<string, string>;
+}
+
+export const FONT_SCALE_KEY = "hlw_font_scale";
+
+export const FONT_PRESETS: Record<FontScale, FontPreset> = {
+    small: {
+        label: "小字体",
+        vars: {
+            "--font-xs": "16rpx", "--font-sm": "20rpx", "--font-base": "24rpx",
+            "--font-md": "28rpx", "--font-lg": "32rpx", "--font-xl": "36rpx",
+        },
+    },
+    normal: {
+        label: "标准",
+        vars: {
+            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
+            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
+        },
+    },
+    large: {
+        label: "大字体",
+        vars: {
+            "--font-xs": "24rpx", "--font-sm": "30rpx", "--font-base": "34rpx",
+            "--font-md": "40rpx", "--font-lg": "46rpx", "--font-xl": "52rpx",
+        },
+    },
+    xlarge: {
+        label: "超大字体",
+        vars: {
+            "--font-xs": "28rpx", "--font-sm": "36rpx", "--font-base": "42rpx",
+            "--font-md": "48rpx", "--font-lg": "56rpx", "--font-xl": "64rpx",
+        },
+    },
+};
+
+export function getCurrentFontScale(): FontScale {
+    try {
+        const v = uni.getStorageSync(FONT_SCALE_KEY);
+        if (v === "small" || v === "large" || v === "xlarge") return v;
+    } catch {}
+    return "normal";
+}
+
+export function getCurrentFontVars(): Record<string, string> {
+    return FONT_PRESETS[getCurrentFontScale()].vars;
+}

package/src/composables/theme/index.ts

@@ -0,0 +1,33 @@
+import { ref, onMounted, onUnmounted } from "vue";
+import { useColor } from "@hlw-uni/mp-core";
+
+const { varsToStyle } = useColor();
+import { getCurrentFontVars } from "./font";
+import { getCurrentThemeVars } from "./palette";
+
+export const THEME_CHANGE_EVENT = "hlw:theme-change";
+
+export function buildThemeStyle(): string {
+    return varsToStyle({
+        ...getCurrentFontVars(),
+        ...getCurrentThemeVars(),
+    });
+}
+
+export function useThemePageStyle() {
+    const themePageStyle = ref(buildThemeStyle());
+
+    const onThemeChange = () => {
+        themePageStyle.value = buildThemeStyle();
+    };
+
+    onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
+    onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
+
+    return { themePageStyle };
+}
+
+export type { FontScale, FontPreset } from "./font";
+export { FONT_SCALE_KEY, FONT_PRESETS, getCurrentFontScale, getCurrentFontVars } from "./font";
+export type { ThemeColor } from "./palette";
+export { THEME_COLOR_KEY, DEFAULT_THEMES, getCurrentThemeColor, getCurrentThemeVars } from "./palette";

package/src/composables/theme/palette.ts

@@ -0,0 +1,36 @@
+import { useColor } from "@hlw-uni/mp-core";
+
+const { hexToRgba, darkenHex } = useColor();
+
+export interface ThemeColor {
+    label: string;
+    value: string;
+}
+
+export const THEME_COLOR_KEY = "hlw_theme_color";
+
+export const DEFAULT_THEMES: ThemeColor[] = [
+    { label: "默认蓝", value: "#3b82f6" },
+    { label: "活力橙", value: "#f97316" },
+    { label: "翡翠绿", value: "#10b981" },
+    { label: "玫瑰红", value: "#f43f5e" },
+    { label: "紫罗兰", value: "#8b5cf6" },
+    { label: "青石灰", value: "#64748b" },
+];
+
+export function getCurrentThemeColor(): string {
+    try {
+        const v = uni.getStorageSync(THEME_COLOR_KEY);
+        if (v && typeof v === "string") return v;
+    } catch {}
+    return DEFAULT_THEMES[0].value;
+}
+
+export function getCurrentThemeVars(): Record<string, string> {
+    const color = getCurrentThemeColor();
+    return {
+        "--primary-color": color,
+        "--primary-light": hexToRgba(color, 0.12),
+        "--primary-dark": darkenHex(color),
+    };
+}

package/dist/composables/theme.d.ts

@@ -1,22 +0,0 @@
-export type FontScale = "small" | "normal" | "large" | "xlarge";
-export interface FontPreset {
-    label: string;
-    vars: Record<string, string>;
-}
-export interface ThemeColor {
-    label: string;
-    value: string;
-}
-export declare const FONT_SCALE_KEY = "hlw_font_scale";
-export declare const THEME_COLOR_KEY = "hlw_theme_color";
-export declare const THEME_CHANGE_EVENT = "hlw:theme-change";
-export declare const FONT_PRESETS: Record<FontScale, FontPreset>;
-export declare function getCurrentFontScale(): FontScale;
-export declare function getCurrentFontVars(): Record<string, string>;
-export declare const DEFAULT_THEMES: ThemeColor[];
-export declare function getCurrentThemeColor(): string;
-export declare function getCurrentThemeVars(): Record<string, string>;
-export declare function buildThemeStyle(): string;
-export declare function useThemePageStyle(): {
-    themePageStyle: any;
-};

package/src/composables/theme.ts

@@ -1,142 +0,0 @@
-import { ref, onMounted, onUnmounted } from "vue";
-
-// ─── 工具函数 ───────────────────────────────────
-
-function varsToStyle(vars: Record<string, string>): string {
-    return Object.entries(vars).map(([k, v]) => `${k}:${v}`).join(";") + ";";
-}
-
-function hexToRgba(hex: string, alpha: number): string {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${alpha})`;
-}
-
-function darkenHex(hex: string, amount = 0.15): string {
-    const r = Math.max(0, Math.round(parseInt(hex.slice(1, 3), 16) * (1 - amount)));
-    const g = Math.max(0, Math.round(parseInt(hex.slice(3, 5), 16) * (1 - amount)));
-    const b = Math.max(0, Math.round(parseInt(hex.slice(5, 7), 16) * (1 - amount)));
-    return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-
-// ─── 类型 ──────────────────────────────────────
-
-export type FontScale = "small" | "normal" | "large" | "xlarge";
-
-export interface FontPreset {
-    label: string;
-    vars: Record<string, string>;
-}
-
-export interface ThemeColor {
-    label: string;
-    value: string;
-}
-
-// ─── 存储 Key ──────────────────────────────────
-
-export const FONT_SCALE_KEY = "hlw_font_scale";
-export const THEME_COLOR_KEY = "hlw_theme_color";
-
-// ─── 事件 ──────────────────────────────────────
-
-export const THEME_CHANGE_EVENT = "hlw:theme-change";
-
-// ─── 字体档位 ──────────────────────────────────
-
-export const FONT_PRESETS: Record<FontScale, FontPreset> = {
-    small: {
-        label: "小字体",
-        vars: {
-            "--font-xs": "16rpx", "--font-sm": "20rpx", "--font-base": "24rpx",
-            "--font-md": "28rpx", "--font-lg": "32rpx", "--font-xl": "36rpx",
-        },
-    },
-    normal: {
-        label: "标准",
-        vars: {
-            "--font-xs": "20rpx", "--font-sm": "24rpx", "--font-base": "28rpx",
-            "--font-md": "32rpx", "--font-lg": "36rpx", "--font-xl": "40rpx",
-        },
-    },
-    large: {
-        label: "大字体",
-        vars: {
-            "--font-xs": "24rpx", "--font-sm": "30rpx", "--font-base": "34rpx",
-            "--font-md": "40rpx", "--font-lg": "46rpx", "--font-xl": "52rpx",
-        },
-    },
-    xlarge: {
-        label: "超大字体",
-        vars: {
-            "--font-xs": "28rpx", "--font-sm": "36rpx", "--font-base": "42rpx",
-            "--font-md": "48rpx", "--font-lg": "56rpx", "--font-xl": "64rpx",
-        },
-    },
-};
-
-export function getCurrentFontScale(): FontScale {
-    try {
-        const v = uni.getStorageSync(FONT_SCALE_KEY);
-        if (v === "small" || v === "large" || v === "xlarge") return v;
-    } catch {}
-    return "normal";
-}
-
-export function getCurrentFontVars(): Record<string, string> {
-    return FONT_PRESETS[getCurrentFontScale()].vars;
-}
-
-// ─── 主题色 ────────────────────────────────────
-
-export const DEFAULT_THEMES: ThemeColor[] = [
-    { label: "默认蓝", value: "#3b82f6" },
-    { label: "活力橙", value: "#f97316" },
-    { label: "翡翠绿", value: "#10b981" },
-    { label: "玫瑰红", value: "#f43f5e" },
-    { label: "紫罗兰", value: "#8b5cf6" },
-    { label: "青石灰", value: "#64748b" },
-];
-
-export function getCurrentThemeColor(): string {
-    try {
-        const v = uni.getStorageSync(THEME_COLOR_KEY);
-        if (v && typeof v === "string") return v;
-    } catch {}
-    return DEFAULT_THEMES[0].value;
-}
-
-export function getCurrentThemeVars(): Record<string, string> {
-    const color = getCurrentThemeColor();
-    return {
-        "--primary-color": color,
-        "--primary-light": hexToRgba(color, 0.12),
-        "--primary-dark": darkenHex(color),
-    };
-}
-
-// ─── 统一样式构建 ──────────────────────────────
-// 后续新增主题维度时，只需添加 getCurrentXxxVars() 并在此展开
-
-export function buildThemeStyle(): string {
-    return varsToStyle({
-        ...getCurrentFontVars(),
-        ...getCurrentThemeVars(),
-    });
-}
-
-// ─── 组合式函数 ────────────────────────────────
-
-export function useThemePageStyle() {
-    const themePageStyle = ref(buildThemeStyle());
-
-    const onThemeChange = () => {
-        themePageStyle.value = buildThemeStyle();
-    };
-
-    onMounted(() => uni.$on(THEME_CHANGE_EVENT, onThemeChange));
-    onUnmounted(() => uni.$off(THEME_CHANGE_EVENT, onThemeChange));
-
-    return { themePageStyle };
-}