优化，crud添加 prop 提示

package.json

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

packages/crud/index.d.ts

@@ -40,8 +40,8 @@ declare type obj = {
 declare type DeepPartial<T> = T extends Function
 	? T
 	: T extends object
-	? { [P in keyof T]?: DeepPartial<T[P]> }
-	: T;
+	  ? { [P in keyof T]?: DeepPartial<T[P]> }
+	  : T;
 
 // 合并
 declare type Merge<A, B> = Omit<A, keyof B> & B;
@@ -333,6 +333,7 @@ declare namespace ClTable {
 		search: {
 			isInput: boolean;
 			value: any;
+			refreshOnChange: Boolean;
 			component: Render.Component;
 		};
 		dict: DictOptions | Vue.Ref<DictOptions>;
@@ -626,7 +627,7 @@ declare namespace ClUpsert {
 		mode: "add" | "update" | "info";
 	}
 
-	interface Options<T> extends DeepPartial<Config> {
+	interface Options<T = any> extends DeepPartial<Config<T>> {
 		items?: ClForm.Items<T>;
 	}
 }

packages/crud/package.json

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

packages/crud/src/App.vue

@@ -1,54 +1,52 @@
 <template>
 	<div>
-		<div>CRUD v7.0.0</div>
+		<div>CRUD DEMO v7.0.0</div>
 
 		<cl-crud>
 			<cl-add-btn />
-
 			<cl-upsert ref="Upsert"></cl-upsert>
 		</cl-crud>
 	</div>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
+<script setup lang="tsx">
 import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks";
-// Test
 
 interface Data {
 	name?: string;
 	age?: number;
-	formatter?(): string;
 	[key: string]: any;
 }
 
-type Form = {
-	data?: Data;
-	list?: Data[] | (() => any)[];
-};
-
-function useF<T>(options: Form): Form {
-	return options;
-}
-
-const form = useF({
-	list: [
+const Upsert = useUpsert<Data>({
+	items: [
 		{
-			name: "A"
+			label: "xx",
+			prop: "age",
+			component: {
+				name: "el-input"
+			}
 		},
 		() => {
 			return {
-				name: form.data?.age == 12 ? "A" : "B"
+				hidden: Upsert.value?.mode == "add",
+				label: "x"
 			};
 		}
-	]
+	],
+	onOpened(data) {}
 });
 
 const Table = useTable<Data>({
 	columns: [
 		{
 			label: "xx",
-			prop: "a"
+			prop: "a",
+			search: {
+				component: {
+					name: "el-date-picker"
+				}
+			}
 		}
 	]
 });
@@ -64,24 +62,6 @@ Form.value?.open({
 	]
 });
 
-const Upsert = useUpsert<Data>({
-	items: [
-		{
-			label: "xx",
-			prop: "age",
-			component: {
-				name: "el-input"
-			}
-		},
-		() => {
-			return {
-				hidden: Upsert.value?.mode == "add",
-				label: "x"
-			};
-		}
-	]
-});
-
 const Search = useSearch<Data>({
 	items: [
 		{

packages/crud/src/components/table/helper/header.tsx

@@ -47,10 +47,13 @@ export function renderHeader(item: ClTable.Column, { scope, slots }: any) {
 			item.search.value = val;
 		},
 		onChange(val: any) {
-			crud.value?.refresh({
-				page: 1,
-				[item.prop]: val === "" ? undefined : val
-			});
+			// 更改时刷新列表
+			if (item.search.refreshOnChange) {
+				crud.value?.refresh({
+					page: 1,
+					[item.prop]: val === "" ? undefined : val
+				});
+			}
 		}
 	});
 

packages/crud/src/hooks/crud.ts

@@ -65,7 +65,7 @@ export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void
 		provide("useCrud__options", options);
 	}
 
-	watch(Crud, (val: any) => {
+	watch(Crud, (val) => {
 		if (val) {
 			if (cb) {
 				cb(val);
@@ -77,7 +77,7 @@ export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void
 }
 
 // 新增、编辑
-export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref> {
+export function useUpsert<T = any>(options?: ClUpsert.Options<T>) {
 	const Upsert = ref<ClUpsert.Ref>();
 	useParent("cl-upsert", Upsert);
 
@@ -87,7 +87,7 @@ export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.
 
 	watch(
 		Upsert,
-		(val: any) => {
+		(val) => {
 			if (val) {
 				if (options) {
 					const event = useEvent(["onOpen", "onOpened", "onClosed"], {
@@ -105,7 +105,7 @@ export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.
 		}
 	);
 
-	return Upsert as Ref<ClUpsert.Ref<T>>;
+	return Upsert;
 }
 
 // 表格
@@ -164,7 +164,7 @@ export function useDialog(options?: { onFullscreen(visible: boolean): void }) {
 
 	watch(
 		() => Dialog?.fullscreen.value,
-		(val: any) => {
+		(val) => {
 			options?.onFullscreen(val);
 		}
 	);

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

@@ -66,11 +66,9 @@ export declare function useForm(): {
             label?: string | undefined;
             renderLabel?: any;
             flex?: boolean | undefined;
-            hidden?: boolean | ((options: {
+            hidden?: ((options: {
                 scope: obj;
-            }) => boolean) | {
-                value: boolean;
-            } | undefined;
+            }) => boolean) | undefined;
             prepend?: {
                 [x: string]: any;
                 name?: string | undefined;
@@ -189,9 +187,9 @@ export declare function useForm(): {
         form: obj;
         isReset?: boolean | undefined;
         on?: {
-            open?: ((data: obj) => void) | undefined;
+            open?: ((data: any) => void) | undefined;
             close?: ((action: ClForm.CloseAction, done: fn) => void) | undefined;
-            submit?: ((data: obj, event: {
+            submit?: ((data: any, event: {
                 close: fn;
                 done: fn;
             }) => void) | undefined;

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

@@ -42,6 +42,9 @@ export declare function useTable(props: any): {
             search: {
                 isInput: boolean;
                 value: any;
+                refreshOnChange: {
+                    valueOf: () => boolean;
+                };
                 component: {
                     [x: string]: any;
                     name?: string | undefined;

packages/crud/types/hooks/crud.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="../index" />
 import { Ref } from "vue";
 export declare function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | undefined>;
-export declare function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<T> | undefined>;
+export declare function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<any> | undefined>;
 export declare function useTable<T = any>(options?: ClTable.Options<T>): Ref<ClTable.Ref<T> | undefined>;
 export declare function useForm<T = any>(cb?: (app: ClForm.Ref<T>) => void): Ref<ClForm.Ref<T> | undefined>;
 export declare function useAdvSearch<T = any>(options?: ClAdvSearch.Options<T>): Ref<ClAdvSearch.Ref<T> | undefined>;

src/config/proxy.ts

@@ -1,7 +1,6 @@
 export const proxy = {
 	"/dev/": {
-		target: "https://test-admin.cool-js.cloud",
-		// target: "http://127.0.0.1:8001",
+		target: "http://127.0.0.1:8001",
 		changeOrigin: true,
 		rewrite: (path: string) => path.replace(/^\/dev/, "")
 	},

src/modules/demo/components/form-btn.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useCrud, useForm, useTable, useUpsert } from "@cool-vue/crud";
+import { useCrud, useForm, useTable, useUpsert, setFocus } from "@cool-vue/crud";
 import { useCool } from "/@/cool";
 
 const { refs, setRefs, service } = useCool();
@@ -57,7 +57,8 @@ const Upsert = useUpsert({
 				name: "el-date-picker"
 			}
 		}
-	]
+	],
+	plugins: [setFocus()]
 });
 
 // cl-table
@@ -104,7 +105,7 @@ function open() {
 			labelPosition: "top"
 		},
 		dialog: {
-			height: "500px",
+			height: "70vh",
 			width: "1000px"
 		},
 		items: [

src/modules/demo/views/crud.vue

@@ -151,7 +151,8 @@ function refresh(params?: any) {
 }
 
 // 新增、编辑
-const Upsert = useUpsert({
+// 插入类型 <Eps.UserInfoEntity>，prop 和 data 会有提示
+const Upsert = useUpsert<Eps.UserInfoEntity>({
 	dialog: {
 		height: "600px", // 固定高
 		width: "1000px" // 固定宽
@@ -165,15 +166,15 @@ const Upsert = useUpsert({
 				type: "card",
 				labels: [
 					{
-						label: "基础",
+						label: "基础信息",
 						value: "base"
 					},
 					{
-						label: "选择",
+						label: "选择用户",
 						value: "select"
 					},
 					{
-						label: "其他",
+						label: "其他配置",
 						value: "other"
 					}
 				]
@@ -181,7 +182,7 @@ const Upsert = useUpsert({
 		},
 		{
 			label: "头像",
-			prop: "avatar",
+			prop: "avatarUrl",
 			group: "base",
 			component: {
 				name: "cl-upload"
@@ -240,13 +241,34 @@ const Upsert = useUpsert({
 			]
 		},
 		{
-			label: "省市区",
-			prop: "pca",
+			prop: "contact",
 			group: "base",
 			component: {
-				name: "cl-distpicker"
-			}
+				name: "cl-form-card",
+				props: {
+					label: "联系信息",
+					expand: false
+				}
+			},
+			children: [
+				{
+					label: "手机号",
+					prop: "phone",
+					component: {
+						name: "el-input"
+					}
+				},
+				{
+					label: "省市区",
+					prop: "pca",
+					group: "base",
+					component: {
+						name: "cl-distpicker"
+					}
+				}
+			]
 		},
+
 		{
 			label: "",
 			prop: "userIds",
@@ -400,7 +422,6 @@ const Table = useTable({
 
 			// 带搜索组件
 			search: {
-				// cool渲染方式
 				component: {
 					name: "el-input",
 					props: {
@@ -430,7 +451,6 @@ const Table = useTable({
 
 			// 带搜索组件
 			search: {
-				// jsx方式
 				component: {
 					name: "cl-select",
 					props: {
@@ -455,9 +475,14 @@ const Table = useTable({
 			prop: "createTime",
 			sortable: "custom",
 			search: {
-				component: (
-					<cl-date-picker type="date" value-format="YYYY-MM-DD" placeholder="搜索日期" />
-				)
+				component: {
+					name: "cl-date-picker",
+					props: {
+						type: "date",
+						valueFormat: "YYYY-MM-DD",
+						placeholder: "搜索日期"
+					}
+				}
 			}
 		},
 		{

yarn.lock

@@ -344,10 +344,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@cool-vue/crud@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.npmjs.org/@cool-vue/crud/-/crud-7.1.0.tgz#bed31f8059f55fba9dafa03b028216ac52685fe6"
-  integrity sha512-ai3QIim55AuWGSpRqgYU4b7vppfqFx4V7vP1htDIwhdY9oMGRiyzedjE1yvwuvHE7E9By9zuMfO5D8AuB9lXbQ==
+"@cool-vue/crud@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.1.3.tgz#494823c9b9d3db7c03624ee82b5d59330977989e"
+  integrity sha512-jSCLPfD/ADfarhI/4e6dWLWmXh2LxTGED4W1RwhgNZWFbM7zSjTc4bPfK3v8AMEcELs6e2ZIFGfcurlG/qc8AQ==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"