fix: some antd components failed to verify styles (#4458)

* 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

---------

Co-authored-by: vince <vince292007@gmail.com>

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%);
 }

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',