1 line
9.4 KiB
Plaintext
1 line
9.4 KiB
Plaintext
|
{"version":3,"file":"VTab.mjs","names":["makeVBtnProps","VBtn","useTextColor","forwardRefs","computed","ref","VTabsSymbol","animate","genericComponent","omit","propsFactory","standardEasing","useRender","makeVTabProps","fixed","Boolean","sliderColor","String","hideSlider","direction","type","default","selectedClass","variant","VTab","name","props","setup","_ref","slots","attrs","textColorClasses","sliderColorClasses","textColorStyles","sliderColorStyles","rootEl","sliderEl","isHorizontal","isSelected","value","group","updateSlider","_ref2","prevEl","$el","parentElement","querySelector","nextEl","color","getComputedStyle","prevBox","getBoundingClientRect","nextBox","xy","XY","rightBottom","widthHeight","prevPos","nextPos","delta","origin","Math","sign","size","abs","scale","max","initialScale","sigma","backgroundColor","transform","transformOrigin","Array","fill","duration","easing","btnProps","filterProps","_createVNode","_mergeProps","class","style","undefined","_Fragment","text"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { makeVBtnProps, VBtn } from '@/components/VBtn/VBtn'\n\n// Composables\nimport { useTextColor } from '@/composables/color'\nimport { forwardRefs } from '@/composables/forwardRefs'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { VTabsSymbol } from './shared'\nimport { animate, genericComponent, omit, propsFactory, standardEasing, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { VBtnSlots } from '@/components/VBtn/VBtn'\n\nexport const makeVTabProps = propsFactory({\n fixed: Boolean,\n\n sliderColor: String,\n hideSlider: Boolean,\n\n direction: {\n type: String as PropType<'horizontal' | 'vertical'>,\n default: 'horizontal',\n },\n\n ...omit(makeVBtnProps({\n selectedClass: 'v-tab--selected',\n variant: 'text' as const,\n }), [\n 'active',\n 'block',\n 'flat',\n 'location',\n 'position',\n 'symbol',\n ]),\n}, 'VTab')\n\nexport const VTab = genericComponent<VBtnSlots>()({\n name: 'VTab',\n\n props: makeVTabProps(),\n\n setup (props, { slots, attrs }) {\n const { textColorClasses: sliderColorClasses, textColorStyles: sliderColorStyles } = useTextColor(props, 'sliderColor')\n\n const rootEl = ref<VBtn>()\n const sliderEl = ref<HTMLElement>()\n\n const isHorizontal = computed(() => props.direction === 'horizontal')\n const isSelected = computed(() => rootEl.value?.group?.isSelected.value ?? false)\n\n function updateSlider ({ value }: { value: boolean }) {\n if (value) {\n const prevEl: HTMLElement | undefined = rootEl.value?.$el.parentElement?.querySelector('.v-tab--selected .v-tab__slider')\n const nextEl = sliderEl.value\n\n if (!prevEl || !nextEl) return\n\n const color = getComputedStyle(prevEl).color\n\n const prevBox = prevEl.getBoundingClientRect()\n const nextBox = nextEl.getBoundingClientRect()\n\n const xy = isHorizontal.value ? 'x' : 'y'\n const XY = isHorizontal.value ? 'X' : 'Y'\n const rightBottom = isHorizontal.value ? 'right' : 'bottom'\n const widthHeight = isHorizontal.value ? 'width' : 'height'\n\n const prevPos = prevBox[xy]\n const nextPos = nextBox[xy]\n const delta = prevPos > nextPos\n ? prevBox[rightBottom] - nextBox[rightBottom]\n : prevBox[xy] - nextBox[xy]\n const origin =\n Math.sign(delta) > 0 ? (isHorizontal.value ? 'right' : 'bottom')\n : Math.sign(delta) < 0 ? (isHorizontal.value ? 'left' : 'top')\n : 'center'\n const size = Math.abs(delta) + (Math.sign(delta) < 0 ? prevBox[widthHeight] : nextBox[widthHeight])\n const scale = size / Math.max(prevBox[widthHeight], nextBox[widthHeight]) || 0\n const initialScale = prevBox[widthHeight] / nextBox[widthHeight] || 0\n\n const sigma = 1.5\n animate(nextEl, {\n backgroundColor: [color, 'currentcolor'],\n transform: [\n `tra
|