feat(form): use better input types

Aekal · Nov 24, 2024 · e957979 · e957979
1 parent de7ce4d
commit e957979
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue
@@ -11,6 +11,16 @@ const model = defineModel<string>()
 <template>
   <label class="flex flex-col gap-1.5">
     {{ label }}
-    <input v-bind="$attrs" v-model="model" class="rounded border p-1.5 text-neutral-700" />
+    <input
+      v-bind="$attrs"
+      v-model="model"
+      class="rounded border p-1.5 text-neutral-700 placeholder:text-neutral-400"
+    />
   </label>
 </template>
+
+<style scoped>
+input[type='date']:invalid::-webkit-datetime-edit {
+  @apply text-neutral-400;
+}
+</style>
diff --git a/src/components/BaseTextarea.vue b/src/components/BaseTextarea.vue
@@ -14,7 +14,7 @@ const model = defineModel<string>()
     <textarea
       v-bind="$attrs"
       v-model="model"
-      class="rounded border p-1.5 text-neutral-700"
+      class="rounded border p-1.5 text-neutral-700 placeholder:text-neutral-400"
       rows="3"
     />
   </label>

diff --git a/src/views/ProfileEditView.vue b/src/views/ProfileEditView.vue
@@ -74,19 +74,20 @@ const onSubmit = async () => {
     />
     <BaseInput
       v-model="phone"
-      type="text"
+      type="tel"
       label="Phone"
       placeholder="(123) 456-7890"
       autocomplete="tel"
       required
     />
     <BaseInput
       v-model="birthday"
-      type="text"
+      type="date"
       label="Birthday"
-      placeholder="MM/DD/YYYY"
       autocomplete="bday"
       required
+      class="date-input"
+      :max="new Date().toISOString().split('T')[0]"
     />
     <BaseTextarea
       v-model="about"