From 371e0be93327b726f378e000873d2fee5adfbe39 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Sun, 15 Sep 2024 10:20:11 +0800 Subject: [PATCH 1/7] fix: hover border style same as antd style when validate error --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 6c0ecbdfe62..1d1166abb09 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -258,7 +258,8 @@ function createComponentProps(slotProps: Record) { Date: Thu, 19 Sep 2024 10:22:30 +0800 Subject: [PATCH 2/7] fix: hover border style same as antd style when validate error --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 1d1166abb09..70ec62e7524 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -258,7 +258,7 @@ function createComponentProps(slotProps: Record) { Date: Fri, 20 Sep 2024 09:18:56 +0800 Subject: [PATCH 3/7] feat(@vben-core/form-ui): Default form validation rules applicable to selector components --- apps/web-antd/src/adapter/form.ts | 6 ++++++ apps/web-ele/src/adapter/form.ts | 6 ++++++ apps/web-naive/src/adapter/form.ts | 6 ++++++ packages/@core/ui-kit/form-ui/src/types.ts | 6 ++++++ packages/locales/src/langs/en-US.json | 3 ++- packages/locales/src/langs/zh-CN.json | 3 ++- playground/src/adapter/form.ts | 6 ++++++ playground/src/views/examples/form/rules.vue | 17 ++++++++++++----- 8 files changed, 46 insertions(+), 7 deletions(-) diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts index 06e8cf1348b..ba811917353 100644 --- a/apps/web-antd/src/adapter/form.ts +++ b/apps/web-antd/src/adapter/form.ts @@ -103,6 +103,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts index 5336768ec97..f5aa854eecc 100644 --- a/apps/web-ele/src/adapter/form.ts +++ b/apps/web-ele/src/adapter/form.ts @@ -78,6 +78,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/apps/web-naive/src/adapter/form.ts b/apps/web-naive/src/adapter/form.ts index 73adb916f7b..30a86a4a8e2 100644 --- a/apps/web-naive/src/adapter/form.ts +++ b/apps/web-naive/src/adapter/form.ts @@ -87,6 +87,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/packages/@core/ui-kit/form-ui/src/types.ts b/packages/@core/ui-kit/form-ui/src/types.ts index 35456c621a2..4f081c3e216 100644 --- a/packages/@core/ui-kit/form-ui/src/types.ts +++ b/packages/@core/ui-kit/form-ui/src/types.ts @@ -58,6 +58,7 @@ export type CustomRenderType = (() => Component | string) | string; export type FormSchemaRuleType = | 'required' + | 'selectRequired' | null | (Record & string) | ZodTypeAny; @@ -323,5 +324,10 @@ export interface VbenFormAdapterOptions< params: any, ctx: Record, ) => boolean | string; + selectRequired?: ( + value: any, + params: any, + ctx: Record, + ) => boolean | string; }; } diff --git a/packages/locales/src/langs/en-US.json b/packages/locales/src/langs/en-US.json index 4f2d3c48c7e..338a6a81fcb 100644 --- a/packages/locales/src/langs/en-US.json +++ b/packages/locales/src/langs/en-US.json @@ -55,7 +55,8 @@ } }, "formRules": { - "required": "Please enter {0}" + "required": "Please enter {0}", + "selectRequired": "Please select {0}" }, "widgets": { "document": "Document", diff --git a/packages/locales/src/langs/zh-CN.json b/packages/locales/src/langs/zh-CN.json index 88c5cac1e25..816170cdf82 100644 --- a/packages/locales/src/langs/zh-CN.json +++ b/packages/locales/src/langs/zh-CN.json @@ -55,7 +55,8 @@ } }, "formRules": { - "required": "请输入{0}" + "required": "请输入{0}", + "selectRequired": "请选择{0}" }, "widgets": { "document": "文档", diff --git a/playground/src/adapter/form.ts b/playground/src/adapter/form.ts index 06e8cf1348b..ba811917353 100644 --- a/playground/src/adapter/form.ts +++ b/playground/src/adapter/form.ts @@ -103,6 +103,12 @@ setupVbenForm({ } return true; }, + selectRequired: (value, _params, ctx) => { + if (value === undefined || value === null) { + return $t('formRules.selectRequired', [ctx.label]); + } + return true; + }, }, }); diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue index d27f57c9aa1..5915c2c5083 100644 --- a/playground/src/views/examples/form/rules.vue +++ b/playground/src/views/examples/form/rules.vue @@ -102,7 +102,7 @@ const [Form, formApi] = useVbenForm({ defaultValue: undefined, fieldName: 'options', label: '下拉选', - rules: 'required', + rules: 'selectRequired', }, { component: 'RadioGroup', @@ -120,7 +120,7 @@ const [Form, formApi] = useVbenForm({ }, fieldName: 'radioGroup', label: '单选组', - rules: 'required', + rules: 'selectRequired', }, { component: 'CheckboxGroup', @@ -139,7 +139,7 @@ const [Form, formApi] = useVbenForm({ }, fieldName: 'checkboxGroup', label: '多选组', - rules: 'required', + rules: 'selectRequired', }, { component: 'Checkbox', @@ -150,14 +150,21 @@ const [Form, formApi] = useVbenForm({ default: () => ['我已阅读并同意'], }; }, - rules: 'required', + rules: 'selectRequired', }, { component: 'DatePicker', defaultValue: undefined, fieldName: 'datePicker', label: '日期选择框', - rules: 'required', + rules: 'selectRequired', + }, + { + component: 'RangePicker', + defaultValue: undefined, + fieldName: 'rangePicker', + label: '区间选择框', + rules: 'selectRequired', }, ], // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个 From 471fea21a952dc4478c0974b1c90fa0572030e70 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Fri, 20 Sep 2024 10:47:35 +0800 Subject: [PATCH 4/7] fix: Missing the default required label style for components such as select --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index bcc926416b3..dd3663876a8 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -95,7 +95,7 @@ const shouldRequired = computed(() => { } if (isString(currentRules.value)) { - return currentRules.value === 'required'; + return ['required', 'selectRequired'].includes(currentRules.value); } let isOptional = currentRules?.value?.isOptional?.(); From c0e0b4539d3980448c234ce3662674028e9cdb53 Mon Sep 17 00:00:00 2001 From: dap <15891557205@163.com> Date: Fri, 20 Sep 2024 11:35:29 +0800 Subject: [PATCH 5/7] fix: the focus style and antd of the input box validation failure should be consistent --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index dd3663876a8..812d927b6f2 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -264,7 +264,7 @@ function createComponentProps(slotProps: Record) { Date: Fri, 20 Sep 2024 11:41:46 +0800 Subject: [PATCH 6/7] fix: the focus style and antd of the input box validation failure should be consistent --- packages/@core/ui-kit/form-ui/src/form-render/form-field.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue index 812d927b6f2..4bfb1cad7cf 100644 --- a/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue +++ b/packages/@core/ui-kit/form-ui/src/form-render/form-field.vue @@ -264,7 +264,7 @@ function createComponentProps(slotProps: Record) { Date: Sat, 21 Sep 2024 19:45:24 +0800 Subject: [PATCH 7/7] fix: some antd components failed to verify styles --- packages/styles/src/antd/index.css | 28 +++++++++++++++++++- playground/src/views/examples/form/rules.vue | 9 +++++++ 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/styles/src/antd/index.css b/packages/styles/src/antd/index.css index c41716bcfcf..001fe9e67ba 100644 --- a/packages/styles/src/antd/index.css +++ b/packages/styles/src/antd/index.css @@ -12,6 +12,32 @@ @apply dark:border-border/60 dark:border; } -.form-valid-error .ant-select-selector { +/** select 选择器的样式 */ +.form-valid-error .ant-select .ant-select-selector { + border-color: hsl(var(--destructive)) !important; +} + +.form-valid-error .ant-select-focused .ant-select-selector { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%) !important; +} + +/** 数字输入框样式 */ +.form-valid-error .ant-input-number-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} + +/** 密码输入框样式 */ +.form-valid-error .ant-input-affix-wrapper:hover { border-color: hsl(var(--destructive)); + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); +} + +/** 区间选择器下面来回切换时的样式 */ +.ant-app .form-valid-error .ant-picker-active-bar { + background-color: hsl(var(--destructive)); +} + +/** 时间选择器的样式 */ +.ant-app .form-valid-error .ant-picker-focused { + box-shadow: 0 0 0 2px rgb(255 38 5 / 6%); } diff --git a/playground/src/views/examples/form/rules.vue b/playground/src/views/examples/form/rules.vue index 5915c2c5083..20dd88ee75d 100644 --- a/playground/src/views/examples/form/rules.vue +++ b/playground/src/views/examples/form/rules.vue @@ -166,6 +166,15 @@ const [Form, formApi] = useVbenForm({ label: '区间选择框', rules: 'selectRequired', }, + { + component: 'InputPassword', + componentProps: { + placeholder: '请输入', + }, + fieldName: 'password', + label: '密码', + rules: 'required', + }, ], // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个 wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',