@adyen/bento-vue2 1.54.2 → 1.55.0

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

@@ -1,69 +0,0 @@
-import { defineComponent as m, useSlots as u, ref as T, computed as b, provide as v, toRef as y } from "vue";
-import { B as C } from "./header.DWx6s2nt.js";
-import { a as g, B as R } from "./tabs.C8CgvNt4.js";
-import { u as I } from "./use-has-slot.C9lQZ6nz.js";
-import { D as S } from "./data-grid-template.keys.2_AkxuNT.js";
-import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import "../assets/data-grid-template.css";
-const B = {}, k = /* @__PURE__ */ m({
-  ...B,
-  __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
-    }
-  },
-  emits: ["update:tabs"],
-  setup(i, { emit: t }) {
-    const e = i, a = u(), l = I(a), o = T(null), d = b(() => {
-      var s, n;
-      return (n = (s = o.value) == null ? void 0 : s.$refs) == null ? void 0 : n.tablist;
-    }), _ = b(() => Object.keys(a).filter((s) => s == null ? void 0 : s.includes("tab-"))), p = (s) => {
-      t("update:tabs", { ...e.tabs, activeTabIndex: s });
-    }, f = (s) => {
-      var n, r;
-      return ((r = (n = e == null ? void 0 : e.tabs.tabs) == null ? void 0 : n[s]) == null ? void 0 : r.title) ?? `Tab ${s + 1}`;
-    }, c = () => ({ isDataGridTemplate: !0, stickyTabs: y(e, "stickyTabs"), tabsRef: d });
-    return v(S, c), { __sfc: !0, props: e, slots: a, hasSlot: l, emit: t, tabsRef: o, computedTabsRef: d, tabsSlots: _, emitTabs: p, getTabTitle: f, registerDatagridInDataGridTemplate: c, BentoHeader: C, BentoTab: R, BentoTabs: g };
-  }
-});
-var D = function() {
-  var t = this, e = t._self._c, a = t._self._setupProxy;
-  return e("main", { staticClass: "b-data-grid-template b-data-grid-template--sticky-tabs" }, [e(a.BentoHeader, t._b({ staticClass: "b-data-grid-template__header", attrs: { variant: "component" }, scopedSlots: t._u([a.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
-    return [t._t("infoIconTooltipContent")];
-  }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), a.hasSlot("additionalContent") ? e("div", { staticClass: "b-data-grid-template__additional-content" }, [t._t("additionalContent")], 2) : t._e(), a.tabsSlots.length > 1 ? e(a.BentoTabs, { ref: "tabsRef", staticClass: "b-data-grid-template__tabs", attrs: { "active-tab-index": t.tabs.activeTabIndex }, on: { "update:active-tab-index": a.emitTabs } }, t._l(a.tabsSlots, function(l, o) {
-    return e(a.BentoTab, { key: `tab-${o}`, attrs: { title: a.getTabTitle(o) } }, [t._t(`tab-${o + 1}`)], 2);
-  }), 1) : t._t("default")], 2);
-}, E = [], G = /* @__PURE__ */ h(
-  k,
-  D,
-  E,
-  !1,
-  null,
-  "ddbe483e"
-);
-const N = G.exports;
-export {
-  N as d
-};
-//# sourceMappingURL=data-grid-template.BJTWe6Ty.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-template.BJTWe6Ty.js","sources":["../../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            @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        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, 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 emit = defineEmits([\"update:tabs\"]);\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 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 tabsRef: Ref<UnwrapRef<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","emitTabs","newActiveTabIndex","emit","props","getTabTitle","index","registerDatagridInDataGridTemplate","toRef","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;AAqHI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBArDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,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;AACI,MAAAC,EAAA,eAAA,EAAA,GAAAC,EAAA,MAAA,gBAAAF,EAAA,CAAA;AAAA,IAAwE,GAG5EG,IAAA,CAAAC,MAAA;;AAAA,eAAAT,KAAAC,IAAAM,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAN,EAAAQ,OAAA,gBAAAT,EAAA,UAAA,OAAAS,IAAA,CAAA;AAAA,OAEAC,IAAA,OAMI,EAAA,wBAAA,YAJAC,EAAAJ,GAAA,YAAA,GAIA,SAHAT,EAGA;AAGJ,WAAAc,EAAAC,GAAAH,CAAA;;;;;;;;;;;;;;;;;;;"}