{"version":3,"file":"_nuxt/Dc0DmrJV.js","sources":["../../../../components/Main/MainCategoryListItem.vue","../../../../components/Main/MainCategoryListDesktop.vue","../../../../components/Main/MainCategoryListMobile.vue","../../../../components/Main/MainCategoryList.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onMounted, PropType } from 'vue'\nimport { useRoute } from 'vue-router'\n\n/* Types */\nimport { Category } from '@/types/api/api-v3/category'\n\nconst emit = defineEmits(['isCategoryActive'])\n\nconst props = defineProps({\n  category: {\n    required: true,\n    type: Object as PropType<Category>,\n  },\n  isCategoryPage: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n})\n\nconst route = useRoute()\n\nconst { isDesktop } = useDevice()\n\nconst isErrorImage = ref(false)\n\nconst productImage = computed(() => {\n  if (isErrorImage.value || !props.category.image) {\n    return './no-image-category.svg'\n  }\n\n  return props.category.image\n})\n\nconst isCategoryActive = computed(() => {\n  return props.category.path === route.path\n})\n\nonMounted(() => {\n  if (isCategoryActive.value) {\n    emit('isCategoryActive')\n  }\n})\n\nconst slideItemClasses = computed(() => {\n  return [\n    isDesktop ? 'categories-item' : 'categories-item--mobile',\n    props.category.path === route.path ? 'active--category' : '',\n    { 'categories-item-page': props.isCategoryPage },\n  ]\n})\n\nconst isSale = computed(() => props.category.slug === 'sales')\n</script>\n\n<template>\n  <nuxt-link\n    v-ripple\n    :to=\"category.path\"\n    itemprop=\"url\"\n    :class=\"slideItemClasses\"\n    :prefetch=\"false\"\n  >\n    <nuxt-img\n      v-if=\"!isCategoryPage && !isSale\"\n      :alt=\"category.slug\"\n      :src=\"productImage\"\n      itemprop=\"image\"\n      class=\"categories-item__image\"\n      @error=\"isErrorImage = true\"\n    />\n    <nuxt-img\n      v-else-if=\"!isCategoryPage\"\n      :alt=\"category.slug\"\n      :src=\"productImage\"\n      itemprop=\"image\"\n      class=\"categories-item__image\"\n      @error=\"isErrorImage = true\"\n    />\n\n    <span itemprop=\"name\" class=\"categories-item__title\">\n      {{ category.name }}\n    </span>\n  </nuxt-link>\n</template>\n\n<style lang=\"scss\" scoped>\n.categories-item {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  overflow: hidden;\n  background: #f9fafb;\n  border-radius: 20px;\n\n  &__title {\n    width: 100%;\n    padding: 0 0 25px 12px;\n    margin-top: 8px;\n    font-size: 12px;\n    font-weight: 800;\n    line-height: 14px;\n    color: $text-dark-gray;\n\n    @include media('>=desktop') {\n      white-space: pre-wrap;\n    }\n  }\n\n  &-page {\n    height: 30px !important;\n    margin-right: 8px !important;\n\n    .categories-item__title {\n      padding: 7px 12px;\n      margin-top: 0;\n    }\n  }\n\n  @include media('>=tablet') {\n    width: 90px;\n    height: 112px;\n\n    &:nth-child(1n) {\n      margin-right: 12px;\n    }\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  &__image {\n    width: 76px;\n    height: 60px;\n    margin-top: 4px;\n\n    @include media('>=phone') {\n      width: 92px;\n      height: 72px;\n    }\n    @include media('>=desktop') {\n      width: 80px;\n      height: 62px;\n    }\n  }\n}\n\n.categories-item--mobile {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  width: 100%;\n  height: 107px;\n  padding-bottom: 4px;\n  margin-right: 0;\n  background: #f9fafb;\n  border-radius: 20px;\n\n  @include media('<=desktop-mini') {\n    padding-bottom: 0;\n  }\n\n  @include media('>=phone') {\n    height: 131px;\n  }\n  @include media('>=portrait-phone') {\n    height: 190px;\n  }\n\n  &__title {\n    margin-top: 14px;\n\n    @include media('>=phone') {\n      margin-top: 18px;\n    }\n\n    @include media('>=portrait-phone') {\n      margin-top: 24px;\n    }\n  }\n}\n\n.active--category {\n  background-color: #fff3ee;\n  border-radius: 20px;\n\n  .categories-item__title {\n    color: $primary;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Components */\nimport MainCategoryListItem from '@/components/Main/MainCategoryListItem.vue'\nimport IconArrowRight from '@/components/Icons/IconArrowRight.vue'\nimport IconArrowLeft from '@/components/Icons/IconArrowLeft.vue'\n\n/* Types */\nimport { Category } from '@/types/api/api-v3/category'\n\nconst props = defineProps({\n  simpleCategories: {\n    required: true,\n    type: Object as PropType<Category[]>,\n  },\n})\n</script>\n\n<template>\n  <nav itemscope itemtype=\"http://schema.org/SiteNavigationElement\">\n    <v-slide-group\n      :prev-icon=\"IconArrowLeft\"\n      :next-icon=\"IconArrowRight\"\n      show-arrows\n    >\n      <main-category-list-item\n        v-for=\"(category, index) in props.simpleCategories\"\n        :key=\"index\"\n        :category=\"category\"\n      />\n    </v-slide-group>\n  </nav>\n</template>\n\n<style lang=\"scss\" scoped>\n.v-slide-group {\n  position: relative;\n  display: flex;\n  flex: 0 1 auto;\n  max-width: 100%;\n  height: 112px;\n  overflow: unset;\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n\n:deep() {\n  .v-slide-group__prev,\n  .v-slide-group__next {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    width: 30px;\n    height: 100%;\n\n    &--disabled {\n      display: none;\n    }\n\n    .v-icon:before {\n      color: $text-black;\n    }\n  }\n\n  .v-slide-group__next {\n    right: -0;\n    background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);\n  }\n\n  .v-slide-group__prev {\n    left: 0;\n    background: linear-gradient(90deg, white, rgba(255, 255, 255, 0));\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { PropType } from 'vue'\n\n/* Types */\nimport { Category } from '@/types/api/api-v3/category'\n\n/* Components */\nimport MainCategoryListItem from '@/components/Main/MainCategoryListItem.vue'\nconst IconArrowLeft = defineAsyncComponent(\n  () => import('@/components/Icons/IconArrowLeft.vue'),\n)\nconst IconArrowRight = defineAsyncComponent(\n  () => import('@/components/Icons/ArrowRight.vue'),\n)\n\nconst props = defineProps({\n  simpleCategories: {\n    required: true,\n    type: Array as PropType<Category[]>,\n  },\n  isCategoryPage: {\n    type: Boolean,\n    required: false,\n  },\n})\n\nconst sale = ref<Category>({\n  icon: '/main-category-sale.webp',\n  image: '/main-category-sale.webp',\n  is_filter: false,\n  is_japan: false,\n  name: 'Акции',\n  path: '/sales/',\n  slug: 'sales',\n})\n\nconst currentCategory = ref<number | null>(null)\n\nconst findCategoryIndex = (categorySlug: string) => {\n  currentCategory.value = props.simpleCategories.findIndex(\n    (category) => category.slug === categorySlug,\n  )\n}\n</script>\n\n<template>\n  <nav\n    itemscope\n    itemtype=\"http://schema.org/SiteNavigationElement\"\n    class=\"category\"\n  >\n    <!-- Список категорий для главной страницы  -->\n    <section v-if=\"!isCategoryPage\" class=\"category__list\">\n      <!-- Захардкоженная категория акции на фронте-->\n      <main-category-list-item :category=\"sale\" />\n\n      <main-category-list-item\n        v-for=\"(category, index) in simpleCategories\"\n        :key=\"index\"\n        :category=\"category\"\n        class=\"categories-item\"\n      />\n    </section>\n    <!-- Список категорий для страницы отдельной категории  -->\n    <v-slide-group\n      v-else\n      v-model=\"currentCategory\"\n      show-arrows\n      center-active\n      :prev-icon=\"IconArrowLeft\"\n      :next-icon=\"IconArrowRight\"\n    >\n      <!-- Захардкоженная категория акции на фронте-->\n      <main-category-list-item\n        :category=\"sale\"\n        :is-category-page=\"isCategoryPage\"\n      />\n      <main-category-list-item\n        v-for=\"(category, index) in simpleCategories\"\n        :key=\"index\"\n        :category=\"category\"\n        :is-category-page=\"isCategoryPage\"\n        @is-category-active=\"findCategoryIndex(category.slug)\"\n      />\n    </v-slide-group>\n  </nav>\n</template>\n\n<style lang=\"scss\" scoped>\n.category {\n  &__list {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 10px;\n\n    @include media('>=tablet') {\n      grid-template-columns: repeat(4, 1fr);\n      gap: 20px;\n    }\n\n    :deep(.categories-item__title) {\n      white-space: normal;\n    }\n  }\n  .categories-item-page:first-child {\n    margin-left: 15px;\n  }\n  .categories-item-page:last-child {\n    margin-right: 15px;\n  }\n}\n:deep() {\n  .categories-item__title {\n    white-space: nowrap;\n  }\n\n  .v-slide-group {\n    position: relative;\n    overflow: unset;\n  }\n\n  .v-slide-group__prev,\n  .v-slide-group__next {\n    position: absolute;\n    top: 0;\n    z-index: 1;\n    min-width: 35px !important;\n    height: 100%;\n    &--disabled {\n      display: none;\n    }\n    .v-icon__component {\n      width: 6px;\n      height: 11px;\n      path {\n        fill: #2c2f39;\n      }\n    }\n  }\n  .v-slide-group__next {\n    right: 0;\n    background: linear-gradient(\n      270deg,\n      #fff 0%,\n      rgba(255, 255, 255, 0.5) 91.67%\n    );\n  }\n  .v-slide-group__prev {\n    left: 0;\n    background: linear-gradient(\n      90deg,\n      #fff 0%,\n      rgba(255, 255, 255, 0.5) 91.67%\n    );\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/* Components */\nimport MainCategoryListDesktop from '@/components/Main/MainCategoryListDesktop.vue'\nimport MainCategoryListMobile from '@/components/Main/MainCategoryListMobile.vue'\n\n/* Types */\nimport { Success } from '@/api/results'\nimport { AsyncDataKey } from '@/types/main'\n\ntype Props = {\n  isCategoryPage?: boolean\n}\n\nconst props = defineProps<Props>()\n\nconst { data: simpleCategories } = await useAsyncData(\n  AsyncDataKey.SIMLE_CATEGORIES,\n  async (nuxtApp) => {\n    const result = await nuxtApp?.$apiService.category.fetchSimpleCategories()\n\n    if (result instanceof Success) {\n      return result.data\n    }\n\n    return []\n  },\n  {\n    lazy: true,\n  },\n)\n\nconst { isDesktop } = useDevice()\n</script>\n\n<template>\n  <div class=\"category\">\n    <div\n      class=\"category__list\"\n      :class=\"{ 'category__list--page': props.isCategoryPage }\"\n    >\n      <main-category-list-desktop\n        v-if=\"isDesktop\"\n        id=\"desktop-category\"\n        :simple-categories=\"simpleCategories\"\n      />\n\n      <main-category-list-mobile\n        v-else\n        :simple-categories=\"simpleCategories\"\n        :is-category-page=\"props.isCategoryPage\"\n      />\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.category__list {\n  min-height: 112px;\n  padding: 30px 0 0;\n\n  @include media('<=desktop-mini') {\n    padding: 27px 24px;\n  }\n  @include media('<=tablet') {\n    padding: 27px 0;\n  }\n  &--page {\n    min-height: inherit;\n    padding: 15px 0;\n    border-bottom: 1px solid #f1f4f9;\n  }\n}\n</style>\n"],"names":["emit","__emit","props","__props","route","useRoute","isDesktop","useDevice","isErrorImage","ref","productImage","computed","isCategoryActive","onMounted","slideItemClasses","isSale","IconArrowLeft","defineAsyncComponent","__vitePreload","IconArrowRight","sale","currentCategory","findCategoryIndex","categorySlug","category","simpleCategories","__temp","__restore","_withAsyncContext","useAsyncData","AsyncDataKey","nuxtApp","result","Success"],"mappings":";;;;;;;;49BAOA,MAAMA,EAAOC,EAEPC,EAAQC,EAYRC,EAAQC,IAER,CAAE,UAAAC,GAAcC,IAEhBC,EAAeC,EAAI,EAAK,EAExBC,EAAeC,EAAS,IACxBH,EAAa,OAAS,CAACN,EAAM,SAAS,MACjC,0BAGFA,EAAM,SAAS,KACvB,EAEKU,EAAmBD,EAAS,IACzBT,EAAM,SAAS,OAASE,EAAM,IACtC,EAEDS,EAAU,IAAM,CACVD,EAAiB,OACnBZ,EAAK,kBAAkB,CACzB,CACD,EAEK,MAAAc,EAAmBH,EAAS,IACzB,CACLL,EAAY,kBAAoB,0BAChCJ,EAAM,SAAS,OAASE,EAAM,KAAO,mBAAqB,GAC1D,CAAE,uBAAwBF,EAAM,cAAe,EAElD,EAEKa,EAASJ,EAAS,IAAMT,EAAM,SAAS,OAAS,OAAO,svBC1C7D,MAAMA,EAAQC,kgBCHd,MAAMa,EAAgBC,EACpB,IAAMC,EAAA,WAAO,eAAsC,+CAE/CC,EAAiBF,EACrB,IAAMC,EAAA,WAAO,eAAmC,6CAG5ChB,EAAQC,EAWRiB,EAAOX,EAAc,CACzB,KAAM,2BACN,MAAO,2BACP,UAAW,GACX,SAAU,GACV,KAAM,QACN,KAAM,UACN,KAAM,QACP,EAEKY,EAAkBZ,EAAmB,IAAI,EAEzCa,EAAqBC,GAAyB,CAClCF,EAAA,MAAQnB,EAAM,iBAAiB,UAC5CsB,GAAaA,EAAS,OAASD,CAAA,CAClC,u6BC5BF,MAAMrB,EAAQC,EAER,CAAE,KAAMsB,IAAqB,CAAAC,EAAAC,CAAA,EAAAC,EAAA,SAAMC,EACvCC,EAAa,iBACb,MAAOC,GAAY,CACjB,MAAMC,EAAS,MAAMD,GAAA,YAAAA,EAAS,YAAY,SAAS,yBAEnD,OAAIC,aAAkBC,EACbD,EAAO,KAGT,EACT,EACA,CACE,KAAM,EACR,EACF,mBAEM,CAAE,UAAA1B,GAAcC","debug_id":"aadfe594-373c-5440-9590-6d055a3a1e88"}