hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 3.05 kB
Source Map (JSON)
{"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;;;;;;;;;;;;;;;"}