@leaflink/stash 53.4.6 → 53.4.8

package/dist/DataViewToolbar.js

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

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 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","_createElementBlock","_unref","_createElementVNode","_hoisted_1","_createBlock","Checkbox","t","$slots","MoreActions","_withCtx","toggle","_createVNode","Button","IconLabel","_cache","_renderSlot","_ctx","_normalizeClass","_openBlock","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_Fragment","Icon"],"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\nimport { toComponentEl, toElement } from '../../utils/templateRefNarrowing';\n\nexport interface UseActionsWidthOptions {\n  toolbarEl: ShallowRef<unknown>;\n  paginationEl: ShallowRef<unknown>;\n  checkboxEl: ShallowRef<unknown>;\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    const toolbarElVal = toElement(toolbarEl.value);\n    if (!toolbarElVal) return;\n\n    const toolbarWidth = toolbarElVal.getBoundingClientRect().width;\n    let paginationWidth = 0;\n    let checkboxWidth = 0;\n\n    // Calculate pagination width if pagination is enabled\n    if (isPaginationEnabled?.value) {\n      const paginationElVal = toElement(paginationEl.value);\n      if (paginationElVal) paginationWidth = paginationElVal.getBoundingClientRect().width;\n    }\n\n    // Calculate checkbox width if selectable and not empty\n    if (isSelectable?.value && !isEmpty?.value) {\n      const checkboxElVal = toComponentEl(checkboxEl.value);\n      if (checkboxElVal) checkboxWidth = checkboxElVal.getBoundingClientRect().width;\n    }\n\n    // Get computed styles to calculate padding\n    const computedStyle = window.getComputedStyle(toolbarElVal);\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    const toolbarElVal = toElement(toolbarEl.value);\n    if (!toolbarElVal) return;\n\n    // Observe toolbar element\n    toolbarResizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n    toolbarResizeObserver.observe(toolbarElVal);\n\n    // Observe pagination element if it exists\n    const paginationElVal = toElement(paginationEl.value);\n    if (paginationElVal) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(paginationElVal);\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    const el = toElement(newPaginationEl);\n    if (el) {\n      paginationResizeObserver = new ResizeObserver(() => {\n        nextTick(() => {\n          updateActionsWidth();\n        });\n      });\n      paginationResizeObserver.observe(el);\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","toolbarElVal","toElement","toolbarWidth","paginationWidth","checkboxWidth","paginationElVal","checkboxElVal","toComponentEl","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","newPaginationEl","el","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","_createElementBlock","_unref","_createElementVNode","_hoisted_1","_createBlock","Checkbox","t","$slots","MoreActions","_withCtx","toggle","_createVNode","Button","IconLabel","_cache","_renderSlot","_ctx","_normalizeClass","_openBlock","_hoisted_2","_hoisted_3","_toDisplayString","_hoisted_4","_Fragment","Icon"],"mappings":"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"}