refactor: unify styles for form input components

dzangolab · Dec 20, 2024 · 06a20c0 · 06a20c0
1 parent 9e41dbd
commit 06a20c0
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 10 deletions.
diff --git a/apps/demo/src/assets/css/vars.css b/apps/demo/src/assets/css/vars.css
@@ -14,5 +14,5 @@
   --switch-field-direction: column;
   --textarea-resize: vertical;
   --textarea-width: 100%;
-  --textarea-height: 5rem;
+  --textarea-height: 10rem;
 }
diff --git a/packages/vue-form/src/assets/css/input.css b/packages/vue-form/src/assets/css/input.css
@@ -14,11 +14,13 @@
   --_input-field-border-radius: var(--form-input-border-radius, 0.25em);
   --_input-field-padding-h: var(--form-input-padding-h, 0.75em);
   --_input-field-padding-v: var(--form-input-padding-v, 0.65em);
+  --_input-field-height: var(--form-input-height, 2.8em);
 
-  border-radius: var(--_input-field-border-radius);
   border: 1px solid var(--_input-field-border-color);
+  border-radius: var(--_input-field-border-radius);
   font-size: 1rem;
-  padding: var(--_input-field-padding-v) var(--_input-field-padding-v);
+  height: var(--_input-field-height);
+  padding: var(--_input-field-padding-v) var(--_input-field-padding-h);
   width: 100%;
 }
 

diff --git a/packages/vue-form/src/components/DatePicker.vue b/packages/vue-form/src/components/DatePicker.vue
@@ -11,10 +11,13 @@
     >
       <VueDatePicker
         v-bind="{ ...filteredAttributes, ...field }"
-        :class="{
-          invalid: meta.touched && !meta.valid,
-          valid: meta.dirty && meta.valid && Object.keys(props.schema).length,
-        }"
+        :class="[
+          'field',
+          {
+            invalid: meta.touched && !meta.valid,
+            valid: meta.dirty && meta.valid && Object.keys(props.schema).length,
+          },
+        ]"
         :disabled="disabled"
         :enable-time-picker="enableTimePicker"
         :format="format"
@@ -136,6 +139,10 @@ const onUpdate = (
   color: var(--_label-color);
 }
 
+.date-picker .dp__main > div {
+  width: 100%;
+}
+
 .dp--clear-btn {
   --dp-icon-color: var(--icon-color, #555);
 }
@@ -161,6 +168,10 @@ const onUpdate = (
   --dp-icon-color: var(--icon-color, #555);
 }
 
+.date-picker .field input {
+  --_input-field-padding-h: 2.2rem;
+}
+
 .invalid .dp__input {
   --dp-border-color: var(--danger-color, #dc3545);
 

diff --git a/packages/vue-form/src/components/Select.vue b/packages/vue-form/src/components/Select.vue
@@ -227,13 +227,18 @@ onMounted(() => {
 }
 
 .multiselect-input {
+  --_border-radius: var(--form-input-border-radius, 0.25em);
   --_multiselect-border-color: var(--form-input-border-color, #555);
+  --_padding-h: var(--padding-h, 0.75em);
+  --_padding-v: var(--form-input-padding-v, 0.65em);
+  --_height: var(--form-input-height, 2.8em);
 
   align-content: center;
   border: 1px solid var(--_multiselect-border-color);
+  border-radius: var(--_border-radius);
   cursor: pointer;
-  min-height: 3rem;
-  padding: 10px;
+  height: var(--_height);
+  padding: var(--_padding-v) var(--_padding-h);
   user-select: none;
 }
 

diff --git a/packages/vue-form/src/components/__test__/snapshot/__snapshots__/DatePicker.test.ts.snap b/packages/vue-form/src/components/__test__/snapshot/__snapshots__/DatePicker.test.ts.snap
@@ -19,7 +19,7 @@ exports[`DatePicker > matches snapshot 1`] = `
     autocomplete="off"
     autoposition="true"
     canceltext="Cancel"
-    class=""
+    class="field"
     clearable="true"
     dark="false"
     disabled="false"