{"version":3,"file":"tab-bar.vue.mjs","sources":["../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"bar$\"\n    :class=\"['el-tabs__active-bar', `is-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  ></div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  getCurrentInstance,\n  watch,\n  nextTick,\n  ref,\n} from 'vue'\nimport { capitalize } from '@vue/shared'\nimport { useResizeObserver } from '@vueuse/core'\nimport { tabsRootContextKey } from '@element-ultra/tokens'\nimport { throwError } from '@element-ultra/utils'\nimport { tabBar } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElTabBar'\nexport default defineComponent({\n  name: COMPONENT_NAME,\n  props: tabBar,\n\n  setup(props) {\n    const instance = getCurrentInstance()!\n    const rootTabs = inject(tabsRootContextKey)\n    if (!rootTabs) throwError(COMPONENT_NAME, 'must use with ElTabs')\n\n    const bar$ = ref<HTMLDivElement>()\n    const barStyle = ref()\n\n    const 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\n      props.tabs.every((tab) => {\n        const $el = instance.parent?.refs?.[\n          `tab-${tab.paneName}`\n        ] as HTMLElement\n        if (!$el) return false\n\n        if (!tab.active) {\n          return true\n        }\n\n        tabSize = $el[`client${capitalize(sizeName)}`]\n        const position = sizeDir === 'x' ? 'left' : 'top'\n        offset =\n          $el.getBoundingClientRect()[position] -\n          ($el.parentElement?.getBoundingClientRect()[position] ?? 0)\n        const tabStyles = window.getComputedStyle($el)\n\n        if (sizeName === 'width') {\n          if (props.tabs.length > 1) {\n            tabSize -=\n              parseFloat(tabStyles.paddingLeft) +\n              parseFloat(tabStyles.paddingRight)\n          }\n          offset += 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\n    const update = () => (barStyle.value = getBarStyle())\n\n    watch(\n      () => props.tabs,\n      async () => {\n        await nextTick()\n        update()\n      },\n      { immediate: true }\n    )\n    useResizeObserver(bar$, () => update())\n\n    return {\n      bar$,\n      rootTabs,\n      barStyle,\n      update,\n    }\n  },\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;SAEQ,YAAM,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;AACJ,EAAA,OAAAA,WAAA,EAAAC,kBAAA;AAAA,IAAA,KAAA;AAAA,IAAA;AAAA,MACL,GAAK,EAAA,MAAA;AAAA,MAAA,KAAA,EAAAC,eAAA,CAAA,qBAAA,EAAA,MAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;;;;;;;;"}