@leaflink/stash 52.0.3 → 53.0.0

package/dist/DataViewSortButton.js

@@ -1,4 +1,4 @@
-import { defineComponent as y, useCssModule as D, inject as S, createBlock as n, createCommentVNode as l, openBlock as s, withCtx as o, createElementVNode as c, createElementBlock as f, Fragment as k, renderList as V, unref as t, normalizeClass as b, createVNode as d, createTextVNode as i, toDisplayString as u } from "vue";
+import { defineComponent as y, useCssModule as D, inject as S, createBlock as n, createCommentVNode as l, openBlock as s, withCtx as o, createElementVNode as c, createElementBlock as k, Fragment as w, renderList as V, unref as t, normalizeClass as b, createVNode as d, createTextVNode as i, toDisplayString as u } from "vue";
 import { t as B } from "./locale.js";
 import _ from "./Button.js";
 import "lodash-es/cloneDeep";
@@ -16,11 +16,11 @@ const v = {
     sortOptions: { default: () => [] }
   },
   setup(x) {
-    const m = x, w = D(), { currentSortId: r, currentSortOrder: a, updateCurrentSort: p } = S(
+    const m = x, p = D(), { currentSortId: r, currentSortOrder: a, updateCurrentSort: f } = S(
       C.key,
       C.defaults
     );
-    return (q, F) => m.sortOptions.length ? (s(), n(E, {
+    return (F, J) => m.sortOptions.length ? (s(), n(E, {
       key: 0,
       align: "left",
       class: "stash-data-view-sort-button",
@@ -30,7 +30,7 @@ const v = {
         d(_, {
           "icon-label": "",
           "aria-expanded": e.toString(),
-          class: "tw-text-blue-500",
+          class: "text-blue-500",
           "data-test": "stash-data-view-sort-button|sort-menu-button",
           onClick: g
         }, {
@@ -50,48 +50,48 @@ const v = {
       ]),
       default: o(() => [
         c("ul", v, [
-          (s(!0), f(k, null, V(m.sortOptions, (e) => (s(), f(k, {
+          (s(!0), k(w, null, V(m.sortOptions, (e) => (s(), k(w, {
             key: e.id
           }, [
             c("li", {
-              class: b(["dropdown__item tw-rounded", [
-                t(w).dropdown__item,
-                { "tw-bg-blue-100 tw-text-ice-700": e.id === t(r) && t(a) === "asc" }
+              class: b(["dropdown__item rounded", [
+                t(p).dropdown__item,
+                { "bg-blue-100 text-ice-700": e.id === t(r) && t(a) === "asc" }
               ]]),
-              onClick: () => t(p)(e.id, { sortOrder: "asc", shouldEmit: !0 })
+              onClick: () => t(f)(e.id, { sortOrder: "asc", shouldEmit: !0 })
             }, [
               d(_, {
                 inline: "",
-                class: "tw-h-9"
+                class: "h-9"
               }, {
                 default: o(() => [
                   i(u(e.labelAsc) + " ", 1),
                   e.id === t(r) && t(a) === "asc" ? (s(), n(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-ml-auto tw-text-blue-500"
+                    class: "ml-auto text-blue-500"
                   })) : l("", !0)
                 ]),
                 _: 2
               }, 1024)
             ], 10, A),
             c("li", {
-              class: b(["dropdown__item tw-rounded", [
-                t(w).dropdown__item,
-                { "tw-bg-blue-100 tw-text-ice-700": e.id === t(r) && t(a) === "desc" }
+              class: b(["dropdown__item rounded", [
+                t(p).dropdown__item,
+                { "bg-blue-100 text-ice-700": e.id === t(r) && t(a) === "desc" }
               ]]),
-              onClick: () => t(p)(e.id, { sortOrder: "desc", shouldEmit: !0 })
+              onClick: () => t(f)(e.id, { sortOrder: "desc", shouldEmit: !0 })
             }, [
               d(_, {
                 inline: "",
-                class: "tw-h-9"
+                class: "h-9"
               }, {
                 default: o(() => [
                   i(u(e.labelDesc) + " ", 1),
                   e.id === t(r) && t(a) === "desc" ? (s(), n(h, {
                     key: 0,
                     name: "check",
-                    class: "tw-ml-auto tw-text-blue-500"
+                    class: "ml-auto text-blue-500"
                   })) : l("", !0)
                 ]),
                 _: 2
@@ -103,11 +103,11 @@ const v = {
       _: 1
     })) : l("", !0);
   }
-}), z = "_dropdown__item_ozq17_2", L = {
-  dropdown__item: z
-}, j = {
-  $style: L
-}, U = /* @__PURE__ */ N(T, [["__cssModules", j]]);
+}), L = "_dropdown__item_s4w8l_3", j = {
+  dropdown__item: L
+}, z = {
+  $style: j
+}, U = /* @__PURE__ */ N(T, [["__cssModules", z]]);
 export {
   U as default
 };

package/dist/DataViewSortButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n  const classes = useCssModule();\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"tw-text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item tw-rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'tw-bg-blue-100 tw-text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'asc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item tw-rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'tw-bg-blue-100 tw-text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'desc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"tw-h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"tw-ml-auto tw-text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style module>\n  .dropdown__item > button {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DataViewSortButton.js","sources":["../src/components/DataViewSortButton/DataViewSortButton.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { inject, useCssModule } from 'vue';\n\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Dropdown from '../Dropdown/Dropdown.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import { SortOption } from './DataViewSortButton.types';\n\n  export interface DataViewToolbarProps {\n    /**\n     * An array of sort options to display in the dropdown.\n     */\n    sortOptions?: SortOption[];\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    sortOptions: () => [],\n  });\n  const classes = useCssModule();\n\n  const { currentSortId, currentSortOrder, updateCurrentSort } = inject(\n    DATA_VIEW_INJECTION.key,\n    DATA_VIEW_INJECTION.defaults,\n  );\n</script>\n\n<template>\n  <Dropdown\n    v-if=\"props.sortOptions.length\"\n    align=\"left\"\n    class=\"stash-data-view-sort-button\"\n    data-test=\"stash-data-view-sort-button\"\n  >\n    <template #toggle=\"{ isActive, toggle }\">\n      <Button\n        icon-label\n        :aria-expanded=\"isActive.toString()\"\n        class=\"text-blue-500\"\n        data-test=\"stash-data-view-sort-button|sort-menu-button\"\n        @click=\"toggle\"\n      >\n        <IconLabel icon=\"sort\" stacked>\n          {{ t('ll.sort') }}\n        </IconLabel>\n      </Button>\n    </template>\n    <ul class=\"dropdown__list\" data-test=\"stash-data-view-sort-button|sort-menu\">\n      <template v-for=\"sortOption in props.sortOptions\" :key=\"sortOption.id\">\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'asc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'asc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelAsc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'asc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n        <li\n          class=\"dropdown__item rounded\"\n          :class=\"[\n            classes.dropdown__item,\n            { 'bg-blue-100 text-ice-700': sortOption.id === currentSortId && currentSortOrder === 'desc' },\n          ]\"\n          @click=\"() => updateCurrentSort(sortOption.id, { sortOrder: 'desc', shouldEmit: true })\"\n        >\n          <Button inline class=\"h-9\">\n            {{ sortOption.labelDesc }}\n            <Icon\n              v-if=\"sortOption.id === currentSortId && currentSortOrder === 'desc'\"\n              name=\"check\"\n              class=\"ml-auto text-blue-500\"\n            />\n          </Button>\n        </li>\n      </template>\n    </ul>\n  </Dropdown>\n</template>\n\n<style module>\n  @layer utilities {\n    .dropdown__item > button {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n</style>\n"],"names":["props","__props","classes","useCssModule","currentSortId","currentSortOrder","updateCurrentSort","inject","DATA_VIEW_INJECTION"],"mappings":";;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.js

@@ -1,4 +1,4 @@
-import { ref as J, onMounted as H, nextTick as k, onBeforeUnmount as Q, watch as D, defineComponent as X, useTemplateRef as M, inject as Y, useCssModule as Z, computed as ee, onBeforeMount as te, createElementBlock as w, openBlock as l, normalizeClass as P, unref as e, createElementVNode as oe, createCommentVNode as x, createBlock as L, withCtx as r, renderSlot as R, createVNode as b, createTextVNode as ae, toDisplayString as F, Fragment as se } from "vue";
+import { ref as J, onMounted as H, nextTick as w, onBeforeUnmount as Q, watch as D, defineComponent as X, useTemplateRef as M, inject as Y, useCssModule as Z, computed as ee, onBeforeMount as te, createElementBlock as b, openBlock as l, normalizeClass as P, unref as e, createElementVNode as oe, createCommentVNode as x, createBlock as L, withCtx as r, renderSlot as R, createVNode as v, createTextVNode as ae, toDisplayString as F, Fragment as se } from "vue";
 import { u as le } from "./usePaginationStats-d_q39naC.js";
 import { t as y } from "./locale.js";
 import O from "./Button.js";
@@ -13,20 +13,20 @@ function ce(z) {
   const { toolbarEl: n, paginationEl: t, checkboxEl: _, isPaginationEnabled: d, isSelectable: c, isEmpty: u } = z, p = J(null);
   let s = null, o = null;
   const a = () => {
-    var h;
+    var k;
     if (!n.value) return;
     const i = n.value.getBoundingClientRect().width;
-    let v = 0, g = 0;
-    d != null && d.value && t.value && (v = t.value.getBoundingClientRect().width), c != null && c.value && !(u != null && u.value) && ((h = _.value) != null && h.$el) && (g = _.value.$el.getBoundingClientRect().width);
-    const S = window.getComputedStyle(n.value), E = parseFloat(S.paddingLeft) || 0, $ = parseFloat(S.paddingRight) || 0, T = Math.max(0, i - v - g - E - $);
+    let g = 0, h = 0;
+    d != null && d.value && t.value && (g = t.value.getBoundingClientRect().width), c != null && c.value && !(u != null && u.value) && ((k = _.value) != null && k.$el) && (h = _.value.$el.getBoundingClientRect().width);
+    const S = window.getComputedStyle(n.value), E = parseFloat(S.paddingLeft) || 0, $ = parseFloat(S.paddingRight) || 0, T = Math.max(0, i - g - h - E - $);
     p.value = `${T}px`;
   }, C = () => {
     n.value && (s = new ResizeObserver(() => {
-      k(() => {
+      w(() => {
         a();
       });
     }), s.observe(n.value), t.value && (o = new ResizeObserver(() => {
-      k(() => {
+      w(() => {
         a();
       });
     }), o.observe(t.value)));
@@ -34,18 +34,18 @@ function ce(z) {
     s && (s.disconnect(), s = null), o && (o.disconnect(), o = null);
   };
   return H(() => {
-    k(() => {
+    w(() => {
       a(), C();
     });
   }), Q(() => {
     B();
   }), D([d, c, u], () => {
-    k(() => {
+    w(() => {
       a();
     });
   }), D(t, (i) => {
     o && (o.disconnect(), o = null), i && (o = new ResizeObserver(() => {
-      k(() => {
+      w(() => {
         a();
       });
     }), o.observe(i));
@@ -54,17 +54,17 @@ function ce(z) {
     updateActionsWidth: a
   };
 }
-const ue = { class: "tw-flex tw-place-items-center" }, pe = {
+const ue = { class: "flex place-items-center" }, pe = {
   key: 0,
   ref: "paginationEl",
-  class: "stash-data-view-toolbar__pagination tw-flex tw-shrink-0 tw-items-center"
+  class: "stash-data-view-toolbar__pagination flex shrink-0 items-center"
 }, me = {
   key: 0,
-  class: "tw-mx-1.5"
+  class: "mx-1.5"
 }, fe = {
   key: 0,
-  class: "tw-mx-1.5 tw-hidden md:tw-block"
-}, we = /* @__PURE__ */ X({
+  class: "mx-1.5 hidden md:block"
+}, be = /* @__PURE__ */ X({
   __name: "DataViewToolbar",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -84,42 +84,42 @@ const ue = { class: "tw-flex tw-place-items-center" }, pe = {
       hasToolbar: C,
       isPaginateNextDisabled: B,
       isPaginationEnabled: i,
-      isSelectable: v,
-      pageCount: g,
+      isSelectable: g,
+      pageCount: h,
       pageSize: S,
       totalDataCount: E,
       goPrevPage: $,
       goNextPage: T,
-      isEmpty: h,
+      isEmpty: k,
       isLoading: V
     } = Y(j.key, j.defaults), A = J(0), K = Z(), { actionsWidth: q } = ce({
       toolbarEl: d,
       paginationEl: c,
       checkboxEl: u,
       isPaginationEnabled: i,
-      isSelectable: v,
-      isEmpty: h
+      isSelectable: g,
+      isEmpty: k
     }), W = ee(() => t.radius ? t.radius : p.value ? "none" : s.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), G = le({ currentPage: a, pageSize: S, totalItems: E });
     function N() {
       _("select"), A.value++;
     }
     return te(() => {
       C && (C.value = !0);
-    }), (m, f) => (l(), w("div", {
+    }), (m, f) => (l(), b("div", {
       ref: "toolbarEl",
-      class: P(["stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow", {
-        "tw-border-t tw-border-ice-200": e(p),
-        "tw-rounded-tr": W.value === "rounded-top-right",
-        "tw-rounded": W.value === "rounded",
-        "tw-rounded-t": W.value === "rounded-top",
-        "tw-mb-3": e(s) !== "table" && !e(p),
-        "tw-px-3": e(o) === "compact",
-        "tw-px-3 lg:tw-px-6": e(o) === "comfortable"
+      class: P(["stash-data-view-toolbar flex min-h-15 items-center justify-between bg-white py-1.5 shadow", {
+        "border-t border-ice-200": e(p),
+        "rounded-tr": W.value === "rounded-top-right",
+        rounded: W.value === "rounded",
+        "rounded-t": W.value === "rounded-top",
+        "mb-3": e(s) !== "table" && !e(p),
+        "px-3": e(o) === "compact",
+        "px-3 lg:px-6": e(o) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
       oe("div", ue, [
-        e(v) && !e(h) ? (l(), L(ne, {
+        e(g) && !e(k) ? (l(), L(ne, {
           ref: "checkboxEl",
           key: A.value,
           checked: t.allRowsSelected,
@@ -133,17 +133,17 @@ const ue = { class: "tw-flex tw-place-items-center" }, pe = {
           key: 1,
           "more-button-align": "together",
           width: e(q) || void 0,
-          "actions-container-class": "tw-flex tw-items-center tw-gap-x-2 lg:tw-mr-6 lg:tw-gap-x-6"
+          "actions-container-class": "flex items-center gap-x-2 lg:mr-6 lg:gap-x-6"
         }, {
           toggle: r(({ toggle: I }) => [
-            b(O, {
+            v(O, {
               "icon-label": "",
-              class: "tw-text-blue-500",
+              class: "text-blue-500",
               "data-test": "stash-data-view-sort-button|sort-menu-button",
               onClick: I
             }, {
               default: r(() => [
-                b(ie, {
+                v(ie, {
                   icon: "ellipsis",
                   stacked: ""
                 }, {
@@ -163,47 +163,47 @@ const ue = { class: "tw-flex tw-place-items-center" }, pe = {
             R(m.$slots, "default")
           ]),
           _: 3
-        }, 8, ["width"])) : (l(), w("div", {
+        }, 8, ["width"])) : (l(), b("div", {
           key: 2,
-          class: P([e(K).actions, "stash-data-view-toolbar__actions tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-4"])
+          class: P([e(K).actions, "stash-data-view-toolbar__actions flex items-center gap-x-2 lg:gap-x-4"])
         }, [
           R(m.$slots, "default")
         ], 2))
       ]),
-      e(i) ? (l(), w("div", pe, [
+      e(i) ? (l(), b("div", pe, [
         R(m.$slots, "selected-stats", {}, () => [
-          t.someRowsSelected && t.selectedItemsCount !== void 0 ? (l(), w("span", me, F(e(y)("ll.listView.numberOfTotalSelected", { num: t.selectedItemsCount, total: e(E) })), 1)) : x("", !0)
+          t.someRowsSelected && t.selectedItemsCount !== void 0 ? (l(), b("span", me, F(e(y)("ll.listView.numberOfTotalSelected", { num: t.selectedItemsCount, total: e(E) })), 1)) : x("", !0)
         ]),
         R(m.$slots, "page-stats", {}, () => [
-          t.hidePageStats ? x("", !0) : (l(), w("span", fe, F(e(y)("ll.pageStats", e(G))), 1))
+          t.hidePageStats ? x("", !0) : (l(), b("span", fe, F(e(y)("ll.pageStats", e(G))), 1))
         ]),
-        e(g) > 1 ? (l(), w(se, { key: 0 }, [
-          b(O, {
+        e(h) > 1 ? (l(), b(se, { key: 0 }, [
+          v(O, {
             icon: "",
             "aria-label": e(y)("ll.previous"),
-            class: "tw-size-9 tw-p-1.5",
+            class: "size-9 p-1.5",
             "data-test": "button|prev-page",
             disabled: e(V) || e(a) === 1,
             onClick: f[0] || (f[0] = (I) => e($)({ shouldEmit: !0 }))
           }, {
             default: r(() => [
-              b(U, {
+              v(U, {
                 name: "chevron-left",
                 size: "dense"
               })
             ]),
             _: 1
           }, 8, ["aria-label", "disabled"]),
-          b(O, {
+          v(O, {
             icon: "",
             "aria-label": e(y)("ll.next"),
-            class: "tw-size-9 tw-p-1.5",
+            class: "size-9 p-1.5",
             "data-test": "button|next-page",
-            disabled: e(V) || e(B) || e(a) === e(g),
+            disabled: e(V) || e(B) || e(a) === e(h),
             onClick: f[1] || (f[1] = (I) => e(T)({ shouldEmit: !0 }))
           }, {
             default: r(() => [
-              b(U, {
+              v(U, {
                 name: "chevron-right",
                 size: "dense"
               })
@@ -214,11 +214,11 @@ const ue = { class: "tw-flex tw-place-items-center" }, pe = {
       ], 512)) : x("", !0)
     ], 2));
   }
-}), be = "_actions_k8z80_2", ve = {
-  actions: be
-}, ge = {
-  $style: ve
-}, $e = /* @__PURE__ */ de(we, [["__cssModules", ge]]);
+}), ve = "_actions_1i7a8_3", ge = {
+  actions: ve
+}, he = {
+  $style: ge
+}, $e = /* @__PURE__ */ de(be, [["__cssModules", he]]);
 export {
   $e as default
 };

package/dist/DataViewToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/useActionsWidth.ts","../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["import { ComputedRef, nextTick, onBeforeUnmount, onMounted, Ref, ref, ShallowRef, watch } from 'vue';\n\nexport interface UseActionsWidthOptions {\n  toolbarEl: ShallowRef<HTMLElement | null>;\n  paginationEl: ShallowRef<HTMLElement | null>;\n  checkboxEl: ShallowRef<{ $el: HTMLElement } | null>;\n  isPaginationEnabled: ComputedRef<boolean> | undefined;\n  isSelectable: Ref<boolean> | undefined;\n  isEmpty: ComputedRef<boolean> | undefined;\n}\n\nexport function useActionsWidth(options: UseActionsWidthOptions) {\n  const { toolbarEl, paginationEl, checkboxEl, isPaginationEnabled, isSelectable, isEmpty } = options;\n\n  const actionsWidth = ref<string | null>(null);\n  let toolbarResizeObserver: ResizeObserver | null = null;\n  let paginationResizeObserver: ResizeObserver | null = null;\n\n  const updateActionsWidth = () => {\n    if (!toolbarEl.value) return;\n\n    const toolbarWidth = toolbarEl.value.getBoundingClientRect().width;\n    let paginationWidth = 0;\n    let checkboxWidth = 0;\n\n    // Calculate pagination width if pagination is enabled\n    if (isPaginationEnabled?.value && paginationEl.value) {\n      paginationWidth = paginationEl.value.getBoundingClientRect().width;\n    }\n\n    // Calculate checkbox width if selectable and not empty\n    if (isSelectable?.value && !isEmpty?.value && checkboxEl.value?.$el) {\n      checkboxWidth = checkboxEl.value.$el.getBoundingClientRect().width;\n    }\n\n    // Get computed styles to calculate padding\n    const computedStyle = window.getComputedStyle(toolbarEl.value);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    const availableWidth = Math.max(0, toolbarWidth - paginationWidth - checkboxWidth - paddingLeft - paddingRight);\n    actionsWidth.value = `${availableWidth}px`;\n  };\n\n  const setupResizeObserver = () => {\n    if (!toolbarEl.value) return;\n\n    // Observe toolbar element\n    toolbarResizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n    toolbarResizeObserver.observe(toolbarEl.value);\n\n    // Observe pagination element if it exists\n    if (paginationEl.value) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(paginationEl.value);\n    }\n  };\n\n  const cleanupResizeObserver = () => {\n    if (toolbarResizeObserver) {\n      toolbarResizeObserver.disconnect();\n      toolbarResizeObserver = null;\n    }\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n  };\n\n  onMounted(() => {\n    nextTick(() => {\n      updateActionsWidth();\n      setupResizeObserver();\n    });\n  });\n\n  onBeforeUnmount(() => {\n    cleanupResizeObserver();\n  });\n\n  // Watch for changes in conditions that affect element visibility\n  watch([isPaginationEnabled, isSelectable, isEmpty], () => {\n    nextTick(() => {\n      updateActionsWidth();\n    });\n  });\n\n  // Watch for pagination element changes to setup/cleanup observer\n  watch(paginationEl, (newPaginationEl) => {\n    // Cleanup old observer if it exists\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n\n    // Setup new observer if pagination element exists\n    if (newPaginationEl) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(newPaginationEl);\n    }\n  });\n\n  return {\n    actionsWidth,\n    updateActionsWidth,\n  };\n}\n","<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useTemplateRef } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n  import { useActionsWidth } from './useActionsWidth';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * The number of selected items. Used to display selected items count in the toolbar.\n     */\n    selectedItemsCount?: number;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    selectedItemsCount: undefined,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  // Refs for width calculation\n  const toolbarRef = useTemplateRef('toolbarEl');\n  const paginationRef = useTemplateRef('paginationEl');\n  const checkboxRef = useTemplateRef('checkboxEl');\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginateNextDisabled,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const classes = useCssModule();\n\n  const { actionsWidth } = useActionsWidth({\n    toolbarEl: toolbarRef,\n    paginationEl: paginationRef,\n    checkboxEl: checkboxRef,\n    isPaginationEnabled,\n    isSelectable,\n    isEmpty,\n  });\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  const pageStats = usePaginationStats({ currentPage, pageSize, totalItems: totalDataCount });\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    ref=\"toolbarEl\"\n    class=\"stash-data-view-toolbar tw-flex tw-min-h-15 tw-items-center tw-justify-between tw-bg-white tw-py-1.5 tw-shadow\"\n    :class=\"{\n      'tw-border-t tw-border-ice-200': isWithinModule,\n      'tw-rounded-tr': computedRadius === 'rounded-top-right',\n      'tw-rounded': computedRadius === 'rounded',\n      'tw-rounded-t': computedRadius === 'rounded-top',\n      'tw-mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'tw-px-3': density === 'compact',\n      'tw-px-3 lg:tw-px-6': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"tw-flex tw-place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        ref=\"checkboxEl\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <template v-if=\"$slots['more-actions']\">\n        <MoreActions\n          more-button-align=\"together\"\n          :width=\"actionsWidth || undefined\"\n          actions-container-class=\"tw-flex tw-items-center tw-gap-x-2 lg:tw-mr-6 lg:tw-gap-x-6\"\n        >\n          <template #toggle=\"{ toggle }\">\n            <Button\n              icon-label\n              class=\"tw-text-blue-500\"\n              data-test=\"stash-data-view-sort-button|sort-menu-button\"\n              @click=\"toggle\"\n            >\n              <IconLabel icon=\"ellipsis\" stacked> More </IconLabel>\n            </Button>\n          </template>\n          <slot></slot>\n          <template #more-actions>\n            <slot name=\"more-actions\"></slot>\n          </template>\n        </MoreActions>\n      </template>\n      <template v-else>\n        <div\n          :class=\"classes.actions\"\n          class=\"stash-data-view-toolbar__actions tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-4\"\n        >\n          <slot></slot>\n        </div>\n      </template>\n    </div>\n\n    <!-- Pagination -->\n    <div\n      v-if=\"isPaginationEnabled\"\n      ref=\"paginationEl\"\n      class=\"stash-data-view-toolbar__pagination tw-flex tw-shrink-0 tw-items-center\"\n    >\n      <slot name=\"selected-stats\">\n        <span v-if=\"props.someRowsSelected && props.selectedItemsCount !== undefined\" class=\"tw-mx-1.5\">\n          {{ t('ll.listView.numberOfTotalSelected', { num: props.selectedItemsCount, total: totalDataCount }) }}\n        </span>\n      </slot>\n      <slot name=\"page-stats\">\n        <span v-if=\"!props.hidePageStats\" class=\"tw-mx-1.5 tw-hidden md:tw-block\">\n          {{ t('ll.pageStats', pageStats) }}\n        </span>\n      </slot>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"tw-size-9 tw-p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"isLoading || currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          :aria-label=\"t('ll.next')\"\n          class=\"tw-size-9 tw-p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"isLoading || isPaginateNextDisabled || currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  .actions :global(.stash-button) {\n    min-width: auto;\n    padding: 0 0.5rem;\n\n    &:first-child {\n      margin-left: -0.5rem;\n    }\n  }\n</style>\n"],"names":["useActionsWidth","options","toolbarEl","paginationEl","checkboxEl","isPaginationEnabled","isSelectable","isEmpty","actionsWidth","ref","toolbarResizeObserver","paginationResizeObserver","updateActionsWidth","toolbarWidth","paginationWidth","checkboxWidth","_a","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","newPaginationEl","props","__props","emit","__emit","toolbarRef","useTemplateRef","paginationRef","checkboxRef","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","classes","useCssModule","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount"],"mappings":"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"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/useActionsWidth.ts","../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["import { ComputedRef, nextTick, onBeforeUnmount, onMounted, Ref, ref, ShallowRef, watch } from 'vue';\n\nexport interface UseActionsWidthOptions {\n  toolbarEl: ShallowRef<HTMLElement | null>;\n  paginationEl: ShallowRef<HTMLElement | null>;\n  checkboxEl: ShallowRef<{ $el: HTMLElement } | null>;\n  isPaginationEnabled: ComputedRef<boolean> | undefined;\n  isSelectable: Ref<boolean> | undefined;\n  isEmpty: ComputedRef<boolean> | undefined;\n}\n\nexport function useActionsWidth(options: UseActionsWidthOptions) {\n  const { toolbarEl, paginationEl, checkboxEl, isPaginationEnabled, isSelectable, isEmpty } = options;\n\n  const actionsWidth = ref<string | null>(null);\n  let toolbarResizeObserver: ResizeObserver | null = null;\n  let paginationResizeObserver: ResizeObserver | null = null;\n\n  const updateActionsWidth = () => {\n    if (!toolbarEl.value) return;\n\n    const toolbarWidth = toolbarEl.value.getBoundingClientRect().width;\n    let paginationWidth = 0;\n    let checkboxWidth = 0;\n\n    // Calculate pagination width if pagination is enabled\n    if (isPaginationEnabled?.value && paginationEl.value) {\n      paginationWidth = paginationEl.value.getBoundingClientRect().width;\n    }\n\n    // Calculate checkbox width if selectable and not empty\n    if (isSelectable?.value && !isEmpty?.value && checkboxEl.value?.$el) {\n      checkboxWidth = checkboxEl.value.$el.getBoundingClientRect().width;\n    }\n\n    // Get computed styles to calculate padding\n    const computedStyle = window.getComputedStyle(toolbarEl.value);\n    const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;\n    const paddingRight = parseFloat(computedStyle.paddingRight) || 0;\n\n    const availableWidth = Math.max(0, toolbarWidth - paginationWidth - checkboxWidth - paddingLeft - paddingRight);\n    actionsWidth.value = `${availableWidth}px`;\n  };\n\n  const setupResizeObserver = () => {\n    if (!toolbarEl.value) return;\n\n    // Observe toolbar element\n    toolbarResizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n    toolbarResizeObserver.observe(toolbarEl.value);\n\n    // Observe pagination element if it exists\n    if (paginationEl.value) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(paginationEl.value);\n    }\n  };\n\n  const cleanupResizeObserver = () => {\n    if (toolbarResizeObserver) {\n      toolbarResizeObserver.disconnect();\n      toolbarResizeObserver = null;\n    }\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n  };\n\n  onMounted(() => {\n    nextTick(() => {\n      updateActionsWidth();\n      setupResizeObserver();\n    });\n  });\n\n  onBeforeUnmount(() => {\n    cleanupResizeObserver();\n  });\n\n  // Watch for changes in conditions that affect element visibility\n  watch([isPaginationEnabled, isSelectable, isEmpty], () => {\n    nextTick(() => {\n      updateActionsWidth();\n    });\n  });\n\n  // Watch for pagination element changes to setup/cleanup observer\n  watch(paginationEl, (newPaginationEl) => {\n    // Cleanup old observer if it exists\n    if (paginationResizeObserver) {\n      paginationResizeObserver.disconnect();\n      paginationResizeObserver = null;\n    }\n\n    // Setup new observer if pagination element exists\n    if (newPaginationEl) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(newPaginationEl);\n    }\n  });\n\n  return {\n    actionsWidth,\n    updateActionsWidth,\n  };\n}\n","<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule, useTemplateRef } from 'vue';\n\n  import usePaginationStats from '../../composables/usePaginationStats/usePaginationStats';\n  import { t } from '../../locale';\n  import Button from '../Button/Button.vue';\n  import Checkbox from '../Checkbox/Checkbox.vue';\n  import { DATA_VIEW_INJECTION } from '../DataView/DataView.vue';\n  import Icon from '../Icon/Icon.vue';\n  import IconLabel from '../IconLabel/IconLabel.vue';\n  import MoreActions from '../MoreActions/MoreActions.vue';\n  import { ToolbarRadiuses } from './DataViewToolbar.types';\n  import { useActionsWidth } from './useActionsWidth';\n\n  export interface DataViewToolbarProps {\n    /**\n     * When DataView has `variant=\"table\"` and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.\n     */\n    allRowsSelected?: boolean;\n\n    /**\n     * Hides the page statistics (ex: \"1 - 12 of 20\") in the toolbar\n     */\n    hidePageStats?: boolean;\n\n    /**\n     * Controls the corners of DataViewToolbar with the \"border-radius\" CSS property. The default value is \"rounded\".\n     */\n    radius?: ToolbarRadiuses;\n\n    /**\n     * When DataView has variant=\"table\" and Table has `is-selectable` enabled, it provides a way to flag\n     * a checkbox whenever one or more, but not all rows are selected, just like the standalone\n     * version on TableHeaderRow.\n     */\n    someRowsSelected?: boolean;\n\n    /**\n     * The number of selected items. Used to display selected items count in the toolbar.\n     */\n    selectedItemsCount?: number;\n\n    /**\n     * When DataView has tabs above it, we need to remove the top left rounded corner\n     */\n    hasTabsAbove?: boolean;\n  }\n\n  const props = withDefaults(defineProps<DataViewToolbarProps>(), {\n    allRowsSelected: false,\n    hidePageStats: false,\n    radius: undefined,\n    someRowsSelected: false,\n    selectedItemsCount: undefined,\n    hasTabsAbove: false,\n  });\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\n\n  // Refs for width calculation\n  const toolbarRef = useTemplateRef('toolbarEl');\n  const paginationRef = useTemplateRef('paginationEl');\n  const checkboxRef = useTemplateRef('checkboxEl');\n\n  const {\n    isWithinModule,\n    variant: dataViewVariant,\n    density,\n    currentPage,\n    hasToolbar,\n    isPaginateNextDisabled,\n    isPaginationEnabled,\n    isSelectable,\n    pageCount,\n    pageSize,\n    totalDataCount,\n    goPrevPage,\n    goNextPage,\n    isEmpty,\n    isLoading,\n  } = inject(DATA_VIEW_INJECTION.key, DATA_VIEW_INJECTION.defaults);\n\n  const checkboxKey = ref(0);\n  const classes = useCssModule();\n\n  const { actionsWidth } = useActionsWidth({\n    toolbarEl: toolbarRef,\n    paginationEl: paginationRef,\n    checkboxEl: checkboxRef,\n    isPaginationEnabled,\n    isSelectable,\n    isEmpty,\n  });\n\n  const computedRadius = computed<ToolbarRadiuses>(() => {\n    if (props.radius) {\n      return props.radius;\n    }\n\n    if (isWithinModule.value) {\n      return 'none';\n    }\n\n    if (dataViewVariant.value === 'table') {\n      if (props.hasTabsAbove) {\n        return 'rounded-top-right';\n      }\n\n      return 'rounded-top';\n    }\n\n    return 'rounded';\n  });\n\n  const pageStats = usePaginationStats({ currentPage, pageSize, totalItems: totalDataCount });\n\n  function onSelect() {\n    emit('select');\n\n    /**\n     * In Vue (as of this writing), if a user checks a native checkbox but the v-model is `false` and does not change from `false`, then the checkbox will display as checked even though the v-model is still `false`.\n     * Forcing a re-render with a `key` change allows the checkbox to stay unchecked if its v-model is still `false` and its v-model not been changed.\n     * To verify that this is necessary, test the \"select all\" checkbox in the SelectionWithSomeDisabled story in Table.story.ts with and without the `key` attribute.\n     */\n    checkboxKey.value++;\n  }\n\n  onBeforeMount(() => {\n    if (hasToolbar) {\n      hasToolbar.value = true;\n    }\n  });\n</script>\n\n<template>\n  <div\n    ref=\"toolbarEl\"\n    class=\"stash-data-view-toolbar flex min-h-15 items-center justify-between bg-white py-1.5 shadow\"\n    :class=\"{\n      'border-t border-ice-200': isWithinModule,\n      'rounded-tr': computedRadius === 'rounded-top-right',\n      rounded: computedRadius === 'rounded',\n      'rounded-t': computedRadius === 'rounded-top',\n      'mb-3': dataViewVariant !== 'table' && !isWithinModule,\n      'px-3': density === 'compact',\n      'px-3 lg:px-6': density === 'comfortable',\n    }\"\n    data-test=\"stash-data-view-toolbar\"\n  >\n    <div class=\"flex place-items-center\">\n      <Checkbox\n        v-if=\"isSelectable && !isEmpty\"\n        ref=\"checkboxEl\"\n        :key=\"checkboxKey\"\n        :checked=\"props.allRowsSelected\"\n        :indeterminate=\"props.someRowsSelected && !props.allRowsSelected\"\n        :title=\"t('ll.selectAll')\"\n        :disabled=\"isLoading\"\n        @update:indeterminate=\"onSelect\"\n        @update:checked=\"onSelect\"\n      />\n      <template v-if=\"$slots['more-actions']\">\n        <MoreActions\n          more-button-align=\"together\"\n          :width=\"actionsWidth || undefined\"\n          actions-container-class=\"flex items-center gap-x-2 lg:mr-6 lg:gap-x-6\"\n        >\n          <template #toggle=\"{ toggle }\">\n            <Button\n              icon-label\n              class=\"text-blue-500\"\n              data-test=\"stash-data-view-sort-button|sort-menu-button\"\n              @click=\"toggle\"\n            >\n              <IconLabel icon=\"ellipsis\" stacked> More </IconLabel>\n            </Button>\n          </template>\n          <slot></slot>\n          <template #more-actions>\n            <slot name=\"more-actions\"></slot>\n          </template>\n        </MoreActions>\n      </template>\n      <template v-else>\n        <div :class=\"classes.actions\" class=\"stash-data-view-toolbar__actions flex items-center gap-x-2 lg:gap-x-4\">\n          <slot></slot>\n        </div>\n      </template>\n    </div>\n\n    <!-- Pagination -->\n    <div\n      v-if=\"isPaginationEnabled\"\n      ref=\"paginationEl\"\n      class=\"stash-data-view-toolbar__pagination flex shrink-0 items-center\"\n    >\n      <slot name=\"selected-stats\">\n        <span v-if=\"props.someRowsSelected && props.selectedItemsCount !== undefined\" class=\"mx-1.5\">\n          {{ t('ll.listView.numberOfTotalSelected', { num: props.selectedItemsCount, total: totalDataCount }) }}\n        </span>\n      </slot>\n      <slot name=\"page-stats\">\n        <span v-if=\"!props.hidePageStats\" class=\"mx-1.5 hidden md:block\">\n          {{ t('ll.pageStats', pageStats) }}\n        </span>\n      </slot>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|prev-page\"\n          :disabled=\"isLoading || currentPage === 1\"\n          @click=\"goPrevPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-left\" size=\"dense\" />\n        </Button>\n        <Button\n          icon\n          :aria-label=\"t('ll.next')\"\n          class=\"size-9 p-1.5\"\n          data-test=\"button|next-page\"\n          :disabled=\"isLoading || isPaginateNextDisabled || currentPage === pageCount\"\n          @click=\"goNextPage({ shouldEmit: true })\"\n        >\n          <Icon name=\"chevron-right\" size=\"dense\" />\n        </Button>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style module>\n  @layer utilities {\n    .actions :global(.stash-button) {\n      min-width: auto;\n      padding: 0 0.5rem;\n\n      &:first-child {\n        margin-left: -0.5rem;\n      }\n    }\n  }\n</style>\n"],"names":["useActionsWidth","options","toolbarEl","paginationEl","checkboxEl","isPaginationEnabled","isSelectable","isEmpty","actionsWidth","ref","toolbarResizeObserver","paginationResizeObserver","updateActionsWidth","toolbarWidth","paginationWidth","checkboxWidth","_a","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","newPaginationEl","props","__props","emit","__emit","toolbarRef","useTemplateRef","paginationRef","checkboxRef","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","classes","useCssModule","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount"],"mappings":"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"}

package/dist/DatePicker.js

@@ -8289,7 +8289,7 @@ function eM(e, t, r, n, a, s) {
     z(o, yr(Cn(e.$attrs)), null, 16)
   ], 64)) : (Y(), be(i, yr(At({ key: 1 }, e.$attrs)), null, 16));
 }
-const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class: "tw-pt-1.5 tw-text-right" }, aM = /* @__PURE__ */ me({
+const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class: "pt-1.5 text-right" }, aM = /* @__PURE__ */ me({
   __name: "DatePicker",
   props: {
     availableDates: { default: void 0 },
@@ -8387,7 +8387,7 @@ const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class:
       (P = $.target) == null || P.blur();
     }
     return (p, $) => (Y(), L("div", {
-      class: te(["tw-relative", p.$style["vc-overrides"]])
+      class: te(["relative", p.$style["vc-overrides"]])
     }, [
       z(w(tM), {
         ref: "calendar",
@@ -8424,7 +8424,7 @@ const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class:
           return [
             V("span", {
               id: w(c),
-              class: "tw-sr-only"
+              class: "sr-only"
             }, pe(w(Oa)("ll.datePicker.dateFormat")) + ": " + pe((A = p.format) == null ? void 0 : A.toUpperCase()), 9, rM),
             z(il, At({
               id: r.id,
@@ -8456,7 +8456,7 @@ const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class:
                   _: 1
                 }, 8, ["class"])) : (Y(), be(Rr, {
                   key: 1,
-                  class: te([p.$style["calendar-icon"], { "tw-cursor-pointer": !p.disabled }]),
+                  class: te([p.$style["calendar-icon"], { "cursor-pointer": !p.disabled }]),
                   name: l.value ? "recent" : "calendar",
                   onClick: (R) => !p.disabled && P()
                 }, null, 8, ["class", "name", "onClick"]))
@@ -8477,7 +8477,7 @@ const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class:
           V("div", nM, [
             z(Ca, {
               inline: "",
-              class: te(["tw-mx-3 tw-my-1.5", [p.$style["button-today"]]]),
+              class: te(["mx-3 my-1.5", [p.$style["button-today"]]]),
               onClick: M
             }, {
               default: J(() => [
@@ -8491,12 +8491,12 @@ const tM = /* @__PURE__ */ _t(J_, [["render", eM]]), rM = ["id"], nM = { class:
       }, 8, ["attributes", "available-dates", "disabled-dates", "max-date", "min-date", "max-page", "min-page", "mode", "model-value", "popover", "hide-time-header"])
     ], 2));
   }
-}), sM = "_input_1x29w_144", oM = {
-  "vc-overrides": "_vc-overrides_1x29w_2",
-  "close-button": "_close-button_1x29w_117",
-  "button-today": "_button-today_1x29w_123",
+}), sM = "_input_mj46v_147", oM = {
+  "vc-overrides": "_vc-overrides_mj46v_5",
+  "close-button": "_close-button_mj46v_120",
+  "button-today": "_button-today_mj46v_126",
   input: sM,
-  "calendar-icon": "_calendar-icon_1x29w_152"
+  "calendar-icon": "_calendar-icon_mj46v_155"
 }, iM = {
   $style: oM
 }, MM = /* @__PURE__ */ dl(aM, [["__cssModules", iM]]);