@adyen/bento-vue3 1.26.0 → 1.28.0

package/dist/chunks/data-grid-template.6Nls-D4o.js

@@ -0,0 +1,89 @@
+import { defineComponent as y, useSlots as g, ref as v, computed as u, provide as I, openBlock as o, createElementBlock as l, createVNode as R, unref as a, mergeProps as h, createSlots as B, withCtx as c, renderSlot as n, createCommentVNode as C, createBlock as _, Fragment as D, renderList as $, toRef as E } from "vue";
+import { B as G } from "./header.Cr7115vM.js";
+import { a as S, B as N } from "./tabs.TNKpNgTM.js";
+import { u as O } from "./use-has-slot.B7eQSabc.js";
+import { D as j } from "./data-grid-template.keys.2_AkxuNT.js";
+import { _ as A } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/data-grid-template.css";
+const H = { class: "b-data-grid-template b-data-grid-template--sticky-tabs" }, L = {
+  key: 0,
+  class: "b-data-grid-template__additional-content"
+}, P = {}, V = /* @__PURE__ */ y({
+  ...P,
+  __name: "data-grid-template",
+  props: {
+    /**
+     * The header that goes to the top of the template
+     */
+    header: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * All the tab properties that can be set on the inner tab components.
+     *  - tabs.activeTabIndex: the currently active tab index.
+     *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.
+     */
+    tabs: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(i) {
+    const s = i, m = g(), b = O(m), f = v(null), T = u(() => {
+      var t, e;
+      return (e = (t = f.value) == null ? void 0 : t.$refs) == null ? void 0 : e.tablist;
+    }), p = u(() => Object.keys(m).filter((t) => t == null ? void 0 : t.includes("tab-"))), k = (t) => {
+      var e, r;
+      return ((r = (e = s == null ? void 0 : s.tabs.tabs) == null ? void 0 : e[t]) == null ? void 0 : r.title) ?? `Tab ${t + 1}`;
+    };
+    return I(j, () => ({ isDataGridTemplate: !0, stickyTabs: E(s, "stickyTabs"), tabsRef: T })), (t, e) => (o(), l("main", H, [
+      R(a(G), h(i.header, {
+        variant: "component",
+        class: "b-data-grid-template__header"
+      }), B({ _: 2 }, [
+        a(b)("infoIconTooltipContent") ? {
+          name: "infoIconTooltipContent",
+          fn: c(() => [
+            n(t.$slots, "infoIconTooltipContent", {}, void 0, !0)
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040),
+      a(b)("additionalContent") ? (o(), l("div", L, [
+        n(t.$slots, "additionalContent", {}, void 0, !0)
+      ])) : C("", !0),
+      a(p).length > 1 ? (o(), _(a(S), {
+        key: 1,
+        ref_key: "tabsRef",
+        ref: f,
+        "active-tab-index": i.tabs.activeTabIndex,
+        class: "b-data-grid-template__tabs"
+      }, {
+        default: c(() => [
+          (o(!0), l(D, null, $(a(p), (r, d) => (o(), _(a(N), {
+            key: `tab-${d}`,
+            title: k(d)
+          }, {
+            default: c(() => [
+              n(t.$slots, `tab-${d + 1}`, {}, void 0, !0)
+            ]),
+            _: 2
+          }, 1032, ["title"]))), 128))
+        ]),
+        _: 3
+      }, 8, ["active-tab-index"])) : n(t.$slots, "default", { key: 2 }, void 0, !0)
+    ]));
+  }
+}), x = /* @__PURE__ */ A(V, [["__scopeId", "data-v-61bf7fc6"]]);
+export {
+  x as d
+};
+//# sourceMappingURL=data-grid-template.6Nls-D4o.js.map

package/dist/chunks/data-grid-template.6Nls-D4o.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-template.6Nls-D4o.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\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: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\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 registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<HTMLDivElement> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","getTabTitle","index","props","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","toRef"],"mappings":";;;;;;;;;;GA8GIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA/CAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAP,CAAA,EAAA,OAAA,CAAAW,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAL,KAAAC,IAAAK,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAL,EAAAI,OAAA,gBAAAL,EAAA,UAAA,OAAAK,IAAA,CAAA;AAAA;AAWA,WAAAE,EAAAC,GATA,OAMI,EAAA,wBAAA,YAJAC,EAAAH,GAAA,YAAA,GAIA,SAHAR,EAGA,EAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.keys.a819a991.js → data-grid-template.keys.2_AkxuNT.js}

@@ -2,4 +2,4 @@ const t = Symbol("data-grid-template injection key");
 export {
   t as D
 };
-//# sourceMappingURL=data-grid-template.keys.a819a991.js.map
+//# sourceMappingURL=data-grid-template.keys.2_AkxuNT.js.map

package/dist/chunks/{data-grid-template.keys.a819a991.js.map → data-grid-template.keys.2_AkxuNT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.keys.a819a991.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.keys.ts"],"sourcesContent":["export const DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY = Symbol('data-grid-template injection key');\n"],"names":["DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAA4C,OAAO,kCAAkC;"}
+{"version":3,"file":"data-grid-template.keys.2_AkxuNT.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.keys.ts"],"sourcesContent":["export const DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY = Symbol('data-grid-template injection key');\n"],"names":["DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":"AAAa,MAAAA,IAA4C,OAAO,kCAAkC;"}