tide-design-system 2.0.31 → 2.0.32

package/package.json

@@ -52,5 +52,5 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.0.31"
+  "version": "2.0.32"
 }

package/src/components/TideInputSelect.vue

@@ -2,6 +2,7 @@
   import { getCurrentInstance, computed, ref, watch } from 'vue';
 
   import type { SelectField } from '@/types/Field';
+  import type { SelectOption, SelectOptionGroup } from '@/types/Select';
 
   import TideIcon from '@/components/TideIcon.vue';
   import { CSS } from '@/types/Styles';
@@ -21,20 +22,20 @@
     label: undefined,
     required: false,
     supportingText: undefined,
-    value: '',
+    value: undefined,
   });
 
   const error = ref(props.error);
   const hasFocus = ref(false);
   const input = ref<HTMLSelectElement | null>(null);
   const required = ref(props.required);
-  const value = ref(props.value);
+  const value = ref<string | undefined>(props.value);
 
   const errorMessage = computed(() => getErrorMessage(props.error, error.value));
   const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
   const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
-  const isEmpty = computed(() => value.value === '');
+  const isEmpty = computed(() => value.value === undefined);
 
   const uniqueId = computed(() => (props.inputId ? props.inputId : `text-input-${getCurrentInstance()?.uid || ''}`));
 
@@ -115,22 +116,33 @@
           :id="uniqueId"
           v-model="value"
         >
-          <component
-            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-            :key="optgroup.label"
-            :label="optgroup.label"
-            :is="optgroup.options ? 'optgroup' : 'option'"
-            v-for="optgroup in props.optgroups"
-          >
+          <template v-for="optgroup in props.optgroups">
+            <optgroup
+              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+              :key="(optgroup as SelectOptionGroup).label"
+              :label="(optgroup as SelectOptionGroup).label"
+              v-if="(optgroup as SelectOptionGroup).options"
+            >
+              <option
+                :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+                :key="option.value"
+                :value="option.value"
+                v-for="option in (optgroup as SelectOptionGroup).options"
+              >
+                {{ option.label }}
+              </option>
+            </optgroup>
+
             <option
               :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-              :key="option.value"
-              :value="option.value"
-              v-for="option in optgroup.options"
+              :key="(optgroup as SelectOption).value"
+              :selected="value === (optgroup as SelectOption).value ? true : undefined"
+              :value="(optgroup as SelectOption).value"
+              v-else
             >
-              {{ option.label }}
+              {{ (optgroup as SelectOption).label }}
             </option>
-          </component>
+          </template>
 
           <option
             :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"

package/src/stories/TideInputSelect.stories.ts

@@ -14,26 +14,37 @@ import {
 } from '@/utilities/storybook';
 
 const options = {
+  'Any': '',
   'Option 1': 1,
   'Option 2': 2,
   'Option 3': 3,
+  'Option A1': 'A1',
+  'Option A2': 'A2',
+  'Option A3': 'A3',
+  'Option B1': 'B1',
+  'Option B2': 'B2',
+  'Option B3': 'B3',
 };
 
-const selectOptionGroups: SelectOptionGroup[] = [
+const selectOptionGroups: (SelectOption | SelectOptionGroup)[] = [
+  {
+    label: 'Any',
+    value: '',
+  },
   {
     label: 'Group A',
     options: [
       {
-        label: 'Option 1',
-        value: 1,
+        label: 'Option A1',
+        value: 'A1',
       },
       {
-        label: 'Option 2',
-        value: 2,
+        label: 'Option A2',
+        value: 'A2',
       },
       {
-        label: 'Option 3',
-        value: 3,
+        label: 'Option A3',
+        value: 'A3',
       },
     ],
   },
@@ -41,16 +52,16 @@ const selectOptionGroups: SelectOptionGroup[] = [
     label: 'Group B',
     options: [
       {
-        label: 'Option 4',
-        value: 4,
+        label: 'Option B1',
+        value: 'B1',
       },
       {
-        label: 'Option 5',
-        value: 5,
+        label: 'Option B2',
+        value: 'B2',
       },
       {
-        label: 'Option 6',
-        value: 6,
+        label: 'Option B3',
+        value: 'B3',
       },
     ],
   },
@@ -59,15 +70,15 @@ const selectOptionGroups: SelectOptionGroup[] = [
 const selectOptions: SelectOption[] = [
   {
     label: 'Option 1',
-    value: 1,
+    value: '1',
   },
   {
     label: 'Option 2',
-    value: 2,
+    value: '2',
   },
   {
     label: 'Option 3',
-    value: 3,
+    value: '3',
   },
 ];
 
@@ -76,7 +87,7 @@ const render = (args: any, { updateArgs }: any) => ({
   methods: {
     doSomething,
     handleChange: (event: Event) => {
-      const value = parseInt((event?.target as HTMLSelectElement).value, 10);
+      const value = (event?.target as HTMLSelectElement).value;
 
       updateArgs({ ...args, value });
       action('TideInputSelect changed')(event);

package/src/types/FacetRange.ts

@@ -22,7 +22,7 @@ const GROSS_WEIGHT_MAX = 12000;
 export const GROSS_WEIGHT_OPTIONS: SelectOption[] = [
   {
     label: 'Any',
-    value: null,
+    value: undefined,
   },
   ...Array.from({ length: Math.floor((GROSS_WEIGHT_MAX - GROSS_WEIGHT_MIN) / 1000) + 1 }, (_, index) => ({
     label: (GROSS_WEIGHT_MAX - index * 1000).toString(),
@@ -35,7 +35,7 @@ const SLEEP_CAP_MAX = 10;
 export const SLEEPING_CAPACITY_OPTIONS: SelectOption[] = [
   {
     label: 'Any',
-    value: null,
+    value: undefined,
   },
   ...Array.from({ length: SLEEP_CAP_MAX - SLEEP_CAP_MIN + 1 }, (_, index) => ({
     label: (SLEEP_CAP_MAX - index).toString(),
@@ -48,7 +48,7 @@ const SLIDEOUT_MAX = 5;
 export const SLIDEOUT_OPTIONS: SelectOption[] = [
   {
     label: 'Any',
-    value: null,
+    value: undefined,
   },
   ...Array.from({ length: SLIDEOUT_MAX - SLIDEOUT_MIN + 1 }, (_, index) => ({
     label: (SLIDEOUT_MAX - index).toString(),
@@ -61,7 +61,7 @@ const LENGTH_MAX = 50;
 export const LENGTH_OPTIONS: SelectOption[] = [
   {
     label: 'Any',
-    value: null,
+    value: undefined,
   },
   ...Array.from({ length: LENGTH_MAX - LENGTH_MIN + 1 }, (_, index) => ({
     label: (LENGTH_MAX - index).toString(),
@@ -75,7 +75,7 @@ const YEAR_MAX = today.getFullYear() + 2;
 export const YEAR_OPTIONS: SelectOption[] = [
   {
     label: 'Any',
-    value: null,
+    value: undefined,
   },
   ...Array.from({ length: YEAR_MAX - YEAR_MIN + 1 }, (_, index) => ({
     label: (YEAR_MAX - index).toString(),

package/src/types/Field.ts

@@ -25,7 +25,7 @@ interface GenericInput {
 }
 
 interface SelectField extends GenericInput, StringValue {
-  optgroups?: SelectOptionGroup[];
+  optgroups?: (SelectOption | SelectOptionGroup)[];
   options?: SelectOption[];
 }
 

package/src/types/Form.ts

@@ -24,7 +24,7 @@ export type SelectInput = GenericInput &
   StringValue & {
     options?: SelectOption[] | readonly SelectOption[];
     placeholder?: string;
-    optgroups?: SelectOptionGroup[];
+    optgroups?: (SelectOption | SelectOptionGroup)[];
   };
 
 export type TextInput = GenericInput &

package/src/types/Select.ts

@@ -1,9 +1,9 @@
 export type SelectOption = {
-  label: string | number;
-  value: any;
+  label: string;
+  value?: string;
 };
 
 export type SelectOptionGroup = {
   label: string;
-  options?: SelectOption[];
+  options: SelectOption[];
 };