fix(HstSelect): support array of numbers, fix #423

histoire-dev · Feb 5, 2023 · b7cc168 · b7cc168
1 parent 2bbfc1d
commit b7cc168
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
@@ -13,14 +13,14 @@ import HstButton from './HstButton.vue'
 const props = defineProps<{
   title?: string
   modelValue: string
-  options: string[] | HstControlOption[] | Record<string, string>
+  options: string[] | number[] | HstControlOption[] | Record<string, string | number>
 }>()
 
 const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
   if (Array.isArray(props.options)) {
-    return props.options.map((value: string | HstControlOption) => {
-      if (typeof value === 'string') {
-        return { value, label: value }
+    return props.options.map((value: string | number | HstControlOption) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        return { value, label: String(value) }
       } else {
         return value
       }

diff --git a/packages/histoire-controls/src/components/select/CustomSelect.vue b/packages/histoire-controls/src/components/select/CustomSelect.vue
@@ -12,7 +12,7 @@ import { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
-  options: Record<string, any> | string[] | HstControlOption[]
+  options: Record<string, any> | string[] | number[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
@@ -22,8 +22,8 @@ const emits = defineEmits<{
 const formattedOptions: ComputedRef<[any, string][]> = computed(() => {
   if (Array.isArray(props.options)) {
     return props.options.map(option => {
-      if (typeof option === 'string') {
-        return [option, option] as [string, string]
+      if (typeof option === 'string' || typeof option === 'number') {
+        return [option, String(option)] as [any, string]
       } else {
         return [option.value, option.label] as [any, string]
       }

diff --git a/packages/histoire-controls/src/components/select/HstSelect.story.vue b/packages/histoire-controls/src/components/select/HstSelect.story.vue
@@ -14,10 +14,13 @@ const objectOptions = Object.keys(options).map(key => ({
   value: key,
 }))
 
+const numberOptions = [0, 1, 2, 3, 4, 5]
+
 function initState () {
   return {
     label: 'My really long label',
     select: 'crash-bandicoot',
+    count: 0,
   }
 }
 </script>
@@ -133,5 +136,26 @@ function initState () {
         />
       </template>
     </Variant>
+
+    <Variant
+      title="options-as-array-of-numbers"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre class="htw-text-xs htw-bg-gray-50 dark:htw-bg-gray-600 htw-rounded htw-p-4">{{ numberOptions }}</pre>
+        <HstSelect
+          v-model="state.count"
+          title="Select"
+          :options="numberOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.count"
+          title="Select"
+          :options="numberOptions"
+        />
+      </template>
+    </Variant>
   </Story>
 </template>