@aplus-frontend/ui 0.5.2 → 0.5.4

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

@@ -0,0 +1,288 @@
+import { defineComponent as M, useSlots as U, ref as w, watch as v, unref as n, createBlock as $, openBlock as q, withCtx as p, createVNode as R, mergeProps as J, createSlots as Q, renderList as X, renderSlot as Y, normalizeProps as Z, guardReactiveProps as ee } from "vue";
+import { ApForm as h } from "../../ap-form/index.mjs";
+import { isEqual as ae, isArray as b, isNumber as y, cloneDeep as m, omit as te } from "lodash-unified";
+import "../../config-provider/index.mjs";
+import "../../hooks/index.mjs";
+import { isDef as g } from "../../utils/index.mjs";
+import { useGetEditableColumns as le } from "../hooks/use-editable-columns.mjs";
+import "../index.vue2.mjs";
+import { useNamespace as oe } from "../../config-provider/hooks/use-namespace.mjs";
+import { useControllableValue as ne } from "../../hooks/useControllableValue.mjs";
+import { useGlobalConfig as re } from "../../config-provider/hooks/use-global-config.mjs";
+import se from "../index.vue.mjs";
+const we = /* @__PURE__ */ M({
+  name: "EditableGrid",
+  __name: "index",
+  props: {
+    dropdownPrefixCls: {},
+    loading: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    locale: {},
+    onResizeColumn: {},
+    getPopupContainer: {},
+    scroll: {},
+    sortDirections: {
+      default: () => ["ascend", "descend"]
+    },
+    showSorterTooltip: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    prefixCls: {},
+    tableLayout: {
+      default: "fixed"
+    },
+    title: {},
+    id: {},
+    showHeader: {
+      type: Boolean,
+      default: !0
+    },
+    components: {},
+    customRow: {},
+    customHeaderRow: {},
+    direction: {},
+    expandFixed: {
+      type: [String, Boolean],
+      default: !1
+    },
+    expandColumnWidth: {},
+    expandedRowKeys: {},
+    defaultExpandedRowKeys: {},
+    expandedRowRender: {},
+    expandRowByClick: {
+      type: Boolean,
+      default: !1
+    },
+    expandIcon: {},
+    onExpand: {},
+    onExpandedRowsChange: {},
+    defaultExpandAllRows: {
+      type: Boolean,
+      default: !1
+    },
+    indentSize: {
+      default: 15
+    },
+    expandIconColumnIndex: {},
+    showExpandColumn: {
+      type: Boolean,
+      default: !0
+    },
+    expandedRowClassName: {},
+    childrenColumnName: {
+      default: "children"
+    },
+    rowExpandable: {},
+    sticky: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    transformCellText: {},
+    rowClassName: {},
+    stripe: {
+      type: Boolean
+    },
+    headerRowClassName: {},
+    footerRowClassName: {},
+    cellClassName: {},
+    headerCellClassName: {},
+    footerCellClassName: {},
+    rowStyle: {},
+    headerRowStyle: {},
+    footerRowStyle: {},
+    cellStyle: {},
+    headerCellStyle: {},
+    footerCellStyle: {},
+    height: {},
+    minHeight: {},
+    maxHeight: {},
+    mergeCells: {},
+    mergeFooterItems: {},
+    cellConfig: {},
+    rowSelection: {
+      type: Boolean,
+      default: void 0
+    },
+    onLoadingChange: {},
+    pagination: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    searchFormWrapperStyle: {},
+    tableWrapperStyle: {},
+    wrapperStyle: {},
+    size: {
+      default: "medium"
+    },
+    adaptive: {
+      type: Boolean,
+      default: !1
+    },
+    columnResizable: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    rowKey: {
+      default: "key"
+    },
+    footer: {},
+    virtual: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    expandable: {},
+    value: {},
+    columns: {},
+    defaultValue: {},
+    "onUpdate:value": {},
+    onChange: {},
+    maxLength: {},
+    name: {
+      default: "ap-editable-table-inner-name"
+    },
+    onFieldChange: {}
+  },
+  emits: ["update:value"],
+  setup(B, {
+    expose: F,
+    emit: S
+  }) {
+    const N = U(), t = B, {
+      b: V
+    } = oe("editable-grid"), _ = S, C = w(), {
+      value: s,
+      updateValue: L
+    } = ne(t, _), u = w(), D = re("valueTypeMap"), c = h.useWatch(t.name, u);
+    v(() => c.value, (e) => {
+      var a;
+      L(e), (a = t.onChange) == null || a.call(t, e);
+    }, {
+      deep: !0
+    }), v(s, (e) => {
+      var a;
+      e !== n(c) && (ae(e, n(c)) || (a = u.value) == null || a.setFieldValue(t.name, e));
+    }, {
+      deep: !0
+    });
+    const E = le(t, D);
+    function k() {
+      var e;
+      (e = u.value) == null || e.resetFields();
+    }
+    function A(e) {
+      return e ? (b(e) ? e : [e]).map((o) => b(o) ? [t.name, ...o] : [t.name, o]) : void 0;
+    }
+    async function T(e, a) {
+      var l;
+      const o = await ((l = u.value) == null ? void 0 : l.validateFields(A(e), a));
+      return o == null ? void 0 : o[t.name];
+    }
+    function j(e, a) {
+      var r, d, i;
+      const o = ((r = n(s)) == null ? void 0 : r.length) || 0;
+      if (g(t.maxLength) && o >= t.maxLength)
+        return;
+      const l = [...n(s) || []];
+      g(a) ? l.splice(a, 0, {
+        ...e || {}
+      }) : l.push({
+        ...e || {}
+      }), (i = (d = u.value) == null ? void 0 : d.setFieldValue) == null || i.call(d, t.name, l);
+    }
+    function O(e, a = "suffix") {
+      var i, f, x;
+      const o = ((i = n(s)) == null ? void 0 : i.length) || 0, l = y(e) ? e : e.length;
+      if (g(t.maxLength) && o + l > t.maxLength)
+        return;
+      const r = [...n(s) || []], d = y(e) ? new Array(e).fill(0).map(() => ({})) : m(e);
+      a === "suffix" ? r.push(...d) : r.unshift(...d), (x = (f = u.value) == null ? void 0 : f.setFieldValue) == null || x.call(f, t.name, r);
+    }
+    function z(e) {
+      var l, r;
+      let a = m(n(s) || []);
+      const o = y(e) ? [e] : e;
+      a = a.filter((d, i) => !o.includes(i)), (r = (l = u.value) == null ? void 0 : l.setFieldValue) == null || r.call(l, t.name, a);
+    }
+    function P() {
+      return n(s);
+    }
+    function H(e) {
+      var a;
+      (a = u.value) == null || a.setFieldValue(t.name, e);
+    }
+    function I(e) {
+      var a;
+      return (a = n(s)) == null ? void 0 : a[e];
+    }
+    function W(e, a, o = !0) {
+      var r, d;
+      const l = m(n(s));
+      l[e] && (l[e] = {
+        ...o ? l[e] : {},
+        ...a
+      }, (d = (r = u.value) == null ? void 0 : r.setFieldValue) == null || d.call(r, t.name, [...l]));
+    }
+    function G(e) {
+      var o;
+      const a = e === "end" ? s.value.length - 1 : e;
+      (o = C.value) == null || o.scrollToRow(a);
+    }
+    function K() {
+      var e, a;
+      (a = (e = u.value) == null ? void 0 : e.setFieldValue) == null || a.call(e, t.name, []);
+    }
+    return F({
+      resetFields: k,
+      validateFields: T,
+      add: j,
+      remove: z,
+      getRowData: I,
+      getRowsData: P,
+      setRowData: W,
+      addMultiple: O,
+      scrollTo: G,
+      clear: K,
+      setTableData: H
+    }), (e, a) => (q(), $(n(h), {
+      ref_key: "formRef",
+      ref: u,
+      "initial-values": {
+        [t.name]: n(s)
+      },
+      style: {
+        height: "100%"
+      }
+    }, {
+      default: p(() => [R(n(h).FormItem, {
+        name: e.name,
+        "no-style": ""
+      }, {
+        default: p(() => [R(se, J(n(te)(t, ["name", "value", "onUpdate:value", "maxLength", "onChange", "defaultValue"]), {
+          ref_key: "tableRef",
+          ref: C,
+          class: n(V)(),
+          columns: n(E),
+          "data-source": n(m)(n(s)),
+          "search-form": !1
+        }), Q({
+          _: 2
+        }, [X(N, (o, l) => ({
+          name: l,
+          fn: p((r) => [Y(e.$slots, l, Z(ee(r || {})))])
+        }))]), 1040, ["class", "columns", "data-source"])]),
+        _: 3
+      }, 8, ["name"])]),
+      _: 3
+    }, 8, ["initial-values"]));
+  }
+});
+export {
+  we as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

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

@@ -0,0 +1,95 @@
+import { Recordable } from '../../type';
+import { ApTableValueFields, ApTableValueTypes, CommonFieldReturnType, FieldPropsType } from '../../ap-table/interface';
+import { ApGridColumnType, ApGridProps } from '../interface';
+import { VNode } from 'vue';
+import { DataIndex } from '@aplus-frontend/antdv/es/vc-table/interface';
+import { EditableTableExpose } from '../../editable-table';
+import { NamePath } from '@aplus-frontend/antdv/es/form/interface';
+import { ApFormItemProps } from '../../ap-form';
+export type EditableGridColumnType<RecordType = any, ExtraValueType = 'text', ValueType extends ApTableValueTypes = ApTableValueTypes, MergedValueType extends ExtraValueType | ValueType = ExtraValueType | ValueType> = MergedValueType extends ExtraValueType | ValueType ? Omit<ApGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>, 'children' | 'customRender' | 'hideInSearch' | 'hideInTable' | 'tooltip' | 'customRenderFormItem' | 'fieldProps'> & {
+    children?: EditableGridColumnType<RecordType, ExtraValueType, ValueType, MergedValueType>[];
+    /**
+     * 在title之后展示一个icon并触发tooltip
+     */
+    tooltip?: any;
+    /**
+     * 是否可编辑
+     */
+    editable?: boolean | ((text: any, record: RecordType, index: number) => boolean);
+    /**
+     * 自定义表单，适用于内置`valueType`不满足的情况下使用
+     */
+    customRenderFormItem?: (config: EditableGridColumnType<RecordType>, fieldProps: Recordable, editable: boolean, record: RecordType) => any;
+    /**
+     * 指定值类型（将会用于普通列和可编辑表格的渲染）
+     */
+    valueType?: MergedValueType;
+    /**
+     * 值类型额外配置的参数（支持函数）
+     */
+    fieldProps?: FieldPropsType<Extract<MergedValueType, ValueType> extends never ? CommonFieldReturnType : ApTableValueFields[Extract<MergedValueType, ValueType>], RecordType, ExtraValueType, ValueType, MergedValueType>;
+    /**
+     * 自定义渲染，添加了`editable`以及`originalNode`
+     * @param opt
+     * @returns
+     */
+    customRender?: (opt: {
+        value: any;
+        text: any;
+        record: RecordType;
+        index: number;
+        renderIndex: number;
+        column: ApGridColumnType<RecordType>;
+        editable?: boolean;
+        originalNode?: VNode;
+    }) => any;
+} : never;
+export type EditableGridProps<RecordType = any> = Omit<ApGridProps<RecordType>, 'columns' | 'dataSource' | 'onChange' | 'card' | 'request' | 'params' | 'defaultData' | 'searchForm' | 'beforeSearchSubmit' | 'manual'> & {
+    /**
+     * 列配置
+     */
+    columns?: EditableGridColumnType<RecordType, any>[];
+    /**
+     * 表格数据v-model
+     */
+    value?: RecordType[];
+    /**
+     * 表格数据默认值（只生效一次，如果是异步数据，请使用`v-model`）
+     */
+    defaultValue?: RecordType[];
+    'onUpdate:value'?: (value: RecordType[]) => void;
+    /**
+     * 数据修改时触发onChange（也包含数据的删除）
+     * @param value
+     * @returns
+     */
+    onChange?: (value: RecordType[]) => void;
+    /**
+     * 表格最大行数，超过行后将无法调用相关API新增
+     */
+    maxLength?: number;
+    /**
+     * 设置可编辑表格的名字，如果不传，将会使用默认值
+     */
+    name?: any;
+    /**
+     * 当字段值变更的时候触发（注意，向表单设置值并不会触发）
+     * @returns
+     */
+    onFieldChange?: (rowIndex: number, fieldName: DataIndex, newValue: any) => void;
+};
+export type EditableGridExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableTableExpose<ModelType, RecordType>, 'scrollTo'> & {
+    scrollTo: (index: number | 'end') => void;
+};
+export type EditableGridFormItemExpose<RecordType = any, ModelType = RecordType[]> = Omit<EditableGridExpose<RecordType, ModelType>, 'resetFields' | 'validateFields'>;
+export type EditableGridFormItemProps<RecordType = any> = Omit<EditableGridProps<RecordType>, 'name'> & {
+    label?: string;
+    /**
+     * FormItem的name
+     */
+    name: NamePath;
+    /**
+     * 额外的表单项配置属性
+     */
+    formItem?: Partial<Omit<ApFormItemProps, 'name' | 'label'>>;
+};

package/es/src/ap-grid/editable/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/ap-grid/editable/style/css.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-grid/editable.css';

package/es/src/ap-grid/editable/style/index.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/ap-grid/editable.less';

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

@@ -0,0 +1,6 @@
+import { ComputedRef, Ref } from 'vue';
+import { EditableGridProps } from '../editable/interface';
+import { ValueTypeRenderConfig } from '../../config-provider';
+import { ApGridColumnType } from '../interface';
+export declare const useGetEditableColumns: (props: EditableGridProps, extraValueTypes: Ref<Record<string, ValueTypeRenderConfig> | undefined>) => ComputedRef<ApGridColumnType[]>;
+export default useGetEditableColumns;

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/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";