You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.6 KiB
1 line
9.6 KiB
{"ast":null,"code":"import \"core-js/modules/es.array.push.js\";\nimport { defineComponent, getCurrentInstance, inject, ref, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle } from 'vue';\nimport { useResizeObserver } from '@vueuse/core';\nimport '../../../utils/index.mjs';\nimport '../../../hooks/index.mjs';\nimport { tabsRootContextKey } from './constants.mjs';\nimport { tabBarProps } from './tab-bar.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { throwError } from '../../../utils/error.mjs';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { capitalize } from '../../../utils/strings.mjs';\nconst COMPONENT_NAME = \"ElTabBar\";\nconst __default__ = defineComponent({\n name: COMPONENT_NAME\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: tabBarProps,\n setup(__props, {\n expose\n }) {\n const props = __props;\n const instance = getCurrentInstance();\n const rootTabs = inject(tabsRootContextKey);\n if (!rootTabs) throwError(COMPONENT_NAME, \"<el-tabs><el-tab-bar /></el-tabs>\");\n const ns = useNamespace(\"tabs\");\n const barRef = ref();\n const barStyle = ref();\n const getBarStyle = () => {\n let offset = 0;\n let tabSize = 0;\n const sizeName = [\"top\", \"bottom\"].includes(rootTabs.props.tabPosition) ? \"width\" : \"height\";\n const sizeDir = sizeName === \"width\" ? \"x\" : \"y\";\n const position = sizeDir === \"x\" ? \"left\" : \"top\";\n props.tabs.every(tab => {\n var _a, _b;\n const $el = (_b = (_a = instance.parent) == null ? void 0 : _a.refs) == null ? void 0 : _b[`tab-${tab.uid}`];\n if (!$el) return false;\n if (!tab.active) {\n return true;\n }\n offset = $el[`offset${capitalize(position)}`];\n tabSize = $el[`client${capitalize(sizeName)}`];\n const tabStyles = window.getComputedStyle($el);\n if (sizeName === \"width\") {\n tabSize -= Number.parseFloat(tabStyles.paddingLeft) + Number.parseFloat(tabStyles.paddingRight);\n offset += Number.parseFloat(tabStyles.paddingLeft);\n }\n return false;\n });\n return {\n [sizeName]: `${tabSize}px`,\n transform: `translate${capitalize(sizeDir)}(${offset}px)`\n };\n };\n const update = () => barStyle.value = getBarStyle();\n const saveObserver = [];\n const observerTabs = () => {\n var _a;\n saveObserver.forEach(observer => observer.stop());\n saveObserver.length = 0;\n const list = (_a = instance.parent) == null ? void 0 : _a.refs;\n if (!list) return;\n for (const key in list) {\n if (key.startsWith(\"tab-\")) {\n const _el = list[key];\n if (_el) {\n saveObserver.push(useResizeObserver(_el, update));\n }\n }\n }\n };\n watch(() => props.tabs, async () => {\n await nextTick();\n update();\n observerTabs();\n }, {\n immediate: true\n });\n const barObserever = useResizeObserver(barRef, () => update());\n onBeforeUnmount(() => {\n saveObserver.forEach(observer => observer.stop());\n saveObserver.length = 0;\n barObserever.stop();\n });\n expose({\n ref: barRef,\n update\n });\n return (_ctx, _cache) => {\n return openBlock(), createElementBlock(\"div\", {\n ref_key: \"barRef\",\n ref: barRef,\n class: normalizeClass([unref(ns).e(\"active-bar\"), unref(ns).is(unref(rootTabs).props.tabPosition)]),\n style: normalizeStyle(barStyle.value)\n }, null, 6);\n };\n }\n});\nvar TabBar = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"tab-bar.vue\"]]);\nexport { TabBar as default };","map":{"version":3,"names":["name","COMPONENT_NAME","instance","getCurrentInstance","rootTabs","inject","tabsRootContextKey","throwError","ns","useNamespace","barRef","ref","barStyle","getBarStyle","offset","tabSize","sizeName","includes","props","tabPosition","sizeDir","position","tabs","every","tab","_a","_b","$el","parent","refs","uid","active","capitalize","tabStyles","window","getComputedStyle","Number","parseFloat","paddingLeft","paddingRight","transform","update","value","saveObserver","observerTabs","forEach","observer","stop","length","list","key","startsWith","_el","push","useResizeObserver","watch","nextTick","immediate","barObserever","onBeforeUnmount","expose","_ctx","_cache"],"sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n <div\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 {\n getCurrentInstance,\n inject,\n nextTick,\n onBeforeUnmount,\n ref,\n watch,\n} from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()!\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\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 const $el = instance.parent?.refs?.[`tab-${tab.uid}`] as HTMLElement\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 saveObserver = [] as ReturnType<typeof useResizeObserver>[]\nconst observerTabs = () => {\n saveObserver.forEach((observer) => observer.stop())\n saveObserver.length = 0\n const list = instance.parent?.refs as Record<string, HTMLElement>\n if (!list) return\n for (const key in list) {\n if (key.startsWith('tab-')) {\n const _el = list[key]\n if (_el) {\n saveObserver.push(useResizeObserver(_el, update))\n }\n }\n }\n}\n\nwatch(\n () => props.tabs,\n async () => {\n await nextTick()\n update()\n\n observerTabs()\n },\n { immediate: true }\n)\nconst barObserever = useResizeObserver(barRef, () => update())\n\nonBeforeUnmount(() => {\n saveObserver.forEach((observer) => observer.stop())\n saveObserver.length = 0\n barObserever.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"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |