fast-element-plus 2.0.15 → 2.0.17

package/dist/components/table/src/table.mjs

@@ -1,5 +1,6 @@
 import { debounce } from "../../../utils/async/index.mjs";
 import { createDateRangeShortcuts, createOneMonthRangeFromToday } from "../../../utils/date/index.mjs";
+import { omit, pick } from "../../../utils/object/index.mjs";
 import { randomString } from "../../../utils/string/index.mjs";
 import { useExpose } from "../../../utils/vue/expose.mjs";
 import { definePropType, useProps } from "../../../utils/vue/props.mjs";
@@ -13,10 +14,9 @@ import tableColumnSettingDialog_default from "./tableColumnSettingDialog.mjs";
 import tablePagination_default from "./tablePagination.mjs";
 import tableSearchForm_default from "./tableSearchForm.mjs";
 import { NotData } from "@fast-element-plus/icons-vue";
-import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, onActivated, onMounted, ref, resolveDirective, watch, watchEffect, withDirectives } from "vue";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, onActivated, onMounted, resolveDirective, shallowRef, watch, watchEffect, withDirectives } from "vue";
 import { Eleme, More, Refresh, Search, Setting } from "@element-plus/icons-vue";
 import { ElButton, ElDatePicker, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElImageViewer, ElInput, ElPagination, ElTable, ElTableColumn, useSizeProp } from "element-plus";
-import { isArray, isBoolean, isFunction, isNil, isNull, isNumber, isObject, isString, omit, pick } from "lodash-unified";
 //#region src/components/table/src/table.tsx
 /** Element Plus Table 的透传 Props 定义。 */
 const tableProps = {
@@ -388,53 +388,53 @@ const faTableProps = {
 /** FaTable 的运行时 Emits 定义。 */
 const faTableEmits = {
 	/** @description 当用户手动勾选数据行的 Checkbox 时触发的事件 */
-	select: (selection, row) => isArray(selection) && isObject(row),
+	select: (selection, row) => Array.isArray(selection) && typeof row === "object" && row !== null,
 	/** @description 当用户手动勾选全选 Checkbox 时触发的事件 */
-	selectAll: (selection) => isArray(selection),
+	selectAll: (selection) => Array.isArray(selection),
 	/** @description 当选择项发生变化时会触发该事件 */
-	selectionChange: (newSelection) => isArray(newSelection),
+	selectionChange: (newSelection) => Array.isArray(newSelection),
 	/** @description 当单元格 hover 进入时会触发该事件 */
-	cellMouseEnter: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	cellMouseEnter: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
 	/** @description 当单元格 hover 退出时会触发该事件 */
-	cellMouseLeave: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	cellMouseLeave: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
 	/** @description 当某个单元格被点击时会触发该事件 */
-	cellClick: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	cellClick: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
 	/** @description 当某个单元格被双击击时会触发该事件 */
-	cellDblclick: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	cellDblclick: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
 	/** @description 当某个单元格被鼠标右键点击时会触发该事件 */
-	cellContextmenu: (row, column, cell, event) => isObject(row) && isObject(column) && cell instanceof HTMLTableCellElement && event instanceof Event,
+	cellContextmenu: (row, column, cell, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && cell instanceof HTMLTableCellElement && event instanceof Event,
 	/** @description 当某一行被点击时会触发该事件 */
-	rowClick: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	rowClick: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
 	/** @description 当某一行被鼠标右键点击时会触发该事件 */
-	rowContextmenu: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	rowContextmenu: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
 	/** @description 当某一行被双击时会触发该事件 */
-	rowDblclick: (row, column, event) => isObject(row) && isObject(column) && event instanceof Event,
+	rowDblclick: (row, column, event) => typeof row === "object" && row !== null && typeof column === "object" && column !== null && event instanceof Event,
 	/** @description 当某一列的表头被点击时会触发该事件 */
-	headerClick: (column, event) => isObject(column) && event instanceof Event,
+	headerClick: (column, event) => typeof column === "object" && column !== null && event instanceof Event,
 	/** @description 当某一列的表头被鼠标右键点击时触发该事件 */
-	headerContextmenu: (column, event) => isObject(column) && event instanceof Event,
+	headerContextmenu: (column, event) => typeof column === "object" && column !== null && event instanceof Event,
 	/** @description 当表格的排序条件发生变化的时候会触发该事件 */
-	sortChange: (data) => isObject(data),
+	sortChange: (data) => typeof data === "object" && data !== null,
 	/** @description column 的 key， 如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件 */
-	filterChange: (newFilters) => isObject(newFilters),
+	filterChange: (newFilters) => typeof newFilters === "object" && newFilters !== null,
 	/** @description 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 */
-	currentChange: (currentRow, oldCurrentRow) => isObject(currentRow) && (isNull(oldCurrentRow) || isObject(oldCurrentRow)),
+	currentChange: (currentRow, oldCurrentRow) => typeof currentRow === "object" && currentRow !== null && (oldCurrentRow === null || typeof oldCurrentRow === "object" && oldCurrentRow !== null),
 	/** @description 当拖动表头改变了列的宽度的时候会触发该事件 */
-	headerDragend: (newWidth, oldWidth, column, event) => isNumber(newWidth) && isNumber(oldWidth) && isObject(column) && event instanceof MouseEvent,
+	headerDragend: (newWidth, oldWidth, column, event) => typeof newWidth === "number" && typeof oldWidth === "number" && typeof column === "object" && column !== null && event instanceof MouseEvent,
 	/** @description 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded） */
-	expandChange: (row, expanded) => isObject(row) && (isBoolean(expanded) || isArray(expanded)),
+	expandChange: (row, expanded) => typeof row === "object" && row !== null && (typeof expanded === "boolean" || Array.isArray(expanded)),
 	/** @description 表格滚动时触发 */
-	scroll: (data) => isObject(data),
+	scroll: (data) => typeof data === "object" && data !== null,
 	/** @description 表格刷新事件 */
-	refresh: (params) => isObject(params),
+	refresh: (params) => typeof params === "object" && params !== null,
 	/** @description 表格重置事件 */
-	reset: (params) => isObject(params),
+	reset: (params) => typeof params === "object" && params !== null,
 	/** @description 分页页码改变事件 */
-	sizeChange: (pageSize) => isNumber(pageSize),
+	sizeChange: (pageSize) => typeof pageSize === "number",
 	/** @description 分页改变事件 */
-	paginationChange: (pageIndex, pageSize) => isNumber(pageIndex) && isNumber(pageSize),
+	paginationChange: (pageIndex, pageSize) => typeof pageIndex === "number" && typeof pageSize === "number",
 	/** @description 自定义单元格点击事件 */
-	customCellClick: (emitName, { row, column, $index }) => (isNil(emitName) || isString(emitName)) && isObject(row) && isObject(column) && isNumber($index)
+	customCellClick: (emitName, { row, column, $index }) => (emitName == null || typeof emitName === "string") && typeof row === "object" && row !== null && typeof column === "object" && column !== null && typeof $index === "number"
 };
 var table_default = defineComponent({
 	name: "FaTable",
@@ -442,22 +442,22 @@ var table_default = defineComponent({
 	emits: faTableEmits,
 	slots: makeSlots(),
 	setup(props, { slots, emit, expose }) {
-		const { _globalSize, state, elementRef, tableRef, handleTableColumnAutoWidth, loadTableColumns, handleSizeChange, handlePaginationChange, defaultSearchTime, tableSearch, tableReset, doRender, doLoading, handleCustomCellClick } = useTable(props, slots, emit);
+		const columnSettingRef = shallowRef(null);
+		const { globalSize, state, elementRef, tableRef, handleTableColumnAutoWidth, loadTableColumns, handleSizeChange, handlePaginationChange, defaultSearchTime, tableSearch, tableReset, doRender, doLoading, handleCustomCellClick } = useTable(props, slots, emit);
 		const notifyColumnsChange = debounce(() => props.columnsChange?.(state.orgColumns), 500);
 		const resizeTableColumns = debounce(handleTableColumnAutoWidth, 100);
-		const columnSettingRef = ref();
 		let lastRowIndex = 0;
 		const getInitParam = () => {
 			return typeof props.initParam === "object" && props.initParam !== null ? props.initParam : {};
 		};
 		const getRowKey = (row) => {
-			const value = isFunction(props.rowKey) ? props.rowKey(row) : tableUtil.handleRowAccordingToProp(row, props.rowKey);
+			const value = typeof props.rowKey === "function" ? props.rowKey(row) : tableUtil.handleRowAccordingToProp(row, props.rowKey);
 			return typeof value === "string" || typeof value === "number" ? value : void 0;
 		};
 		const indexMethod = (index) => {
 			if (index === 0) lastRowIndex = 0;
-			if (state.spanColumns?.length > 0) {
-				if (Number(state.tableSpanData["__table-index"]?.[index] ?? 0) === 0) return lastRowIndex + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize + 1;
+			if (state.spanColumns.length > 0) {
+				if ((state.tableSpanData["__table-index"]?.[index] ?? 0) === 0) return lastRowIndex + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize + 1;
 				else {
 					lastRowIndex++;
 					return lastRowIndex + (state.tablePagination.pageIndex - 1) * state.tablePagination.pageSize;
@@ -468,7 +468,7 @@ var table_default = defineComponent({
 		const handleSelect = (selection, row) => {
 			if (props.single) {
 				tableRef.value?.clearSelection();
-				if (selection.length > 0 && row) tableRef.value?.toggleRowSelection(row);
+				if (selection.length > 0) tableRef.value?.toggleRowSelection(row);
 			}
 			emit("select", selection, row);
 		};
@@ -517,7 +517,7 @@ var table_default = defineComponent({
 			else if (column.multiOrder === "descending") column.multiOrder = "ascending";
 			else column.multiOrder = void 0;
 			const initSortList = getInitParam()["sortList"];
-			state.searchParam.sortList = [...isArray(initSortList) ? initSortList : [], ...state.searchParam.sortList ?? []].filter((item, index, list) => list.findIndex((candidate) => candidate.enField === item.enField) === index);
+			state.searchParam.sortList = [...Array.isArray(initSortList) ? initSortList : [], ...state.searchParam.sortList ?? []].filter((item, index, list) => list.findIndex((candidate) => candidate.enField === item.enField) === index);
 			const orgColumn = state.orgColumns.find((f) => f.prop === normalizedProp);
 			const enField = orgColumn?.sortableField ?? orgColumn?.prop ?? column.property;
 			const fieldIndex = state.searchParam.sortList.findIndex((f) => f.enField === enField);
@@ -555,13 +555,13 @@ var table_default = defineComponent({
 			}
 			const columnInfo = state.tableColumns.find((f) => f.prop === column.property);
 			if (columnInfo?.dataDeleteField) {
-				if (row?.[columnInfo.dataDeleteField] === true) {
+				if (row[columnInfo.dataDeleteField] === true) {
 					if (localCellClassName) localCellClassName += " fa-table__data-delete-column";
 					else localCellClassName = "fa-table__data-delete-column";
 				}
 			}
 			if (props.cellClassName) {
-				const cellClassName = isString(props.cellClassName) ? props.cellClassName : props.cellClassName({
+				const cellClassName = typeof props.cellClassName === "string" ? props.cellClassName : props.cellClassName({
 					row,
 					column,
 					rowIndex,
@@ -575,7 +575,7 @@ var table_default = defineComponent({
 		const handleHeaderCellClassName = ({ row, column, rowIndex, columnIndex }) => {
 			column.order = column.multiOrder === "ascending" || column.multiOrder === "descending" ? column.multiOrder : null;
 			if (props.headerCellClassName) {
-				if (isFunction(props.headerCellClassName)) return props.headerCellClassName({
+				if (typeof props.headerCellClassName === "function") return props.headerCellClassName({
 					row,
 					column,
 					rowIndex,
@@ -587,9 +587,15 @@ var table_default = defineComponent({
 		};
 		const handleSpanMethod = ({ column, rowIndex }) => {
 			/** @description 原生的 span-method 会失效 */
-			const pKey = column.property ?? column.columnKey;
+			const property = column.property;
+			const columnKey = column.columnKey;
+			const pKey = property ?? columnKey;
+			if (pKey === void 0 || pKey === null) return {
+				rowspan: 1,
+				colspan: 1
+			};
 			if (state.spanColumns.findIndex((f) => f.prop === pKey) !== -1) {
-				const rowspan = Number(state.tableSpanData[pKey]?.[rowIndex] ?? 0);
+				const rowspan = state.tableSpanData[pKey]?.[rowIndex] ?? 0;
 				if (rowspan > 0) return {
 					rowspan,
 					colspan: 1
@@ -618,52 +624,6 @@ var table_default = defineComponent({
 			state.previewList = [url];
 			state.imagePreview = true;
 		};
-		onMounted(async () => {
-			state.initParam = getInitParam();
-			defaultSearchTime();
-			Object.entries(getInitParam()).forEach(([key, value]) => {
-				state.searchParam[key] = value;
-			});
-			await tableSearch();
-			watch(() => props.columns, () => {
-				loadTableColumns();
-			}, {
-				deep: true,
-				immediate: true
-			});
-			watch(() => props.initParam, () => {
-				Object.entries(getInitParam()).forEach(([key, value]) => {
-					state.searchParam[key] = value;
-				});
-			}, { deep: true });
-			watch(() => props.data, () => {
-				if (!props.requestApi && props.autoRefresh) return tableSearch();
-			}, {
-				deep: true,
-				immediate: true
-			});
-			watchEffect(() => {
-				const element = elementRef.value;
-				if (element) {
-					const observer = new ResizeObserver((entries) => {
-						for (const entry of entries) {
-							const { width, height } = entry.contentRect;
-							const widthChanged = state.tableWidth !== width;
-							state.tableWidth = width;
-							state.tableHeight = height;
-							if (widthChanged) resizeTableColumns();
-						}
-					});
-					observer.observe(element);
-					return () => {
-						observer.disconnect();
-					};
-				}
-			});
-		});
-		onActivated(() => {
-			handleTableColumnAutoWidth();
-		});
 		const tableColumnOmitNames = [
 			"multiOrder",
 			"columnId",
@@ -674,11 +634,53 @@ var table_default = defineComponent({
 			"pureSearch",
 			"search"
 		];
-		const searchFormSlotNames = computed(() => [...new Set(state.searchColumns.flatMap((column) => isString(column.search?.slot) ? [column.search.slot] : []))]);
-		const tableColumnSlotNames = computed(() => [...new Set(state.tableColumns.flatMap((column) => [column.slot, column.headerSlot].filter((name) => isString(name))))]);
+		const searchFormSlotNames = computed(() => [...new Set(state.searchColumns.flatMap((column) => typeof column.search?.slot === "string" ? [column.search.slot] : []))]);
+		const tableColumnSlotNames = computed(() => [...new Set(state.tableColumns.flatMap((column) => [column.slot, column.headerSlot].filter((name) => typeof name === "string")))]);
 		const searchInputClearable = computed(() => {
 			const value = state.searchParam.searchValue;
-			return value !== void 0 && value !== null && value !== "" || state.searchValueUpdate.length > 0;
+			return value !== void 0 && value !== "" || state.searchValueUpdate.length > 0;
+		});
+		watch(() => props.columns, () => {
+			loadTableColumns();
+		}, { deep: true });
+		watch(() => props.initParam, () => {
+			Object.entries(getInitParam()).forEach(([key, value]) => {
+				state.searchParam[key] = value;
+			});
+		}, { deep: true });
+		watch(() => props.data, () => {
+			if (!props.requestApi && props.autoRefresh) return tableSearch();
+		}, { deep: true });
+		watchEffect(() => {
+			const element = elementRef.value;
+			if (element) {
+				const observer = new ResizeObserver((entries) => {
+					for (const entry of entries) {
+						const { width, height } = entry.contentRect;
+						const widthChanged = state.tableWidth !== width;
+						state.tableWidth = width;
+						state.tableHeight = height;
+						if (widthChanged) resizeTableColumns();
+					}
+				});
+				observer.observe(element);
+				return () => {
+					observer.disconnect();
+				};
+			}
+		});
+		onMounted(async () => {
+			state.initParam = getInitParam();
+			defaultSearchTime();
+			Object.entries(getInitParam()).forEach(([key, value]) => {
+				state.searchParam[key] = value;
+			});
+			await tableSearch();
+			loadTableColumns();
+			if (!props.requestApi && props.autoRefresh) await tableSearch();
+		});
+		onActivated(() => {
+			handleTableColumnAutoWidth();
 		});
 		const elTableProps = useProps(props, tableProps, [
 			"data",
@@ -690,13 +692,13 @@ var table_default = defineComponent({
 			"ref": elementRef,
 			"class": [
 				"fa-table",
-				`fa-table-${_globalSize.value}`,
-				`fa-table__${props.tableKey ?? "notFound"}`,
+				`fa-table-${globalSize.value}`,
+				`fa-table__${props.tableKey}`,
 				{ fa__click__disabled: state.loading }
 			],
 			"style": {
-				"--fa-table-width": `${state.tableWidth ? `${state.tableWidth}px` : ""}`,
-				"--fa-table-height": `${state.tableHeight ? `${state.tableHeight}px` : ""}`
+				"--fa-table-width": state.tableWidth ? `${state.tableWidth}px` : "",
+				"--fa-table-height": state.tableHeight ? `${state.tableHeight}px` : ""
 			}
 		}, [
 			createVNode(tableSearchForm_default, {
@@ -731,13 +733,9 @@ var table_default = defineComponent({
 						"onCompositionend": () => {
 							state.searchValueUpdate = "";
 						},
-						"onChange": () => {
-							tableSearch();
-						}
+						"onChange": tableSearch
 					}, null), createVNode("div", { "class": "fa-table__main-header-right__div-search__hidden" }, [state.searchParam.searchValue, state.searchValueUpdate])]),
-					props.requestApi && !props.hideSearchTime && createVNode(ElDatePicker, mergeProps({ onChange: () => {
-						tableSearch();
-					} }, {
+					props.requestApi && !props.hideSearchTime && createVNode(ElDatePicker, mergeProps({ onChange: tableSearch }, {
 						"class": "fa-table__main-header-right__data-search",
 						"popperClass": "fa-table__main-header-right__data-search__popper",
 						"disabled": state.loading,
@@ -758,9 +756,7 @@ var table_default = defineComponent({
 						"title": "刷新",
 						"circle": true,
 						"icon": Refresh,
-						"onClick": () => {
-							tableSearch();
-						}
+						"onClick": tableSearch
 					}, null),
 					props.searchBtn && state.searchColumns.length > 0 && createVNode(ElButton, {
 						"loading": state.loading,
@@ -783,9 +779,7 @@ var table_default = defineComponent({
 						dropdown: () => createVNode(ElDropdownMenu, null, { default: () => [slots.columnSetting?.(), createVNode(ElDropdownItem, {
 							"title": "表格列配置",
 							"divided": true,
-							"onClick": () => {
-								columnSettingRef.value?.open();
-							}
+							"onClick": () => columnSettingRef.value?.open()
 						}, { default: () => [createTextVNode("表格列配置")] })] })
 					}),
 					slots.toolButton?.({
@@ -886,7 +880,7 @@ var table_default = defineComponent({
 								...getTableDefaultSlots(state)
 							})])
 						}),
-						state.tableColumns?.length === 0 ? slots.default?.() : state.tableColumns.map((col) => col.show && (col.type === "expand" ? createVNode(ElTableColumn, mergeProps(col, {
+						state.tableColumns.length === 0 ? slots.default?.() : state.tableColumns.map((col) => col.show && (col.type === "expand" ? createVNode(ElTableColumn, mergeProps(col, {
 							"width": 35,
 							"fixed": col.fixed ?? "left",
 							"resizable": false