From bb6057cac399eba3b3529c6fc99ee87582df1d2d Mon Sep 17 00:00:00 2001 From: LinaBell <15891557205@163.com> Date: Wed, 25 Sep 2024 17:09:38 +0800 Subject: [PATCH 1/3] perf: setValues method of the form supports assigning values only to keys that exist in the schema (#4508) * fix: hover border style same as antd style when validate error * fix: hover border style same as antd style when validate error * feat(@vben-core/form-ui): Default form validation rules applicable to selector components * fix: Missing the default required label style for components such as select * fix: the focus style and antd of the input box validation failure should be consistent * fix: the focus style and antd of the input box validation failure should be consistent * fix: some antd components failed to verify styles * perf: setValues method of the form supports assigning values only to keys that exist in the schema * docs: update form component docs --------- Co-authored-by: vince --- docs/src/components/common-ui/vben-form.md | 2 +- packages/@core/ui-kit/form-ui/src/form-api.ts | 17 ++++++++++++++++- 2 files changed, 17 insertions(+), 2 deletions(-) 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/packages/@core/ui-kit/form-ui/src/form-api.ts b/packages/@core/ui-kit/form-ui/src/form-api.ts index 459ba080..77f3204e 100644 --- a/packages/@core/ui-kit/form-ui/src/form-api.ts +++ b/packages/@core/ui-kit/form-ui/src/form-api.ts @@ -17,6 +17,8 @@ import { StateHandler, } from '@vben-core/shared/utils'; +import { objectPick } from '@vueuse/core'; + const merge = createMerge((originObj, key, updates) => { if (Array.isArray(originObj[key]) && Array.isArray(updates)) { originObj[key] = updates; @@ -182,12 +184,25 @@ export class FormApi { } } + /** + * 设置表单值 + * @param fields record + * @param filterFields 过滤不在schema中定义的字段 默认为true + * @param shouldValidate + */ async setValues( fields: Record, + filterFields: boolean = true, shouldValidate: boolean = false, ) { const form = await this.getForm(); - form.setValues(fields, shouldValidate); + if (!filterFields) { + form.setValues(fields, shouldValidate); + return; + } + const fieldNames = this.state?.schema?.map((item) => item.fieldName) ?? []; + const filteredFields = objectPick(fields, fieldNames); + form.setValues(filteredFields, shouldValidate); } async submitForm(e?: Event) { From 476aa068d77faa1ecff903ac4fbad4a0a8f12c0e Mon Sep 17 00:00:00 2001 From: Netfan Date: Wed, 25 Sep 2024 17:33:24 +0800 Subject: [PATCH 2/3] fix: stripe table style for element plus, fixed: #4501 (#4503) --- apps/web-ele/src/views/demos/element/index.vue | 15 +++++++++++++++ internal/tailwind-config/src/index.ts | 1 + .../base/design/src/design-tokens/dark/index.css | 1 + .../design/src/design-tokens/default/index.css | 1 + packages/effects/hooks/src/use-design-tokens.ts | 1 + 5 files changed, 19 insertions(+) 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/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/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'), From fdc5b02c30e61c4a2c103ea364d9ecfac4b89fcc Mon Sep 17 00:00:00 2001 From: Squall2017 <252766926@qq.com> Date: Wed, 25 Sep 2024 18:11:02 +0800 Subject: [PATCH 3/3] feat(form): add merge form functionality (#4495) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: captcha example * fix: fix lint errors * chore: event handling and methods * chore: add accessibility features ARIA labels and roles * refactor: refactor code structure and improve captcha demo page * feat: add captcha internationalization * chore: 适配时间戳国际化展示 * fix: 1. 添加点击位置边界校验，防止点击外部导致x,y误差。2. 演示页面宽度过长添加滚动条。3. 添加hooks * feat: sync test * feat: 添加合并表单功能 * fix: 修复上一步不展示问题 --------- Co-authored-by: vince --- packages/@core/ui-kit/form-ui/src/form-api.ts | 41 +++++++ .../captcha/hooks/useCaptchaPoints.ts | 1 + playground/src/locales/langs/en-US.json | 3 +- playground/src/locales/langs/zh-CN.json | 3 +- .../src/router/routes/modules/examples.ts | 8 ++ playground/src/views/examples/form/merge.vue | 116 ++++++++++++++++++ 6 files changed, 170 insertions(+), 2 deletions(-) create mode 100644 playground/src/views/examples/form/merge.vue 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/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 @@ + + +