@adyen/bento-vue3 1.26.0 → 1.27.0

package/dist/country.js

@@ -1,10 +1,10 @@
 import { defineComponent as _, toRefs as v, ref as f, watch as C, inject as b, resolveComponent as h, openBlock as u, createElementBlock as l, createElementVNode as B, toDisplayString as i, createBlock as N, withCtx as S, createTextVNode as g } from "vue";
-import { B as L, d as O } from "./chunks/index.a3d60e4f.js";
+import { B as L, d as O } from "./chunks/index.ee15db35.js";
 import { c as p, B as o, u as E, a as I, b as $ } from "./chunks/country.types.002caff2.js";
 import { u as T } from "./chunks/i18n.f7e6533e.js";
 import { S as A } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { _ as M } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index4.css";
+import "./assets/index19.css";
 const U = _({
   name: "bento-country",
   components: { BentoTypography: L },

package/dist/currency.js

@@ -1,5 +1,5 @@
 import { defineComponent as i, computed as U, resolveComponent as f, openBlock as T, createElementBlock as s, createBlock as p, withCtx as H, createTextVNode as l, toDisplayString as N, Fragment as Y } from "vue";
-import { B as Z } from "./chunks/index.a3d60e4f.js";
+import { B as Z } from "./chunks/index.ee15db35.js";
 import { g as W } from "./chunks/get-slot-text.bead058f.js";
 import { _ as V } from "./chunks/_plugin-vue_export-helper.dad06003.js";
 const g = [

package/dist/dashboard-template.js

@@ -0,0 +1,169 @@
+import { defineComponent as F, useSlots as R, ref as u, computed as d, watch as w, onUnmounted as O, openBlock as a, createElementBlock as i, createVNode as B, unref as t, mergeProps as H, createSlots as P, withCtx as f, renderSlot as l, createElementVNode as v, normalizeClass as p, createCommentVNode as W, createBlock as I, Fragment as U, renderList as q, onMounted as A } from "vue";
+import { BentoHeader as D } from "./header.js";
+import { BentoTabs as G, BentoTab as J } from "./tabs.js";
+import { a as K } from "./chunks/index.fedbb4c2.js";
+import { o as Q } from "./chunks/resize.a041304d.js";
+import { u as E } from "./chunks/use-has-slot.4d98bf29.js";
+import { _ as N } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { B as X } from "./chunks/index.b18c78d6.js";
+import "./assets/index39.css";
+const Y = { class: "b-dashboard-template" }, Z = { class: "b-dashboard-template__container b-dashboard-template__container--tabs" }, x = {
+  key: 2,
+  class: "b-dashboard-template__container"
+}, tt = {}, et = /* @__PURE__ */ F({
+  ...tt,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(c) {
+    const o = c, h = R(), n = E(h), r = u(), s = u(null), m = u(!1);
+    let _ = null;
+    const S = u(!1), y = u(0), k = d(() => s.value && o.stickyFilters), T = d(() => r.value && o.stickyTabs), V = d(() => ({
+      "b-dashboard-template__filters--sticky": o.stickyFilters,
+      "b-dashboard-template__filters--show-border": k.value && !T.value && m.value
+    })), z = d(() => ({
+      "b-dashboard-template__tabs--sticky": o.stickyTabs,
+      "b-dashboard-template__tabs--show-border": o.stickyTabs && S.value
+    })), j = d(() => ({
+      "b-dashboard-template__top-section--sticky": o.stickyTabs || o.stickyFilters
+    })), g = d(() => Object.keys(h).filter((e) => e == null ? void 0 : e.includes("tab-"))), L = (e) => {
+      var b, $;
+      return (($ = (b = o == null ? void 0 : o.tabs.tabs) == null ? void 0 : b[e]) == null ? void 0 : $.title) ?? `Tab ${e + 1}`;
+    }, { y: M } = K();
+    return w(
+      () => s.value,
+      () => {
+        !_ && s.value && (_ = Q(s.value, () => {
+          if (s.value && T.value) {
+            const e = s.value.offsetHeight;
+            y.value = k.value ? e : 0, r.value.tablistwrapper.$el.style.top = `${y.value}px`;
+          }
+        }));
+      }
+    ), w(
+      () => M.value,
+      () => {
+        var e, b;
+        k.value && (m.value = ((e = s.value) == null ? void 0 : e.getBoundingClientRect().top) === 0), T.value && (S.value = ((b = r.value.tablistwrapper.$el) == null ? void 0 : b.getBoundingClientRect().top) === y.value);
+      }
+    ), O(() => {
+      _ == null || _.disconnect();
+    }), (e, b) => (a(), i("main", Y, [
+      B(t(D), H(c.header, {
+        variant: "page",
+        class: "b-dashboard-template__header"
+      }), P({ _: 2 }, [
+        t(n)("infoIconTooltipContent") ? {
+          name: "infoIconTooltipContent",
+          fn: f(() => [
+            l(e.$slots, "infoIconTooltipContent", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040),
+      v("div", {
+        class: p(["b-dashboard-template__top-section", t(j)])
+      }, [
+        t(n)("filters") ? (a(), i("div", {
+          key: 0,
+          ref_key: "filtersRef",
+          ref: s,
+          class: p(["b-dashboard-template__filters", t(V)]),
+          "data-testid": "filters"
+        }, [
+          l(e.$slots, "filters", {}, void 0, !0)
+        ], 2)) : W("", !0),
+        t(g).length > 1 ? (a(), I(t(G), {
+          key: 1,
+          ref_key: "tabsRef",
+          ref: r,
+          "active-tab-index": c.tabs.activeTabIndex,
+          class: p(["b-dashboard-template__tabs", t(z)]),
+          "data-testid": "tabs"
+        }, {
+          default: f(() => [
+            (a(!0), i(U, null, q(t(g), ($, C) => (a(), I(t(J), {
+              key: `tab-${C}`,
+              title: L(C)
+            }, {
+              default: f(() => [
+                v("div", Z, [
+                  l(e.$slots, `tab-${C + 1}`, {}, void 0, !0)
+                ])
+              ]),
+              _: 2
+            }, 1032, ["title"]))), 128))
+          ]),
+          _: 3
+        }, 8, ["active-tab-index", "class"])) : (a(), i("div", x, [
+          l(e.$slots, "default", {}, void 0, !0)
+        ]))
+      ], 2)
+    ]));
+  }
+});
+const vt = /* @__PURE__ */ N(et, [["__scopeId", "data-v-b18dccc2"]]), st = {
+  key: 0,
+  class: "b-dashboard-section__controls"
+}, ot = {
+  key: 1,
+  class: "b-dashboard-section__content"
+}, at = {
+  key: 2,
+  class: "b-dashboard-section__columns"
+}, nt = { class: "b-dashboard-section__content" }, lt = { class: "b-dashboard-section__content" }, it = {}, dt = /* @__PURE__ */ F({
+  ...it,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(c) {
+    const o = c, h = R(), n = E(h), r = d(() => ({
+      "b-dashboard-section--half-width": o.halfWidth
+    }));
+    return A(() => {
+      if ((n("content-col-1") || n("content-col-2")) && o.halfWidth)
+        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
+    }), (s, m) => (a(), i("div", {
+      class: p(["b-dashboard-section", t(r)])
+    }, [
+      B(t(D), H(c.header, {
+        variant: "component",
+        class: "b-dashboard-template__header"
+      }), P({ _: 2 }, [
+        t(n)("infoIconTooltipContent") ? {
+          name: "infoIconTooltipContent",
+          fn: f(() => [
+            l(s.$slots, "infoIconTooltipContent", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040),
+      t(n)("controls") ? (a(), i("div", st, [
+        l(s.$slots, "controls", {}, void 0, !0)
+      ])) : W("", !0),
+      !t(n)("content-col-1") && !t(n)("content-col-2") ? (a(), i("div", ot, [
+        l(s.$slots, "default", {}, void 0, !0)
+      ])) : (a(), i("div", at, [
+        v("div", nt, [
+          l(s.$slots, "content-col-1", {}, void 0, !0)
+        ]),
+        v("div", lt, [
+          l(s.$slots, "content-col-2", {}, void 0, !0)
+        ])
+      ])),
+      B(t(X), { class: "b-dashboard-section__divider" })
+    ], 2));
+  }
+});
+const mt = /* @__PURE__ */ N(dt, [["__scopeId", "data-v-55110156"]]);
+export {
+  mt as BentoDashboardSection,
+  vt as BentoDashboardTemplate
+};
+//# sourceMappingURL=dashboard-template.js.map

package/dist/dashboard-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-template.js","sources":["../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * All the tab properties that can be set on the inner tab components.\n             *  - tabs.activeTabIndex: the currently active tab index.\n             *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n             */\n            tabs?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;iBAhGAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAO,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAR,EAAA,SAAAS,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAP,EAAA;AAAA,IAEuB,EAAA,GAG1ES,IAAAJ,EAAA,OAAA;AAAA,MAAwD,sCAAAC,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAJ,EAAA;AAAA,IACgC,EAAA,GAGhFQ,IAAAL,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EK,IAAAN,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAmB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAV,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAU,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAApB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAmB,EAAArB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAQ,EAAA,OAAA;AACI,kBAAAc,IAAAtB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAiB,IAAA,GACAxB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA;AAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ,GAGJgB;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIJ,EAAA,UAAAgB,IAAAjB,EAAA,UAAA,gBAAAiB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIL,EAAA,UAAAa,IAAAlB,EAAA,MAAA,eAAA,QAAA,gBAAAkB,EAAA,wBAAA,SAAAZ,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAArB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCsB,KAAA,CAAA;;;;;;;;iBAzCA9B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA+B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA9B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAW,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data-grid-template.js

@@ -4,7 +4,7 @@ import { BentoTabs as S, BentoTab as N } from "./tabs.js";
 import { u as O } from "./chunks/use-has-slot.4d98bf29.js";
 import { D as j } from "./chunks/data-grid-template.keys.a819a991.js";
 import { _ as A } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import "./assets/index40.css";
+import "./assets/index49.css";
 const H = { class: "b-data-grid-template b-data-grid-template--sticky-tabs" }, L = {
   key: 0,
   class: "b-data-grid-template__additional-content"

package/dist/data-grid.js

@@ -2,7 +2,7 @@ import { ref as I, reactive as Qe, toRefs as et, computed as M, watchEffect as b
 import { BentoActionBar as Mn } from "./action-bar.js";
 import { BentoPagination as Un } from "./pagination.js";
 import { BentoLoadingIndicator as Mt } from "./loading-indicator.js";
-import { B as xe, p as Ut } from "./chunks/index.a3d60e4f.js";
+import { B as xe, p as Ut } from "./chunks/index.ee15db35.js";
 import { u as Dn } from "./chunks/aria-label.ac9651a5.js";
 import { g as Pn } from "./chunks/get-slot-text.bead058f.js";
 import { u as Ze } from "./chunks/i18n.f7e6533e.js";
@@ -11,28 +11,28 @@ import { BentoFilterBar as We } from "./filter-bar.js";
 import { E as Fn } from "./chunks/tabs.keys.358742f2.js";
 import { D as zn } from "./chunks/data-grid-template.keys.a819a991.js";
 import { o as Dt } from "./chunks/resize.a041304d.js";
-import { K as ve } from "./chunks/tooltip.1084d92b.js";
-import { B as ct, a as Gn } from "./chunks/index.5bdebf9d.js";
-import { a as Pt } from "./chunks/button.60dad578.js";
+import { K as ve } from "./chunks/tooltip.36172265.js";
+import { B as ct, a as Gn } from "./chunks/index.a001a0a8.js";
+import { a as Pt } from "./chunks/button.ae4760cd.js";
 import { BentoToggle as kt } from "./toggle.js";
 import { BentoSearchBar as Wn } from "./search-bar.js";
-import { u as Hn } from "./chunks/dropdown.d8587f36.js";
-import { B as Vn } from "./chunks/dropdown-default-textbox.ad5063c2.js";
+import { u as Hn } from "./chunks/dropdown.0ae3b842.js";
+import { B as Vn } from "./chunks/dropdown-default-textbox.cda0798f.js";
 import { _ as Z } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { C as Bn } from "./chunks/cross.a60533f6.js";
-import { S as xn } from "./chunks/search.4e4ee4dd.js";
+import { C as Bn } from "./chunks/cross.26509efc.js";
+import { S as xn } from "./chunks/search.ade93bda.js";
 import { g as Zn } from "./chunks/unique-id.a2a2b458.js";
 import { BentoToggleButton as Ft } from "./button.js";
-import { B as zt } from "./chunks/checkbox.f55ee3a5.js";
+import { B as zt } from "./chunks/checkbox.9c30c07b.js";
 import { BentoInfoIcon as jn } from "./info-icon.js";
-import { B as Ke, O as qn, D as Yn } from "./chunks/index.030c1dd7.js";
-import { A as Xn } from "./chunks/dialog-page.ea67bb14.js";
-import { l as gt } from "./chunks/events.58c00e6d.js";
-import { E as ft } from "./chunks/index.6e0e9d21.js";
-import { C as Kn } from "./chunks/copy.852d4cb8.js";
-import { B as _t, a as vt } from "./chunks/loading-button.0391ad8b.js";
-import "./assets/index47.css";
-var Je = /* @__PURE__ */ ((e) => (e.WRAP = "wrap", e.ELLIPSIS = "ellipsis", e))(Je || {}), pe = /* @__PURE__ */ ((e) => (e.OUTLINE = "outline", e.SCROLL = "scroll", e.STICKY_FILTERS = "sticky-filters", e.OVERFLOW_SHADOW_LEFT = "overflow-shadow-left", e.OVERFLOW_SHADOW_RIGHT = "overflow-shadow-right", e))(pe || {}), Ce = /* @__PURE__ */ ((e) => (e.ASCENDING = "asc", e.DESCENDING = "desc", e))(Ce || {}), w = /* @__PURE__ */ ((e) => (e.COLUMNS = "columns", e.COLUMN_RESIZE = "column-resize", e.ITEMS_PAGE = "items-page", e.NAVIGATE = "navigate", e.FILTER_SEARCH_INPUT = "filter-search-input", e.FILTER_SEARCH_CLEAR = "filter-search-clear", e.UPDATE_COLUMNS = "update:columns", e.UPDATE_CONDENSED = "update:condensed", e.UPDATE_FILTERS = "update:filters", e.UPDATE_FILTER_VALUES = "update:filter-values", e.UPDATE_FILTER_SEARCH_TERM = "update:filter-search-term", e.UPDATE_PAGINATION = "update:pagination", e.UPDATE_SELECTION = "update:selection", e.UPDATE_SHOW_MORE = "update:show-more", e.UPDATE_SORT_BY = "update:sort-by", e.ROW_CLICK = "row-click", e.SELECT = "select", e.SELECT_ALL_ACROSS_PAGES = "select-all-across-pages", e.SORT = "sort", e))(w || {}), He = /* @__PURE__ */ ((e) => (e.ASCENDING = "ascending", e.DESCENDING = "descending", e.NONE = "none", e))(He || {}), B = /* @__PURE__ */ ((e) => (e.COLUMN_RESIZE = "column-resize", e.COLUMN_RESIZING = "column-resizing", e.SORT = "sort", e.SELECT_ALL_ROWS = "select-all-rows", e.SELECT_ALL_ACROSS_PAGES = "select-all-across-pages", e.COLUMN_MOVE = "column-move", e.COLUMN_UPDATE = "column-update", e.COLUMN_MENU_OPEN = "column-menu-open", e.COLUMN_MENU_CLOSE = "column-menu-close", e.COLUMN_HOVER = "column-hover", e.COLUMN_DRAG_START = "column-dragstart", e.COLUMN_DRAG_ENTER = "column-dragenter", e.COLUMN_DRAG_END = "column-dragend", e.COLUMN_DROP = "column-drop", e))(B || {});
+import { B as Ke, O as qn, D as Yn } from "./chunks/index.6bb6f38c.js";
+import { A as Xn } from "./chunks/dialog-page.cb6ce9b6.js";
+import { l as gt } from "./chunks/events.f14a214b.js";
+import { E as ft } from "./chunks/index.eb38a6c4.js";
+import { C as Kn } from "./chunks/copy.60ee6ac3.js";
+import { B as _t, a as vt } from "./chunks/loading-button.6b81b546.js";
+import "./assets/index21.css";
+var Je = /* @__PURE__ */ ((e) => (e.WRAP = "wrap", e.ELLIPSIS = "ellipsis", e))(Je || {}), me = /* @__PURE__ */ ((e) => (e.OUTLINE = "outline", e.SCROLL = "scroll", e.STICKY_FILTERS = "sticky-filters", e.OVERFLOW_SHADOW_LEFT = "overflow-shadow-left", e.OVERFLOW_SHADOW_RIGHT = "overflow-shadow-right", e.NO_SPACING_TOP = "no-spacing-top", e))(me || {}), he = /* @__PURE__ */ ((e) => (e.ASCENDING = "asc", e.DESCENDING = "desc", e))(he || {}), w = /* @__PURE__ */ ((e) => (e.COLUMNS = "columns", e.COLUMN_RESIZE = "column-resize", e.ITEMS_PAGE = "items-page", e.NAVIGATE = "navigate", e.FILTER_SEARCH_INPUT = "filter-search-input", e.FILTER_SEARCH_CLEAR = "filter-search-clear", e.UPDATE_COLUMNS = "update:columns", e.UPDATE_CONDENSED = "update:condensed", e.UPDATE_FILTERS = "update:filters", e.UPDATE_FILTER_VALUES = "update:filter-values", e.UPDATE_FILTER_SEARCH_TERM = "update:filter-search-term", e.UPDATE_PAGINATION = "update:pagination", e.UPDATE_SELECTION = "update:selection", e.UPDATE_SHOW_MORE = "update:show-more", e.UPDATE_SORT_BY = "update:sort-by", e.ROW_CLICK = "row-click", e.SELECT = "select", e.SELECT_ALL_ACROSS_PAGES = "select-all-across-pages", e.SORT = "sort", e))(w || {}), He = /* @__PURE__ */ ((e) => (e.ASCENDING = "ascending", e.DESCENDING = "descending", e.NONE = "none", e))(He || {}), B = /* @__PURE__ */ ((e) => (e.COLUMN_RESIZE = "column-resize", e.COLUMN_RESIZING = "column-resizing", e.SORT = "sort", e.SELECT_ALL_ROWS = "select-all-rows", e.SELECT_ALL_ACROSS_PAGES = "select-all-across-pages", e.COLUMN_MOVE = "column-move", e.COLUMN_UPDATE = "column-update", e.COLUMN_MENU_OPEN = "column-menu-open", e.COLUMN_MENU_CLOSE = "column-menu-close", e.COLUMN_HOVER = "column-hover", e.COLUMN_DRAG_START = "column-dragstart", e.COLUMN_DRAG_ENTER = "column-dragenter", e.COLUMN_DRAG_END = "column-dragend", e.COLUMN_DROP = "column-drop", e))(B || {});
 const Jn = (e, g) => {
   const a = I(null), t = I(!1), _ = I(void 0), o = e.value.reduce((h, R) => (h[R.field] = null, h), {}), c = Qe(o), C = et(c);
   let f = 0, A = "";
@@ -285,7 +285,7 @@ const Jn = (e, g) => {
     return;
   const f = [{
     field: c,
-    direction: ((A = e.value.find((L) => L.field === c)) == null ? void 0 : A.direction) === Ce.ASCENDING ? Ce.DESCENDING : Ce.ASCENDING
+    direction: ((A = e.value.find((L) => L.field === c)) == null ? void 0 : A.direction) === he.ASCENDING ? he.DESCENDING : he.ASCENDING
   }];
   a(B.SORT, f);
 } });
@@ -935,8 +935,8 @@ const As = /* @__PURE__ */ Z(Es, [["render", Is]]), Wt = {
         return null;
       const k = (te = t.sortBy.find(({ field: Y }) => Y === s.field)) == null ? void 0 : te.direction;
       return k ? {
-        [Ce.ASCENDING]: He.ASCENDING,
-        [Ce.DESCENDING]: He.DESCENDING
+        [he.ASCENDING]: He.ASCENDING,
+        [he.DESCENDING]: He.DESCENDING
       }[k] : He.NONE;
     }, u = M(() => (s) => t.hasDraggableColumns ? {
       dragstart: (k) => {
@@ -1124,10 +1124,10 @@ const As = /* @__PURE__ */ Z(Es, [["render", Is]]), Wt = {
                   onClick: (Y) => n(m)($.field)
                 }, {
                   iconLeft: z(() => [
-                    n(U)($.field) ? n(U)($.field) === n(Ce).ASCENDING ? (d(), P(n(ss), {
+                    n(U)($.field) ? n(U)($.field) === n(he).ASCENDING ? (d(), P(n(ss), {
                       key: 1,
                       "svg-title": n(o)("sortColumnInDescendingOrder", { name: $.label })
-                    }, null, 8, ["svg-title"])) : n(U)($.field) === n(Ce).DESCENDING ? (d(), P(n(Cs), {
+                    }, null, 8, ["svg-title"])) : n(U)($.field) === n(he).DESCENDING ? (d(), P(n(Cs), {
                       key: 2,
                       "svg-title": n(o)("sortColumnInAscendingOrder", { name: $.label })
                     }, null, 8, ["svg-title"])) : D("", !0) : (d(), P(n(El), {
@@ -1168,7 +1168,7 @@ const As = /* @__PURE__ */ Z(Es, [["render", Is]]), Wt = {
   }
 });
 const zs = /* @__PURE__ */ Z(Fs, [["__scopeId", "data-v-5d2130a3"]]);
-var me = /* @__PURE__ */ ((e) => (e.CONFIG_SETTINGS = "config-settings", e.UPDATE_COLUMNS = "update:columns", e))(me || {});
+var Ce = /* @__PURE__ */ ((e) => (e.CONFIG_SETTINGS = "config-settings", e.UPDATE_COLUMNS = "update:columns", e))(Ce || {});
 let At = 0;
 const Gs = {
   beforeCreate() {
@@ -1341,7 +1341,7 @@ const eo = /* @__PURE__ */ Z(Js, [["render", Qs], ["__scopeId", "data-v-3ce82b51
       default: !1
     }
   },
-  emits: [me.CONFIG_SETTINGS, me.UPDATE_COLUMNS],
+  emits: [Ce.CONFIG_SETTINGS, Ce.UPDATE_COLUMNS],
   setup(e, { emit: g }) {
     const a = I(null), t = Zn("data-grid-config-settings-popover"), _ = I(null), o = I(!1), c = I(!0), C = I(null), f = I(""), A = Nt(e, "columns"), L = I(!1), v = Hn(f, A), r = () => {
       f.value = "";
@@ -1360,13 +1360,13 @@ const eo = /* @__PURE__ */ Z(Js, [["render", Qs], ["__scopeId", "data-v-3ce82b51
         ...W,
         visible: u.field === W.field ? u.visible : W.visible
       }));
-      g(me.UPDATE_COLUMNS, y);
+      g(Ce.UPDATE_COLUMNS, y);
     }, R = (u) => {
       u ? g(
-        me.UPDATE_COLUMNS,
+        Ce.UPDATE_COLUMNS,
         e.columns.map((y) => ({ ...y, visible: !0 }))
       ) : g(
-        me.UPDATE_COLUMNS,
+        Ce.UPDATE_COLUMNS,
         e.columns.map((y) => ({ ...y, visible: (y == null ? void 0 : y.mandatory) === !0 }))
       );
     }, N = (u) => {
@@ -1374,7 +1374,7 @@ const eo = /* @__PURE__ */ Z(Js, [["render", Qs], ["__scopeId", "data-v-3ce82b51
         ...W,
         frozen: u.field === W.field ? !!(u != null && u.frozen) : !!(W != null && W.frozen)
       }));
-      g(me.UPDATE_COLUMNS, y);
+      g(Ce.UPDATE_COLUMNS, y);
     }, U = (u) => {
       o.value = u, c.value = i.value;
     };
@@ -1392,7 +1392,7 @@ const eo = /* @__PURE__ */ Z(Js, [["render", Qs], ["__scopeId", "data-v-3ce82b51
       DATAGRID_SELECT_FIELD_NAME: Le,
       // Methods
       setConfigSettingsPanelVisibility: U,
-      emitCondensedToggle: (u) => g(me.CONFIG_SETTINGS, u),
+      emitCondensedToggle: (u) => g(Ce.CONFIG_SETTINGS, u),
       toggleAllColumnVisibility: R,
       clearAction: r,
       toggleColumnFilter: l,
@@ -2238,6 +2238,13 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
       type: Array,
       default: () => []
     },
+    /**
+     * Renders the data grid with no top spacing, to render inside containers that already have spacing
+     */
+    noSpacingTop: {
+      type: Boolean,
+      default: !1
+    },
     /**
      * Sortby handles proper rendering of sort icon in header. Sorting currently is only supported server side.
      * It does make sure the currently sorted column has a more visible sort icon, and the sort icon points in the right direction.
@@ -2352,11 +2359,12 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
         variant: ((p = t.emptyState) == null ? void 0 : p.variant) === "embedded" || ((T = t.emptyState) == null ? void 0 : T.variant) === "basic" ? t.emptyState.variant : "basic"
       };
     }), nn = M(() => ({
-      [`b-data-grid--${pe.OUTLINE}`]: t.outline,
-      [`b-data-grid--${pe.SCROLL}`]: t.fitContent || Me.value,
-      [`b-data-grid--${pe.STICKY_FILTERS}`]: t.filters && t.stickyFilters,
-      [`b-data-grid--${pe.OVERFLOW_SHADOW_LEFT}`]: De.value && !W.value,
-      [`b-data-grid--${pe.OVERFLOW_SHADOW_RIGHT}`]: Qt.value
+      [`b-data-grid--${me.OUTLINE}`]: t.outline,
+      [`b-data-grid--${me.SCROLL}`]: t.fitContent || Me.value,
+      [`b-data-grid--${me.STICKY_FILTERS}`]: t.filters && t.stickyFilters,
+      [`b-data-grid--${me.OVERFLOW_SHADOW_LEFT}`]: De.value && !W.value,
+      [`b-data-grid--${me.OVERFLOW_SHADOW_RIGHT}`]: Qt.value,
+      [`b-data-grid--${me.NO_SPACING_TOP}`]: t.noSpacingTop
     })), ln = M(() => _e.value.findIndex((p) => p.columnSet.length)), sn = (p, T) => {
       var ne;
       return {
@@ -2368,7 +2376,7 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
       };
     }, it = M(() => !(t.selectable && W.value === 1) || De.value), on = (p) => ({
       "b-data-grid__row-cell-set--frozen": p,
-      [`b-data-grid__row-cell-set--${pe.OVERFLOW_SHADOW_LEFT}`]: p && De.value,
+      [`b-data-grid__row-cell-set--${me.OVERFLOW_SHADOW_LEFT}`]: p && De.value,
       "b-data-grid__row-cell-set--frozen-separator": p && it.value,
       "b-data-grid__row-cell-set--unfrozen": !p
     }), an = M(() => {
@@ -2481,7 +2489,7 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
                 F != null && F.length ? (d(), P(n(zs), X({
                   key: `data-grid-columns-${Q}`,
                   ref_for: !0,
-                  ref: (he) => rn(he),
+                  ref: (pe) => rn(pe),
                   columns: F,
                   "has-resizable-columns": e.hasResizableColumns,
                   "sort-by": e.sortBy,
@@ -2499,16 +2507,16 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
                   "selectable-across-pages": n(gn),
                   "truncate-column-headers": e.truncateColumnHeaders
                 }, Be(n(Bt)), {
-                  onColumnHover: T[2] || (T[2] = (he) => be.value = he),
+                  onColumnHover: T[2] || (T[2] = (pe) => be.value = pe),
                   onColumnMove: n(Zt),
                   onColumnUpdate: n(we),
                   onColumnResize: vn,
                   onColumnResizing: n(G),
                   onSelectAllRows: n(st),
-                  onSelectAllAcrossPages: T[3] || (T[3] = (he) => s(n(w).SELECT_ALL_ACROSS_PAGES)),
+                  onSelectAllAcrossPages: T[3] || (T[3] = (pe) => s(n(w).SELECT_ALL_ACROSS_PAGES)),
                   onSort: mn
                 }), Ve({ _: 2 }, [
-                  fe(n(_), (he, ke) => ({
+                  fe(n(_), (pe, ke) => ({
                     name: ke,
                     fn: z((Ee) => [
                       Se(p.$slots, ke, Ye(Xe(Ee)), void 0, !0)
@@ -2562,10 +2570,10 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
               "aria-selected": fn(F),
               onClick: (ie) => un(F, ie)
             }, [
-              (d(!0), E(ae, null, fe(n(_e), ({ columnSet: ie, id: Pe, isFrozenColumns: he }, ke) => (d(), E(ae, null, [
+              (d(!0), E(ae, null, fe(n(_e), ({ columnSet: ie, id: Pe, isFrozenColumns: pe }, ke) => (d(), E(ae, null, [
                 ie != null && ie.length ? (d(), E("div", {
                   key: `data-grid-rows-${Pe}`,
-                  class: de(["b-data-grid__cells", on(he)]),
+                  class: de(["b-data-grid__cells", on(pe)]),
                   "data-testid": `data-grid-${Pe}-rows`
                 }, [
                   (d(!0), E(ae, null, fe(ie, (Ee, yn) => (d(), P(n(ko), {
@@ -2634,13 +2642,13 @@ const ko = /* @__PURE__ */ Z(Po, [["__scopeId", "data-v-e7cd69b4"]]), Fo = ["ari
     };
   }
 });
-const Ti = /* @__PURE__ */ Z(qo, [["__scopeId", "data-v-fbbcf4ae"]]);
+const Ti = /* @__PURE__ */ Z(qo, [["__scopeId", "data-v-f87f7872"]]);
 export {
   Je as BentoColumnOverflow,
   Ti as BentoDataGrid,
   He as BentoDatagridAriaSortValue,
   w as BentoDatagridEvent,
-  Ce as BentoDatagridSortDirection,
-  pe as BentoDatagridStyleState
+  he as BentoDatagridSortDirection,
+  me as BentoDatagridStyleState
 };
 //# sourceMappingURL=data-grid.js.map