@histoire/controls 0.4.3 → 0.4.6

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

@@ -0,0 +1,25 @@
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    modelValue: string;
+    options: Record<string, string> | string[] | SelectOption[];
+}>, {}, 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[] | SelectOption[];
+}>>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {}>;
+export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -1,43 +1,25 @@
-import { PropType } from 'vue';
-export interface HstSelectOptions {
-    label: string;
-    value: string;
-}
-declare const _default: import("vue").DefineComponent<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: any;
-    };
-    options: {
-        type: PropType<string[] | HstSelectOptions[]>;
-        required: true;
-        default: () => any[];
-    };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (newValue: string) => true;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-        default: string;
-    };
-    modelValue: {
-        type: StringConstructor;
-        default: any;
-    };
-    options: {
-        type: PropType<string[] | HstSelectOptions[]>;
-        required: true;
-        default: () => any[];
-    };
-}>> & {
-    "onUpdate:modelValue"?: (newValue: string) => any;
-}, {
-    title: string;
+export type { SelectOption as HstSelectOption } from './CustomSelect.vue';
+import { SelectOption } from './CustomSelect.vue';
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    modelValue: string;
+    options: Record<string, string> | string[] | SelectOption[];
+}>, {}, 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<{
+    title?: string;
     modelValue: string;
-    options: string[] | HstSelectOptions[];
-}>;
+    options: Record<string, string> | string[] | SelectOption[];
+}>>> & {
+    "onUpdate:modelValue"?: (value: string) => any;
+}, {}>;
 export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/index.es.js

@@ -2327,11 +2327,11 @@ const _hoisted_2$1$1 = {
   ref: "inner",
   class: "v-popper__inner"
 };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
-const _hoisted_4$3 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
+const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-outer" }, null, -1);
+const _hoisted_4$4 = /* @__PURE__ */ createElementVNode("div", { class: "v-popper__arrow-inner" }, null, -1);
 const _hoisted_5$3 = [
-  _hoisted_3$5,
-  _hoisted_4$3
+  _hoisted_3$6,
+  _hoisted_4$4
 ];
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ResizeObserver = resolveComponent("ResizeObserver");
@@ -2515,7 +2515,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   }, 16, ["theme", "target-nodes", "reference-node", "popper-node"]);
 }
 var PrivatePopperWrapper = /* @__PURE__ */ _export_sfc(_sfc_main$4$1, [["render", _sfc_render$1]]);
-defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
+const _sfc_main$3$1 = defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VDropdown",
   vPopperTheme: "dropdown"
 }));
@@ -2527,7 +2527,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2673,7 +2673,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2798,13 +2798,14 @@ var PrivateVTooltip = {
   }
 };
 const VTooltip = PrivateVTooltip;
+const Dropdown = _sfc_main$3$1;
 const _hoisted_1$7 = { class: "htw-p-2 hover:htw-bg-primary-100 dark:hover:htw-bg-primary-800 htw-flex htw-gap-2 htw-flex-wrap" };
 const _hoisted_2$5 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
-const _hoisted_3$4 = { class: "htw-block htw-grow" };
-const __default__$9 = {
+const _hoisted_3$5 = { class: "htw-block htw-grow" };
+const __default__$a = {
   name: "HstWrapper"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
+const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
   props: {
     title: null
   },
@@ -2820,7 +2821,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             distance: 12
           }]
         ]),
-        createElementVNode("span", _hoisted_3$4, [
+        createElementVNode("span", _hoisted_3$5, [
           renderSlot(_ctx.$slots, "default")
         ])
       ]);
@@ -2834,11 +2835,11 @@ const _hoisted_2$4 = {
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
-const _hoisted_3$3 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$8 = {
+const _hoisted_3$4 = ["stroke-dasharray", "stroke-dashoffset"];
+const __default__$9 = {
   name: "HstCheckbox"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2862,7 +2863,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       dasharray.value = (_c = (_b2 = (_a2 = path.value).getTotalLength) == null ? void 0 : _b2.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2894,7 +2895,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 ]]),
                 "stroke-dasharray": dasharray.value,
                 "stroke-dashoffset": unref(dashoffset)
-              }, null, 10, _hoisted_3$3)
+              }, null, 10, _hoisted_3$4)
             ]))
           ])
         ]),
@@ -2904,10 +2905,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   }
 }));
 const _hoisted_1$5 = ["value"];
-const __default__$7 = {
+const __default__$8 = {
   name: "HstText"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
+const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
   props: {
     title: null,
     modelValue: null
@@ -2918,7 +2919,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2940,11 +2941,11 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const __default__$6 = {
+const __default__$7 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
+const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
   props: {
     title: null,
     modelValue: null
@@ -2991,7 +2992,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3026,11 +3027,11 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   }
 }));
 const _hoisted_1$4 = ["value"];
-const __default__$5 = {
+const __default__$6 = {
   name: "HstTextarea",
   inheritAttrs: false
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$6), {
   props: {
     title: null,
     modelValue: null
@@ -3041,7 +3042,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
+      return openBlock(), createBlock(_sfc_main$a, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -3062,63 +3063,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$3 = ["value"];
-const _hoisted_2$3 = ["value"];
-const __default__$4 = {
-  name: "HstSelect"
-};
-const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    modelValue: {
-      type: String,
-      default: null
-    },
-    options: {
-      type: Array,
-      required: true,
-      default: () => []
-    }
-  },
-  emits: {
-    "update:modelValue": (newValue) => true
-  },
-  setup(__props, { emit }) {
-    const props = __props;
-    const formattedOtions = computed(() => props.options.map((option) => typeof option === "string" ? { label: option, value: option } : option));
-    const select = ref();
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$9, {
-        title: __props.title,
-        class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
-        style: normalizeStyle(_ctx.$attrs.style),
-        onClick: _cache[1] || (_cache[1] = ($event) => select.value.focus())
-      }, {
-        default: withCtx(() => [
-          createElementVNode("select", {
-            ref_key: "select",
-            ref: select,
-            class: "htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm",
-            value: __props.modelValue,
-            onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOtions), ({ label, value }) => {
-              return openBlock(), createElementBlock("option", mergeProps(__spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
-                key: label,
-                class: "dark:htw-bg-gray-600",
-                value
-              }), toDisplayString(label), 17, _hoisted_2$3);
-            }), 128))
-          ], 40, _hoisted_1$3)
-        ]),
-        _: 1
-      }, 8, ["title", "class", "style"]);
-    };
-  }
-}));
 const matchName = /^[a-z0-9]+(-[a-z0-9]+)*$/;
 const iconDefaults = Object.freeze({
   left: 0,
@@ -4937,6 +4881,102 @@ const Icon = defineComponent({
     return render(icon.data, newProps);
   }
 });
+var CustomSelect_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$3 = { class: "htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal" };
+const _hoisted_2$3 = { class: "htw-flex-1 htw-truncate" };
+const _hoisted_3$3 = { class: "htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700" };
+const _hoisted_4$3 = ["onClick"];
+const __default__$5 = {
+  name: "CustomSelect"
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$5), {
+  props: {
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    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];
+          } else {
+            return [value.value, value.label];
+          }
+        }));
+      }
+      return props.options;
+    });
+    const selectedLabel = computed(() => formattedOptions.value[props.modelValue]);
+    function selectValue(value, hide) {
+      emits("update:modelValue", value);
+      hide();
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Dropdown), { "auto-size": "" }, {
+        popper: withCtx(({ hide }) => [
+          createElementVNode("div", _hoisted_3$3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(formattedOptions), (label, value) => {
+              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", {
+                  "htw-bg-primary-200 dark:htw-bg-primary-800": props.modelValue === value
+                }],
+                onClick: ($event) => selectValue(value, hide)
+              }), toDisplayString(label), 17, _hoisted_4$3);
+            }), 128))
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$3, [
+            createElementVNode("div", _hoisted_2$3, [
+              renderSlot(_ctx.$slots, "default", { label: unref(selectedLabel) }, () => [
+                createTextVNode(toDisplayString(unref(selectedLabel)), 1)
+              ])
+            ]),
+            createVNode(unref(Icon), {
+              icon: "carbon:chevron-sort",
+              class: "htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+            })
+          ])
+        ]),
+        _: 3
+      });
+    };
+  }
+}));
+const __default__$4 = {
+  name: "HstSelect"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+  props: {
+    title: null,
+    modelValue: null,
+    options: null
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: emits }) {
+    ref();
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$a, {
+        title: __props.title,
+        class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
+        style: normalizeStyle(_ctx.$attrs.style)
+      }, {
+        default: withCtx(() => [
+          createVNode(_sfc_main$5, {
+            options: __props.options,
+            "model-value": __props.modelValue,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emits("update:modelValue", $event))
+          }, null, 8, ["options", "model-value"])
+        ]),
+        _: 1
+      }, 8, ["title", "class", "style"]);
+    };
+  }
+}));
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -5326,20 +5366,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const HstCheckbox = _sfc_main$8;
-const HstText = _sfc_main$7;
-const HstNumber = _sfc_main$6;
-const HstTextarea = _sfc_main$5;
+const HstCheckbox = _sfc_main$9;
+const HstText = _sfc_main$8;
+const HstNumber = _sfc_main$7;
+const HstTextarea = _sfc_main$6;
 const HstColorShades = _sfc_main$2;
 const HstTokenList = _sfc_main$1;
 const HstTokenGrid = _sfc_main;
 const HstCopyIcon = _sfc_main$3;
 function registerVueComponents(app) {
-  app.component("HstCheckbox", _sfc_main$8);
-  app.component("HstText", _sfc_main$7);
-  app.component("HstNumber", _sfc_main$6);
+  app.component("HstCheckbox", _sfc_main$9);
+  app.component("HstText", _sfc_main$8);
+  app.component("HstNumber", _sfc_main$7);
   app.component("HstSelect", _sfc_main$4);
-  app.component("HstTextarea", _sfc_main$5);
+  app.component("HstTextarea", _sfc_main$6);
   app.component("HstColorShades", _sfc_main$2);
   app.component("HstTokenList", _sfc_main$1);
   app.component("HstTokenGrid", _sfc_main);

package/dist/style-standalone.css

@@ -294,6 +294,10 @@
   margin-bottom:0.5rem
 }
 
+.htw-ml-auto{
+  margin-left:auto
+}
+
 .htw-box-border{
   box-sizing:border-box
 }
@@ -334,6 +338,10 @@
   height:5rem
 }
 
+.htw-h-\[27px\]{
+  height:27px
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
@@ -366,6 +374,10 @@
   flex:none
 }
 
+.htw-flex-1{
+  flex:1 1 0%
+}
+
 .htw-shrink-0{
   flex-shrink:0
 }
@@ -488,6 +500,11 @@
   border-color:rgb(0 0 0 / 0.25)
 }
 
+.htw-border-gray-850{
+  --tw-border-opacity:1;
+  border-color:rgb(31 31 33 / var(--tw-border-opacity))
+}
+
 .htw-bg-white{
   --tw-bg-opacity:1;
   background-color:rgb(255 255 255 / var(--tw-bg-opacity))
@@ -510,6 +527,16 @@
   background-color:rgb(250 250 250 / var(--tw-bg-opacity))
 }
 
+.htw-bg-primary-200{
+  --tw-bg-opacity:1;
+  background-color:rgb(167 243 208 / var(--tw-bg-opacity))
+}
+
+.htw-bg-gray-700{
+  --tw-bg-opacity:1;
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -550,6 +577,10 @@
   line-height:1rem
 }
 
+.htw-leading-normal{
+  line-height:1.5
+}
+
 .htw-text-white{
   --tw-text-opacity:1;
   color:rgb(255 255 255 / var(--tw-text-opacity))
@@ -619,6 +650,11 @@ body {
   }
 }
 
+.hover\:htw-border-primary-500:hover{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .hover\:htw-bg-primary-100:hover{
   --tw-bg-opacity:1;
   background-color:rgb(209 250 229 / var(--tw-bg-opacity))
@@ -651,16 +687,36 @@ body {
   background-color:rgb(0 0 0 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:htw-bg-gray-700{
+  --tw-bg-opacity:1;
+  background-color:rgb(63 63 70 / var(--tw-bg-opacity))
+}
+
+.htw-dark .dark\:htw-bg-primary-800{
+  --tw-bg-opacity:1;
+  background-color:rgb(6 95 70 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:htw-bg-gray-600{
   --tw-bg-opacity:1;
   background-color:rgb(82 82 91 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:hover\:htw-border-primary-500:hover{
+  --tw-border-opacity:1;
+  border-color:rgb(16 185 129 / var(--tw-border-opacity))
+}
+
 .htw-dark .dark\:hover\:htw-bg-primary-800:hover{
   --tw-bg-opacity:1;
   background-color:rgb(6 95 70 / var(--tw-bg-opacity))
 }
 
+.htw-dark .dark\:hover\:htw-bg-primary-700:hover{
+  --tw-bg-opacity:1;
+  background-color:rgb(4 120 87 / var(--tw-bg-opacity))
+}
+
 .htw-dark .dark\:focus\:htw-border-primary-500:focus{
   --tw-border-opacity:1;
   border-color:rgb(16 185 129 / var(--tw-border-opacity))

package/dist/style.css

@@ -1 +1 @@
-.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}
+.v-popper{line-height:0}.htw-dark .v-popper--theme-dropdown .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity));--tw-text-opacity: 1;color:rgb(244 244 245 / var(--tw-text-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-inner{--tw-border-opacity: 1;border-color:rgb(63 63 70 / var(--tw-border-opacity))}.htw-dark .v-popper--theme-dropdown .v-popper__arrow-outer{--tw-border-opacity: 1;border-color:rgb(31 31 33 / var(--tw-border-opacity))}.v-popper--theme-dropdown.v-popper__popper--show-from .v-popper__wrapper{transform:scale(.75)}.v-popper--theme-dropdown.v-popper__popper--show-to .v-popper__wrapper{transform:none;transition:transform .15s cubic-bezier(0,1,.5,1)}.v-popper__popper:focus-visible{outline:none}.htw-bind-col-size{grid-template-columns:repeat(auto-fill,minmax(var(--histoire-col-size),1fr))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.4.3",
+  "version": "0.4.6",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -37,14 +37,14 @@
   },
   "devDependencies": {
     "@peeky/test": "^0.13.5",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.32",
     "@vitejs/plugin-vue": "^2.3.1",
     "@vue/test-utils": "^2.0.0-rc.19",
     "@vueuse/core": "^8.2.5",
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.4.3",
+    "histoire": "0.4.6",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/select/CustomSelect.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+export default {
+  name: 'CustomSelect',
+}
+</script>
+
+<script lang="ts" setup>
+import { Dropdown as VDropdown } from 'floating-vue'
+import { computed, ComputedRef } from 'vue'
+import { Icon } from '@iconify/vue'
+
+export interface SelectOption {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedOptions: ComputedRef<Record<string, string>> = computed(() => {
+  if (Array.isArray(props.options)) {
+    return Object.fromEntries(props.options.map((value: string | SelectOption) => {
+      if (typeof value === 'string') {
+        return [value, value]
+      } else {
+        return [value.value, value.label]
+      }
+    }))
+  }
+  return props.options
+})
+
+const selectedLabel = computed(() => formattedOptions.value[props.modelValue])
+
+function selectValue (value: string, hide: () => void) {
+  emits('update:modelValue', value)
+  hide()
+}
+</script>
+
+<template>
+  <VDropdown
+    auto-size
+  >
+    <div
+      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+    >
+      <div class="htw-flex-1 htw-truncate">
+        <slot :label="selectedLabel">
+          {{ selectedLabel }}
+        </slot>
+      </div>
+      <Icon
+        icon="carbon:chevron-sort"
+        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+      />
+    </div>
+    <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-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"
+          :class="{
+            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+          }"
+          @click="selectValue(value, hide)"
+        >
+          {{ label }}
+        </div>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+
+<style lang="postcss">
+/* @TODO custom themes */
+
+.v-popper {
+  line-height: 0;
+}
+
+.v-popper--theme-dropdown {
+  .htw-dark & {
+    .v-popper__inner {
+      @apply htw-bg-gray-700 htw-border-gray-850 htw-text-gray-100;
+    }
+
+    .v-popper__arrow-inner {
+      @apply htw-border-gray-700;
+    }
+
+    .v-popper__arrow-outer {
+      @apply htw-border-gray-850;
+    }
+  }
+
+  &.v-popper__popper--show-from .v-popper__wrapper {
+    transform: scale(.75);
+  }
+
+  &.v-popper__popper--show-to .v-popper__wrapper {
+    transform: none;
+    transition: transform .15s cubic-bezier(0, 1, .5, 1);
+  }
+}
+
+.v-popper__popper:focus-visible {
+  outline: none;
+}
+
+</style>

package/src/components/select/HstSelect.story.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import HstSelect from './HstSelect.vue'
 
-const options = [
-  { label: 'Crash Bandicoot', value: 'crash-bandicoot' },
-  { label: 'The Last of Us', value: 'the-last-of-us' },
-  { label: 'Ghost of Tsushima', value: 'ghost-of-tsushima' },
-]
+const options = {
+  'crash-bandicoot': 'Crash Bandicoot',
+  'the-last-of-us': 'The Last of Us',
+  'ghost-of-tsushima': 'Ghost of Tsushima',
+}
+
+const flatOptions = Object.keys(options)
 
-const flatOptions = options.map(option => option.label)
+const objectOptions = Object.keys(options).map(key => ({
+  label: options[key],
+  value: key,
+}))
 
 function initState () {
   return {
@@ -66,7 +71,7 @@ function initState () {
     </Variant>
 
     <Variant
-      title="options-as-array-of-objects"
+      title="options-as-object"
       :init-state="initState"
     >
       <template #default="{ state }">
@@ -86,6 +91,27 @@ function initState () {
       </template>
     </Variant>
 
+    <Variant
+      title="options-as-array-of-objects"
+      :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">{{ objectOptions }}</pre>
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.select"
+          title="Games"
+          :options="objectOptions"
+        />
+      </template>
+    </Variant>
+
     <Variant
       title="options-as-array-of-strings"
       :init-state="initState"

package/src/components/select/HstSelect.vue

@@ -2,39 +2,24 @@
 export default {
   name: 'HstSelect',
 }
+
+export type { SelectOption as HstSelectOption } from './CustomSelect.vue'
 </script>
 
 <script lang="ts" setup>
-import { ref, computed, ComputedRef, PropType } from 'vue'
+import { ref } from 'vue'
 import HstWrapper from '../HstWrapper.vue'
+import CustomSelect, { SelectOption } from './CustomSelect.vue'
 
-export interface HstSelectOptions {
-  label: string
-  value: string
-}
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: String,
-    default: null,
-  },
-  options: {
-    type: Array as PropType<HstSelectOptions[] | string[]>,
-    required: true,
-    default: () => [],
-  },
-})
-
-const formattedOtions: ComputedRef<HstSelectOptions[]> =
-  computed(() => props.options.map(option => typeof option === 'string' ? { label: option, value: option } as HstSelectOptions : option as HstSelectOptions))
+const props = defineProps<{
+  title?: string
+  modelValue: string
+  options: Record<string, string> | string[] | SelectOption[]
+}>()
 
-const emit = defineEmits({
-  'update:modelValue': (newValue: string) => true,
-})
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
 
 const select = ref<HTMLInputElement>()
 </script>
@@ -45,23 +30,11 @@ const select = ref<HTMLInputElement>()
     class="htw-cursor-text htw-items-center"
     :class="$attrs.class"
     :style="$attrs.style"
-    @click="select.focus()"
   >
-    <select
-      ref="select"
-      class="htw-text-inherit htw-bg-transparent htw-w-full htw-outline-none htw-px-2 htw-py-1 -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 focus:htw-border-primary-500 dark:focus:htw-border-primary-500 htw-rounded-sm"
-      :value="modelValue"
-      @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-    >
-      <option
-        v-for="{ label, value } in formattedOtions"
-        v-bind="{ ...$attrs, class: null, style: null }"
-        :key="label"
-        class="dark:htw-bg-gray-600"
-        :value="value"
-      >
-        {{ label }}
-      </option>
-    </select>
+    <CustomSelect
+      :options="options"
+      :model-value="modelValue"
+      @update:model-value="emits('update:modelValue', $event)"
+    />
   </HstWrapper>
 </template>