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

package/es/components/table/TableMain.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as pe, useModel as z, useAttrs as ve, ref as u, computed as f, markRaw as q, shallowRef as me, onMounted as he, onActivated as we, watch as d, openBlock as n, createElementBlock as w, createBlock as p, unref as x, withCtx as v, createVNode as D, mergeProps as c, createCommentVNode as ye, resolveDynamicComponent as E, Fragment as I, renderList as Se, createSlots as Ce, renderSlot as T, createTextVNode as k, toDisplayString as F, normalizeProps as be, guardReactiveProps as xe, withDirectives as Ie, createElementVNode as Pe, vShow as Ve, mergeModels as Y } from "vue";
+import { defineComponent as pe, useModel as z, useAttrs as me, ref as u, computed as f, markRaw as q, shallowRef as ve, onMounted as he, onActivated as we, watch as d, openBlock as n, createElementBlock as w, createBlock as p, unref as x, withCtx as m, createVNode as D, mergeProps as c, createCommentVNode as ye, resolveDynamicComponent as E, Fragment as I, renderList as Se, createSlots as be, renderSlot as T, createTextVNode as k, toDisplayString as F, normalizeProps as Ce, guardReactiveProps as xe, withDirectives as Ie, createElementVNode as Pe, vShow as Ve, mergeModels as Y } from "vue";
 import G from "lodash/cloneDeep";
 import _ from "lodash/omit";
 import Z from "lodash/set";
@@ -10,7 +10,7 @@ import { ElTable as Te, ElTableColumn as ke, ElEmpty as He, ElPagination as Ae }
 import { pickExportColumns as Me } from "../../utils/export.mjs";
 import { useChannelViewportHeight as Ne } from "../../hooks/use-channel-viewport-height.mjs";
 import { APP_API_LIST_MODEL_KEY_CONFIG as P } from "../../config/list-model.mjs";
-const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze = /* @__PURE__ */ pe({
+const Le = { class: "dc-table-main table-main" }, Oe = { class: "table-main-pagination" }, Ze = /* @__PURE__ */ pe({
   __name: "TableMain",
   props: /* @__PURE__ */ Y({
     showPager: { type: Boolean, default: !0 },
@@ -43,21 +43,21 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
   }),
   emits: /* @__PURE__ */ Y(["pageChange", "pageSizeChange", "dataChange", "loadingChange", "pageInfoChange"], ["update:isAutoRefresh", "update:refreshInterval", "update:customView"]),
   setup(o, { expose: W, emit: X }) {
-    const r = o, m = X, H = z(o, "isAutoRefresh"), A = z(o, "refreshInterval"), y = z(o, "customView"), ee = ve(), S = u([]), C = u(0), i = u(0), l = u(1), h = u(!1), V = u(!1), M = u([]), te = f(
+    const r = o, v = X, H = z(o, "isAutoRefresh"), A = z(o, "refreshInterval"), y = z(o, "customView"), ee = me(), S = u([]), b = u(0), s = u(0), l = u(1), h = u(!1), V = u(!1), M = u([]), te = f(
       () => ({
         columns: Me(r.columns),
         selectedList: M.value,
         currentPageList: S.value,
         api: r.api,
         query: r.query,
-        total: C.value,
+        total: b.value,
         hasSelection: r.columns.some((e) => e.type === "selection")
       })
     ), N = u(0), ae = (e) => {
       N.value = e;
     }, re = f(
       () => y.value ? q(Ee) : q(Te)
-    ), R = me(), oe = f(
+    ), R = ve(), oe = f(
       () => r.columns.some((e) => e.type === "selection")
     ), { viewportHeightFinal: ne } = Ne(r, {
       fallback: 500
@@ -72,52 +72,52 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
         ne.value - L.value - O.value - r.refineReduceHeight,
         t
       ) : void 0;
-    }), b = f(() => {
+    }), C = f(() => {
       const e = G(r.query || {});
-      return Z(e, P.PAGE_SIZE_KEY, i.value), Z(
+      return Z(e, P.PAGE_SIZE_KEY, s.value), Z(
         e,
         P.CURRENT_PAGE_KEY,
         l.value
       ), e;
-    }), se = () => ({
+    }), ie = () => ({
       injectInfo: r.injectInfo,
       exposeInfo: g
-    }), ie = f(() => ({
+    }), se = f(() => ({
       ...r.tableProps,
       ...ee,
       // customView 下，需要手动处理 selectable
       ...y.value ? {
         selectable: oe.value,
         columns: r.columns,
-        getRenderCtxParams: se
+        getRenderCtxParams: ie
       } : {}
     })), ue = (e) => {
       var t;
       const a = (t = r.tableProps) == null ? void 0 : t.onSelectionChange;
       M.value = e, a == null || a(e);
     }, K = (e, a = !0) => {
-      const t = JSON.stringify(e) === JSON.stringify(b.value);
+      const t = JSON.stringify(e) === JSON.stringify(C.value);
       return !t && a && console.warn(
         `同一地方 并发请求 参数冰花 当前不是最新的参数 丢弃结果 ${JSON.stringify(
           e
-        )} => ${JSON.stringify(b.value)}`
+        )} => ${JSON.stringify(C.value)}`
       ), t;
     }, j = (e = !1) => {
       var t;
-      if (!i.value) return;
+      if (!s.value) return;
       h.value ? console.warn("请求并发") : h.value = !0, e || (V.value = !0), (t = R.value) == null || t.clearSelection();
-      const a = G(b.value);
-      return r.api(a).then((s) => {
+      const a = G(C.value);
+      return r.api(a).then((i) => {
         K(a, !1) && (S.value = Q(
-          s,
+          i,
           P.LIST_KEY
-        ), C.value = Q(
-          s,
+        ), b.value = Q(
+          i,
           P.TOTAL_KEY
-        ), m("pageInfoChange", {
-          pageSize: i.value,
+        ), v("pageInfoChange", {
+          pageSize: s.value,
           currentPage: l.value,
-          total: C.value
+          total: b.value
         }));
       }).finally(() => {
         K(a) && (h.value = !1, V.value = !1);
@@ -145,21 +145,21 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
     }), ge = (e) => e;
     W(g);
     const de = (e) => {
-      i.value = e, l.value = 1;
+      s.value = e, l.value = 1;
     }, U = (e) => !e || e === "expand";
     return he(() => {
-      i.value = r.pageSizeInit, we(() => {
+      s.value = r.pageSizeInit, we(() => {
         g.refresh();
       });
     }), d(S, (e) => {
-      m("dataChange", e);
+      v("dataChange", e);
     }), d(
       () => r.query,
       (e, a) => {
         JSON.stringify(e) !== JSON.stringify(a) && (l.value = 1);
       }
     ), d(
-      b,
+      C,
       (e, a) => {
         JSON.stringify(e) !== JSON.stringify(a) && j();
       },
@@ -167,17 +167,17 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
         immediate: !0
       }
     ), d(V, (e) => {
-      m("loadingChange", e);
-    }), d(i, (e) => {
-      m("pageSizeChange", e);
+      v("loadingChange", e);
+    }), d(s, (e) => {
+      v("pageSizeChange", e);
     }), d(l, (e) => {
-      m("pageChange", e);
+      v("pageChange", e);
     }), (e, a) => (n(), w("div", Le, [
       o.showToolbar ? (n(), p(x(ze), {
         key: 0,
         onHeightChange: ae
       }, {
-        default: v(() => [
+        default: m(() => [
           D(Re, c({
             "is-auto-refresh": H.value,
             "onUpdate:isAutoRefresh": a[0] || (a[0] = (t) => H.value = t),
@@ -190,7 +190,7 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
             exportContext: te.value,
             showSwitchView: o.showSwitchView,
             currentPage: l.value,
-            pageSize: i.value
+            pageSize: s.value
           }, o.toolbar), null, 16, ["is-auto-refresh", "refresh-interval", "custom-view", "loading", "exportContext", "showSwitchView", "currentPage", "pageSize"])
         ]),
         _: 1
@@ -202,35 +202,35 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
         stripe: "",
         border: "",
         highlightCurrentRow: ""
-      }, ie.value, {
+      }, se.value, {
         maxHeight: le.value,
         data: S.value,
         rowKey: ce(o.rowKey),
         onSelectionChange: ue
       }), {
-        item: v((t) => [
-          T(e.$slots, "custom-view-item", be(xe(ge(t))), void 0, !0)
+        item: m((t) => [
+          T(e.$slots, "custom-view-item", Ce(xe(ge(t))), void 0, !0)
         ]),
-        empty: v(() => [
+        empty: m(() => [
           h.value ? (n(), w(I, { key: 0 }, [
             k("加载中...")
           ], 64)) : (n(), p(x(He), { key: 1 }))
         ]),
-        default: v(() => [
+        default: m(() => [
           (n(!0), w(I, null, Se(o.columns, (t) => (n(), p(x(ke), c({
             key: t.columnKey || t.prop
-          }, { ref_for: !0 }, t), Ce({ _: 2 }, [
+          }, { ref_for: !0 }, t), be({ _: 2 }, [
             U(t.type) ? {
               name: "default",
-              fn: v((s) => [
-                T(e.$slots, t.prop, c({ ref_for: !0 }, $(s)), () => [
+              fn: m((i) => [
+                T(e.$slots, t.prop, c({ ref_for: !0 }, $(i)), () => [
                   t.render ? (n(), p(E(t.render), c({
                     key: 0,
                     ref_for: !0
-                  }, $(s, ["$index"]), {
-                    _index: s.$index
+                  }, $(i, ["$index"]), {
+                    _index: i.$index
                   }), null, 16, ["_index"])) : (n(), w(I, { key: 1 }, [
-                    k(F(s.row[t.prop]), 1)
+                    k(F(i.row[t.prop]), 1)
                   ], 64))
                 ], !0)
               ]),
@@ -238,12 +238,12 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
             } : void 0,
             U(t.type) ? {
               name: "header",
-              fn: v((s) => [
-                T(e.$slots, `header-${t.prop}`, c({ ref_for: !0 }, J(s)), () => [
+              fn: m((i) => [
+                T(e.$slots, `header-${t.prop}`, c({ ref_for: !0 }, J(i)), () => [
                   t.headerRender ? (n(), p(E(t.headerRender), c({
                     key: 0,
                     ref_for: !0
-                  }, J(s)), null, 16)) : (n(), w(I, { key: 1 }, [
+                  }, J(i)), null, 16)) : (n(), w(I, { key: 1 }, [
                     k(F(t.label), 1)
                   ], 64))
                 ], !0)
@@ -258,13 +258,13 @@ const Le = { class: "table-main" }, Oe = { class: "table-main-pagination" }, Ze
         D(x(Ae), {
           "current-page": l.value,
           "onUpdate:currentPage": a[3] || (a[3] = (t) => l.value = t),
-          "page-size": i.value,
-          "onUpdate:pageSize": a[4] || (a[4] = (t) => i.value = t),
+          "page-size": s.value,
+          "onUpdate:pageSize": a[4] || (a[4] = (t) => s.value = t),
           "page-sizes": o.pageSizeOptions,
           size: "small",
           background: "",
           layout: o.pageLayout,
-          total: C.value,
+          total: b.value,
           onSizeChange: de
         }, null, 8, ["current-page", "page-size", "page-sizes", "layout", "total"])
       ], 512), [

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

@@ -1,6 +1,6 @@
-import { watch as u } from "vue";
-import { themeScaleDerive as g } from "../utils/theme-scale.mjs";
-const m = "admin-core-theme", p = [
+import { watch as s } from "vue";
+import { themeScaleDerive as x } from "../utils/theme-scale.mjs";
+const p = "admin-core-theme", $ = [
   ["primaryColor", { scale: !0, el: "--el-color-primary" }],
   ["successColor", { scale: !0, el: "--el-color-success" }],
   ["warningColor", { scale: !0, el: "--el-color-warning" }],
@@ -18,68 +18,196 @@ const m = "admin-core-theme", p = [
   ["blur", {}],
   ["focusRing", {}],
   ["surface", {}]
-], h = [
+], u = [
   "light-3",
   "light-5",
   "light-7",
   "light-8",
   "light-9",
   "dark-2"
-], $ = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase(), f = (r, l) => {
-  const o = [];
-  for (const [e, c] of p) {
-    const t = r[e];
-    if (t === void 0 || t === "") continue;
-    const a = `--admin-core-${$(e)}`, i = c.el === void 0 ? [] : Array.isArray(c.el) ? c.el : [c.el];
-    if (c.scale) {
-      const n = g(t, l);
-      o.push(`${a}: ${t};`);
-      for (const s of h)
-        o.push(`${a}-${s}: ${n[s]};`);
-      for (const s of i) {
-        o.push(`${s}: ${t};`);
-        for (const d of h)
-          o.push(`${s}-${d}: ${n[d]};`);
+], b = (r) => r.replace(/([A-Z])/g, "-$1").toLowerCase(), g = (r, t) => {
+  const e = [];
+  for (const [l, i] of $) {
+    const o = r[l];
+    if (o === void 0 || o === "") continue;
+    const n = `--admin-core-${b(l)}`, c = i.el === void 0 ? [] : Array.isArray(i.el) ? i.el : [i.el];
+    if (i.scale) {
+      const d = x(o, t);
+      e.push(`${n}: ${o};`);
+      for (const a of u)
+        e.push(`${n}-${a}: ${d[a]};`);
+      for (const a of c) {
+        e.push(`${a}: ${o};`);
+        for (const m of u)
+          e.push(`${a}-${m}: ${d[m]};`);
       }
     } else {
-      o.push(`${a}: ${t};`);
-      for (const n of i) o.push(`${n}: ${t};`);
+      e.push(`${n}: ${o};`);
+      for (const d of c) e.push(`${d}: ${o};`);
     }
   }
-  return o.join(`
+  return e.join(`
   `);
-}, C = (r) => {
-  const l = f(r.light, "light"), o = f(r.dark, "dark");
+}, E = (r) => {
+  const t = g(r.light, "light"), e = g(r.dark, "dark");
   return `:root {
-  ${l}
+  ${t}
   color: var(--admin-core-base-color);
 }
 :root.dark {
-  ${o}
+  ${e}
 }
 `;
+}, f = "admin-core-rhythm", h = "admin-core-ep-bridge", y = [
+  // T1 必纳：表格行密度（垂直经 td padding，水平经 .cell padding）
+  ".el-table .el-table__cell {",
+  "  padding-top: var(--admin-core-cell-padding-y, 8px);",
+  "  padding-bottom: var(--admin-core-cell-padding-y, 8px);",
+  "}",
+  ".el-table .cell {",
+  "  padding-left: var(--admin-core-cell-padding-x, 12px);",
+  "  padding-right: var(--admin-core-cell-padding-x, 12px);",
+  "}",
+  // T1 必纳：表单项间距
+  ".el-form-item {",
+  "  margin-bottom: var(--admin-core-form-item-gap, 18px);",
+  "}"
+  // 注：dialog/card 内距撤到期二——其 EP 原生值（dialog 16 / card 20）与单一
+  // content-gap 无法同时对齐，本期纳入会破"默认档零漂移"；期二用专属 var 补。
+].join(`
+`), S = {
+  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"
+  }
+}, C = {
+  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 E(r) {
-  const l = r.document ?? (typeof document < "u" ? document : void 0);
-  if (!l) return;
-  const o = () => {
-    let e = l.getElementById(m);
-    return e || (e = l.createElement("style"), e.id = m, l.head.appendChild(e)), e;
+function _(r, t) {
+  const e = S[r], l = C[t], i = [
+    `--admin-core-space-unit: ${e.spaceUnit};`,
+    `--admin-core-content-gap: ${e.gap};`,
+    `--admin-core-control-height: ${e.controlHeight};`,
+    `--el-component-size: ${e.controlHeight};`,
+    `--admin-core-cell-padding-y: ${e.cellPaddingY};`,
+    `--admin-core-cell-padding-x: ${e.cellPaddingX};`,
+    `--admin-core-form-item-gap: ${e.formItemGap};`,
+    `--admin-core-font-size-base: ${e.fontSizeBase};`,
+    `--el-font-size-base: ${e.fontSizeBase};`,
+    `--admin-core-font-scale: ${e.fontScale};`,
+    `--admin-core-motion-duration: ${l.duration};`,
+    `--el-transition-duration-fast: ${l.duration};`,
+    `--admin-core-motion-duration-slow: ${l.durationSlow};`,
+    `--el-transition-duration: ${l.durationSlow};`,
+    // easing 仅挂 admin-core，[MUST NOT] dual-write 覆盖 EP 两条 bezier——
+    // EP ease-in-out / fast 曲线各异，覆盖会让默认档动画曲线漂移；motion 档对 EP 只经 duration 生效。
+    `--admin-core-motion-easing: ${l.easing};`
+  ], o = [
+    "--admin-core-motion-duration: 0.01ms;",
+    "--admin-core-motion-duration-slow: 0.01ms;",
+    "--el-transition-duration: 0.01ms;",
+    "--el-transition-duration-fast: 0.01ms;"
+  ];
+  return `:root {
+  ${i.join(`
+  `)}
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    ${o.join(
+    `
+    `
+  )}
+  }
+}
+`;
+}
+function T(r) {
+  const t = r.document ?? (typeof document < "u" ? document : void 0);
+  if (!t) return;
+  const e = () => {
+    let o = t.getElementById(p);
+    return o || (o = t.createElement("style"), o.id = p, t.head.appendChild(o)), o;
   };
-  u(
+  s(
     r.getThemeConfig,
-    (e) => {
-      o().textContent = C(e);
+    (o) => {
+      e().textContent = E(o);
     },
     { deep: !0, immediate: !0 }
-  ), u(
+  ), s(
     r.getThemeIsDark,
-    (e) => {
-      l.documentElement.classList.toggle("dark", e);
+    (o) => {
+      t.documentElement.classList.toggle("dark", o);
     },
     { immediate: !0 }
   );
+  const { getThemeDensity: l, getThemeMotion: i } = r;
+  if (l && i) {
+    if (!t.getElementById(h)) {
+      const n = t.createElement("style");
+      n.id = h, n.textContent = y, t.head.appendChild(n);
+    }
+    const o = () => {
+      let n = t.getElementById(
+        f
+      );
+      return n || (n = t.createElement("style"), n.id = f, t.head.appendChild(n)), n;
+    };
+    s(
+      () => [l(), i()],
+      ([n, c]) => {
+        o().textContent = _(n, c);
+      },
+      { immediate: !0 }
+    );
+  }
 }
 export {
-  E as useAdminThemeApply
+  _ as buildRhythmCss,
+  T as useAdminThemeApply
 };