feat: allow empty select & radio

WGR-SA · Mar 8, 2024 · d1be6ae · d1be6ae
1 parent e2708b5
commit d1be6ae
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 3 deletions.
diff --git a/docs/guide/inputs.md b/docs/guide/inputs.md
@@ -31,6 +31,7 @@
 `FormSelect` extends `FormInput` props and adds the following options:
 - `options` Key-value object for select options.
 - `multiple` Boolean for multiple select.
+- `empty` Boolean to allow empty value
 
 ### Example
 ```VUE
@@ -62,6 +63,7 @@
 `FormRadio` extends `FormInput` props and adds the following options:
 - `options` Key-value object for select options.
 - `default` Default value.
+- `empty` Boolean to allow empty value
 
 ### Example
 ```VUE

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@wgr-sa/nuxt-form",
   "description": "Form builder for Nuxt",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "repository": "https://github.com/WGR-SA/nuxt-form.git",
   "author": "jeanvier",
   "license": "MIT",

diff --git a/playground/app.vue b/playground/app.vue
@@ -19,6 +19,8 @@
       <FormInput label="" type="checkbox" name="tosnlpd" :rules="[{ equals: [true], message: 'coucou' }]" />
       <FormInput name="safs" :rules="['isNotEmpty']" />
       <FormTextarea name="saffs" :rules="['isNotEmpty']" />
+      <FormRadio :options="{'O': 'Oui', 'N': 'Non'}" name="yo" laebl="Yo" />
+      <FormRadio :options="{'O': 'Oui', 'N': 'Non'}" name="yos" label="Yos" :rules="['isNotEmpty']" :empty="true" />
       <FormSubmit>
         Submit 
       </FormSubmit>

diff --git a/src/runtime/components/FormInputContainer.vue b/src/runtime/components/FormInputContainer.vue
@@ -12,6 +12,7 @@ const props = defineProps<{
   value?: string,
   default?: string,
   type?: string,
+  empty?: boolean,
   [key: string]: any
 }>()
 const { getFieldErrors } = useFormValidator()

diff --git a/src/runtime/types/input.d.ts b/src/runtime/types/input.d.ts
@@ -12,6 +12,7 @@ declare namespace FormInput {
     multiple?: boolean,
     default?: string,
     type?: string,
+    empty?: boolean,
     placeholder?: string,
     [key: string]: any
   }

diff --git a/src/runtime/utils/data/handler.ts b/src/runtime/utils/data/handler.ts
@@ -13,11 +13,11 @@ export class FormDataHandler {
     this.state[name] = value
   }
 
-  setDefaultValue (field: any) {
+  setDefaultValue(field: FormInput.Container) {    
     if (field.type === 'checkbox') {
       this.state[field.name] = 'false'
     }
-    if (field.options) {
+    if (field.options && !field.empty) {
       this.state[field.name] = field.value ?? field.default ?? Object.keys(field.options)[0]
     }
     if (field.checked) {