feat: allow empty select

docs/guide/inputs.md

@@ -31,7 +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
+- `empty` String with the empty label. Allows empty select 
 
 ### Example
 ```VUE

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wgr-sa/nuxt-form",
   "description": "Form builder for Nuxt",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "repository": "https://github.com/WGR-SA/nuxt-form.git",
   "author": "jeanvier",
   "license": "MIT",

playground/app.vue

@@ -19,8 +19,14 @@ import { max } from 'class-validator';
         name="asdf"
         :rules="[ 'isEmail']"
       /> -->
-      <FormInput label='yo <a href="#">ok</a>' type="checkbox" name="tosnlpd" :rules="[{ equals: [true], message: 'coucou' }]" />
-      <FormInput name="yo" type="number" :rules="['isNotEmpty', {min: [1]}, {max: [25]}]" />
+      <FormSelect 
+        name="yo"
+        :options="{ 'O': 'Oui', 'N': 'Non'}"
+        :rules="['isNotEmpty']"
+        empty="-- Select an option --"
+      />
+      <!-- <FormInput label='yo <a href="#">ok</a>' type="checkbox" name="tosnlpd" :rules="[{ equals: [true], message: 'coucou' }]" />
+      <FormInput name="yo" type="number" :rules="['isNotEmpty', {min: [1]}, {max: [25]}]" /> -->
       <!-- <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" /> -->

src/runtime/components/FormSelect.vue

@@ -14,6 +14,7 @@ const props = defineProps<{
   disabled?: boolean,
   value?: string,
   placeholder?: string,
+  empty?: string,
 }>()
 
 const form = inject('form') as Form
@@ -28,6 +29,7 @@ const required = computed(() => props.required ?? false)
       :disabled="disabled"
       :multiple="multiple"
     >
+      <option v-if="empty" disabled selected value="">{{ empty }}</option>
       <option 
         v-for="(option, key) in options" 
         :key="key"