@aplus-frontend/ui 0.5.3 → 0.5.4

package/es/src/ap-grid/editable/form-item.vue.mjs

@@ -0,0 +1,257 @@
+import { defineComponent as A, useSlots as P, toRef as H, ref as y, unref as r, watch as W, nextTick as G, createBlock as K, openBlock as M, mergeProps as g, withCtx as C, createVNode as U, createSlots as $, renderList as q, renderSlot as J, normalizeProps as Q, guardReactiveProps as X } from "vue";
+import { ApForm as w } from "../../ap-form/index.mjs";
+import { isArray as Y, isNumber as f, cloneDeep as d, omit as Z } from "lodash-unified";
+import "../../config-provider/index.mjs";
+import { isDef as m } from "../../utils/index.mjs";
+import { useGetEditableColumns as I } from "../hooks/use-editable-columns.mjs";
+import "../index.vue2.mjs";
+import { useInjectForm as ee } from "../../ap-form/context.mjs";
+import { useNamespace as oe } from "../../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as te } from "../../config-provider/hooks/use-global-config.mjs";
+import ae from "../index.vue.mjs";
+const he = /* @__PURE__ */ A({
+  name: "EditableGrid",
+  __name: "form-item",
+  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: {},
+    onFieldChange: {},
+    label: {},
+    name: {},
+    formItem: {
+      default: () => ({})
+    }
+  },
+  setup(x, {
+    expose: b
+  }) {
+    const R = P(), a = x, {
+      b: B
+    } = oe("editable-grid");
+    function S(e, o) {
+      return Y(o) ? o.reduce((n, l) => n == null ? void 0 : n[l], e) : e == null ? void 0 : e[o];
+    }
+    const {
+      internalInstance: t,
+      model: F
+    } = ee(), i = H(a.name), u = y(S(r(F), i.value) || []), N = w.useWatch(i);
+    W(() => N.value, async (e) => {
+      var o;
+      await G(), u.value = e, (o = a.onChange) == null || o.call(a, e);
+    }, {
+      deep: !0
+    });
+    const p = y(), v = te("valueTypeMap"), D = I(a, v);
+    function L(e, o) {
+      var s;
+      const n = ((s = r(u)) == null ? void 0 : s.length) || 0;
+      if (m(a.maxLength) && n >= a.maxLength)
+        return;
+      const l = [...r(u) || []];
+      m(o) ? l.splice(o, 0, {
+        ...e || {}
+      }) : l.push({
+        ...e || {}
+      }), t == null || t.setFieldValue(a.name, l);
+    }
+    function V(e, o = "suffix") {
+      var h;
+      const n = ((h = r(u)) == null ? void 0 : h.length) || 0, l = f(e) ? e : e.length;
+      if (m(a.maxLength) && n + l > a.maxLength)
+        return;
+      const s = [...r(u) || []], c = f(e) ? new Array(e).fill(0).map(() => ({})) : d(e);
+      o === "suffix" ? s.push(...c) : s.unshift(...c), t == null || t.setFieldValue(a.name, s);
+    }
+    function _(e) {
+      let o = d(r(u) || []);
+      const n = f(e) ? [e] : e;
+      o = o.filter((l, s) => !n.includes(s)), t == null || t.setFieldValue(a.name, o);
+    }
+    function E() {
+      return r(u);
+    }
+    function T(e) {
+      var o;
+      return (o = r(u)) == null ? void 0 : o[e];
+    }
+    function j(e, o, n = !0) {
+      const l = d(r(u));
+      l[e] && (l[e] = {
+        ...n ? l[e] : {},
+        ...o
+      }, t == null || t.setFieldValue(a.name, [...l]));
+    }
+    function k(e) {
+      t == null || t.setFieldValue(a.name, e);
+    }
+    function O(e) {
+      var n;
+      const o = e === "end" ? u.value.length - 1 : e;
+      (n = p.value) == null || n.scrollToRow(o);
+    }
+    function z() {
+      var e;
+      (e = t == null ? void 0 : t.setFieldValue) == null || e.call(t, a.name, []);
+    }
+    return b({
+      add: L,
+      remove: _,
+      getRowData: T,
+      getRowsData: E,
+      setRowData: j,
+      addMultiple: V,
+      scrollTo: O,
+      setTableData: k,
+      clear: z
+    }), (e, o) => (M(), K(r(w).FormItem, g(e.formItem, {
+      name: e.name,
+      label: e.label
+    }), {
+      default: C(() => [U(ae, g(r(Z)(a, ["name", "value", "onUpdate:value", "maxLength", "onChange", "defaultValue", "formItem"]), {
+        ref_key: "tableRef",
+        ref: p,
+        class: r(B)(),
+        columns: r(D),
+        "data-source": r(d)(u.value),
+        "search-form": !1
+      }), $({
+        _: 2
+      }, [q(R, (n, l) => ({
+        name: l,
+        fn: C((s) => [J(e.$slots, l, Q(X(s || {})))])
+      }))]), 1040, ["class", "columns", "data-source"])]),
+      _: 3
+    }, 16, ["name", "label"]));
+  }
+});
+export {
+  he as default
+};

package/es/src/ap-grid/editable/form-item.vue2.mjs

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

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

@@ -0,0 +1,18 @@
+import { EditableGridExpose, EditableGridProps } from './interface';
+import { Recordable } from '../../type';
+import { VNodeProps, AllowedComponentProps, ComponentCustomProps, PublicProps, ShallowUnwrapRef, VNode } from 'vue';
+declare const _default: <RecordType extends Recordable = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+    } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onUpdate:value"> & EditableGridProps<RecordType> & Partial<{}>> & PublicProps;
+    expose(exposed: ShallowUnwrapRef<EditableGridExpose>): void;
+    attrs: any;
+    slots: Readonly<Record<string, any>> & Record<string, any>;
+    emit: (event: "update:value", ...args: any[]) => void;
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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;