@histoire/controls 0.15.8 → 0.16.0

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

@@ -1,13 +1,13 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: boolean;
+    modelValue?: boolean | "true" | "false";
     title?: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    'update:modelValue': (newValue: boolean) => true;
+    'update:modelValue': (newValue: boolean | "true" | "false") => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue?: boolean;
+    modelValue?: boolean | "true" | "false";
     title?: string;
 }>>> & {
-    "onUpdate:modelValue"?: (newValue: boolean) => any;
+    "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
 }, {}>, {
     actions: (_: {}) => any;
 }>;

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

@@ -1,13 +1,13 @@
 import { HstControlOption } from '../../types';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     title?: string;
-    modelValue?: string;
+    modelValue?: any;
     options: Record<string, any> | string[] | HstControlOption[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "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;
+    modelValue?: any;
     options: Record<string, any> | string[] | HstControlOption[];
 }>>> & {
     "onUpdate:modelValue"?: (value: any) => any;

package/dist/index.d.ts

@@ -170,13 +170,13 @@ export declare const HstCheckbox: {
         $data: {};
         $props: Partial<{}> & Omit<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
             modelValue: {
-                type: import("@vue/runtime-core").PropType<boolean>;
+                type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
             };
             title: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
         }>> & {
-            "onUpdate:modelValue"?: (newValue: boolean) => any;
+            "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
         } & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, never>;
         $attrs: {
             [x: string]: unknown;
@@ -189,19 +189,19 @@ export declare const HstCheckbox: {
         }>;
         $root: import("@vue/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("@vue/runtime-core").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
         $parent: import("@vue/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("@vue/runtime-core").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-        $emit: (event: "update:modelValue", newValue: boolean) => void;
+        $emit: (event: "update:modelValue", newValue: boolean | "true" | "false") => void;
         $el: any;
         $options: import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
             modelValue: {
-                type: import("@vue/runtime-core").PropType<boolean>;
+                type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
             };
             title: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
         }>> & {
-            "onUpdate:modelValue"?: (newValue: boolean) => any;
+            "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
         }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-            'update:modelValue': (newValue: boolean) => true;
+            'update:modelValue': (newValue: boolean | "true" | "false") => true;
         }, string, {}, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -224,28 +224,28 @@ export declare const HstCheckbox: {
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("@vue/runtime-core").WatchOptions<boolean>): import("@vue/runtime-core").WatchStopHandle;
     } & Readonly<import("@vue/runtime-core").ExtractPropTypes<{
         modelValue: {
-            type: import("@vue/runtime-core").PropType<boolean>;
+            type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
         };
         title: {
             type: import("@vue/runtime-core").PropType<string>;
         };
     }>> & {
-        "onUpdate:modelValue"?: (newValue: boolean) => any;
+        "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
     } & import("@vue/reactivity").ShallowUnwrapRef<{}> & {} & import("@vue/runtime-core").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     modelValue: {
-        type: import("@vue/runtime-core").PropType<boolean>;
+        type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
     };
     title: {
         type: import("@vue/runtime-core").PropType<string>;
     };
 }>> & {
-    "onUpdate:modelValue"?: (newValue: boolean) => any;
+    "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
 }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-    'update:modelValue': (newValue: boolean) => true;
+    'update:modelValue': (newValue: boolean | "true" | "false") => true;
 }, string, {}, {}, string> & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & (new () => {
     $slots: {
         actions: (_: {}) => any;
@@ -663,7 +663,7 @@ export declare const HstSelect: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
             modelValue: {
-                type: import("@vue/runtime-core").PropType<string>;
+                type: import("@vue/runtime-core").PropType<any>;
             };
             options: {
                 type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -690,7 +690,7 @@ export declare const HstSelect: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
             modelValue: {
-                type: import("@vue/runtime-core").PropType<string>;
+                type: import("@vue/runtime-core").PropType<any>;
             };
             options: {
                 type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -725,7 +725,7 @@ export declare const HstSelect: {
             type: import("@vue/runtime-core").PropType<string>;
         };
         modelValue: {
-            type: import("@vue/runtime-core").PropType<string>;
+            type: import("@vue/runtime-core").PropType<any>;
         };
         options: {
             type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -742,7 +742,7 @@ export declare const HstSelect: {
         type: import("@vue/runtime-core").PropType<string>;
     };
     modelValue: {
-        type: import("@vue/runtime-core").PropType<string>;
+        type: import("@vue/runtime-core").PropType<any>;
     };
     options: {
         type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -1435,13 +1435,13 @@ export declare const components: {
             $data: {};
             $props: Partial<{}> & Omit<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
                 modelValue: {
-                    type: import("@vue/runtime-core").PropType<boolean>;
+                    type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
                 };
                 title: {
                     type: import("@vue/runtime-core").PropType<string>;
                 };
             }>> & {
-                "onUpdate:modelValue"?: (newValue: boolean) => any;
+                "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
             } & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, never>;
             $attrs: {
                 [x: string]: unknown;
@@ -1454,19 +1454,19 @@ export declare const components: {
             }>;
             $root: import("@vue/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("@vue/runtime-core").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
             $parent: import("@vue/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("@vue/runtime-core").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>;
-            $emit: (event: "update:modelValue", newValue: boolean) => void;
+            $emit: (event: "update:modelValue", newValue: boolean | "true" | "false") => void;
             $el: any;
             $options: import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
                 modelValue: {
-                    type: import("@vue/runtime-core").PropType<boolean>;
+                    type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
                 };
                 title: {
                     type: import("@vue/runtime-core").PropType<string>;
                 };
             }>> & {
-                "onUpdate:modelValue"?: (newValue: boolean) => any;
+                "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
             }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-                'update:modelValue': (newValue: boolean) => true;
+                'update:modelValue': (newValue: boolean | "true" | "false") => true;
             }, string, {}, {}, string> & {
                 beforeCreate?: (() => void) | (() => void)[];
                 created?: (() => void) | (() => void)[];
@@ -1489,28 +1489,28 @@ export declare const components: {
             $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("@vue/runtime-core").WatchOptions<boolean>): import("@vue/runtime-core").WatchStopHandle;
         } & Readonly<import("@vue/runtime-core").ExtractPropTypes<{
             modelValue: {
-                type: import("@vue/runtime-core").PropType<boolean>;
+                type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
             };
             title: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
         }>> & {
-            "onUpdate:modelValue"?: (newValue: boolean) => any;
+            "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
         } & import("@vue/reactivity").ShallowUnwrapRef<{}> & {} & import("@vue/runtime-core").ComponentCustomProperties & {};
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & import("@vue/runtime-core").ComponentOptionsBase<Readonly<import("@vue/runtime-core").ExtractPropTypes<{
         modelValue: {
-            type: import("@vue/runtime-core").PropType<boolean>;
+            type: import("@vue/runtime-core").PropType<boolean | "true" | "false">;
         };
         title: {
             type: import("@vue/runtime-core").PropType<string>;
         };
     }>> & {
-        "onUpdate:modelValue"?: (newValue: boolean) => any;
+        "onUpdate:modelValue"?: (newValue: boolean | "true" | "false") => any;
     }, {}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
-        'update:modelValue': (newValue: boolean) => true;
+        'update:modelValue': (newValue: boolean | "true" | "false") => true;
     }, string, {}, {}, string> & import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps & (new () => {
         $slots: {
             actions: (_: {}) => any;
@@ -1928,7 +1928,7 @@ export declare const components: {
                     type: import("@vue/runtime-core").PropType<string>;
                 };
                 modelValue: {
-                    type: import("@vue/runtime-core").PropType<string>;
+                    type: import("@vue/runtime-core").PropType<any>;
                 };
                 options: {
                     type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -1955,7 +1955,7 @@ export declare const components: {
                     type: import("@vue/runtime-core").PropType<string>;
                 };
                 modelValue: {
-                    type: import("@vue/runtime-core").PropType<string>;
+                    type: import("@vue/runtime-core").PropType<any>;
                 };
                 options: {
                     type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -1990,7 +1990,7 @@ export declare const components: {
                 type: import("@vue/runtime-core").PropType<string>;
             };
             modelValue: {
-                type: import("@vue/runtime-core").PropType<string>;
+                type: import("@vue/runtime-core").PropType<any>;
             };
             options: {
                 type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;
@@ -2007,7 +2007,7 @@ export declare const components: {
             type: import("@vue/runtime-core").PropType<string>;
         };
         modelValue: {
-            type: import("@vue/runtime-core").PropType<string>;
+            type: import("@vue/runtime-core").PropType<any>;
         };
         options: {
             type: import("@vue/runtime-core").PropType<string[] | import("./types").HstControlOption[] | Record<string, any>>;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as tt, openBlock as C, createElementBlock as _, normalizeClass as mt, renderSlot as ct, createBlock as Q, resolveDynamicComponent as ha, withCtx as q, withDirectives as Wt, createTextVNode as te, toDisplayString as Ct, unref as H, createElementVNode as R, computed as at, Fragment as fe, renderList as Be, watch as Yi, ref as rt, withKeys as _e, withModifiers as We, createVNode as vn, normalizeStyle as Pt, mergeProps as Xe, onUnmounted as aa, isRef as Ko, vModelText as Go, createCommentVNode as Xt, onMounted as ca, watchEffect as fa } from "@histoire/vendors/vue";
+import { defineComponent as tt, openBlock as C, createElementBlock as _, normalizeClass as mt, renderSlot as ct, createBlock as Q, resolveDynamicComponent as ha, withCtx as q, withDirectives as Wt, createTextVNode as te, toDisplayString as Ct, unref as H, createElementVNode as R, computed as rt, Fragment as fe, renderList as Be, watch as Yi, ref as ot, withKeys as _e, withModifiers as We, createVNode as vn, normalizeStyle as Pt, mergeProps as Xe, onUnmounted as aa, isRef as Ko, vModelText as Go, createCommentVNode as Xt, onMounted as ca, watchEffect as fa } from "@histoire/vendors/vue";
 import { VTooltip as ue, Dropdown as ua } from "@histoire/vendors/floating-vue";
 import { Icon as zs } from "@histoire/vendors/iconify";
 import { useClipboard as da } from "@histoire/vendors/vue-use";
@@ -62,7 +62,7 @@ const pa = {
   },
   emits: ["update:modelValue"],
   setup(s, { emit: t }) {
-    const e = s, i = at(() => Array.isArray(e.options) ? e.options.map((r) => typeof r == "string" || typeof r == "number" ? { value: r, label: String(r) } : r) : Object.keys(e.options).map((r) => ({
+    const e = s, i = rt(() => Array.isArray(e.options) ? e.options.map((r) => typeof r == "string" || typeof r == "number" ? { value: r, label: String(r) } : r) : Object.keys(e.options).map((r) => ({
       value: r,
       label: e.options[r]
     })));
@@ -121,7 +121,7 @@ const pa = {
     Yi(() => e.modelValue, () => {
       h.value = !0;
     });
-    const n = rt(), r = rt(0), o = at(() => e.modelValue ? 1 : 0), l = at(() => (1 - o.value) * r.value), h = rt(!1);
+    const n = ot(), r = ot(0), o = rt(() => e.modelValue ? 1 : 0), l = rt(() => (1 - o.value) * r.value), h = ot(!1);
     return Yi(n, () => {
       var a, c;
       r.value = ((c = (a = n.value).getTotalLength) == null ? void 0 : c.call(a)) ?? 21.21;
@@ -157,7 +157,7 @@ const pa = {
 }, Oa = /* @__PURE__ */ tt({
   ...Aa,
   props: {
-    modelValue: { type: Boolean },
+    modelValue: { type: [Boolean, String] },
     title: null
   },
   emits: {
@@ -166,24 +166,29 @@ const pa = {
   setup(s, { emit: t }) {
     const e = s;
     function i() {
+      if (typeof e.modelValue == "string") {
+        t("update:modelValue", e.modelValue === "false" ? "true" : "false");
+        return;
+      }
       t("update:modelValue", !e.modelValue);
     }
-    return (n, r) => (C(), Q(qt, {
+    const n = rt(() => typeof e.modelValue == "string" ? e.modelValue !== "false" : e.modelValue);
+    return (r, o) => (C(), Q(qt, {
       role: "checkbox",
       tabindex: "0",
       class: "histoire-checkbox htw-cursor-pointer htw-items-center",
       title: s.title,
-      onClick: r[0] || (r[0] = (o) => i()),
+      onClick: o[0] || (o[0] = (l) => i()),
       onKeydown: [
-        r[1] || (r[1] = _e(We((o) => i(), ["prevent"]), ["enter"])),
-        r[2] || (r[2] = _e(We((o) => i(), ["prevent"]), ["space"]))
+        o[1] || (o[1] = _e(We((l) => i(), ["prevent"]), ["enter"])),
+        o[2] || (o[2] = _e(We((l) => i(), ["prevent"]), ["space"]))
       ]
     }, {
       actions: q(() => [
-        ct(n.$slots, "actions")
+        ct(r.$slots, "actions")
       ]),
       default: q(() => [
-        vn(Qo, { "model-value": s.modelValue }, null, 8, ["model-value"])
+        vn(Qo, { "model-value": H(n) }, null, 8, ["model-value"])
       ]),
       _: 3
     }, 8, ["title"]));
@@ -199,7 +204,7 @@ const pa = {
   },
   emits: ["update:modelValue"],
   setup(s, { emit: t }) {
-    const e = s, i = at(() => Array.isArray(e.options) ? Object.fromEntries(e.options.map((r) => typeof r == "string" ? [r, r] : [r.value, r.label])) : e.options);
+    const e = s, i = rt(() => Array.isArray(e.options) ? Object.fromEntries(e.options.map((r) => typeof r == "string" ? [r, r] : [r.value, r.label])) : e.options);
     function n(r) {
       e.modelValue.includes(r) ? t("update:modelValue", e.modelValue.filter((o) => o !== r)) : t("update:modelValue", [...e.modelValue, r]);
     }
@@ -248,7 +253,7 @@ const pa = {
     "update:modelValue": (s) => !0
   },
   setup(s, { emit: t }) {
-    const e = rt();
+    const e = ot();
     return (i, n) => (C(), Q(qt, {
       title: s.title,
       class: mt(["histoire-text htw-cursor-text htw-items-center", i.$attrs.class]),
@@ -285,16 +290,16 @@ const pa = {
     "update:modelValue": (s) => !0
   },
   setup(s, { emit: t }) {
-    const e = s, i = at({
+    const e = s, i = rt({
       get: () => e.modelValue,
       set: (u) => {
         t("update:modelValue", u);
       }
-    }), n = rt();
+    }), n = ot();
     function r() {
       n.value.focus(), n.value.select();
     }
-    const o = rt(!1);
+    const o = ot(!1);
     let l, h;
     function a(u) {
       o.value = !0, l = u.clientX, h = i.value, window.addEventListener("mousemove", c), window.addEventListener("mouseup", f);
@@ -360,12 +365,12 @@ const pa = {
     "update:modelValue": (s) => !0
   },
   setup(s, { emit: t }) {
-    const e = s, i = rt(!1), n = rt(null), r = at({
+    const e = s, i = ot(!1), n = ot(null), r = rt({
       get: () => e.modelValue,
       set: (h) => {
         t("update:modelValue", h);
       }
-    }), o = at(() => (e.modelValue - e.min) / (e.max - e.min)), l = at(() => n.value ? {
+    }), o = rt(() => (e.modelValue - e.min) / (e.max - e.min)), l = rt(() => n.value ? {
       left: 8 + (n.value.clientWidth - 16) * o.value + "px"
     } : {});
     return (h, a) => (C(), Q(qt, {
@@ -419,7 +424,7 @@ const Fa = ["value"], za = {
     "update:modelValue": (s) => !0
   },
   setup(s, { emit: t }) {
-    const e = rt();
+    const e = ot();
     return (i, n) => (C(), Q(qt, {
       title: s.title,
       class: mt(["histoire-textarea htw-cursor-text", i.$attrs.class]),
@@ -452,7 +457,7 @@ const Fa = ["value"], za = {
   },
   emits: ["update:modelValue"],
   setup(s, { emit: t }) {
-    const e = s, i = at(() => Array.isArray(e.options) ? e.options.map((o) => typeof o == "string" || typeof o == "number" ? [o, String(o)] : [o.value, o.label]) : Object.entries(e.options)), n = at(() => {
+    const e = s, i = rt(() => Array.isArray(e.options) ? e.options.map((o) => typeof o == "string" || typeof o == "number" ? [o, String(o)] : [o.value, o.label]) : Object.entries(e.options)), n = rt(() => {
       var o;
       return (o = i.value.find(([l]) => l === e.modelValue)) == null ? void 0 : o[1];
     });
@@ -562,7 +567,7 @@ const Qa = {
     const t = s, e = (o, l = "") => Object.entries(o).reduce((h, [a, c]) => {
       const f = l ? a === "DEFAULT" ? l : `${l}-${a}` : a, u = typeof c == "object" ? e(c, f) : { [f]: c };
       return { ...h, ...u };
-    }, {}), i = at(() => {
+    }, {}), i = rt(() => {
       const o = t.shades, l = t.getName, h = e(o);
       return Object.entries(h).map(([a, c]) => {
         const f = l ? l(a, c) : a;
@@ -572,14 +577,14 @@ const Qa = {
           name: f
         };
       });
-    }), n = at(() => {
+    }), n = rt(() => {
       let o = i.value;
       if (t.search) {
         const l = new RegExp(t.search, "i");
         o = o.filter(({ name: h }) => l.test(h));
       }
       return o;
-    }), r = rt(null);
+    }), r = ot(null);
     return (o, l) => H(n).length ? (C(), _("div", Ya, [
       (C(!0), _(fe, null, Be(H(n), (h) => (C(), _("div", {
         key: h.key,
@@ -635,7 +640,7 @@ const Qa = {
     getName: { type: Function }
   },
   setup(s) {
-    const t = s, e = at(() => {
+    const t = s, e = rt(() => {
       const n = t.tokens, r = t.getName;
       return Object.entries(n).map(([o, l]) => {
         const h = r ? r(o, l) : o;
@@ -645,7 +650,7 @@ const Qa = {
           value: typeof l == "number" ? l.toString() : l
         };
       });
-    }), i = rt(null);
+    }), i = ot(null);
     return (n, r) => (C(!0), _(fe, null, Be(H(e), (o) => (C(), _("div", {
       key: o.key,
       class: "histoire-token-list htw-flex htw-flex-col htw-gap-2 htw-my-8",
@@ -683,7 +688,7 @@ const Qa = {
     getName: { type: Function, default: null }
   },
   setup(s) {
-    const t = s, e = at(() => {
+    const t = s, e = rt(() => {
       const r = t.tokens, o = t.getName;
       return Object.entries(r).map(([l, h]) => {
         const a = o ? o(l, h) : l;
@@ -693,7 +698,7 @@ const Qa = {
           value: typeof h == "number" ? h.toString() : h
         };
       });
-    }), i = at(() => `${t.colSize}px`), n = rt(null);
+    }), i = rt(() => `${t.colSize}px`), n = ot(null);
     return (r, o) => (C(), _("div", {
       class: "histoire-token-grid htw-bind-col-size htw-grid htw-gap-4 htw-m-4",
       style: Pt({
@@ -748,11 +753,11 @@ const xc = { class: "-htw-my-1" }, vc = ["id", "name", "value", "checked", "onCh
   },
   emits: ["update:modelValue"],
   setup(s, { emit: t }) {
-    const e = s, i = at(() => Array.isArray(e.options) ? Object.fromEntries(e.options.map((o) => typeof o == "string" ? [o, o] : [o.value, o.label])) : e.options);
+    const e = s, i = rt(() => Array.isArray(e.options) ? Object.fromEntries(e.options.map((o) => typeof o == "string" ? [o, o] : [o.value, o.label])) : e.options);
     function n(o) {
       t("update:modelValue", o), r.value = !0;
     }
-    const r = rt(!1);
+    const r = ot(!1);
     return (o, l) => (C(), Q(qt, {
       role: "group",
       title: s.title,
@@ -1518,16 +1523,16 @@ class Z extends Yt {
           if (r.done)
             break t;
           let c = Math.min(r.len, h - l);
-          ot(n, c, -1);
+          lt(n, c, -1);
           let f = r.ins == -1 ? -1 : r.off == 0 ? r.ins : 0;
-          ot(e, c, f), f > 0 && oe(i, e, r.text), r.forward(c), l += c;
+          lt(e, c, f), f > 0 && oe(i, e, r.text), r.forward(c), l += c;
         }
         let a = t[o++];
         for (; l < a; ) {
           if (r.done)
             break t;
           let c = Math.min(r.len, a - l);
-          ot(e, c, -1), ot(n, c, r.ins == -1 ? -1 : r.off == 0 ? r.ins : 0), r.forward(c), l += c;
+          lt(e, c, -1), lt(n, c, r.ins == -1 ? -1 : r.off == 0 ? r.ins : 0), r.forward(c), l += c;
         }
       }
     return {
@@ -1555,7 +1560,7 @@ class Z extends Yt {
     function h(c = !1) {
       if (!c && !n.length)
         return;
-      o < e && ot(n, e - o, -1);
+      o < e && lt(n, e - o, -1);
       let f = new Z(n, r);
       l = l ? l.compose(f.map(l)) : f, n = [], r = [], o = 0;
     }
@@ -1574,7 +1579,7 @@ class Z extends Yt {
         let p = d ? typeof d == "string" ? E.of(d.split(i || is)) : d : E.empty, w = p.length;
         if (f == u && w == 0)
           return;
-        f < o && h(), f > o && ot(n, f - o, -1), ot(n, u - f, w), oe(r, n, p), o = u;
+        f < o && h(), f > o && lt(n, f - o, -1), lt(n, u - f, w), oe(r, n, p), o = u;
       }
     }
     return a(t), h(!l), l;
@@ -1618,7 +1623,7 @@ class Z extends Yt {
     return new Z(t, e);
   }
 }
-function ot(s, t, e, i = !1) {
+function lt(s, t, e, i = !1) {
   if (t == 0 && e <= 0)
     return;
   let n = s.length - 2;
@@ -1655,12 +1660,12 @@ function ss(s, t, e, i = !1) {
   for (let h = -1; ; )
     if (o.ins == -1 && l.ins == -1) {
       let a = Math.min(o.len, l.len);
-      ot(n, a, -1), o.forward(a), l.forward(a);
+      lt(n, a, -1), o.forward(a), l.forward(a);
     } else if (l.ins >= 0 && (o.ins < 0 || h == o.i || o.off == 0 && (l.len < o.len || l.len == o.len && !e))) {
       let a = l.len;
-      for (ot(n, l.ins, -1); a; ) {
+      for (lt(n, l.ins, -1); a; ) {
         let c = Math.min(o.len, a);
-        o.ins >= 0 && h < o.i && o.len <= c && (ot(n, 0, o.ins), r && oe(r, n, o.text), h = o.i), o.forward(c), a -= c;
+        o.ins >= 0 && h < o.i && o.len <= c && (lt(n, 0, o.ins), r && oe(r, n, o.text), h = o.i), o.forward(c), a -= c;
       }
       l.next();
     } else if (o.ins >= 0) {
@@ -1673,7 +1678,7 @@ function ss(s, t, e, i = !1) {
           c -= l.len, l.next();
         else
           break;
-      ot(n, a, h < o.i ? o.ins : 0), r && h < o.i && oe(r, n, o.text), h = o.i, o.forward(o.len - c);
+      lt(n, a, h < o.i ? o.ins : 0), r && h < o.i && oe(r, n, o.text), h = o.i, o.forward(o.len - c);
     } else {
       if (o.done && l.done)
         return r ? Z.createSet(n, r) : Yt.create(n);
@@ -1686,9 +1691,9 @@ function el(s, t, e = !1) {
     if (r.done && o.done)
       return n ? Z.createSet(i, n) : Yt.create(i);
     if (r.ins == 0)
-      ot(i, r.len, 0, l), r.next();
+      lt(i, r.len, 0, l), r.next();
     else if (o.len == 0 && !o.done)
-      ot(i, 0, o.ins, l), n && oe(n, i, o.text), o.next();
+      lt(i, 0, o.ins, l), n && oe(n, i, o.text), o.next();
     else {
       if (r.done || o.done)
         throw new Error("Mismatched change set lengths");
@@ -1696,9 +1701,9 @@ function el(s, t, e = !1) {
         let h = Math.min(r.len2, o.len), a = i.length;
         if (r.ins == -1) {
           let c = o.ins == -1 ? -1 : o.off ? 0 : o.ins;
-          ot(i, h, c, l), n && c && oe(n, i, o.text);
+          lt(i, h, c, l), n && c && oe(n, i, o.text);
         } else
-          o.ins == -1 ? (ot(i, r.off ? 0 : r.len, h, l), n && oe(n, i, r.textBit(h))) : (ot(i, r.off ? 0 : r.len, o.off ? 0 : o.ins, l), n && !o.off && oe(n, i, o.text));
+          o.ins == -1 ? (lt(i, r.off ? 0 : r.len, h, l), n && oe(n, i, r.textBit(h))) : (lt(i, r.off ? 0 : r.len, o.off ? 0 : o.ins, l), n && !o.off && oe(n, i, o.text));
         l = (r.ins > h || o.ins >= 0 && o.len > h) && (l || i.length > a), r.forward2(h), o.forward(h);
       }
     }
@@ -2372,15 +2377,15 @@ class F {
 }
 F.reconfigure = /* @__PURE__ */ F.define();
 F.appendConfig = /* @__PURE__ */ F.define();
-class lt {
+class ht {
   constructor(t, e, i, n, r, o) {
-    this.startState = t, this.changes = e, this.selection = i, this.effects = n, this.annotations = r, this.scrollIntoView = o, this._doc = null, this._state = null, i && il(i, e.newLength), r.some((l) => l.type == lt.time) || (this.annotations = r.concat(lt.time.of(Date.now())));
+    this.startState = t, this.changes = e, this.selection = i, this.effects = n, this.annotations = r, this.scrollIntoView = o, this._doc = null, this._state = null, i && il(i, e.newLength), r.some((l) => l.type == ht.time) || (this.annotations = r.concat(ht.time.of(Date.now())));
   }
   /**
   @internal
   */
   static create(t, e, i, n, r, o) {
-    return new lt(t, e, i, n, r, o);
+    return new ht(t, e, i, n, r, o);
   }
   /**
   The new document produced by the transaction. Contrary to
@@ -2442,14 +2447,14 @@ class lt {
   `"select.pointer"` will match it.
   */
   isUserEvent(t) {
-    let e = this.annotation(lt.userEvent);
+    let e = this.annotation(ht.userEvent);
     return !!(e && (e == t || e.length > t.length && e.slice(0, t.length) == t && e[t.length] == "."));
   }
 }
-lt.time = /* @__PURE__ */ bi.define();
-lt.userEvent = /* @__PURE__ */ bi.define();
-lt.addToHistory = /* @__PURE__ */ bi.define();
-lt.remote = /* @__PURE__ */ bi.define();
+ht.time = /* @__PURE__ */ bi.define();
+ht.userEvent = /* @__PURE__ */ bi.define();
+ht.addToHistory = /* @__PURE__ */ bi.define();
+ht.remote = /* @__PURE__ */ bi.define();
 function Ec(s, t) {
   let e = [];
   for (let i = 0, n = 0; ; ) {
@@ -2476,7 +2481,7 @@ function fl(s, t, e) {
 }
 function ls(s, t, e) {
   let i = t.selection, n = He(t.annotations);
-  return t.userEvent && (n = n.concat(lt.userEvent.of(t.userEvent))), {
+  return t.userEvent && (n = n.concat(ht.userEvent.of(t.userEvent))), {
     changes: t.changes instanceof Z ? t.changes : Z.of(t.changes || [], e, s.facet(ol)),
     selection: i && (i instanceof b ? i : b.single(i.anchor, i.head)),
     effects: He(t.effects),
@@ -2492,7 +2497,7 @@ function ul(s, t, e) {
     let o = !!t[r].sequential;
     i = fl(i, ls(s, t[r], o ? i.changes.newLength : s.doc.length), o);
   }
-  let n = lt.create(s, i.changes, i.selection, i.effects, i.annotations, i.scrollIntoView);
+  let n = ht.create(s, i.changes, i.selection, i.effects, i.annotations, i.scrollIntoView);
   return Vc(e ? Nc(n) : n);
 }
 function Nc(s) {
@@ -2513,12 +2518,12 @@ function Nc(s) {
       let o = s.changes.filter(e);
       n = o.changes, r = o.filtered.mapDesc(o.changes).invertedDesc;
     }
-    s = lt.create(t, n, s.selection && s.selection.map(r), F.mapEffects(s.effects, r), s.annotations, s.scrollIntoView);
+    s = ht.create(t, n, s.selection && s.selection.map(r), F.mapEffects(s.effects, r), s.annotations, s.scrollIntoView);
   }
   let i = t.facet(hl);
   for (let n = i.length - 1; n >= 0; n--) {
     let r = i[n](s);
-    r instanceof lt ? s = r : Array.isArray(r) && r.length == 1 && r[0] instanceof lt ? s = r[0] : s = ul(t, He(r), !1);
+    r instanceof ht ? s = r : Array.isArray(r) && r.length == 1 && r[0] instanceof ht ? s = r[0] : s = ul(t, He(r), !1);
   }
   return s;
 }
@@ -2528,7 +2533,7 @@ function Vc(s) {
     let r = e[n](s);
     r && Object.keys(r).length && (i = fl(i, ls(t, r, s.changes.newLength), !0));
   }
-  return i == s ? s : lt.create(t, s.changes, s.selection, i.effects, i.annotations, i.scrollIntoView);
+  return i == s ? s : ht.create(t, s.changes, s.selection, i.effects, i.annotations, i.scrollIntoView);
 }
 const Ic = [];
 function He(s) {
@@ -3826,15 +3831,15 @@ function tf(s, t) {
       i = sn(e), e = e.parentNode;
     }
 }
-class ht {
+class at {
   constructor(t, e, i = !0) {
     this.node = t, this.offset = e, this.precise = i;
   }
   static before(t, e) {
-    return new ht(t.parentNode, sn(t), e);
+    return new at(t.parentNode, sn(t), e);
   }
   static after(t, e) {
-    return new ht(t.parentNode, sn(t) + 1, e);
+    return new at(t.parentNode, sn(t) + 1, e);
   }
 }
 const Gs = [];
@@ -4109,7 +4114,7 @@ class ge extends W {
     return t == this.dom ? e : e ? this.text.length : 0;
   }
   domAtPos(t) {
-    return new ht(this.dom, t);
+    return new at(this.dom, t);
   }
   domBoundsAround(t, e, i) {
     return { from: i, to: i + this.length, startDOM: this.dom, endDOM: this.dom.nextSibling };
@@ -4205,7 +4210,7 @@ class le extends W {
     return i ? i.slice(n, n + this.length) : E.empty;
   }
   domAtPos(t) {
-    return t == 0 ? ht.before(this.dom) : ht.after(this.dom, t == this.length);
+    return t == 0 ? at.before(this.dom) : at.after(this.dom, t == this.length);
   }
   domBoundsAround() {
     return null;
@@ -4228,7 +4233,7 @@ class le extends W {
 class Sl extends le {
   domAtPos(t) {
     let { topView: e, text: i } = this.widget;
-    return e ? ys(t, 0, e, i, (n, r) => n.domAtPos(r), (n) => new ht(i, Math.min(n, i.nodeValue.length))) : new ht(i, Math.min(t, i.nodeValue.length));
+    return e ? ys(t, 0, e, i, (n, r) => n.domAtPos(r), (n) => new at(i, Math.min(n, i.nodeValue.length))) : new at(i, Math.min(t, i.nodeValue.length));
   }
   sync() {
     this.setDOM(this.widget.toDOM());
@@ -4311,7 +4316,7 @@ class Ge extends W {
     return this.side;
   }
   domAtPos(t) {
-    return ht.before(this.dom);
+    return at.before(this.dom);
   }
   localPosFromDOM() {
     return 0;
@@ -4370,7 +4375,7 @@ function Al(s, t) {
     if (o.dom.parentNode == e)
       return o.domAtPos(0);
   }
-  return new ht(e, 0);
+  return new at(e, 0);
 }
 function Ol(s, t, e) {
   let i, { children: n } = s;
@@ -4720,7 +4725,7 @@ class Ae extends W {
     return i && (!(i instanceof Ae) || !this.widget.compare(i.widget) || t > 0 && r <= 0 || e < this.length && o <= 0) ? !1 : (this.length = t + (i ? i.length : 0) + (this.length - e), !0);
   }
   domAtPos(t) {
-    return t == 0 ? ht.before(this.dom) : ht.after(this.dom, t == this.length);
+    return t == 0 ? at.before(this.dom) : at.after(this.dom, t == this.length);
   }
   split(t) {
     let e = this.length - t;
@@ -5326,7 +5331,7 @@ class Er extends W {
     let n = this.view.state.selection.main, r = this.domAtPos(n.anchor), o = n.empty ? r : this.domAtPos(n.head);
     if (x.gecko && n.empty && gf(r)) {
       let h = document.createTextNode("");
-      this.view.observer.ignore(() => r.node.insertBefore(h, r.node.childNodes[r.offset] || null)), r = o = new ht(h, 0), i = !0;
+      this.view.observer.ignore(() => r.node.insertBefore(h, r.node.childNodes[r.offset] || null)), r = o = new at(h, 0), i = !0;
     }
     let l = this.view.observer.selectionRange;
     (i || !l.focusNode || !nn(r.node, r.offset, l.anchorNode, l.anchorOffset) || !nn(o.node, o.offset, l.focusNode, l.focusOffset)) && (this.view.observer.ignore(() => {
@@ -5338,7 +5343,7 @@ class Er extends W {
             let a = yf(r.node, r.offset);
             if (a && a != 3) {
               let c = Wl(r.node, r.offset, a == 1 ? 1 : -1);
-              c && (r = new ht(c, a == 1 ? 0 : c.nodeValue.length));
+              c && (r = new at(c, a == 1 ? 0 : c.nodeValue.length));
             }
           }
           h.collapse(r.node, r.offset), n.bidiLevel != null && l.cursorBidiLevel != null && (l.cursorBidiLevel = n.bidiLevel);
@@ -5352,7 +5357,7 @@ class Er extends W {
           let a = document.createRange();
           n.anchor > n.head && ([r, o] = [o, r]), a.setEnd(o.node, o.offset), a.setStart(r.node, r.offset), h.removeAllRanges(), h.addRange(a);
         }
-    }), this.view.observer.setSelectionRange(r, o)), this.impreciseAnchor = r.precise ? null : new ht(l.anchorNode, l.anchorOffset), this.impreciseHead = o.precise ? null : new ht(l.focusNode, l.focusOffset);
+    }), this.view.observer.setSelectionRange(r, o)), this.impreciseAnchor = r.precise ? null : new at(l.anchorNode, l.anchorOffset), this.impreciseHead = o.precise ? null : new at(l.focusNode, l.focusOffset);
   }
   enforceCursorAssoc() {
     if (this.compositionDeco.size)
@@ -7686,7 +7691,7 @@ class A {
     return this.dom.ownerDocument.defaultView || window;
   }
   dispatch(...t) {
-    this._dispatch(t.length == 1 && t[0] instanceof lt ? t[0] : this.state.update(...t));
+    this._dispatch(t.length == 1 && t[0] instanceof ht ? t[0] : this.state.update(...t));
   }
   /**
   Update the view for the given array of transactions. This will
@@ -8768,7 +8773,7 @@ const jn = /* @__PURE__ */ v.define({
     color: "white"
   },
   ".cm-tooltip-arrow": {
-    height: `${7}px`,
+    height: "7px",
     width: `${7 * 2}px`,
     position: "absolute",
     zIndex: -1,
@@ -8778,26 +8783,26 @@ const jn = /* @__PURE__ */ v.define({
       position: "absolute",
       width: 0,
       height: 0,
-      borderLeft: `${7}px solid transparent`,
-      borderRight: `${7}px solid transparent`
+      borderLeft: "7px solid transparent",
+      borderRight: "7px solid transparent"
     },
     ".cm-tooltip-above &": {
-      bottom: `-${7}px`,
+      bottom: "-7px",
       "&:before": {
-        borderTop: `${7}px solid #bbb`
+        borderTop: "7px solid #bbb"
       },
       "&:after": {
-        borderTop: `${7}px solid #f5f5f5`,
+        borderTop: "7px solid #f5f5f5",
         bottom: "1px"
       }
     },
     ".cm-tooltip-below &": {
-      top: `-${7}px`,
+      top: "-7px",
       "&:before": {
-        borderBottom: `${7}px solid #bbb`
+        borderBottom: "7px solid #bbb"
       },
       "&:after": {
-        borderBottom: `${7}px solid #f5f5f5`,
+        borderBottom: "7px solid #f5f5f5",
         top: "1px"
       }
     }
@@ -13494,7 +13499,7 @@ class xn extends uh {
   /// @internal
   constructor(t) {
     if (super(), this.wrappers = [], t.version != 14)
-      throw new RangeError(`Parser version (${t.version}) doesn't match runtime version (${14})`);
+      throw new RangeError(`Parser version (${t.version}) doesn't match runtime version (14)`);
     let e = t.nodeNames.split(" ");
     this.minRepeatTerm = e.length;
     for (let l = 0; l < t.repeatNodeCount; l++)
@@ -14324,7 +14329,7 @@ const Cg = /* @__PURE__ */ A.baseTheme({
     tag: m.invalid,
     color: Mg
   }
-]), la = rt(!1);
+]), la = ot(!1);
 window.__hst_controls_dark || (window.__hst_controls_dark = []);
 window.__hst_controls_dark.push(la);
 var qo;
@@ -14344,7 +14349,7 @@ const Ng = {
   setup(s, { emit: t }) {
     const e = s;
     let i;
-    const n = rt(""), r = rt(!1), o = rt(), l = {
+    const n = ot(""), r = ot(!1), o = ot(), l = {
       light: [A.baseTheme({}), bo(zd)],
       dark: [Lg, bo(Eg)]
     }, h = new yi(), a = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@histoire/controls",
-  "version": "0.15.8",
+  "version": "0.16.0",
   "description": "Prebuilt controls components",
   "license": "MIT",
   "author": {
@@ -55,7 +55,7 @@
     "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.9.5",
-    "vite": "^4.1.0",
+    "vite": "^4.2.0",
     "vue": "^3.2.47",
     "vue-tsc": "^1.0.24"
   },

package/src/components/checkbox/HstCheckbox.story.vue

@@ -3,7 +3,8 @@ import HstCheckbox from './HstCheckbox.vue'
 
 function initState () {
   return {
-    checked: false,
+    booleanChecked: false,
+    stringChecked: 'false',
   }
 }
 </script>
@@ -20,15 +21,25 @@ function initState () {
     >
       <template #default="{ state }">
         <HstCheckbox
-          v-model="state.checked"
-          title="Label"
+          v-model="state.booleanChecked"
+          title="Boolean"
         />
+        {{ { value: state.booleanChecked } }}
+        <HstCheckbox
+          v-model="state.stringChecked"
+          title="String"
+        />
+        {{ { value: state.stringChecked } }}
       </template>
 
       <template #controls="{ state }">
         <HstCheckbox
-          v-model="state.checked"
-          title="Label"
+          v-model="state.booleanChecked"
+          title="Boolean"
+        />
+        <HstCheckbox
+          v-model="state.stringChecked"
+          title="String"
         />
       </template>
     </Variant>

package/src/components/checkbox/HstCheckbox.vue

@@ -7,19 +7,35 @@ export default {
 <script lang="ts" setup>
 import HstWrapper from '../HstWrapper.vue'
 import HstSimpleCheckbox from './HstSimpleCheckbox.vue'
+import { computed } from 'vue'
+
+type Booleanish = boolean | 'true' | 'false'
 
 const props = defineProps<{
-  modelValue?: boolean
+  modelValue?: Booleanish
   title?: string
 }>()
 
 const emits = defineEmits({
-  'update:modelValue': (newValue: boolean) => true,
+  'update:modelValue': (newValue: Booleanish) => true,
 })
 
 function toggle () {
+  if (typeof props.modelValue === 'string') {
+    emits('update:modelValue', props.modelValue === 'false' ? 'true' : 'false')
+    return
+  }
+
   emits('update:modelValue', !props.modelValue)
 }
+
+const isTrue = computed(() => {
+  if (typeof props.modelValue === 'string') {
+    return props.modelValue !== 'false'
+  }
+
+  return props.modelValue
+})
 </script>
 
 <template>
@@ -32,7 +48,7 @@ function toggle () {
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
   >
-    <HstSimpleCheckbox :model-value="modelValue" />
+    <HstSimpleCheckbox :model-value="isTrue" />
     <template #actions>
       <slot name="actions" />
     </template>

package/src/components/select/HstSelect.vue

@@ -11,7 +11,7 @@ import { HstControlOption } from '../../types'
 
 defineProps<{
   title?: string
-  modelValue?: string
+  modelValue?: any
   options: Record<string, any> | string[] | HstControlOption[]
 }>()