{"version":3,"file":"tab-bar2.mjs","sources":["../../../../../../packages/components/tabs/src/tab-bar.vue"],"sourcesContent":["<template>\n  <em\n    ref=\"barRef\"\n    :class=\"['tabs-active-bar', `at-${rootTabs.props.tabPosition}`]\"\n    :style=\"barStyle\"\n  ></em>\n</template>\n<script lang=\"ts\" setup>\nimport { getCurrentInstance, inject, nextTick, ref, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { capitalize, throwError } from '@hongluan-ui/utils'\nimport { tabsRootContextKey } from '@hongluan-ui/tokens'\nimport { tabBarProps } from './tab-bar'\n\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'TabBar'\ndefineOptions({\n  name: COMPONENT_NAME,\n})\nconst props = defineProps(tabBarProps)\n\nconst instance = getCurrentInstance()\nconst rootTabs = inject(tabsRootContextKey)\nif (!rootTabs) throwError(COMPONENT_NAME, '<hl-tabs><hl-tab-bar /></hl-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\nwatch(\n  () => props.tabs,\n  async () => {\n    await nextTick()\n    update()\n  },\n  { immediate: true },\n)\nuseResizeObserver(barRef, () => update())\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":[],"mappings":";;;;;;;;;;oCAiBc;AAAA,EACZ,MAAM;AACR;;;;;;AAGA,UAAM,WAAW;AACjB,UAAM,WAAW,OAAO,kBAAkB;AAC1C,QAAI,CAAC;AAAU,iBAAW,gBAAgB,mCAAmC;AAE7E,UAAM,SAAS;AACf,UAAM,WAAW;AAEjB,UAAM,cAAc,MAAqB;AACvC,UAAI,SAAS;AACb,UAAI,UAAU;AAEd,YAAM,WAAW,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,MAAM,WAAW,IAClE,UACA;AACJ,YAAM,UAAU,aAAa,UAAU,MAAM;AAC7C,YAAM,WAAW,YAAY,MAAM,SAAS;AAE5C,YAAM,KAAK,MAAM,SAAO;AACtB,cAAM;AACN;AAAU;AAEV,iBAAS;AACP,iBAAO;AAAA;AAGT;AACA,sBAAc,4BAA4B;AAE1C,kDAA0C,GAAG;AAE7C;AACE;AAGA,2BAAiB,WAAW,UAAU;AAAW;AAEnD;AAAO;AAGT;AAAO;AACU,QACf,uBAAuB;AAAuB;AAChD;AAGF;AAEA,UACE,MAAM;AAEJ,qBAAe;AACf;AAAO;AAIX;AAEA;AAAa,WAEN;AAAA,MAEL;AAAA;;;;;;;;;;;;;;;"}