@adyen/bento-vue2 1.60.0 → 1.60.1

package/dist/chunks/data-grid-template.CVl3PU0v.js

@@ -0,0 +1,109 @@
+import { defineComponent as R, useSlots as S, ref as d, computed as i, provide as I, toRef as b } from "vue";
+import { B } from "./header.8SId1U5r.js";
+import { B as h } from "./inspector.CegHqvEW.js";
+import { a as x, B as A } from "./tabs.DX_Gq12z.js";
+import { u as E } from "./use-has-slot.C9lQZ6nz.js";
+import { D } from "./data-grid-template.keys.2_AkxuNT.js";
+import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import "../assets/data-grid-template.css";
+const H = {}, O = /* @__PURE__ */ R({
+  ...H,
+  __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 currenly 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 additional content slot with a sticky positioning
+     */
+    stickyAdditionalContent: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders the tabs with a sticky positioning
+     */
+    stickyTabs: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * All the inspector properties that can be set on the inner inspector component.
+     */
+    inspector: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:tabs", "update:is-open:inspector", "update:active-page:inspector", "expand:inspector"],
+  setup(p, { emit: t }) {
+    const o = p, n = S(), l = E(n), s = d(null), r = d(null), _ = d(null), m = i(() => ({
+      "b-data-grid-template__additional-content--sticky": o.stickyAdditionalContent
+    })), T = i(() => ({
+      title: "",
+      ...o.inspector
+    })), y = i(() => {
+      var e;
+      return (e = r == null ? void 0 : r.value) == null ? void 0 : e.offsetHeight;
+    }), u = i(() => {
+      var e, a;
+      return (a = (e = s.value) == null ? void 0 : e.$refs) == null ? void 0 : a.tablistwrapper;
+    }), C = i(() => Object.keys(n).filter((e) => e == null ? void 0 : e.includes("tab-"))), v = i(() => ({
+      "update:is-open": (e) => t("update:is-open:inspector", e),
+      "update:active-page": (e) => t("update:active-page:inspector", e),
+      expand: (e) => t("expand:inspector", e)
+    })), k = (e) => {
+      t("update:tabs", { ...o.tabs, activeTabIndex: e });
+    }, g = (e) => {
+      var a, c;
+      return ((c = (a = o == null ? void 0 : o.tabs.tabs) == null ? void 0 : a[e]) == null ? void 0 : c.title) ?? `Tab ${e + 1}`;
+    }, f = () => {
+      const a = b(o, "stickyTabs"), c = b(o, "stickyAdditionalContent");
+      return {
+        isDataGridTemplate: !0,
+        stickyTabs: a,
+        tabsRef: u,
+        stickyAdditionalContent: c,
+        additionalContentSlotRef: r
+      };
+    };
+    return I(D, f), { __sfc: !0, props: o, slots: n, hasSlot: l, emit: t, tabsRef: s, additionalContentRef: r, inspectorRef: _, additionalContentConditionalClasses: m, computedInspectorProps: T, computedStickyAdditionalContentHeight: y, computedTabsRef: u, tabsSlots: C, inspectorEvents: v, emitTabs: k, getTabTitle: g, registerDatagridInDataGridTemplate: f, BentoHeader: B, BentoInspector: h, BentoTab: A, BentoTabs: x };
+  }
+});
+var j = function() {
+  var t = this, o = t._self._c, n = t._self._setupProxy;
+  return o("main", { staticClass: "b-data-grid-template" }, [o(n.BentoInspector, t._g(t._b({ ref: "inspectorRef", scopedSlots: t._u([{ key: "page", fn: function() {
+    return [o(n.BentoHeader, t._b({ staticClass: "b-data-grid-template__header", attrs: { variant: "component" }, scopedSlots: t._u([n.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+      return [t._t("infoIconTooltipContent")];
+    }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), n.hasSlot("additionalContent") ? o("div", { ref: "additionalContentRef", staticClass: "b-data-grid-template__additional-content", class: n.additionalContentConditionalClasses }, [t._t("additionalContent")], 2) : t._e(), n.tabsSlots.length > 1 ? o(n.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": t.stickyAdditionalContent ? { top: n.computedStickyAdditionalContentHeight } : null }, on: { "update:active-tab-index": n.emitTabs } }, t._l(n.tabsSlots, function(l, s) {
+      return o(n.BentoTab, { key: `tab-${s}`, attrs: { title: n.getTabTitle(s) } }, [t._t(`tab-${s + 1}`)], 2);
+    }), 1) : t._t("default")];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._t("inspector-content")];
+  }, proxy: !0 }], null, !0) }, "bento-inspector", n.computedInspectorProps, !1), n.inspectorEvents))], 1);
+}, P = [], $ = /* @__PURE__ */ G(
+  O,
+  j,
+  P,
+  !1,
+  null,
+  "9497c1d5"
+);
+const Y = $.exports;
+export {
+  Y as d
+};
+//# sourceMappingURL=data-grid-template.CVl3PU0v.js.map

package/dist/chunks/data-grid-template.CVl3PU0v.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-template.CVl3PU0v.js","sources":["../../src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template\">\n        <bento-inspector v-bind=\"computedInspectorProps\" ref=\"inspectorRef\" v-on=\"inspectorEvents\">\n            <template #page>\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\n                <div\n                    v-if=\"hasSlot('additionalContent')\"\n                    ref=\"additionalContentRef\"\n                    class=\"b-data-grid-template__additional-content\"\n                    :class=\"additionalContentConditionalClasses\"\n                >\n                    <slot name=\"additionalContent\" />\n                </div>\n\n                <bento-tabs\n                    v-if=\"tabsSlots.length > 1\"\n                    ref=\"tabsRef\"\n                    :active-tab-index=\"tabs.activeTabIndex\"\n                    :sticky=\"stickyTabs\"\n                    :sticky-options=\"stickyAdditionalContent ? { top: computedStickyAdditionalContentHeight } : null\"\n                    @update:active-tab-index=\"emitTabs\"\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\n                <slot v-else />\n            </template>\n\n            <template #content>\n                <slot name=\"inspector-content\" />\n            </template>\n        </bento-inspector>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoHeader } from '@/components/header';\n    import { BentoInspector } from '@/components/inspector';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateInspector,\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 currenly 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 additional content slot with a sticky positioning\n         */\n        stickyAdditionalContent: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * All the inspector properties that can be set on the inner inspector component.\n         */\n        inspector: {\n            type: Object as PropType<BentoDataGridTemplateInspector>,\n            default: undefined,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"update:tabs\", \"update:is-open:inspector\", \"update:active-page:inspector\", \"expand:inspector\"]);\n\n    const tabsRef = ref(null);\n    const additionalContentRef = ref(null);\n    const inspectorRef = ref(null);\n\n    const additionalContentConditionalClasses = computed(() => ({\n        'b-data-grid-template__additional-content--sticky': props.stickyAdditionalContent,\n    }));\n\n    const computedInspectorProps = computed(() => ({\n        title: '',\n        ...props.inspector,\n    }));\n\n    const computedStickyAdditionalContentHeight = computed(() => additionalContentRef?.value?.offsetHeight);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablistwrapper);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const inspectorEvents = computed(() => ({\n        'update:is-open': (value: boolean) => emit('update:is-open:inspector', value),\n        'update:active-page': (value: string) => emit('update:active-page:inspector', value),\n        expand: (value: boolean) => emit('expand:inspector', value),\n    }));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\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 stickyAdditionalContent: Ref<boolean> = toRef(props, 'stickyAdditionalContent');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n        const additionalContentSlotRef: Ref<UnwrapRef<HTMLDivElement>> | null = additionalContentRef;\n\n        // return values to the Tab component\n        return {\n            isDataGridTemplate,\n            stickyTabs,\n            tabsRef,\n            stickyAdditionalContent,\n            additionalContentSlotRef,\n        };\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","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","props","computedInspectorProps","computedStickyAdditionalContentHeight","_a","computedTabsRef","_b","tabsSlots","el","inspectorEvents","value","emit","emitTabs","newActiveTabIndex","getTabTitle","index","registerDatagridInDataGridTemplate","stickyTabs","toRef","stickyAdditionalContent","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;;AAmLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAC,EAAA;AAAA,IACE,EAAA,GAG9DC,IAAAF,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAC,EAAA;AAAA,IACE,EAAA,GAGbE,IAAAH,EAAA,MAAA;;AAAA,cAAAI,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,KAAA,GAEAC,IAAAL,EAAA,MAAA;;AAAA,cAAAM,KAAAF,IAAAT,EAAA,UAAA,gBAAAS,EAAA,UAAA,gBAAAE,EAAA;AAAA,KAAA,GAEAC,IAAAP,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAiB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAAT,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAU,MAAAC,EAAA,4BAAAD,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAC,EAAA,gCAAAD,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAC,EAAA,oBAAAD,CAAA;AAAA,IACzB,EAAA,GAG9DE,IAAA,CAAAC,MAAA;AACI,MAAAF,EAAA,eAAA,EAAA,GAAAV,EAAA,MAAA,gBAAAY,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAT,KAAAF,IAAAH,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAG,EAAAW,OAAA,gBAAAT,EAAA,UAAA,OAAAS,IAAA,CAAA;AAAA,OAEAC,IAAA,MAAA;AAEI,YAAAC,IAAAC,EAAAjB,GAAA,YAAA,GACAkB,IAAAD,EAAAjB,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAAgB;AAAA,QACA,SANJZ;AAAA,QAOI,yBAAAc;AAAA,QACA,0BAPJtB;AAAA,MAQI;AAAA,IACJ;AAGJ,WAAAuB,EAAAC,GAAAL,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/data-grid-template.keys.2_AkxuNT.js

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

package/dist/chunks/data-grid-template.keys.2_AkxuNT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-template.keys.2_AkxuNT.js","sources":["../../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;"}