@leaflink/stash 51.11.0 → 51.12.0

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","_createBlock","Dropdown","_withCtx","isActive","toggle","_createVNode","Button","IconLabel","_unref","t","_createElementVNode","_hoisted_1","_openBlock","_createElementBlock","_Fragment","_renderList","sortOption","Icon"],"mappings":";;;;;;;;;;;;;;;;;;AAkBE,UAAMA,IAAQC,GAGRC,IAAUC,EAAA,GAEV,EAAE,eAAAC,GAAe,kBAAAC,GAAkB,mBAAAC,EAAA,IAAsBC;AAAA,MAC7DC,EAAoB;AAAA,MACpBA,EAAoB;AAAA,IAAA;qBAMdR,EAAM,YAAY,eAD1BS,EAyDWC,GAAA;AAAA;MAvDT,OAAM;AAAA,MACN,OAAM;AAAA,MACN,aAAU;AAAA,IAAA;MAEC,QAAMC,EACf,CAUS,EAXU,UAAAC,GAAU,QAAAC,QAAM;AAAA,QACnCC,EAUSC,GAAA;AAAA,UATP,cAAA;AAAA,UACC,iBAAeH,EAAS,SAAA;AAAA,UACzB,OAAM;AAAA,UACN,aAAU;AAAA,UACT,SAAOC;AAAA,QAAA;qBAER,MAEY;AAAA,YAFZC,EAEYE,GAAA;AAAA,cAFD,MAAK;AAAA,cAAO,SAAA;AAAA,YAAA;yBACrB,MAAkB;AAAA,oBAAfC,EAAAC,CAAA,EAAC,SAAA,CAAA,GAAA,CAAA;AAAA,cAAA;;;;;;;iBAIV,MAqCK;AAAA,QArCLC,EAqCK,MArCLC,GAqCK;AAAA,WApCHC,EAAA,EAAA,GAAAC,EAmCWC,GAAA,MAAAC,EAnCoBxB,EAAM,cAApByB;YAAuC,KAAAA,EAAW;AAAA,UAAA;YACjEN,EAgBK,MAAA;AAAA,cAfH,UAAM,6BAA2B;AAAA,gBACXF,EAAAf,CAAA,EAAQ;AAAA,gBAAgE,EAAA,kCAAAuB,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,MAAA;AAAA,cAAA;cAIhJ,SAAK,MAAQY,EAAAX,CAAA,EAAkBmB,EAAW,IAAE,EAAA,WAAA,OAAA,YAAA,GAAA,CAAA;AAAA,YAAA;cAE7CX,EAOSC,GAAA;AAAA,gBAPD,QAAA;AAAA,gBAAO,OAAM;AAAA,cAAA;2BACnB,MAAyB;AAAA,sBAAtBU,EAAW,QAAQ,IAAG,KACzB,CAAA;AAAA,kBACQA,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,cAD3DI,EAIEiB,GAAA;AAAA;oBAFA,MAAK;AAAA,oBACL,OAAM;AAAA,kBAAA;;;;;YAIZP,EAgBK,MAAA;AAAA,cAfH,UAAM,6BAA2B;AAAA,gBACXF,EAAAf,CAAA,EAAQ;AAAA,gBAAgE,EAAA,kCAAAuB,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,OAAA;AAAA,cAAA;cAIhJ,SAAK,MAAQY,EAAAX,CAAA,EAAkBmB,EAAW,IAAE,EAAA,WAAA,QAAA,YAAA,GAAA,CAAA;AAAA,YAAA;cAE7CX,EAOSC,GAAA;AAAA,gBAPD,QAAA;AAAA,gBAAO,OAAM;AAAA,cAAA;2BACnB,MAA0B;AAAA,sBAAvBU,EAAW,SAAS,IAAG,KAC1B,CAAA;AAAA,kBACQA,EAAW,OAAOR,EAAAb,CAAA,KAAiBa,EAAAZ,CAAA,MAAgB,eAD3DI,EAIEiB,GAAA;AAAA;oBAFA,MAAK;AAAA,oBACL,OAAM;AAAA,kBAAA;;;;;;;;;;;;;;;;"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewSortButton.vue.d.ts

@@ -1,18 +1,45 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare interface DataViewToolbarProps {
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+export declare interface DataViewToolbarProps {
     /**
      * An array of sort options to display in the dropdown.
      */
     sortOptions?: SortOption[];
 }
 
-declare const _default: DefineComponent<DataViewToolbarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<DataViewToolbarProps> & Readonly<{}>, {
+declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+sortOptions: () => never[];
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+sortOptions: () => never[];
+}>>> & Readonly<{}>, {
 sortOptions: SortOption[];
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 declare interface SortOption {

package/dist/DataViewToolbar.js

@@ -1,55 +1,19 @@
-import { ref as M, onMounted as U, nextTick as P, onBeforeUnmount as j, watch as J, defineComponent as K, useTemplateRef as W, inject as q, computed as G, onBeforeMount as H, createElementBlock as v, openBlock as m, normalizeClass as Q, unref as e, createElementVNode as X, createCommentVNode as x, createBlock as Y, createVNode as l, withCtx as r, renderSlot as Z, createTextVNode as ee, toDisplayString as te, Fragment as ae } from "vue";
-import { u as oe } from "./usePaginationStats-d_q39naC.js";
-import { t as k } from "./locale.js";
-import T from "./Button.js";
-import ne from "./Checkbox.js";
+import { defineComponent as j, useCssModule as U, inject as W, ref as F, computed as J, onBeforeMount as K, createElementBlock as s, openBlock as a, normalizeClass as v, unref as e, createElementVNode as h, createCommentVNode as l, createBlock as L, renderSlot as O, toDisplayString as q, Fragment as G, createVNode as n, withCtx as _ } from "vue";
+import { u as H } from "./usePaginationStats-d_q39naC.js";
+import { t as i } from "./locale.js";
+import x from "./Button.js";
+import Q from "./Checkbox.js";
 import "lodash-es/cloneDeep";
-import D from "./Icon.js";
-import { D as I } from "./DataView.keys-aSOnA4AD.js";
-import le from "./IconLabel.js";
-import ie from "./MoreActions.js";
-function se(E) {
-  const { toolbarEl: o, paginationEl: t, checkboxEl: b, isPaginationEnabled: f, isSelectable: w, isEmpty: g } = E, i = M(null);
-  let a = null;
-  const n = () => {
-    if (!o.value) return;
-    const y = o.value.getBoundingClientRect().width;
-    let c = 0, u = 0;
-    f?.value && t.value && (c = t.value.getBoundingClientRect().width), w?.value && !g?.value && b.value?.$el && (u = b.value.$el.getBoundingClientRect().width);
-    const p = window.getComputedStyle(o.value), R = parseFloat(p.paddingLeft) || 0, S = parseFloat(p.paddingRight) || 0, C = Math.max(0, y - c - u - R - S);
-    i.value = `${C}px`;
-  }, d = () => {
-    o.value && (a = new ResizeObserver(() => {
-      P(() => {
-        n();
-      });
-    }), a.observe(o.value));
-  }, h = () => {
-    a && (a.disconnect(), a = null);
-  };
-  return U(() => {
-    P(() => {
-      n(), d();
-    });
-  }), j(() => {
-    h();
-  }), J([f, w, g], () => {
-    P(() => {
-      n();
-    });
-  }), {
-    actionsWidth: i,
-    updateActionsWidth: n
-  };
-}
-const re = { class: "tw-flex tw-place-items-center" }, de = {
+import y from "./Icon.js";
+import { D as k } from "./DataView.keys-aSOnA4AD.js";
+import { _ as X } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Y = { class: "tw-flex tw-place-items-center" }, Z = {
   key: 0,
-  ref: "paginationEl",
-  class: "tw-flex tw-shrink-0 tw-items-center"
-}, ce = {
+  class: "stash-data-view-toolbar__pagination tw-flex tw-items-center"
+}, ee = {
   key: 0,
-  class: "tw-mx-1.5 tw-hidden md:tw-block"
-}, ke = /* @__PURE__ */ K({
+  class: "tw-mr-1.5"
+}, te = /* @__PURE__ */ j({
   __name: "DataViewToolbar",
   props: {
     allRowsSelected: { type: Boolean, default: !1 },
@@ -59,134 +23,103 @@ const re = { class: "tw-flex tw-place-items-center" }, de = {
     hasTabsAbove: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(E, { emit: o }) {
-    const t = E, b = o, f = W("toolbarEl"), w = W("paginationEl"), g = W("checkboxEl"), {
-      isWithinModule: i,
-      variant: a,
-      density: n,
+  setup(S, { emit: C }) {
+    const t = S, B = U(), P = C, {
+      isWithinModule: r,
+      variant: m,
+      density: w,
       currentPage: d,
-      hasToolbar: h,
-      isPaginateNextDisabled: y,
-      isPaginationEnabled: c,
-      isSelectable: u,
-      pageCount: p,
-      pageSize: R,
-      totalDataCount: S,
-      goPrevPage: C,
-      goNextPage: $,
+      hasToolbar: p,
+      isPaginateNextDisabled: E,
+      isPaginationEnabled: V,
+      isSelectable: D,
+      pageCount: f,
+      pageSize: N,
+      totalDataCount: T,
+      goPrevPage: R,
+      goNextPage: z,
       isEmpty: A,
-      isLoading: B
-    } = q(I.key, I.defaults), N = M(0), { actionsWidth: O } = se({
-      toolbarEl: f,
-      paginationEl: w,
-      checkboxEl: g,
-      isPaginationEnabled: c,
-      isSelectable: u,
-      isEmpty: A
-    }), _ = G(() => t.radius ? t.radius : i.value ? "none" : a.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), L = oe({ currentPage: d, pageSize: R, totalItems: S });
-    function V() {
-      b("select"), N.value++;
+      isLoading: c
+    } = W(k.key, k.defaults), b = F(0), u = J(() => t.radius ? t.radius : r.value ? "none" : m.value === "table" ? t.hasTabsAbove ? "rounded-top-right" : "rounded-top" : "rounded"), I = H({ currentPage: d, pageSize: N, totalItems: T });
+    function g() {
+      P("select"), b.value++;
     }
-    return H(() => {
-      h && (h.value = !0);
-    }), (F, s) => (m(), v("div", {
-      ref: "toolbarEl",
-      class: Q(["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(i),
-        "tw-rounded-tr": _.value === "rounded-top-right",
-        "tw-rounded": _.value === "rounded",
-        "tw-rounded-t": _.value === "rounded-top",
-        "tw-mb-3": e(a) !== "table" && !e(i),
-        "tw-px-3": e(n) === "compact",
-        "tw-px-3 lg:tw-px-6": e(n) === "comfortable"
+    return K(() => {
+      p && (p.value = !0);
+    }), (M, o) => (a(), s("div", {
+      class: v(["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(r),
+        "tw-rounded-tr": u.value === "rounded-top-right",
+        "tw-rounded": u.value === "rounded",
+        "tw-rounded-t": u.value === "rounded-top",
+        "tw-mb-3": e(m) !== "table" && !e(r),
+        "tw-px-3": e(w) === "compact",
+        "tw-px-3 lg:tw-px-6": e(w) === "comfortable"
       }]),
       "data-test": "stash-data-view-toolbar"
     }, [
-      X("div", re, [
-        e(u) && !e(A) ? (m(), Y(ne, {
-          ref: "checkboxEl",
-          key: N.value,
+      h("div", Y, [
+        e(D) && !e(A) ? (a(), L(Q, {
+          key: b.value,
+          class: "tw-mr-2",
           checked: t.allRowsSelected,
           indeterminate: t.someRowsSelected && !t.allRowsSelected,
-          title: e(k)("ll.selectAll"),
-          disabled: e(B),
-          "onUpdate:indeterminate": V,
-          "onUpdate:checked": V
-        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : x("", !0),
-        l(ie, {
-          "more-button-align": "together",
-          width: e(O) || void 0,
-          "actions-container-class": "tw-flex tw-items-center tw-gap-x-2 lg:tw-mr-6 lg:tw-gap-x-6",
-          "item-in-dropdown-class": "tw-text-center"
-        }, {
-          toggle: r(({ toggle: z }) => [
-            l(T, {
-              "icon-label": "",
-              class: "tw-text-blue-500",
-              "data-test": "stash-data-view-sort-button|sort-menu-button",
-              onClick: z
-            }, {
-              default: r(() => [
-                l(le, {
-                  icon: "ellipsis",
-                  stacked: ""
-                }, {
-                  default: r(() => [...s[2] || (s[2] = [
-                    ee(" More ", -1)
-                  ])]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }, 8, ["onClick"])
-          ]),
-          actions: r(() => [
-            Z(F.$slots, "default")
-          ]),
-          _: 3
-        }, 8, ["width"])
+          title: e(i)("ll.selectAll"),
+          disabled: e(c),
+          "onUpdate:indeterminate": g,
+          "onUpdate:checked": g
+        }, null, 8, ["checked", "indeterminate", "title", "disabled"])) : l("", !0),
+        h("div", {
+          class: v([e(B).actions, "stash-data-view-toolbar__actions tw-flex tw-items-center tw-gap-x-2 lg:tw-gap-x-4"])
+        }, [
+          O(M.$slots, "default")
+        ], 2)
       ]),
-      e(c) ? (m(), v("div", de, [
-        t.hidePageStats ? x("", !0) : (m(), v("span", ce, te(e(k)("ll.pageStats", e(L))), 1)),
-        e(p) > 1 ? (m(), v(ae, { key: 1 }, [
-          l(T, {
+      e(V) ? (a(), s("div", Z, [
+        t.hidePageStats ? l("", !0) : (a(), s("span", ee, q(e(i)("ll.pageStats", e(I))), 1)),
+        e(f) > 1 ? (a(), s(G, { key: 1 }, [
+          n(x, {
             icon: "",
-            "aria-label": e(k)("ll.previous"),
-            class: "tw-size-9 tw-p-1.5",
+            "aria-label": e(i)("ll.previous"),
+            class: "tw-ml-1.5 tw-w-auto tw-min-w-auto tw-px-1.5",
             "data-test": "button|prev-page",
-            disabled: e(B) || e(d) === 1,
-            onClick: s[0] || (s[0] = (z) => e(C)({ shouldEmit: !0 }))
+            disabled: e(c) || e(d) === 1,
+            onClick: o[0] || (o[0] = ($) => e(R)({ shouldEmit: !0 }))
           }, {
-            default: r(() => [
-              l(D, {
+            default: _(() => [
+              n(y, {
                 name: "chevron-left",
                 size: "dense"
               })
             ]),
             _: 1
           }, 8, ["aria-label", "disabled"]),
-          l(T, {
+          n(x, {
             icon: "",
-            "aria-label": e(k)("ll.next"),
-            class: "tw-size-9 tw-p-1.5",
+            "aria-label": e(i)("ll.next"),
+            class: "-tw-mr-4 tw-w-auto tw-min-w-auto tw-p-1.5",
             "data-test": "button|next-page",
-            disabled: e(B) || e(y) || e(d) === e(p),
-            onClick: s[1] || (s[1] = (z) => e($)({ shouldEmit: !0 }))
+            disabled: e(c) || e(E) || e(d) === e(f),
+            onClick: o[1] || (o[1] = ($) => e(z)({ shouldEmit: !0 }))
           }, {
-            default: r(() => [
-              l(D, {
+            default: _(() => [
+              n(y, {
                 name: "chevron-right",
                 size: "dense"
               })
             ]),
             _: 1
           }, 8, ["aria-label", "disabled"])
-        ], 64)) : x("", !0)
-      ], 512)) : x("", !0)
+        ], 64)) : l("", !0)
+      ])) : l("", !0)
     ], 2));
   }
-});
+}), ae = "_actions_k8z80_2", oe = {
+  actions: ae
+}, se = {
+  $style: oe
+}, pe = /* @__PURE__ */ X(te, [["__cssModules", se]]);
 export {
-  ke as default
+  pe 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 resizeObserver: 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    resizeObserver = new ResizeObserver(() => {\n      nextTick(() => {\n        updateActionsWidth();\n      });\n    });\n\n    resizeObserver.observe(toolbarEl.value);\n  };\n\n  const cleanupResizeObserver = () => {\n    if (resizeObserver) {\n      resizeObserver.disconnect();\n      resizeObserver = null;\n    }\n  };\n\n  onMounted(() => {\n    // Initial width calculation with nextTick to ensure DOM is ready\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  return {\n    actionsWidth,\n    updateActionsWidth,\n  };\n}\n","<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, 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     * 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    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\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      <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        item-in-dropdown-class=\"tw-text-center\"\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        <template #actions>\n          <slot></slot>\n        </template>\n      </MoreActions>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" ref=\"paginationEl\" class=\"tw-flex tw-shrink-0 tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mx-1.5 tw-hidden md:tw-block\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\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"],"names":["useActionsWidth","options","toolbarEl","paginationEl","checkboxEl","isPaginationEnabled","isSelectable","isEmpty","actionsWidth","ref","resizeObserver","updateActionsWidth","toolbarWidth","paginationWidth","checkboxWidth","computedStyle","paddingLeft","paddingRight","availableWidth","setupResizeObserver","nextTick","cleanupResizeObserver","onMounted","onBeforeUnmount","watch","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","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount","_createElementBlock","_unref","_createElementVNode","_hoisted_1","_createBlock","Checkbox","t","_createVNode","MoreActions","_withCtx","toggle","Button","IconLabel","_cache","_renderSlot","_ctx","_openBlock","_hoisted_2","_hoisted_3","_toDisplayString","_Fragment","Icon"],"mappings":"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"}
+{"version":3,"file":"DataViewToolbar.js","sources":["../src/components/DataViewToolbar/DataViewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, ref, useCssModule } 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 { ToolbarRadiuses } from './DataViewToolbar.types';\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     * 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    hasTabsAbove: false,\n  });\n  const classes = useCssModule();\n\n  const emit = defineEmits<{\n    (e: 'select'): void;\n  }>();\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\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    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        :key=\"checkboxKey\"\n        class=\"tw-mr-2\"\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      <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 default -->\n        <slot></slot>\n      </div>\n    </div>\n\n    <!-- Pagination -->\n    <div v-if=\"isPaginationEnabled\" class=\"stash-data-view-toolbar__pagination tw-flex tw-items-center\">\n      <span v-if=\"!props.hidePageStats\" class=\"tw-mr-1.5\">\n        {{ t('ll.pageStats', pageStats) }}\n      </span>\n      <template v-if=\"pageCount > 1\">\n        <Button\n          icon\n          :aria-label=\"t('ll.previous')\"\n          class=\"tw-ml-1.5 tw-w-auto tw-min-w-auto tw-px-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-mr-4 tw-w-auto tw-min-w-auto 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":["props","__props","classes","useCssModule","emit","__emit","isWithinModule","dataViewVariant","density","currentPage","hasToolbar","isPaginateNextDisabled","isPaginationEnabled","isSelectable","pageCount","pageSize","totalDataCount","goPrevPage","goNextPage","isEmpty","isLoading","inject","DATA_VIEW_INJECTION","checkboxKey","ref","computedRadius","computed","pageStats","usePaginationStats","onSelect","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyCE,UAAMA,IAAQC,GAORC,IAAUC,EAAA,GAEVC,IAAOC,GAIP;AAAA,MACJ,gBAAAC;AAAA,MACA,SAASC;AAAA,MACT,SAAAC;AAAA,MACA,aAAAC;AAAA,MACA,YAAAC;AAAA,MACA,wBAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,IAAA,IACEC,EAAOC,EAAoB,KAAKA,EAAoB,QAAQ,GAE1DC,IAAcC,EAAI,CAAC,GAEnBC,IAAiBC,EAA0B,MAC3C1B,EAAM,SACDA,EAAM,SAGXM,EAAe,QACV,SAGLC,EAAgB,UAAU,UACxBP,EAAM,eACD,sBAGF,gBAGF,SACR,GAEK2B,IAAYC,EAAmB,EAAE,aAAAnB,GAAa,UAAAM,GAAU,YAAYC,GAAgB;AAE1F,aAASa,IAAW;AAClB,MAAAzB,EAAK,QAAQ,GAObmB,EAAY;AAAA,IACd;AAEA,WAAAO,EAAc,MAAM;AAClB,MAAIpB,MACFA,EAAW,QAAQ;AAAA,IAEvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/DataViewToolbar.vue.d.ts

@@ -1,24 +1,30 @@
-import { AllowedComponentProps } from 'vue';
-import { CheckboxProps } from '../Checkbox/Checkbox.vue';
-import { ComponentCustomProperties } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentInternalInstance } from 'vue';
-import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
-import { ComponentPublicInstance } from 'vue';
-import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
-import { GlobalComponents } from 'vue';
-import { GlobalDirectives } from 'vue';
-import { nextTick } from 'vue';
-import { OnCleanup } from '@vue/reactivity';
+import { ExtractPropTypes } from 'vue';
+import { PropType } from 'vue';
 import { PublicProps } from 'vue';
-import { ShallowUnwrapRef } from 'vue';
-import { Slot } from 'vue';
-import { VNodeProps } from 'vue';
-import { WatchOptions } from 'vue';
-import { WatchStopHandle } from 'vue';
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
@@ -26,7 +32,7 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
     };
 };
 
-declare interface DataViewToolbarProps {
+export declare interface DataViewToolbarProps {
     /**
      * When DataView has `variant="table"` and Table has `is-selectable` enabled, it provides a way to flag
      * a checkbox whenever all rows are selected, just like the standalone version on TableHeaderRow.
@@ -52,9 +58,21 @@ declare interface DataViewToolbarProps {
     hasTabsAbove?: boolean;
 }
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<DataViewToolbarProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-select: () => any;
-}, string, PublicProps, Readonly<DataViewToolbarProps> & Readonly<{
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+allRowsSelected: boolean;
+hidePageStats: boolean;
+radius: undefined;
+someRowsSelected: boolean;
+hasTabsAbove: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+select: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<DataViewToolbarProps>, {
+allRowsSelected: boolean;
+hidePageStats: boolean;
+radius: undefined;
+someRowsSelected: boolean;
+hasTabsAbove: boolean;
+}>>> & Readonly<{
 onSelect?: (() => any) | undefined;
 }>, {
 radius: "none" | "rounded" | "rounded-top" | "rounded-top-right";
@@ -62,91 +80,7 @@ allRowsSelected: boolean;
 hidePageStats: boolean;
 someRowsSelected: boolean;
 hasTabsAbove: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {
-toolbarEl: HTMLDivElement;
-checkboxEl: ({
-$: ComponentInternalInstance;
-$data: {};
-$props: {
-readonly checked: boolean | (string | number)[];
-readonly hasError?: boolean | undefined;
-readonly id?: string | undefined;
-readonly label?: string | undefined;
-readonly errorText?: string | undefined;
-readonly hintText?: string | undefined;
-readonly modelValue?: boolean | (string | number)[] | undefined;
-readonly value?: string | number | undefined;
-readonly disabled?: boolean | undefined;
-readonly "onUpdate:checked"?: ((value: boolean | (string | number)[]) => any) | undefined;
-} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
-$attrs: {
-[x: string]: unknown;
-};
-$refs: {
-[x: string]: unknown;
-};
-$slots: Readonly<{
-[name: string]: Slot<any> | undefined;
-}>;
-$root: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$parent: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
-$host: Element | null;
-$emit: (event: "update:checked", value: boolean | (string | number)[]) => void;
-$el: any;
-$options: ComponentOptionsBase<Readonly<CheckboxProps> & Readonly<{
-"onUpdate:checked"?: ((value: boolean | (string | number)[]) => any) | undefined;
-}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
-"update:checked": (value: boolean | (string | number)[]) => any;
-}, string, {
-id: string;
-label: string;
-value: string | number;
-disabled: boolean;
-hasError: boolean;
-errorText: string;
-hintText: string;
-modelValue: boolean | (string | number)[];
-checked: boolean | (string | number)[];
-}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
-beforeCreate?: ((() => void) | (() => void)[]) | undefined;
-created?: ((() => void) | (() => void)[]) | undefined;
-beforeMount?: ((() => void) | (() => void)[]) | undefined;
-mounted?: ((() => void) | (() => void)[]) | undefined;
-beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
-updated?: ((() => void) | (() => void)[]) | undefined;
-activated?: ((() => void) | (() => void)[]) | undefined;
-deactivated?: ((() => void) | (() => void)[]) | undefined;
-beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
-beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
-destroyed?: ((() => void) | (() => void)[]) | undefined;
-unmounted?: ((() => void) | (() => void)[]) | undefined;
-renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
-errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
-};
-$forceUpdate: () => void;
-$nextTick: nextTick;
-$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
-} & Readonly<{
-id: string;
-label: string;
-value: string | number;
-disabled: boolean;
-hasError: boolean;
-errorText: string;
-hintText: string;
-modelValue: boolean | (string | number)[];
-checked: boolean | (string | number)[];
-}> & Omit<Readonly<CheckboxProps> & Readonly<{
-"onUpdate:checked"?: ((value: boolean | (string | number)[]) => any) | undefined;
-}>, "id" | "label" | "value" | "disabled" | "hasError" | "errorText" | "hintText" | "modelValue" | "checked"> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
-$slots: {
-default?(_: {}): any;
-hint?(_: {}): any;
-};
-}) | null;
-paginationEl: HTMLDivElement;
-}, HTMLDivElement>, {
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;
 export default _default;