diff --git a/apps/web-ele/src/views/demos/element/index.vue b/apps/web-ele/src/views/demos/element/index.vue index dc02759f..413eea96 100644 --- a/apps/web-ele/src/views/demos/element/index.vue +++ b/apps/web-ele/src/views/demos/element/index.vue @@ -7,6 +7,7 @@ import { ElMessage, ElNotification, ElSpace, + ElTable, } from 'element-plus'; type NotificationType = 'error' | 'info' | 'success' | 'warning'; @@ -38,6 +39,14 @@ function notify(type: NotificationType) { type, }); } +const tableData = [ + { prop1: '1', prop2: 'A' }, + { prop1: '2', prop2: 'B' }, + { prop1: '3', prop2: 'C' }, + { prop1: '4', prop2: 'D' }, + { prop1: '5', prop2: 'E' }, + { prop1: '6', prop2: 'F' }, +]; diff --git a/docs/src/components/common-ui/vben-form.md b/docs/src/components/common-ui/vben-form.md index f7986304..0206dbee 100644 --- a/docs/src/components/common-ui/vben-form.md +++ b/docs/src/components/common-ui/vben-form.md @@ -229,7 +229,7 @@ useVbenForm 返回的第二个参数,是一个对象,包含了一些表单 | --- | --- | --- | | submitForm | 提交表单 | `(e:Event)=>Promise>` | | resetForm | 重置表单 | `()=>Promise` | -| setValues | 设置表单值 | `()=>Promise>` | +| setValues | 设置表单值, 默认会过滤不在schema中定义的field, 可通过filterFields形参关闭过滤 | `(fields: Record, filterFields?: boolean, shouldValidate?: boolean) => Promise` | | getValues | 获取表单值 | `(fields:Record,shouldValidate: boolean = false)=>Promise` | | validate | 表单校验 | `()=>Promise` | | resetValidate | 重置表单校验 | `()=>Promise` | diff --git a/internal/tailwind-config/src/index.ts b/internal/tailwind-config/src/index.ts index 7043b8da..08cfde2d 100644 --- a/internal/tailwind-config/src/index.ts +++ b/internal/tailwind-config/src/index.ts @@ -29,6 +29,7 @@ const shadcnUiColors = { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))', hover: 'hsl(var(--accent-hover))', + lighter: 'has(val(--accent-lighter))', }, background: { deep: 'hsl(var(--background-deep))', diff --git a/packages/@core/base/design/src/design-tokens/dark/index.css b/packages/@core/base/design/src/design-tokens/dark/index.css index 02394cda..0e48e5f6 100644 --- a/packages/@core/base/design/src/design-tokens/dark/index.css +++ b/packages/@core/base/design/src/design-tokens/dark/index.css @@ -53,6 +53,7 @@ /* Used for accents such as hover effects on , ...etc */ --accent: 216 5% 19%; + --accent-lighter: 216 5% 11%; --accent-hover: 216 5% 24%; --accent-foreground: 0 0% 98%; diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css index d4aa1247..2309e925 100644 --- a/packages/@core/base/design/src/design-tokens/default/index.css +++ b/packages/@core/base/design/src/design-tokens/default/index.css @@ -53,6 +53,7 @@ /* Used for accents such as hover effects on , ...etc */ --accent: 240 5% 96%; + --accent-lighter: 240 0% 98%; --accent-hover: 200deg 10% 90%; --accent-foreground: 240 6% 10%; diff --git a/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts index 77f3204e..3b78e039 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -123,6 +123,47 @@ export class FormApi { return form.values; } + merge(formApi: FormApi) { + const chain = [this, formApi]; + const proxy = new Proxy(formApi, { + get(target: any, prop: any) { + if (prop === 'merge') { + return (nextFormApi: FormApi) => { + chain.push(nextFormApi); + return proxy; + }; + } + if (prop === 'submitAllForm') { + return async (needMerge: boolean = true) => { + try { + const results = await Promise.all( + chain.map(async (api) => { + const form = await api.getForm(); + const validateResult = await api.validate(); + if (!validateResult.valid) { + return; + } + const rawValues = toRaw(form.values || {}); + return rawValues; + }), + ); + if (needMerge) { + const mergedResults = Object.assign({}, ...results); + return mergedResults; + } + return results; + } catch (error) { + console.error('Validation error:', error); + } + }; + } + return target[prop]; + }, + }); + + return proxy; + } + mount(formActions: FormActions) { if (!this.isMounted) { Object.assign(this.form, formActions); diff --git a/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts b/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts index 6032d41a..511fb3b7 100644 --- a/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts +++ b/packages/effects/common-ui/src/components/captcha/hooks/useCaptchaPoints.ts @@ -7,6 +7,7 @@ export function useCaptchaPoints() { function addPoint(point: CaptchaPoint) { points.push(point); } + function clearPoints() { points.splice(0, points.length); } diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts index a707684a..4f786302 100644 --- a/packages/effects/hooks/src/use-design-tokens.ts +++ b/packages/effects/hooks/src/use-design-tokens.ts @@ -257,6 +257,7 @@ export function useElementPlusDesignTokens() { '--el-fill-color': getCssVariableValue('--accent'), '--el-fill-color-blank': background, '--el-fill-color-light': getCssVariableValue('--accent'), + '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'), '--el-text-color-primary': getCssVariableValue('--foreground'), '--el-text-color-regular': getCssVariableValue('--foreground'), diff --git a/playground/src/locales/langs/en-US.json b/playground/src/locales/langs/en-US.json index 9e926ca8..92ce74fc 100644 --- a/playground/src/locales/langs/en-US.json +++ b/playground/src/locales/langs/en-US.json @@ -79,7 +79,8 @@ "rules": "Form Rules", "dynamic": "Dynamic Form", "custom": "Custom Component", - "api": "Api" + "api": "Api", + "merge": "Merge Form" }, "captcha": { "title": "Captcha", diff --git a/playground/src/locales/langs/zh-CN.json b/playground/src/locales/langs/zh-CN.json index 08a2c38f..ca28d818 100644 --- a/playground/src/locales/langs/zh-CN.json +++ b/playground/src/locales/langs/zh-CN.json @@ -79,7 +79,8 @@ "rules": "表单校验", "dynamic": "动态表单", "custom": "自定义组件", - "api": "Api" + "api": "Api", + "merge": "合并表单" }, "captcha": { "title": "验证码", diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts index 954c1154..697d4789 100644 --- a/playground/src/router/routes/modules/examples.ts +++ b/playground/src/router/routes/modules/examples.ts @@ -99,6 +99,14 @@ const routes: RouteRecordRaw[] = [ title: $t('page.examples.form.api'), }, }, + { + name: 'FormMergeExample', + path: '/examples/form/merge', + component: () => import('#/views/examples/form/merge.vue'), + meta: { + title: $t('page.examples.form.merge'), + }, + }, ], }, { diff --git a/playground/src/views/examples/form/merge.vue b/playground/src/views/examples/form/merge.vue new file mode 100644 index 00000000..88292697 --- /dev/null +++ b/playground/src/views/examples/form/merge.vue @@ -0,0 +1,116 @@ + + +