@adyen/bento-vue2 1.26.0 → 1.27.0

package/dist/country.js

@@ -1,10 +1,10 @@
 import { defineComponent as y, toRefs as _, ref as p, watch as d, inject as f } from "vue";
-import { B as v, d as C } from "./chunks/index.dd30e538.js";
+import { B as v, d as C } from "./chunks/index.e29a6907.js";
 import { c as u, B as o, u as b, a as S, b as h } from "./chunks/country.types.002caff2.js";
 import { u as L } from "./chunks/i18n.eb5b985b.js";
 import { S as N } from "./chunks/summary-grid.keys.1d1028c2.js";
 import { n as O } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index10.css";
+import "./assets/index7.css";
 const g = y({
   name: "bento-country",
   components: { BentoTypography: v },

package/dist/currency.js

@@ -1,5 +1,5 @@
 import { defineComponent as F, computed as m } from "vue";
-import { B as G } from "./chunks/index.dd30e538.js";
+import { B as G } from "./chunks/index.e29a6907.js";
 import { g as E } from "./chunks/get-slot-text.99c3d860.js";
 import { n as i } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
 const U = [

package/dist/dashboard-template.js

@@ -0,0 +1,109 @@
+import { defineComponent as C, useSlots as y, ref as d, computed as l, watch as m, onUnmounted as x, onMounted as R } from "vue";
+import { BentoHeader as T } from "./header.js";
+import { BentoTab as I, BentoTabs as H } from "./tabs.js";
+import { a as P } from "./chunks/index.561786f6.js";
+import { o as D } from "./chunks/resize.a041304d.js";
+import { u as S } from "./chunks/use-has-slot.fbeb19ec.js";
+import { n as k } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { B as W } from "./chunks/index.939dd5cf.js";
+import "./assets/index47.css";
+const z = {}, j = /* @__PURE__ */ C({
+  ...z,
+  __name: "dashboard-template",
+  props: {
+    header: null,
+    tabs: { default: void 0 },
+    stickyTabs: { type: Boolean, default: !1 },
+    stickyFilters: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const t = r, a = y(), s = S(a), n = d(), e = d(null), f = d(!1);
+    let i = null;
+    const p = d(!1), _ = d(0), b = l(() => e.value && t.stickyFilters), u = l(() => n.value && t.stickyTabs), B = l(() => ({
+      "b-dashboard-template__filters--sticky": t.stickyFilters,
+      "b-dashboard-template__filters--show-border": b.value && !u.value && f.value
+    })), g = l(() => ({
+      "b-dashboard-template__tabs--sticky": t.stickyTabs,
+      "b-dashboard-template__tabs--show-border": t.stickyTabs && p.value
+    })), w = l(() => ({
+      "b-dashboard-template__top-section--sticky": t.stickyTabs || t.stickyFilters
+    })), $ = l(() => Object.keys(a).filter((o) => o == null ? void 0 : o.includes("tab-"))), F = (o) => {
+      var c, v;
+      return ((v = (c = t == null ? void 0 : t.tabs.tabs) == null ? void 0 : c[o]) == null ? void 0 : v.title) ?? `Tab ${o + 1}`;
+    }, { y: h } = P();
+    return m(
+      () => e.value,
+      () => {
+        !i && e.value && (i = D(e.value, () => {
+          if (e.value && u.value) {
+            const o = e.value.offsetHeight;
+            _.value = b.value ? o : 0, n.value.tablistwrapper.$el.style.top = `${_.value}px`;
+          }
+        }));
+      }
+    ), m(
+      () => h.value,
+      () => {
+        var o, c;
+        b.value && (f.value = ((o = e.value) == null ? void 0 : o.getBoundingClientRect().top) === 0), u.value && (p.value = ((c = n.value.tablistwrapper.$el) == null ? void 0 : c.getBoundingClientRect().top) === _.value);
+      }
+    ), x(() => {
+      i == null || i.disconnect();
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, tabsRef: n, filtersRef: e, isFiltersPinned: f, filtersElementObserver: i, isTabsPinned: p, tabsPosition: _, hasStickyFilters: b, hasStickyTabs: u, dashboardFiltersConditionalClasses: B, dashboardTabsConditionalClasses: g, dashboardTopSectionConditionalClasses: w, tabsSlots: $, getTabTitle: F, y: h, BentoHeader: T, BentoTab: I, BentoTabs: H };
+  }
+});
+var E = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("main", { staticClass: "b-dashboard-template" }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "page" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), a("div", { staticClass: "b-dashboard-template__top-section", class: s.dashboardTopSectionConditionalClasses }, [s.hasSlot("filters") ? a("div", { ref: "filtersRef", staticClass: "b-dashboard-template__filters", class: s.dashboardFiltersConditionalClasses, attrs: { "data-testid": "filters" } }, [t._t("filters")], 2) : t._e(), s.tabsSlots.length > 1 ? a(s.BentoTabs, { ref: "tabsRef", staticClass: "b-dashboard-template__tabs", class: s.dashboardTabsConditionalClasses, attrs: { "active-tab-index": t.tabs.activeTabIndex, "data-testid": "tabs" } }, t._l(s.tabsSlots, function(n, e) {
+    return a(s.BentoTab, { key: `tab-${e}`, attrs: { title: s.getTabTitle(e) } }, [a("div", { staticClass: "b-dashboard-template__container b-dashboard-template__container--tabs" }, [t._t(`tab-${e + 1}`)], 2)]);
+  }), 1) : a("div", { staticClass: "b-dashboard-template__container" }, [t._t("default")], 2)], 1)], 1);
+}, M = [], O = /* @__PURE__ */ k(
+  j,
+  E,
+  M,
+  !1,
+  null,
+  "18ac8340",
+  null,
+  null
+);
+const tt = O.exports, U = {}, q = /* @__PURE__ */ C({
+  ...U,
+  __name: "dashboard-section",
+  props: {
+    header: null,
+    halfWidth: { type: Boolean, default: !1 }
+  },
+  setup(r) {
+    const t = r, a = y(), s = S(a), n = l(() => ({
+      "b-dashboard-section--half-width": t.halfWidth
+    }));
+    return R(() => {
+      if ((s("content-col-1") || s("content-col-2")) && t.halfWidth)
+        throw new Error("`content-col-1` and `content-col-2` cannot be used with half-width prop");
+    }), { __sfc: !0, props: t, slots: a, hasSlot: s, conditionalClasses: n, BentoHeader: T, BentoDivider: W };
+  }
+});
+var A = function() {
+  var t = this, a = t._self._c, s = t._self._setupProxy;
+  return a("div", { staticClass: "b-dashboard-section", class: s.conditionalClasses }, [a(s.BentoHeader, t._b({ staticClass: "b-dashboard-template__header", attrs: { variant: "component" }, scopedSlots: t._u([s.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+    return [t._t("infoIconTooltipContent")];
+  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), s.hasSlot("controls") ? a("div", { staticClass: "b-dashboard-section__controls" }, [t._t("controls")], 2) : t._e(), !s.hasSlot("content-col-1") && !s.hasSlot("content-col-2") ? a("div", { staticClass: "b-dashboard-section__content" }, [t._t("default")], 2) : a("div", { staticClass: "b-dashboard-section__columns" }, [a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-1")], 2), a("div", { staticClass: "b-dashboard-section__content" }, [t._t("content-col-2")], 2)]), a(s.BentoDivider, { staticClass: "b-dashboard-section__divider" })], 1);
+}, G = [], J = /* @__PURE__ */ k(
+  q,
+  A,
+  G,
+  !1,
+  null,
+  "6656200a",
+  null,
+  null
+);
+const st = J.exports;
+export {
+  st as BentoDashboardSection,
+  tt as BentoDashboardTemplate
+};
+//# sourceMappingURL=dashboard-template.js.map

package/dist/dashboard-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-template.js","sources":["../src/templates/dashboard-template/dashboard-template.vue","../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":";;;;;;;;;AA+KI,MAAAA,IAAA,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;;;;;;;;;;;;;;;;;;;;sBCzDvCsB,IAAA,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 { BentoTab as v, BentoTabs as g } from "./tabs.js";
 import { u as C } from "./chunks/use-has-slot.fbeb19ec.js";
 import { D as R } from "./chunks/data-grid-template.keys.a819a991.js";
 import { n as S } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import "./assets/index35.css";
+import "./assets/index49.css";
 const h = {}, I = /* @__PURE__ */ p({
   ...h,
   __name: "data-grid-template",