Added placeholder option to FormInput when type is select so that it …

…autogenerates a default undefined option with the placeholder.

components/ving/FormInput.vue

@@ -21,8 +21,8 @@
             <MarkdownInput v-else-if="type == 'markdown' && (isString(val) || isNull(val) || isUndefined(val))"
                 v-model="val" :placeholder="placeholder" :id="computedId" @change="emit('change')"
                 />
-            <Dropdown v-else-if="type == 'select'"
-                v-model="val" :name="name" :id="computedId" :options="options" :class="fieldClass" :required="required"
+            <Dropdown v-else-if="type == 'select'" :placeholder="placeholder"
+                v-model="val" :name="name" :id="computedId" :options="modifiedOptions" :class="fieldClass" :required="required"
                 @change="emit('change')" optionLabel="label" optionValue="value" />  
             <InputText
                 v-else-if="['text', 'email'].includes(type) && (isString(val) || isNull(val) || isUndefined(val))"
@@ -99,6 +99,16 @@ const invalidForm = inject('invalidForm', (a) => { });
 
 const empty = computed(() => isNil(props.modelValue));
 
+const modifiedOptions = computed(() => {
+    if ( props.placeholder ) {
+        return [
+            { value: undefined, label : props.placeholder },
+            ...props.options,
+        ]
+    }
+    return props.options;
+});
+
 const invalid = computed(() => {
     if (props.required && empty.value) {
         subtext.value = `${displayName} is required.`;

ving/docs/change-log.md

@@ -8,6 +8,7 @@ outline: deep
 ### 2024-05-31
 * Don't do an update if no data has changed when the user calls update().
 * Fix enum2labels problem when options list is undefined.
+* Added placeholder option to FormInput when type is select so that it autogenerates a default undefined option with the placeholder.
 
 ### 2024-05-30
 * Fixed and if-else-if bug in FormInput component that was causing fields to be displayed twice if it was an int.