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

Vue Material Component Framework

{"version":3,"file":"VTab.mjs","names":["VBtn","IconValue","makeGroupItemProps","makeRouterProps","makeTagProps","makeThemeProps","useTextColor","computed","ref","animate","genericComponent","pick","standardEasing","useRender","VTabsSymbol","VTab","name","props","fixed","Boolean","icon","String","Function","Object","prependIcon","appendIcon","stacked","title","ripple","type","default","color","sliderColor","hideSlider","direction","selectedClass","setup","slots","attrs","textColorClasses","sliderColorClasses","textColorStyles","sliderColorStyles","isHorizontal","isSelected","rootEl","sliderEl","updateSlider","value","prevEl","$el","parentElement","querySelector","nextEl","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","undefined"],"sources":["../../../src/components/VTabs/VTab.tsx"],"sourcesContent":["// Styles\nimport './VTab.sass'\n\n// Components\nimport { VBtn } from '@/components/VBtn'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeGroupItemProps } from '@/composables/group'\nimport { makeRouterProps } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps } from '@/composables/theme'\nimport { useTextColor } from '@/composables/color'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { animate, genericComponent, pick, standardEasing, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport { VTabsSymbol } from './shared'\n\nexport const VTab = genericComponent()({\n  name: 'VTab',\n\n  props: {\n    fixed: Boolean,\n    icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n    prependIcon: IconValue,\n    appendIcon: IconValue,\n\n    stacked: Boolean,\n    title: String,\n\n    ripple: {\n      type: Boolean,\n      default: true,\n    },\n    color: String,\n    sliderColor: String,\n    hideSlider: Boolean,\n\n    direction: {\n      type: String as PropType<'horizontal' | 'vertical'>,\n      default: 'horizontal',\n    },\n\n    ...makeTagProps(),\n    ...makeRouterProps(),\n    ...makeGroupItemProps({\n      selectedClass: 'v-tab--selected',\n    }),\n    ...makeThemeProps(),\n  },\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 = ref(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])\n        const initialScale = prevBox[widthHeight] / nextBox[widthHeight]\n\n        const sigma = 1.5\n        animate(nextEl, {\n          backgroundColor: [color, ''],\n          transform: [\n            `translate${XY}(${delta}px) scale${XY}(${initialScale})`,\n            `translate${XY}(${delta / sigma}px) scale${XY}(${(scale - 1) / sigma + 1})`,\n            '',\n          ],\n          transformOrigin: Array(3).fill(origin),\n        }, {\n          duration: 225,\n          easing: standardEasing,\n        })\n      }\n    }\n\n    useRender(() => {\n      const [btnProps] = pick(props, [\n        'href',\n        'to',\n        'replace',\n        'icon',\n        'stacked',\n        'prependIcon',\n        'appendIcon',\n        'ripple',\n        'theme',\n        'disabled',\n        'selectedClass',\n        'value',\n        'color',\n      ])\n\n      return (\n        <VBtn\n          _as=\"VTab\"\n          symbol={ VTabsSymbol }\n          ref={ rootEl }\n          class={[\n            'v-tab',\n          ]}\n          tabindex={ isSelected.value ? 0 : -1 }\n          role=\"tab\"\n          aria-selected={ String(isSelected.value) }\n          active={ false }\n          block={ props.fixed }\n          maxWidth={ props.fixed ? 300 : undefined }\n          variant=\"text\"\n          rounded={ 0 }\n          { ...btnProps }\n          { ...attrs }\n          onGroup:selected={ updateSlider }\n        >\n          { slots.default ? slots.default() : props.title }\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        </VBtn>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VTab = InstanceType<typeof VTab>\n"],"mappings":"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"}