{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tab/src/tab-bar.vue"],"sourcesContent":["<template>\r\n  <div\r\n    ref=\"bar$\"\r\n    :class=\"['sg-tab__active-bar', `is-${rootTabs.props.tabPosition}`]\"\r\n    :style=\"barStyle\"\r\n  ></div>\r\n</template>\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  inject,\r\n  getCurrentInstance,\r\n  watch,\r\n  nextTick,\r\n  ref,\r\n} from 'vue'\r\nimport { capitalize } from '@vue/shared'\r\nimport { useResizeObserver } from '@vueuse/core'\r\nimport { throwError } from '@sgui-plus/utils/error'\r\nimport { TabRootContextKey } from './constants'\r\nimport { tabBar } from './tab-bar'\r\n\r\nimport type { CSSProperties } from 'vue'\r\n\r\nconst COMPONENT_NAME = 'SgTabBar'\r\nexport default defineComponent({\r\n  name: COMPONENT_NAME,\r\n  props: tabBar,\r\n\r\n  setup(props) {\r\n    const instance = getCurrentInstance()!\r\n    const rootTabs = inject(TabRootContextKey)\r\n    if (!rootTabs) throwError(COMPONENT_NAME, 'must use with SgTabs')\r\n\r\n    const bar$ = ref<HTMLDivElement>()\r\n    const barStyle = ref()\r\n\r\n    const getBarStyle = (): CSSProperties => {\r\n      let offset = 0\r\n      let tabSize = 0\r\n\r\n      const sizeName = ['top', 'bottom'].includes(rootTabs.props.tabPosition)\r\n        ? 'width'\r\n        : 'height'\r\n      const sizeDir = sizeName === 'width' ? 'x' : 'y'\r\n\r\n      props.tabs.every((tab) => {\r\n        const $el = instance.parent?.refs?.[\r\n          `tab-${tab.paneName}`\r\n        ] as HTMLElement\r\n        if (!$el) return false\r\n\r\n        if (!tab.active) {\r\n          return true\r\n        }\r\n\r\n        tabSize = $el[`client${capitalize(sizeName)}`]\r\n        const position = sizeDir === 'x' ? 'left' : 'top'\r\n        offset =\r\n          $el.getBoundingClientRect()[position] -\r\n          ($el.parentElement?.getBoundingClientRect()[position] ?? 0)\r\n        const tabStyles = window.getComputedStyle($el)\r\n\r\n        if (sizeName === 'width') {\r\n          if (props.tabs.length > 1) {\r\n            tabSize -=\r\n              parseFloat(tabStyles.paddingLeft) +\r\n              parseFloat(tabStyles.paddingRight)\r\n          }\r\n          offset += parseFloat(tabStyles.paddingLeft)\r\n        }\r\n        return false\r\n      })\r\n\r\n      return {\r\n        [sizeName]: `${tabSize}px`,\r\n        transform: `translate${capitalize(sizeDir)}(${offset}px)`,\r\n      }\r\n    }\r\n\r\n    const update = () => (barStyle.value = getBarStyle())\r\n\r\n    watch(\r\n      () => props.tabs,\r\n      async () => {\r\n        await nextTick()\r\n        update()\r\n      },\r\n      { immediate: true }\r\n    )\r\n    useResizeObserver(bar$, () => update())\r\n\r\n    return {\r\n      bar$,\r\n      rootTabs,\r\n      barStyle,\r\n      update,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_normalizeClass"],"mappings":";;;;SAEQ,WAAM,CAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;AACJ,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IACL,GAAK,EAAA,MAAA;AAAA,IAAA,KAAA,EAAAC,cAAA,CAAA,CAAA,oBAAA,EAAA,CAAA,GAAA,EAAA,IAAA,CAAA,QAAA,CAAA,KAAA,CAAA,WAAA,CAAA,CAAA,CAAA,CAAA;;;;;;;;"}