UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 6.38 kB
{"version":3,"file":"tab-bar.vue2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n <div\n v-if=\"renderActiveBar\"\n ref=\"barRef\"\n :class=\"[ns.e('active-bar'), ns.is(rootTabs!.props.tabPosition)]\"\n :style=\"barStyle\"\n />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, isUndefined, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\n\nimport type { TabBarProps } from './tab-bar'\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<TabBarProps>(), {\n tabs: () => [],\n tabRefs: () => ({}),\n})\n\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<el-tabs><el-tab-bar /></el-tabs>')\n\nconst ns = useNamespace('tabs')\n\nconst barRef = ref<HTMLDivElement>()\nconst barStyle = ref<CSSProperties>()\n/**\n * when defaultValue is not set, the bar is always shown.\n *\n * when defaultValue is set, the bar will be hidden until style is calculated\n * to avoid the bar showing in the wrong position on initial render.\n */\nconst renderActiveBar = computed(\n () =>\n isUndefined(rootTabs.props.defaultValue) ||\n Boolean(barStyle.value?.transform)\n)\n\nconst getBarStyle = (): CSSProperties => {\n let offset = 0\n let tabSize = 0\n\n const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\n ? 'width'\n : 'height'\n const sizeDir = sizeName === 'width' ? 'x' : 'y'\n const position = sizeDir === 'x' ? 'left' : 'top'\n\n props.tabs.every((tab) => {\n if (isUndefined(tab.paneName)) return false\n const $el = props.tabRefs[tab.paneName]\n if (!$el) return false\n\n if (!tab.active) {\n return true\n }\n\n offset = $el[`offset${capitalize(position)}`]\n tabSize = $el[`client${capitalize(sizeName)}`]\n\n const tabStyles = window.getComputedStyle($el)\n\n if (sizeName === 'width') {\n tabSize -=\n Number.parseFloat(tabStyles.paddingLeft) +\n Number.parseFloat(tabStyles.paddingRight)\n offset += Number.parseFloat(tabStyles.paddingLeft)\n }\n return false\n })\n\n return {\n [sizeName]: `${tabSize}px`,\n transform: `translate${capitalize(sizeDir)}(${offset}px)`,\n }\n}\n\nconst update = () => (barStyle.value = getBarStyle())\n\nconst tabObservers = [] as ReturnType<typeof useResizeObserver>[]\nconst observerTabs = () => {\n tabObservers.forEach((observer) => observer.stop())\n tabObservers.length = 0\n\n Object.values(props.tabRefs).forEach((tab) => {\n tabObservers.push(useResizeObserver(tab, update))\n })\n}\n\nwatch(\n () => props.tabs,\n async () => {\n await nextTick()\n update()\n\n observerTabs()\n },\n { immediate: true }\n)\nconst barObserver = useResizeObserver(barRef, () => update())\n\nonBeforeUnmount(() => {\n tabObservers.forEach((observer) => observer.stop())\n tabObservers.length = 0\n barObserver.stop()\n})\n\ndefineExpose({\n /** @description tab root html element */\n ref: barRef,\n /** @description method to manually update tab bar style */\n update,\n})\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_unref"],"mappings":"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"}