@histoire/controls 0.7.2 → 0.7.3

package/dist/components/slider/HstSlider.story.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/components/slider/HstSlider.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    modelValue: number;
+    min: number;
+    max: number;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (newValue: number) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title?: string;
+    modelValue: number;
+    min: number;
+    max: number;
+}>>> & {
+    "onUpdate:modelValue"?: (newValue: number) => 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.d.ts

@@ -62,6 +62,43 @@ export declare const HstNumber: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: (newValue: number) => any;
 }, {}>;
+export declare const HstSlider: import("vue").DefineComponent<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    min: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    max: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (newValue: number) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: import("vue").PropType<string>;
+    };
+    modelValue: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    min: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+    max: {
+        type: import("vue").PropType<number>;
+        required: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: (newValue: number) => any;
+}, {}>;
 export declare const HstTextarea: import("vue").DefineComponent<{
     title: {
         type: import("vue").PropType<string>;

package/dist/index.es.js

@@ -2525,7 +2525,7 @@ defineComponent(__spreadProps2(__spreadValues2({}, PrivatePopperWrapper), {
   name: "VTooltip",
   vPopperTheme: "tooltip"
 }));
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   name: "VTooltipDirective",
   components: {
     Popper: PrivatePopper(),
@@ -2616,8 +2616,8 @@ const _sfc_main$b = defineComponent({
     }
   }
 });
-const _hoisted_1$8 = ["innerHTML"];
-const _hoisted_2$6 = ["textContent"];
+const _hoisted_1$9 = ["innerHTML"];
+const _hoisted_2$7 = ["textContent"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_PopperContent = resolveComponent("PopperContent");
   const _component_Popper = resolveComponent("Popper");
@@ -2660,10 +2660,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           _ctx.html ? (openBlock(), createElementBlock("div", {
             key: 0,
             innerHTML: _ctx.finalContent
-          }, null, 8, _hoisted_1$8)) : (openBlock(), createElementBlock("div", {
+          }, null, 8, _hoisted_1$9)) : (openBlock(), createElementBlock("div", {
             key: 1,
             textContent: toDisplayString(_ctx.finalContent)
-          }, null, 8, _hoisted_2$6))
+          }, null, 8, _hoisted_2$7))
         ]),
         _: 2
       }, 1032, ["class", "popper-id", "theme", "shown", "mounted", "skip-transition", "auto-hide", "handle-resize", "classes", "result", "onHide", "onResize"])
@@ -2671,7 +2671,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 16, ["theme", "popper-node", "onApplyShow", "onApplyHide"]);
 }
-var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render]]);
+var PrivateTooltipDirective = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render]]);
 const TARGET_CLASS = "v-popper--has-tooltip";
 function getPlacement(options2, modifiers) {
   let result = options2.placement;
@@ -2797,21 +2797,21 @@ 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_1$8 = { 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$6 = { class: "htw-w-28 htw-whitespace-nowrap htw-text-ellipsis htw-overflow-hidden htw-shrink-0" };
 const _hoisted_3$5 = { class: "htw-grow htw-flex htw-items-center htw-gap-1" };
 const _hoisted_4$4 = { class: "htw-block htw-grow" };
-const __default__$a = {
+const __default__$b = {
   name: "HstWrapper"
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
+const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$b), {
   props: {
     title: null
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", _hoisted_1$7, [
-        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$5, [
+      return openBlock(), createElementBlock("label", _hoisted_1$8, [
+        withDirectives((openBlock(), createElementBlock("span", _hoisted_2$6, [
           createTextVNode(toDisplayString(__props.title), 1)
         ])), [
           [unref(VTooltip), {
@@ -2830,18 +2830,18 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$6 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
-const _hoisted_2$4 = {
+const _hoisted_1$7 = { class: "htw-text-white htw-w-[16px] htw-h-[16px] htw-relative" };
+const _hoisted_2$5 = {
   width: "16",
   height: "16",
   viewBox: "0 0 24 24",
   class: "htw-relative htw-z-10"
 };
 const _hoisted_3$4 = ["stroke-dasharray", "stroke-dashoffset"];
-const __default__$9 = {
+const __default__$a = {
   name: "HstCheckbox"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
+const _sfc_main$a = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$a), {
   props: {
     modelValue: { type: Boolean },
     title: null
@@ -2865,7 +2865,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       dasharray.value = (_c = (_b = (_a2 = path.value).getTotalLength) == null ? void 0 : _b.call(_a2)) != null ? _c : 21.21;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         role: "checkbox",
         tabindex: "0",
         class: "htw-cursor-pointer htw-items-center",
@@ -2880,13 +2880,13 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
           renderSlot(_ctx.$slots, "actions")
         ]),
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_1$7, [
             createElementVNode("div", {
               class: normalizeClass(["htw-border htw-border-solid group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out", [
                 __props.modelValue ? "htw-border-primary-500 htw-border-8" : "htw-border-black/25 dark:htw-border-white/25 htw-delay-150"
               ]])
             }, null, 2),
-            (openBlock(), createElementBlock("svg", _hoisted_2$4, [
+            (openBlock(), createElementBlock("svg", _hoisted_2$5, [
               createElementVNode("path", {
                 ref_key: "path",
                 ref: path,
@@ -2909,11 +2909,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
-const _hoisted_1$5 = ["value"];
-const __default__$8 = {
+const _hoisted_1$6 = ["value"];
+const __default__$9 = {
   name: "HstText"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$8), {
+const _sfc_main$9 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$9), {
   props: {
     title: null,
     modelValue: null
@@ -2924,7 +2924,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -2942,18 +2942,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             value: __props.modelValue,
             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",
             onInput: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event.target.value))
-          }), null, 16, _hoisted_1$5)
+          }), null, 16, _hoisted_1$6)
         ]),
         _: 3
       }, 8, ["title", "class", "style"]);
     };
   }
 }));
-const __default__$7 = {
+const __default__$8 = {
   name: "HstNumber",
   inheritAttrs: false
 };
-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
@@ -3000,7 +3000,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       stopDragging();
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         class: normalizeClass(["htw-cursor-ew-resize htw-items-center", [
           _ctx.$attrs.class,
           { "htw-select-none": isDragging.value }
@@ -3037,6 +3037,88 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     };
   }
 }));
+var HstSlider_vue_vue_type_style_index_0_lang = "";
+const _hoisted_1$5 = { class: "htw-relative htw-w-full htw-flex htw-items-center" };
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("div", { class: "htw-absolute htw-inset-0 htw-flex htw-items-center" }, [
+  /* @__PURE__ */ createElementVNode("div", { class: "htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" })
+], -1);
+const __default__$7 = {
+  name: "HstSlider",
+  inheritAttrs: false
+};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$7), {
+  props: {
+    title: null,
+    modelValue: null,
+    min: null,
+    max: null
+  },
+  emits: {
+    "update:modelValue": (newValue) => true
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const showTooltip = ref(false);
+    const input = ref(null);
+    const numberModel = computed({
+      get: () => props.modelValue,
+      set: (value) => {
+        emit("update:modelValue", value);
+      }
+    });
+    const percentage = computed(() => {
+      return (props.modelValue - props.min) / (props.max - props.min);
+    });
+    const tooltipStyle = computed(() => {
+      const gap = 8;
+      if (input.value) {
+        const position = gap + (input.value.clientWidth - 2 * gap) * percentage.value;
+        return {
+          left: position + "px"
+        };
+      }
+      return {};
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$b, {
+        class: normalizeClass(["htw-items-center", _ctx.$attrs.class]),
+        title: __props.title,
+        style: normalizeStyle(_ctx.$attrs.style)
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1$5, [
+            _hoisted_2$4,
+            withDirectives(createElementVNode("input", mergeProps({
+              ref_key: "input",
+              ref: input,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(numberModel) ? numberModel.value = $event : null),
+              class: "htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700",
+              type: "range"
+            }, __spreadProps(__spreadValues({}, _ctx.$attrs), { class: null, style: null }), {
+              onMouseover: _cache[1] || (_cache[1] = ($event) => showTooltip.value = true),
+              onMouseleave: _cache[2] || (_cache[2] = ($event) => showTooltip.value = false)
+            }), null, 16), [
+              [
+                vModelText,
+                unref(numberModel),
+                void 0,
+                { number: true }
+              ]
+            ]),
+            showTooltip.value ? withDirectives((openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "htw-absolute",
+              style: normalizeStyle(unref(tooltipStyle))
+            }, null, 4)), [
+              [unref(VTooltip), { content: __props.modelValue.toString(), shown: true, distance: 16, delay: 0 }]
+            ]) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["title", "class", "style"]);
+    };
+  }
+}));
 const _hoisted_1$4 = ["value"];
 const __default__$6 = {
   name: "HstTextarea",
@@ -3053,7 +3135,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   setup(__props, { emit }) {
     const input = ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style),
@@ -4974,7 +5056,7 @@ const _sfc_main$4 = defineComponent(__spreadProps(__spreadValues({}, __default__
   setup(__props, { emit: emits }) {
     ref();
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$a, {
+      return openBlock(), createBlock(_sfc_main$b, {
         title: __props.title,
         class: normalizeClass(["htw-cursor-text htw-items-center", _ctx.$attrs.class]),
         style: normalizeStyle(_ctx.$attrs.style)
@@ -5391,22 +5473,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     };
   }
 }));
-const HstCheckbox = _sfc_main$9;
-const HstText = _sfc_main$8;
-const HstNumber = _sfc_main$7;
+const HstCheckbox = _sfc_main$a;
+const HstText = _sfc_main$9;
+const HstNumber = _sfc_main$8;
+const HstSlider = _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$9);
-  app.component("HstText", _sfc_main$8);
-  app.component("HstNumber", _sfc_main$7);
+  app.component("HstCheckbox", _sfc_main$a);
+  app.component("HstText", _sfc_main$9);
+  app.component("HstNumber", _sfc_main$8);
+  app.component("HstSlider", _sfc_main$7);
   app.component("HstSelect", _sfc_main$4);
   app.component("HstTextarea", _sfc_main$6);
   app.component("HstColorShades", _sfc_main$2);
   app.component("HstTokenList", _sfc_main$1);
   app.component("HstTokenGrid", _sfc_main);
 }
-export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstText, HstTextarea, HstTokenGrid, HstTokenList, registerVueComponents };
+export { HstCheckbox, HstColorShades, HstCopyIcon, HstNumber, HstSlider, HstText, HstTextarea, HstTokenGrid, HstTokenList, registerVueComponents };

package/dist/style-standalone.css

@@ -271,6 +271,10 @@
   margin:1rem
 }
 
+.htw-m-0{
+  margin:0px
+}
+
 .htw-my-0{
   margin-top:0px;
   margin-bottom:0px
@@ -343,6 +347,14 @@
   height:27px
 }
 
+.htw-h-1{
+  height:0.25rem
+}
+
+.htw-h-3{
+  height:0.75rem
+}
+
 .htw-min-h-\[26px\]{
   min-height:26px
 }
@@ -371,6 +383,10 @@
   width:100%
 }
 
+.htw-w-3{
+  width:0.75rem
+}
+
 .htw-flex-none{
   flex:none
 }
@@ -414,6 +430,12 @@
   resize:vertical
 }
 
+.htw-appearance-none{
+  -webkit-appearance:none;
+     -moz-appearance:none;
+          appearance:none
+}
+
 .htw-grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\]{
   grid-template-columns:repeat(auto-fill,minmax(200px,1fr))
 }
@@ -488,6 +510,10 @@
   border-width:2px
 }
 
+.htw-border-0{
+  border-width:0px
+}
+
 .htw-border-solid{
   border-style:solid
 }
@@ -538,6 +564,11 @@
   background-color:rgb(63 63 70 / var(--tw-bg-opacity))
 }
 
+.\!htw-bg-primary-500{
+  --tw-bg-opacity:1 !important;
+  background-color:rgb(16 185 129 / var(--tw-bg-opacity)) !important
+}
+
 .htw-stroke-white{
   stroke:#fff
 }
@@ -591,6 +622,11 @@
   color:inherit
 }
 
+.htw-text-gray-700{
+  --tw-text-opacity:1;
+  color:rgb(63 63 70 / var(--tw-text-opacity))
+}
+
 .htw-opacity-50{
   opacity:0.5
 }

package/dist/style.css

@@ -1 +1 @@
-.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))}
+.htw-range-input::-webkit-slider-thumb{height:.75rem;width:.75rem;-webkit-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-webkit-slider-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-webkit-slider-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.htw-range-input::-moz-range-thumb{height:.75rem;width:.75rem;-moz-appearance:none;appearance:none;border-radius:9999px;border-width:1px;border-style:solid;border-color:#00000040;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.htw-dark .htw-range-input::-moz-range-thumb{border-color:#ffffff40;--tw-bg-opacity: 1;background-color:rgb(63 63 70 / var(--tw-bg-opacity))}.htw-range-input:hover::-moz-range-thumb{--tw-border-opacity: 1 !important;border-color:rgb(16 185 129 / var(--tw-border-opacity))!important;--tw-bg-opacity: 1 !important;background-color:rgb(16 185 129 / var(--tw-bg-opacity))!important}.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.7.2",
+  "version": "0.7.3",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -44,7 +44,7 @@
     "autoprefixer": "^10.4.4",
     "concurrently": "^7.1.0",
     "floating-vue": "^2.0.0-beta.16",
-    "histoire": "0.7.2",
+    "histoire": "0.7.3",
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",

package/src/components/slider/HstSlider.story.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import HstSlider from './HstSlider.vue'
+
+const state = reactive({
+  value: 20,
+  min: 0,
+  max: 100,
+  step: 5,
+})
+</script>
+
+<template>
+  <Story
+    title="HstSlider"
+  >
+    <HstSlider
+      v-model="state.value"
+      :step="state.step"
+      :min="state.min"
+      :max="state.max"
+      title="Slide"
+    />
+    <pre>{{ state }}</pre>
+    <template #controls>
+      <HstSlider
+        v-model="state.value"
+        :step="state.step"
+        :min="state.min"
+        :max="state.max"
+        title="Value"
+      />
+    </template>
+  </Story>
+</template>

package/src/components/slider/HstSlider.vue

@@ -0,0 +1,103 @@
+<script lang="ts">
+export default {
+  name: 'HstSlider',
+  inheritAttrs: false,
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import type { CSSProperties } from 'vue'
+import HstWrapper from '../HstWrapper.vue'
+import { VTooltip as vTooltip } from 'floating-vue'
+
+const props = defineProps<{
+  title?: string
+  modelValue: number
+  min: number
+  max: number
+}>()
+
+const emit = defineEmits({
+  'update:modelValue': (newValue: number) => true,
+})
+
+const showTooltip = ref(false)
+const input = ref<HTMLInputElement>(null)
+
+const numberModel = computed({
+  get: () => props.modelValue,
+  set: value => {
+    emit('update:modelValue', value)
+  },
+})
+
+const percentage = computed(() => {
+  return (props.modelValue - props.min) / (props.max - props.min)
+})
+
+const tooltipStyle = computed<CSSProperties>(() => {
+  const gap = 8
+  if (input.value) {
+    const position = gap + ((input.value.clientWidth - 2 * gap) * percentage.value)
+    return {
+      left: position + 'px',
+    }
+  }
+  return {}
+})
+</script>
+
+<template>
+  <HstWrapper
+    class="htw-items-center"
+    :title="title"
+    :class="$attrs.class"
+    :style="$attrs.style"
+  >
+    <div class="htw-relative htw-w-full htw-flex htw-items-center">
+      <div class="htw-absolute htw-inset-0 htw-flex htw-items-center">
+        <div class="htw-border htw-border-black/25 dark:htw-border-white/25 htw-h-1 htw-w-full htw-rounded-full" />
+      </div>
+      <input
+        ref="input"
+        v-model.number="numberModel"
+        class="htw-range-input htw-appearance-none htw-border-0 htw-bg-transparent htw-cursor-pointer htw-relative htw-w-full htw-m-0 htw-text-gray-700"
+        type="range"
+        v-bind="{ ...$attrs, class: null, style: null }"
+        @mouseover="showTooltip = true"
+        @mouseleave="showTooltip = false"
+      >
+      <div
+        v-if="showTooltip"
+        v-tooltip="{ content: modelValue.toString(), shown: true, distance: 16, delay: 0 }"
+        class="htw-absolute"
+        :style="tooltipStyle"
+      />
+    </div>
+  </HstWrapper>
+</template>
+
+<style lang="pcss">
+.htw-range-input {
+  &::-webkit-slider-thumb {
+    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    @apply !htw-bg-primary-500  !htw-border-primary-500;
+  }
+}
+
+/* Separate rules for -moz-range-thumb to prevent a bug with Safari that causes it to ignore custom style */
+
+.htw-range-input {
+  &::-moz-range-thumb {
+    @apply htw-appearance-none htw-h-3 htw-w-3 htw-bg-white dark:htw-bg-gray-700 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 htw-rounded-full;
+  }
+
+  &:hover::-moz-range-thumb {
+    @apply !htw-bg-primary-500  !htw-border-primary-500;
+  }
+}
+</style>

package/src/index.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue'
 import HstCheckboxVue from './components/checkbox/HstCheckbox.vue'
 import HstTextVue from './components/text/HstText.vue'
 import HstNumberVue from './components/number/HstNumber.vue'
+import HstSliderVue from './components/slider/HstSlider.vue'
 import HstTextareaVue from './components/textarea/HstTextarea.vue'
 import HstSelectVue from './components/select/HstSelect.vue'
 import HstColorShadesVue from './components/design-tokens/HstColorShades.vue'
@@ -12,6 +13,7 @@ import HstCopyIconVue from './components/HstCopyIcon.vue'
 export const HstCheckbox = HstCheckboxVue
 export const HstText = HstTextVue
 export const HstNumber = HstNumberVue
+export const HstSlider = HstSliderVue
 export const HstTextarea = HstTextareaVue
 export const HstColorShades = HstColorShadesVue
 export const HstTokenList = HstTokenListVue
@@ -22,6 +24,7 @@ export function registerVueComponents (app: App) {
   app.component('HstCheckbox', HstCheckboxVue)
   app.component('HstText', HstTextVue)
   app.component('HstNumber', HstNumberVue)
+  app.component('HstSlider', HstSliderVue)
   app.component('HstSelect', HstSelectVue)
   app.component('HstTextarea', HstTextareaVue)
   app.component('HstColorShades', HstColorShadesVue)