vuetify/lib/components/VTabs/VTab.mjs.map

Vue Material Component Framework

{"version":3,"file":"VTab.mjs","names":["makeVBtnProps","VBtn","useTextColor","computed","ref","shallowRef","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","isHorizontal","isSelected","rootEl","sliderEl","updateSlider","_ref2","value","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'\n\n// Utilities\nimport { computed, ref, shallowRef } 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    const isHorizontal = computed(() => props.direction === 'horizontal')\n    const isSelected = shallowRef(false)\n\n    const rootEl = ref<VBtn>()\n    const sliderEl = ref<HTMLElement>()\n\n    function updateSlider ({ value }: { value: boolean }) {\n      isSelected.value = value\n\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            `translate${XY}(${delta}px) scale${XY}(${initialScale})`,\n            `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,\n            'none',\n          ],\n          transformOrigin: Array(3).fill(origin),\n        }, {\n          duration: 225,\n          easing: standardEasing,\n        })\n      }\n    }\n\n    useRender(() => {\n      const btnProps = VBtn.filterProps(props)\n\n      return (\n        <VBtn\n          symbol={ VTabsSymbol }\n          ref={ rootEl }\n          class={[\n            'v-tab',\n            props.class,\n          ]}\n          style={ props.style }\n          tabindex={ isSelected.value ? 0 : -1 }\n          role=\"tab\"\n          aria-selected={ String(isSelected.value) }\n          active={ false }\n          { ...btnProps }\n          { ...attrs }\n          block={ props.fixed }\n          maxWidth={ props.fixed ? 300 : undefined }\n          onGroup:selected={ updateSlider }\n        >\n          {{\n            ...slots,\n            default: () => (\n              <>\n                { slots.default?.() ?? props.text }\n\n                { !props.hideSlider && (\n                  <div\n                    ref={ sliderEl }\n                    class={[\n                      'v-tab__slider',\n                      sliderColorClasses.value,\n                    ]}\n                    style={ sliderColorStyles.value }\n                  />\n                )}\n              </>\n            ),\n          }}\n        </VBtn>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTab = InstanceType<typeof VTab>\n"],"mappings":"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"}