@adyen/bento-vue2 1.59.0 → 1.60.0

package/dist/chunks/data-grid-template.l-aJapU0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"data-grid-template.l-aJapU0.js","sources":["../../src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template\">\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\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        <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        <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 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    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits([\"update:tabs\"]);\n\n    const tabsRef = ref(null);\n    const additionalContentRef = ref(null);\n\n    const additionalContentConditionalClasses = computed(() => ({\n        'b-data-grid-template__additional-content--sticky': props.stickyAdditionalContent,\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 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 { isDataGridTemplate, stickyTabs, tabsRef, stickyAdditionalContent, additionalContentSlotRef };\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","additionalContentConditionalClasses","computed","props","computedStickyAdditionalContentHeight","_a","computedTabsRef","_b","tabsSlots","el","emitTabs","newActiveTabIndex","emit","getTabTitle","index","registerDatagridInDataGridTemplate","stickyTabs","toRef","stickyAdditionalContent","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;AA4II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA9DAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GAEAE,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAC,EAAA;AAAA,IACE,EAAA,GAG9DC,IAAAF,EAAA,MAAA;;AAAA,cAAAG,IAAAL,KAAA,gBAAAA,EAAA,UAAA,gBAAAK,EAAA;AAAA,KAAA,GAEAC,IAAAJ,EAAA,MAAA;;AAAA,cAAAK,KAAAF,IAAAP,EAAA,UAAA,gBAAAO,EAAA,UAAA,gBAAAE,EAAA;AAAA,KAAA,GAEAC,IAAAN,EAAA,MAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAe,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,eAAA,EAAA,GAAAT,EAAA,MAAA,gBAAAQ,EAAA,CAAA;AAAA,IAAwE,GAG5EE,IAAA,CAAAC,MAAA;;AAAA,eAAAP,KAAAF,IAAAF,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAE,EAAAS,OAAA,gBAAAP,EAAA,UAAA,OAAAO,IAAA,CAAA;AAAA,OAEAC,IAAA,MAAA;AAEI,YAAAC,IAAAC,EAAAd,GAAA,YAAA,GACAe,IAAAD,EAAAd,GAAA,yBAAA;AAKA,aAAA,EAAA,wBAAA,YAAAa,GAAA,SAJAV,GAIA,yBAAAY,GAAA,0BAHAlB,EAGA;AAAA,IAAoG;AAGxG,WAAAmB,EAAAC,GAAAL,CAAA;;;;;;;;;;;;;;;;;;;"}