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

package/es/components/app-layout/AppSidebar.vue2.mjs

@@ -1,10 +1,9 @@
-import { defineComponent as k, useCssVars as A, inject as v, computed as e, ref as b, openBlock as f, createElementBlock as T, normalizeStyle as g, createVNode as a, unref as o, withCtx as i, renderSlot as h, createElementVNode as C, createBlock as H, createCommentVNode as L } from "vue";
-import w from "../menu/MenuTree.vue.mjs";
-import y from "../display/WatchSize.vue.mjs";
-import { ElTooltip as F, ElIcon as I } from "element-plus";
-import { ArrowRightBold as V } from "@element-plus/icons-vue";
-import { APP_LAYOUT_APP_STORE_KEY as Y, APP_LAYOUT_BRIDGE_KEY as N } from "../../inject/key.mjs";
-const O = { class: "app-sidebar-shim" }, D = /* @__PURE__ */ k({
+import { defineComponent as P, useCssVars as A, inject as m, computed as e, ref as v, openBlock as B, createElementBlock as E, normalizeStyle as H, createVNode as l, unref as p, withCtx as b, renderSlot as g, createElementVNode as L } from "vue";
+import $ from "../menu/MenuTree.vue.mjs";
+import f from "../display/WatchSize.vue.mjs";
+import w from "./AppCollapseToggle.vue.mjs";
+import { APP_LAYOUT_APP_STORE_KEY as F, APP_LAYOUT_BRIDGE_KEY as k } from "../../inject/key.mjs";
+const Y = { class: "app-sidebar-shim" }, N = /* @__PURE__ */ P({
   __name: "AppSidebar",
   props: {
     show: { type: Boolean },
@@ -12,80 +11,61 @@ const O = { class: "app-sidebar-shim" }, D = /* @__PURE__ */ k({
     menus: {},
     menuFlatList: {}
   },
-  setup(s) {
-    A((d) => ({
-      v368510bd: E.value,
-      v7b09fce5: _.value,
-      v1098f49b: B.value,
-      cc02eed6: l.value.bodyColor,
-      v56d0884d: l.value.primaryColor
+  setup(t) {
+    A((o) => ({
+      v769c523e: _.value,
+      v2fe699b4: x.value,
+      v819fea8c: S.value
     }));
-    const S = s, u = v(Y), c = e(() => u.sidebarStyle), p = b(0), m = b(0), x = e(() => parseFloat(String(c.value.paddingTop ?? "")) || 0), _ = e(
-      () => `${Math.max(x.value, p.value)}px`
-    ), B = e(() => `${m.value}px`), E = e(() => S.aboveHeader ? 2 : 0), r = e(() => u.sidebarIsCollapse), P = e(() => ({
-      transform: `rotate(${r.value ? 0 : 180}deg)`
-    })), $ = v(N), l = e(() => $.themeColors.value);
-    return (d, t) => (f(), T("div", {
+    const h = t, s = m(F), u = e(() => s.sidebarStyle), c = v(0), d = v(0), C = e(() => parseFloat(String(u.value.paddingTop ?? "")) || 0), x = e(
+      () => `${Math.max(C.value, c.value)}px`
+    ), S = e(() => `${d.value}px`), _ = e(() => h.aboveHeader ? 2 : 0), r = e(() => s.sidebarIsCollapse), y = () => {
+      const o = !r.value;
+      s.changeSidebarCollapseStatus(o);
+    }, T = m(k), n = e(() => T.themeColors.value);
+    return (o, a) => (B(), E("div", {
       class: "app-sidebar",
-      style: g(c.value)
+      style: H(u.value)
     }, [
-      a(o(y), {
+      l(p(f), {
         class: "app-sidebar-top",
-        onHeightChange: t[0] || (t[0] = (n) => p.value = n)
+        onHeightChange: a[0] || (a[0] = (i) => c.value = i)
       }, {
-        default: i(() => [
-          h(d.$slots, "top", {}, void 0, !0)
+        default: b(() => [
+          g(o.$slots, "top", {}, void 0, !0)
         ]),
         _: 3
       }),
-      C("div", O, [
-        a(o(w), {
+      L("div", Y, [
+        l(p($), {
           collapse: r.value,
-          menus: s.menus,
+          menus: t.menus,
           style: { height: "100%" },
-          "background-color": l.value.bodyColor,
-          "text-color": l.value.baseColor,
-          "active-text-color": l.value.primaryColor,
-          menuFlatList: s.menuFlatList,
+          "background-color": n.value.bodyColor,
+          "text-color": n.value.baseColor,
+          "active-text-color": n.value.primaryColor,
+          menuFlatList: t.menuFlatList,
           routerMode: ""
         }, null, 8, ["collapse", "menus", "background-color", "text-color", "active-text-color", "menuFlatList"])
       ]),
-      a(o(y), {
+      l(p(f), {
         class: "app-sidebar-bottom",
-        onHeightChange: t[1] || (t[1] = (n) => m.value = n)
+        onHeightChange: a[1] || (a[1] = (i) => d.value = i)
       }, {
-        default: i(() => [
-          h(d.$slots, "bottom", {}, void 0, !0)
+        default: b(() => [
+          g(o.$slots, "bottom", {}, void 0, !0)
         ]),
         _: 3
       }),
-      s.show ? (f(), H(o(F), {
-        key: 0,
-        content: r.value ? "展开" : "收起",
-        placement: "right",
-        "show-after": 200
-      }, {
-        default: i(() => [
-          C("div", {
-            class: "app-sidebar-toggle",
-            onClick: t[2] || (t[2] = (n) => o(u).changeSidebarCollapseStatus(!r.value))
-          }, [
-            a(o(I), null, {
-              default: i(() => [
-                a(o(V), {
-                  class: "app-sidebar-toggle-icon",
-                  style: g(P.value)
-                }, null, 8, ["style"])
-              ]),
-              _: 1
-            })
-          ])
-        ]),
-        _: 1
-      }, 8, ["content"])) : L("", !0)
+      l(w, {
+        side: "sidebar",
+        show: t.show,
+        collapse: r.value,
+        onToggle: y
+      }, null, 8, ["show", "collapse"])
     ], 4));
   }
 });
 export {
-  D as default
+  N as default
 };

package/es/components/app-layout/AppTheme.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./AppTheme.vue2.mjs";
 /* empty css               */
-import e from "../../_virtual/_plugin-vue_export-helper.mjs";
-const m = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e4f0fe3b"]]);
+import p from "../../_virtual/_plugin-vue_export-helper.mjs";
+const a = /* @__PURE__ */ p(o, [["__scopeId", "data-v-06ca4822"]]);
 export {
-  m as default
+  a as default
 };

package/es/components/app-layout/viewport.mjs

@@ -1,5 +1,5 @@
-const E = 800, _ = 1e4;
+const E = 800, O = 1e4;
 export {
-  _ as ADMIN_CORE_VIEWPORT_DECOR_ZINDEX_ABOVE,
-  E as ADMIN_CORE_VIEWPORT_DECOR_ZINDEX_BELOW
+  O as CORE_VIEWPORT_DECOR_ZINDEX_ABOVE,
+  E as CORE_VIEWPORT_DECOR_ZINDEX_BELOW
 };

package/es/components/display/TabsHeader.vue.mjs

@@ -1,7 +1,7 @@
-import a from "./TabsHeader.vue2.mjs";
+import o from "./TabsHeader.vue2.mjs";
 /* empty css                 */
-import o from "../../_virtual/_plugin-vue_export-helper.mjs";
-const e = /* @__PURE__ */ o(a, [["__scopeId", "data-v-3faa57f5"]]);
+import r from "../../_virtual/_plugin-vue_export-helper.mjs";
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6b4fc73b"]]);
 export {
-  e as default
+  f as default
 };

package/es/components/form/FormItemNestForm.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./FormItemNestForm.vue2.mjs";
 /* empty css                       */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-12b77b02"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a413a382"]]);
 export {
-  p as default
+  e as default
 };

package/es/components/form/FormItemNestFormList.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./FormItemNestFormList.vue2.mjs";
 /* empty css                           */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9fa02cbe"]]);
+const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-68118cbf"]]);
 export {
-  s as default
+  e as default
 };

package/es/components/form/FormSubmitPanel.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./FormSubmitPanel.vue2.mjs";
 /* empty css                      */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-93bc9096"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1505775a"]]);
 export {
   p as default
 };

package/es/components/form/FormVerifyImage.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./FormVerifyImage.vue2.mjs";
 /* empty css                      */
 import r from "../../_virtual/_plugin-vue_export-helper.mjs";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-669b7ad9"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7a70397e"]]);
 export {
   e as default
 };

package/es/components/table/TableToolbar.vue.mjs

@@ -1,7 +1,7 @@
 import o from "./TableToolbar.vue2.mjs";
 /* empty css                   */
-import r from "../../_virtual/_plugin-vue_export-helper.mjs";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-6f2937e1"]]);
+import a from "../../_virtual/_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-0175f1a9"]]);
 export {
-  f as default
+  m as default
 };

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

@@ -0,0 +1,255 @@
+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 = [
+  ["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" }],
+  ["bodyColor", { el: ["--el-bg-color-page", "--el-bg-color"] }],
+  ["baseColor", { el: "--el-text-color-primary" }],
+  ["radius", { el: "--el-border-radius-base" }],
+  ["borderColor", { el: "--el-border-color" }],
+  ["shadow", { el: "--el-box-shadow" }],
+  ["borderWidth", { el: "--el-border-width" }],
+  ["accent", {}],
+  ["glow", {}],
+  ["blur", {}],
+  ["focusRing", {}],
+  ["surface", {}]
+], p = [
+  "light-3",
+  "light-5",
+  "light-7",
+  "light-8",
+  "light-9",
+  "dark-2"
+], L = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase(), g = (r, 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]};`);
+      }
+    } else {
+      e.push(`${l}: ${o};`);
+      for (const d of a) e.push(`${d}: ${o};`);
+    }
+  }
+  return e.join(`
+  `);
+}, A = 0.4, T = 10, v = {
+  light: 0.5,
+  dark: 0.72
+}, f = (r, t) => {
+  if (!r) return "";
+  const e = S(r);
+  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]
+  )};`;
+}, 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 = [
+    c,
+    "color: var(--dc-core-base-color);",
+    f(t.bodyColor, "light"),
+    h(t.bodyColor, "light")
+  ].filter(Boolean), a = [
+    n,
+    f(e.bodyColor, "dark"),
+    h(e.bodyColor, "dark"),
+    k(e.bodyColor)
+  ].filter(Boolean);
+  return `:root {
+  ${l.join(
+    `
+  `
+  )}
+}
+:root.dark {
+  ${a.join(`
+  `)}
+}
+`;
+}, E = "dc-core-rhythm", b = "dc-core-ep-bridge", x = "dc-core-ep-structural", B = [
+  ".el-dialog,",
+  ".el-message-box {",
+  // elevation：暗色下用提亮过的面板底（--dc-core-dialog-surface，仅 :root.dark 派生），
+  // 让整块面板亮于页面底而浮起；缺省（亮色 / 非 hex）退 --el-bg-color，亮色零改动。
+  "  background-color: var(--dc-core-dialog-surface, var(--el-bg-color));",
+  "  border: 1px solid var(--dc-core-border-color, var(--el-border-color));",
+  "}"
+].join(`
+`), R = [
+  // T1 必纳：表格行密度（垂直经 td padding，水平经 .cell padding）
+  ".el-table .el-table__cell {",
+  "  padding-top: var(--dc-core-cell-padding-y, 8px);",
+  "  padding-bottom: var(--dc-core-cell-padding-y, 8px);",
+  "}",
+  ".el-table .cell {",
+  "  padding-left: var(--dc-core-cell-padding-x, 12px);",
+  "  padding-right: var(--dc-core-cell-padding-x, 12px);",
+  "}",
+  // T1 必纳：表单项间距
+  ".el-form-item {",
+  "  margin-bottom: var(--dc-core-form-item-gap, 18px);",
+  "}"
+  // 注：dialog/card 内距撤到期二——其 EP 原生值（dialog 16 / card 20）与单一
+  // content-gap 无法同时对齐，本期纳入会破"默认档零漂移"；期二用专属 var 补。
+].join(`
+`), w = {
+  compact: {
+    spaceUnit: "4px",
+    gap: "8px",
+    controlHeight: "28px",
+    cellPaddingY: "6px",
+    cellPaddingX: "12px",
+    formItemGap: "12px",
+    fontSizeBase: "13px",
+    fontScale: "1.15"
+  },
+  cozy: {
+    // cozy = 默认档：取值 [MUST] 与 EP 原生对齐（控件 32 / 字号 14 / 行垂距 8 /
+    // 横距 12 / form-item 18），保证未 opt-in 的存量应用零视觉漂移。
+    spaceUnit: "4px",
+    gap: "12px",
+    controlHeight: "32px",
+    cellPaddingY: "8px",
+    cellPaddingX: "12px",
+    formItemGap: "18px",
+    fontSizeBase: "14px",
+    fontScale: "1.2"
+  },
+  comfortable: {
+    spaceUnit: "4px",
+    gap: "20px",
+    controlHeight: "40px",
+    cellPaddingY: "14px",
+    cellPaddingX: "12px",
+    formItemGap: "26px",
+    fontSizeBase: "15px",
+    fontScale: "1.25"
+  }
+}, H = {
+  snappy: {
+    duration: "120ms",
+    durationSlow: "180ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  standard: {
+    // standard = 默认档：duration 200 / durationSlow 300 对齐 EP 原生
+    // (--el-transition-duration-fast .2s / --el-transition-duration .3s)，默认零漂移。
+    duration: "200ms",
+    durationSlow: "300ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
+  },
+  calm: {
+    duration: "320ms",
+    durationSlow: "420ms",
+    easing: "cubic-bezier(0.22, 0.61, 0.36, 1)"
+  }
+};
+function Y(r, t) {
+  const e = w[r], c = H[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: ${c.duration};`,
+    `--el-transition-duration-fast: ${c.duration};`,
+    `--dc-core-motion-duration-slow: ${c.durationSlow};`,
+    `--el-transition-duration: ${c.durationSlow};`,
+    // easing 仅挂 dc-core，[MUST NOT] dual-write 覆盖 EP 两条 bezier——
+    // EP ease-in-out / fast 曲线各异，覆盖会让默认档动画曲线漂移；motion 档对 EP 只经 duration 生效。
+    `--dc-core-motion-easing: ${c.easing};`
+  ], o = [
+    "--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(`
+  `)}
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    ${o.join(
+    `
+    `
+  )}
+  }
+}
+`;
+}
+function U(r) {
+  const t = r.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;
+  };
+  if (!t.getElementById(x)) {
+    const o = t.createElement("style");
+    o.id = x, o.textContent = B, t.head.appendChild(o);
+  }
+  s(
+    r.getThemeConfig,
+    (o) => {
+      e().textContent = D(o);
+    },
+    { deep: !0, immediate: !0 }
+  ), s(
+    r.getThemeIsDark,
+    (o) => {
+      t.documentElement.classList.toggle("dark", o);
+    },
+    { 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 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);
+      },
+      { immediate: !0 }
+    );
+  }
+}
+export {
+  Y as buildRhythmCss,
+  U as useThemeApply
+};

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

@@ -0,0 +1,39 @@
+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;
+  return `:root {
+  --dc-core-viewport-width: calc(100vw - ${p}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;
+` + // gap 内缝 var：仅当提供 getGapConfig 时注入（纯对外暴露，core 不读）。
+  (d ? `  --dc-core-gap: ${d.size}px;
+` : "") + `}
+`;
+};
+function a(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(
+    () => {
+      var t;
+      return {
+        viewport: e.getViewportConfig(),
+        gap: (t = e.getGapConfig) == null ? void 0 : t.call(e)
+      };
+    },
+    ({ viewport: t, gap: o }) => {
+      p().textContent = c(t, o);
+    },
+    { deep: !0, immediate: !0 }
+  );
+}
+export {
+  a as useViewportApply
+};