@aplus-frontend/ui 7.15.8 → 7.17.0

package/es/src/ag-grid/components/header-cell/index.vue2.mjs

@@ -1,67 +1,82 @@
-import { defineComponent as B, computed as d, createElementBlock as f, openBlock as l, normalizeClass as r, unref as e, createBlock as _, createCommentVNode as D, resolveDynamicComponent as O, createVNode as g } from "vue";
-import { CaretUpOutlined as V, CaretDownOutlined as j } from "@ant-design/icons-vue";
-import { useToken as z } from "@aplus-frontend/antdv/es/theme/internal";
-import { useInjectSorter as A } from "../../context.mjs";
-import { getTableTitle as E } from "../../../ap-table/utils.mjs";
+import { defineComponent as L, computed as l, createElementBlock as u, openBlock as o, normalizeClass as a, unref as e, createVNode as m, createCommentVNode as h, withModifiers as R, createBlock as S } from "vue";
+import { CaretUpOutlined as V, CaretDownOutlined as _, CaretLeftOutlined as z, CaretRightOutlined as A } from "@ant-design/icons-vue";
+import { useToken as M } from "@aplus-frontend/antdv/es/theme/internal";
+import { useInjectSorter as U, useInjectExpandable as $ } from "../../context.mjs";
+import { getTableTitle as q } from "../../../ap-table/utils.mjs";
 import "../../../config-provider/index.mjs";
-import U from "../../style/custom-header.mjs";
-import { useNamespace as C } from "../../../config-provider/hooks/use-namespace.mjs";
-const P = /* @__PURE__ */ B({
+import "../../../render/index.mjs";
+import F from "../../style/custom-header.mjs";
+import { useNamespace as k } from "../../../config-provider/hooks/use-namespace.mjs";
+import H from "../../../render/render.mjs";
+const oe = /* @__PURE__ */ L({
   __name: "index",
   props: {
     params: {}
   },
-  setup(S) {
-    const o = S, { b: v, e: a } = C("ag-custom-header"), { be: b, bem: h } = C("ag-grid"), k = U("ag-custom-header"), [, I] = z(), { sorter: c, setSorter: T } = A(), n = d(() => o.params.column.sorter);
-    function y(t) {
+  setup(v) {
+    const r = v, { b, e: n } = k("ag-custom-header"), { be: x, bem: I } = k("ag-grid"), y = F("ag-custom-header"), [, T] = M(), { sorter: p, setSorter: w } = U(), { expandable: E } = $(), s = l(() => r.params.column.sorter), G = l(() => r.params.columnGroup?.getLeafColumns?.()?.some((t) => t.getColDef().columnGroupShow)), i = l(() => {
+      const t = r.params.columnGroup?.getGroupId?.();
+      return t ? E.value[t] ?? !1 : !1;
+    });
+    function N(t) {
       return t ? t === "asc" ? "desc" : null : "asc";
     }
-    const m = d(() => o.params?.column?.getColId?.());
-    function x() {
-      if (!n.value)
+    const d = l(() => r.params?.column?.getColId?.());
+    function O() {
+      if (!s.value)
         return;
-      const s = o.params.column.getColId(), N = o.params.column.getSort(), u = y(N), p = o.params.api, w = p.getColumnState().map((i) => ({
-        ...i,
-        sort: i.colId === s ? u : null
+      const c = r.params.column.getColId(), j = r.params.column.getSort(), f = N(j), g = r.params.api, D = g.getColumnState().map((C) => ({
+        ...C,
+        sort: C.colId === c ? f : null
       }));
-      p.applyColumnState({
-        state: w
-      }), T({ [s]: u });
+      g.applyColumnState({
+        state: D
+      }), w({ [c]: f });
     }
-    return (t, s) => (l(), f("div", {
-      class: r([
-        e(v)(),
-        { sortable: n.value },
+    function B() {
+      r.params.setExpanded(!i.value);
+    }
+    return (t, c) => (o(), u("div", {
+      class: a([
+        e(b)(),
+        { sortable: s.value },
         `align-${t.params.column.align || "left"}`,
-        e(k)
+        e(y)
       ]),
-      onClick: x
+      onClick: O
     }, [
-      (l(), _(O(
-        e(E)(
+      m(e(H), {
+        renderer: () => e(q)(
           t.params.column,
           [
-            e(b)("table-header", "title"),
-            t.params.column.tooltip ? "" : e(h)("table-header", "title", "single")
+            e(x)("table-header", "title"),
+            t.params.column.tooltip ? "" : e(I)("table-header", "title", "single")
           ],
-          void 0,
-          e(I).colorTextTertiary
+          t.params.headerCell,
+          e(T).colorTextTertiary
         )
-      ))),
-      n.value ? (l(), f("span", {
+      }, null, 8, ["renderer"]),
+      s.value ? (o(), u("span", {
         key: 0,
-        class: r(e(a)("sort-wrapper"))
+        class: a(e(n)("sort-wrapper"))
       }, [
-        g(e(V), {
-          class: r({ [e(a)("sorter-up")]: !0, active: e(c)[m.value] === "asc" })
+        m(e(V), {
+          class: a({ [e(n)("sorter-up")]: !0, active: e(p)[d.value] === "asc" })
         }, null, 8, ["class"]),
-        g(e(j), {
-          class: r({ [e(a)("sorter-down")]: !0, active: e(c)[m.value] === "desc" })
+        m(e(_), {
+          class: a({ [e(n)("sorter-down")]: !0, active: e(p)[d.value] === "desc" })
         }, null, 8, ["class"])
-      ], 2)) : D("", !0)
+      ], 2)) : h("", !0),
+      G.value ? (o(), u("span", {
+        key: 1,
+        class: a(e(n)("expand-wrapper")),
+        onClick: R(B, ["stop"])
+      }, [
+        i.value ? (o(), S(e(z), { key: 0 })) : (o(), S(e(A), { key: 1 }))
+      ], 2)) : h("", !0)
     ], 2));
   }
 });
 export {
-  P as default
+  oe as default
 };

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

@@ -12,7 +12,15 @@ type AgGridSorterContextProps = {
      */
     setSorter: (nextSorter: Recordable) => void;
 };
+type AgGirdColumnExpandedContextProps = {
+    expandable: Ref<Recordable<boolean>>;
+};
+export declare const AgGridExpandableContextKey: InjectionKey<AgGirdColumnExpandedContextProps>;
 export declare const AgGridSorterContextKey: InjectionKey<AgGridSorterContextProps>;
+export declare function useProvideExpandable(state: AgGirdColumnExpandedContextProps): void;
+export declare function useInjectExpandable(): {
+    expandable: Ref<Recordable<boolean>, Recordable<boolean>>;
+};
 export declare function useProvideSorter(state: AgGridSorterContextProps): void;
 export declare function useInjectSorter(): AgGridSorterContextProps;
 export {};

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

@@ -1,17 +1,28 @@
-import { provide as t, inject as o, ref as n } from "vue";
-const r = /* @__PURE__ */ Symbol("formContextKey");
+import { provide as r, inject as t, ref as n } from "vue";
+const o = /* @__PURE__ */ Symbol("agGridExpandableKey"), i = /* @__PURE__ */ Symbol("agGridSorterContextKey");
+function d(e) {
+  r(o, e);
+}
+function u() {
+  return t(o, {
+    expandable: n({})
+  });
+}
 function c(e) {
-  t(r, e);
+  r(i, e);
 }
-function f() {
-  return o(r, {
+function x() {
+  return t(i, {
     sorter: n({}),
     setSorter: () => {
     }
   });
 }
 export {
-  r as AgGridSorterContextKey,
-  f as useInjectSorter,
+  o as AgGridExpandableContextKey,
+  i as AgGridSorterContextKey,
+  u as useInjectExpandable,
+  x as useInjectSorter,
+  d as useProvideExpandable,
   c as useProvideSorter
 };

package/es/src/ag-grid/hooks/use-columns-def.d.ts

@@ -1,13 +1,13 @@
 import { CellClassFunc, ColDef, ColGroupDef } from 'ag-grid-community';
 import { Ref, ComputedRef } from 'vue';
-import { AgGridColumnType, AgGridProps } from '../interface';
+import { AgGridColumnType, AgGridProps, AgGridSlots } from '../interface';
 /**
  * 维护AgGrid列配置
  * @param shownColumns
  * @param props
  * @returns
  */
-export declare const useColumnsDef: <RecordType>(columns: Ref<AgGridColumnType<RecordType>[]>, props: AgGridProps<RecordType>, customCellClass: (callback: CellClassFunc) => CellClassFunc) => {
+export declare const useColumnsDef: <RecordType>(columns: Ref<AgGridColumnType<RecordType>[]>, props: AgGridProps<RecordType>, customCellClass: (callback: CellClassFunc) => CellClassFunc, headerCell?: AgGridSlots<RecordType>["headerCell"]) => {
     columnDefs: ComputedRef<(ColDef<any, any> | ColGroupDef<any>)[]>;
     defaultColDef: ComputedRef<ColDef<any, any>>;
     gridWrapperRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;

package/es/src/ag-grid/hooks/use-columns-def.mjs

@@ -1,36 +1,36 @@
-import { isNumber as u, isFunction as c } from "lodash-unified";
-import { ref as S, unref as x, computed as y } from "vue";
-import { dataIndexToField as D } from "../../ap-grid/utils/col.mjs";
-import { getTableRenderProps as b, objectToString as P } from "../../ap-table/utils.mjs";
+import { isNumber as u, isFunction as b } from "lodash-unified";
+import { ref as D, unref as C, computed as h } from "vue";
+import { dataIndexToField as P } from "../../ap-grid/utils/col.mjs";
+import { getTableRenderProps as m, objectToString as G } from "../../ap-table/utils.mjs";
 import "../../config-provider/index.mjs";
 import "../../utils/index.mjs";
 import "../components/body-cell/index.vue.mjs";
 import "../components/header-cell/index.vue.mjs";
 import "../components/tooltip/index.vue.mjs";
-import { rendererMap as v } from "../renderer/index.mjs";
+import { rendererMap as T } from "../renderer/index.mjs";
 import { useGlobalConfig as I } from "../../config-provider/hooks/use-global-config.mjs";
 import { useNamespace as _ } from "../../config-provider/hooks/use-namespace.mjs";
-import G from "../components/body-cell/index.vue2.mjs";
-import W from "../components/tooltip/index.vue2.mjs";
-import { isDef as z } from "../../utils/is.mjs";
-import h from "../components/header-cell/index.vue2.mjs";
-function F(t) {
+import W from "../components/body-cell/index.vue2.mjs";
+import z from "../components/tooltip/index.vue2.mjs";
+import { isDef as F } from "../../utils/is.mjs";
+import c from "../components/header-cell/index.vue2.mjs";
+function M(t) {
   return u(t) && t > 1;
 }
-function M(t, a) {
-  if (a.bodyCellTooltip)
-    return c(a.bodyCellTooltip) ? a.bodyCellTooltip(t.value, t.data) : a.bodyCellTooltip;
-  if (a.renderText)
-    return a.renderText({
+function V(t, i) {
+  if (i.bodyCellTooltip)
+    return b(i.bodyCellTooltip) ? i.bodyCellTooltip(t.value, t.data) : i.bodyCellTooltip;
+  if (i.renderText)
+    return i.renderText({
       value: t.value,
       record: t.data,
-      column: a,
+      column: i,
       text: t.value
     });
-  const d = a.valueType || "text", p = v[d];
-  if (p) {
-    const f = b(
-      { ...a, valueType: d },
+  const p = i.valueType || "text", d = T[p];
+  if (d) {
+    const f = m(
+      { ...i, valueType: p },
       {
         value: t.value,
         text: t.value,
@@ -40,22 +40,22 @@ function M(t, a) {
         pinned: t.node?.rowPinned
       }
     );
-    return p(f);
+    return d(f);
   }
-  return P(t.value);
+  return G(t.value);
 }
-const Y = (t, a, d) => {
-  const p = I("valueTypeMap"), C = S(), { em: f } = _("ag-grid"), m = (r) => {
-    const i = {
-      cellRenderer: G,
+const Z = (t, i, p, d) => {
+  const v = I("valueTypeMap"), f = D(), { em: y } = _("ag-grid"), w = (r) => {
+    const a = {
+      cellRenderer: W,
       cellRendererParams: {
         column: r,
-        extraValueType: x(p),
-        rowKey: a.rowKey
+        extraValueType: C(v),
+        rowKey: i.rowKey
       }
     };
     if (r.customRender)
-      return i;
+      return a;
     if (r.renderText)
       return {
         valueFormatter: (o) => r.renderText({
@@ -65,10 +65,10 @@ const Y = (t, a, d) => {
           text: o.value
         })
       };
-    const s = r.valueType || "text", e = v[s];
+    const s = r.valueType || "text", e = T[s];
     return e ? {
       valueFormatter: (o) => {
-        const l = b(
+        const l = m(
           { ...r, valueType: s },
           {
             value: o.value,
@@ -81,26 +81,27 @@ const Y = (t, a, d) => {
         );
         return e(l);
       }
-    } : i;
-  }, w = (r) => {
-    const i = r.valueType || "text", s = v[i], e = {}, o = r.bodyCellTooltip || !r.customRender && s && (r.ellipsis === !0 || r.ellipsis === "tooltip" || u(r.ellipsis)), l = u(r.ellipsis) && r.ellipsis > 1, n = u(r.ellipsis) ? r.ellipsis : 1;
-    return e.tooltipValueGetter = o ? (T) => M(T, r) : void 0, e.wrapText = !r.ellipsis || l, e.cellStyle = {
+    } : a;
+  }, g = (r) => {
+    const a = r.valueType || "text", s = T[a], e = {}, o = r.bodyCellTooltip || !r.customRender && s && (r.ellipsis === !0 || r.ellipsis === "tooltip" || u(r.ellipsis)), l = u(r.ellipsis) && r.ellipsis > 1, n = u(r.ellipsis) ? r.ellipsis : 1;
+    return e.tooltipValueGetter = o ? (x) => V(x, r) : void 0, e.wrapText = !r.ellipsis || l, e.cellStyle = {
       "--ag-grid-line-clamp": n
-    }, e.tooltipComponent = W, e.tooltipComponentParams = {
+    }, e.tooltipComponent = z, e.tooltipComponentParams = {
       lineClamp: n,
-      gridWrapperRef: C
+      gridWrapperRef: f
     }, e;
-  }, g = y(() => {
-    const r = x(t);
-    function i(s) {
+  }, S = h(() => {
+    const r = C(t);
+    function a(s) {
       return s.map((e) => {
         const o = {
-          field: D(e.dataIndex),
-          colId: z(e.key) ? String(e.key) : void 0,
+          field: P(e.dataIndex),
+          colId: F(e.key) ? String(e.key) : void 0,
           sortable: !!e.sorter,
           comparator: e.sorter === !0 ? () => 0 : e.sorter,
           headerComponentParams: {
-            column: e
+            column: e,
+            headerCell: d
           },
           resizable: e.resizable,
           width: e.width,
@@ -108,53 +109,55 @@ const Y = (t, a, d) => {
           maxWidth: e.maxWidth,
           suppressKeyboardEvent: () => !0,
           // 避免单元格内元素事件被劫持
-          flex: e.width ? void 0 : 1,
+          flex: e.width ? void 0 : e.flex ?? 1,
           // 如果没有设置确切的宽度，则设置为可自由伸缩列
           pinned: e.fixed || null,
           // undefined to null
           colSpan: e.colSpan,
           spanRows: e.spanRows,
-          cellClass: d((l) => {
-            const n = e.cellClass || "", T = c(n) ? n(l.data, l.node) : n;
+          cellClass: p((l) => {
+            const n = e.cellClass || "", x = b(n) ? n(l.data, l.node) : n;
             return [
-              `${f("cell", e.align || "left")}`,
-              F(e.ellipsis) ? f("cell", "multiline") : null,
-              T
+              `${y("cell", e.align || "left")}`,
+              M(e.ellipsis) ? y("cell", "multiline") : null,
+              x
             ].flat().filter(Boolean);
           }),
           cellStyle: e.cellStyle,
           headerStyle: e.headerStyle,
           headerClass: e.headerClass,
+          columnGroupShow: e.columnGroupShow,
           autoHeight: !0,
           // 设置自动计算高度以自适应多行换行的场景
-          ...w(e),
-          ...m(e)
+          ...g(e),
+          ...w(e)
         };
         return e.children?.length ? {
           ...o,
-          headerGroupComponent: h,
+          headerGroupComponent: c,
           headerGroupComponentParams: {
-            column: e
+            column: e,
+            headerCell: d
           },
-          children: i(e.children)
+          children: a(e.children)
         } : o;
       });
     }
-    return i(r);
-  }), R = y(
+    return a(r);
+  }), R = h(
     () => ({
-      headerComponent: h,
-      resizable: a.columnResizable,
+      headerComponent: c,
+      resizable: i.columnResizable,
       suppressMovable: !0,
       cellDataType: !1
     })
   );
   return {
-    columnDefs: g,
+    columnDefs: S,
     defaultColDef: R,
-    gridWrapperRef: C
+    gridWrapperRef: f
   };
 };
 export {
-  Y as useColumnsDef
+  Z as useColumnsDef
 };

package/es/src/ag-grid/hooks/use-columns.mjs

@@ -1,51 +1,60 @@
-import { ref as c, computed as s, watch as y } from "vue";
-import { getStringKey as i } from "../utils.mjs";
-const g = (r) => {
-  const o = c([]), u = c([]);
-  function m() {
-    return r.columns?.filter((e) => !e.hideInTable) || [];
+import { ref as c, computed as s, watch as h } from "vue";
+import { getStringKey as d } from "../utils.mjs";
+const C = (o) => {
+  const t = c([]), u = c([]);
+  function l(n = []) {
+    return n.filter((e) => !e.hideInTable).map((e) => {
+      if (e.children?.length) {
+        const r = l(e.children);
+        return r?.length ? {
+          ...e,
+          children: r
+        } : null;
+      }
+      return e;
+    }).filter(Boolean);
   }
-  function d(e) {
-    return o.value.find((n) => i(n.key) === e);
+  function f(n) {
+    return t.value.find((e) => d(e.key) === n);
   }
-  const f = s(
-    () => o.value.map((e) => i(e.key)).filter(Boolean)
+  const m = s(
+    () => t.value.map((n) => d(n.key)).filter(Boolean)
   );
-  y(
-    () => r.columns,
+  h(
+    () => o.columns,
     () => {
-      const e = m();
-      o.value = e, u.value = e, r.onShownColumnsChange?.(e);
+      const n = l(o.columns);
+      t.value = n, u.value = n, o.onShownColumnsChange?.(n);
     },
     {
       deep: !0,
       immediate: !0
     }
   );
-  function l(e) {
-    for (const n of e)
-      if (n.children) {
-        const t = l(n.children);
-        if (t)
-          return t;
-      } else if (n.defaultSortOrder) {
-        const t = n.field ?? n.dataIndex ?? n.key;
+  function i(n) {
+    for (const e of n)
+      if (e.children) {
+        const r = i(e.children);
+        if (r)
+          return r;
+      } else if (e.defaultSortOrder) {
+        const r = e.field ?? e.dataIndex ?? e.key;
         return {
-          colKey: n.key,
-          field: t,
-          order: n.defaultSortOrder
+          colKey: e.key,
+          field: r,
+          order: e.defaultSortOrder
         };
       }
   }
-  const a = s(() => l(o.value));
+  const a = s(() => i(t.value));
   return {
-    columns: o,
+    columns: t,
     shownColumns: u,
-    columnKeys: f,
-    getTargetColumnByKey: d,
+    columnKeys: m,
+    getTargetColumnByKey: f,
     defaultSortOrder: a
   };
 };
 export {
-  g as useColumns
+  C as useColumns
 };