@histoire/controls 0.12.3 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.12.3",
+  "version": "0.13.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -38,14 +38,14 @@
     "@codemirror/state": "^6.1.2",
     "@codemirror/theme-one-dark": "^6.1.0",
     "@codemirror/view": "^6.3.0",
-    "@histoire/vendors": "^0.12.3"
+    "@histoire/vendors": "^0.13.0"
   },
   "devDependencies": {
     "@peeky/server": "^0.14.0",
     "@peeky/test": "^0.14.1",
     "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^4.0.0",
-    "@vue/test-utils": "^2.0.0-rc.19",
+    "@vue/test-utils": "^2.2.10",
     "@vueuse/core": "^8.2.5",
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
@@ -53,10 +53,10 @@
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
-    "typescript": "^4.7.4",
-    "vite": "^4.0.0",
-    "vue": "^3.2.31",
-    "vue-tsc": "^0.35.2"
+    "typescript": "^4.9.5",
+    "vite": "^4.1.0",
+    "vue": "^3.2.47",
+    "vue-tsc": "^1.0.24"
   },
   "scripts": {
     "build": "rimraf dist && pnpm run build:css && vite build && pnpm run build:types",

package/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>

package/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[] | number[] | HstControlOption[] | Record<string, string | number>
 }>()
 
-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) => {
-      if (typeof value === 'string') {
-        return [value, value]
+    return props.options.map((value: string | number | HstControlOption) => {
+      if (typeof value === 'string' || typeof value === 'number') {
+        return { value, label: String(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'"

package/src/components/design-tokens/HstTokenList.story.vue

@@ -69,7 +69,7 @@ const tokens = {
             <div
               class="htw-h-20 htw-bg-gray-500/50"
               :style="{
-                width: token.value,
+                width: token.value as string,
               }"
             />
           </div>

package/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]
       }

package/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>

package/dist/components/checkbox/HstCheckbox.test.d.ts

@@ -1 +0,0 @@
-export {};