@leaflink/stash 43.5.2 → 44.0.0-beta.10

package/dist/RadioNew.js

@@ -1,7 +1,7 @@
-import { defineComponent as r, openBlock as _, createElementBlock as c, normalizeClass as s, createElementVNode as t, toDisplayString as m, withDirectives as w, vShow as B, renderSlot as b, inject as x, computed as o, createBlock as k, resolveDynamicComponent as W, withCtx as C } from "vue";
-import { R as g } from "./RadioGroup.keys-974818d6.js";
-import { _ as v } from "./_plugin-vue_export-helper-dad06003.js";
-const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @__PURE__ */ r({
+import { defineComponent as p, useCssModule as m, openBlock as _, createElementBlock as v, normalizeClass as d, unref as s, createElementVNode as n, toDisplayString as f, withDirectives as k, vShow as W, renderSlot as h, inject as C, computed as r, createBlock as M, resolveDynamicComponent as x, withCtx as N } from "vue";
+import { R as D } from "./RadioGroup.keys-974818d6.js";
+import { _ as $ } from "./_plugin-vue_export-helper-dad06003.js";
+const E = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @__PURE__ */ p({
   __name: "VariantButton",
   props: {
     disabled: { type: Boolean },
@@ -13,29 +13,34 @@ const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     value: {}
   },
   emits: ["input"],
-  setup(a, { emit: d }) {
-    const e = a;
-    return (n, l) => (_(), c("div", {
-      class: s(["root", { "tw-w-full": e.fullWidth }])
+  setup(t, { emit: i }) {
+    const e = t, a = m();
+    return (l, o) => (_(), v("div", {
+      class: d([s(a).root, { "tw-w-full": e.fullWidth }])
     }, [
-      t("input", {
+      n("input", {
         id: `${e.name}-${e.id}`,
-        class: "input sr-only",
+        class: d(["tw-sr-only", s(a).input]),
         type: "radio",
         name: e.name,
         value: e.value,
         checked: e.modelValue === e.value,
         disabled: e.disabled || e.disabled,
-        onInput: l[0] || (l[0] = (i) => d("input", i))
-      }, null, 40, N),
-      t("label", {
-        class: "label",
+        onInput: o[0] || (o[0] = (u) => i("input", u))
+      }, null, 42, E),
+      n("label", {
+        class: d(s(a).label),
         for: `${e.name}-${e.id}`
-      }, m(e.label), 9, R)
+      }, f(e.label), 11, R)
     ], 2));
   }
-});
-const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "name", "value", "checked", "disabled"], O = ["for"], S = /* @__PURE__ */ r({
+}), g = "_label_1mshv_2", O = "_root_1mshv_14", S = "_input_1mshv_32", z = {
+  label: g,
+  root: O,
+  input: S
+}, A = {
+  $style: z
+}, F = /* @__PURE__ */ $(T, [["__cssModules", A]]), J = ["id", "name", "value", "checked", "disabled"], P = ["for"], U = /* @__PURE__ */ p({
   __name: "VariantChip",
   props: {
     disabled: { type: Boolean },
@@ -47,29 +52,33 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "
     value: {}
   },
   emits: ["input"],
-  setup(a, { emit: d }) {
-    const e = a;
-    return (n, l) => (_(), c("div", {
-      class: s(["root", { "tw-w-full": e.fullWidth }])
+  setup(t, { emit: i }) {
+    const e = t, a = m();
+    return (l, o) => (_(), v("div", {
+      class: d([s(a).root, { "tw-w-full": e.fullWidth }])
     }, [
-      t("input", {
+      n("input", {
         id: `${e.name}-${e.id}`,
-        class: "input sr-only",
+        class: d(["tw-sr-only", s(a).input]),
         type: "radio",
         name: e.name,
         value: e.value,
         checked: e.modelValue === e.value,
         disabled: e.disabled || e.disabled,
-        onInput: l[0] || (l[0] = (i) => d("input", i))
-      }, null, 40, E),
-      t("label", {
-        class: "label",
+        onInput: o[0] || (o[0] = (u) => i("input", u))
+      }, null, 42, J),
+      n("label", {
+        class: d(s(a).label),
         for: `${e.name}-${e.id}`
-      }, m(e.label), 9, O)
+      }, f(e.label), 11, P)
     ], 2));
   }
-});
-const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8bfe9d47"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
+}), q = "_label_vdpts_2", H = "_input_vdpts_16", K = {
+  label: q,
+  input: H
+}, L = {
+  $style: K
+}, Q = /* @__PURE__ */ $(U, [["__cssModules", L]]), X = ["id", "name", "value", "checked", "disabled"], Y = ["for"], Z = /* @__PURE__ */ p({
   __name: "VariantRadio",
   props: {
     disabled: { type: Boolean },
@@ -81,31 +90,35 @@ const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-8bfe9d47"]]), z = ["id", "
     value: {}
   },
   emits: ["input"],
-  setup(a, { emit: d }) {
-    const e = a;
-    return (n, l) => (_(), c("div", {
-      class: s(["root tw-flex", { "tw-w-full": e.fullWidth }])
+  setup(t, { emit: i }) {
+    const e = t, a = m();
+    return (l, o) => (_(), v("div", {
+      class: d(["tw-flex", [s(a).root, { "tw-w-full": e.fullWidth }]])
     }, [
-      t("input", {
+      n("input", {
         id: `${e.name}-${e.id}`,
-        class: "input",
+        class: d(s(a).input),
         type: "radio",
         name: e.name,
         value: e.value,
         checked: e.modelValue === e.value,
         disabled: e.disabled,
-        onInput: l[0] || (l[0] = (i) => d("input", i))
-      }, null, 40, z),
-      w(t("label", {
-        class: s(["label", { "text-ice-500": e.disabled }]),
+        onInput: o[0] || (o[0] = (u) => i("input", u))
+      }, null, 42, X),
+      k(n("label", {
+        class: d([s(a).label, { "tw-text-ice-500": e.disabled }]),
         for: `${e.name}-${e.id}`
-      }, m(e.label), 11, A), [
-        [B, e.label]
+      }, f(e.label), 11, Y), [
+        [W, e.label]
       ])
     ], 2));
   }
-});
-const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-7175a75d"]]), J = ["for"], P = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], U = ["id"], q = /* @__PURE__ */ r({
+}), I = "_label_kw8hn_2", j = "_input_kw8hn_9", G = {
+  label: I,
+  input: j
+}, ee = {
+  $style: G
+}, le = /* @__PURE__ */ $(Z, [["__cssModules", ee]]), ae = ["for"], te = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], se = ["id"], de = /* @__PURE__ */ p({
   __name: "VariantTile",
   props: {
     disabled: { type: Boolean },
@@ -117,48 +130,62 @@ const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-7175a75d"]]), J = ["for"],
     value: {}
   },
   emits: ["input"],
-  setup(a, { emit: d }) {
-    const e = a;
-    return (n, l) => (_(), c("label", {
-      class: s(["root", { "tw-w-full": e.fullWidth, "root--disabled": e.disabled }]),
+  setup(t, { emit: i }) {
+    const e = t, a = m();
+    return (l, o) => (_(), v("label", {
+      class: d([s(a).root, { "tw-w-full": e.fullWidth, [s(a)["root--disabled"]]: e.disabled }]),
       for: `${e.name}-${e.id}`
     }, [
-      t("div", {
-        class: s(["tile-header border tw-flex", {
-          "tw-border-blue-500 tw-bg-blue-100": e.modelValue === e.value && !e.disabled,
-          "tw-border-ice-500 tw-bg-ice-100": e.modelValue !== e.value || e.disabled
-        }])
+      n("div", {
+        class: d(["tw-flex tw-border", [
+          s(a)["tile-header"],
+          {
+            "tw-border-blue-500 tw-bg-blue-100": e.modelValue === e.value && !e.disabled,
+            "tw-border-ice-500 tw-bg-ice-100": e.modelValue !== e.value || e.disabled
+          }
+        ]])
       }, [
-        t("input", {
+        n("input", {
           id: `${e.name}-${e.id}`,
           "aria-labelledby": `tile-label-${e.name}-${e.id}`,
-          class: "input sr-only",
+          class: d(["tw-sr-only", s(a).input]),
           type: "radio",
           name: e.name,
           value: e.value,
           checked: e.modelValue === e.value,
           disabled: e.disabled,
-          onInput: l[0] || (l[0] = (i) => d("input", i))
-        }, null, 40, P),
-        t("div", {
+          onInput: o[0] || (o[0] = (u) => i("input", u))
+        }, null, 42, te),
+        n("div", {
           id: `tile-label-${e.name}-${e.id}`,
-          class: s(["label", { "tw-text-ice-500": e.disabled }])
-        }, m(e.label), 11, U)
+          class: d([s(a).label, { "tw-text-ice-500": e.disabled }])
+        }, f(e.label), 11, se)
       ], 2),
-      t("div", {
-        class: s(["tile-body", {
-          "tw-border-ice-500": e.modelValue !== e.value || e.disabled,
-          "tw-border-blue-500": e.modelValue === e.value && !e.disabled
-        }])
+      n("div", {
+        class: d([
+          s(a)["tile-body"],
+          {
+            "tw-border-ice-500": e.modelValue !== e.value || e.disabled,
+            "tw-border-blue-500": e.modelValue === e.value && !e.disabled
+          }
+        ])
       }, [
-        b(n.$slots, "default", {}, void 0, !0)
+        h(l.$slots, "default")
       ], 2)
-    ], 10, J));
+    ], 10, ae));
   }
-});
-const H = /* @__PURE__ */ v(q, [["__scopeId", "data-v-1984a217"]]);
-var u = /* @__PURE__ */ ((a) => (a.Radio = "radio", a.Button = "button", a.Chip = "chip", a.Tile = "tile", a))(u || {});
-const Y = /* @__PURE__ */ r({
+}), oe = "_root_583pa_2", ne = "_label_583pa_32", ie = "_input_583pa_39", ue = {
+  root: oe,
+  "root--disabled": "_root--disabled_583pa_11",
+  "tile-header": "_tile-header_583pa_15",
+  "tile-body": "_tile-body_583pa_16",
+  label: ne,
+  input: ie
+}, re = {
+  $style: ue
+}, ce = /* @__PURE__ */ $(de, [["__cssModules", re]]);
+var c = /* @__PURE__ */ ((t) => (t.Radio = "radio", t.Button = "button", t.Chip = "chip", t.Tile = "tile", t))(c || {});
+const ve = /* @__PURE__ */ p({
   __name: "RadioNew",
   props: {
     name: { default: void 0 },
@@ -172,40 +199,40 @@ const Y = /* @__PURE__ */ r({
     value: {}
   },
   emits: ["update:modelValue"],
-  setup(a, { emit: d }) {
-    const e = a, n = {
-      [u.Button]: D,
-      [u.Chip]: M,
-      [u.Radio]: I,
-      [u.Tile]: H
-    }, l = x(g.key, null), i = o(() => e.modelValue || (l == null ? void 0 : l.modelValue.value)), f = o(() => e.name || (l == null ? void 0 : l.name.value)), h = o(() => e.fullWidth || (l == null ? void 0 : l.fullWidth.value)), y = o(() => e.disabled || (l == null ? void 0 : l.disabled.value)), $ = o(() => e.variant || (l == null ? void 0 : l.variant.value) || "radio");
-    function V(p) {
+  setup(t, { emit: i }) {
+    const e = t, a = {
+      [c.Button]: F,
+      [c.Chip]: Q,
+      [c.Radio]: le,
+      [c.Tile]: ce
+    }, l = C(D.key, null), o = r(() => e.modelValue || (l == null ? void 0 : l.modelValue.value)), u = r(() => e.name || (l == null ? void 0 : l.name.value)), y = r(() => e.fullWidth || (l == null ? void 0 : l.fullWidth.value)), w = r(() => e.disabled || (l == null ? void 0 : l.disabled.value)), V = r(() => e.variant || (l == null ? void 0 : l.variant.value) || "radio");
+    function B(b) {
       if (l != null && l.update) {
-        l.update(p);
+        l.update(b);
         return;
       }
-      d("update:modelValue", p.target.value);
+      i("update:modelValue", b.target.value);
     }
-    return (p, K) => (_(), k(W(n[$.value]), {
+    return (b, pe) => (_(), M(x(a[V.value]), {
       id: e.id,
-      disabled: y.value,
+      disabled: w.value,
       "has-error": e.hasError,
-      "full-width": h.value,
+      "full-width": y.value,
       label: e.label,
-      "model-value": i.value,
-      name: f.value,
+      "model-value": o.value,
+      name: u.value,
       value: e.value,
-      onInput: V
+      onInput: B
     }, {
-      default: C(() => [
-        b(p.$slots, "default")
+      default: N(() => [
+        h(b.$slots, "default")
       ]),
       _: 3
     }, 40, ["id", "disabled", "has-error", "full-width", "label", "model-value", "name", "value"]));
   }
 });
 export {
-  u as RadioVariant,
-  Y as default
+  c as RadioVariant,
+  ve as default
 };
 //# sourceMappingURL=RadioNew.js.map

package/dist/RadioNew.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioNew.js","sources":["../src/components/RadioNew/Radio.types.ts","../src/components/RadioNew/RadioNew.vue"],"sourcesContent":["export enum RadioVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioVariants = `${RadioVariant}`;\n","<script lang=\"ts\">\n  export * from './Radio.types';\n\n  export interface RadioProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Adds error styling\n     */\n    hasError?: boolean;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * the styling for the radio button @defaultValue 'radio'\n     */\n    variant?: RadioVariants;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup/RadioGroup.keys';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RadioVariant, RadioVariants } from './Radio.types';\n\n  const variantComponentsMap = {\n    [RadioVariant.Button]: VariantButton,\n    [RadioVariant.Chip]: VariantChip,\n    [RadioVariant.Radio]: VariantRadio,\n    [RadioVariant.Tile]: VariantTile,\n  };\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key, null);\n\n  const props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n    fullWidth: false,\n    hasError: false,\n    id: undefined,\n    label: '',\n    modelValue: undefined,\n    name: undefined,\n    variant: undefined,\n  });\n\n  /**\n   * use prop values but fallback to radio group context values if they are provided\n   */\n  const derivedModelValue = computed(() => props.modelValue || radioGroupInjection?.modelValue.value);\n  const derivedName = computed(() => props.name || radioGroupInjection?.name.value);\n  const derivedNameFullWidth = computed(() => props.fullWidth || radioGroupInjection?.fullWidth.value);\n  const derivedDisabled = computed(() => props.disabled || radioGroupInjection?.disabled.value);\n  const derivedVariant = computed<RadioVariants>(() => props.variant || radioGroupInjection?.variant.value || 'radio');\n\n  const emit =\n    defineEmits<{\n      (e: 'update:modelValue', value: RadioProps['value']): void;\n    }>();\n\n  function onInput(e: Event) {\n    if (radioGroupInjection?.update) {\n      radioGroupInjection.update(e);\n\n      return;\n    }\n\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n</script>\n\n<template>\n  <component\n    :is=\"variantComponentsMap[derivedVariant]\"\n    :id=\"props.id\"\n    :disabled=\"derivedDisabled\"\n    :has-error=\"props.hasError\"\n    :full-width=\"derivedNameFullWidth\"\n    :label=\"props.label\"\n    :model-value=\"derivedModelValue\"\n    :name=\"derivedName\"\n    :value=\"props.value\"\n    @input=\"onInput\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","radioGroupInjection","inject","RADIO_GROUP_INJECTION","derivedModelValue","computed","props","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAY,IAAAA,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;iBC8DJC,IAAuB;AAAA,MAC3B,CAACD,EAAa,MAAM,GAAGE;AAAA,MACvB,CAACF,EAAa,IAAI,GAAGG;AAAA,MACrB,CAACH,EAAa,KAAK,GAAGI;AAAA,MACtB,CAACJ,EAAa,IAAI,GAAGK;AAAA,IAAA,GAGjBC,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAgB5DC,IAAoBC,EAAS,MAAMC,EAAM,eAAcL,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5FM,IAAcF,EAAS,MAAMC,EAAM,SAAQL,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1EO,IAAuBH,EAAS,MAAMC,EAAM,cAAaL,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7FQ,IAAkBJ,EAAS,MAAMC,EAAM,aAAYL,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFS,IAAiBL,EAAwB,MAAMC,EAAM,YAAWL,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO;AAOnH,aAASU,EAAQC,GAAU;AACzB,UAAIX,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOW,CAAC;AAE5B;AAAA,MACF;AAEK,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RadioNew.js","sources":["../src/components/RadioNew/components/VariantButton.vue","../src/components/RadioNew/components/VariantChip.vue","../src/components/RadioNew/components/VariantRadio.vue","../src/components/RadioNew/components/VariantTile.vue","../src/components/RadioNew/Radio.types.ts","../src/components/RadioNew/RadioNew.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'input', event: Event): void;\n    }>();\n</script>\n\n<template>\n  <div :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    padding: 8px 30px;\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.semibold');\n    color: var(--color-ice-700);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    display: block;\n    text-align: center;\n  }\n\n  .root:first-of-type .label {\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:last-of-type .label {\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n  }\n\n  .root:not(:first-of-type) .label {\n    margin-left: -1px;\n  }\n\n  .root:not(:last-of-type) .label {\n    border-right-color: transparent;\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    z-index: 1;\n    position: relative;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: var(--color-blue-500);\n    background-color: var(--color-blue-100);\n    z-index: 1;\n    position: relative;\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'input', event: Event): void;\n    }>();\n</script>\n\n<template>\n  <div :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      class=\"tw-sr-only\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled || props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label :class=\"classes.label\" :for=\"`${props.name}-${props.id}`\">\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    display: inline-block;\n    padding: theme('spacing.1') theme('spacing.3');\n    border: 1px solid var(--color-ice-500);\n    font-weight: theme('fontWeight.normal');\n    line-height: 1.375rem;\n    color: var(--color-ice-900);\n    cursor: pointer;\n    transition: all 0.2s;\n    user-select: none;\n    border-radius: 9999px;\n    white-space: nowrap;\n  }\n\n  .input:disabled ~ .label {\n    background-color: var(--color-ice-100);\n    color: var(--color-ice-500);\n    cursor: auto;\n  }\n\n  .input:checked:not(:disabled) ~ .label {\n    border-color: var(--color-blue-500);\n    color: theme('colors.white');\n    background-color: var(--color-blue-500);\n    font-weight: theme('fontWeight.bold');\n  }\n\n  .input:not(:checked, :disabled) ~ .label:hover {\n    border-color: var(--color-blue-500);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'input', event: Event): void;\n    }>();\n</script>\n\n<template>\n  <div class=\"tw-flex\" :class=\"[classes.root, { 'tw-w-full': props.fullWidth }]\">\n    <input\n      :id=\"`${props.name}-${props.id}`\"\n      :class=\"classes.input\"\n      type=\"radio\"\n      :name=\"props.name\"\n      :value=\"props.value\"\n      :checked=\"props.modelValue === props.value\"\n      :disabled=\"props.disabled\"\n      @input=\"emit('input', $event)\"\n    />\n    <label\n      v-show=\"props.label\"\n      :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\"\n      :for=\"`${props.name}-${props.id}`\"\n    >\n      {{ props.label }}\n    </label>\n  </div>\n</template>\n\n<style module>\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    border-radius: 50%;\n    min-width: 20px;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled {\n    background-image: radial-gradient(var(--color-ice-100) 100%, var(--color-ice-100) 100%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .input:hover:not(:disabled) {\n    border-color: var(--color-blue-500);\n  }\n\n  .input:disabled ~ .label {\n    cursor: auto;\n  }\n\n  .input:hover:not(:disabled) ~ .label {\n    color: var(--color-ice-900);\n  }\n\n  .input:not(:disabled) ~ .label:hover {\n    color: var(--color-ice-900);\n  }\n</style>\n","<script setup lang=\"ts\">\n  import { useCssModule } from 'vue';\n\n  export interface RadioVariantProps {\n    /**\n     * Whether the input should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n\n  const props = defineProps<RadioVariantProps>();\n  const classes = useCssModule();\n\n  const emit =\n    defineEmits<{\n      (e: 'input', event: Event): void;\n    }>();\n</script>\n\n<template>\n  <label\n    :class=\"[classes.root, { 'tw-w-full': props.fullWidth, [classes['root--disabled']]: props.disabled }]\"\n    :for=\"`${props.name}-${props.id}`\"\n  >\n    <div\n      class=\"tw-flex tw-border\"\n      :class=\"[\n        classes['tile-header'],\n        {\n          'tw-border-blue-500 tw-bg-blue-100': props.modelValue === props.value && !props.disabled,\n          'tw-border-ice-500 tw-bg-ice-100': props.modelValue !== props.value || props.disabled,\n        },\n      ]\"\n    >\n      <input\n        :id=\"`${props.name}-${props.id}`\"\n        :aria-labelledby=\"`tile-label-${props.name}-${props.id}`\"\n        class=\"tw-sr-only\"\n        :class=\"classes.input\"\n        type=\"radio\"\n        :name=\"props.name\"\n        :value=\"props.value\"\n        :checked=\"props.modelValue === props.value\"\n        :disabled=\"props.disabled\"\n        @input=\"emit('input', $event)\"\n      />\n      <div :id=\"`tile-label-${props.name}-${props.id}`\" :class=\"[classes.label, { 'tw-text-ice-500': props.disabled }]\">\n        {{ props.label }}\n      </div>\n    </div>\n    <div\n      :class=\"[\n        classes['tile-body'],\n        {\n          'tw-border-ice-500': props.modelValue !== props.value || props.disabled,\n          'tw-border-blue-500': props.modelValue === props.value && !props.disabled,\n        },\n      ]\"\n    >\n      <slot></slot>\n    </div>\n  </label>\n</template>\n\n<style module>\n  .root {\n    border-radius: theme('borderRadius.DEFAULT');\n    cursor: pointer;\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    user-select: none;\n  }\n\n  .root--disabled {\n    cursor: auto;\n  }\n\n  .tile-header,\n  .tile-body {\n    transition: all 0.2s;\n  }\n\n  .tile-header {\n    border-radius: theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT') 0 0;\n    padding: theme('spacing.3') 0;\n  }\n\n  .root:hover:not(.root--disabled) .tile-header {\n    background-color: var(--color-blue-100) !important;\n    border-color: var(--color-blue-500) !important;\n    color: var(--color-ice-900) !important;\n    transition: all 0.2s;\n  }\n\n  .label {\n    font-weight: theme('fontWeight.medium');\n    user-select: none;\n    cursor: pointer;\n    padding: 0 theme('spacing.3');\n  }\n\n  .input {\n    appearance: none;\n    background-color: theme('colors.white');\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    border: 1px solid var(--color-ice-500);\n    transition: all 0.2s;\n    position: relative;\n    cursor: pointer;\n    top: 2px;\n    margin-left: theme('spacing.3');\n  }\n\n  .input:checked {\n    background-image: radial-gradient(var(--color-blue-500) 50%, transparent 54%);\n  }\n\n  .input:disabled:checked {\n    background-image: radial-gradient(var(--color-ice-500) 50%, var(--color-ice-100) 54%);\n  }\n\n  .tile-body {\n    border-radius: 0 0 theme('borderRadius.DEFAULT') theme('borderRadius.DEFAULT');\n    border-width: 0 1px 1px 1px;\n    background-color: theme('colors.white');\n    padding: theme('spacing.6');\n    display: flex;\n    flex-direction: column;\n  }\n\n  .root:hover:not(.root--disabled) .tile-body {\n    border-color: var(--color-blue-500) !important;\n    transition: all 0.2s;\n  }\n</style>\n","export enum RadioVariant {\n  Radio = 'radio',\n  Button = 'button',\n  Chip = 'chip',\n  Tile = 'tile',\n}\n\nexport type RadioVariants = `${RadioVariant}`;\n","<script lang=\"ts\">\n  export * from './Radio.types';\n\n  export interface RadioProps {\n    /**\n     * Passed to the \"name\" attribute of the `<input>` element.\n     */\n    name?: string;\n\n    /**\n     * Whether the entire group should be disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Whether the group should expand to the parent's width\n     */\n    fullWidth?: boolean;\n\n    /**\n     * A unique string to distinguish one Radio instance from another\n     * and to link the label to the input; required for accessibility\n     */\n    id: string | number;\n\n    /**\n     * value bound to the parent component\n     */\n    modelValue?: string | undefined;\n\n    /**\n     * Adds error styling\n     */\n    hasError?: boolean;\n\n    /**\n     * The description which appears to the right of the radio button\n     */\n    label?: string;\n\n    /**\n     * the styling for the radio button @defaultValue 'radio'\n     */\n    variant?: RadioVariants;\n\n    /**\n     * The value for the radio input.\n     */\n    value: string;\n  }\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, inject } from 'vue';\n\n  import { RADIO_GROUP_INJECTION } from '../RadioGroup/RadioGroup.keys';\n  import VariantButton from './components/VariantButton.vue';\n  import VariantChip from './components/VariantChip.vue';\n  import VariantRadio from './components/VariantRadio.vue';\n  import VariantTile from './components/VariantTile.vue';\n  import { RadioVariant, RadioVariants } from './Radio.types';\n\n  const variantComponentsMap = {\n    [RadioVariant.Button]: VariantButton,\n    [RadioVariant.Chip]: VariantChip,\n    [RadioVariant.Radio]: VariantRadio,\n    [RadioVariant.Tile]: VariantTile,\n  };\n\n  const radioGroupInjection = inject(RADIO_GROUP_INJECTION.key, null);\n\n  const props = withDefaults(defineProps<RadioProps>(), {\n    disabled: false,\n    fullWidth: false,\n    hasError: false,\n    id: undefined,\n    label: '',\n    modelValue: undefined,\n    name: undefined,\n    variant: undefined,\n  });\n\n  /**\n   * use prop values but fallback to radio group context values if they are provided\n   */\n  const derivedModelValue = computed(() => props.modelValue || radioGroupInjection?.modelValue.value);\n  const derivedName = computed(() => props.name || radioGroupInjection?.name.value);\n  const derivedNameFullWidth = computed(() => props.fullWidth || radioGroupInjection?.fullWidth.value);\n  const derivedDisabled = computed(() => props.disabled || radioGroupInjection?.disabled.value);\n  const derivedVariant = computed<RadioVariants>(() => props.variant || radioGroupInjection?.variant.value || 'radio');\n\n  const emit =\n    defineEmits<{\n      (e: 'update:modelValue', value: RadioProps['value']): void;\n    }>();\n\n  function onInput(e: Event) {\n    if (radioGroupInjection?.update) {\n      radioGroupInjection.update(e);\n\n      return;\n    }\n\n    emit('update:modelValue', (e.target as HTMLInputElement).value);\n  }\n</script>\n\n<template>\n  <component\n    :is=\"variantComponentsMap[derivedVariant]\"\n    :id=\"props.id\"\n    :disabled=\"derivedDisabled\"\n    :has-error=\"props.hasError\"\n    :full-width=\"derivedNameFullWidth\"\n    :label=\"props.label\"\n    :model-value=\"derivedModelValue\"\n    :name=\"derivedName\"\n    :value=\"props.value\"\n    @input=\"onInput\"\n  >\n    <slot></slot>\n  </component>\n</template>\n"],"names":["classes","useCssModule","RadioVariant","variantComponentsMap","VariantButton","VariantChip","VariantRadio","VariantTile","radioGroupInjection","inject","RADIO_GROUP_INJECTION","derivedModelValue","computed","props","derivedName","derivedNameFullWidth","derivedDisabled","derivedVariant","onInput","e","emit"],"mappings":";;;;;;;;;;;;;;;;iBA0CQA,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCAVD,IAAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1CN,IAAAC,sBAAAA,OACVA,EAAA,QAAQ,SACRA,EAAA,SAAS,UACTA,EAAA,OAAO,QACPA,EAAA,OAAO,QAJGA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;iBC8DJC,IAAuB;AAAA,MAC3B,CAACD,EAAa,MAAM,GAAGE;AAAA,MACvB,CAACF,EAAa,IAAI,GAAGG;AAAA,MACrB,CAACH,EAAa,KAAK,GAAGI;AAAA,MACtB,CAACJ,EAAa,IAAI,GAAGK;AAAA,IAAA,GAGjBC,IAAsBC,EAAOC,EAAsB,KAAK,IAAI,GAgB5DC,IAAoBC,EAAS,MAAMC,EAAM,eAAcL,KAAA,gBAAAA,EAAqB,WAAW,MAAK,GAC5FM,IAAcF,EAAS,MAAMC,EAAM,SAAQL,KAAA,gBAAAA,EAAqB,KAAK,MAAK,GAC1EO,IAAuBH,EAAS,MAAMC,EAAM,cAAaL,KAAA,gBAAAA,EAAqB,UAAU,MAAK,GAC7FQ,IAAkBJ,EAAS,MAAMC,EAAM,aAAYL,KAAA,gBAAAA,EAAqB,SAAS,MAAK,GACtFS,IAAiBL,EAAwB,MAAMC,EAAM,YAAWL,KAAA,gBAAAA,EAAqB,QAAQ,UAAS,OAAO;AAOnH,aAASU,EAAQC,GAAU;AACzB,UAAIX,KAAA,QAAAA,EAAqB,QAAQ;AAC/B,QAAAA,EAAoB,OAAOW,CAAC;AAE5B;AAAA,MACF;AAEK,MAAAC,EAAA,qBAAsBD,EAAE,OAA4B,KAAK;AAAA,IAChE;;;;;;;;;;;;;;;;;;;"}

package/dist/SearchBar.js

@@ -3,18 +3,18 @@ import { t as b } from "./locale.js";
 import _ from "./Button.js";
 import v from "./Icon.js";
 import T from "./Input.js";
-import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/get";
-import "./Button.vue_used_vue_type_style_index_0_lang.module-b77978d6.js";
+import "./Button.vue_used_vue_type_style_index_0_lang.module-63d31dc0.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
 import "lodash-es/isNil";
 import "./utils/i18n.js";
 import "./constants.js";
-import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
-import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
-const W = /* @__PURE__ */ C({
+import "./Field.vue_vue_type_script_setup_true_lang-42ba3c5a.js";
+import "./Label.vue_vue_type_script_setup_true_lang-4b02087f.js";
+const M = /* @__PURE__ */ C({
   name: "ll-search-bar",
   __name: "SearchBar",
   props: {
@@ -27,39 +27,39 @@ const W = /* @__PURE__ */ C({
   },
   emits: ["search", "update:model-value"],
   setup(k, { emit: s }) {
-    const e = k, c = B(), g = S(), a = m(e.modelValue), i = m();
+    const e = k, c = B(), g = S(), t = m(e.modelValue), i = m();
     function d() {
-      s("search", a.value);
-    }
-    function x() {
-      var l, t;
-      a.value = "", s("search", ""), s("update:model-value", ""), (t = (l = i.value) == null ? void 0 : l.inputEl) == null || t.focus();
+      s("search", t.value);
     }
     function y() {
-      s("update:model-value", a.value);
+      var l, a;
+      t.value = "", s("search", ""), s("update:model-value", ""), (a = (l = i.value) == null ? void 0 : l.inputEl) == null || a.focus();
+    }
+    function x() {
+      s("update:model-value", t.value);
     }
-    return (l, t) => (h(), f(T, {
+    return (l, a) => (h(), f(T, {
       ref_key: "stashInputRef",
       ref: i,
-      modelValue: a.value,
+      modelValue: t.value,
       "onUpdate:modelValue": [
-        t[0] || (t[0] = (p) => a.value = p),
-        y
+        a[0] || (a[0] = (p) => t.value = p),
+        x
       ],
       class: o(["stash-search-bar", r(c)["search-input"]]),
       label: e.label,
       placeholder: e.placeholder,
       "hint-text": e.hintText,
       "data-test": "stash-search-bar",
-      onKeyup: t[1] || (t[1] = V((p) => !e.isLoading && d(), ["enter"]))
+      onKeyup: a[1] || (a[1] = V((p) => !e.isLoading && d(), ["enter"]))
     }, w({
       append: n(() => [
-        a.value ? (h(), f(_, {
+        t.value ? (h(), f(_, {
           key: 0,
           class: o(r(c)["clear-button"]),
           disabled: e.isLoading,
           "data-test": "stash-search-bar|clear-button",
-          onClick: x
+          onClick: y
         }, {
           default: n(() => [
             u(v, { name: "close" })
@@ -74,7 +74,7 @@ const W = /* @__PURE__ */ C({
         }, {
           default: n(() => [
             u(v, {
-              class: o({ "fx-spin tw-text-teal-500": e.isWorking }),
+              class: o({ "tw-animate-spin tw-text-teal-500": e.isWorking }),
               name: e.isWorking ? "working" : "search"
             }, null, 8, ["class", "name"])
           ]),
@@ -92,13 +92,13 @@ const W = /* @__PURE__ */ C({
       } : void 0
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
-}), $ = {
-  "search-input": "_search-input_1e6pm_2",
-  "clear-button": "_clear-button_1e6pm_8",
-  "search-button": "_search-button_1e6pm_23"
-}, K = {
-  $style: $
-}, X = /* @__PURE__ */ M(W, [["__cssModules", K]]);
+}), W = {
+  "search-input": "_search-input_jm4a0_2",
+  "clear-button": "_clear-button_jm4a0_8",
+  "search-button": "_search-button_jm4a0_23"
+}, $ = {
+  $style: W
+}, X = /* @__PURE__ */ j(M, [["__cssModules", $]]);
 export {
   X as default
 };

package/dist/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { ref, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when searching or clearing the search input\n       */\n      (e: 'search', searchTerm: string): void;\n\n      /**\n       * Emitted when the search term changes\n       */\n      (e: 'update:model-value', searchTerm: string): void;\n    }>();\n\n  const classes = useCssModule();\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  function onSearch() {\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"classes['search-input']\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"!props.isLoading && onSearch()\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        :class=\"classes['clear-button']\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        :class=\"classes['search-button']\"\n        @click=\"onSearch\"\n      >\n        <Icon :class=\"{ 'fx-spin tw-text-teal-500': props.isWorking }\" :name=\"props.isWorking ? 'working' : 'search'\" />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style module>\n  .search-input :global(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n  }\n\n  .search-input :global(.stash-input-append) .clear-button {\n    color: theme(colors.ice.700);\n    height: theme(spacing.9);\n    margin: 0;\n    min-width: theme(spacing.9);\n    padding: 0;\n    width: theme(spacing.9);\n    background: none;\n  }\n\n  .search-input :global(.stash-input-append) .clear-button:disabled {\n    color: theme('colors.ice.500');\n    cursor: default;\n  }\n\n  .search-input :global(.stash-input-append) .search-button {\n    border-bottom-left-radius: 0;\n    border-left: none;\n    border-top-left-radius: 0;\n    min-width: theme(spacing.9);\n    padding: 0 theme(spacing[1.5]);\n    width: theme(spacing.9);\n  }\n\n  .search-input :global(.stash-input-append) .search-button:focus {\n    box-shadow: none;\n  }\n\n  .search-input :global(.stash-input-append) .search-button:disabled {\n    border-color: theme('colors.ice.500');\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF;AAEtB,aAASG,IAAW;AACb,MAAAC,EAAA,UAAUL,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBK,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBL,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { ref, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Icon from '../Icon/Icon.vue';\n  import Input from '../Input/Input.vue';\n\n  export interface SearchBarProps {\n    /**\n     * Indicates loading activity (for example async request) that should prevent search\n     */\n    isLoading?: boolean;\n\n    /**\n     * Sets a visual indicator that the search is active\n     */\n    isWorking?: boolean;\n\n    /**\n     * The search term\n     */\n    modelValue?: string;\n\n    /**\n     * Placeholder text for the input\n     */\n    placeholder?: string;\n\n    /**\n     * Label for search bar\n     */\n    label?: string;\n\n    /**\n     * Text below the input\n     */\n    hintText?: string;\n  }\n\n  defineOptions({\n    name: 'll-search-bar',\n  });\n\n  const props = withDefaults(defineProps<SearchBarProps>(), {\n    isLoading: false,\n    isWorking: false,\n    modelValue: '',\n    placeholder: t('ll.search'),\n    label: t('ll.search'),\n    hintText: undefined,\n  });\n\n  const emit =\n    defineEmits<{\n      /**\n       * Emitted when searching or clearing the search input\n       */\n      (e: 'search', searchTerm: string): void;\n\n      /**\n       * Emitted when the search term changes\n       */\n      (e: 'update:model-value', searchTerm: string): void;\n    }>();\n\n  const classes = useCssModule();\n  const slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  function onSearch() {\n    emit('search', searchTerm.value);\n  }\n\n  function clearSearchTerm() {\n    searchTerm.value = '';\n    emit('search', '');\n    emit('update:model-value', '');\n\n    stashInputRef.value?.inputEl?.focus();\n  }\n\n  function handleChange() {\n    emit('update:model-value', searchTerm.value);\n  }\n</script>\n\n<template>\n  <Input\n    ref=\"stashInputRef\"\n    v-model=\"searchTerm\"\n    class=\"stash-search-bar\"\n    :class=\"classes['search-input']\"\n    :label=\"props.label\"\n    :placeholder=\"props.placeholder\"\n    :hint-text=\"props.hintText\"\n    data-test=\"stash-search-bar\"\n    @update:model-value=\"handleChange\"\n    @keyup.enter=\"!props.isLoading && onSearch()\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        :class=\"classes['clear-button']\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        :class=\"classes['search-button']\"\n        @click=\"onSearch\"\n      >\n        <Icon\n          :class=\"{ 'tw-animate-spin tw-text-teal-500': props.isWorking }\"\n          :name=\"props.isWorking ? 'working' : 'search'\"\n        />\n      </Button>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Overrides the Input hint-text prop -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Input>\n</template>\n\n<style module>\n  .search-input :global(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n  }\n\n  .search-input :global(.stash-input-append) .clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    margin: 0;\n    min-width: theme('spacing.9');\n    padding: 0;\n    width: theme('spacing.9');\n    background: none;\n  }\n\n  .search-input :global(.stash-input-append) .clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .search-input :global(.stash-input-append) .search-button {\n    border-bottom-left-radius: 0;\n    border-left: none;\n    border-top-left-radius: 0;\n    min-width: theme('spacing.9');\n    padding: 0 theme('spacing[1.5]');\n    width: theme('spacing.9');\n  }\n\n  .search-input :global(.stash-input-append) .search-button:focus {\n    box-shadow: none;\n  }\n\n  .search-input :global(.stash-input-append) .search-button:disabled {\n    border-color: var(--color-ice-500);\n  }\n</style>\n"],"names":["classes","useCssModule","slots","useSlots","searchTerm","ref","props","stashInputRef","onSearch","emit","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkEQA,IAAUC,KACVC,IAAQC,KACRC,IAAaC,EAAIC,EAAM,UAAU,GACjCC,IAAgBF;AAEtB,aAASG,IAAW;AACb,MAAAC,EAAA,UAAUL,EAAW,KAAK;AAAA,IACjC;AAEA,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBK,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfE,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAChC;AAEA,aAASE,IAAe;AACjB,MAAAJ,EAAA,sBAAsBL,EAAW,KAAK;AAAA,IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}