@histoire/controls 0.8.0 → 0.8.3

package/dist/components/select/CustomSelect.vue.d.ts

@@ -1,12 +1,12 @@
 import { HstControlOption } from '../../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
-    options: Record<string, string> | string[] | HstControlOption[];
+    options: Record<string, any> | string[] | HstControlOption[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     modelValue: string;
-    options: Record<string, string> | string[] | HstControlOption[];
+    options: Record<string, any> | string[] | HstControlOption[];
 }>>> & {
     "onUpdate:modelValue"?: (value: string) => any;
 }, {}>;

package/dist/components/select/HstSelect.vue.d.ts

@@ -2,15 +2,15 @@ import { HstControlOption } from '../../types';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     modelValue: string;
-    options: Record<string, string> | string[] | HstControlOption[];
+    options: Record<string, any> | string[] | HstControlOption[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => void;
+    "update:modelValue": (value: any) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     modelValue: string;
-    options: Record<string, string> | string[] | HstControlOption[];
+    options: Record<string, any> | string[] | HstControlOption[];
 }>>> & {
-    "onUpdate:modelValue"?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
 }, {}>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/index.d.ts

@@ -128,11 +128,11 @@ export declare const HstSelect: import("vue-demi").DefineComponent<{
         required: true;
     };
     options: {
-        type: import("vue-demi").PropType<string[] | Record<string, string> | import("./types").HstControlOption[]>;
+        type: import("vue-demi").PropType<Record<string, any> | string[] | import("./types").HstControlOption[]>;
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => void;
+    "update:modelValue": (value: any) => void;
 }, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     title: {
         type: import("vue-demi").PropType<string>;
@@ -142,11 +142,11 @@ export declare const HstSelect: import("vue-demi").DefineComponent<{
         required: true;
     };
     options: {
-        type: import("vue-demi").PropType<string[] | Record<string, string> | import("./types").HstControlOption[]>;
+        type: import("vue-demi").PropType<Record<string, any> | string[] | import("./types").HstControlOption[]>;
         required: true;
     };
 }>> & {
-    "onUpdate:modelValue"?: (value: string) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
 }, {}>;
 export declare const HstColorShades: import("vue-demi").DefineComponent<{
     shades: {
@@ -393,11 +393,11 @@ export declare const components: {
             required: true;
         };
         options: {
-            type: import("vue-demi").PropType<string[] | Record<string, string> | import("./types").HstControlOption[]>;
+            type: import("vue-demi").PropType<Record<string, any> | string[] | import("./types").HstControlOption[]>;
             required: true;
         };
     }, {}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
-        "update:modelValue": (value: string) => void;
+        "update:modelValue": (value: any) => void;
     }, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
         title: {
             type: import("vue-demi").PropType<string>;
@@ -407,11 +407,11 @@ export declare const components: {
             required: true;
         };
         options: {
-            type: import("vue-demi").PropType<string[] | Record<string, string> | import("./types").HstControlOption[]>;
+            type: import("vue-demi").PropType<Record<string, any> | string[] | import("./types").HstControlOption[]>;
             required: true;
         };
     }>> & {
-        "onUpdate:modelValue"?: (value: string) => any;
+        "onUpdate:modelValue"?: (value: any) => any;
     }, {}>;
     HstColorShades: import("vue-demi").DefineComponent<{
         shades: {

package/dist/index.es.js

@@ -401,17 +401,21 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const props = __props;
     const formattedOptions = computed(() => {
       if (Array.isArray(props.options)) {
-        return Object.fromEntries(props.options.map((value) => {
-          if (typeof value === "string") {
-            return [value, value];
+        return props.options.map((option) => {
+          if (typeof option === "string") {
+            return [option, option];
           } else {
-            return [value.value, value.label];
+            return [option.value, option.label];
           }
-        }));
+        });
+      } else {
+        return Object.entries(props.options);
       }
-      return props.options;
     });
-    const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
+    const selectedLabel = computed(() => {
+      var _a;
+      return (_a = formattedOptions.value.find(([value]) => value === props.modelValue)) == null ? void 0 : _a[1];
+    });
     function selectValue(value, hide) {
       emits("update:modelValue", value);
       hide();
@@ -420,7 +424,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
         popper: withCtx(({ hide }) => [
           createElementVNode("div", _hoisted_3$4, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), ([value, label]) => {
               return openBlock(), createElementBlock("div", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
                 key: label,
                 class: ["htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700", {

package/dist/types.d.ts

@@ -1,4 +1,4 @@
 export interface HstControlOption {
     label: string;
-    value: string;
+    value: any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.8.0",
+  "version": "0.8.3",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -31,7 +31,7 @@
     "*.vue"
   ],
   "dependencies": {
-    "@histoire/vendors": "^0.8.0"
+    "@histoire/vendors": "^0.8.3"
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
@@ -42,7 +42,7 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.8.0",
+    "histoire": "0.8.3",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/peeky.config.ts

@@ -12,7 +12,6 @@ export default defineConfig({
         '@iconify/vue': '@iconify/vue',
         pinia: 'pinia',
         'scroll-into-view-if-needed': 'scroll-into-view-if-needed',
-        shiki: 'shiki',
         'vue-router': 'vue-router',
         '@vueuse/core': '@vueuse/core',
         vue: 'vue',

package/src/components/select/CustomSelect.vue

@@ -12,29 +12,30 @@ import { HstControlOption } from '../../types'
 
 const props = defineProps<{
   modelValue: string
-  options: Record<string, string> | string[] | HstControlOption[]
+  options: Record<string, any> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
 }>()
 
-const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+const formattedOptions: ComputedRef<[any, string][]> = 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(option => {
+      if (typeof option === 'string') {
+        return [option, option] as [string, string]
       } else {
-        return [value.value, value.label]
+        return [option.value, option.label] as [any, string]
       }
-    }))
+    })
+  } else {
+    return Object.entries(props.options)
   }
-  return props.options
 })
 
-const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+const selectedLabel = computed(() => formattedOptions.value.find(([value]) => value === props.modelValue)?.[1])
 
-function selectValue (value: string, hide: () => void) {
+function selectValue (value: any, hide: () => void) {
   emits('update:modelValue', value)
   hide()
 }
@@ -60,7 +61,7 @@ function selectValue (value: string, hide: () => void) {
     <template #popper="{ hide }">
       <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
         <div
-          v-for="( label, value ) in formattedOptions"
+          v-for="[value, label] of formattedOptions"
           v-bind="{ ...$attrs, class: null, style: null }"
           :key="label"
           class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"

package/src/components/select/HstSelect.vue

@@ -12,11 +12,11 @@ import { HstControlOption } from '../../types'
 defineProps<{
   title?: string
   modelValue: string
-  options: Record<string, string> | string[] | HstControlOption[]
+  options: Record<string, any> | string[] | HstControlOption[]
 }>()
 
 const emits = defineEmits<{
-  (e: 'update:modelValue', value: string): void
+  (e: 'update:modelValue', value: any): void
 }>()
 </script>
 

package/src/types.ts

@@ -1,4 +1,4 @@
 export interface HstControlOption {
   label: string
-  value: string
+  value: any
 }

package/tsconfig.json

@@ -35,7 +35,6 @@
       "@iconify/vue": ["./node_modules/@histoire/vendors/dist/client/iconify"],
       "pinia": ["./node_modules/@histoire/vendors/dist/client/pinia"],
       "scroll-into-view-if-needed": ["./node_modules/@histoire/vendors/dist/client/scroll"],
-      "shiki": ["./node_modules/@histoire/vendors/dist/client/shiki"],
       "vue-router": ["./node_modules/@histoire/vendors/dist/client/vue-router"],
       "@vueuse/core": ["./node_modules/@histoire/vendors/dist/client/vue-use"],
       "vue": ["./node_modules/@histoire/vendors/dist/client/vue"]

package/vite.config.ts

@@ -14,7 +14,6 @@ export default defineConfig({
       '@iconify/vue': '@histoire/vendors/dist/client/iconify.js',
       pinia: '@histoire/vendors/dist/client/pinia.js',
       'scroll-into-view-if-needed': '@histoire/vendors/dist/client/scroll.js',
-      shiki: '@histoire/vendors/dist/client/shiki.js',
       'vue-router': '@histoire/vendors/dist/client/vue-router.js',
       '@vueuse/core': '@histoire/vendors/dist/client/vue-use.js',
       vue: '@histoire/vendors/dist/client/vue.js',