1

package.json

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

packages/crud/index.d.ts

@@ -10,7 +10,7 @@ declare namespace Vue {
 // element-plus
 declare namespace ElementPlus {
 	type Size = "large" | "default" | "small";
-	type Align = "large" | "default" | "small";
+	type Align = "left" | "center" | "right";
 
 	interface FormProps {
 		inline?: boolean;
@@ -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;
@@ -143,7 +143,8 @@ declare namespace Render {
 	}
 }
 
-declare type PropKey<T> = Extract<keyof Required<T>, string>;
+// 获取keys
+type PropKey<T> = keyof RemoveIndex<T> | (string & {});
 
 declare namespace ClCrud {
 	interface Label {
@@ -290,10 +291,6 @@ declare namespace ClCrud {
 		): void;
 	}
 
-	interface Options extends Config {
-		service: any;
-	}
-
 	interface Ref {
 		"cl-table": ClTable.Ref;
 		"cl-upsert": ClUpsert.Ref;
@@ -320,6 +317,10 @@ declare namespace ClCrud {
 		refresh: Service["api"]["page"];
 		[key: string]: any;
 	}
+
+	interface Options extends DeepPartial<Config> {
+		service?: any;
+	}
 }
 
 declare namespace ClTable {
@@ -340,7 +341,7 @@ declare namespace ClTable {
 		dictSeparator: string;
 		dictAllLevels: boolean;
 		buttons: OpButton | ((options: { scope: T }) => OpButton);
-		align: "left" | "center" | "right";
+		align: ElementPlus.Align;
 		label: any;
 		className: string;
 		prop: PropKey<T>;
@@ -353,7 +354,7 @@ declare namespace ClTable {
 		sortBy: string | ((row: T, index: number) => any) | any[];
 		resizable: boolean;
 		columnKey: string;
-		headerAlign: string;
+		headerAlign: ElementPlus.Align;
 		showOverflowTooltip: boolean;
 		fixed: boolean | string;
 		formatter: (row: T, column: any, value: any, index: number) => any;
@@ -506,7 +507,7 @@ declare namespace ClForm {
 		label?: string;
 		renderLabel?: any;
 		flex?: boolean;
-		hidden?: boolean | Vue.Ref<boolean> | ((options: { scope: obj }) => boolean);
+		hidden?: (options: { scope: obj }) => boolean;
 		prepend?: Render.Component;
 		component?: Render.Component;
 		append?: Render.Component;
@@ -516,7 +517,7 @@ declare namespace ClForm {
 		[key: string]: any;
 	}
 
-	interface Config {
+	interface Config<T = any> {
 		title?: any;
 		height?: string;
 		width?: string;
@@ -525,9 +526,9 @@ declare namespace ClForm {
 		form: obj;
 		isReset?: boolean;
 		on?: {
-			open?(data: obj): void;
+			open?(data: T): void;
 			close?(action: CloseAction, done: fn): void;
-			submit?(data: obj, event: { close: fn; done: fn }): void;
+			submit?(data: T, event: { close: fn; done: fn }): void;
 		};
 		op: {
 			hidden?: boolean;
@@ -600,7 +601,7 @@ declare namespace ClForm {
 }
 
 declare namespace ClUpsert {
-	interface Config<T = obj> {
+	interface Config<T = any> {
 		sync: boolean;
 		items: ClForm.Item[];
 		props: ClForm.Config["props"];
@@ -625,11 +626,15 @@ declare namespace ClUpsert {
 		mode: "add" | "update" | "info";
 	}
 
-	interface Options<T = any> extends DeepPartial<Config<T>> {
+	interface Options<T> extends DeepPartial<Config> {
 		items?: ClForm.Items<T>;
 	}
 }
 
+interface UpsertOptions {
+	items: ClForm.Items;
+}
+
 declare namespace ClAdvSearch {
 	interface Config<T = any> {
 		items?: ClForm.Item[];
@@ -749,11 +754,3 @@ declare type Options = DeepPartial<Config>;
 declare interface CrudOptions {
 	options: Options;
 }
-
-interface obj2 {
-	[prop: string]: any;
-}
-
-interface Item2<T = any2> {
-	prop: keyof T;
-}

packages/crud/package.json

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

packages/crud/src/App.vue

@@ -1,17 +1,49 @@
 <template>
-	<div>CRUD v7.0.0</div>
+	<div>
+		<div>CRUD 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";
 import { useTable, useForm, useSearch, useUpsert, useAdvSearch } from "./hooks";
 // Test
 
 interface Data {
 	name?: string;
-	age?: 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: [
+		{
+			name: "A"
+		},
+		() => {
+			return {
+				name: form.data?.age == 12 ? "A" : "B"
+			};
+		}
+	]
+});
+
 const Table = useTable<Data>({
 	columns: [
 		{
@@ -36,14 +68,18 @@ const Upsert = useUpsert<Data>({
 	items: [
 		{
 			label: "xx",
-			prop: "age"
+			prop: "age",
+			component: {
+				name: "el-input"
+			}
+		},
+		() => {
+			return {
+				hidden: Upsert.value?.mode == "add",
+				label: "x"
+			};
 		}
-	],
-	onOpened(data) {
-		data.name = "";
-	},
-	onInfo(data) {},
-	onSubmit(data) {}
+	]
 });
 
 const Search = useSearch<Data>({

packages/crud/src/hooks/crud.ts

@@ -52,7 +52,7 @@ function useEvent(names: string[], { r, options, clear }: any) {
 }
 
 // crud
-export function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud.Ref) => void) {
+export function useCrud(options?: ClCrud.Options, cb?: (app: ClCrud.Ref) => void) {
 	const Crud = ref<ClCrud.Ref>();
 	useParent("cl-crud", Crud);
 
@@ -77,8 +77,8 @@ export function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud
 }
 
 // 新增、编辑
-export function useUpsert<T>(options?: ClUpsert.Options<T>) {
-	const Upsert = ref<ClUpsert.Ref<T>>();
+export function useUpsert<T = any>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref> {
+	const Upsert = ref<ClUpsert.Ref>();
 	useParent("cl-upsert", Upsert);
 
 	if (options) {
@@ -105,7 +105,7 @@ export function useUpsert<T>(options?: ClUpsert.Options<T>) {
 		}
 	);
 
-	return Upsert;
+	return Upsert as Ref<ClUpsert.Ref<T>>;
 }
 
 // 表格

packages/crud/src/static/index.scss

@@ -282,6 +282,7 @@
 		&.no-label {
 			& > .el-form-item__label {
 				padding: 0;
+				display: none;
 			}
 		}
 	}
@@ -328,10 +329,8 @@
 			}
 		}
 
-		&__children {
-			.el-form-item {
-				margin-bottom: 18px !important;
-			}
+		.el-form-item {
+			margin-bottom: 18px;
 		}
 
 		.el-table__header tr {
@@ -359,6 +358,7 @@
 		height: 35px;
 		width: 100%;
 		overflow-x: auto;
+		overflow-y: hidden;
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 		position: relative;
@@ -397,9 +397,7 @@
 		position: absolute;
 		bottom: -1px;
 		left: 0;
-		transition:
-			transform 0.3s ease-in-out,
-			width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+		transition: transform 0.3s ease-in-out, width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 		background-color: var(--el-color-primary);
 	}
 
@@ -425,39 +423,47 @@
 }
 
 .cl-form-card {
+	margin-top: 0;
+
 	&__header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		font-size: 15px;
-		padding: 0 5px;
+		font-size: 14px;
+		height: 32px;
+		line-height: normal;
+		font-weight: bold;
+		padding: 0 10px;
+		background-color: var(--el-border-color-extra-light);
+		border-radius: var(--el-border-radius-base);
+		cursor: pointer;
+
+		&:hover {
+			.el-icon {
+				color: var(--el-color-primary);
+			}
+		}
 	}
 
 	&__container {
-		border: 1px solid var(--el-border-color);
-		border-bottom: 0;
-		border-radius: 0;
 		transition: all 0.3s;
 		display: grid;
 		grid-template-rows: 0fr;
 
 		> .cl-form-item__children {
-			margin: 0 10px;
 			min-height: 0;
 			overflow: hidden;
 
 			.el-row {
 				margin-top: 10px;
-				margin-bottom: 10px;
 			}
 		}
 	}
 
 	&.is-expand {
 		> .cl-form-card__container {
-			border-bottom: 1px solid var(--el-border-color);
-			border-radius: var(--el-border-radius-base);
 			grid-template-rows: 1fr;
+			margin-bottom: -18px;
 		}
 	}
 

packages/crud/types/components/adv/search.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 import { PropType } from "vue";
 declare const _default: import("vue").DefineComponent<{
     items: {

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

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 declare const ClContextMenu: import("vue").DefineComponent<{
     show: BooleanConstructor;
     options: {

packages/crud/types/components/dialog/index.d.ts

@@ -61,10 +61,10 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     padding: string;
     width: string;
+    keepAlive: boolean;
     hideHeader: boolean;
     controls: unknown[];
     fullscreen: boolean;
-    keepAlive: boolean;
     modelValue: boolean;
 }, {}>;
 export default _default;

packages/crud/types/components/form-tabs/index.d.ts

@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     justify: {
-        type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">;
+        type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
         default: string;
     };
     type: {
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     justify: {
-        type: PropType<"center" | "left" | "right" | "justify" | "end" | "start" | "match-parent">;
+        type: PropType<"center" | "justify" | "left" | "right" | "end" | "start" | "match-parent">;
         default: string;
     };
     type: {
@@ -33,6 +33,6 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     type: "default" | "card";
     labels: unknown[];
-    justify: "center" | "left" | "right" | "justify" | "end" | "start" | "match-parent";
+    justify: "center" | "justify" | "left" | "right" | "end" | "start" | "match-parent";
 }, {}>;
 export default _default;

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

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 export declare function useForm(): {
     Form: import("vue").Ref<any>;
     config: {
@@ -22,7 +23,7 @@ export declare function useForm(): {
         items: {
             [x: string]: any;
             type?: "tabs" | undefined;
-            prop?: string | undefined;
+            prop?: (string & {}) | undefined;
             props?: {
                 [x: string]: any;
                 labels?: {

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

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 import { Ref } from "vue";
 export declare function usePlugins({ visible }: {
     visible: Ref<boolean>;

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     inner: BooleanConstructor;
     inline: BooleanConstructor;
 }>>, {
-    inline: boolean;
     inner: boolean;
+    inline: boolean;
 }, {}>;
 export default _default;

packages/crud/types/components/search/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 import { PropType } from "vue";
 declare const _default: import("vue").DefineComponent<{
     data: {

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

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 export declare function useTable(props: any): {
     Table: import("vue").Ref<any>;
     config: {
@@ -103,10 +104,10 @@ export declare function useTable(props: any): {
                     scope: obj;
                 }) => void;
             })[];
-            align: "center" | "left" | "right";
+            align: ElementPlus.Align;
             label: any;
             className: string;
-            prop: string;
+            prop: string & {};
             orderNum: number;
             width: number;
             minWidth: string | number;
@@ -119,7 +120,7 @@ export declare function useTable(props: any): {
             sortBy: string | any[] | ((row: any, index: number) => any);
             resizable: boolean;
             columnKey: string;
-            headerAlign: string;
+            headerAlign: ElementPlus.Align;
             showOverflowTooltip: boolean;
             fixed: string | boolean;
             formatter: (row: any, column: any, value: any, index: number) => any;

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

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 export declare function useRender(): {
     renderColumn: (columns: ClTable.Column[]) => (import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;

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

@@ -1,7 +1,7 @@
 /// <reference types="../index" />
 import { Ref } from "vue";
-export declare function useCrud(options?: DeepPartial<ClCrud.Options>, cb?: (app: ClCrud.Ref) => void): Ref<ClCrud.Ref | undefined>;
-export declare function useUpsert<T>(options?: ClUpsert.Options<T>): Ref<ClUpsert.Ref<T> | undefined>;
+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 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>;

packages/crud/types/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="../index" />
 import { App } from "vue";
 import "./static/index.scss";
 declare const Crud: {

src/config/proxy.ts

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

src/modules/demo/views/crud.vue

@@ -197,17 +197,19 @@ const Upsert = useUpsert({
 		},
 		// 动态配置，新增显示、编辑隐藏
 		() => {
-			return {
-				label: "密码",
-				group: "base",
-				prop: "password",
-				hidden: Upsert.value?.mode == "update", // 通过 mode 参数判断
-				component: {
-					name: "el-input",
-					props: {
-						type: "password"
+			return () => {
+				return {
+					label: "密码",
+					group: "base",
+					prop: "password",
+					hidden: Upsert.value?.mode == "update", // 通过 mode 参数判断
+					component: {
+						name: "el-input",
+						props: {
+							type: "password"
+						}
 					}
-				}
+				};
 			};
 		},
 		{

yarn.lock

@@ -344,10 +344,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@cool-vue/crud@^7.0.11":
-  version "7.0.11"
-  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.11.tgz#69b2d5a361dc162d342bd73ca286921725169c80"
-  integrity sha512-ROf42Odza3hjzpvRTOXi0ovC9YKYbR6rd0uRjyh0fbb0jX/a2CActyOEly28J2O+Mo8Mm8EsvrDRy1O1mmwaAg==
+"@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==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"