优化

package.json

@@ -9,8 +9,8 @@
 		"lint:eslint": "eslint \"./src/**/*.{vue,ts,tsx}\" --fix"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.1.14",
-		"@element-plus/icons-vue": "^2.1.0",
+		"@cool-vue/crud": "^7.1.15",
+		"@element-plus/icons-vue": "^2.3.1",
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",
 		"@wangeditor/editor-for-vue": "^5.1.12",
@@ -19,7 +19,7 @@
 		"core-js": "^3.32.1",
 		"dayjs": "^1.11.10",
 		"echarts": "^5.4.3",
-		"element-plus": "^2.5.4",
+		"element-plus": "^2.5.6",
 		"file-saver": "^2.0.5",
 		"lodash-es": "^4.17.21",
 		"marked": "^11.1.1",

packages/crud/index.d.ts

@@ -104,7 +104,9 @@ declare namespace Render {
 		options?: DictOptions | Vue.Ref<DictOptions>;
 		props?: Props | Vue.Ref<Props>;
 		style?: obj;
-		functionSlot?: boolean;
+		slots?: {
+			[key: string]: (data?: any) => any;
+		};
 		vm?: any;
 		[key: string]: any;
 	}
@@ -718,11 +720,6 @@ declare interface Config {
 	events: {
 		[key: string]: (...args: any[]) => any;
 	};
-	render: {
-		functionSlots: {
-			exclude: string[];
-		};
-	};
 	style: {
 		size: ElementPlus.Size;
 		colors: string[];

packages/crud/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.1.14",
+	"version": "7.1.15",
 	"private": false,
 	"main": "./dist/index.umd.min.js",
 	"typings": "types/index.d.ts",

packages/crud/src/provide.ts

@@ -68,12 +68,7 @@ function setConfig(app: App, options: Options = {}) {
 					}
 				}
 			},
-			events: {},
-			render: {
-				functionSlots: {
-					exclude: ["el-date-picker", "el-cascader", "el-time-select"]
-				}
-			}
+			events: {}
 		},
 		options || {}
 	);

packages/crud/src/utils/vnode.tsx

@@ -31,9 +31,6 @@ const regs: Map<string, any> = new Map();
 // 解析节点
 export function parseNode(vnode: any, options: Options): VNode {
 	const { scope, prop, slots, children, _data } = options || [];
-	const {
-		render: { functionSlots }
-	} = useConfig();
 
 	// 渲染后组件
 	let comp: VNode | null = null;
@@ -85,17 +82,13 @@ export function parseNode(vnode: any, options: Options): VNode {
 	if (vnode.vm) {
 		comp = h(regs.get(vnode.name), props);
 	} else {
-		// 是否函数式插槽
-		const isFunctionSlot =
-			!functionSlots.exclude?.includes(vnode.name) &&
-			(vnode.functionSlot === undefined ? true : vnode.functionSlot);
-
 		// 渲染组件
-		comp = h(
-			toRaw(resolveComponent(vnode.name)),
-			props,
-			isFunctionSlot ? () => children : children
-		);
+		comp = h(toRaw(resolveComponent(vnode.name)), props, {
+			default() {
+				return children;
+			},
+			...vnode.slots
+		});
 	}
 
 	// 挂载到 refs 中

packages/crud/types/components/form/helper/index.d.ts

@@ -97,7 +97,9 @@ export declare function useForm(): {
                     };
                 } | undefined;
                 style?: obj | undefined;
-                functionSlot?: boolean | undefined;
+                slots?: {
+                    [key: string]: (data?: any) => any;
+                } | undefined;
                 vm?: any;
             } | undefined;
             component?: {
@@ -128,7 +130,9 @@ export declare function useForm(): {
                     };
                 } | undefined;
                 style?: obj | undefined;
-                functionSlot?: boolean | undefined;
+                slots?: {
+                    [key: string]: (data?: any) => any;
+                } | undefined;
                 vm?: any;
             } | undefined;
             append?: {
@@ -159,7 +163,9 @@ export declare function useForm(): {
                     };
                 } | undefined;
                 style?: obj | undefined;
-                functionSlot?: boolean | undefined;
+                slots?: {
+                    [key: string]: (data?: any) => any;
+                } | undefined;
                 vm?: any;
             } | undefined;
             rules?: {

packages/crud/types/components/table/helper/index.d.ts

@@ -36,7 +36,9 @@ export declare function useTable(props: any): {
                     };
                 } | undefined;
                 style?: obj | undefined;
-                functionSlot?: boolean | undefined;
+                slots?: {
+                    [key: string]: (data?: any) => any;
+                } | undefined;
                 vm?: any;
             };
             search: {
@@ -73,7 +75,9 @@ export declare function useTable(props: any): {
                         };
                     } | undefined;
                     style?: obj | undefined;
-                    functionSlot?: boolean | undefined;
+                    slots?: {
+                        [key: string]: (data?: any) => any;
+                    } | undefined;
                     vm?: any;
                 };
             };

src/modules/base/components/avatar/index.tsx

@@ -12,7 +12,10 @@ export default defineComponent({
 			default: UserFilled
 		},
 		size: [String, Number] as PropType<"large" | "default" | "small" | number>,
-		shape: String as PropType<"circle" | "square">,
+		shape: {
+			type: String as PropType<"circle" | "square">,
+			default: "square"
+		},
 		fit: {
 			type: String as PropType<"fill" | "contain" | "cover" | "none" | "scale-down">,
 			default: "cover"
@@ -24,6 +27,8 @@ export default defineComponent({
 			return (
 				<el-avatar
 					style={{
+						display: "block",
+						margin: "auto",
 						height: props.size + "px",
 						width: props.size + "px"
 					}}

src/modules/base/views/user/index.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script lang="ts" name="sys-user" setup>
-import { useTable, useUpsert, useCrud } from "@cool-vue/crud";
+import { useTable, useUpsert, useCrud, setFocus } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
 import DeptList from "./components/dept-list.vue";
 import UserMove from "./components/user-move.vue";
@@ -296,7 +296,9 @@ const Upsert = useUpsert({
 				})
 			);
 		});
-	}
+	},
+
+	plugins: [setFocus("name")]
 });
 
 // 刷新列表

src/modules/demo/views/crud/components/form/component/index.vue

@@ -57,6 +57,20 @@ function open() {
 					name: "el-input"
 				}
 			},
+			{
+				label: "手机号",
+				prop: "phone",
+				value: "13255022000",
+				component: {
+					name: "el-input",
+					// 自定义插槽
+					slots: {
+						prepend() {
+							return "+86";
+						}
+					}
+				}
+			},
 			{
 				label: "年龄",
 				prop: "age",

src/modules/recycle/views/data.vue

@@ -98,7 +98,7 @@ function refresh(params?: any) {
 
 // 数据恢复
 function restore(id?: string) {
-	const ids = id ? [id] : Table.value?.selection;
+	const ids = id ? [id] : Table.value?.selection.map((e) => e.id);
 
 	ElMessageBox.confirm("此操作将恢复被删除的数据，是否继续？", "提示", {
 		type: "warning"

src/plugins/crud/config.ts

@@ -13,8 +13,8 @@ export default (): Merge<ModuleConfig, CrudOptions> => {
 		label: "CRUD",
 		description: "快速增删改查及一系列辅助组件",
 		author: "COOL",
-		version: "1.0.3",
-		updateTime: "2024-02-20",
+		version: "1.0.4",
+		updateTime: "2024-02-27",
 		demo: "/demo/crud",
 
 		// 组件全注册
@@ -44,11 +44,6 @@ export default (): Merge<ModuleConfig, CrudOptions> => {
 				},
 				// 按钮及提示文案
 				label: locale.zhCn
-			},
-			render: {
-				functionSlots: {
-					exclude: ["el-date-picker", "el-cascader", "el-time-select", "el-transfer"]
-				}
 			}
 		},
 

src/plugins/upload/components/upload-item/index.vue

@@ -272,7 +272,6 @@ onMounted(() => {
 	background-color: var(--el-fill-color-light);
 	border: 1px solid var(--el-fill-color-light);
 	box-sizing: border-box;
-	margin-bottom: 10px;
 	position: relative;
 
 	audio {

src/plugins/upload/components/upload.vue

@@ -6,7 +6,7 @@
 				`cl-upload--${type}`,
 				{
 					'is-disabled': disabled,
-					'is-drag': drag
+					'is-multiple': multiple
 				}
 			]"
 		>
@@ -32,19 +32,14 @@
 			</template>
 
 			<!-- 列表 -->
-			<draggable
+			<vue-draggable
 				class="cl-upload__list"
 				tag="div"
 				v-model="list"
 				ghost-class="Ghost"
 				drag-class="Drag"
-				:options="{
-					group: 'Upload',
-					animation: 300,
-					draggable: '.is-drag',
-					disabled: !draggable
-				}"
 				item-key="uid"
+				:disabled="!draggable"
 				@end="update"
 				v-if="showFileList"
 			>
@@ -78,7 +73,7 @@
 										<component :is="icon" v-if="icon" />
 										<picture-filled v-else />
 									</el-icon>
-									<span v-if="text">{{ text }}</span>
+									<span class="text" v-if="text">{{ text }}</span>
 								</div>
 							</slot>
 						</el-upload>
@@ -88,7 +83,6 @@
 				<!-- 列表 -->
 				<template #item="{ element: item, index }">
 					<el-upload
-						class="is-drag"
 						action=""
 						:accept="accept"
 						:show-file-list="false"
@@ -104,7 +98,6 @@
 						"
 						:headers="headers"
 						:disabled="disabled"
-						v-if="showFileList"
 					>
 						<slot name="item" :item="item" :index="index">
 							<div class="cl-upload__item">
@@ -120,7 +113,7 @@
 						</slot>
 					</el-upload>
 				</template>
-			</draggable>
+			</vue-draggable>
 		</div>
 	</div>
 </template>
@@ -128,7 +121,7 @@
 <script lang="ts" setup name="cl-upload">
 import { computed, ref, watch, type PropType, nextTick } from "vue";
 import { isArray, isNumber } from "lodash-es";
-import Draggable from "vuedraggable";
+import VueDraggable from "vuedraggable";
 import { ElMessage } from "element-plus";
 import { PictureFilled, UploadFilled } from "@element-plus/icons-vue";
 import { useForm } from "@cool-vue/crud";
@@ -495,10 +488,6 @@ defineExpose({
 		user-select: none;
 	}
 
-	&__item {
-		margin: 0 5px 5px 0;
-	}
-
 	&__demo {
 		font-size: 13px;
 
@@ -515,31 +504,32 @@ defineExpose({
 		}
 	}
 
+	&__file-btn {
+		margin-bottom: 10px;
+	}
+
 	:deep(.el-upload) {
-		&.is-drag {
-			.el-upload-dragger {
-				padding: 0;
-				border: 0;
-				background-color: transparent !important;
-				position: relative;
-				background-color: red;
-
-				$color: var(--el-color-primary);
-
-				&.is-dragover {
-					&::after {
-						display: block;
-						content: "";
-						position: absolute;
-						left: 0;
-						top: 0;
-						height: 100%;
-						width: 100%;
-						pointer-events: none;
-						border-radius: 8px;
-						box-sizing: border-box;
-						border: 1px dashed var(--color-primary);
-					}
+		display: block;
+
+		.el-upload-dragger {
+			padding: 0;
+			border: 0;
+			background-color: transparent !important;
+			position: relative;
+
+			&.is-dragover {
+				&::after {
+					display: block;
+					content: "";
+					position: absolute;
+					left: 0;
+					top: 0;
+					height: 100%;
+					width: 100%;
+					pointer-events: none;
+					border-radius: 8px;
+					box-sizing: border-box;
+					border: 1px dashed var(--el-color-primary);
 				}
 			}
 		}
@@ -556,6 +546,12 @@ defineExpose({
 		}
 	}
 
+	&.is-multiple {
+		.cl-upload__item {
+			margin: 0 5px 5px 0;
+		}
+	}
+
 	&:not(.is-disabled) {
 		.cl-upload__demo {
 			&:hover {
@@ -563,13 +559,5 @@ defineExpose({
 			}
 		}
 	}
-
-	&--file {
-		&:not(.is-drag) {
-			.cl-upload__list {
-				margin-top: 10px;
-			}
-		}
-	}
 }
 </style>

yarn.lock

@@ -282,10 +282,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@cool-vue/crud@^7.1.13":
-  version "7.1.13"
-  resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-7.1.13.tgz#8c150d0f0ccbe466628a1190ac19219054e93cca"
-  integrity sha512-e5Mt5HjYpr89sF+dMqudGHrcSP8KVdzNrn8hHEqgcpc1J7oAxyMtS8Wq2XjJY4XkxSZP7xeBEC6yqNgSQOYKyw==
+"@cool-vue/crud@^7.1.15":
+  version "7.1.15"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.1.15.tgz#fca31c2e822657cf3bc663301f61a60a551b5bdf"
+  integrity sha512-46AK1mRRvVqas11vFLkkXpE+9Q9ppTIr+pr5Mconcu/PHThf5tCgSTexvtfe8sd1bpA45tFjkJHTVg4IbjqFiA==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"
@@ -299,7 +299,7 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@element-plus/icons-vue@^2.1.0", "@element-plus/icons-vue@^2.3.1":
+"@element-plus/icons-vue@^2.3.1":
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
   integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
@@ -1756,6 +1756,27 @@ element-plus@^2.5.4:
     memoize-one "^6.0.0"
     normalize-wheel-es "^1.2.0"
 
+element-plus@^2.5.6:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-2.5.6.tgz#d63dabc6330c0e2abe6f97cf99013a30140940d1"
+  integrity sha512-zctKTiyIDmcnMp3K5WG1hglgraW9EbiCLiIDVtaMCS5mPMl2fRKdS0vOFGnECIq9taFoxnyoDwxHD81nv0B4RA==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.1"
+    "@element-plus/icons-vue" "^2.3.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^9.1.0"
+    async-validator "^4.2.5"
+    dayjs "^1.11.3"
+    escape-html "^1.0.3"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    lodash-unified "^1.0.2"
+    memoize-one "^6.0.0"
+    normalize-wheel-es "^1.2.0"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"