@done-coding/admin-core 0.17.1-alpha.0 → 0.18.1-alpha.0

package/es/hooks/use-theme-apply.mjs

@@ -1,12 +1,14 @@
-import { watch as p, onScopeDispose as C } from "vue";
-import { themeScaleDerive as y, themeScaleParseHex as E, themeScaleMix as S, themeScaleToRgba as $ } from "../utils/theme-scale.mjs";
-const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A = [
-  ["primaryColor", { scale: !0, el: "--el-color-primary" }],
-  ["successColor", { scale: !0, el: "--el-color-success" }],
-  ["warningColor", { scale: !0, el: "--el-color-warning" }],
-  ["dangerColor", { scale: !0, el: "--el-color-danger" }],
-  ["errorColor", { scale: !0, el: "--el-color-error" }],
-  ["infoColor", { scale: !0, el: "--el-color-info" }],
+import { watch, onScopeDispose } from "vue";
+import { themeScaleDerive, themeScaleParseHex, themeScaleMix, themeScaleToRgba } from "../utils/theme-scale.mjs";
+const STYLE_EL_ID = "dc-core-theme";
+const randomStyleSuffix = () => Math.random().toString(36).slice(2, 9);
+const THEME_FIELD_SPECS = [
+  ["primaryColor", { scale: true, el: "--el-color-primary" }],
+  ["successColor", { scale: true, el: "--el-color-success" }],
+  ["warningColor", { scale: true, el: "--el-color-warning" }],
+  ["dangerColor", { scale: true, el: "--el-color-danger" }],
+  ["errorColor", { scale: true, el: "--el-color-error" }],
+  ["infoColor", { scale: true, el: "--el-color-info" }],
   ["bodyColor", { el: ["--el-bg-color-page", "--el-bg-color"] }],
   ["baseColor", { el: "--el-text-color-primary" }],
   ["radius", { el: "--el-border-radius-base" }],
@@ -18,76 +20,106 @@ const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A =
   ["blur", {}],
   ["focusRing", {}],
   ["surface", {}]
-], m = [
+];
+const THEME_SCALE_SUFFIXES = [
   "light-3",
   "light-5",
   "light-7",
   "light-8",
   "light-9",
   "dark-2"
-], T = (o) => o.replace(/([A-Z])/g, "-$1").toLowerCase(), g = (o, t) => {
-  const e = [];
-  for (const [l, n] of A) {
-    const c = o[l];
-    if (c === void 0 || c === "") continue;
-    const i = `--dc-core-${T(l)}`, d = n.el === void 0 ? [] : Array.isArray(n.el) ? n.el : [n.el];
-    if (n.scale) {
-      const s = y(c, t);
-      e.push(`${i}: ${c};`);
-      for (const r of m)
-        e.push(`${i}-${r}: ${s[r]};`);
-      for (const r of d) {
-        e.push(`${r}: ${c};`);
-        for (const a of m)
-          e.push(`${r}-${a}: ${s[a]};`);
+];
+const themeKebab = (s) => s.replace(/([A-Z])/g, "-$1").toLowerCase();
+const buildThemeBlockBody = (color, mode) => {
+  const lines = [];
+  for (const [key, spec] of THEME_FIELD_SPECS) {
+    const value = color[key];
+    if (value === void 0 || value === "") continue;
+    const corePrefix = `--dc-core-${themeKebab(key)}`;
+    const elVars = spec.el === void 0 ? [] : Array.isArray(spec.el) ? spec.el : [spec.el];
+    if (spec.scale) {
+      const scale = themeScaleDerive(value, mode);
+      lines.push(`${corePrefix}: ${value};`);
+      for (const suf of THEME_SCALE_SUFFIXES) {
+        lines.push(`${corePrefix}-${suf}: ${scale[suf]};`);
+      }
+      for (const el of elVars) {
+        lines.push(`${el}: ${value};`);
+        for (const suf of THEME_SCALE_SUFFIXES) {
+          lines.push(`${el}-${suf}: ${scale[suf]};`);
+        }
       }
     } else {
-      e.push(`${i}: ${c};`);
-      for (const s of d) e.push(`${s}: ${c};`);
+      lines.push(`${corePrefix}: ${value};`);
+      for (const el of elVars) lines.push(`${el}: ${value};`);
     }
   }
-  return e.join(`
-  `);
-}, k = 0.4, D = 10, P = {
+  return lines.join("\n  ");
+};
+const OVERLAY_DARKEN_REL = 0.4;
+const OVERLAY_CAP_MAX_CH = 10;
+const OVERLAY_ALPHA = {
   light: 0.5,
   dark: 0.72
-}, f = (o, t) => {
-  if (!o) return "";
-  const e = E(o);
-  if (!e) return "";
-  const l = Math.max(...e), n = l === 0 ? 0 : Math.min(k, D / l), c = S(o, "#000000", n);
-  return `--el-overlay-color-lighter: ${$(
-    c,
-    P[t]
+};
+const buildOverlayDecl = (bodyColor, mode) => {
+  if (!bodyColor) return "";
+  const rgb = themeScaleParseHex(bodyColor);
+  if (!rgb) return "";
+  const maxCh = Math.max(...rgb);
+  const k = maxCh === 0 ? 0 : Math.min(OVERLAY_DARKEN_REL, OVERLAY_CAP_MAX_CH / maxCh);
+  const scrim = themeScaleMix(bodyColor, "#000000", k);
+  return `--el-overlay-color-lighter: ${themeScaleToRgba(
+    scrim,
+    OVERLAY_ALPHA[mode]
   )};`;
-}, w = { light: 0.9, dark: 0.8 }, h = (o, t) => {
-  if (!o) return "";
-  const e = $(o, w[t]);
-  return e === o ? "" : `--el-mask-color: ${e};`;
-}, I = 0.88, B = (o, t) => !o || !E(o) ? "" : `--dc-core-dialog-surface: ${S(o, "#ffffff", I)};`, R = (o) => {
-  const t = o.light, e = o.dark, l = g(t, "light"), n = g(e, "dark"), i = [
-    l,
-    "color: var(--dc-core-base-color);",
-    f(t.bodyColor, "light"),
-    h(t.bodyColor, "light")
-  ].filter(Boolean), d = [
-    n,
-    f(e.bodyColor, "dark"),
-    h(e.bodyColor, "dark"),
-    B(e.bodyColor)
+};
+const MASK_ALPHA = { light: 0.9, dark: 0.8 };
+const buildMaskDecl = (bodyColor, mode) => {
+  if (!bodyColor) return "";
+  const veil = themeScaleToRgba(bodyColor, MASK_ALPHA[mode]);
+  if (veil === bodyColor) return "";
+  return `--el-mask-color: ${veil};`;
+};
+const ELEVATE_BODY_WEIGHT = 0.88;
+const buildDialogSurfaceDecl = (bodyColor, mode) => {
+  if (!bodyColor) return "";
+  if (!themeScaleParseHex(bodyColor)) return "";
+  const elevated = themeScaleMix(bodyColor, "#ffffff", ELEVATE_BODY_WEIGHT);
+  return `--dc-core-dialog-surface: ${elevated};`;
+};
+const buildThemeCss = (config) => {
+  const lightColor = config.light;
+  const darkColor = config.dark;
+  const lightBody = buildThemeBlockBody(lightColor, "light");
+  const darkBody = buildThemeBlockBody(darkColor, "dark");
+  const rootColorDecl = "color: var(--dc-core-base-color);";
+  const lightLines = [
+    lightBody,
+    rootColorDecl,
+    buildOverlayDecl(lightColor.bodyColor, "light"),
+    buildMaskDecl(lightColor.bodyColor, "light")
+  ].filter(Boolean);
+  const darkLines = [
+    darkBody,
+    buildOverlayDecl(darkColor.bodyColor, "dark"),
+    buildMaskDecl(darkColor.bodyColor, "dark"),
+    buildDialogSurfaceDecl(darkColor.bodyColor)
   ].filter(Boolean);
   return `:root {
-  ${i.join(
-    `
-  `
+  ${lightLines.join(
+    "\n  "
   )}
 }
 :root.dark {
-  ${d.join(`
-  `)}
+  ${darkLines.join("\n  ")}
 }
 `;
-}, H = "dc-core-rhythm", x = "dc-core-ep-bridge", b = "dc-core-ep-structural", M = [
+};
+const RHYTHM_STYLE_EL_ID = "dc-core-rhythm";
+const EP_BRIDGE_STYLE_EL_ID = "dc-core-ep-bridge";
+const EP_STRUCTURAL_STYLE_EL_ID = "dc-core-ep-structural";
+const EP_STRUCTURAL_CSS = [
   // 居中浮层（Dialog / MessageBox）+ 抽屉（Drawer，含 ConfirmModal drawer 形态 + 消费方直接
   // 用的 ElDrawer）：暗色下面板底 ≈ 页面底 + EP 黑投影不可见 → 边界糊。统一两手保底：
   // ① elevation 提亮面（--dc-core-dialog-surface，仅暗色派生；亮色退 --el-bg-color 零改动）；
@@ -106,8 +138,8 @@ const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A =
   "  --el-table-fixed-left-column: inset 10px 0 10px -10px var(--dc-core-border-color, var(--el-border-color));",
   "  --el-table-fixed-right-column: inset -10px 0 10px -10px var(--dc-core-border-color, var(--el-border-color));",
   "}"
-].join(`
-`), Y = [
+].join("\n");
+const EP_BRIDGE_CSS = [
   // T1 必纳：表格行密度（垂直经 td padding，水平经 .cell padding）
   ".el-table .el-table__cell {",
   "  padding-top: var(--dc-core-cell-padding-y, 8px);",
@@ -123,8 +155,8 @@ const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A =
   "}"
   // 注：dialog/card 内距撤到期二——其 EP 原生值（dialog 16 / card 20）与单一
   // content-gap 无法同时对齐，本期纳入会破"默认档零漂移"；期二用专属 var 补。
-].join(`
-`), z = {
+].join("\n");
+const DENSITY_VALUE_MAP = {
   compact: {
     spaceUnit: "4px",
     gap: "8px",
@@ -157,7 +189,8 @@ const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A =
     fontSizeBase: "15px",
     fontScale: "1.25"
   }
-}, U = {
+};
+const MOTION_VALUE_MAP = {
   snappy: {
     duration: "120ms",
     durationSlow: "180ms",
@@ -176,92 +209,110 @@ const v = "dc-core-theme", L = () => Math.random().toString(36).slice(2, 9), A =
     easing: "cubic-bezier(0.22, 0.61, 0.36, 1)"
   }
 };
-function O(o, t) {
-  const e = z[o], l = U[t], n = [
-    `--dc-core-space-unit: ${e.spaceUnit};`,
-    `--dc-core-content-gap: ${e.gap};`,
-    `--dc-core-control-height: ${e.controlHeight};`,
-    `--el-component-size: ${e.controlHeight};`,
-    `--dc-core-cell-padding-y: ${e.cellPaddingY};`,
-    `--dc-core-cell-padding-x: ${e.cellPaddingX};`,
-    `--dc-core-form-item-gap: ${e.formItemGap};`,
-    `--dc-core-font-size-base: ${e.fontSizeBase};`,
-    `--el-font-size-base: ${e.fontSizeBase};`,
-    `--dc-core-font-scale: ${e.fontScale};`,
-    `--dc-core-motion-duration: ${l.duration};`,
-    `--el-transition-duration-fast: ${l.duration};`,
-    `--dc-core-motion-duration-slow: ${l.durationSlow};`,
-    `--el-transition-duration: ${l.durationSlow};`,
+function buildRhythmCss(density, motion) {
+  const d = DENSITY_VALUE_MAP[density];
+  const m = MOTION_VALUE_MAP[motion];
+  const lines = [
+    `--dc-core-space-unit: ${d.spaceUnit};`,
+    `--dc-core-content-gap: ${d.gap};`,
+    `--dc-core-control-height: ${d.controlHeight};`,
+    `--el-component-size: ${d.controlHeight};`,
+    `--dc-core-cell-padding-y: ${d.cellPaddingY};`,
+    `--dc-core-cell-padding-x: ${d.cellPaddingX};`,
+    `--dc-core-form-item-gap: ${d.formItemGap};`,
+    `--dc-core-font-size-base: ${d.fontSizeBase};`,
+    `--el-font-size-base: ${d.fontSizeBase};`,
+    `--dc-core-font-scale: ${d.fontScale};`,
+    `--dc-core-motion-duration: ${m.duration};`,
+    `--el-transition-duration-fast: ${m.duration};`,
+    `--dc-core-motion-duration-slow: ${m.durationSlow};`,
+    `--el-transition-duration: ${m.durationSlow};`,
     // easing 仅挂 dc-core，[MUST NOT] dual-write 覆盖 EP 两条 bezier——
     // EP ease-in-out / fast 曲线各异，覆盖会让默认档动画曲线漂移；motion 档对 EP 只经 duration 生效。
-    `--dc-core-motion-easing: ${l.easing};`
-  ], c = [
+    `--dc-core-motion-easing: ${m.easing};`
+  ];
+  const reduced = [
     "--dc-core-motion-duration: 0.01ms;",
     "--dc-core-motion-duration-slow: 0.01ms;",
     "--el-transition-duration: 0.01ms;",
     "--el-transition-duration-fast: 0.01ms;"
   ];
   return `:root {
-  ${n.join(`
-  `)}
+  ${lines.join("\n  ")}
 }
 @media (prefers-reduced-motion: reduce) {
   :root {
-    ${c.join(
-    `
-    `
+    ${reduced.join(
+    "\n    "
   )}
   }
 }
 `;
 }
-function V(o) {
-  const t = o.document ?? (typeof document < "u" ? document : void 0);
-  if (!t) return;
-  const e = L(), l = [], n = (r) => {
-    const a = t.createElement("style");
-    return a.id = `${r}-${e}`, t.head.appendChild(a), l.push(a), a;
+function useCoreThemeApply(options) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  if (!doc) return;
+  const idSuffix = randomStyleSuffix();
+  const ownedEls = [];
+  const createOwnedStyle = (baseId) => {
+    const el = doc.createElement("style");
+    el.id = `${baseId}-${idSuffix}`;
+    doc.head.appendChild(el);
+    ownedEls.push(el);
+    return el;
+  };
+  let themeEl = null;
+  const ensureStyleEl = () => {
+    if (!themeEl) themeEl = createOwnedStyle(STYLE_EL_ID);
+    return themeEl;
   };
-  let c = null;
-  const i = () => (c || (c = n(v)), c);
-  if (!t.getElementById(b)) {
-    const r = t.createElement("style");
-    r.id = b, r.textContent = M, t.head.appendChild(r);
+  if (!doc.getElementById(EP_STRUCTURAL_STYLE_EL_ID)) {
+    const structEl = doc.createElement("style");
+    structEl.id = EP_STRUCTURAL_STYLE_EL_ID;
+    structEl.textContent = EP_STRUCTURAL_CSS;
+    doc.head.appendChild(structEl);
   }
-  p(
-    o.getThemeConfig,
-    (r) => {
-      i().textContent = R(r);
+  watch(
+    options.getThemeConfig,
+    (config) => {
+      ensureStyleEl().textContent = buildThemeCss(config);
     },
-    { deep: !0, immediate: !0 }
-  ), p(
-    o.getThemeIsDark,
-    (r) => {
-      t.documentElement.classList.toggle("dark", r);
+    { deep: true, immediate: true }
+  );
+  watch(
+    options.getThemeIsDark,
+    (isDark) => {
+      doc.documentElement.classList.toggle("dark", isDark);
     },
-    { immediate: !0 }
+    { immediate: true }
   );
-  const { getThemeDensity: d, getThemeMotion: s } = o;
-  if (d && s) {
-    if (!t.getElementById(x)) {
-      const u = t.createElement("style");
-      u.id = x, u.textContent = Y, t.head.appendChild(u);
+  const { getThemeDensity, getThemeMotion } = options;
+  if (getThemeDensity && getThemeMotion) {
+    if (!doc.getElementById(EP_BRIDGE_STYLE_EL_ID)) {
+      const epEl = doc.createElement("style");
+      epEl.id = EP_BRIDGE_STYLE_EL_ID;
+      epEl.textContent = EP_BRIDGE_CSS;
+      doc.head.appendChild(epEl);
     }
-    let r = null;
-    const a = () => (r || (r = n(H)), r);
-    p(
-      () => [d(), s()],
-      ([u, _]) => {
-        a().textContent = O(u, _);
+    let rhythmEl = null;
+    const ensureRhythmStyleEl = () => {
+      if (!rhythmEl) rhythmEl = createOwnedStyle(RHYTHM_STYLE_EL_ID);
+      return rhythmEl;
+    };
+    watch(
+      () => [getThemeDensity(), getThemeMotion()],
+      ([density, motion]) => {
+        ensureRhythmStyleEl().textContent = buildRhythmCss(density, motion);
       },
-      { immediate: !0 }
+      { immediate: true }
     );
   }
-  C(() => {
-    l.forEach((r) => r.remove()), l.length = 0;
+  onScopeDispose(() => {
+    ownedEls.forEach((el) => el.remove());
+    ownedEls.length = 0;
   });
 }
 export {
-  O as buildRhythmCss,
-  V as useCoreThemeApply
+  buildRhythmCss,
+  useCoreThemeApply
 };

package/es/hooks/use-viewport-apply.mjs

@@ -1,40 +1,52 @@
-import { watch as c, onScopeDispose as n } from "vue";
-const a = "dc-core-viewport", l = () => Math.random().toString(36).slice(2, 9), u = (e, d) => {
-  const r = e.paddingLeft + e.paddingRight, t = e.paddingTop + e.paddingBottom;
+import { watch, onScopeDispose } from "vue";
+const STYLE_EL_ID = "dc-core-viewport";
+const randomStyleSuffix = () => Math.random().toString(36).slice(2, 9);
+const buildViewportCss = (config, gap) => {
+  const horizontal = config.paddingLeft + config.paddingRight;
+  const vertical = config.paddingTop + config.paddingBottom;
   return `:root {
-  --dc-core-viewport-width: calc(100vw - ${r}px);
-  --dc-core-viewport-height: calc(100vh - ${t}px);
-  --dc-core-viewport-padding-top: ${e.paddingTop}px;
-  --dc-core-viewport-padding-right: ${e.paddingRight}px;
-  --dc-core-viewport-padding-bottom: ${e.paddingBottom}px;
-  --dc-core-viewport-padding-left: ${e.paddingLeft}px;
+  --dc-core-viewport-width: calc(100vw - ${horizontal}px);
+  --dc-core-viewport-height: calc(100vh - ${vertical}px);
+  --dc-core-viewport-padding-top: ${config.paddingTop}px;
+  --dc-core-viewport-padding-right: ${config.paddingRight}px;
+  --dc-core-viewport-padding-bottom: ${config.paddingBottom}px;
+  --dc-core-viewport-padding-left: ${config.paddingLeft}px;
 ` + // gap 内缝 var：仅当提供 getGapConfig 时注入（纯对外暴露，core 不读）。
-  (d ? `  --dc-core-gap: ${d.size}px;
-` : "") + `}
+  (gap ? `  --dc-core-gap: ${gap.size}px;
+` : ``) + `}
 `;
 };
-function m(e) {
-  const d = e.document ?? (typeof document < "u" ? document : void 0);
-  if (!d) return;
-  const r = `${a}-${l()}`;
-  let t = null;
-  const p = () => (t || (t = d.createElement("style"), t.id = r, d.head.appendChild(t)), t);
-  c(
+function useCoreViewportApply(options) {
+  const doc = options.document ?? (typeof document !== "undefined" ? document : void 0);
+  if (!doc) return;
+  const styleId = `${STYLE_EL_ID}-${randomStyleSuffix()}`;
+  let el = null;
+  const ensureStyleEl = () => {
+    if (!el) {
+      el = doc.createElement("style");
+      el.id = styleId;
+      doc.head.appendChild(el);
+    }
+    return el;
+  };
+  watch(
     () => {
-      var o;
+      var _a;
       return {
-        viewport: e.getViewportConfig(),
-        gap: (o = e.getGapConfig) == null ? void 0 : o.call(e)
+        viewport: options.getViewportConfig(),
+        gap: (_a = options.getGapConfig) == null ? void 0 : _a.call(options)
       };
     },
-    ({ viewport: o, gap: i }) => {
-      p().textContent = u(o, i);
+    ({ viewport, gap }) => {
+      ensureStyleEl().textContent = buildViewportCss(viewport, gap);
     },
-    { deep: !0, immediate: !0 }
-  ), n(() => {
-    t == null || t.remove(), t = null;
+    { deep: true, immediate: true }
+  );
+  onScopeDispose(() => {
+    el == null ? void 0 : el.remove();
+    el = null;
   });
 }
 export {
-  m as useCoreViewportApply
+  useCoreViewportApply
 };