{"version":3,"file":"Dmw8Ziht.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/tabs/constants.ts","../../../../node_modules/@smenaspace/ui-layer/components/tabs/TabsItem.vue","../../../../node_modules/@smenaspace/ui-layer/components/tabs/Tabs.vue"],"sourcesContent":["export const APP_TABS_KEY = 'APP_TABS_KEY'\n","<script setup lang=\"ts\">\nimport type { PrimitivesValue } from '../../types/shared'\nimport type { TabsInjection } from './types'\nimport { APP_TABS_KEY } from './constants'\n\ntype Props = {\n  value: PrimitivesValue\n}\n\nconst props = defineProps<Props>()\n\nconst attrs = useAttrs()\n\nconst component = computed(() => {\n  if (attrs.href) return 'a'\n\n  if (attrs.to) return resolveComponent('NuxtLink')\n\n  return 'button'\n})\n\nconst isSelected = computed(() => {\n  if (attrs.to && typeof attrs.to === 'string') {\n    return String(injection?.selectedValue.value).startsWith(\n      String(props.value),\n    )\n  }\n\n  return injection?.selectedValue.value === props.value\n})\n\nconst tabIndex = computed(() => {\n  return isSelected.value ? -1 : 0\n})\n\nconst onClick = () => injection?.updateValue(props.value)\n\nconst injection = inject<TabsInjection>(APP_TABS_KEY)\n</script>\n\n<template>\n  <component\n    :is=\"component\"\n    class=\"app-tab\"\n    :class=\"{ 'app-tab--selected': isSelected }\"\n    v-bind=\"$attrs\"\n    role=\"tab\"\n    type=\"button\"\n    :aria-selected=\"isSelected\"\n    :tabindex=\"tabIndex\"\n    @click=\"onClick\"\n  >\n    <slot />\n  </component>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-tab {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n  letter-spacing: -0.01em;\n  white-space: nowrap;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { PrimitivesValue } from '../../types/shared'\nimport type { TabsType, TabsSize } from './types'\nimport { APP_TABS_KEY } from './constants'\n\ntype Props = {\n  modelValue?: PrimitivesValue\n  type?: TabsType\n  size?: TabsSize\n  isSingle?: boolean\n  block?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: '',\n  type: 'button',\n  size: 'md',\n  block: true,\n})\n\nconst emit = defineEmits(['update:model-value'])\n\nconst selectedValue = ref<PrimitivesValue>(props.modelValue)\n\nconst tabsElement = ref<HTMLElement | null>(null)\n\nconst sliderStyles = ref({\n  width: '100%',\n  transform: 'translateX(0px)',\n  opacity: 0,\n})\n\nconst componentClasses = computed(() => {\n  const classes = [\n    'app-tabs',\n    `app-tabs--type-${props.type}`,\n    `app-tabs--size-${props.size}`,\n  ]\n\n  if (props.isSingle) classes.push('app-tabs--single')\n\n  if (props.block) classes.push('app-tabs--block')\n\n  return classes\n})\n\nconst getSliderStyles = () => {\n  const selectedTab = tabsElement?.value?.querySelector(\n    '.app-tab--selected',\n  ) as HTMLElement\n\n  if (!selectedTab) return\n\n  const { clientWidth, offsetLeft } = selectedTab\n\n  sliderStyles.value.width = `${clientWidth}px`\n  sliderStyles.value.transform = `translateX(${offsetLeft}px)`\n  sliderStyles.value.opacity = 1\n}\n\nconst updateValue = (newValue: PrimitivesValue) => {\n  selectedValue.value = newValue\n\n  emit('update:model-value', newValue)\n}\n\nwatch(\n  () => props.modelValue,\n  (updatedValue) => (selectedValue.value = updatedValue),\n)\n\nonMounted(() => getSliderStyles())\n\nonUpdated(() => getSliderStyles())\n\nprovide(APP_TABS_KEY, { selectedValue, updateValue })\n</script>\n\n<template>\n  <div\n    v-bind=\"$attrs\"\n    ref=\"tabsElement\"\n    :class=\"componentClasses\"\n    role=\"tablist\"\n  >\n    <div class=\"app-tabs__content\">\n      <div class=\"app-tabs__slider\" :style=\"sliderStyles\" />\n      <slot />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/ui-layer/styles/mixins';\n\n.app-tabs {\n  max-width: 100%;\n  overflow: auto;\n  @include invisible-scroll-bar();\n\n  &__content {\n    position: relative;\n    display: flex;\n    border-radius: inherit;\n  }\n\n  &__slider {\n    position: absolute;\n    pointer-events: none;\n    opacity: 0;\n    transition-delay: 0s, 0s, 0.2s;\n    transition-timing-function: cubic-bezier(0.25, 0.8, 0.5, 1);\n    transition-duration: 0.2s;\n    transition-property: width, transform, opacity;\n  }\n\n  &--block {\n    width: 100%;\n  }\n\n  &--single {\n    background-color: transparent !important;\n\n    .app-tabs__content {\n      display: block;\n    }\n\n    :deep(.app-tab) {\n      width: 100%;\n      pointer-events: none;\n      cursor: auto;\n      background-color: transparent;\n      box-shadow: none;\n    }\n\n    :deep(.app-tab__slider) {\n      box-shadow: none !important;\n    }\n  }\n\n  &--size-sm {\n    height: 32px;\n\n    :deep(.app-tab) {\n      height: 26px;\n      padding: 0 8px;\n      font-size: 12px;\n    }\n  }\n\n  &--size-md {\n    height: 40px;\n\n    :deep(.app-tab) {\n      height: 34px;\n      padding: 0 10px;\n      font-size: 14px;\n    }\n  }\n\n  &--type-button {\n    padding: 3px;\n    background-color: var(--ui-grey);\n    border-radius: 100px;\n\n    :deep(.app-tab) {\n      position: relative;\n      flex: 0 1 auto;\n      width: 100%;\n      font-weight: 600;\n      line-height: 19px;\n      color: var(--ui-text-primary);\n      border-radius: 100px;\n    }\n\n    :deep(.app-tab--selected) {\n      font-weight: 800;\n      pointer-events: none;\n    }\n\n    .app-tabs__slider {\n      top: 0;\n      bottom: 0;\n      background-color: var(--ui-white);\n      border-radius: 100px;\n      box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.04),\n        0 3px 8px 0 rgba(0, 0, 0, 0.12);\n    }\n  }\n\n  &--type-text {\n    height: 40px;\n    border-bottom: 1px solid rgba(var(--ui-secondary-rgb), 0.3);\n\n    .app-tabs__content {\n      gap: 24px;\n    }\n\n    :deep(.app-tab) {\n      align-items: flex-start;\n      min-width: auto;\n      height: 40px;\n      padding: 0;\n      font-size: 16px;\n      font-weight: 600;\n      line-height: 21px;\n      color: var(--ui-text-secondary);\n      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    }\n\n    :deep(.app-tab--selected) {\n      font-weight: 800;\n      color: var(--ui-text-primary);\n    }\n\n    .app-tabs__slider {\n      bottom: 1px;\n      height: 2px;\n      background-color: var(--ui-primary) !important;\n    }\n  }\n}\n</style>\n"],"names":["APP_TABS_KEY","props","__props","attrs","useAttrs","component","computed","__nuxt_component_0","isSelected","injection","tabIndex","onClick","inject","emit","__emit","selectedValue","ref","tabsElement","sliderStyles","componentClasses","classes","getSliderStyles","selectedTab","_a","clientWidth","offsetLeft","updateValue","newValue","watch","updatedValue","onMounted","onUpdated","provide"],"mappings":";;6eAAO,MAAMA,EAAe,4FCS5B,MAAMC,EAAQC,EAERC,EAAQC,IAERC,EAAYC,EAAS,IACrBH,EAAM,KAAa,IAEnBA,EAAM,GAAWI,EAEd,QACR,EAEKC,EAAaF,EAAS,IACtBH,EAAM,IAAM,OAAOA,EAAM,IAAO,SAC3B,OAAOM,GAAA,YAAAA,EAAW,cAAc,KAAK,EAAE,WAC5C,OAAOR,EAAM,KAAK,CAAA,GAIfQ,GAAA,YAAAA,EAAW,cAAc,SAAUR,EAAM,KACjD,EAEKS,EAAWJ,EAAS,IACjBE,EAAW,MAAQ,GAAK,CAChC,EAEKG,EAAU,IAAMF,GAAA,YAAAA,EAAW,YAAYR,EAAM,OAE7CQ,EAAYG,EAAsBZ,CAAY,kjBCxBpD,MAAMC,EAAQC,EAORW,EAAOC,EAEPC,EAAgBC,EAAqBf,EAAM,UAAU,EAErDgB,EAAcD,EAAwB,IAAI,EAE1CE,EAAeF,EAAI,CACvB,MAAO,OACP,UAAW,kBACX,QAAS,CAAA,CACV,EAEKG,EAAmBb,EAAS,IAAM,CACtC,MAAMc,EAAU,CACd,WACA,kBAAkBnB,EAAM,IAAI,GAC5B,kBAAkBA,EAAM,IAAI,EAAA,EAG9B,OAAIA,EAAM,UAAkBmB,EAAA,KAAK,kBAAkB,EAE/CnB,EAAM,OAAemB,EAAA,KAAK,iBAAiB,EAExCA,CAAA,CACR,EAEKC,EAAkB,IAAM,OACtB,MAAAC,GAAcC,EAAAN,GAAA,YAAAA,EAAa,QAAb,YAAAM,EAAoB,cACtC,sBAGF,GAAI,CAACD,EAAa,OAEZ,KAAA,CAAE,YAAAE,EAAa,WAAAC,CAAe,EAAAH,EAEvBJ,EAAA,MAAM,MAAQ,GAAGM,CAAW,KAC5BN,EAAA,MAAM,UAAY,cAAcO,CAAU,MACvDP,EAAa,MAAM,QAAU,CAAA,EAGzBQ,EAAeC,GAA8B,CACjDZ,EAAc,MAAQY,EAEtBd,EAAK,qBAAsBc,CAAQ,CAAA,EAGrC,OAAAC,EACE,IAAM3B,EAAM,WACX4B,GAAkBd,EAAc,MAAQc,CAAA,EAGjCC,EAAA,IAAMT,GAAiB,EAEvBU,EAAA,IAAMV,GAAiB,EAEjCW,EAAQhC,EAAc,CAAE,cAAAe,EAAe,YAAAW,CAAa,CAAA","debug_id":"ecda9afb-8471-5cb7-b2cb-0609468b608f"}