Improve type FormParameterValue by using a type map

This ensures the `currentValue` for a `FormElement` is the appropriate type given `props.type`.

Fixes #19500

Author: ahmedhamidawan

client/src/components/Form/Elements/FormData/FormData.vue

@@ -32,8 +32,10 @@ const props = withDefaults(
         loading?: boolean;
         multiple?: boolean;
         optional?: boolean;
-        options: Record<string, Array<DataOption>>;
+        options?: Record<string, Array<DataOption>>;
         value?: {
+            batch: boolean;
+            product: boolean;
             values: Array<DataOption>;
         };
         extensions?: Array<string>;
@@ -48,6 +50,7 @@ const props = withDefaults(
         loading: false,
         multiple: false,
         optional: false,
+        options: () => ({ dce: [], hda: [], hdca: [] }),
         value: undefined,
         extensions: () => [],
         type: "data",

client/src/components/Form/Elements/FormData/types.ts

@@ -6,6 +6,6 @@ export type DataOption = {
     batch: boolean;
     map_over_type?: string;
     name: string;
-    src: string;
+    src: "dce" | "hda" | "hdca" | "ldda" | "url";
     tags: Array<string>;
 };

client/src/components/Form/Elements/FormDrilldown/FormDrilldown.vue

@@ -10,12 +10,13 @@ const props = withDefaults(
     defineProps<{
         id: string;
         value?: Value;
-        options: Array<Option>;
+        options?: Array<Option>;
         multiple: boolean;
         showIcons?: boolean;
     }>(),
     {
         value: null,
+        options: () => [],
         multiple: true,
         showIcons: false,
     }

client/src/components/Form/Elements/FormOptionalText.vue

@@ -26,6 +26,7 @@ export default {
     },
     props: {
         value: {
+            type: String,
             default: "",
         },
         id: {

client/src/components/Form/Elements/FormRadio.vue

@@ -4,7 +4,8 @@ import { computed } from "vue";
 const emit = defineEmits(["input"]);
 const props = defineProps({
     value: {
-        default: null,
+        type: String,
+        default: "",
     },
     options: {
         type: Array,

client/src/components/Form/Elements/FormSelection.vue

@@ -1,5 +1,4 @@
-<script setup>
-import { library } from "@fortawesome/fontawesome-svg-core";
+<script setup lang="ts">
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BDropdown, BDropdownItemButton } from "bootstrap-vue";
@@ -8,43 +7,36 @@ import { computed, ref, watch } from "vue";
 
 import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
+import type { FormParameterValue } from "../parameterTypes";
+import type { DataOption } from "./FormData/types";
+
 import FormCheck from "./FormCheck.vue";
 import FormRadio from "./FormRadio.vue";
 import FormSelect from "./FormSelect.vue";
 import FormSelectMany from "./FormSelectMany/FormSelectMany.vue";
 
-library.add(faCaretDown);
-
-const emit = defineEmits(["input"]);
-const props = defineProps({
-    value: {
-        default: null,
-    },
-    data: {
-        type: Array,
-        default: null,
-    },
-    display: {
-        type: String,
-        default: null,
-    },
-    optional: {
-        type: Boolean,
-        default: false,
-    },
-    options: {
-        type: Array,
-        default: null,
-    },
-    multiple: {
-        type: Boolean,
-        default: false,
-    },
-});
+type FormValue = FormParameterValue | DataOption[];
+
+const emit = defineEmits<{
+    (e: "input", value: FormValue): void;
+}>();
+const props = defineProps<{
+    /** TODO: It should be `value: FormValue` but thats giving:
+     * `Type 'null' is not assignable to type 'PropConstructor<unknown>'.` */
+    value: any;
+    data?: {
+        label: string;
+        value: any;
+    }[];
+    display?: "checkboxes" | "radio" | "select" | "select-many";
+    optional?: boolean;
+    options?: [string, FormParameterValue | undefined][];
+    multiple?: boolean;
+}>();
 
 const currentValue = computed({
     get: () => {
-        return props.value;
+        return props.value as any;
     },
     set: (val) => {
         emit("input", val);
@@ -53,7 +45,7 @@ const currentValue = computed({
 
 /** Provides formatted select options. */
 const currentOptions = computed(() => {
-    let result = [];
+    let result: { label: string; value: any }[] = [];
     const data = props.data;
     const options = props.options;
     if (options && options.length > 0) {
@@ -127,7 +119,7 @@ defineExpose({
 
             <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
                 <template v-slot:button-content>
-                    <FontAwesomeIcon icon="fa-caret-down"></FontAwesomeIcon>
+                    <FontAwesomeIcon :icon="faCaretDown" />
                     <span class="sr-only">select element preferences</span>
                 </template>
                 <BDropdownItemButton

client/src/components/Form/Elements/FormText.vue

@@ -1,15 +1,78 @@
+<script setup lang="ts">
+import { BCol, BFormInput, BFormTextarea, BRow } from "bootstrap-vue";
+import { computed } from "vue";
+
+import type { FormParameterTypeMap } from "../parameterTypes";
+
+interface Props {
+    value?: FormParameterTypeMap["text"];
+    id?: string;
+    type?: "text" | "password";
+    /** <textarea> instead of <input> element */
+    area?: boolean;
+    /** Allow multiple entries to be created */
+    multiple?: boolean;
+    readonly?: boolean;
+    placeholder?: string;
+    optional?: boolean;
+    showState?: boolean;
+    color?: string;
+    /** Refers to an optional custom css class name */
+    cls?: string;
+    /** Display list of suggestions in autocomplete dialog */
+    datalist?: { label: string; value: string }[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: "",
+    id: "",
+    type: "text",
+    area: false,
+    multiple: false,
+    readonly: false,
+    placeholder: "",
+    optional: true,
+    showState: false,
+    color: undefined,
+    cls: undefined,
+    datalist: undefined,
+});
+const emit = defineEmits(["input"]);
+
+const acceptedTypes = computed(() => (["text", "password"].includes(props.type) ? props.type : "text"));
+
+const currentValue = computed({
+    get() {
+        const v = props.value ?? "";
+        if (Array.isArray(v)) {
+            if (v.length === 0) {
+                return "";
+            }
+            return props.multiple ? v.reduce((str_value, v) => str_value + String(v) + "\n", "") : String(v[0]);
+        }
+        return String(v);
+    },
+    set(newVal: string) {
+        emit("input", newVal);
+    },
+});
+
+const inputArea = computed(() => props.area || props.multiple);
+
+const style = computed(() => (props.color ? { color: props.color, "border-color": props.color } : null));
+</script>
 <template>
-    <b-row align-v="center">
-        <b-col>
-            <b-form-textarea
+    <BRow align-v="center">
+        <BCol>
+            <BFormTextarea
                 v-if="inputArea"
                 :id="id"
                 v-model="currentValue"
                 :class="['ui-text-area', cls]"
                 :readonly="readonly"
                 :placeholder="placeholder"
                 :style="style" />
-            <b-form-input
+            <BFormInput
                 v-else
                 :id="id"
                 v-model="currentValue"
@@ -23,103 +86,10 @@
             <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
                 <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value" />
             </datalist>
-        </b-col>
-    </b-row>
+        </BCol>
+    </BRow>
 </template>
 
-<script>
-export default {
-    props: {
-        value: {
-            // String; Array for multiple
-            default: "",
-        },
-        id: {
-            type: String,
-            default: "",
-        },
-        type: {
-            type: String,
-            default: "text",
-        },
-        area: {
-            // <textarea> instead of <input> element
-            type: Boolean,
-            default: false,
-        },
-        multiple: {
-            // Allow multiple entries to be created
-            type: Boolean,
-            default: false,
-        },
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-        placeholder: {
-            type: String,
-            default: "",
-        },
-        optional: {
-            type: Boolean,
-            default: true,
-        },
-        showState: {
-            type: Boolean,
-            default: false,
-        },
-        color: {
-            type: String,
-            default: null,
-        },
-        cls: {
-            // Refers to an optional custom css class name
-            type: String,
-            default: null,
-        },
-        datalist: {
-            // Display list of suggestions in autocomplete dialog
-            type: Array,
-            default: null,
-        },
-    },
-    computed: {
-        acceptedTypes() {
-            return ["text", "password"].includes(this.type) ? this.type : "text";
-        },
-        currentValue: {
-            get() {
-                const v = this.value ?? "";
-                if (Array.isArray(v)) {
-                    if (v.length === 0) {
-                        return "";
-                    }
-                    return this.multiple
-                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
-                        : String(this.value[0]);
-                }
-                return String(v);
-            },
-            set(newVal, oldVal) {
-                if (newVal !== oldVal) {
-                    this.$emit("input", newVal);
-                }
-            },
-        },
-        inputArea() {
-            return this.area || this.multiple;
-        },
-        style() {
-            return this.color
-                ? {
-                      color: this.color,
-                      "border-color": this.color,
-                  }
-                : null;
-        },
-    },
-};
-</script>
 <style scoped>
 .ui-input-linked {
     border-left-width: 0.5rem;