@aplus-frontend/ui 0.0.12 → 0.0.14

package/es/src/editable-table/index.vue.d.ts

@@ -0,0 +1,196 @@
+import { EditableTableProps, EditableColumnType } from './interface';
+import { NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType, CSSProperties } from 'vue';
+import { SpinSize } from 'ant-design-vue/es/spin/Spin';
+import { VueTypeValidableDef } from '../../node_modules/vue-types';
+import { TablePaginationConfig } from 'ant-design-vue';
+import { TableLayout, GetRowKey } from 'ant-design-vue/es/vc-table/interface';
+import { SortOrder } from 'ant-design-vue/es/table/interface';
+import { TriggerType } from 'ant-design-vue/es/tooltip/abstractTooltipProps';
+import { TooltipPlacement, AdjustOverflow } from 'ant-design-vue/es/tooltip';
+import { LiteralUnion } from 'ant-design-vue/es/_util/type';
+import { PresetColorType } from 'ant-design-vue/es/_util/colors';
+import { AlignType, BuildInPlacements } from 'ant-design-vue/es/vc-trigger/interface';
+
+type EditableTableSlots = {
+    default: any;
+    emptyText?: any;
+    expandIcon?: any;
+    title?: any;
+    footer?: any;
+    summary?: any;
+    expandedRowRender?: any;
+    expandColumnTitle?: any;
+    customFilterIcon?: any;
+    customFilterDropdown?: any;
+    headerCell?: (props: {
+        title: any;
+        column: EditableColumnType;
+    }) => void;
+};
+declare function resetFields(): void;
+declare function validateFields(nameList?: NamePath[] | string, options?: ValidateOptions): Promise<any>;
+declare function add(defaultValue?: any): void;
+declare function remove(index: number): void;
+declare function getRowsData(): any[];
+declare function getRowData(index: number): any;
+declare function setRowData(index: number, payload: any): void;
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EditableTableProps<any>>, {
+    bordered: boolean;
+    childrenColumnName: string;
+    defaultExpandAllRows: boolean;
+    expandFixed: boolean;
+    expandRowByClick: boolean;
+    indentSize: number;
+    rowKey: string;
+    showExpandColumn: boolean;
+    showHeader: boolean;
+    showSorterTooltip: boolean;
+    size: string;
+    sortDirections: () => string[];
+    pagination: boolean;
+    loading: undefined;
+    name: string;
+    tableLayout: string;
+}>, {
+    resetFields: typeof resetFields;
+    validateFields: typeof validateFields;
+    add: typeof add;
+    remove: typeof remove;
+    getRowData: typeof getRowData;
+    getRowsData: typeof getRowsData;
+    setRowData: typeof setRowData;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:value": (...args: any[]) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EditableTableProps<any>>, {
+    bordered: boolean;
+    childrenColumnName: string;
+    defaultExpandAllRows: boolean;
+    expandFixed: boolean;
+    expandRowByClick: boolean;
+    indentSize: number;
+    rowKey: string;
+    showExpandColumn: boolean;
+    showHeader: boolean;
+    showSorterTooltip: boolean;
+    size: string;
+    sortDirections: () => string[];
+    pagination: boolean;
+    loading: undefined;
+    name: string;
+    tableLayout: string;
+}>>> & {
+    "onUpdate:value"?: ((...args: any[]) => any) | undefined;
+}, {
+    loading: boolean | Partial< ExtractPropTypes<{
+        prefixCls: StringConstructor;
+        spinning: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        size: PropType<SpinSize>;
+        wrapperClassName: StringConstructor;
+        tip: VueTypeValidableDef<any>;
+        delay: NumberConstructor;
+        indicator: VueTypeValidableDef<any>;
+    }>>;
+    size: "small" | "middle" | "large";
+    pagination: false | TablePaginationConfig;
+    name: any;
+    bordered: boolean;
+    tableLayout: TableLayout;
+    rowKey: string | GetRowKey<any>;
+    sortDirections: SortOrder[];
+    showSorterTooltip: boolean | Partial< ExtractPropTypes<{
+        title: VueTypeValidableDef<any>;
+        trigger: PropType< TriggerType | TriggerType[]>;
+        open: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        visible: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        placement: PropType<TooltipPlacement>;
+        color: PropType<LiteralUnion<PresetColorType>>;
+        transitionName: StringConstructor;
+        overlayStyle: {
+            type: PropType<CSSProperties>;
+            default: CSSProperties;
+        };
+        overlayInnerStyle: {
+            type: PropType<CSSProperties>;
+            default: CSSProperties;
+        };
+        overlayClassName: StringConstructor;
+        openClassName: StringConstructor;
+        prefixCls: StringConstructor;
+        mouseEnterDelay: NumberConstructor;
+        mouseLeaveDelay: NumberConstructor;
+        getPopupContainer: PropType<(triggerNode: HTMLElement) => HTMLElement>;
+        arrowPointAtCenter: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        arrow: {
+            type: PropType<boolean | {
+                pointAtCenter?: boolean | undefined;
+            }>;
+            default: boolean | {
+                pointAtCenter?: boolean | undefined;
+            };
+        };
+        autoAdjustOverflow: {
+            type: PropType<boolean | AdjustOverflow>;
+            default: boolean | AdjustOverflow;
+        };
+        destroyTooltipOnHide: {
+            type: BooleanConstructor;
+            default: any;
+        };
+        align: {
+            type: PropType<AlignType>;
+            default: AlignType;
+        };
+        builtinPlacements: {
+            type: PropType<BuildInPlacements>;
+            default: BuildInPlacements;
+        };
+        children: ArrayConstructor;
+        onVisibleChange: PropType<(vis: boolean) => void>;
+        'onUpdate:visible': PropType<(vis: boolean) => void>;
+        onOpenChange: PropType<(vis: boolean) => void>;
+        'onUpdate:open': PropType<(vis: boolean) => void>;
+    }>>;
+    showHeader: boolean;
+    expandFixed: boolean | "left" | "right";
+    expandRowByClick: boolean;
+    defaultExpandAllRows: boolean;
+    indentSize: number;
+    showExpandColumn: boolean;
+    childrenColumnName: string;
+}, {}>, Readonly<EditableTableSlots> & EditableTableSlots>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/src/editable-table/index.vue.mjs

@@ -0,0 +1,209 @@
+import { defineComponent as L, useSlots as z, ref as j, watch as I, unref as o, openBlock as p, createBlock as O, withCtx as i, createVNode as c, mergeProps as T, createSlots as K, createElementBlock as q, Fragment as A, createElementVNode as x, normalizeClass as G, toDisplayString as H, createCommentVNode as M, renderList as U, renderSlot as W, normalizeProps as $, guardReactiveProps as J } from "vue";
+import { Table as Q } from "ant-design-vue";
+import { ApForm as u } from "../ap-form/index.mjs";
+import { cloneDeep as C, omit as X } from "lodash-unified";
+import "../config-provider/index.mjs";
+import "../hooks/index.mjs";
+import { isDef as Y } from "../utils/index.mjs";
+import Z from "./hooks/use-get-columns.mjs";
+import "./style/index.css";
+import { useNamespace as ee } from "../config-provider/hooks/use-namespace.mjs";
+import { useGlobalConfig as ae } from "../config-provider/hooks/use-global-config.mjs";
+import { useControllableValue as te } from "../hooks/useControllableValue.mjs";
+const xe = /* @__PURE__ */ L({
+  name: "EditableTable",
+  __name: "index",
+  props: {
+    dropdownPrefixCls: {},
+    pagination: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    loading: {
+      type: [Boolean, Object],
+      default: void 0
+    },
+    size: {
+      default: "middle"
+    },
+    bordered: {
+      type: Boolean,
+      default: !1
+    },
+    locale: {},
+    onChange: {},
+    onResizeColumn: {},
+    rowSelection: {},
+    getPopupContainer: {},
+    scroll: {},
+    sortDirections: {
+      default: () => ["ascend", "descend"]
+    },
+    showSorterTooltip: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    prefixCls: {},
+    rowKey: {
+      default: "key"
+    },
+    tableLayout: {
+      default: "fixed"
+    },
+    rowClassName: {},
+    title: {},
+    footer: {},
+    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]
+    },
+    transformCellText: {},
+    columns: {},
+    value: {},
+    defaultValue: {},
+    "onUpdate:value": {},
+    maxLength: {},
+    name: {
+      default: "ap-editable-table-inner-name"
+    },
+    onFieldChange: {}
+  },
+  emits: ["update:value"],
+  setup(g, {
+    expose: h,
+    emit: w
+  }) {
+    const l = g, {
+      b: m,
+      em: y
+    } = ee("editable-table"), v = ae("uiMode", "aplus"), b = z(), R = w, {
+      value: s,
+      updateValue: B
+    } = te(l, R), d = j(), F = u.useWatch(l.name, d);
+    I(() => F.value, (t) => {
+      var n;
+      B(t), (n = l.onChange) == null || n.call(l, t);
+    });
+    const D = Z(l);
+    function E() {
+      var t;
+      (t = d.value) == null || t.resetFields();
+    }
+    async function _(t, n) {
+      var a;
+      const e = await ((a = d.value) == null ? void 0 : a.validateFields(t, n));
+      return e == null ? void 0 : e[l.name];
+    }
+    function k(t) {
+      var e, a, r;
+      const n = ((e = o(s)) == null ? void 0 : e.length) || 0;
+      Y(l.maxLength) && n >= l.maxLength || (r = (a = d.value) == null ? void 0 : a.setFieldValue) == null || r.call(a, l.name, [...o(s) || [], t || {}]);
+    }
+    function S(t) {
+      var e, a;
+      const n = C(o(s) || []);
+      n.splice(t, 1), (a = (e = d.value) == null ? void 0 : e.setFieldValue) == null || a.call(e, l.name, [...n]);
+    }
+    function V() {
+      return o(s);
+    }
+    function N(t) {
+      var n;
+      return (n = o(s)) == null ? void 0 : n[t];
+    }
+    function P(t, n) {
+      var a, r;
+      const e = C(o(s));
+      e[t] && (e[t] = {
+        ...e[t],
+        ...n
+      }, (r = (a = d.value) == null ? void 0 : a.setFieldValue) == null || r.call(a, l.name, [...e]));
+    }
+    return h({
+      resetFields: E,
+      validateFields: _,
+      add: k,
+      remove: S,
+      getRowData: N,
+      getRowsData: V,
+      setRowData: P
+    }), (t, n) => (p(), O(o(u), {
+      "initial-values": {
+        [l.name]: o(s)
+      },
+      ref_key: "formRef",
+      ref: d
+    }, {
+      default: i(() => [c(o(u).FormItem, {
+        name: t.name,
+        "no-style": ""
+      }, {
+        default: i(() => [c(o(Q), T(o(X)(l, ["name", "value", "onUpdate:value", "maxLength"]), {
+          class: [o(m)(), o(v) === "admin" ? o(m)("admin") : null],
+          columns: o(D),
+          "data-source": o(s)
+        }), K({
+          headerCell: i(({
+            column: e
+          }) => {
+            var a, r, f;
+            return [(a = e == null ? void 0 : e.fieldProps) != null && a.required || (f = (r = e == null ? void 0 : e.fieldProps) == null ? void 0 : r.rules) != null && f.length ? (p(), q(A, {
+              key: 0
+            }, [x("span", {
+              class: G(o(y)("header-cell", "required"))
+            }, "*", 2), x("span", null, H(e.title), 1)], 64)) : M("", !0)];
+          }),
+          _: 2
+        }, [U(b, (e, a) => ({
+          name: a,
+          fn: i((r) => [W(t.$slots, a, $(J(r || {})))])
+        }))]), 1040, ["class", "columns", "data-source"])]),
+        _: 3
+      }, 8, ["name"])]),
+      _: 3
+    }, 8, ["initial-values"]));
+  }
+});
+export {
+  xe as default
+};

package/es/src/editable-table/index.vue2.mjs

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

package/es/src/editable-table/interface.d.ts

@@ -1,6 +1,8 @@
 import { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import { ApTableValueFields, ValueEnum } from '../ap-table';
-import { InternalNamePath, NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
+import { NamePath, ValidateOptions } from 'ant-design-vue/es/form/interface';
+import { DataIndex } from 'ant-design-vue/es/vc-table/interface';
+import { FormItemProps } from 'ant-design-vue';
 
 export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'text', RecordType = any> = Omit<ColumnType<RecordType>, 'children'> & {
     /**
@@ -21,6 +23,7 @@ export type EditableColumnType<ValueType extends keyof ApTableValueFields = 'tex
     valueEnum?: ValueEnum;
     /**
      * 自定义表单
+     * @deprecated 未实现，请使用`customRender`
      */
     customRenderFormItem?: (config: EditableColumnType<ValueType, RecordType>) => any;
     /**
@@ -45,9 +48,13 @@ export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>,
      */
     columns?: EditableColumnType<any, RecordType>[];
     /**
-     * 同dataSource，传入的数组数据将作为表单的初始数据
+     * 表格数据v-model
      */
     value?: RecordType[];
+    /**
+     * 表格数据默认值（只生效一次，如果是异步数据，请使用`v-model`）
+     */
+    defaultValue?: RecordType[];
     'onUpdate:value'?: (value: RecordType[]) => void;
     /**
      * 数据修改时触发onChange（也包含数据的删除）
@@ -60,14 +67,72 @@ export type EditableTableProps<RecordType = any> = Omit<TableProps<RecordType>,
      */
     maxLength?: number;
     /**
-     * 设置可编辑表格的名字，如果是作为其它表单的一部分，需要设置此字段
+     * 设置可编辑表格的名字，如果不传，将会使用默认值
      */
     name?: any;
+    /**
+     * 当字段值变更的时候触发（注意，向表单设置值并不会触发）
+     * @returns
+     */
+    onFieldChange?: (rowIndex: number, fieldName: DataIndex, newValue: any) => void;
+};
+export type EditableTableFormItemProps<RecordType = any> = Omit<EditableTableProps<RecordType>, 'name'> & {
+    label?: string;
+    /**
+     * FormItem的name 暂不支持传入数组类型
+     */
+    name: string;
+    /**
+     * 额外的表单项配置属性
+     */
+    formItem?: Partial<Omit<FormItemProps, 'name' | 'label'>>;
 };
-export type EditableTableExpose<ModelType = any> = {
+export type EditableTableExpose<ModelType = any, RecordType = any> = {
+    /**
+     * 重设可编辑表格数据
+     * @param name
+     * @returns
+     */
     resetFields: (name?: NamePath) => void;
+    /**
+     * 作为单独的表单使用时，校验表格数据
+     * @param nameList
+     * @param options
+     * @returns
+     */
     validateFields: (nameList?: NamePath[] | string, options?: ValidateOptions) => Promise<Partial<ModelType>> | undefined;
-    getFieldsValue: (nameList?: true | InternalNamePath[]) => Partial<ModelType> | undefined;
-    add: (defaultValue?: any) => void;
+    /**
+     * 添加一行数据
+     * @param defaultValue
+     * @returns
+     */
+    add: (defaultValue?: Partial<RecordType>) => void;
+    /**
+     * 删除一行数据
+     * @param index
+     * @returns
+     */
     remove: (index: number) => void;
+    /**
+     * 获取所有行的数据
+     * @returns
+     */
+    getRowsData: () => RecordType[];
+    /**
+     * 获取指定行的数据
+     * @returns
+     */
+    getRowData: (index: number) => RecordType | undefined;
+    /**
+     * 设置表格行数据（数据会进行浅层合并）
+     * @param index
+     * @param data
+     * @returns
+     */
+    setRowData: (index: number, data: Partial<RecordType>) => void;
 };
+/**
+ * 可编辑表格作为表单项暴露的实例
+ * @description 作为Form表单使用时不再暴露表单相关的API
+ */
+export type EditableTableFormItemExpose<ModelType = any, RecordType = any> = Omit<EditableTableExpose<ModelType, RecordType>, 'resetFields' | 'validateFields'>;

package/es/src/editable-table/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/editable-table/style/index.css

@@ -5,7 +5,42 @@
 .aplus-editable-table .ant-form-item {
   margin-bottom: 20px;
 }
+.aplus-editable-table .ant-form-item-explain-error {
+  line-height: 20px;
+}
 .aplus-editable-table__header-cell--required {
   color: #FF4D4F;
   padding-right: 2px;
 }
+.aplus-editable-table .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-editable-table .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-editable-table tr > th.ant-table-cell {
+  background-color: #F2F6F9;
+  border-bottom-color: #E9EDF3;
+}
+.aplus-editable-table tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-editable-table tr > td.ant-table-cell {
+  border-top-color: #E9EDF3;
+}
+.aplus-editable-table-admin .ant-pagination {
+  margin-bottom: 0 !important;
+}
+.aplus-editable-table-admin .ant-pagination .ant-pagination-total-text {
+  flex: 1;
+}
+.aplus-editable-table-admin tr > th.ant-table-cell {
+  background-color: #FAFAFA;
+  border-bottom-color: #E9E9E9;
+}
+.aplus-editable-table-admin tr > th.ant-table-cell::before {
+  display: none;
+}
+.aplus-editable-table-admin tr > td.ant-table-cell {
+  border-top-color: #E9E9E9;
+}

package/es/src/editable-table/utils.mjs

@@ -0,0 +1,10 @@
+import { apTableFormItemMap as o } from "../ap-table/constants.mjs";
+function r(e) {
+  const n = o[e];
+  return n || console.warn(
+    `${e} can not render because of no default renderer, use customRender instead.`
+  ), n;
+}
+export {
+  r as getEditableComponent
+};

package/es/src/icon-picker/icon-picker.vue.d.ts

@@ -26,10 +26,10 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
 }, {
     mode: "svg" | "iconify";
     width: string;
-    value: string;
     copy: boolean;
-    allowClear: boolean;
+    value: string;
     readonly: boolean;
+    allowClear: boolean;
     pageSize: number;
 }, {}>;
 export default _default;