@done-coding/admin-core 0.12.2 → 0.12.3-alpha.0

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

@@ -1,6 +1,6 @@
-import { watch as s } from "vue";
-import { themeScaleDerive as C, themeScaleParseHex as S, themeScaleMix as $, themeScaleToRgba as _ } from "../utils/theme-scale.mjs";
-const m = "dc-core-theme", y = [
+import { watch as m, onScopeDispose as C } from "vue";
+import { themeScaleDerive as y, themeScaleParseHex as S, themeScaleMix as b, themeScaleToRgba as $ } from "../utils/theme-scale.mjs";
+const L = "dc-core-theme", A = () => Math.random().toString(36).slice(2, 9), T = [
   ["primaryColor", { scale: !0, el: "--el-color-primary" }],
   ["successColor", { scale: !0, el: "--el-color-success" }],
   ["warningColor", { scale: !0, el: "--el-color-warning" }],
@@ -25,69 +25,69 @@ const m = "dc-core-theme", y = [
   "light-8",
   "light-9",
   "dark-2"
-], L = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase(), g = (r, t) => {
+], v = (o) => o.replace(/([A-Z])/g, "-$1").toLowerCase(), g = (o, t) => {
   const e = [];
-  for (const [c, n] of y) {
-    const o = r[c];
-    if (o === void 0 || o === "") continue;
-    const l = `--dc-core-${L(c)}`, a = n.el === void 0 ? [] : Array.isArray(n.el) ? n.el : [n.el];
-    if (n.scale) {
-      const d = C(o, t);
-      e.push(`${l}: ${o};`);
-      for (const i of p)
-        e.push(`${l}-${i}: ${d[i]};`);
-      for (const i of a) {
-        e.push(`${i}: ${o};`);
-        for (const u of p)
-          e.push(`${i}-${u}: ${d[u]};`);
+  for (const [c, l] of T) {
+    const n = o[c];
+    if (n === void 0 || n === "") continue;
+    const i = `--dc-core-${v(c)}`, d = l.el === void 0 ? [] : Array.isArray(l.el) ? l.el : [l.el];
+    if (l.scale) {
+      const s = y(n, t);
+      e.push(`${i}: ${n};`);
+      for (const r of p)
+        e.push(`${i}-${r}: ${s[r]};`);
+      for (const r of d) {
+        e.push(`${r}: ${n};`);
+        for (const a of p)
+          e.push(`${r}-${a}: ${s[a]};`);
       }
     } else {
-      e.push(`${l}: ${o};`);
-      for (const d of a) e.push(`${d}: ${o};`);
+      e.push(`${i}: ${n};`);
+      for (const s of d) e.push(`${s}: ${n};`);
     }
   }
   return e.join(`
   `);
-}, A = 0.4, T = 10, v = {
+}, D = 0.4, P = 10, k = {
   light: 0.5,
   dark: 0.72
-}, f = (r, t) => {
-  if (!r) return "";
-  const e = S(r);
+}, f = (o, t) => {
+  if (!o) return "";
+  const e = S(o);
   if (!e) return "";
-  const c = Math.max(...e), n = c === 0 ? 0 : Math.min(A, T / c), o = $(r, "#000000", n);
-  return `--el-overlay-color-lighter: ${_(
-    o,
-    v[t]
+  const c = Math.max(...e), l = c === 0 ? 0 : Math.min(D, P / c), n = b(o, "#000000", l);
+  return `--el-overlay-color-lighter: ${$(
+    n,
+    k[t]
   )};`;
-}, I = { light: 0.9, dark: 0.8 }, h = (r, t) => {
-  if (!r) return "";
-  const e = _(r, I[t]);
-  return e === r ? "" : `--el-mask-color: ${e};`;
-}, P = 0.88, k = (r, t) => !r || !S(r) ? "" : `--dc-core-dialog-surface: ${$(r, "#ffffff", P)};`, D = (r) => {
-  const t = r.light, e = r.dark, c = g(t, "light"), n = g(e, "dark"), l = [
+}, I = { light: 0.9, dark: 0.8 }, h = (o, t) => {
+  if (!o) return "";
+  const e = $(o, I[t]);
+  return e === o ? "" : `--el-mask-color: ${e};`;
+}, w = 0.88, B = (o, t) => !o || !S(o) ? "" : `--dc-core-dialog-surface: ${b(o, "#ffffff", w)};`, R = (o) => {
+  const t = o.light, e = o.dark, c = g(t, "light"), l = g(e, "dark"), i = [
     c,
     "color: var(--dc-core-base-color);",
     f(t.bodyColor, "light"),
     h(t.bodyColor, "light")
-  ].filter(Boolean), a = [
-    n,
+  ].filter(Boolean), d = [
+    l,
     f(e.bodyColor, "dark"),
     h(e.bodyColor, "dark"),
-    k(e.bodyColor)
+    B(e.bodyColor)
   ].filter(Boolean);
   return `:root {
-  ${l.join(
+  ${i.join(
     `
   `
   )}
 }
 :root.dark {
-  ${a.join(`
+  ${d.join(`
   `)}
 }
 `;
-}, E = "dc-core-rhythm", b = "dc-core-ep-bridge", x = "dc-core-ep-structural", B = [
+}, H = "dc-core-rhythm", E = "dc-core-ep-bridge", x = "dc-core-ep-structural", M = [
   ".el-dialog,",
   ".el-message-box {",
   // elevation：暗色下用提亮过的面板底（--dc-core-dialog-surface，仅 :root.dark 派生），
@@ -96,7 +96,7 @@ const m = "dc-core-theme", y = [
   "  border: 1px solid var(--dc-core-border-color, var(--el-border-color));",
   "}"
 ].join(`
-`), R = [
+`), Y = [
   // T1 必纳：表格行密度（垂直经 td padding，水平经 .cell padding）
   ".el-table .el-table__cell {",
   "  padding-top: var(--dc-core-cell-padding-y, 8px);",
@@ -113,7 +113,7 @@ const m = "dc-core-theme", y = [
   // 注：dialog/card 内距撤到期二——其 EP 原生值（dialog 16 / card 20）与单一
   // content-gap 无法同时对齐，本期纳入会破"默认档零漂移"；期二用专属 var 补。
 ].join(`
-`), w = {
+`), z = {
   compact: {
     spaceUnit: "4px",
     gap: "8px",
@@ -146,7 +146,7 @@ const m = "dc-core-theme", y = [
     fontSizeBase: "15px",
     fontScale: "1.25"
   }
-}, H = {
+}, U = {
   snappy: {
     duration: "120ms",
     durationSlow: "180ms",
@@ -165,8 +165,8 @@ const m = "dc-core-theme", y = [
     easing: "cubic-bezier(0.22, 0.61, 0.36, 1)"
   }
 };
-function Y(r, t) {
-  const e = w[r], c = H[t], n = [
+function O(o, t) {
+  const e = z[o], c = U[t], l = [
     `--dc-core-space-unit: ${e.spaceUnit};`,
     `--dc-core-content-gap: ${e.gap};`,
     `--dc-core-control-height: ${e.controlHeight};`,
@@ -184,19 +184,19 @@ function Y(r, t) {
     // easing 仅挂 dc-core，[MUST NOT] dual-write 覆盖 EP 两条 bezier——
     // EP ease-in-out / fast 曲线各异，覆盖会让默认档动画曲线漂移；motion 档对 EP 只经 duration 生效。
     `--dc-core-motion-easing: ${c.easing};`
-  ], o = [
+  ], n = [
     "--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(`
+  ${l.join(`
   `)}
 }
 @media (prefers-reduced-motion: reduce) {
   :root {
-    ${o.join(
+    ${n.join(
     `
     `
   )}
@@ -204,52 +204,53 @@ function Y(r, t) {
 }
 `;
 }
-function U(r) {
-  const t = r.document ?? (typeof document < "u" ? document : void 0);
+function V(o) {
+  const t = o.document ?? (typeof document < "u" ? document : void 0);
   if (!t) return;
-  const e = () => {
-    let o = t.getElementById(m);
-    return o || (o = t.createElement("style"), o.id = m, t.head.appendChild(o)), o;
+  const e = A(), c = [], l = (r) => {
+    const a = t.createElement("style");
+    return a.id = `${r}-${e}`, t.head.appendChild(a), c.push(a), a;
   };
+  let n = null;
+  const i = () => (n || (n = l(L)), n);
   if (!t.getElementById(x)) {
-    const o = t.createElement("style");
-    o.id = x, o.textContent = B, t.head.appendChild(o);
+    const r = t.createElement("style");
+    r.id = x, r.textContent = M, t.head.appendChild(r);
   }
-  s(
-    r.getThemeConfig,
-    (o) => {
-      e().textContent = D(o);
+  m(
+    o.getThemeConfig,
+    (r) => {
+      i().textContent = R(r);
     },
     { deep: !0, immediate: !0 }
-  ), s(
-    r.getThemeIsDark,
-    (o) => {
-      t.documentElement.classList.toggle("dark", o);
+  ), m(
+    o.getThemeIsDark,
+    (r) => {
+      t.documentElement.classList.toggle("dark", r);
     },
     { immediate: !0 }
   );
-  const { getThemeDensity: c, getThemeMotion: n } = r;
-  if (c && n) {
-    if (!t.getElementById(b)) {
-      const l = t.createElement("style");
-      l.id = b, l.textContent = R, t.head.appendChild(l);
+  const { getThemeDensity: d, getThemeMotion: s } = o;
+  if (d && s) {
+    if (!t.getElementById(E)) {
+      const u = t.createElement("style");
+      u.id = E, u.textContent = Y, t.head.appendChild(u);
     }
-    const o = () => {
-      let l = t.getElementById(
-        E
-      );
-      return l || (l = t.createElement("style"), l.id = E, t.head.appendChild(l)), l;
-    };
-    s(
-      () => [c(), n()],
-      ([l, a]) => {
-        o().textContent = Y(l, a);
+    let r = null;
+    const a = () => (r || (r = l(H)), r);
+    m(
+      () => [d(), s()],
+      ([u, _]) => {
+        a().textContent = O(u, _);
       },
       { immediate: !0 }
     );
   }
+  C(() => {
+    c.forEach((r) => r.remove()), c.length = 0;
+  });
 }
 export {
-  Y as buildRhythmCss,
-  U as useThemeApply
+  O as buildRhythmCss,
+  V as useCoreThemeApply
 };

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

@@ -1,8 +1,8 @@
-import { watch as i } from "vue";
-const r = "dc-core-viewport", c = (e, d) => {
-  const p = e.paddingLeft + e.paddingRight, t = e.paddingTop + e.paddingBottom;
+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;
   return `:root {
-  --dc-core-viewport-width: calc(100vw - ${p}px);
+  --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;
@@ -13,27 +13,28 @@ const r = "dc-core-viewport", c = (e, d) => {
 ` : "") + `}
 `;
 };
-function a(e) {
+function m(e) {
   const d = e.document ?? (typeof document < "u" ? document : void 0);
   if (!d) return;
-  const p = () => {
-    let t = d.getElementById(r);
-    return t || (t = d.createElement("style"), t.id = r, d.head.appendChild(t)), t;
-  };
-  i(
+  const r = `${a}-${l()}`;
+  let t = null;
+  const p = () => (t || (t = d.createElement("style"), t.id = r, d.head.appendChild(t)), t);
+  c(
     () => {
-      var t;
+      var o;
       return {
         viewport: e.getViewportConfig(),
-        gap: (t = e.getGapConfig) == null ? void 0 : t.call(e)
+        gap: (o = e.getGapConfig) == null ? void 0 : o.call(e)
       };
     },
-    ({ viewport: t, gap: o }) => {
-      p().textContent = c(t, o);
+    ({ viewport: o, gap: i }) => {
+      p().textContent = u(o, i);
     },
     { deep: !0, immediate: !0 }
-  );
+  ), n(() => {
+    t == null || t.remove(), t = null;
+  });
 }
 export {
-  a as useViewportApply
+  m as useCoreViewportApply
 };