@antdv-vue/pro-table 0.0.0-stage → 2.0.3

package/dist/components/EditableTable/EditableTable.js

@@ -0,0 +1,141 @@
+import InternalEditableProTable, { RecordCreator, useEditableProTableInstanceExpose } from "./InternalEditableTable.js";
+import { createVNode, defineComponent, mergeProps, shallowRef } from "vue";
+import ProForm$1 from "@antdv-vue/pro-form";
+import { FormItem } from "@antdv-vue/pro-utils";
+//#region src/components/EditableTable/EditableTable.tsx
+const EditableProTable = /* @__PURE__ */ defineComponent((props, { slots, attrs, expose }) => {
+	const form = ProForm$1.useFormInstance();
+	const editableTableRef = shallowRef(null);
+	expose(useEditableProTableInstanceExpose(editableTableRef));
+	return () => {
+		if (!props.name) return createVNode(InternalEditableProTable, mergeProps(attrs, { "ref": editableTableRef }, props, {
+			"tableLayout": props.tableLayout || "fixed",
+			"scroll": props.scroll || { x: "max-content" }
+		}), slots);
+		return createVNode(FormItem, mergeProps({ "style": { maxWidth: "100%" } }, props?.formItemProps, { "name": props.name }), { default: () => [createVNode(InternalEditableProTable, mergeProps(attrs, props, {
+			"ref": editableTableRef,
+			"tableLayout": props.tableLayout || "fixed",
+			"scroll": props.scroll || { x: "max-content" },
+			"editable": {
+				...props.editable,
+				form
+			}
+		}), slots)] });
+	};
+}, {
+	name: "EditableProTable",
+	inheritAttrs: false,
+	props: [
+		"beforeSearchSubmit",
+		"bodyCell",
+		"bordered",
+		"caption",
+		"cardBordered",
+		"cardProps",
+		"childrenColumnName",
+		"classes",
+		"columnEmptyText",
+		"columns",
+		"columnsState",
+		"components",
+		"controlled",
+		"dataSource",
+		"dateFormatter",
+		"debounceTime",
+		"defaultData",
+		"defaultExpandAllRows",
+		"defaultExpandedRowKeys",
+		"defaultSize",
+		"defaultValue",
+		"direction",
+		"dropdownPrefixCls",
+		"editable",
+		"errorBoundaryRender",
+		"expandIcon",
+		"expandIconColumnIndex",
+		"expandRowByClick",
+		"expandable",
+		"expandedRowClassName",
+		"expandedRowKeys",
+		"expandedRowRender",
+		"footer",
+		"form",
+		"formItemProps",
+		"getContainerWidth",
+		"getPopupContainer",
+		"ghost",
+		"headerCell",
+		"headerTitle",
+		"id",
+		"indentSize",
+		"loading",
+		"locale",
+		"manualRequest",
+		"maxLength",
+		"measureRowRender",
+		"name",
+		"onChange",
+		"onDataSourceChange",
+		"onExpand",
+		"onExpandedRowsChange",
+		"onHeaderRow",
+		"onLoad",
+		"onLoadingChange",
+		"onRequestError",
+		"onReset",
+		"onRow",
+		"onSizeChange",
+		"onSubmit",
+		"onTableChange",
+		"onValuesChange",
+		"options",
+		"optionsRender",
+		"pagination",
+		"params",
+		"polling",
+		"postData",
+		"prefixCls",
+		"recordCreatorProps",
+		"request",
+		"revalidateOnFocus",
+		"rootClass",
+		"rowClassName",
+		"rowHoverable",
+		"rowKey",
+		"rowSelection",
+		"scroll",
+		"search",
+		"searchFormRender",
+		"showHeader",
+		"showSorterTooltip",
+		"size",
+		"sortDirections",
+		"sticky",
+		"styles",
+		"summary",
+		"tableAlertOptionRender",
+		"tableAlertRender",
+		"tableClass",
+		"tableExtraRender",
+		"tableLayout",
+		"tableRender",
+		"tableStyle",
+		"tableViewRender",
+		"tailor",
+		"title",
+		"toolBarRender",
+		"toolbar",
+		"tooltip",
+		"type",
+		"value",
+		"virtual"
+	]
+});
+EditableProTable.RecordCreator = RecordCreator;
+EditableProTable.install = (app) => {
+	app.component(EditableProTable.name, EditableProTable);
+	app.component(RecordCreator.displayName, RecordCreator);
+	return app;
+};
+//#endregion
+export { EditableProTable as default };

package/dist/components/EditableTable/InternalEditableTable.d.ts

@@ -0,0 +1,189 @@
+import { FilterValue, ProTableInstance, ProTableProps } from "../../typing.js";
+import * as _$vue from "vue";
+import { CSSProperties, ComputedRef, FunctionalComponent, Ref, ShallowRef } from "vue";
+import { ProFormInstance } from "@antdv-vue/pro-form";
+import { IntlType, ParamsType } from "@antdv-vue/pro-provider";
+import * as _$_antdv_vue_pro_utils0 from "@antdv-vue/pro-utils";
+import { FormItemProps, ProFieldValueObjectType, ProFieldValueType, WithFalse } from "@antdv-vue/pro-utils";
+import * as _$antdv_next0 from "antdv-next";
+import { ButtonProps } from "antdv-next";
+import * as _$antdv_next_dist_table_interface0 from "antdv-next/dist/table/interface";
+import { Key as Key$1, VueNode as VueNode$1 } from "@v-c/util/dist/type";
+
+//#region src/components/EditableTable/InternalEditableTable.d.ts
+type EditableProTableInstance<T extends Record<string, any>> = ProTableInstance<T> & {
+  editableFormRef: ProFormInstance<T>;
+  /**
+   * 获取一行数据的
+   * @param rowIndex
+   * @returns T | undefined
+   *
+   * @example getRowData(1)  可以传入第几行的数据
+   * @example getRowData("id")  也可以传入 rowKey，根据你列的唯一key 来获得。
+   */
+  getRowData?: (rowIndex: string | number) => T | undefined;
+  /**
+   * 获取整个 table 的数据
+   * @returns T[] | undefined
+   */
+  getRowsData?: () => T[] | undefined;
+  /**
+   * 设置一行的数据，会将数据进行简单的 merge
+   *
+   * {title:"old", decs:"old",id:"old"} -> set {title:"new"} -> {title:"new", decs:"old",id:"old"}
+   *
+   * @description 只会做最第一层对象的 merge 哦。
+   * {title:"old", decs:{name:"old",key:"old"},id:"old"} -> set {decs:{name:"new"}} -> {title:"old", decs:{name:"new"},id:"old"} -> set {decs:{name:"old"}}
+   *
+   * @param rowIndex
+   * @param data
+   * @returns void
+   *
+   * 根据行号设置
+   * @example setRowData(1, { title:"new" })  可以传入修改第几行
+   *
+   * 根据行 id 设置
+   * @example setRowData("id", { title:"new" })  也可以传入 rowKey，根据你列的唯一 key 来设置。
+   *
+   * 清空原有数据
+   * @example setRowData(1, { title:undefined })
+   *
+   */
+  setRowData?: (rowIndex: string | number, data: Partial<T>) => void;
+};
+interface CreatorButtonResult {
+  creatorButtonDom: ComputedRef<WithFalse<VueNode$1>>;
+  buttonRenderProps: ComputedRef<Record<string, any>>;
+}
+interface RecordCreatorProps<DataSourceType> {
+  record: DataSourceType | ((index: number, dataSource: DataSourceType[]) => DataSourceType);
+  position?: 'top' | 'bottom';
+  /**
+   * 新增一行的类型
+   *
+   * @augments dataSource 将会新增一行数据到 dataSource 中，不支持取消，只能删除
+   * @augments cache 将会把数据放到缓存中，取消后消失
+   */
+  newRecordType?: 'dataSource' | 'cache';
+  /** 要增加到哪个节点下，一般用于多重嵌套表格 */
+  parentKey?: Key$1 | ((index: number, dataSource: DataSourceType[]) => Key$1);
+}
+type EditableProTableProps<T, U extends ParamsType, ValueType = 'text'> = Omit<ProTableProps<T, U, ValueType>, 'onChange'> & {
+  defaultValue?: T[];
+  value?: T[];
+  'onUpdate:value'?: (value?: T[]) => void;
+  onChange?: (value?: T[]) => void; /** @name onTableChange 原先的 table OnChange */
+  onTableChange?: ProTableProps<T, U>['onChange']; /** @name recordCreatorProps 新建按钮的设置 */
+  recordCreatorProps?: WithFalse<(RecordCreatorProps<T> & ButtonProps & {
+    style?: CSSProperties;
+    creatorButtonText?: VueNode$1;
+  })>; /** 最大行数 */
+  maxLength?: number; /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+  onValuesChange?: (values: T[], record: T) => void; /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+  controlled?: boolean; /** FormItem 的设置 */
+  formItemProps?: Omit<FormItemProps, 'name'>;
+};
+/** 可编辑表格的按钮 */
+declare const RecordCreator: FunctionalComponent<RecordCreatorProps<Record<string, any>>>;
+declare function useCreatorButton<DataType, U extends ParamsType, ValueType>({
+  recordCreatorProps,
+  maxLength,
+  value,
+  intl,
+  columnsLength,
+  tableViewRender
+}: {
+  recordCreatorProps: ComputedRef<EditableProTableProps<DataType, U, ValueType>['recordCreatorProps']>;
+  maxLength: ComputedRef<EditableProTableProps<DataType, U, ValueType>['maxLength']>;
+  value: Ref<readonly DataType[] | undefined>;
+  intl: ComputedRef<IntlType>;
+  columnsLength: ComputedRef<number | undefined>;
+  tableViewRender: ProTableProps<DataType, U, ValueType>['tableViewRender'];
+}): CreatorButtonResult;
+declare function useEditableProTableInstanceExpose<T extends Record<string, any>>(editableTableRef: ShallowRef<EditableProTableInstance<T> | null>): {
+  nativeElement: HTMLDivElement | null | undefined;
+  pageInfo: _$_antdv_vue_pro_utils0.PageInfo | undefined;
+  formRef: ProFormInstance<T> | null;
+  editableFormRef: ProFormInstance<T> | undefined;
+  getRowData: (rowIndex: string | number) => T | undefined;
+  getRowsData: () => T[] | undefined;
+  setRowData: (rowIndex: string | number, data: Partial<T>) => void | undefined;
+  preEditableKeys: ComputedRef<Key$1[] | undefined>;
+  focus: () => void | undefined;
+  fullScreen: () => Promise<void | undefined>;
+  cleanSelected: () => Promise<void | undefined>;
+  addEditRecord: (row: T, options?: _$_antdv_vue_pro_utils0.AddLineOptions) => Promise<boolean | undefined>;
+  cancelEditable: (recordKey: _$_antdv_vue_pro_utils0.RecordKey, needReTry?: boolean) => Promise<boolean | undefined>;
+  getRealIndex: (record: T) => number | undefined;
+  isEditable: (row: T & {
+    index: number;
+  }) => {
+    recordKey: string;
+    isEditable: boolean;
+    preIsEditable: boolean;
+  } | undefined;
+  onValuesChange: (value: T, values: T) => void | undefined;
+  reload: (resetPageIndex?: boolean) => Promise<void | undefined>;
+  reloadAndRest: () => Promise<void | undefined>;
+  reset: () => Promise<void | undefined>;
+  saveEditable: (recordKey: _$_antdv_vue_pro_utils0.RecordKey, needReTry?: boolean) => Promise<boolean | undefined>;
+  scrollTo: (arg: number | {
+    index?: number | undefined;
+    key?: Key$1 | undefined;
+    top?: number;
+  }) => void | undefined;
+  setPageInfo: (page: Partial<_$_antdv_vue_pro_utils0.PageInfo>) => Promise<void | undefined>;
+  startEditable: (recordKey: Key$1, record?: T | undefined) => Promise<boolean | undefined>;
+};
+declare const InternalEditableProTable: new <DataType extends Record<string, any>, Params extends ParamsType = ParamsType, ValueType extends (ProFieldValueType | ProFieldValueObjectType) = "text">(props: Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined; /** @name onTableChange 原先的 table OnChange */
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined; /** @name recordCreatorProps 新建按钮的设置 */
+  recordCreatorProps?: WithFalse<RecordCreatorProps<DataType> & ButtonProps & {
+    style?: CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined; /** 最大行数 */
+  maxLength?: number; /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined; /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+  controlled?: boolean; /** FormItem 的设置 */
+  formItemProps?: Omit<FormItemProps, "name">;
+} & {} & _$vue.VNodeProps & _$vue.AllowedComponentProps & _$vue.ComponentCustomProps) => _$vue.CreateComponentPublicInstanceWithMixins<Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined; /** @name onTableChange 原先的 table OnChange */
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined; /** @name recordCreatorProps 新建按钮的设置 */
+  recordCreatorProps?: WithFalse<RecordCreatorProps<DataType> & ButtonProps & {
+    style?: CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined; /** 最大行数 */
+  maxLength?: number; /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined; /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+  controlled?: boolean; /** FormItem 的设置 */
+  formItemProps?: Omit<FormItemProps, "name">;
+} & {}, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, _$vue.PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, _$vue.ComponentProvideOptions, {
+  P: {};
+  B: {};
+  D: {};
+  C: {};
+  M: {};
+  Defaults: {};
+}, Omit<ProTableProps<DataType, Params, ValueType>, "onChange"> & {
+  defaultValue?: DataType[] | undefined;
+  value?: DataType[] | undefined;
+  'onUpdate:value'?: ((value?: DataType[] | undefined) => void) | undefined;
+  onChange?: ((value?: DataType[] | undefined) => void) | undefined; /** @name onTableChange 原先的 table OnChange */
+  onTableChange?: ((pagination: _$antdv_next0.TablePaginationConfig, filters: Record<string, FilterValue | null>, sorter: _$antdv_next0.TableSorterResult<DataType> | _$antdv_next0.TableSorterResult<DataType>[], extra: _$antdv_next_dist_table_interface0.TableCurrentDataSource<DataType>) => void) | undefined; /** @name recordCreatorProps 新建按钮的设置 */
+  recordCreatorProps?: WithFalse<RecordCreatorProps<DataType> & ButtonProps & {
+    style?: CSSProperties;
+    creatorButtonText?: VueNode$1;
+  }> | undefined; /** 最大行数 */
+  maxLength?: number; /** Table 的值发生改变，为了适应 Form 调整了顺序 */
+  onValuesChange?: ((values: DataType[], record: DataType) => void) | undefined; /** 是否受控，如果为 true，每次 value 更新都会重置表单 */
+  controlled?: boolean; /** FormItem 的设置 */
+  formItemProps?: Omit<FormItemProps, "name">;
+} & {}, {}, {}, {}, {}, {}>;
+//#endregion
+export { EditableProTableInstance, EditableProTableProps, RecordCreator, RecordCreatorProps, InternalEditableProTable as default, useCreatorButton, useEditableProTableInstanceExpose };