Add required (#7)

Sonolus · Oct 22, 2024 · 4d1cc73 · 4d1cc73
1 parent aca32b4
commit 4d1cc73
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 0 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -97,6 +97,7 @@ const onClose = () => {
                 :min="0"
                 :max="100"
                 :step="1"
+                required
             />
 
             <VFileField v-model="cover" label="Cover" accept="image/*" />

diff --git a/src/components/fields/VFileField.vue b/src/components/fields/VFileField.vue
@@ -4,6 +4,7 @@ import VField from './VField.vue'
 defineProps<{
     label: string
     accept?: string
+    required?: boolean
 }>()
 
 const modelValue = defineModel<File | undefined>({ required: true })
@@ -20,6 +21,7 @@ const onChange = (e: Event) => {
             :class="modelValue ? 'text-text-normal' : 'italic text-text-disabled'"
             type="file"
             :accept
+            :required
             @change="onChange"
         />
     </VField>

diff --git a/src/components/fields/VNumberField.vue b/src/components/fields/VNumberField.vue
@@ -7,6 +7,7 @@ defineProps<{
     min?: number
     max?: number
     step?: number
+    required?: boolean
 }>()
 
 const modelValue = defineModel<number>({ required: true })
@@ -22,6 +23,7 @@ const modelValue = defineModel<number>({ required: true })
             :min
             :max
             :step
+            :required
         />
     </VField>
 </template>
diff --git a/src/components/fields/VSelectField.vue b/src/components/fields/VSelectField.vue
@@ -4,6 +4,7 @@ import VField from './VField.vue'
 defineProps<{
     label: string
     options: Record<string, T>
+    required?: boolean
 }>()
 
 const modelValue = defineModel<T>({ required: true })
@@ -14,6 +15,7 @@ const modelValue = defineModel<T>({ required: true })
         <select
             v-model="modelValue"
             class="w-full appearance-none bg-button-normal px-2 py-1 transition-colors hover:bg-button-highlighted focus:outline-none focus:ring-1 focus:ring-text-normal active:bg-button-pressed"
+            :required
         >
             <option v-for="(value, key) in options" :key :value class="bg-surface">
                 {{ key }}

diff --git a/src/components/fields/VTextAreaField.vue b/src/components/fields/VTextAreaField.vue
@@ -5,6 +5,7 @@ defineProps<{
     label: string
     placeholder: string
     maxlength?: number
+    required?: boolean
 }>()
 
 const modelValue = defineModel<string>({ required: true })
@@ -18,6 +19,7 @@ const modelValue = defineModel<string>({ required: true })
             type="text"
             :placeholder
             :maxlength
+            :required
         />
     </VField>
 </template>
diff --git a/src/components/fields/VTextField.vue b/src/components/fields/VTextField.vue
@@ -5,6 +5,7 @@ defineProps<{
     label: string
     placeholder: string
     maxlength?: number
+    required?: boolean
 }>()
 
 const modelValue = defineModel<string>({ required: true })
@@ -18,6 +19,7 @@ const modelValue = defineModel<string>({ required: true })
             type="text"
             :placeholder
             :maxlength
+            :required
         />
     </VField>
 </template>