{"version":3,"file":"iDpaB9TQ.js","sources":["../../../../pages/brands/[category].vue"],"sourcesContent":["<template>\n  <div class=\"brands-category\">\n    <h1 class=\"brands-category__title\">\n      {{ pageTitle }}\n    </h1>\n\n    <div class=\"brands-category__navigation\">\n      <div class=\"wrapper\">\n        <div class=\"brands-category__nav-groups\">\n          <a\n            v-for=\"(brands, keyOfGroup) in getBrandsByGroups(data?.items ?? [])\"\n            :key=\"keyOfGroup\"\n            :href=\"getId(keyOfGroup, '#')\"\n            class=\"brands-category__nav-groups__item brands-category__link\"\n            @click.prevent=\"scrollToGroup(keyOfGroup)\"\n          >\n            {{ keyOfGroup }}\n          </a>\n        </div>\n        <UISearchInput\n          v-model.trim=\"searchQuery\"\n          placeholder=\"Поиск по бренду\"\n          class=\"brands-category__input\"\n        />\n      </div>\n    </div>\n\n    <div class=\"wrapper brands-category__groups\">\n      <div\n        v-for=\"(brands, keyOfGroup) in brandsByGroups\"\n        :key=\"keyOfGroup\"\n        class=\"brands-category__group\"\n      >\n        <div\n          :id=\"getId(keyOfGroup)\"\n          class=\"brands-category__group__title\"\n        >\n          {{ keyOfGroup }}\n        </div>\n        <div class=\"brands-category__group__items\">\n          <div\n            v-for=\"brand in brands\"\n            :key=\"brand.name\"\n            class=\"brands-category__group__brand-item\"\n          >\n            <nuxt-link\n              :to=\"getUrlName(brand)\"\n              class=\"brands-category__group__brand-item-link brands-category__link\"\n            >\n              {{ brand.name }}\n            </nuxt-link>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div\n      v-if=\"!filteredBrands?.length && searchQuery\"\n      class=\"brands-category__empty\"\n    >\n      По запросу <span>{{ searchQuery }}</span> ничего не найдено\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useCatalogProvider } from '~/providers/catalog';\nimport { useCategoryRoots } from '~/services/catalogFilter/categories';\nimport { useBrands } from '~/services/catalogFilter/brands';\nimport UISearchInput from '~/components/ui/UISearchInput.vue';\nimport { parentCategoryUrl } from '~/types/components/search';\nimport { BrandDTO } from '~/restAPI/data-contracts';\n\nconst route = useRoute();\nconst { categoryRoot } = useCategoryRoots();\nconst { fetchBrandsByCategory } = useCatalogProvider();\nconst { getBrandsByGroups } = useBrands();\n\nconst category = categoryRoot.value.get(`${route.params!.category}` as parentCategoryUrl);\nconst { data } = await useAsyncData(route.path, () => fetchBrandsByCategory(category!.id));\n\nconst searchQuery = ref('');\n\nconst filteredBrands = computed(() => {\n  if (!searchQuery.value) return data.value?.items;\n\n  return data.value?.items?.filter((brand: BrandDTO) => brand?.name?.toLowerCase()?.includes(searchQuery.value.toLowerCase()));\n});\n\nconst brandsByGroups = computed(() => getBrandsByGroups(filteredBrands.value ?? []));\n\nfunction getId(keyOfGroup: string, hash?: '#') {\n  return `${hash || ''}char-${keyOfGroup.charCodeAt(0)}`;\n}\n\nfunction scrollToGroup(keyOfGroup: string) {\n  const $group = document.querySelector(getId(keyOfGroup, '#'));\n\n  $group?.scrollIntoView({ block: 'center', behavior: 'smooth' });\n}\n\nfunction getUrlName(brand: BrandDTO) {\n  if (!brand.urlName) return route.path;\n\n  if (route.path.slice(-1) === '/') {\n    return `${route.path}${brand.urlName}`;\n  }\n\n  return `${route.path}/${brand.urlName}`;\n}\n\nconst titles: Record<string, string> = {\n  zhenskoe: 'Бренды для женщин',\n  muzhskoe: 'Бренды для мужчин',\n  detskoe: 'Бренды для детей',\n  lifestyle: 'Бренды для lifestyle',\n};\nconst pageTitle = computed(() => titles[`${route.params!.category}`]);\n\nuseHead({\n  title: `${pageTitle.value} — Интернет магазин Oskelly`,\n});\n</script>\n\n<style scoped lang=\"scss\">\n.brands-category {\n  position: relative;\n\n  .wrapper {\n    padding: 0 16px;\n  }\n\n  &__title {\n    font-size: 38px;\n    text-align: center;\n    font-family: \"Playfair Display\";\n    text-transform: uppercase;\n    color: #333;\n    letter-spacing: 2px;\n\n    @media (max-width: 768px) {\n      font-size: 28px;\n      letter-spacing: 1px;\n    }\n  }\n\n  &__navigation {\n    position: sticky;\n    top: -50px;\n    border-top: 1px solid #f2f2f2;\n    border-bottom: 1px solid #f2f2f2;\n    padding: 16px 0;\n    margin-top: 44px;\n    background: #fff;\n\n    .wrapper {\n      display: flex;\n      justify-content: space-between;\n      gap: 20px;\n\n      @media (max-width: 1024px) {\n        flex-direction: column;\n        margin-top: 20px;\n      }\n    }\n  }\n\n  &__nav-groups {\n    display: flex;\n    flex-wrap: wrap;\n\n    &__item {\n      display: flex;\n      height: 40px;\n      align-items: center;\n      padding: 0 5px;\n      font-size: 18px;\n      letter-spacing: .11px;\n      white-space: nowrap;\n    }\n\n    @media (max-width: 1024px) {\n      width: 100%;\n      justify-content: center;\n      order: 2;\n    }\n  }\n\n  &__input {\n    width: 420px;\n    height: 40px;\n    padding: 0 30px;\n    background-position-x: 10px;\n    background-size: 14px 15px;\n    font-size: 14px;\n    color: #333;\n\n    @media (max-width: 1024px) {\n      width: 100%;\n    }\n  }\n\n  &__groups {\n    margin-top: 44px;\n\n    @media (max-width: 1024px) {\n      margin-top: 20px;\n    }\n  }\n\n  &__group {\n    margin-bottom: 50px;\n\n    @media (max-width: 400px) {\n      margin-bottom: 20px;\n    }\n\n    &__title {\n      font-size: 30px;\n      font-weight: 700;\n      letter-spacing: .11px;\n    }\n\n    &__items {\n      padding: 20px 4px;\n      column-count: 3;\n      column-gap: 24px;\n\n      @media (max-width: 768px) {\n        column-count: 2;\n      }\n\n      @media (max-width: 400px) {\n        column-count: 1;\n      }\n    }\n\n    &__brand {\n      &-item {\n        margin-bottom: 10px;\n\n        &-link {\n          font-size: 16px;\n          color: #333;\n          line-height: 18px;\n        }\n      }\n    }\n  }\n\n  &__link {\n    transition: .2s;\n\n    &:hover {\n      color: #bdbdbd;\n    }\n  }\n\n  &__empty {\n    padding: 126px 0;\n    font-size: 24px;\n    letter-spacing: .11px;\n    color: #333;\n    text-align: center;\n\n    span {\n      font-weight: 700;\n    }\n  }\n}\n</style>\n"],"names":["route","useRoute","categoryRoot","useCategoryRoots","fetchBrandsByCategory","useCatalogProvider","getBrandsByGroups","useBrands","category","data","__temp","__restore","_withAsyncContext","useAsyncData","searchQuery","ref","filteredBrands","computed","_c","_b","brand","_a","brandsByGroups","getId","keyOfGroup","hash","scrollToGroup","$group","getUrlName","titles","pageTitle","useHead"],"mappings":"k/BAyEA,MAAMA,EAAQC,IACR,CAAE,aAAAC,GAAiBC,IACnB,CAAE,sBAAAC,GAA0BC,IAC5B,CAAE,kBAAAC,GAAsBC,IAExBC,EAAWN,EAAa,MAAM,IAAI,GAAGF,EAAM,OAAQ,QAAQ,EAAuB,EAClF,CAAE,KAAAS,IAAS,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,EAAab,EAAM,KAAM,IAAMI,EAAsBI,EAAU,EAAE,EAAA,aAAC,CAAA,mBAEnFM,EAAcC,EAAI,EAAE,EAEpBC,EAAiBC,EAAS,IAAM,WACpC,OAAKH,EAAY,OAEVI,GAAAC,EAAAV,EAAK,QAAL,YAAAU,EAAY,QAAZ,YAAAD,EAAmB,OAAQE,GAAoB,SAAA,OAAAD,GAAAE,EAAAD,GAAA,YAAAA,EAAO,OAAP,YAAAC,EAAa,gBAAb,YAAAF,EAA4B,SAASL,EAAY,MAAM,YAAa,MAF3FO,EAAAZ,EAAK,QAAL,YAAAY,EAAY,KAEgF,CAC5H,EAEKC,EAAiBL,EAAS,IAAMX,EAAkBU,EAAe,OAAS,CAAE,CAAA,CAAC,EAE1E,SAAAO,EAAMC,EAAoBC,EAAY,CAC7C,MAAO,GAAGA,GAAQ,EAAE,QAAQD,EAAW,WAAW,CAAC,CAAC,EACtD,CAEA,SAASE,EAAcF,EAAoB,CACzC,MAAMG,EAAS,SAAS,cAAcJ,EAAMC,EAAY,GAAG,CAAC,EAE5DG,GAAA,MAAAA,EAAQ,eAAe,CAAE,MAAO,SAAU,SAAU,UACtD,CAEA,SAASC,EAAWR,EAAiB,CACnC,OAAKA,EAAM,QAEPpB,EAAM,KAAK,MAAM,EAAE,IAAM,IACpB,GAAGA,EAAM,IAAI,GAAGoB,EAAM,OAAO,GAG/B,GAAGpB,EAAM,IAAI,IAAIoB,EAAM,OAAO,GANVpB,EAAM,IAOnC,CAEA,MAAM6B,EAAiC,CACrC,SAAU,oBACV,SAAU,oBACV,QAAS,mBACT,UAAW,sBAAA,EAEPC,EAAYb,EAAS,IAAMY,EAAO,GAAG7B,EAAM,OAAQ,QAAQ,EAAE,CAAC,EAE5D,OAAA+B,EAAA,CACN,MAAO,GAAGD,EAAU,KAAK,6BAAA,CAC1B"}