{"version":3,"file":"QWxRV-Hw.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/tabs/types.ts","../../../../node_modules/@smenaspace/ui-layer/components/tabs/TabsItem.vue","../../../../node_modules/@smenaspace/ui-layer/components/tabs/Tabs.vue"],"sourcesContent":["export type Value = string | number | boolean\n\nexport type Type = 'button' | 'text'\n\nexport type Size = 'sm' | 'md'\n\nexport type Injection = {\n  selectedValue: Ref<Value>\n  updateValue: (value: Value) => void\n}\n\nexport const APP_TABS_KEY = 'APP_TABS_KEY'\n","<script setup lang=\"ts\">\nimport { APP_TABS_KEY, type Injection } from './types'\n\ntype Props = {\n  value: string | number | boolean\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  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<Injection>(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  &--selected {\n    pointer-events: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { type Type, type Size, type Value, APP_TABS_KEY } from './types'\n\ntype Props = {\n  modelValue?: Value\n  type?: Type\n  size?: Size\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<Value>(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: Value) => {\n  selectedValue.value = newValue\n\n  emit('update:model-value', newValue)\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    }\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","onMounted","onUpdated","provide"],"mappings":";;4fAWO,MAAMA,EAAe,4FCJ5B,MAAMC,EAAQC,EAERC,EAAQC,IAERC,EAAYC,EAAS,IACrBH,EAAM,KAAa,IAEnBA,EAAM,GAAWI,EAEd,QACR,EAEKC,EAAaF,EAAS,KACnBG,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,EAAkBZ,CAAY,kjBClBhD,MAAMC,EAAQC,EAORW,EAAOC,EAEPC,EAAgBC,EAAWf,EAAM,UAAU,EAE3CgB,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,GAAoB,CACvCZ,EAAc,MAAQY,EAEtBd,EAAK,qBAAsBc,CAAQ,CAAA,EAG3B,OAAAC,EAAA,IAAMP,GAAiB,EAEvBQ,EAAA,IAAMR,GAAiB,EAEjCS,EAAQ9B,EAAc,CAAE,cAAAe,EAAe,YAAAW,CAAa,CAAA","debug_id":"085ce587-f045-51d7-a3ec-b11a48ea13a2"}