{"version":3,"file":"Tabs.chunk-DrpjGEFz.js","sources":["../../shared/components/Tab.vue","../../shared/components/Tabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n    import { ref, onBeforeMount, inject, watch } from 'vue';\r\n    import { type tab } from '@shared/components/Tabs.vue';\r\n\r\n    type TabsProvider = {\r\n        state: { selectedIndex: number; tabs: []; count: number };\r\n        parentId: string;\r\n        addTab: (tab: tab) => number;\r\n    };\r\n\r\n    const props = defineProps<{\r\n        title: string;\r\n    }>();\r\n\r\n    let myIndex = 0;\r\n    const tabsProvider = inject('tabsProvider') as TabsProvider;\r\n    const isActive = ref(false);\r\n\r\n    const emit = defineEmits(['tabClick']);\r\n\r\n    onBeforeMount(() => {\r\n        myIndex = tabsProvider.addTab({\r\n            title: props.title,\r\n            emitTabClick: () => emit('tabClick'),\r\n        });\r\n    });\r\n\r\n    watch(tabsProvider?.state, () => {\r\n        isActive.value = tabsProvider.state.selectedIndex === myIndex ? true : false;\r\n    });\r\n</script>\r\n\r\n<template>\r\n    <div\r\n        class=\"tab-pane print-block\"\r\n        role=\"tabpanel\"\r\n        tabindex=\"0\"\r\n        :id=\"'tabpane-' + tabsProvider.parentId + '-' + myIndex\"\r\n        :class=\"{ active: isActive }\"\r\n        :aria-labelledby=\"'tab-' + tabsProvider.parentId + '-' + myIndex\">\r\n        <slot></slot>\r\n    </div>\r\n</template>\r\n\r\n<style lang=\"css\"></style>\r\n","<script setup lang=\"ts\">\r\n    import { reactive, provide, watch, onMounted } from 'vue';\r\n    import { useRoute, useRouter } from 'vue-router';\r\n    import Tab from '@shared/components/Tab.vue';\r\n\r\n    export type tab = { title: string; emitTabClick: Function };\r\n\r\n    const props = defineProps({\r\n        selectedIndex: {\r\n            type: Number,\r\n            default: null,\r\n        },\r\n        sidebar: {\r\n            type: Boolean,\r\n            default: false,\r\n        },\r\n        queryParam: {\r\n            type: Boolean,\r\n            default: true,\r\n        },\r\n    });\r\n\r\n    const state = reactive({\r\n        selectedIndex: props.selectedIndex || 0,\r\n        tabs: [] as tab[],\r\n        count: 0,\r\n        parentId: crypto.randomUUID(),\r\n    });\r\n\r\n    provide('tabsProvider', {\r\n        state: state,\r\n        parentId: state.parentId,\r\n        addTab: (tab: tab) => {\r\n            state.tabs.push(tab);\r\n            return state.tabs.length - 1;\r\n        },\r\n    });\r\n\r\n    const route = useRoute();\r\n    const router = useRouter();\r\n\r\n    const updateQueryParam = (index: number) => {\r\n        console.log(props.queryParam);\r\n        if (props.queryParam !== false) {\r\n            router.replace({ query: { ...route.query, t: index } });\r\n        }\r\n    };\r\n\r\n    const selectTab = (i: number) => {\r\n        if (state.selectedIndex === i) return;\r\n        state.selectedIndex = i;\r\n        updateQueryParam(i);\r\n    };\r\n\r\n    const onTabClick = (tab: tab, index: number) => {\r\n        selectTab(index);\r\n        tab.emitTabClick();\r\n    };\r\n\r\n    onMounted(() => {\r\n        if (props.queryParam !== false) {\r\n            const queryIndex = parseInt(route.query.t as string);\r\n            if (!isNaN(queryIndex) && queryIndex >= 0 && queryIndex < state.tabs.length) {\r\n                state.selectedIndex = queryIndex;\r\n            }\r\n        }\r\n    });\r\n\r\n    watch(props, () => {\r\n        state.selectedIndex = props.selectedIndex || 0;\r\n    });\r\n</script>\r\n\r\n<script lang=\"ts\">\r\n    export const tab = Tab;\r\n\r\n    export default {\r\n        inheritAttrs: false,\r\n    };\r\n</script>\r\n\r\n<template>\r\n    <div :class=\"props.sidebar && 'has-sub-menu'\">\r\n        <nav\r\n            role=\"navigation\"\r\n            :class=\"[\r\n                'hidden-print',\r\n                $slots['right-content'] ? 'nav-flex flex-wrap col-gap-lg' : '',\r\n                props.sidebar && 'sidebar set-height custom-scrollbar navbar-sticky',\r\n            ]\">\r\n            <ul role=\"tablist\" :class=\"$attrs.navClass ? $attrs.navClass : 'tabs list-unstyled d-flex'\" v-if=\"state.tabs.length > 1\">\r\n                <li role=\"presentation\" :class=\"{ active: index == state.selectedIndex }\" v-for=\"(tab, index) in state.tabs\">\r\n                    <a\r\n                        role=\"tab\"\r\n                        href=\"javascript:void(0)\"\r\n                        :id=\"'tab-' + state.parentId + '-' + index\"\r\n                        :aria-controls=\"'tabpane-' + state.parentId + '-' + index\"\r\n                        :aria-expanded=\"index == state.selectedIndex ? true : false\"\r\n                        :aria-selected=\"index == state.selectedIndex\"\r\n                        @click=\"onTabClick(tab, index)\">\r\n                        {{ tab.title }}\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n\r\n            <div v-if=\"$slots['right-content']\">\r\n                <slot name=\"right-content\"></slot>\r\n            </div>\r\n        </nav>\r\n\r\n        <div class=\"tab-content\" :class=\"$attrs.contentClass\">\r\n            <slot></slot>\r\n        </div>\r\n    </div>\r\n</template>\r\n\r\n<style scoped>\r\n    .nav-flex {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: end;\r\n        width: 100%;\r\n    }\r\n\r\n    .tabs {\r\n        flex-grow: 1;\r\n    }\r\n</style>\r\n"],"names":["props","__props","myIndex","tabsProvider","inject","isActive","ref","emit","__emit","onBeforeMount","watch","tab","Tab","__default__","state","reactive","provide","route","useRoute","router","useRouter","updateQueryParam","index","selectTab","i","onTabClick","onMounted","queryIndex"],"mappings":"2YAUI,MAAMA,EAAQC,EAId,IAAIC,EAAU,EACR,MAAAC,EAAeC,EAAO,cAAc,EACpCC,EAAWC,EAAI,EAAK,EAEpBC,EAAOC,EAEb,OAAAC,EAAc,IAAM,CAChBP,EAAUC,EAAa,OAAO,CAC1B,MAAOH,EAAM,MACb,aAAc,IAAMO,EAAK,UAAU,CAAA,CACtC,CAAA,CACJ,EAEKG,EAAAP,GAAA,YAAAA,EAAc,MAAO,IAAM,CAC7BE,EAAS,MAAQF,EAAa,MAAM,gBAAkBD,CAAiB,CAC1E,4SC6CYS,EAAMC,EAEnBC,EAAe,CACX,aAAc,EAClB,2JAvEA,MAAMb,EAAQC,EAeRa,EAAQC,EAAS,CACnB,cAAef,EAAM,eAAiB,EACtC,KAAM,CAAC,EACP,MAAO,EACP,SAAU,OAAO,WAAW,CAAA,CAC/B,EAEDgB,EAAQ,eAAgB,CACpB,MAAAF,EACA,SAAUA,EAAM,SAChB,OAASH,IACCG,EAAA,KAAK,KAAKH,CAAG,EACZG,EAAM,KAAK,OAAS,EAC/B,CACH,EAED,MAAMG,EAAQC,EAAS,EACjBC,EAASC,EAAU,EAEnBC,EAAoBC,GAAkB,CAChC,QAAA,IAAItB,EAAM,UAAU,EACxBA,EAAM,aAAe,IACdmB,EAAA,QAAQ,CAAE,MAAO,CAAE,GAAGF,EAAM,MAAO,EAAGK,CAAM,EAAG,CAE9D,EAEMC,EAAaC,GAAc,CACzBV,EAAM,gBAAkBU,IAC5BV,EAAM,cAAgBU,EACtBH,EAAiBG,CAAC,EACtB,EAEMC,EAAa,CAACd,EAAUW,IAAkB,CAC5CC,EAAUD,CAAK,EACfX,EAAI,aAAa,CACrB,EAEA,OAAAe,EAAU,IAAM,CACR,GAAA1B,EAAM,aAAe,GAAO,CAC5B,MAAM2B,EAAa,SAASV,EAAM,MAAM,CAAW,EAC/C,CAAC,MAAMU,CAAU,GAAKA,GAAc,GAAKA,EAAab,EAAM,KAAK,SACjEA,EAAM,cAAgBa,EAC1B,CACJ,CACH,EAEDjB,EAAMV,EAAO,IAAM,CACTc,EAAA,cAAgBd,EAAM,eAAiB,CAAA,CAChD"}