fix: some antd components failed to verify styles

vbenjs · Sep 21, 2024 · 7c47786 · 7c47786
1 parent 49872c4
commit 7c47786
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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',