feat(select): optionValue and optionKey

dev/typescript/App.vue

@@ -161,22 +161,23 @@ export default defineComponent({
           value: 'the-last-of-us',
           options: [
             {
-              key: 'the-last-of-us',
-              value: 'The Last of Us II',
+              value: 'the-last-of-us',
+              label: 'The Last of Us II',
             },
             {
-              key: 'death-stranding',
-              value: 'Death Stranding',
+              value: 'death-stranding',
+              label: 'Death Stranding',
             },
             {
-              key: 'nier-automata',
-              value: 'Nier Automata',
+              value: 'nier-automata',
+              label: 'Nier Automata',
             },
           ],
         }),
         console: SelectField({
           label: 'Console (Async Options)',
           customClass: 'w-1/2 pr-4',
+          optionValue: 'console',
           options: consoleOptions.value,
         }),
         steps: NumberField({
@@ -256,16 +257,16 @@ export default defineComponent({
       try {
         consoleOptions.value = await mockAsync(true, 4000, [
           {
-            key: 'playstation',
-            value: 'Playstation',
+            console: 'playstation',
+            label: 'Playstation',
           },
           {
-            key: 'nintendo',
-            value: 'Nintendo',
+            console: 'nintendo',
+            label: 'Nintendo',
           },
           {
-            key: 'xbox',
-            value: 'Xbox',
+            console: 'xbox',
+            label: 'Xbox',
           },
         ]);
       } catch (e) {

src/components/select-input/SelectInput.vue

@@ -32,8 +32,16 @@ export default defineComponent({
         return props?.control?.options;
       });
 
-      const options = formattedOptions.value.map(({ key, value, disabled }) =>
-        h('option', { key, value: key, disabled }, value),
+      const options = formattedOptions.value.map(option =>
+        h(
+          'option',
+          {
+            key: option[props.control.optionValue],
+            value: option[props.control.optionValue],
+            disabled: option.disabled,
+          },
+          option[props.control.optionLabel],
+        ),
       );
       return [
         h(

src/core/factories.ts

@@ -127,11 +127,15 @@ export const NumberField = ({
 export const SelectField = ({
   options = [],
   value,
+  optionValue = 'value',
+  optionLabel = 'label',
   ...rest
 }: Partial<SelectInput>): SelectInput => ({
   ...FieldBase(rest),
   value,
   options,
+  optionValue,
+  optionLabel,
   type: FieldTypes.SELECT,
 });
 

src/core/models.ts

@@ -91,7 +91,9 @@ export type NumberInput = InputBase & {
 export type SelectInput<T = boolean | string> = InputBase & {
   type: FieldTypes.SELECT;
   value: T;
-  options?: { key: string; value: string; disabled?: boolean }[];
+  optionValue: string;
+  optionLabel: string;
+  options?: { label: string; value: string; disabled?: boolean }[];
 };
 
 export type TextAreaInput = InputBase & {