@leaflink/stash 50.11.0 → 50.12.0

package/dist/ListView.vue.d.ts

@@ -1383,9 +1383,6 @@ trigger?: string | undefined;
 resetFilters(): void;
 getDefaultFilterValues(): unknown;
 setFilterValues(newValues: any): void;
-/**
-* Start of page
-*/
 updateValidationValues(): void;
 onChange(filter: any, filterValues: any, filterIndex: any): void;
 onSelectInput(newValue: any, filter: any, filterIndex: any): void;
@@ -2072,7 +2069,9 @@ default: boolean;
 };
 }>> & Readonly<{
 onChange?: ((v: {
-value?: string | undefined;
+value?: string | undefined; /**
+* Text to render in EmptyState component if there are no results
+*/
 option?: any;
 isValueChange: boolean;
 type: "input" | "select";
@@ -2091,7 +2090,9 @@ isValueChange: boolean;
 type: "input" | "select";
 }) => void;
 change: (v: {
-value?: string | undefined;
+value?: string | undefined; /**
+* Text to render in EmptyState component if there are no results
+*/
 option?: any;
 isValueChange: boolean;
 type: "input" | "select";
@@ -2187,7 +2188,9 @@ default: boolean;
 };
 }>> & Readonly<{
 onChange?: ((v: {
-value?: string | undefined;
+value?: string | undefined; /**
+* Text to render in EmptyState component if there are no results
+*/
 option?: any;
 isValueChange: boolean;
 type: "input" | "select";
@@ -2286,7 +2289,9 @@ default: boolean;
 };
 }>> & Readonly<{
 onChange?: ((v: {
-value?: string | undefined;
+value?: string | undefined; /**
+* Text to render in EmptyState component if there are no results
+*/
 option?: any;
 isValueChange: boolean;
 type: "input" | "select";
@@ -2305,7 +2310,9 @@ isValueChange: boolean;
 type: "input" | "select";
 }) => void;
 change: (v: {
-value?: string | undefined;
+value?: string | undefined; /**
+* Text to render in EmptyState component if there are no results
+*/
 option?: any;
 isValueChange: boolean;
 type: "input" | "select";
@@ -3402,39 +3409,57 @@ hint?(_: {}): any;
 });
 }, {}, string, ComponentProvideOptions, true, {}, any>;
 Paginate: DefineComponent<ExtractPropTypes<    {
+variant: {
+type: PropType<"standard" | "stats">;
+default: string;
+};
 currentPage: {
 type: PropType<number>;
 default: number;
 };
-listLength: {
+pageSize: {
 type: PropType<number>;
 default: number;
 };
-pageSize: {
+listLength: {
 type: PropType<number>;
 default: number;
 };
+isNextDisabled: {
+type: PropType<boolean>;
+default: boolean;
+};
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "set-page": (pageNumber: number) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<    {
+variant: {
+type: PropType<"standard" | "stats">;
+default: string;
+};
 currentPage: {
 type: PropType<number>;
 default: number;
 };
-listLength: {
+pageSize: {
 type: PropType<number>;
 default: number;
 };
-pageSize: {
+listLength: {
 type: PropType<number>;
 default: number;
 };
+isNextDisabled: {
+type: PropType<boolean>;
+default: boolean;
+};
 }>> & Readonly<{
 "onSet-page"?: ((pageNumber: number) => any) | undefined;
 }>, {
+variant: "standard" | "stats";
 currentPage: number;
-listLength: number;
 pageSize: number;
+listLength: number;
+isNextDisabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 LoadingManager: DefineComponent<ExtractPropTypes<    {
 emptyStateText: {

package/dist/Modals.js

@@ -1,10 +1,10 @@
 import { defineComponent as d, computed as u, openBlock as s, createBlock as r, Transition as m, withCtx as a, resolveDynamicComponent as p, mergeProps as _, toHandlers as f, createSlots as v, renderList as x, createElementVNode as M, createCommentVNode as L } from "vue";
-import b from "./useModals.js";
-import { _ as C } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const h = ["innerHTML"], k = /* @__PURE__ */ d({
+import C from "./useModals.js";
+import { _ as h } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const k = ["innerHTML"], H = /* @__PURE__ */ d({
   __name: "Modals",
-  setup(H) {
-    const t = b(), e = u(() => t.current);
+  setup(T) {
+    const t = C(), e = u(() => t.current);
     function c(n) {
       var o;
       return (o = n.options) != null && o.disableDefaultListeners ? {} : {
@@ -22,7 +22,7 @@ const h = ["innerHTML"], k = /* @__PURE__ */ d({
           x(e.value.slots, (l, i) => ({
             name: i,
             fn: a(() => [
-              M("div", { innerHTML: l }, null, 8, h)
+              M("div", { innerHTML: l }, null, 8, k)
             ])
           }))
         ]), 1040)) : L("", !0)
@@ -30,7 +30,7 @@ const h = ["innerHTML"], k = /* @__PURE__ */ d({
       _: 1
     }));
   }
-}), B = /* @__PURE__ */ C(k, [["__scopeId", "data-v-122b3b15"]]);
+}), B = /* @__PURE__ */ h(H, [["__scopeId", "data-v-cf8ad226"]]);
 export {
   B as default
 };

package/dist/Modals.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  /* @ts-ignore-file */\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <Transition name=\"modals\" mode=\"out-in\">\n    <component\n      :is=\"currentModal.component\"\n      v-if=\"currentModal\"\n      v-bind=\"currentModal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(currentModal)\"\n    >\n      <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </Transition>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","currentModal","computed","getListeners","modal","_a"],"mappings":";;;;;;AAME,UAAMA,IAASC,EAAU,GAEnBC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAIlD,aAASI,EAAaC,GAAkC;;AAClD,cAAAC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,CAAC,IAGH;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,EAAG,CAAA;AAAA,MACzC;AAAA,IAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Modals.js","sources":["../src/components/Modals/Modals.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, DeepReadonly } from 'vue';\n\n  import useModals, { type Modal } from '../../composables/useModals/useModals';\n\n  const modals = useModals();\n\n  const currentModal = computed(() => modals.current);\n\n  // Stupid TS version issues. Todo: remove ` | any` when TS/vite/vue deps are updated.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function getListeners(modal: DeepReadonly<Modal> | any) {\n    if (modal.options?.disableDefaultListeners) {\n      return {};\n    }\n\n    return {\n      dismiss: () => modals.close({ index: 0 }),\n      close: () => modals.close({ index: 0 }),\n      cancel: () => modals.close({ index: 0 }),\n    };\n  }\n</script>\n\n<template>\n  <Transition name=\"modals\" mode=\"out-in\">\n    <component\n      :is=\"currentModal.component\"\n      v-if=\"currentModal\"\n      v-bind=\"currentModal.attributes\"\n      :is-open=\"true\"\n      v-on=\"getListeners(currentModal)\"\n    >\n      <template v-for=\"(value, name) in currentModal.slots\" :key=\"name\" #[name]>\n        <!-- eslint-disable-next-line vue/no-v-html -->\n        <div v-html=\"value\" />\n      </template>\n    </component>\n  </Transition>\n</template>\n\n<style scoped>\n  .modals-enter-active,\n  .modals-leave-active {\n    --swing-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1); /* \"swing\" from the $transition sass map */\n    transition: opacity 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from,\n  .modals-leave-to {\n    opacity: 0;\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--position-center),\n  .modals-leave-active :deep(.stash-modal__dialog--position-center) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-center),\n  .modals-leave-to :deep(.stash-modal__dialog--position-center) {\n    transform: translateY(20px);\n  }\n\n  .modals-enter-active :deep(.stash-modal__dialog--is-drawer),\n  .modals-leave-active :deep(.stash-modal__dialog--is-drawer) {\n    transition: transform 165ms var(--swing-timing-function);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-left),\n  .modals-leave-to :deep(.stash-modal__dialog--position-left) {\n    transform: translateX(-50px);\n  }\n\n  .modals-enter-from :deep(.stash-modal__dialog--position-right),\n  .modals-leave-to :deep(.stash-modal__dialog--position-right) {\n    transform: translateX(50px);\n  }\n</style>\n"],"names":["modals","useModals","currentModal","computed","getListeners","modal","_a"],"mappings":";;;;;;AAKE,UAAMA,IAASC,EAAU,GAEnBC,IAAeC,EAAS,MAAMH,EAAO,OAAO;AAIlD,aAASI,EAAaC,GAAkC;;AAClD,cAAAC,IAAAD,EAAM,YAAN,QAAAC,EAAe,0BACV,CAAC,IAGH;AAAA,QACL,SAAS,MAAMN,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACxC,OAAO,MAAMA,EAAO,MAAM,EAAE,OAAO,GAAG;AAAA,QACtC,QAAQ,MAAMA,EAAO,MAAM,EAAE,OAAO,EAAG,CAAA;AAAA,MACzC;AAAA,IAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.js

@@ -1,94 +1,112 @@
-import { defineComponent as C, useCssModule as w, computed as y, openBlock as i, createElementBlock as l, createElementVNode as c, normalizeClass as o, unref as r, createVNode as g, Fragment as f, renderList as S, createCommentVNode as p, toDisplayString as M } from "vue";
+import { defineComponent as L, useCssModule as M, computed as N, toRef as u, openBlock as i, createElementBlock as l, createElementVNode as d, normalizeClass as o, unref as n, createVNode as _, toDisplayString as m, Fragment as v, renderList as D, createCommentVNode as p } from "vue";
+import { u as E } from "./usePaginationStats-d_q39naC.js";
+import { t as g } from "./locale.js";
 import h from "./Icon.js";
-import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const L = {
+import { _ as $ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const B = {
   class: "stash-paginate tw-flex tw-justify-center",
   "data-test": "stash-paginate"
-}, $ = ["onClick"], N = /* @__PURE__ */ C({
+}, V = ["aria-label", "disabled"], F = {
+  key: 0,
+  class: "tw-mx-3 tw-text-ice-900"
+}, I = ["onClick"], j = ["aria-label", "disabled"], R = /* @__PURE__ */ L({
   name: "ll-paginate",
   __name: "Paginate",
   props: {
     currentPage: { default: 1 },
     listLength: { default: 1 },
-    pageSize: { default: 50 }
+    pageSize: { default: 50 },
+    isNextDisabled: { type: Boolean, default: !1 },
+    variant: { default: "standard" }
   },
   emits: ["set-page"],
-  setup(_, { emit: m }) {
-    const t = _, v = m, n = w(), s = y(() => Math.ceil(t.listLength / t.pageSize));
-    function u(e) {
-      v("set-page", e);
+  setup(P, { emit: b }) {
+    const t = P, x = b, r = M(), a = N(() => Math.ceil(t.listLength / t.pageSize)), w = t.variant === "stats" ? E({
+      currentPage: u(() => t.currentPage),
+      pageSize: u(() => t.pageSize),
+      totalItems: u(() => t.listLength)
+    }) : null;
+    function c(e) {
+      x("set-page", e);
     }
-    function P() {
-      t.currentPage < s.value && u(t.currentPage + 1);
+    function k() {
+      t.currentPage < a.value && c(t.currentPage + 1);
     }
-    function b() {
-      t.currentPage > 1 && u(t.currentPage - 1);
+    function S() {
+      t.currentPage > 1 && c(t.currentPage - 1);
     }
-    function z(e) {
-      const d = Math.abs(t.currentPage - e);
-      return s.value < 10 || e === 1 || e === s.value || t.currentPage < 6 && e < 8 || s.value - t.currentPage < 5 && s.value - e < 7 || d < 3;
+    function y(e) {
+      const f = Math.abs(t.currentPage - e);
+      return a.value < 10 || e === 1 || e === a.value || t.currentPage < 6 && e < 8 || a.value - t.currentPage < 5 && a.value - e < 7 || f < 3;
     }
-    function k(e) {
-      return s.value > 9 && t.currentPage > 5 && e === 2;
+    function C(e) {
+      return a.value > 9 && t.currentPage > 5 && e === 2;
     }
-    function x(e) {
-      return s.value > 9 && s.value - t.currentPage > 4 && e === s.value - 1;
+    function z(e) {
+      return a.value > 9 && a.value - t.currentPage > 4 && e === a.value - 1;
     }
-    return (e, d) => (i(), l("div", L, [
-      c("ul", {
-        class: o(["stash-paginate__list tw-flex", r(n).pagination]),
+    return (e, f) => (i(), l("div", B, [
+      d("ul", {
+        class: o(["stash-paginate__list tw-flex tw-items-center", n(r).pagination]),
         "data-test": "stash-paginate|list"
       }, [
-        c("button", {
+        d("button", {
+          "aria-label": n(g)("ll.previous"),
           "data-test": "stash-paginate|prev-page",
-          class: o([r(n).prev, { [r(n)["is-disabled"]]: e.currentPage === 1 }]),
-          onClick: b
+          class: o(n(r).prev),
+          disabled: t.currentPage === 1,
+          onClick: S
         }, [
-          g(h, {
+          _(h, {
             size: "small",
             name: "chevron-left"
           })
-        ], 2),
-        (i(!0), l(f, null, S(s.value, (a) => (i(), l(f, null, [
-          k(a) ? (i(), l("button", {
-            key: `${a}-ellipsis`,
-            "data-test": "stash-paginate|first-ellipsis"
+        ], 10, V),
+        t.variant === "stats" ? (i(), l("span", F, m(n(g)("ll.pageStats", n(w))), 1)) : (i(!0), l(v, { key: 1 }, D(a.value, (s) => (i(), l(v, null, [
+          C(s) ? (i(), l("button", {
+            key: `${s}-ellipsis`,
+            class: "tw-pointer-events-none",
+            "data-test": "stash-paginate|first-ellipsis",
+            tabindex: "-1"
           }, " … ")) : p("", !0),
-          z(a) ? (i(), l("button", {
-            key: a,
+          y(s) ? (i(), l("button", {
+            key: s,
             "data-test": "stash-paginate|page-number",
-            class: o({ [r(n)["is-active"]]: e.currentPage === a }),
-            onClick: (I) => u(a)
-          }, M(a), 11, $)) : p("", !0),
-          x(a) ? (i(), l("button", {
-            key: `${a}-ellipsis`,
-            "data-test": "stash-paginate|last-ellipsis"
+            class: o({ [n(r)["is-active"]]: t.currentPage === s }),
+            onClick: (K) => c(s)
+          }, m(s), 11, I)) : p("", !0),
+          z(s) ? (i(), l("button", {
+            key: `${s}-ellipsis`,
+            class: "tw-pointer-events-none",
+            "data-test": "stash-paginate|last-ellipsis",
+            tabindex: "-1"
           }, " … ")) : p("", !0)
         ], 64))), 256)),
-        c("button", {
+        d("button", {
+          "aria-label": n(g)("ll.next"),
           "data-test": "stash-paginate|next-page",
-          class: o([r(n).next, { [r(n)["is-disabled"]]: e.currentPage === s.value }]),
-          onClick: P
+          class: o(n(r).next),
+          disabled: t.isNextDisabled || t.currentPage === a.value,
+          onClick: k
         }, [
-          g(h, {
+          _(h, {
             size: "small",
             class: "tw-rotate-180",
             name: "chevron-left"
           })
-        ], 2)
+        ], 10, j)
       ], 2)
     ]));
   }
-}), V = "_pagination_14zhb_2", B = "_prev_14zhb_20", D = "_next_14zhb_25", F = {
-  pagination: V,
-  prev: B,
-  next: D,
-  "is-active": "_is-active_14zhb_38",
-  "is-disabled": "_is-disabled_14zhb_51"
-}, j = {
-  $style: F
-}, H = /* @__PURE__ */ E(N, [["__cssModules", j]]);
+}), q = "_pagination_104d8_2", A = "_prev_104d8_20", G = "_next_104d8_25", H = {
+  pagination: q,
+  prev: A,
+  next: G,
+  "is-active": "_is-active_104d8_38"
+}, J = {
+  $style: H
+}, X = /* @__PURE__ */ $(R, [["__cssModules", J]]);
 export {
-  H as default
+  X as default
 };
 //# sourceMappingURL=Paginate.js.map

package/dist/Paginate.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, useCssModule } from 'vue';\n\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pages = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pages.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pages.value < 10 ||\n      page === 1 ||\n      page === pages.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pages.value - props.currentPage < 5 && pages.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pages.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pages.value > 9 && pages.value - props.currentPage > 4 && page === pages.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul class=\"stash-paginate__list tw-flex\" :class=\"classes.pagination\" data-test=\"stash-paginate|list\">\n      <button\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"[classes.prev, { [classes['is-disabled']]: currentPage === 1 }]\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <template v-for=\"page in pages\">\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          data-test=\"stash-paginate|first-ellipsis\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button v-if=\"shouldShowLastEllipsis(page)\" :key=\"`${page}-ellipsis`\" data-test=\"stash-paginate|last-ellipsis\">\n          &#x2026;\n        </button>\n      </template>\n      <button\n        data-test=\"stash-paginate|next-page\"\n        :class=\"[classes.next, { [classes['is-disabled']]: currentPage === pages }]\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:hover,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pages","computed","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;AAwBE,UAAMA,IAAQC,GAMRC,IAAOC,GAOPC,IAAUC,EAAa,GAEvBC,IAAQC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC;AAKzE,aAASQ,EAAWC,GAAqB;AACvC,MAAAP,EAAK,YAAYO,CAAW;AAAA,IAAA;AAM9B,aAASC,IAAO;AACV,MAAAV,EAAM,cAAcM,EAAM,SACjBE,EAAAR,EAAM,cAAc,CAAC;AAAA,IAClC;AAMF,aAASW,IAAO;AACV,MAAAX,EAAM,cAAc,KACXQ,EAAAR,EAAM,cAAc,CAAC;AAAA,IAClC;AAOF,aAASY,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAId,EAAM,cAAca,CAAI;AAGhD,aAAAP,EAAM,QAAQ,MACdO,MAAS,KACTA,MAASP,EAAM,SACdN,EAAM,cAAc,KAAKa,IAAO,KAChCP,EAAM,QAAQN,EAAM,cAAc,KAAKM,EAAM,QAAQO,IAAO,KAC7DC,IAAW;AAAA,IAKN;AAOT,aAASC,EAAwBF,GAAuB;AACtD,aAAOP,EAAM,QAAQ,KAAKN,EAAM,cAAc,KAAKa,MAAS;AAAA,IAAA;AAO9D,aAASG,EAAuBH,GAAuB;AAC9C,aAAAP,EAAM,QAAQ,KAAKA,EAAM,QAAQN,EAAM,cAAc,KAAKa,MAASP,EAAM,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Paginate.js","sources":["../src/components/Paginate/Paginate.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, toRef, useCssModule } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n\n  defineOptions({\n    name: 'll-paginate',\n  });\n\n  export interface PaginateProps {\n    /**\n     * Current page number\n     */\n    currentPage?: number;\n    /**\n     * Total number of items in list\n     */\n    listLength?: number;\n    /**\n     * Number of items per page\n     */\n    pageSize?: number;\n    /*\n     * Optional override for the next button disabled state\n     */\n    isNextDisabled?: boolean;\n    /**\n     * Variant of the pagination component\n     */\n    variant?: 'standard' | 'stats';\n  }\n\n  const props = withDefaults(defineProps<PaginateProps>(), {\n    currentPage: 1,\n    listLength: 1,\n    pageSize: 50,\n    isNextDisabled: false,\n    variant: 'standard',\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the page number changes.\n     */\n    (e: 'set-page', pageNumber: number): void;\n  }>();\n\n  const classes = useCssModule();\n\n  const pageCount = computed(() => Math.ceil(props.listLength / props.pageSize));\n\n  const pageStats =\n    props.variant === 'stats'\n      ? usePaginationStats({\n          currentPage: toRef(() => props.currentPage),\n          pageSize: toRef(() => props.pageSize),\n          totalItems: toRef(() => props.listLength),\n        })\n      : null;\n\n  /**\n   * Emits current page to list view.\n   */\n  function updatePage(currentPage: number) {\n    emit('set-page', currentPage);\n  }\n\n  /**\n   * Sets current page to next page\n   */\n  function next() {\n    if (props.currentPage < pageCount.value) {\n      updatePage(props.currentPage + 1);\n    }\n  }\n\n  /**\n   * Sets current page to previous page\n   */\n  function prev() {\n    if (props.currentPage > 1) {\n      updatePage(props.currentPage - 1);\n    }\n  }\n\n  /**\n   * Determines whether to show page\n   * @returns {boolean} - should show page in pagination component\n   */\n  function shouldShowPage(page: number): boolean {\n    const pageDiff = Math.abs(props.currentPage - page);\n\n    if (\n      pageCount.value < 10 ||\n      page === 1 ||\n      page === pageCount.value ||\n      (props.currentPage < 6 && page < 8) ||\n      (pageCount.value - props.currentPage < 5 && pageCount.value - page < 7) ||\n      pageDiff < 3\n    ) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether to show the leading ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowFirstEllipsis(page: number): boolean {\n    return pageCount.value > 9 && props.currentPage > 5 && page === 2;\n  }\n\n  /**\n   * Determines whether to show the trailing ellipsis\n   * @returns {boolean} should show or not\n   */\n  function shouldShowLastEllipsis(page: number): boolean {\n    return pageCount.value > 9 && pageCount.value - props.currentPage > 4 && page === pageCount.value - 1;\n  }\n</script>\n\n<template>\n  <div class=\"stash-paginate tw-flex tw-justify-center\" data-test=\"stash-paginate\">\n    <ul\n      class=\"stash-paginate__list tw-flex tw-items-center\"\n      :class=\"classes.pagination\"\n      data-test=\"stash-paginate|list\"\n    >\n      <button\n        :aria-label=\"t('ll.previous')\"\n        data-test=\"stash-paginate|prev-page\"\n        :class=\"classes.prev\"\n        :disabled=\"props.currentPage === 1\"\n        @click=\"prev\"\n      >\n        <Icon size=\"small\" name=\"chevron-left\" />\n      </button>\n      <span v-if=\"props.variant === 'stats'\" class=\"tw-mx-3 tw-text-ice-900\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-for=\"page in pageCount\" v-else>\n        <button\n          v-if=\"shouldShowFirstEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|first-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n        <button\n          v-if=\"shouldShowPage(page)\"\n          :key=\"page\"\n          data-test=\"stash-paginate|page-number\"\n          :class=\"{ [classes['is-active']]: props.currentPage === page }\"\n          @click=\"updatePage(page)\"\n        >\n          {{ page }}\n        </button>\n        <button\n          v-if=\"shouldShowLastEllipsis(page)\"\n          :key=\"`${page}-ellipsis`\"\n          class=\"tw-pointer-events-none\"\n          data-test=\"stash-paginate|last-ellipsis\"\n          tabindex=\"-1\"\n        >\n          &#x2026;\n        </button>\n      </template>\n      <button\n        :aria-label=\"t('ll.next')\"\n        data-test=\"stash-paginate|next-page\"\n        :class=\"classes.next\"\n        :disabled=\"props.isNextDisabled || props.currentPage === pageCount\"\n        @click=\"next\"\n      >\n        <Icon size=\"small\" class=\"tw-rotate-180\" name=\"chevron-left\" />\n      </button>\n    </ul>\n  </div>\n</template>\n\n<style module>\n  .pagination {\n    /* Todo: We shouldn't really be making assumptions about the outer spacing of the pagination component */\n    margin-top: theme('spacing.12');\n    z-index: 0;\n\n    a,\n    button {\n      @apply tw-border tw-border-solid tw-border-ice-200;\n      align-items: center;\n      background-color: theme('colors.white');\n      color: var(--color-blue-500);\n      cursor: pointer;\n      display: flex;\n      height: theme('height.input');\n      justify-content: center;\n      margin: 0 0 0 -1px;\n      width: theme('height.input');\n\n      &.prev {\n        border-bottom-left-radius: theme('borderRadius.DEFAULT');\n        border-top-left-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &.next {\n        border-bottom-right-radius: theme('borderRadius.DEFAULT');\n        border-top-right-radius: theme('borderRadius.DEFAULT');\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &.is-active {\n        background-color: var(--color-blue-500);\n        color: theme('colors.white');\n        pointer-events: none;\n        z-index: theme('zIndex.control');\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.5;\n      }\n\n      &:not(:disabled):hover,\n      &:not(:disabled):focus,\n      &.is-active {\n        @apply tw-border tw-border-solid tw-border-blue-500;\n        position: relative;\n      }\n\n      &.is-active:focus {\n        @apply tw-bg-blue-700 tw-border-blue-700;\n      }\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","classes","useCssModule","pageCount","computed","pageStats","usePaginationStats","toRef","updatePage","currentPage","next","prev","shouldShowPage","page","pageDiff","shouldShowFirstEllipsis","shouldShowLastEllipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCE,UAAMA,IAAQC,GAQRC,IAAOC,GAOPC,IAAUC,EAAa,GAEvBC,IAAYC,EAAS,MAAM,KAAK,KAAKP,EAAM,aAAaA,EAAM,QAAQ,CAAC,GAEvEQ,IACJR,EAAM,YAAY,UACdS,EAAmB;AAAA,MACjB,aAAaC,EAAM,MAAMV,EAAM,WAAW;AAAA,MAC1C,UAAUU,EAAM,MAAMV,EAAM,QAAQ;AAAA,MACpC,YAAYU,EAAM,MAAMV,EAAM,UAAU;AAAA,IACzC,CAAA,IACD;AAKN,aAASW,EAAWC,GAAqB;AACvC,MAAAV,EAAK,YAAYU,CAAW;AAAA,IAAA;AAM9B,aAASC,IAAO;AACV,MAAAb,EAAM,cAAcM,EAAU,SACrBK,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAMF,aAASc,IAAO;AACV,MAAAd,EAAM,cAAc,KACXW,EAAAX,EAAM,cAAc,CAAC;AAAA,IAClC;AAOF,aAASe,EAAeC,GAAuB;AAC7C,YAAMC,IAAW,KAAK,IAAIjB,EAAM,cAAcgB,CAAI;AAGhD,aAAAV,EAAU,QAAQ,MAClBU,MAAS,KACTA,MAASV,EAAU,SAClBN,EAAM,cAAc,KAAKgB,IAAO,KAChCV,EAAU,QAAQN,EAAM,cAAc,KAAKM,EAAU,QAAQU,IAAO,KACrEC,IAAW;AAAA,IAKN;AAOT,aAASC,EAAwBF,GAAuB;AACtD,aAAOV,EAAU,QAAQ,KAAKN,EAAM,cAAc,KAAKgB,MAAS;AAAA,IAAA;AAOlE,aAASG,EAAuBH,GAAuB;AAC9C,aAAAV,EAAU,QAAQ,KAAKA,EAAU,QAAQN,EAAM,cAAc,KAAKgB,MAASV,EAAU,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Paginate.vue.d.ts

@@ -30,18 +30,24 @@ declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VL
 currentPage: number;
 listLength: number;
 pageSize: number;
+isNextDisabled: boolean;
+variant: string;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "set-page": (pageNumber: number) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<PaginateProps>, {
 currentPage: number;
 listLength: number;
 pageSize: number;
+isNextDisabled: boolean;
+variant: string;
 }>>> & Readonly<{
 "onSet-page"?: ((pageNumber: number) => any) | undefined;
 }>, {
+variant: "standard" | "stats";
 currentPage: number;
-listLength: number;
 pageSize: number;
+listLength: number;
+isNextDisabled: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
@@ -58,6 +64,11 @@ export declare interface PaginateProps {
      * Number of items per page
      */
     pageSize?: number;
+    isNextDisabled?: boolean;
+    /**
+     * Variant of the pagination component
+     */
+    variant?: 'standard' | 'stats';
 }
 
 export { }

package/dist/QuickAction.vue.d.ts

@@ -22,6 +22,11 @@ export default _default;
 
 declare type IconName = (typeof iconNames)[number];
 
+/**
+ * To add a new icon, follow these steps:
+ *
+ * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
+ */
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
 export declare interface QuickActionProps {

package/dist/SearchBar.js

@@ -91,7 +91,7 @@ const N = /* @__PURE__ */ C({
       } : void 0
     ]), 1032, ["modelValue", "class", "label", "placeholder", "hint-text"]));
   }
-}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-43ef4e0f"]]);
+}), q = /* @__PURE__ */ w(N, [["__scopeId", "data-v-005a7e1b"]]);
 export {
   q 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 { computed, ref, 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 = 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 slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\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=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\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=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : '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 scoped>\n  .stash-search-bar :deep(input) {\n    text-overflow: ellipsis;\n  }\n\n  .stash-search-bar--value :deep(input) {\n    padding-right: 72px;\n  }\n\n  .stash-search-bar :deep(input):hover {\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .stash-search-bar :deep(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n    overflow: visible;\n  }\n\n  .stash-search-bar__clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    background: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: none;\n\n      & svg {\n        border-radius: theme(borderRadius.DEFAULT);\n\n        @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n      }\n    }\n  }\n\n  .stash-search-bar__clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .stash-search-bar__search-button {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:disabled {\n      border-color: var(--color-ice-500);\n    }\n\n    &:hover {\n      background-color: var(--color-blue-600);\n    }\n\n    &:active {\n      background-color: var(--color-blue-700);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border: 1px solid var(--color-blue-900);\n      /* Simulating a bigger border so the design does not break */\n      box-shadow: inset 0 0 0 1px var(--color-blue-900), 0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAS,GACjBC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAgC,GAEhDE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AACd,MAAAX,EAAM,aAAaA,EAAM,aAGxBE,EAAA,UAAUI,EAAW,KAAK;AAAA,IAAA;AAGjC,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfW,KAAAC,IAAAN,EAAA,UAAA,gBAAAM,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAAM;AAGtC,aAASE,IAAe;AACjB,MAAAb,EAAA,sBAAsBI,EAAW,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SearchBar.js","sources":["../src/components/SearchBar/SearchBar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, ref, 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 = 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 slots = useSlots();\n  const searchTerm = ref(props.modelValue);\n  const stashInputRef = ref<InstanceType<typeof Input>>();\n\n  const searchTabIndex = computed(() => (searchTerm.value ? 0 : -1));\n\n  function onSearch() {\n    if (props.isLoading || props.isWorking) {\n      return;\n    }\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=\"[{ 'stash-search-bar--value': !!searchTerm }]\"\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=\"onSearch\"\n  >\n    <template #append>\n      <Button\n        v-if=\"searchTerm\"\n        class=\"stash-search-bar__clear-button\"\n        :disabled=\"props.isLoading\"\n        data-test=\"stash-search-bar|clear-button\"\n        @click=\"clearSearchTerm\"\n        @keyup.enter=\"clearSearchTerm\"\n        @keyup.space=\"clearSearchTerm\"\n      >\n        <Icon name=\"close\" />\n      </Button>\n      <Button\n        :tabindex=\"searchTabIndex\"\n        data-test=\"stash-search-bar|search-button\"\n        :disabled=\"props.isLoading\"\n        class=\"stash-search-bar__search-button\"\n        @click=\"onSearch\"\n        @keyup.enter=\"onSearch\"\n        @keyup.space=\"onSearch\"\n      >\n        <Icon :class=\"{ 'tw-animate-spin': props.isWorking }\" :name=\"props.isWorking ? 'loading-empty' : '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 scoped>\n  .stash-search-bar :deep(input) {\n    text-overflow: ellipsis;\n  }\n\n  .stash-search-bar--value :deep(input) {\n    padding-right: 72px;\n  }\n\n  .stash-search-bar :deep(input):hover {\n    border: 1px solid var(--color-blue-500);\n  }\n\n  .stash-search-bar :deep(.stash-input-append) {\n    display: flex;\n    justify-content: flex-end;\n    width: 72px; /* double the the default width of 36px */\n    overflow: visible;\n  }\n\n  .stash-search-bar__clear-button {\n    color: var(--color-ice-700);\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    background: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus-visible {\n      outline: none;\n      box-shadow: none;\n\n      & svg {\n        border-radius: theme(borderRadius.DEFAULT);\n\n        @apply tw-ring-4 tw-ring-blue-500 tw-ring-opacity-15;\n      }\n    }\n  }\n\n  .stash-search-bar__clear-button:disabled {\n    color: var(--color-ice-500);\n    cursor: default;\n  }\n\n  .stash-search-bar__search-button {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n    height: theme('spacing.9');\n    min-width: theme('spacing.9');\n    width: theme('spacing.9');\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    &:focus {\n      box-shadow: none;\n    }\n\n    &:disabled {\n      border-color: var(--color-ice-500);\n    }\n\n    &:hover {\n      background-color: var(--color-blue-600);\n    }\n\n    &:active {\n      background-color: var(--color-blue-700);\n    }\n\n    &:focus-visible {\n      outline: none;\n      border: 1px solid var(--color-blue-900);\n      /* Simulating a bigger border so the design does not break */\n      box-shadow:\n        inset 0 0 0 1px var(--color-blue-900),\n        0 0 0 4px rgb(0 114 240 / 15%); /* Unfortunatelly, we have to use RGBA to make the shadow transparent, this is blue-500 */\n    }\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","searchTerm","ref","stashInputRef","searchTabIndex","computed","onSearch","clearSearchTerm","_b","_a","handleChange"],"mappings":";;;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GASRC,IAAOC,GAYPC,IAAQC,EAAS,GACjBC,IAAaC,EAAIP,EAAM,UAAU,GACjCQ,IAAgBD,EAAgC,GAEhDE,IAAiBC,EAAS,MAAOJ,EAAW,QAAQ,IAAI,EAAG;AAEjE,aAASK,IAAW;AACd,MAAAX,EAAM,aAAaA,EAAM,aAGxBE,EAAA,UAAUI,EAAW,KAAK;AAAA,IAAA;AAGjC,aAASM,IAAkB;;AACzB,MAAAN,EAAW,QAAQ,IACnBJ,EAAK,UAAU,EAAE,GACjBA,EAAK,sBAAsB,EAAE,IAEfW,KAAAC,IAAAN,EAAA,UAAA,gBAAAM,EAAO,YAAP,QAAAD,EAAgB;AAAA,IAAM;AAGtC,aAASE,IAAe;AACjB,MAAAb,EAAA,sBAAsBI,EAAW,KAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select.js

@@ -179,12 +179,12 @@ const tt = { class: "tw-flex tw-h-input tw-items-center tw-text-sm" }, lt = ["id
     }, be = (e) => {
       if (e.keyCode === E.ESCAPE)
         b();
-      else if (e.keyCode === E.DOWN && v.value < C.value.length - 1)
-        u.value && v.value++;
+      else if (e.keyCode === E.DOWN && v.value < C.value.length - 1 && u.value)
+        v.value++;
       else if (e.keyCode === E.UP && v.value > 0)
         u.value && v.value--, x.value && X.value && v.value === 0 && (x.value.scrollTop -= 100);
-      else if (e.keyCode === E.ENTER && v.value !== -1)
-        u.value && D(C.value[v.value]);
+      else if (e.keyCode === E.ENTER && v.value !== -1 && u.value)
+        D(C.value[v.value]);
       else
         return;
       e.preventDefault(), ge(e);
@@ -473,7 +473,7 @@ const tt = { class: "tw-flex tw-h-input tw-items-center tw-text-sm" }, lt = ["id
       } : void 0
     ]), 1040, ["class", "error-text", "hint-text"]));
   }
-}), $t = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-8a707e00"]]);
+}), $t = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-514b8e8b"]]);
 export {
   $t as default
 };