@aplus-frontend/ui 0.5.3 → 0.5.4

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

@@ -0,0 +1,68 @@
+import { useSlots as E, computed as R, unref as m } from "vue";
+import { isFunction as T, 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";
+import { useToken as w } from "@aplus-frontend/antdv/es/theme/internal";
+import { getFinalEditableNode as G } from "../utils/editable.mjs";
+import { useNamespace as S } from "../../config-provider/hooks/use-namespace.mjs";
+const M = (n, f) => {
+  const {
+    em: b,
+    be: x
+  } = S("editable-grid"), g = E(), [, h] = w();
+  return R(() => {
+    const l = n.columns;
+    if (!l)
+      return [];
+    function o(C) {
+      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),
+        // tips: 已经处理了title，传递tooltip为undefined不会再内部处理
+        tooltip: void 0,
+        customRender({
+          value: r,
+          originalNode: F,
+          ...a
+        }) {
+          const i = T(e.editable) ? e.editable(a.text, a.record, a.index) : !!e.editable;
+          let d = F;
+          if (i) {
+            const t = q(e, v(e.fieldProps, {
+              value: r,
+              ...a
+            })), c = {};
+            n.onFieldChange && (c[`onUpdate:${t.valuePropName || "value"}`] = (y) => {
+              var u;
+              return (u = n.onFieldChange) == null ? void 0 : u.call(n, a.index, e.dataIndex, y);
+            });
+            const N = s(e.dataIndex) ? e.dataIndex : [e.dataIndex], I = {
+              name: [...s(n.name) ? n.name : [n.name], a.index, ...N],
+              ...t || {},
+              field: {
+                style: "width: 100%",
+                ...(t == null ? void 0 : t.field) || {},
+                ...c,
+                class: A("is-editable", t.class)
+              }
+            };
+            d = G(e, I, a.record, m(f));
+          }
+          return e.customRender ? e.customRender({
+            value: r,
+            ...a,
+            editable: i,
+            originalNode: d
+          }) : d;
+        }
+      }));
+    }
+    return o(l);
+  });
+};
+export {
+  M as default,
+  M as useGetEditableColumns
+};

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

@@ -1,4 +1,4 @@
-import { DEFAULT_CURRENT as g, DEFAULT_PAGE_SIZE as E } from "../../ap-table/hooks/use-table-paging-ng.mjs";
+import { DEFAULT_PAGE_SIZE as g, DEFAULT_CURRENT as E } from "../../ap-table/hooks/use-table-paging-ng.mjs";
 const a = {
   asc: "ascend",
   desc: "descend"
@@ -6,8 +6,8 @@ const a = {
   const t = {};
   let c = {};
   const s = {
-    current: g,
-    pageSize: E
+    current: E,
+    pageSize: g
   };
   function i(n) {
     o == null || o(s, c, t, {

package/es/src/ap-grid/index.d.ts

@@ -1,3 +1,6 @@
 import { default as ApGrid } from './index.vue';
-export { ApGrid };
+import { default as EditableGrid } from './editable/index.vue';
+import { default as EditableGridFormItem } from './editable/form-item.vue';
+export { ApGrid, EditableGrid, EditableGridFormItem };
 export * from './interface';
+export * from './editable/interface';

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

@@ -1,2 +1,5 @@
 import "./index.vue2.mjs";
+import "./editable/index.vue2.mjs";
+import "./editable/form-item.vue2.mjs";
 import "./interface.mjs";
+import "./editable/interface.mjs";

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

@@ -1,25 +1,25 @@
-import { defineComponent as Ce, useSlots as be, ref as x, computed as n, unref as o, watch as E, openBlock as s, createElementBlock as R, normalizeClass as f, normalizeStyle as M, createVNode as _, mergeProps as g, createSlots as q, withCtx as h, Fragment as G, renderList as N, createBlock as u, resolveDynamicComponent as z, renderSlot as A, createCommentVNode as y, createElementVNode as k, normalizeProps as we, guardReactiveProps as Se } from "vue";
-import { VxeTable as xe, VxeColumn as U } from "vxe-table";
-import { isUndefined as F, omit as Re } from "lodash-unified";
-import { ApForm as ke } from "../ap-form/index.mjs";
+import { defineComponent as Ce, useSlots as be, ref as x, computed as n, unref as o, watch as E, createElementBlock as R, openBlock as s, normalizeStyle as N, normalizeClass as f, createCommentVNode as w, createElementVNode as k, createVNode as q, mergeProps as g, createSlots as _, withCtx as v, Fragment as G, renderList as z, createBlock as u, resolveDynamicComponent as T, renderSlot as A, normalizeProps as Se, guardReactiveProps as xe } from "vue";
+import { VxeTable as Re, VxeColumn as U } from "vxe-table";
+import { isUndefined as F, omit as ke } from "lodash-unified";
+import { ApForm as Fe } from "../ap-form/index.mjs";
 import "../config-provider/index.mjs";
-import { noRenderAsFormItemValueList as Fe } from "../ap-table/constants.mjs";
-import { getColumnOrder as J, updateFormProps as Be, getFieldProps as Pe, getSearchFormItemRenderNode as Ie, recursionApColumns as Q } from "../ap-table/utils.mjs";
-import { useTablePaging as Ee } from "../ap-table/hooks/use-table-paging-ng.mjs";
-import { Empty as X, Pagination as Ne } from "@aplus-frontend/antdv";
-import { useInnerParams as ze } from "./hooks/use-inner-params.mjs";
-import { toVxeProps as Ae, getRowExpandProps as Te, getRowSelectionProps as Ve } from "./utils/table.mjs";
-import Oe from "../ap-table/hooks/use-table-row-selection.mjs";
-import { useProvideApTable as Ke } from "../ap-table/context.mjs";
-import { sizeMap as De, sizeReverseMap as Le } from "./constants.mjs";
-import { useRenderColumns as $e } from "./hooks/use-render-columns.mjs";
-import { useToken as je } from "@aplus-frontend/antdv/es/theme/internal";
+import { noRenderAsFormItemValueList as Be } from "../ap-table/constants.mjs";
+import { getColumnOrder as J, updateFormProps as Pe, getFieldProps as Ie, getSearchFormItemRenderNode as Ee, recursionApColumns as Q } from "../ap-table/utils.mjs";
+import { useTablePaging as Ne } from "../ap-table/hooks/use-table-paging-ng.mjs";
+import { Empty as X, Pagination as ze } from "@aplus-frontend/antdv";
+import { useInnerParams as Te } from "./hooks/use-inner-params.mjs";
+import { toVxeProps as Ae, getRowExpandProps as Ve, getRowSelectionProps as Oe } from "./utils/table.mjs";
+import Ke from "../ap-table/hooks/use-table-row-selection.mjs";
+import { useProvideApTable as De } from "../ap-table/context.mjs";
+import { sizeReverseMap as Le, sizeMap as $e } from "./constants.mjs";
+import { useRenderColumns as je } from "./hooks/use-render-columns.mjs";
+import { useToken as He } from "@aplus-frontend/antdv/es/theme/internal";
 import "../scroll-bar/index.mjs";
-import { useLoadVxe as He } from "./hooks/use-load-vxe.mjs";
-import { useNamespace as We } from "../config-provider/hooks/use-namespace.mjs";
-import { useGlobalConfig as Me } from "../config-provider/hooks/use-global-config.mjs";
+import { useLoadVxe as We } from "./hooks/use-load-vxe.mjs";
+import { useNamespace as Me } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as qe } from "../config-provider/hooks/use-global-config.mjs";
 import _e from "../scroll-bar/index.vue.mjs";
-const go = /* @__PURE__ */ Ce({
+const vo = /* @__PURE__ */ Ce({
   name: "ApGrid",
   __name: "index",
   props: {
@@ -92,6 +92,7 @@ const go = /* @__PURE__ */ Ce({
     pagination: { type: [Boolean, Object], default: void 0 },
     searchFormWrapperStyle: {},
     tableWrapperStyle: {},
+    wrapperStyle: {},
     manual: { type: Boolean, default: !1 },
     size: { default: void 0 },
     adaptive: { type: Boolean, default: !1 },
@@ -99,65 +100,66 @@ const go = /* @__PURE__ */ Ce({
     rowKey: { default: "key" },
     footer: {},
     virtual: { type: [Boolean, Object], default: void 0 },
-    expandable: {}
+    expandable: {},
+    value: {}
   },
   setup(Y, { expose: Z }) {
-    const T = be(), a = Y, { e: B, b: i, be: ee } = We("ap-grid"), oe = Me("valueTypeMap");
-    He();
-    const d = x([]), V = x([]), p = x(), C = x(a.size), [, m] = je(), { renderConfig: ae, updateSignal: re } = $e(d);
-    let O = 0;
+    const V = be(), a = Y, { e: B, b: i, be: ee } = Me("ap-grid"), oe = qe("valueTypeMap");
+    We();
+    const d = x([]), O = x([]), p = x(), C = x(a.size), [, m] = He(), { renderConfig: ae, updateSignal: re } = je(d);
+    let K = 0;
     const te = n(() => {
       if (p.value)
         return p.value.$el.querySelector(
           ".vxe-table--header-inner-wrapper"
         );
-    }), K = n(() => {
+    }), D = n(() => {
       var e, l, t;
-      return O++, ((t = (l = (e = a.columns) == null ? void 0 : e.filter(
-        (r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !Fe.includes(r.valueType)
+      return K++, ((t = (l = (e = a.columns) == null ? void 0 : e.filter(
+        (r) => !r.hideInSearch && r.dataIndex && (r.valueType || r.customRenderFormItem) && !Be.includes(r.valueType)
       )) == null ? void 0 : l.sort((r, c) => {
-        let v = J(r.order);
-        return J(c.order) - v;
+        let y = J(r.order);
+        return J(c.order) - y;
       })) == null ? void 0 : t.map((r) => {
-        const c = Be(
+        const c = Pe(
           r,
-          Pe(r.fieldProps, {})
-        ), v = {
+          Ie(r.fieldProps, {})
+        ), y = {
           ...r,
           fieldProps: {
             label: r.title,
             name: r.dataIndex,
             ...c || {},
-            _signal: O
+            _signal: K
           },
           renderNode: void 0
         };
-        return v.renderNode = Ie(
-          v,
+        return y.renderNode = Ee(
+          y,
           o(oe)
-        ), v;
+        ), y;
       })) || [];
     }), le = n(() => [
       i(),
       a.card ? null : i("wrapper"),
       a.adaptive ? i("adaptive") : null,
       a.sticky ? i("sticky") : null
-    ].filter(Boolean)), D = n(() => Q(o(d), (e) => {
+    ].filter(Boolean)), L = n(() => Q(o(d), (e) => {
       if (e.sorter === !0)
         return e.key || e.dataIndex;
-    }).filter(Boolean)), L = n(() => Q(o(d), (e) => {
+    }).filter(Boolean)), $ = n(() => Q(o(d), (e) => {
       if (e.filters && !e.onFilter)
         return e.key || e.dataIndex;
     }).filter(Boolean)), {
       formRef: P,
-      submit: $,
-      reset: j,
+      submit: j,
+      reset: H,
       refresh: ne,
-      data: b,
+      data: h,
       tableProps: se,
       setDataSource: de,
       handleTableChange: ie
-    } = Ee({
+    } = Ne({
       async request(e) {
         var t;
         if (!S.value.preserveSelectedRowKeys && F(a.dataSource) && I(), !F(a.dataSource)) {
@@ -174,18 +176,18 @@ const go = /* @__PURE__ */ Ce({
         };
       },
       namespace: "ap-grid",
-      filterFields: L,
-      sortFields: D,
+      filterFields: $,
+      sortFields: L,
       defaultParams: a.params,
       defaultData: a.defaultData,
       manual: a.manual,
       formatParams: a.beforeSearchSubmit,
       pagination: a.pagination
-    }), { sortChangeEvent: ce, filterChangeEvent: ue, paginationChangeEvent: pe } = ze(ie);
-    Ke({
+    }), { sortChangeEvent: ce, filterChangeEvent: ue, paginationChangeEvent: pe } = Te(ie);
+    De({
       columns: n(() => d.value),
-      columnsBackup: n(() => V.value),
-      size: n(() => C.value ? De[C.value] : "middle"),
+      columnsBackup: n(() => O.value),
+      size: n(() => C.value ? $e[C.value] : "middle"),
       updateColumns(e) {
         d.value = e;
       },
@@ -197,31 +199,31 @@ const go = /* @__PURE__ */ Ce({
         color: m.value.colorPrimary
       }))
     });
-    const H = n(
+    const W = n(
       () => d.value.some(
         (e) => e.fixed === "left" || e.fixed === !0
       ) ? "left" : void 0
     ), me = n(
-      () => F(a.dataSource) ? b.records : a.dataSource
-    ), { selectedRows: w, rowSelection: S, ...fe } = Oe({
+      () => F(a.dataSource) ? h.records : a.dataSource
+    ), { selectedRows: b, rowSelection: S, ...fe } = Ke({
       ...a.rowSelection === !0 ? {} : a.rowSelection,
       dataSource: me,
       rowKey: a.rowKey
-    }), W = () => {
+    }), M = () => {
       const e = p.value;
-      e && (w.value = [
+      e && (b.value = [
         ...e.getCheckboxReserveRecords(),
         ...e.getCheckboxRecords()
       ]);
     }, ge = () => {
       const e = p.value;
-      e && (w.value = [e.getRadioRecord()]);
+      e && (b.value = [e.getRadioRecord()]);
     };
-    function he() {
+    function ve() {
       var e;
       return ((e = a.columns) == null ? void 0 : e.filter((l) => !l.hideInTable)) || [];
     }
-    function ve(e) {
+    function he(e) {
       var l, t, r;
       (r = (t = (l = P.value) == null ? void 0 : l.apForm) == null ? void 0 : t.setFieldsValue) == null || r.call(t, e);
     }
@@ -235,11 +237,17 @@ const go = /* @__PURE__ */ Ce({
       const e = p.value;
       e && (S.value.type === "radio" ? (e.clearRadioRow(), e.clearRadioReserve()) : (e.clearCheckboxRow(), e.clearCheckboxReserve()));
     }
+    async function we(e, l) {
+      var r;
+      const t = h.records[e];
+      if (t)
+        return (r = p.value) == null ? void 0 : r.scrollToRow(t, l);
+    }
     return E(
       () => [a.columnResizable, a.columns],
       () => {
-        const e = he();
-        d.value = e, V.value = e;
+        const e = ve();
+        d.value = e, O.value = e;
       },
       {
         deep: !0,
@@ -252,40 +260,42 @@ const go = /* @__PURE__ */ Ce({
       },
       { immediate: !0 }
     ), E(
-      () => o(b).loading,
+      () => o(h).loading,
       (e) => {
         var l;
         (l = a.onLoadingChange) == null || l.call(a, e);
       }
     ), Z({
-      submit: $,
-      reset: j,
+      submit: j,
+      reset: H,
       refresh: ne,
-      setSearchFormValues: ve,
+      setSearchFormValues: he,
       getSearchFormValues: ye,
       getShowColumns: () => o(d),
       rowSelection: {
-        selectedRows: n(() => w.value),
+        selectedRows: n(() => b.value),
         clearAll: I
-      }
+      },
+      scrollToRow: we
     }), (e, l) => (s(), R("div", {
-      class: f(le.value)
+      class: f(le.value),
+      style: N(e.wrapperStyle)
     }, [
-      o(F)(e.dataSource) && e.searchForm !== !1 && K.value.length > 0 ? (s(), R("div", {
+      o(F)(e.dataSource) && e.searchForm !== !1 && D.value.length > 0 ? (s(), R("div", {
         key: 0,
         class: f(e.card ? o(B)("search-wrapper") : null),
-        style: M(e.searchFormWrapperStyle)
+        style: N(e.searchFormWrapperStyle)
       }, [
-        _(o(ke).SearchForm, g(e.searchForm || {}, {
+        q(o(Fe).SearchForm, g(e.searchForm || {}, {
           ref_key: "formRef",
           ref: P,
           "custom-reset": "",
           "submit-loading": !1,
-          onSubmit: o($),
-          onReset: o(j)
-        }), q({
-          default: h(() => [
-            (s(!0), R(G, null, N(K.value, (t) => (s(), u(z(t.renderNode.Comp), g({
+          onSubmit: o(j),
+          onReset: o(H)
+        }), _({
+          default: v(() => [
+            (s(!0), R(G, null, z(D.value, (t) => (s(), u(T(t.renderNode.Comp), g({
               key: t.dataIndex,
               item: t,
               ref_for: !0
@@ -296,24 +306,24 @@ const go = /* @__PURE__ */ Ce({
           ]),
           _: 2
         }, [
-          T.searchFormExtra ? {
+          V.searchFormExtra ? {
             name: "extra",
-            fn: h(() => [
+            fn: v(() => [
               A(e.$slots, "searchFormExtra")
             ]),
             key: "0"
           } : void 0
         ]), 1040, ["onSubmit", "onReset"])
-      ], 6)) : y("", !0),
+      ], 6)) : w("", !0),
       k("div", {
         class: f([o(B)("table-wrapper"), e.card ? o(B)("table-wrapper-card") : null]),
-        style: M(e.tableWrapperStyle)
+        style: N(e.tableWrapperStyle)
       }, [
         k("div", {
           class: f(o(i)("header-wrapper"))
         }, [
           A(e.$slots, "title", {
-            selectedRows: o(w),
+            selectedRows: o(b),
             selectedRowKeys: o(S).selectedRowKeys,
             shownColumns: d.value,
             clearAll: I
@@ -322,14 +332,14 @@ const go = /* @__PURE__ */ Ce({
         k("div", {
           class: f(o(i)("vxe-wrapper"))
         }, [
-          (s(), u(o(xe), g(o(Ae)(a), {
+          (s(), u(o(Re), g(o(Ae)(a), {
             ref_key: "tableRef",
             ref: p,
             key: o(re),
-            data: o(b).records,
-            "sort-config": { remote: D.value.length > 0 },
-            "filter-config": { remote: L.value.length > 0 },
-            loading: o(b).loading,
+            data: o(h).records,
+            "sort-config": { remote: L.value.length > 0 },
+            "filter-config": { remote: $.value.length > 0 },
+            loading: o(h).loading,
             "row-config": {
               isHover: !0,
               keyField: a.rowKey
@@ -347,33 +357,33 @@ const go = /* @__PURE__ */ Ce({
             size: C.value,
             onSortChange: o(ce),
             onFilterChange: o(ue),
-            onCheckboxChange: W,
-            onCheckboxAll: W,
+            onCheckboxChange: M,
+            onCheckboxAll: M,
             onRadioChange: ge
-          }), q({
-            empty: h(() => [
-              _(o(X), {
+          }), _({
+            empty: v(() => [
+              q(o(X), {
                 image: o(X).PRESENTED_IMAGE_SIMPLE
               }, null, 8, ["image"])
             ]),
-            default: h(() => [
-              a.expandable ? (s(), u(o(U), g({ key: 0 }, o(Te)(e.expandable), { fixed: H.value }), {
-                content: h((t) => [
-                  (s(), u(z(a.expandable.renderContent(t))))
+            default: v(() => [
+              a.expandable ? (s(), u(o(U), g({ key: 0 }, o(Ve)(e.expandable), { fixed: W.value }), {
+                content: v((t) => [
+                  (s(), u(T(a.expandable.renderContent(t))))
                 ]),
                 _: 1
-              }, 16, ["fixed"])) : y("", !0),
-              a.rowSelection ? (s(), u(o(U), g({ key: 1 }, o(Ve)(o(S)), { fixed: H.value }), null, 16, ["fixed"])) : y("", !0),
-              (s(!0), R(G, null, N(o(ae), (t) => (s(), u(z(t), {
+              }, 16, ["fixed"])) : w("", !0),
+              a.rowSelection ? (s(), u(o(U), g({ key: 1 }, o(Oe)(o(S)), { fixed: W.value }), null, 16, ["fixed"])) : w("", !0),
+              (s(!0), R(G, null, z(o(ae), (t) => (s(), u(T(t), {
                 key: t.props.colId
               }))), 128))
             ]),
             _: 2
           }, [
-            N(o(Re)(T, ["searchFormExtra"]), (t, r) => ({
+            z(o(ke)(V, ["searchFormExtra"]), (t, r) => ({
               name: r,
-              fn: h((c) => [
-                A(e.$slots, r, we(Se(c || {})))
+              fn: v((c) => [
+                A(e.$slots, r, Se(xe(c || {})))
               ])
             }))
           ]), 1040, ["data", "sort-config", "filter-config", "loading", "row-config", "style", "size", "onSortChange", "onFilterChange"]))
@@ -385,16 +395,16 @@ const go = /* @__PURE__ */ Ce({
             key: 0,
             direction: "horizontal",
             "scroll-container": te.value
-          }, null, 8, ["scroll-container"])) : y("", !0),
-          e.pagination !== !1 ? (s(), u(o(Ne), g({
+          }, null, 8, ["scroll-container"])) : w("", !0),
+          e.pagination !== !1 ? (s(), u(o(ze), g({
             key: 1,
             class: o(i)("pagination")
-          }, o(se).pagination, { onChange: o(pe) }), null, 16, ["class", "onChange"])) : y("", !0)
+          }, o(se).pagination, { onChange: o(pe) }), null, 16, ["class", "onChange"])) : w("", !0)
         ], 2)
       ], 6)
-    ], 2));
+    ], 6));
   }
 });
 export {
-  go as default
+  vo as default
 };

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

@@ -170,6 +170,10 @@ export type ApGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<Re
      * 自定义表格样式
      */
     tableWrapperStyle?: CSSProperties;
+    /**
+     * 表格最外层容器自定义样式
+     */
+    wrapperStyle?: CSSProperties;
     /**
      * 是否手动发起第一次网络请求
      */
@@ -212,6 +216,10 @@ export type ApGridProps<RecordType = any, ParamsType = any> = Omit<TableProps<Re
          */
         title?: string;
     };
+    /**
+     * 作为表单项时内部传递，请勿使用
+     */
+    value?: any;
 };
 export type ApGridVirtualConfig = {
     x?: false | number;
@@ -260,4 +268,11 @@ export type ApGridExpose<SearchParamsType = Recordable, RecordType = any> = {
         selectedRows: ComputedRef<RecordType[]>;
         clearAll: () => void;
     };
+    /**
+     * 滚动到某一行
+     * @param index 行索引
+     * @param fieldOrColumn
+     * @returns
+     */
+    scrollToRow: (index: number, fieldOrColumn?: any) => Promise<any>;
 };