@aplus-frontend/ui 7.0.0-beta.2 → 7.0.0

package/es/src/ag-grid/hooks/use-editable-form-item-api.mjs

@@ -6,51 +6,53 @@ let $ = 0;
 function I() {
   return `_ag_grid${$++}`;
 }
-const J = (l, v, n, w) => {
+const J = (l, c, n, w) => {
   const K = E([]);
-  function j(s, t) {
-    const r = d(n)?.length || 0;
-    if (F(l.maxLength) && r >= l.maxLength || !s && x(l.rowKey))
+  function j(f, s) {
+    const v = d(n)?.length || 0;
+    if (F(l.maxLength) && v >= l.maxLength || !f && x(l.rowKey))
       return;
-    const f = {
-      ...s || { [l.rowKey]: I() }
+    const t = {
+      ...f || { [l.rowKey]: I() }
     };
-    v?.setFieldValue(
+    c?.setFieldValue(
       w,
-      f,
+      t,
       !1,
-      (i, c) => {
-        const e = y(f, void 0, l.rowKey);
-        i[c] ? i[c][e] = f : i[c] = { [e]: f }, n.value ? V(t) ? n.value.push(f) : (K.value = n.value.map(
-          (u, o) => o < t ? null : y(u, o, l.rowKey)
-        ).filter(Boolean), n.value.splice(t, 0, f)) : n.value = [f], v?.setFieldValue(
+      (i, r) => {
+        const e = y(t, void 0, l.rowKey);
+        i[r] ? i[r][e] = t : i[r] = { [e]: t }, n.value ? V(s) ? n.value.push(t) : (K.value = n.value.map(
+          (u, o) => o < s ? null : y(u, o, l.rowKey)
+        ).filter(Boolean), n.value.splice(s, 0, t)) : n.value = [t], c?.setFieldValue(
           l.name,
-          f,
+          t,
           !0,
           (u, o) => {
             if (!u[o]) {
-              u[o] = [f];
+              u[o] = [t];
               return;
             }
-            V(t) ? u[o].push(f) : u[o].splice(t, 0, f);
+            V(s) ? u[o].push(t) : u[o].splice(s, 0, t);
           }
         );
       }
     );
   }
-  function k(s, t = "suffix") {
-    const r = d(n)?.length || 0, f = h(s) ? s : s.length;
-    if (F(l.maxLength) && r + f > l.maxLength || h(s) && x(l.rowKey))
+  function k(f, s = "suffix") {
+    if (!f)
       return;
-    const i = h(s) ? new Array(s).fill(0).map(() => ({ [l.rowKey]: I() })) : S(s), c = U(i, l.rowKey);
-    v?.setFieldValue(
+    const v = d(n)?.length || 0, t = h(f) ? f : f.length;
+    if (F(l.maxLength) && v + t > l.maxLength || h(f) && x(l.rowKey))
+      return;
+    const i = h(f) ? new Array(f).fill(0).map(() => ({ [l.rowKey]: I() })) : S(f), r = U(i, l.rowKey);
+    c?.setFieldValue(
       w,
-      c,
+      r,
       !1,
       (e, u) => {
-        e[u] ? Object.assign(e[u], c) : e[u] = c, n.value ? t === "suffix" ? n.value.push(...i) : (K.value = n.value.map(
+        e[u] ? Object.assign(e[u], r) : e[u] = r, n.value ? s === "suffix" ? n.value.push(...i) : (K.value = n.value.map(
           (o, g) => y(o, g, l.rowKey)
-        ), n.value.unshift(...i)) : n.value = [...i], v?.setFieldValue(
+        ), n.value.unshift(...i)) : n.value = [...i], c?.setFieldValue(
           l.name,
           i,
           !0,
@@ -59,31 +61,31 @@ const J = (l, v, n, w) => {
               o[g] = [...i];
               return;
             }
-            t === "suffix" ? o[g].push(...i) : o[g].unshift(...i);
+            s === "suffix" ? o[g].push(...i) : o[g].unshift(...i);
           }
         );
       }
     );
   }
-  function L(s) {
-    const t = R(s) ? s : [s];
-    v?.setFieldValue(
+  function L(f) {
+    const s = R(f) ? f : [f];
+    c?.setFieldValue(
       w,
       void 0,
       !1,
-      (r, f) => {
-        for (const e of t) {
+      (v, t) => {
+        for (const e of s) {
           const u = y(e, void 0, l.rowKey);
-          delete r[f][u];
+          delete v[t][u];
         }
         const i = n.value.filter(
-          (e) => !t.includes(e)
-        ), c = n.value.findIndex(
-          (e) => t.includes(e)
+          (e) => !s.includes(e)
+        ), r = n.value.findIndex(
+          (e) => s.includes(e)
         );
         K.value = n.value.map(
-          (e, u) => u <= c ? null : y(e, u, l.rowKey)
-        ).filter(Boolean), i.length ? n.value = i : n.value.splice(0, n.value.length), v.setFieldValue(
+          (e, u) => u <= r ? null : y(e, u, l.rowKey)
+        ).filter(Boolean), i.length ? n.value = i : n.value.splice(0, n.value.length), c.setFieldValue(
           l.name,
           void 0,
           !0,
@@ -94,23 +96,23 @@ const J = (l, v, n, w) => {
       }
     );
   }
-  function O(s) {
-    const t = new Set(R(s) ? s : [s]);
-    t.size !== 0 && v?.setFieldValue(
+  function O(f) {
+    const s = new Set(R(f) ? f : [f]);
+    s.size !== 0 && c?.setFieldValue(
       w,
       void 0,
       !1,
-      (r, f) => {
-        for (const e of t)
-          delete r[f][e];
+      (v, t) => {
+        for (const e of s)
+          delete v[t][e];
         const i = n.value.filter(
-          (e, u) => !t.has(y(e, u, l.rowKey))
-        ), c = n.value.findIndex(
-          (e, u) => t.has(y(e, u, l.rowKey))
+          (e, u) => !s.has(y(e, u, l.rowKey))
+        ), r = n.value.findIndex(
+          (e, u) => s.has(y(e, u, l.rowKey))
         );
         K.value = n.value.map(
-          (e, u) => u <= c ? null : y(e, u, l.rowKey)
-        ).filter(Boolean), i.length ? n.value = i : n.value.splice(0, n.value.length), v.setFieldValue(
+          (e, u) => u <= r ? null : y(e, u, l.rowKey)
+        ).filter(Boolean), i.length ? n.value = i : n.value.splice(0, n.value.length), c.setFieldValue(
           l.name,
           void 0,
           !0,
@@ -121,41 +123,41 @@ const J = (l, v, n, w) => {
       }
     );
   }
-  function T(s) {
-    return d(n)?.[s];
+  function T(f) {
+    return d(n)?.[f];
   }
   function B() {
     return d(n);
   }
-  function _(s, t, r = !0) {
-    v?.setFieldValue?.(
+  function _(f, s, v = !0) {
+    c?.setFieldValue?.(
       w,
       void 0,
       !1,
-      (f, i) => {
-        const c = n.value.findIndex(
-          (u, o) => s === o
+      (t, i) => {
+        const r = n.value.findIndex(
+          (u, o) => f === o
         );
-        if (!~c)
+        if (!~r)
           return;
         const e = y(
-          n.value[c],
-          c,
+          n.value[r],
+          r,
           l.rowKey
         );
-        if (e && !(!f[i] || !f[i][e])) {
-          if (!r) {
-            const u = Object.keys(f[i][e]);
+        if (e && !(!t[i] || !t[i][e])) {
+          if (!v) {
+            const u = Object.keys(t[i][e]);
             for (const o of u)
-              o !== l.rowKey && delete f[i][e][o];
+              o !== l.rowKey && delete t[i][e][o];
           }
-          Object.assign(f[i][e], { ...t });
+          Object.assign(t[i][e], { ...s });
         }
       }
     );
   }
   function z() {
-    v?.setFieldValue(w, {}), v?.setFieldValue(l.name, []);
+    c?.setFieldValue(w, {}), c?.setFieldValue(l.name, []);
   }
   return {
     add: j,

package/es/src/ag-grid/index.vue.mjs

@@ -509,6 +509,7 @@ const Ft = /* @__PURE__ */ uo({
               "row-class-rules": e.rowClassRules,
               "no-rows-overlay-component": $o,
               "suppress-cell-focus": "",
+              "enable-cell-span": "",
               "dom-layout": e.autoHeight ? "autoHeight" : "normal",
               onSortChanged: Be,
               onGridReady: r[0] || (r[0] = (a) => s.value = a.api),

package/es/src/ag-grid/interface.d.ts

@@ -90,6 +90,7 @@ export type AgGridColumnType<RecordType = any, ExtraValueType = 'text', ValueTyp
     minWidth?: number;
     maxWidth?: number;
     colSpan?: ColDef<RecordType>['colSpan'];
+    spanRows?: ColDef<RecordType>['spanRows'];
     /**
      * 为当前单元格添加类名
      * @returns

package/es/src/ag-grid/style/custom-header.d.ts

@@ -1,5 +1,5 @@
 import { GenStyleFunc } from '../../design-token/interface';
-import { Ref } from 'vue';
+import { ComputedRef } from 'vue';
 export declare const genAgGridCustomHeaderCellStyle: GenStyleFunc;
-declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/ag-grid/style/editable.d.ts

@@ -1,5 +1,5 @@
 import { GenStyleFunc } from '../../design-token/interface';
-import { Ref } from 'vue';
+import { ComputedRef } from 'vue';
 export declare const genEditableAgGridStyle: GenStyleFunc;
-declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/ag-grid/style/index.d.ts

@@ -1,5 +1,32 @@
 import { GenStyleFunc } from '../../design-token/interface';
-import { Ref } from 'vue';
-export declare const genAgGridStyle: GenStyleFunc;
-declare const _default: (prefixCls: string) => Ref<string | undefined, string | undefined>;
+import { ComputedRef } from 'vue';
+export type AgGridToken = {
+    /**
+     * 卡片模式下表单容器的下边距尺寸
+     */
+    agGridSearchFormWrapperMarginBlockEnd: number;
+    /**
+     * 小尺寸表格单元格垂直边距
+     */
+    agGridCellPaddingBlockMini: number;
+    /**
+     * 中等尺寸单元格垂直边距
+     */
+    agGridCellPaddingBlockMedium: number;
+    /**
+     * 多行文本时最多显示的行
+     */
+    agGridLineClamp: number;
+    /**
+     * 单元格省略时提示框最大宽度
+     */
+    agGridEllipsisTooltipMaxWidth: number;
+    /**
+     * 表格省略时提示框内边距
+     */
+    agGridEllipsisTooltipPadding: number | string;
+};
+export declare const defaultToken: AgGridToken;
+export declare const genAgGridStyle: GenStyleFunc<AgGridToken>;
+declare const _default: (prefixCls: string) => ComputedRef<string>;
 export default _default;

package/es/src/ag-grid/style/index.mjs

@@ -1,38 +1,45 @@
 import { genSettingTriggerBtnStyle as l } from "../../ap-table/style/index.mjs";
-import { multiRows as a, resetScrollbar as t } from "../../style/index.mjs";
+import { multiRows as a, resetScrollbar as d } from "../../style/index.mjs";
 import { genComponentStyleHook as r } from "../../utils/cssinjs/index.mjs";
-const n = (e) => {
-  const { componentCls: i } = e;
+const t = {
+  agGridSearchFormWrapperMarginBlockEnd: 10,
+  agGridCellPaddingBlockMedium: 9,
+  agGridCellPaddingBlockMini: 6,
+  agGridLineClamp: 2,
+  agGridEllipsisTooltipMaxWidth: 300,
+  agGridEllipsisTooltipPadding: "6px 8px"
+}, n = (i) => {
+  const { componentCls: e } = i;
   return {
-    [i]: {
-      ...t(e),
+    [e]: {
+      ...d(i),
       "&-adaptive": {
         height: "100%",
         display: "flex",
         flexDirection: "column",
-        [`${i}-grid-wrapper`]: {
+        [`${e}-grid-wrapper`]: {
           minHeight: 0,
           flex: 1,
           position: "relative"
         }
       },
       "&-wrapper": {
-        padding: e.space,
-        paddingBlockEnd: e.spaceLG,
+        padding: i.space,
+        paddingBlockEnd: i.spaceLG,
         backgroundColor: "#fff",
         // 如果渲染了分页器，则取消容器的底部边距，防止双重边距
         "&:has(ul.ant-pagination)": {
           paddingBottom: 0
         }
       },
-      [`${i}__search-wrapper`]: {
-        padding: e.space,
+      [`${e}__search-wrapper`]: {
+        padding: i.space,
         paddingBlockEnd: 0,
         backgroundColor: "#fff",
-        borderRadius: e.borderRadius,
-        marginBlockEnd: "10px"
+        borderRadius: i.borderRadius,
+        marginBlockEnd: i.agGridSearchFormWrapperMarginBlockEnd
       },
-      [`${i}__table-wrapper`]: {
+      [`${e}__table-wrapper`]: {
         flex: 1,
         minHeight: 0,
         maxHeight: "100%",
@@ -40,17 +47,17 @@ const n = (e) => {
         display: "flex",
         flexDirection: "column"
       },
-      [`${i}__table-wrapper-card`]: {
-        padding: e.space,
-        paddingBlockEnd: e.spaceLG,
-        borderRadius: e.borderRadius,
+      [`${e}__table-wrapper-card`]: {
+        padding: i.space,
+        paddingBlockEnd: i.spaceLG,
+        borderRadius: i.borderRadius,
         backgroundColor: "#fff",
         "&:has(ul.ant-pagination)": {
           paddingBlockEnd: 0
         }
       },
-      [`${i}-pagination`]: {
-        marginBlock: e.space,
+      [`${e}-pagination`]: {
+        marginBlock: i.space,
         display: "flex",
         flexWrap: "wrap",
         alignItems: "center",
@@ -58,12 +65,12 @@ const n = (e) => {
         ".ant-pagination-total-text": {
           flex: 1,
           height: "unset",
-          lineHeight: e.lineHeight,
+          lineHeight: i.lineHeight,
           display: "flex",
           alignItems: "center"
         }
       },
-      [`${i}__table-loading-wrapper`]: {
+      [`${e}__table-loading-wrapper`]: {
         position: "absolute",
         top: 0,
         left: 0,
@@ -75,38 +82,38 @@ const n = (e) => {
         alignItems: "center",
         backgroundColor: "hsla(0,0%,100%,.5)"
       },
-      [`${i}-table-header`]: {
+      [`${e}-table-header`]: {
         "&__title": {
-          ...a(e),
+          ...a(i),
           fontWeight: 700,
-          textAlign: "right",
+          // textAlign: 'right',
           "&--single": {
             flex: "unset"
           }
         }
       },
-      ...l(e),
-      [`${i}__cell--left`]: {
+      ...l(i),
+      [`${e}__cell--left`]: {
         textAlign: "left"
       },
-      [`${i}__cell--center`]: {
+      [`${e}__cell--center`]: {
         textAlign: "center"
       },
-      [`${i}__cell--right`]: {
+      [`${e}__cell--right`]: {
         textAlign: "right"
       },
-      [`${i}__cell--multiline`]: {
+      [`${e}__cell--multiline`]: {
         ".ag-cell-value": {
           display: "-webkit-box",
           "-webkit-box-orient": "vertical",
-          "-webkit-line-clamp": "var(--ag-grid-line-clamp)",
+          "-webkit-line-clamp": i.agGridLineClamp,
           wordBreak: "break-all"
         }
       },
       "&-size-mini": {
         ".ag-cell": {
-          lineHeight: e.lineHeight,
-          paddingBlock: "6px",
+          lineHeight: i.lineHeight,
+          paddingBlock: i.agGridCellPaddingBlockMini,
           width: "100%",
           display: "flex",
           alignItems: "center",
@@ -117,8 +124,8 @@ const n = (e) => {
       },
       "&-size-medium": {
         ".ag-cell": {
-          lineHeight: e.lineHeight,
-          paddingBlock: "9px",
+          lineHeight: i.lineHeight,
+          paddingBlock: i.agGridCellPaddingBlockMedium,
           display: "flex",
           alignItems: "center",
           "& > div": {
@@ -126,13 +133,13 @@ const n = (e) => {
           }
         }
       },
-      [`${i}__tooltip`]: {
-        fontSize: e.fontSize,
-        maxWidth: "300px",
+      [`${e}__tooltip`]: {
+        fontSize: i.fontSize,
+        maxWidth: i.agGridEllipsisTooltipMaxWidth,
         wordBreak: "break-all",
         backgroundColor: "#fff",
-        padding: "6px  8px",
-        borderRadius: "4px",
+        padding: i.agGridEllipsisTooltipPadding,
+        borderRadius: i.borderRadius,
         boxShadow: "0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12),0 9px 28px 8px rgba(0, 0, 0, 0.05)"
       },
       ".ag-unselectable": {
@@ -144,10 +151,16 @@ const n = (e) => {
       }
     }
   };
-}, o = r("AgGrid", (e) => [
-  n(e)
-]);
+}, s = r(
+  "AgGrid",
+  (i) => [n(i)],
+  t,
+  {
+    skipUnit: ["agGridLineClamp"]
+  }
+);
 export {
-  o as default,
+  s as default,
+  t as defaultToken,
   n as genAgGridStyle
 };

package/es/src/ag-grid/theme.mjs

@@ -1,10 +1,11 @@
-import { useToken as n } from "@aplus-frontend/antdv/es/theme/internal";
+import { useToken as l } from "@aplus-frontend/antdv/es/theme/internal";
 import { themeQuartz as c } from "ag-grid-community";
-import { computed as l } from "vue";
-const h = (o, r, a) => {
-  const [, t] = n();
-  return l(() => {
-    const d = o.value === "mini", e = t.value;
+import { computed as i } from "vue";
+import { useToken as u } from "../config-provider/hooks/use-token.mjs";
+const B = (r, a, t) => {
+  const [, n] = l(), { token: o } = u();
+  return i(() => {
+    const d = r.value === "mini", e = n.value;
     return c.withParams({
       headerHeight: "36px",
       headerFontSize: "12px",
@@ -15,17 +16,17 @@ const h = (o, r, a) => {
       headerRowBorder: { color: e.colorBorderSecondary },
       selectedRowBackgroundColor: e.controlItemBgActive,
       checkboxCheckedBackgroundColor: e.colorPrimary,
-      rowHoverColor: "var(--ap-color-bg-2)",
-      headerBackgroundColor: "var(--ap-table-header-bg)",
+      rowHoverColor: o.value.colorBg2,
+      headerBackgroundColor: o.value.tableHeaderBg,
       headerColumnResizeHandleHeight: "50%",
       headerColumnResizeHandleWidth: "1px",
       wrapperBorderRadius: "4px",
-      ...a.value || {},
-      rowHeight: r.value,
+      ...t.value || {},
+      rowHeight: a.value,
       spacing: d ? "5px" : "6.5px"
     });
   });
 };
 export {
-  h as useTheme
+  B as useTheme
 };

package/es/src/ap-action/item/index.vue2.mjs

@@ -1,10 +1,10 @@
-import { defineComponent as h, useSlots as A, createPropsRestProxy as F, ref as N, computed as u, unref as n, renderSlot as y, createElementBlock as f, createCommentVNode as a, openBlock as t, mergeProps as g, createBlock as m, normalizeClass as S, createVNode as I, withCtx as L, resolveDynamicComponent as k, isVNode as P, toDisplayString as V } from "vue";
+import { defineComponent as h, useSlots as A, createPropsRestProxy as F, ref as N, computed as u, unref as n, renderSlot as y, createElementBlock as f, createCommentVNode as a, openBlock as t, mergeProps as g, createBlock as m, normalizeClass as S, createVNode as V, withCtx as I, createElementVNode as L, resolveDynamicComponent as k, isVNode as P, toDisplayString as $ } from "vue";
 import "../../config-provider/index.mjs";
-import $ from "@aplus-frontend/antdv/es/button/LoadingIcon";
-import { Tooltip as w } from "@aplus-frontend/antdv";
-import D from "../style/index.mjs";
+import w from "@aplus-frontend/antdv/es/button/LoadingIcon";
+import { Tooltip as D } from "@aplus-frontend/antdv";
+import E from "../style/index.mjs";
 import { useNamespace as T } from "../../config-provider/hooks/use-namespace.mjs";
-const x = { key: 1 }, J = /* @__PURE__ */ h({
+const x = { key: 1 }, K = /* @__PURE__ */ h({
   name: "ApActionItem",
   __name: "index",
   props: {
@@ -20,7 +20,7 @@ const x = { key: 1 }, J = /* @__PURE__ */ h({
     tooltip: { default: () => ({}) }
   },
   setup(o) {
-    const s = A(), r = F(o, ["color", "disabled", "visible", "loading", "iconFirst", "icon", "tooltip"]), { b: v, m: l, e: b } = T("action-item"), c = N(!1), d = u(() => o.iconFirst && (o.icon || s.icon)), C = D("action");
+    const s = A(), r = F(o, ["color", "disabled", "visible", "loading", "iconFirst", "icon", "tooltip"]), { b: v, m: l, e: b } = T("action-item"), c = N(!1), d = u(() => o.iconFirst && !!(o.icon || s.icon)), C = E("action-item");
     function p(e) {
       n(i) || o.disabled || (r.onClick?.(e), r.onAction && (c.value = !0, r.onAction(e).finally(() => c.value = !1)));
     }
@@ -41,7 +41,7 @@ const x = { key: 1 }, J = /* @__PURE__ */ h({
         class: B.value,
         onClick: p
       }), [
-        i.value ? (t(), m(n($), {
+        i.value ? (t(), m(n(w), {
           key: 0,
           "prefix-cls": "btn",
           "exist-icon": !1,
@@ -51,22 +51,24 @@ const x = { key: 1 }, J = /* @__PURE__ */ h({
           key: 1,
           class: S(n(b)("icon-wrapper"))
         }, [
-          I(n(w), g({
+          V(n(D), g({
             title: d.value ? e.text : null
           }, e.tooltip), {
-            default: L(() => [
-              (t(), m(k(e.icon || s.icon)))
+            default: I(() => [
+              L("span", null, [
+                (t(), m(k(e.icon || s.icon)))
+              ])
             ]),
             _: 1
           }, 16, ["title"])
         ], 2)) : a("", !0),
         d.value ? a("", !0) : y(e.$slots, "default", { key: 2 }, () => [
-          P(e.text) ? (t(), m(k(e.text), { key: 0 })) : (t(), f("span", x, V(e.text || ""), 1))
+          P(e.text) ? (t(), m(k(e.text), { key: 0 })) : (t(), f("span", x, $(e.text || ""), 1))
         ])
       ], 16)) : a("", !0)
     ]);
   }
 });
 export {
-  J as default
+  K as default
 };