优化

package.json

@@ -9,7 +9,7 @@
 		"lint:eslint": "eslint \"./src/**/*.{vue,ts,tsx}\" --fix"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.1.16",
+		"@cool-vue/crud": "^7.1.18",
 		"@element-plus/icons-vue": "^2.3.1",
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",

packages/crud/index.d.ts

@@ -692,17 +692,18 @@ declare namespace ClContextMenu {
 	}
 
 	interface Options {
+		class?: string;
 		hover?:
 			| boolean
 			| {
 					target?: string;
 					className?: string;
 			  };
-		list: Item[];
+		list?: Item[];
 	}
 
 	interface Ref {
-		open(event: Event, options: Options): Ref;
+		open(event: Event, options: Options): { close: () => void };
 		close(): void;
 	}
 }

packages/crud/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.1.16",
+	"version": "7.1.18",
 	"private": false,
 	"main": "./dist/index.umd.min.js",
 	"typings": "types/index.d.ts",
@@ -11,6 +11,7 @@
 		"dist": "tsc && yarn build --target lib --name index ./src/index.ts"
 	},
 	"dependencies": {
+		"@element-plus/icons-vue": "^2.3.1",
 		"array.prototype.flat": "^1.2.4",
 		"core-js": "^3.21.1",
 		"element-plus": "^2.6.1",
@@ -21,6 +22,7 @@
 	"devDependencies": {
 		"@types/array.prototype.flat": "^1.2.1",
 		"@types/clone-deep": "^4.0.1",
+		"@types/lodash-es": "^4.17.12",
 		"@vue/cli-plugin-babel": "^5.0.1",
 		"@vue/cli-plugin-typescript": "^5.0.3",
 		"@vue/cli-service": "^5.0.3",

packages/crud/src/components/context-menu/index.tsx

@@ -1,4 +1,14 @@
-import { defineComponent, nextTick, onMounted, reactive, ref, h, render, toRaw } from "vue";
+import {
+	defineComponent,
+	nextTick,
+	onMounted,
+	reactive,
+	ref,
+	h,
+	render,
+	toRaw,
+	type PropType
+} from "vue";
 import { isString } from "lodash-es";
 import { addClass, contains, removeClass } from "../../utils";
 import { useRefs } from "../../hooks";
@@ -11,16 +21,12 @@ const ClContextMenu = defineComponent({
 	props: {
 		show: Boolean,
 		options: {
-			type: Object,
+			type: Object as PropType<ClContextMenu.Options>,
-			default: () => {
+			default: () => ({})
-				return {};
-			}
 		},
 		event: {
-			type: Object,
+			type: Object as PropType<ClContextMenu.Event>,
-			default: () => {
+			default: () => ({})
-				return {};
-			}
 		}
 	},
 
@@ -43,7 +49,7 @@ const ClContextMenu = defineComponent({
 		const ids = ref("");
 
 		// 阻止默认事件
-		function stopDefault(e: MouseEvent) {
+		function stopDefault(e: any) {
 			if (e.preventDefault) {
 				e.preventDefault();
 			}
@@ -71,26 +77,22 @@ const ClContextMenu = defineComponent({
 		}
 
 		// 目标元素
-		let targetEl: any = null;
+		let targetEl: any;
 
 		// 关闭
 		function close() {
 			visible.value = false;
 			ids.value = "";
-			removeClass(targetEl, "cl-context-menu__target");
+
+			if (targetEl) {
+				removeClass(targetEl, "cl-context-menu__target");
+			}
 		}
 
 		// 打开
-		function open(event: any, options?: any) {
+		function open(event: ClContextMenu.Event, options: ClContextMenu.Options = {}) {
-			let left = event.pageX;
-			let top = event.pageY;
-
-			if (!options) {
-				options = {};
-			}
-
 			// 点击样式
-			if (options.hover) {
+			if (options?.hover) {
 				const d = options.hover === true ? {} : options.hover;
 				targetEl = event.target;
 
@@ -105,7 +107,16 @@ const ClContextMenu = defineComponent({
 				}
 			}
 
-			if (options.list) {
+			// 自定义样式
+			if (options?.class) {
+				addClass(
+					refs["context-menu"].querySelector(".cl-context-menu__box"),
+					options.class
+				);
+			}
+
+			// 菜单列表
+			if (options?.list) {
 				list.value = parseList(options.list);
 			}
 
@@ -116,7 +127,10 @@ const ClContextMenu = defineComponent({
 			visible.value = true;
 
 			nextTick(() => {
-				const { clientHeight: h1, clientWidth: w1 } = event.target.ownerDocument.body;
+				let left = event.pageX;
+				let top = event.pageY;
+
+				const { clientHeight: h1, clientWidth: w1 } = event.target?.ownerDocument.body;
 				const { clientHeight: h2, clientWidth: w2 } =
 					refs["context-menu"].querySelector(".cl-context-menu__box");
 
@@ -176,7 +190,7 @@ const ClContextMenu = defineComponent({
 				});
 
 				// 默认打开
-				open(props.event, props.options);
+				open(props.event, props?.options);
 			}
 		});
 
@@ -244,14 +258,16 @@ const ClContextMenu = defineComponent({
 });
 
 export const ContextMenu = {
-	open(event: any, options: ClContextMenu.Options) {
+	open(event: ClContextMenu.Event, options: ClContextMenu.Options) {
-		const vm: any = h(ClContextMenu, {
+		const vm = h(ClContextMenu, {
 			show: true,
 			event,
 			options
 		});
 
 		render(vm, event.target.ownerDocument.createElement("div"));
+
+		return vm.component?.exposed;
 	}
 };
 

packages/crud/src/utils/parse.tsx

@@ -76,10 +76,18 @@ export function parseTableDict(value: any, item: ClTable.Column) {
 		// tag 返回
 		return result.map((e) => {
 			return h(
-				<el-tag disable-transitions effect="dark" style="margin: 2px; border: 0" />,
+				<el-tag disable-transitions style="margin: 2px; border: 0" />,
-				e,
 				{
-					default: () => e.label
+					type: e.type,
+					closable: e.closable,
+					hit: e.hit,
+					color: e.color,
+					size: e.size,
+					effect: e.effect || "dark",
+					round: e.round
+				},
+				{
+					default: () => <span>{e.label}</span>
 				}
 			);
 		});

packages/crud/tsconfig.json

@@ -17,7 +17,6 @@
 		"disableSizeLimit": true,
 		"baseUrl": ".",
 		"outDir": "dist",
-		"types": ["webpack-env"],
 		"paths": {},
 		"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
 	},

packages/crud/types/components/context-menu/index.d.ts

@@ -1,30 +1,31 @@
 /// <reference types="../index" />
+import { type PropType } from "vue";
 declare const ClContextMenu: import("vue").DefineComponent<{
     show: BooleanConstructor;
     options: {
-        type: ObjectConstructor;
+        type: PropType<ClContextMenu.Options>;
         default: () => {};
     };
     event: {
-        type: ObjectConstructor;
+        type: PropType<ClContextMenu.Event>;
         default: () => {};
     };
 }, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     options: {
-        type: ObjectConstructor;
+        type: PropType<ClContextMenu.Options>;
         default: () => {};
     };
     event: {
-        type: ObjectConstructor;
+        type: PropType<ClContextMenu.Event>;
         default: () => {};
     };
 }>>, {
-    options: Record<string, any>;
+    options: ClContextMenu.Options;
     show: boolean;
-    event: Record<string, any>;
+    event: ClContextMenu.Event;
 }, {}>;
 export declare const ContextMenu: {
-    open(event: any, options: ClContextMenu.Options): void;
+    open(event: ClContextMenu.Event, options: ClContextMenu.Options): Record<string, any> | null | undefined;
 };
 export default ClContextMenu;

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

@@ -4,5 +4,5 @@ export declare function useHeight({ config, Table }: {
     config: ClTable.Config;
 }): {
     maxHeight: import("vue").Ref<number>;
-    calcMaxHeight: import("lodash").DebouncedFunc<() => Promise<void>>;
+    calcMaxHeight: import("lodash-es").DebouncedFunc<() => Promise<void>>;
 };

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

@@ -20,8 +20,9 @@
 						type="success"
 						:disabled="Table?.selection.length == 0"
 						@click="toMove()"
-						>转移</el-button
 					>
+						转移
+					</el-button>
 					<cl-flex1 />
 					<cl-search-key placeholder="搜索用户名、姓名" />
 				</cl-row>
@@ -35,8 +36,9 @@
 								text
 								bg
 								@click="toMove(scope.row)"
-								>转移</el-button
 							>
+								转移
+							</el-button>
 						</template>
 					</cl-table>
 				</cl-row>

src/plugins/crud/config.ts

@@ -1,11 +1,11 @@
 import type { Merge, ModuleConfig } from "/@/cool";
 
 // npm
-import Crud, { locale, setFocus } from "@cool-vue/crud";
+// import Crud, { locale, setFocus } from "@cool-vue/crud";
 import "@cool-vue/crud/dist/index.css";
 
 // 调试、自定义crud
-// import Crud, { locale, setFocus } from "/~/crud/src";
+import Crud, { locale, setFocus } from "/~/crud/src";
 // import "/~/crud/src/static/index.scss";
 
 export default (): Merge<ModuleConfig, CrudOptions> => {
@@ -13,8 +13,8 @@ export default (): Merge<ModuleConfig, CrudOptions> => {
 		label: "CRUD",
 		description: "快速增删改查及一系列辅助组件",
 		author: "COOL",
-		version: "1.0.6",
+		version: "1.0.7",
-		updateTime: "2024-03-19",
+		updateTime: "2024-05-26",
 		demo: "/demo/crud",
 
 		// 组件全注册