fix(HstButtonGroup): not respecting options order

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

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.story.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ref } from 'vue'
 import HstButtonGroup from './HstButtonGroup.vue'
 
 const options = {
@@ -19,6 +20,8 @@ function initState () {
     speed: flatOptions[0],
   }
 }
+
+const count = ref('0')
 </script>
 
 <template>
@@ -32,6 +35,7 @@ function initState () {
       :init-state="initState"
     >
       <template #default="{ state }">
+        <pre>{{ { speed: state.speed } }}</pre>
         <HstButtonGroup
           v-model="state.speed"
           title="Label"
@@ -47,5 +51,29 @@ function initState () {
         />
       </template>
     </Variant>
+
+    <Variant
+      title="Object options"
+      :init-state="initState"
+    >
+      <template #default="{ state }">
+        <pre>{{ { speed: state.speed } }}</pre>
+        <HstButtonGroup
+          v-model="state.speed"
+          title="Label"
+          :options="options"
+        />
+      </template>
+    </Variant>
+
+    <Variant
+      title="Should retain order"
+    >
+      <pre>{{ { count } }}</pre>
+      <HstButtonGroup
+        v-model="count"
+        :options="[{label: 'Low', value: '-25'},{label: 'Regular', value: '0'},{label: 'High', value: '200'}]"
+      />
+    </Variant>
   </Story>
 </template>
diff --git a/packages/histoire-controls/src/components/button/HstButtonGroup.vue b/packages/histoire-controls/src/components/button/HstButtonGroup.vue
@@ -13,20 +13,24 @@ import HstButton from './HstButton.vue'
 const props = defineProps<{
   title?: string
   modelValue: string
-  options: string[] | HstControlOption[]
+  options: string[] | HstControlOption[] | Record<string, string>
 }>()
 
-const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+const formattedOptions: ComputedRef<HstControlOption[]> = computed(() => {
   if (Array.isArray(props.options)) {
-    return Object.fromEntries(props.options.map((value: string | HstControlOption) => {
+    return props.options.map((value: string | HstControlOption) => {
       if (typeof value === 'string') {
-        return [value, value]
+        return { value, label: value }
       } else {
-        return [value.value, value.label]
+        return value
       }
+    })
+  } else {
+    return Object.keys(props.options).map((value: string) => ({
+      value,
+      label: props.options[value],
     }))
   }
-  return props.options
 })
 
 const emit = defineEmits<{
@@ -47,7 +51,7 @@ function selectOption (value: string) {
   >
     <div class="htw-flex htw-gap-px htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-sm htw-p-px">
       <HstButton
-        v-for="( label, value ) in formattedOptions"
+        v-for="{ label, value } of formattedOptions"
         :key="value"
         class="htw-px-1 htw-h-[22px] htw-flex-1 !htw-rounded-[3px]"
         :color="value === modelValue ? 'primary' : 'flat'"