Fixed #1711 - Better types for selects

src/components/cascadeselect/CascadeSelect.d.ts

@@ -1,12 +1,16 @@
 import { VNode } from 'vue';
 
+type CascadeSelectOptionLabelType = string | ((data: any) => string) | undefined;
+type CascadeSelectOptionValueType = string | ((data: any) => any) | undefined;
+type CascadeSelectOptionChildrenType = string[] | string | ((data: any) => any[]) | undefined;
+
 interface CascadeSelectProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
+    optionLabel?: CascadeSelectOptionLabelType;
-    optionValue?: any;
+    optionValue?: CascadeSelectOptionValueType;
-    optionGroupLabel?: string;
+    optionGroupLabel?: CascadeSelectOptionLabelType;
-    optionGroupChildren?: string[];
+    optionGroupChildren?: CascadeSelectOptionChildrenType;
     placeholder?: string;
     disabled?: boolean;
     dataKey?: string;

src/components/dropdown/Dropdown.d.ts

@@ -1,16 +1,19 @@
 import { VNode } from 'vue';
 import VirtualScrollerProps from '../virtualscroller';
 
+type DropdownOptionLabelType = string | ((data: any) => string) | undefined;
+type DropdownOptionValueType = string | ((data: any) => any) | undefined;
 type DropdownOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type DropdownOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
 interface DropdownProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
+    optionLabel?: DropdownOptionLabelType;
-    optionValue?: any;
+    optionValue?: DropdownOptionValueType;
     optionDisabled?: DropdownOptionDisabledType;
-    optionGroupLabel?: string;
+    optionGroupLabel?: DropdownOptionLabelType;
-    optionGroupChildren?: string;
+    optionGroupChildren?: DropdownOptionChildrenType;
     scrollHeight?: string;
     filter?: boolean;
     filterPlaceholder?: string;

src/components/listbox/Listbox.d.ts

@@ -1,16 +1,19 @@
 import { VNode } from 'vue';
 import VirtualScrollerProps from '../virtualscroller';
 
+type ListboxOptionLabelType = string | ((data: any) => string) | undefined;
+type ListboxOptionValueType = string | ((data: any) => any) | undefined;
 type ListboxOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type ListboxOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
 interface ListboxProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
+    optionLabel?: ListboxOptionLabelType;
-    optionValue?: any;
+    optionValue?: ListboxOptionValueType;
     optionDisabled?: ListboxOptionDisabledType;
-    optionGroupLabel?: string;
+    optionGroupLabel?: ListboxOptionLabelType;
-    optionGroupChildren?: string;
+    optionGroupChildren?: ListboxOptionChildrenType;
     listStyle?: string;
     disabled?: boolean;
     dataKey?: string;

src/components/multiselect/MultiSelect.d.ts

@@ -1,16 +1,19 @@
 import { VNode } from 'vue';
 import VirtualScrollerProps from '../virtualscroller';
 
+type MultiSelectOptionLabelType = string | ((data: any) => string) | undefined;
+type MultiSelectOptionValueType = string | ((data: any) => any) | undefined;
 type MultiSelectOptionDisabledType = string | ((data: any) => boolean) | undefined;
+type MultiSelectOptionChildrenType = string | ((data: any) => any[]) | undefined;
 
 interface MultiSelectProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
+    optionLabel?: MultiSelectOptionLabelType;
-    optionValue?: any;
+    optionValue?: MultiSelectOptionValueType;
     optionDisabled?: MultiSelectOptionDisabledType;
-    optionGroupLabel?: string;
+    optionGroupLabel?: MultiSelectOptionLabelType;
-    optionGroupChildren?: string;
+    optionGroupChildren?: MultiSelectOptionChildrenType;
     scrollHeight?: string;
     placeholder?: string;
     disabled?: boolean;

src/components/selectbutton/SelectButton.d.ts

@@ -1,10 +1,12 @@
+type SelectButtonOptionLabelType = string | ((data: any) => string) | undefined;
+type SelectButtonOptionValueType = string | ((data: any) => any) | undefined;
 type SelectButtonOptionDisabledType = string | ((data: any) => boolean) | undefined;
 
 interface SelectButtonProps {
     modelValue?: any;
     options?: any[];
-    optionLabel?: string;
+    optionLabel?: SelectButtonOptionLabelType;
-    optionValue?: any;
+    optionValue?: SelectButtonOptionValueType;
     optionDisabled?: SelectButtonOptionDisabledType;
     multiple?: boolean;
     disabled?: boolean;

src/views/dropdown/DropdownDoc.vue

@@ -145,13 +145,13 @@ export default {
                     </tr>
                     <tr>
                         <td>optionLabel</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the label of an option.</td>
                     </tr>
                     <tr>
                         <td>optionValue</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
                     </tr>
@@ -163,13 +163,13 @@ export default {
                     </tr>
                     <tr>
                         <td>optionGroupLabel</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the label of an option group.</td>
                     </tr>
                     <tr>
                         <td>optionGroupChildren</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function that refers to the children options of option group.</td>
                     </tr>

src/views/multiselect/MultiSelectDoc.vue

@@ -154,13 +154,13 @@ export default {
                     </tr>
                     <tr>
                         <td>optionLabel</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the label of an option.</td>
                     </tr>
                     <tr>
                         <td>optionValue</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
                     </tr>
@@ -172,13 +172,13 @@ export default {
                     </tr>
                     <tr>
                         <td>optionGroupLabel</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the label of an option group.</td>
                     </tr>
                     <tr>
                         <td>optionGroupChildren</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function that refers to the children options of option group.</td>
                     </tr>

src/views/selectbutton/SelectButtonDoc.vue

@@ -84,13 +84,13 @@ export default {
                     </tr>
                     <tr>
                         <td>optionLabel</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the label of an option.</td>
                     </tr>
                     <tr>
                         <td>optionValue</td>
-                        <td>string</td>
+                        <td>string | function</td>
                         <td>null</td>
                         <td>Property name or getter function to use as the value of an option, defaults to the option itself when not defined.</td>
                     </tr>