@aplus-frontend/ui 0.6.0-beta.2 → 0.6.0-beta.21

package/es/src/ap-grid/editable/index.vue.mjs

@@ -1,16 +1,16 @@
-import { defineComponent as U, useSlots as $, ref as w, watch as x, unref as u, createBlock as q, openBlock as J, withCtx as h, createVNode as v, mergeProps as Q, createSlots as X, renderList as Y, renderSlot as Z, normalizeProps as M, guardReactiveProps as ee } from "vue";
+import { defineComponent as $, useSlots as q, ref as v, watch as x, unref as u, createBlock as J, openBlock as Q, withCtx as h, createVNode as b, mergeProps as X, createSlots as Y, renderList as Z, renderSlot as M, normalizeProps as ee, guardReactiveProps as te } from "vue";
 import { ApForm as y } from "../../ap-form/index.mjs";
-import { isEqual as ae, isArray as b, isUndefined as te, isNumber as g, cloneDeep as oe, omit as le } from "lodash-unified";
+import { isEqual as ae, isArray as g, isUndefined as oe, isNumber as C, cloneDeep as le, omit as ne } from "lodash-unified";
 import "../../config-provider/index.mjs";
 import "../../hooks/index.mjs";
 import { isDef as R } from "../../utils/index.mjs";
-import { useGetEditableColumns as ne } from "../hooks/use-editable-columns.mjs";
+import { useGetEditableColumns as se } from "../hooks/use-editable-columns.mjs";
 import "../index.vue2.mjs";
-import { useNamespace as se } from "../../config-provider/hooks/use-namespace.mjs";
-import { useControllableValue as re } from "../../hooks/useControllableValue.mjs";
-import { useGlobalConfig as ue } from "../../config-provider/hooks/use-global-config.mjs";
-import ie from "../index.vue.mjs";
-const be = /* @__PURE__ */ U({
+import { useNamespace as re } from "../../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as ue } from "../../hooks/useControllableValue.mjs";
+import { useGlobalConfig as ie } from "../../config-provider/hooks/use-global-config.mjs";
+import fe from "../index.vue.mjs";
+const Re = /* @__PURE__ */ $({
   name: "EditableGrid",
   __name: "index",
   props: {
@@ -109,6 +109,9 @@ const be = /* @__PURE__ */ U({
     loadingConfig: {},
     headerCellConfig: {},
     footerCellConfig: {},
+    round: {
+      type: Boolean
+    },
     rowSelection: {
       type: Boolean,
       default: void 0
@@ -143,6 +146,9 @@ const be = /* @__PURE__ */ U({
     },
     expandable: {},
     value: {},
+    rowHighlightable: {
+      type: [Boolean, Function]
+    },
     columns: {},
     defaultValue: {},
     "onUpdate:value": {},
@@ -155,150 +161,158 @@ const be = /* @__PURE__ */ U({
   },
   emits: ["update:value"],
   setup(B, {
-    expose: S,
-    emit: F
+    expose: F,
+    emit: S
   }) {
-    const N = $(), t = B, {
+    const N = q(), o = B, {
       b: V
-    } = se("editable-grid"), _ = F, C = w(), {
+    } = re("editable-grid"), _ = S, w = v(), {
       value: m,
-      updateValue: k
-    } = re(t, _), f = w(), L = ue("valueTypeMap"), c = y.useWatch(t.name, f);
+      updateValue: L
+    } = ue(o, _), i = v(), k = ie("valueTypeMap"), c = y.useWatch(o.name, i);
     x(() => c.value, (e) => {
-      var a;
-      k(e), (a = t.onChange) == null || a.call(t, e);
+      var t;
+      L(e), (t = o.onChange) == null || t.call(o, e);
     }, {
       deep: !0,
       flush: "post"
     }), x(m, (e) => {
-      var a;
-      e !== u(c) && (ae(e, u(c)) || (a = f.value) == null || a.setFieldValue(t.name, e));
+      var t;
+      e !== u(c) && (ae(e, u(c)) || (t = i.value) == null || t.setFieldValue(o.name, e));
     }, {
       deep: !0
     });
-    const E = ne(t, L);
-    function D() {
+    const D = se(o, k);
+    function E() {
       var e;
-      (e = f.value) == null || e.resetFields();
+      (e = i.value) == null || e.resetFields();
     }
     function T(e) {
-      return e ? (b(e) ? e : [e]).map((o) => b(o) ? [t.name, ...o] : [t.name, o]) : void 0;
+      return e ? (g(e) ? e : [e]).map((a) => g(a) ? [o.name, ...a] : [o.name, a]) : void 0;
     }
-    async function j(e, a) {
+    async function j(e, t) {
       var l;
-      const o = await ((l = f.value) == null ? void 0 : l.validateFields(T(e), a));
-      return o == null ? void 0 : o[t.name];
+      const a = await ((l = i.value) == null ? void 0 : l.validateFields(T(e), t));
+      return a == null ? void 0 : a[o.name];
     }
-    function O(e, a) {
+    function O(e, t) {
       var s, n, r;
-      const o = ((s = u(m)) == null ? void 0 : s.length) || 0;
-      if (R(t.maxLength) && o >= t.maxLength)
+      const a = ((s = u(m)) == null ? void 0 : s.length) || 0;
+      if (R(o.maxLength) && a >= o.maxLength)
         return;
       const l = {
         ...e || {}
       };
-      (r = (n = f.value) == null ? void 0 : n.setFieldValue) == null || r.call(n, t.name, l, !0, (d, i) => {
-        if (!d[i]) {
-          d[i] = [l];
+      (r = (n = i.value) == null ? void 0 : n.setFieldValue) == null || r.call(n, o.name, l, !0, (d, f) => {
+        if (!d[f]) {
+          d[f] = [l];
           return;
         }
-        te(a) ? d[i].push(l) : d[i].splice(a, 0, l);
+        oe(t) ? d[f].push(l) : d[f].splice(t, 0, l);
       });
     }
-    function A(e, a = "suffix") {
+    function z(e, t = "suffix") {
       var n, r, d;
-      const o = ((n = u(m)) == null ? void 0 : n.length) || 0, l = g(e) ? e : e.length;
-      if (R(t.maxLength) && o + l > t.maxLength)
+      const a = ((n = u(m)) == null ? void 0 : n.length) || 0, l = C(e) ? e : e.length;
+      if (R(o.maxLength) && a + l > o.maxLength)
         return;
-      const s = g(e) ? new Array(e).fill(0).map(() => ({})) : oe(e);
-      (d = (r = f.value) == null ? void 0 : r.setFieldValue) == null || d.call(r, t.name, s, !0, (i, p) => {
-        if (!i[p]) {
-          i[p] = [...s];
+      const s = C(e) ? new Array(e).fill(0).map(() => ({})) : le(e);
+      (d = (r = i.value) == null ? void 0 : r.setFieldValue) == null || d.call(r, o.name, s, !0, (f, p) => {
+        if (!f[p]) {
+          f[p] = [...s];
           return;
         }
-        a === "suffix" ? i[p].push(...s) : i[p].unshift(...s);
+        t === "suffix" ? f[p].push(...s) : f[p].unshift(...s);
       });
     }
-    function z(e) {
-      var o, l;
-      const a = new Set(g(e) ? [e] : e);
-      (l = (o = f.value) == null ? void 0 : o.setFieldValue) == null || l.call(o, t.name, void 0, !0, (s, n) => {
-        s[n] = s[n].filter((r, d) => !a.has(d));
+    function A(e) {
+      var a, l;
+      const t = new Set(C(e) ? [e] : e);
+      (l = (a = i.value) == null ? void 0 : a.setFieldValue) == null || l.call(a, o.name, void 0, !0, (s, n) => {
+        s[n] = s[n].filter((r, d) => !t.has(d));
       });
     }
-    function I() {
+    function K(e) {
+      var a, l;
+      const t = new Set(g(e) ? e : [e]);
+      t.size !== 0 && ((l = (a = i.value) == null ? void 0 : a.setFieldValue) == null || l.call(a, o.name, void 0, !0, (s, n) => {
+        s[n] = s[n].filter((r) => !t.has(r[o.rowKey]));
+      }));
+    }
+    function H() {
       return u(m);
     }
-    function P(e) {
-      var a;
-      (a = f.value) == null || a.setFieldValue(t.name, e);
+    function I(e) {
+      var t;
+      (t = i.value) == null || t.setFieldValue(o.name, e);
     }
-    function H(e) {
-      var a;
-      return (a = u(m)) == null ? void 0 : a[e];
+    function P(e) {
+      var t;
+      return (t = u(m)) == null ? void 0 : t[e];
     }
-    function K(e, a, o = !0) {
+    function W(e, t, a = !0) {
       var l, s;
-      (s = (l = f.value) == null ? void 0 : l.setFieldValue) == null || s.call(l, t.name, void 0, !0, (n, r) => {
+      (s = (l = i.value) == null ? void 0 : l.setFieldValue) == null || s.call(l, o.name, void 0, !0, (n, r) => {
         if (!(!n[r] || !n[r][e])) {
-          if (!o) {
+          if (!a) {
             const d = Object.keys(n[r][e]);
-            for (const i of d)
-              i !== t.rowKey && delete n[r][e][i];
+            for (const f of d)
+              f !== o.rowKey && delete n[r][e][f];
           }
           Object.assign(n[r][e], {
-            ...a
+            ...t
           });
         }
       });
     }
-    function W(e) {
-      var o;
-      const a = e === "end" ? m.value.length - 1 : e;
-      (o = C.value) == null || o.scrollToRow(a);
+    function G(e) {
+      var a;
+      const t = e === "end" ? m.value.length - 1 : e;
+      (a = w.value) == null || a.scrollToRow(t);
     }
-    function G() {
-      var e, a;
-      (a = (e = f.value) == null ? void 0 : e.setFieldValue) == null || a.call(e, t.name, []);
+    function U() {
+      var e, t;
+      (t = (e = i.value) == null ? void 0 : e.setFieldValue) == null || t.call(e, o.name, []);
     }
-    return S({
-      resetFields: D,
+    return F({
+      resetFields: E,
       validateFields: j,
       add: O,
-      remove: z,
-      getRowData: H,
-      getRowsData: I,
-      setRowData: K,
-      addMultiple: A,
-      scrollTo: W,
-      clear: G,
-      setTableData: P
-    }), (e, a) => (J(), q(u(y), {
+      remove: A,
+      getRowData: P,
+      getRowsData: H,
+      setRowData: W,
+      addMultiple: z,
+      scrollTo: G,
+      clear: U,
+      setTableData: I,
+      removeByKey: K
+    }), (e, t) => (Q(), J(u(y), {
       ref_key: "formRef",
-      ref: f,
+      ref: i,
       "initial-values": {
-        [t.name]: u(m)
+        [o.name]: u(m)
       },
       style: {
         height: "100%"
       }
     }, {
-      default: h(() => [v(u(y).FormItem, {
+      default: h(() => [b(u(y).FormItem, {
         name: e.name,
         "no-style": ""
       }, {
-        default: h(() => [v(ie, Q(u(le)(t, ["name", "value", "onUpdate:value", "maxLength", "onChange", "defaultValue"]), {
+        default: h(() => [b(fe, X(u(ne)(o, ["name", "value", "onUpdate:value", "maxLength", "onChange", "defaultValue"]), {
           ref_key: "tableRef",
-          ref: C,
+          ref: w,
           class: u(V)(),
-          columns: u(E),
+          columns: u(D),
           "data-source": u(m),
           "search-form": !1
-        }), X({
+        }), Y({
           _: 2
-        }, [Y(N, (o, l) => ({
+        }, [Z(N, (a, l) => ({
           name: l,
-          fn: h((s) => [Z(e.$slots, l, M(ee(s || {})))])
+          fn: h((s) => [M(e.$slots, l, ee(te(s || {})))])
         }))]), 1040, ["class", "columns", "data-source"])]),
         _: 3
       }, 8, ["name"])]),
@@ -307,5 +321,5 @@ const be = /* @__PURE__ */ U({
   }
 });
 export {
-  be as default
+  Re as default
 };

package/es/src/ap-grid/hooks/use-editable-columns.mjs

@@ -1,5 +1,5 @@
-import { useSlots as E, computed as R, unref as m } from "vue";
-import { isFunction as T, isArray as s } from "lodash-unified";
+import { useSlots as y, computed as E, unref as m } from "vue";
+import { isFunction as R, isArray as s } from "lodash-unified";
 import { getEditableTableTitle as k, mergeClass as A } from "../../editable-table/utils.mjs";
 import { updateFormProps as q, getFieldProps as v } from "../../ap-table/utils.mjs";
 import "../../config-provider/index.mjs";
@@ -10,8 +10,8 @@ const M = (n, f) => {
   const {
     em: b,
     be: x
-  } = S("editable-grid"), g = E(), [, h] = w();
-  return R(() => {
+  } = S("editable-grid"), g = y(), [, h] = w();
+  return E(() => {
     const l = n.columns;
     if (!l)
       return [];
@@ -19,40 +19,40 @@ const M = (n, f) => {
       return C.map((e) => ({
         ...e,
         children: o(e.children || []),
-        title: k(e, x("table-header", "title"), b("header-cell", "required"), g.headerCell, m(h).colorPrimary),
+        title: k(e, x("table-header", "title"), b("header-cell", "required"), g.headerCell, m(h).colorTextTertiary),
         // tips: 已经处理了title，传递tooltip为undefined不会再内部处理
         tooltip: void 0,
         customRender({
           value: r,
           originalNode: F,
-          ...a
+          ...t
         }) {
-          const i = T(e.editable) ? e.editable(a.text, a.record, a.index) : !!e.editable;
+          const i = R(e.editable) ? e.editable(t.text, t.record, t.index) : !!e.editable;
           let d = F;
           if (i) {
-            const t = q(e, v(e.fieldProps, {
+            const a = q(e, v(e.fieldProps, {
               value: r,
-              ...a
+              ...t
             })), c = {};
-            n.onFieldChange && (c[`onUpdate:${t.valuePropName || "value"}`] = (y) => {
+            n.onFieldChange && (c[`onUpdate:${a.valuePropName || "value"}`] = (T) => {
               var u;
-              return (u = n.onFieldChange) == null ? void 0 : u.call(n, a.index, e.dataIndex, y);
+              return (u = n.onFieldChange) == null ? void 0 : u.call(n, t.index, e.dataIndex, T);
             });
             const N = s(e.dataIndex) ? e.dataIndex : [e.dataIndex], I = {
-              name: [...s(n.name) ? n.name : [n.name], a.index, ...N],
-              ...t || {},
+              name: [...s(n.name) ? n.name : [n.name], t.index, ...N],
+              ...a || {},
               field: {
                 style: "width: 100%",
-                ...(t == null ? void 0 : t.field) || {},
+                ...(a == null ? void 0 : a.field) || {},
                 ...c,
-                class: A("is-editable", t.class)
+                class: A("is-editable", a.class)
               }
             };
-            d = G(e, I, a.record, m(f));
+            d = G(e, I, t.record, m(f));
           }
           return e.customRender ? e.customRender({
             value: r,
-            ...a,
+            ...t,
             editable: i,
             originalNode: d
           }) : d;

package/es/src/ap-grid/hooks/use-inner-params.d.ts

@@ -1,9 +1,10 @@
 import { ApGridProps } from '../interface';
 import { VxeTableEvents } from 'vxe-table';
+import { OptionalOnTableChange } from '../../ap-table/hooks/use-table-paging-ng';
 /**
  * 用于管理内部生成的查询参数（排序/筛选/分页等）
  */
-export declare const useInnerParams: <RecordType>(tableChangeCallback: ApGridProps["onChange"]) => {
+export declare const useInnerParams: <RecordType>(tableChangeCallback: OptionalOnTableChange<NonNullable<ApGridProps["onChange"]>>) => {
     sortChangeEvent: VxeTableEvents.SortChange<RecordType>;
     filterChangeEvent: VxeTableEvents.FilterChange<RecordType>;
     paginationChangeEvent: (page: number, pageSize: number) => void;

package/es/src/ap-grid/hooks/use-inner-params.mjs

@@ -1,41 +1,30 @@
-import { DEFAULT_PAGE_SIZE as g, DEFAULT_CURRENT as E } from "../../ap-table/hooks/use-table-paging-ng.mjs";
-const a = {
+const e = {
   asc: "ascend",
   desc: "descend"
-}, v = (o) => {
-  const t = {};
-  let c = {};
-  const s = {
-    current: E,
-    pageSize: g
-  };
-  function i(n) {
-    o == null || o(s, c, t, {
-      currentDataSource: [],
-      action: n
+}, d = (t) => ({
+  sortChangeEvent: ({
+    field: o,
+    order: n,
+    column: s
+  }) => {
+    t(void 0, void 0, {
+      column: s,
+      field: o,
+      order: n ? e[n] : null
     });
+  },
+  filterChangeEvent: ({
+    filterList: o
+  }) => {
+    const n = {};
+    for (const s of o)
+      n[s.field] = s.values;
+    t == null || t(void 0, n);
+  },
+  paginationChangeEvent: (o, n) => {
+    t({ current: o, pageSize: n });
   }
-  return {
-    sortChangeEvent: ({
-      field: n,
-      order: e,
-      column: r
-    }) => {
-      t.column = r, t.order = e ? a[e] : null, t.field = n, i("sort");
-    },
-    filterChangeEvent: ({
-      filterList: n
-    }) => {
-      const e = {};
-      for (const r of n)
-        e[r.field] = r.values;
-      c = e, i("filter");
-    },
-    paginationChangeEvent: (n, e) => {
-      s.current = n, s.pageSize = e, i("paginate");
-    }
-  };
-};
+});
 export {
-  v as useInnerParams
+  d as useInnerParams
 };

package/es/src/ap-grid/hooks/use-render-columns.mjs

@@ -1,11 +1,11 @@
-import { ref as a, watch as u, computed as m, unref as p } from "vue";
-import { useToken as i } from "@aplus-frontend/antdv/es/theme/internal";
+import { ref as a, watch as u, computed as p, unref as i } from "vue";
+import { useToken as m } from "@aplus-frontend/antdv/es/theme/internal";
 import "../../config-provider/index.mjs";
 import { renderWithColumns as l } from "../utils/renderer.mjs";
 import { useNamespace as s } from "../../config-provider/hooks/use-namespace.mjs";
 import { useGlobalConfig as f } from "../../config-provider/hooks/use-global-config.mjs";
-const w = (e) => {
-  const [, o] = i(), { be: t } = s("ap-grid"), n = f("valueTypeMap"), r = a(Date.now());
+const h = (e) => {
+  const [, o] = m(), { be: t } = s("ap-grid"), n = f("valueTypeMap"), r = a(Date.now());
   return u(
     () => e.value,
     () => {
@@ -15,15 +15,15 @@ const w = (e) => {
       deep: !0
     }
   ), {
-    renderConfig: m(() => l(
+    renderConfig: p(() => l(
       e.value,
-      o.value.colorPrimary,
+      o.value.colorTextTertiary,
       t("table-header", "title"),
-      p(n)
+      i(n)
     )),
     updateSignal: r
   };
 };
 export {
-  w as useRenderColumns
+  h as useRenderColumns
 };

package/es/src/ap-grid/hooks/use-row-selection.d.ts

@@ -0,0 +1,100 @@
+import { TableRowSelection } from '@aplus-frontend/antdv/lib/table/interface';
+import { ComputedRef, Ref } from 'vue';
+import { ApTableProps, ApTableRowSelection } from '../../ap-table';
+import { Recordable } from '../../type';
+export interface RowSelectionReturnType<RecordType = any> {
+    rowSelection: ComputedRef<TableRowSelection<RecordType>>;
+    selectedRows: Ref<Partial<RecordType>[]>;
+    /**
+     * 选中某行
+     * @param item
+     * @returns
+     */
+    select: (item: RecordType) => void;
+    /**
+     * 取消选中某行
+     * @param item
+     * @returns
+     */
+    unSelect: (item: RecordType) => void;
+    /**
+     * 某行是否被选中
+     * @param item
+     * @returns
+     */
+    isSelected: (item: RecordType) => boolean;
+    /**
+     * 选中当前所有数据
+     * @returns
+     */
+    selectAll: () => void;
+    /**
+     * 取消选中当前所有数据
+     * @returns
+     */
+    unSelectAll: () => void;
+    /**
+     * 清空所有选中
+     * @returns
+     */
+    clearAll: () => void;
+    /**
+     * 切换某行的选中状态
+     * @param item
+     * @returns
+     */
+    toggleSelect: (item: RecordType) => void;
+    /**
+     * 多项选中
+     * @param items
+     * @returns
+     */
+    selectMulti: (items: RecordType[]) => void;
+    /**
+     * 多项反选
+     * @param items
+     * @returns
+     */
+    unSelectMulti: (items: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-change事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectChange: (item: RecordType, select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-all事件
+     * @param item
+     * @param select
+     * @param partRowData
+     * @returns
+     */
+    selectAllChange: (select: boolean, partRowData: RecordType[]) => void;
+    /**
+     * VxeTable 表格checkbox-range-change事件
+     * @param selected
+     * @param partRowData
+     * @returns
+     */
+    selectRangeChange: (selected: RecordType[], partRowData: RecordType[]) => void;
+    /**
+     * 通过key勾选多条数据
+     * @param keys
+     * @returns
+     */
+    selectMultiByKeys: (keys: (string | number)[]) => void;
+}
+type RowSelectionParams<T> = Omit<ApTableRowSelection<T>, 'mode'> & {
+    /**
+     * 数据源（如果是后端分页，则表示当页数据，否则是全量数据）
+     */
+    dataSource: Ref<T[]>;
+    /**
+     * 同Table的rowkey
+     */
+    rowKey: ApTableProps['rowKey'];
+};
+declare const useTableRowSelection: <RecordType = Recordable>(props: RowSelectionParams<RecordType>) => RowSelectionReturnType<RecordType>;
+export default useTableRowSelection;