@leaflink/stash 42.8.1 → 43.0.0

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js

@@ -0,0 +1,11 @@
+const _ = "_pagination_kh7yl_2", i = "_prev_kh7yl_20", t = "_next_kh7yl_25", n = {
+  pagination: _,
+  prev: i,
+  next: t,
+  "is-active": "_is-active_kh7yl_38",
+  "is-disabled": "_is-disabled_kh7yl_51"
+};
+export {
+  n as s
+};
+//# sourceMappingURL=Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

package/dist/Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paginate.vue_used_vue_type_style_index_0_lang.module-bfccf992.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/QuickAction.js

@@ -1,10 +1,10 @@
-import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as d, mergeProps as p, withCtx as f, createElementVNode as e, createVNode as s, toDisplayString as n } from "vue";
-import r from "./Icon.js";
-import { _ as m } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as l, computed as o, openBlock as u, createBlock as _, resolveDynamicComponent as d, mergeProps as p, withCtx as m, createElementVNode as e, createVNode as s, toDisplayString as c } from "vue";
+import n from "./Icon.js";
+import { _ as f } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, b = { class: "tw-text-blue" }, v = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
+const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3" }, x = { class: "tw-flex-1" }, v = { class: "tw-text-blue-500" }, b = { class: "subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal" }, k = /* @__PURE__ */ l({
   __name: "QuickAction",
   props: {
     title: {},
@@ -13,8 +13,8 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     href: {},
     icon: {}
   },
-  setup(c) {
-    const t = c, i = o(() => t.to ? "router-link" : t.href ? "a" : "div"), a = o(() => t.to ? {
+  setup(r) {
+    const t = r, i = o(() => t.to ? "router-link" : t.href ? "a" : "div"), a = o(() => t.to ? {
       to: t.to
     } : t.href ? {
       href: t.href
@@ -23,21 +23,21 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
       class: "stash-quick-action root tw-p-3 tw-shadow tw-rounded",
       "data-test": "stash-quick-action"
     }), {
-      default: f(() => [
+      default: m(() => [
         e("div", w, [
           e("div", h, [
-            s(r, {
+            s(n, {
               name: t.icon,
-              class: "tw-text-blue"
+              class: "tw-text-blue-500"
             }, null, 8, ["name"])
           ]),
           e("div", x, [
-            e("h4", b, n(t.title), 1),
-            e("p", v, n(t.subtitle), 1)
+            e("h4", v, c(t.title), 1),
+            e("p", b, c(t.subtitle), 1)
           ]),
-          s(r, {
+          s(n, {
             name: "arrow-right",
-            class: "tw-text-blue"
+            class: "tw-text-blue-500"
           })
         ])
       ]),
@@ -45,7 +45,7 @@ const w = { class: "content tw-flex tw-items-center" }, h = { class: "tw-flex tw
     }, 16));
   }
 });
-const I = /* @__PURE__ */ m(k, [["__scopeId", "data-v-704bf5c4"]]);
+const I = /* @__PURE__ */ f(k, [["__scopeId", "data-v-e72c0cc9"]]);
 export {
   I as default
 };

package/dist/QuickAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"QuickAction.js","sources":["../src/components/QuickAction/QuickAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed } from 'vue';\n  import { type RouteLocationRaw } from 'vue-router';\n\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n\n  export interface QuickActionProps {\n    /**\n     * The title prop will show the first line of text\n     */\n    title: string;\n\n    /**\n     * The subtitle prop will show the second line of text\n     */\n    subtitle: string;\n\n    /**\n     * The `to` prop for vue-router's `RouterLink` component\n     */\n    to?: RouteLocationRaw;\n    /**\n     * If defined, the quick action will render as an `<a />` tag.\n     */\n    href?: string;\n    /**\n     * Icon to render on the left side\n     */\n    icon: IconName;\n  }\n\n  const props = defineProps<QuickActionProps>();\n\n  const is = computed(() => {\n    if (props.to) {\n      return 'router-link';\n    }\n\n    if (props.href) {\n      return 'a';\n    }\n\n    return 'div';\n  });\n\n  const linkAttrs = computed(() => {\n    if (props.to) {\n      return {\n        to: props.to,\n      };\n    }\n\n    if (props.href) {\n      return {\n        href: props.href\n      };\n    }\n\n    return {};\n  });\n</script>\n\n<template>\n  <component\n    :is=\"is\"\n    v-bind=\"linkAttrs\"\n    class=\"stash-quick-action root tw-p-3 tw-shadow tw-rounded\"\n    data-test=\"stash-quick-action\"\n  >\n    <div class=\"content tw-flex tw-items-center\">\n      <div class=\"tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-blue-100 tw-p-3\">\n        <Icon :name=\"props.icon\" class=\"tw-text-blue-500\" />\n      </div>\n      <div class=\"tw-flex-1\">\n        <h4 class=\"tw-text-blue-500\">{{ props.title }}</h4>\n        <p class=\"subtitle tw-text-xs lg:tw-mb-0 tw-text-ice-700 tw-font-normal\">\n          {{ props.subtitle }}\n        </p>\n      </div>\n      <Icon name=\"arrow-right\" class=\"tw-text-blue-500\" />\n    </div>\n  </component>\n</template>\n\n<style scoped>\n  .root {\n    background-color: #fff;\n    border: 1px solid transparent; /* it prevents layout size shifting of extra height/width when hover */\n    cursor: pointer;\n    display: inline-block;\n  }\n\n  .root:hover,\n  .root:active,\n  .root:focus {\n    border: 1px solid var(--color-blue-500);\n    text-decoration: none;\n  }\n\n  .content {\n    gap: 12px;\n  }\n</style>\n"],"names":["is","computed","props","linkAttrs"],"mappings":";;;;;;;;;;;;;;;;iBAkCQA,IAAKC,EAAS,MACdC,EAAM,KACD,gBAGLA,EAAM,OACD,MAGF,KACR,GAEKC,IAAYF,EAAS,MACrBC,EAAM,KACD;AAAA,MACL,IAAIA,EAAM;AAAA,IAAA,IAIVA,EAAM,OACD;AAAA,MACL,MAAMA,EAAM;AAAA,IAAA,IAIT,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/RadioNew.js

@@ -1,4 +1,4 @@
-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 { defineComponent as r, openBlock as _, createElementBlock as p, 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({
@@ -15,7 +15,7 @@ const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
   emits: ["input"],
   setup(a, { emit: d }) {
     const e = a;
-    return (n, l) => (_(), c("div", {
+    return (n, l) => (_(), p("div", {
       class: s(["root", { "tw-w-full": e.fullWidth }])
     }, [
       t("input", {
@@ -35,7 +35,7 @@ const N = ["id", "name", "value", "checked", "disabled"], R = ["for"], T = /* @_
     ], 2));
   }
 });
-const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-7a7766df"]]), E = ["id", "name", "value", "checked", "disabled"], O = ["for"], S = /* @__PURE__ */ r({
+const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-2172fc90"]]), E = ["id", "name", "value", "checked", "disabled"], O = ["for"], S = /* @__PURE__ */ r({
   __name: "VariantChip",
   props: {
     disabled: { type: Boolean },
@@ -49,7 +49,7 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-7a7766df"]]), E = ["id", "
   emits: ["input"],
   setup(a, { emit: d }) {
     const e = a;
-    return (n, l) => (_(), c("div", {
+    return (n, l) => (_(), p("div", {
       class: s(["root", { "tw-w-full": e.fullWidth }])
     }, [
       t("input", {
@@ -69,7 +69,7 @@ const D = /* @__PURE__ */ v(T, [["__scopeId", "data-v-7a7766df"]]), E = ["id", "
     ], 2));
   }
 });
-const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-d8634d42"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
+const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-c92fc3ab"]]), z = ["id", "name", "value", "checked", "disabled"], A = ["for"], F = /* @__PURE__ */ r({
   __name: "VariantRadio",
   props: {
     disabled: { type: Boolean },
@@ -83,7 +83,7 @@ const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-d8634d42"]]), z = ["id", "
   emits: ["input"],
   setup(a, { emit: d }) {
     const e = a;
-    return (n, l) => (_(), c("div", {
+    return (n, l) => (_(), p("div", {
       class: s(["root tw-flex", { "tw-w-full": e.fullWidth }])
     }, [
       t("input", {
@@ -105,7 +105,7 @@ const M = /* @__PURE__ */ v(S, [["__scopeId", "data-v-d8634d42"]]), z = ["id", "
     ], 2));
   }
 });
-const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-a70879f8"]]), J = ["for"], P = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], U = ["id"], q = /* @__PURE__ */ r({
+const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-7175a75d"]]), J = ["for"], P = ["id", "aria-labelledby", "name", "value", "checked", "disabled"], U = ["id"], q = /* @__PURE__ */ r({
   __name: "VariantTile",
   props: {
     disabled: { type: Boolean },
@@ -119,7 +119,7 @@ const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-a70879f8"]]), J = ["for"],
   emits: ["input"],
   setup(a, { emit: d }) {
     const e = a;
-    return (n, l) => (_(), c("label", {
+    return (n, l) => (_(), p("label", {
       class: s(["root", { "tw-w-full": e.fullWidth, "root--disabled": e.disabled }]),
       for: `${e.name}-${e.id}`
     }, [
@@ -156,7 +156,7 @@ const I = /* @__PURE__ */ v(F, [["__scopeId", "data-v-a70879f8"]]), J = ["for"],
     ], 10, J));
   }
 });
-const H = /* @__PURE__ */ v(q, [["__scopeId", "data-v-8067593a"]]);
+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({
   __name: "RadioNew",
@@ -179,14 +179,14 @@ const Y = /* @__PURE__ */ r({
       [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) {
+    function V(c) {
       if (l != null && l.update) {
-        l.update(p);
+        l.update(c);
         return;
       }
-      d("update:modelValue", p.target.value);
+      d("update:modelValue", c.target.value);
     }
-    return (p, K) => (_(), k(W(n[$.value]), {
+    return (c, K) => (_(), k(W(n[$.value]), {
       id: e.id,
       disabled: y.value,
       "has-error": e.hasError,
@@ -198,7 +198,7 @@ const Y = /* @__PURE__ */ r({
       onInput: V
     }, {
       default: C(() => [
-        b(p.$slots, "default")
+        b(c.$slots, "default")
       ]),
       _: 3
     }, 40, ["id", "disabled", "has-error", "full-width", "label", "model-value", "name", "value"]));

package/dist/SearchBar.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, useCssModule as B, useSlots as S, ref as h, openBlock as m, createBlock as f, normalizeClass as o, unref as r, withKeys as V, createSlots as w, withCtx as n, createVNode as i, createCommentVNode as I, renderSlot as L } from "vue";
+import { defineComponent as C, useCssModule as B, useSlots as S, ref as m, openBlock as h, createBlock as f, normalizeClass as o, unref as r, withKeys as V, createSlots as w, withCtx as n, createVNode as u, createCommentVNode as I, renderSlot as L } from "vue";
 import { t as b } from "./locale.js";
 import _ from "./Button.js";
 import v from "./Icon.js";
@@ -26,21 +26,21 @@ const W = /* @__PURE__ */ C({
     hintText: { default: void 0 }
   },
   emits: ["search", "update:model-value"],
-  setup(g, { emit: s }) {
-    const e = g, c = B(), k = S(), a = h(e.modelValue), u = h();
+  setup(k, { emit: s }) {
+    const e = k, c = B(), g = S(), a = 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 = u.value) == null ? void 0 : l.inputEl) == null || t.focus();
+      a.value = "", s("search", ""), s("update:model-value", ""), (t = (l = i.value) == null ? void 0 : l.inputEl) == null || t.focus();
     }
     function y() {
       s("update:model-value", a.value);
     }
-    return (l, t) => (m(), f(T, {
+    return (l, t) => (h(), f(T, {
       ref_key: "stashInputRef",
-      ref: u,
+      ref: i,
       modelValue: a.value,
       "onUpdate:modelValue": [
         t[0] || (t[0] = (p) => a.value = p),
@@ -54,7 +54,7 @@ const W = /* @__PURE__ */ C({
       onKeyup: t[1] || (t[1] = V((p) => !e.isLoading && d(), ["enter"]))
     }, w({
       append: n(() => [
-        a.value ? (m(), f(_, {
+        a.value ? (h(), f(_, {
           key: 0,
           class: o(r(c)["clear-button"]),
           disabled: e.isLoading,
@@ -62,19 +62,19 @@ const W = /* @__PURE__ */ C({
           onClick: x
         }, {
           default: n(() => [
-            i(v, { name: "close" })
+            u(v, { name: "close" })
           ]),
           _: 1
         }, 8, ["class", "disabled"])) : I("", !0),
-        i(_, {
+        u(_, {
           "data-test": "stash-search-bar|search-button",
           disabled: e.isLoading,
           class: o(r(c)["search-button"]),
           onClick: d
         }, {
           default: n(() => [
-            i(v, {
-              class: o({ "fx-spin tw-text-teal": e.isWorking }),
+            u(v, {
+              class: o({ "fx-spin tw-text-teal-500": e.isWorking }),
               name: e.isWorking ? "working" : "search"
             }, null, 8, ["class", "name"])
           ]),
@@ -83,7 +83,7 @@ const W = /* @__PURE__ */ C({
       ]),
       _: 2
     }, [
-      r(k).hint ? {
+      r(g).hint ? {
         name: "hint",
         fn: n(() => [
           L(l.$slots, "hint")
@@ -93,9 +93,9 @@ const W = /* @__PURE__ */ C({
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
 }), $ = {
-  "search-input": "_search-input_7ir7g_2",
-  "clear-button": "_clear-button_7ir7g_8",
-  "search-button": "_search-button_7ir7g_23"
+  "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]]);

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': 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.DEFAULT);\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.DEFAULT);\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 :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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}