{"version":3,"file":"BH1Lj1it.js","sources":["../../../../composables/useProductFilters.ts","../../../../components/Category/CategoryFilter.vue","../../../../components/Category/CategoryFilterDialog.vue","../../../../components/Category/CategoryFilterWidget.vue","../../../../components/Category/CategoryFilters.vue","../../../../components/Product/ProductList.vue"],"sourcesContent":["import { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Product, Tag } from '@/types/api/api-v3/product'\n\ntype Filters = Record<string, number>\n\ntype Props = {\n  products: Product[]\n}\n\nexport const useProductFilters = ({ products }: Props) => {\n  const { $metrics } = useNuxtApp()\n  const { newProductCardEnabled } = useToggleStore()\n\n  // Флаг, для понимания, включен ли какой- либо фильтр\n  const isFiltersActivated = ref(false)\n  // Список примененных фильтров\n  const selectedFilters = ref<Filters>({})\n  // Список возможных фильтров на основе отфильтрованных товаров и примененных фильтров\n  const possibleFilters = ref<Filters>({})\n\n  const allProducts = computed(() => {\n    return !isFiltersActivated.value ? products : filteredProducts.value\n  })\n\n  const setActiveFilter = (filter: Tag | Partial<Tag>) => {\n    // Если нет slug-а у фильтра - выходим\n    if (!filter.slug) return\n\n    // Ставим флаг активированых фильтров\n    isFiltersActivated.value = true\n\n    // Складываем в объект ключом slug фильтра\n    selectedFilters.value[filter.slug] = 1\n\n    setPossibleFilters()\n\n    $metrics?.eventSendGoal({ ym: 'add_filter' })\n  }\n\n  const deactivateFilter = (filter: Tag) => {\n    // Если нет slug-а у фильтра - выходим\n    if (!filter.slug) return\n\n    // Удаляем ключ у активных фильтров\n    delete selectedFilters.value[filter.slug]\n\n    // Если текущее состояние фильтров пустое - очищаем возможные фильтры\n    if (Object.keys(selectedFilters.value).length === 0) {\n      resetAllFilters()\n\n      return\n    }\n\n    setPossibleFilters()\n  }\n\n  const filteredProducts = computed(() => {\n    if (!isFiltersActivated.value) return\n\n    return getFilteredProducts(products, selectedFilters.value)\n  })\n\n  // Получение продуктов по примененным фильтрам\n  const getFilteredProducts = (products: Product[], filters: Filters) => {\n    const filtersLength = Object.keys(filters).length\n\n    // если нет активных фильтров возвращаем все продукты\n    if (!filtersLength) return products\n\n    return products.filter((product: Product) => {\n      const tags = getProductTags(product)\n\n      // если тегов нет, отбрасываем продукт\n      if (!tags.length) return false\n      // счетчик пересечений\n      let intersections = 0\n      // ищем пересечения\n      for (const tag of tags) {\n        if (filters[tag.slug]) intersections++\n      }\n\n      // Проверяем кол-во пересечений с кол-во активных фильтров\n      return intersections === filtersLength\n    })\n  }\n\n  const getPossibleFilters = (\n    filteredProducts: Product[] | undefined,\n    selectedFilters: Filters,\n  ): Filters => {\n    if (!filteredProducts) return {}\n\n    const possibleFilters: Filters = {}\n    // Получаем массив всех тегов (включая дубликаты)\n    const productTags = filteredProducts.flatMap((product) => {\n      return getProductTags(product)\n    })\n\n    // Проходимся по тегам и сохраняем возможные фильтры, исключая дубликаты и текущие примененные фильтры\n    for (const tag of productTags) {\n      if (tag.slug in selectedFilters || tag.slug in possibleFilters) continue\n\n      possibleFilters[tag.slug] = 1\n    }\n\n    return possibleFilters\n  }\n\n  /*\n  Расчитываем возможные фильтры (Возможными фильтрами называем те фильтры,\n  которые не являются активными, но все еще могут быть активированы, т.к попадают под пересечения фильтров продуктов)\n*/\n  const setPossibleFilters = () => {\n    possibleFilters.value = getPossibleFilters(\n      filteredProducts.value,\n      selectedFilters.value,\n    )\n  }\n\n  const resetAllFilters = () => {\n    isFiltersActivated.value = false\n    selectedFilters.value = {}\n    possibleFilters.value = {}\n  }\n\n  // В зависимости от версии API выбираем поле тегов для фильтрации\n  const getProductTags = (product: Product) => {\n    const tags = newProductCardEnabled\n      ? // @ts-ignore\n        [...product.main_tags, ...product.additional_tags]\n      : product.tags\n\n    if (!tags?.length) return []\n\n    return tags\n  }\n\n  return {\n    isFiltersActivated,\n    selectedFilters,\n    possibleFilters,\n    allProducts,\n    filteredProducts,\n    setActiveFilter,\n    resetAllFilters,\n    setPossibleFilters,\n    deactivateFilter,\n  }\n}\n","<script setup lang=\"ts\">\nimport { Tag } from '@/types/api/api-v3/product'\n\ntype Props = {\n  filter: Tag\n  isActiveFilter: boolean\n  isPossibleFilter: boolean\n  isFiltersActivated: boolean\n}\n\nconst props = defineProps<Props>()\n\nconst emit = defineEmits(['setActiveFilter', 'deactivateFilter'])\n\nconst { isDesktop } = useDevice()\n\nconst isFilterDisabled = computed(() => {\n  return (\n    props.isFiltersActivated && !props.isActiveFilter && !props.isPossibleFilter\n  )\n})\n\nconst filterFontWeight = computed(() => {\n  return isDesktop ? 'semi-bold' : 'extra-bold'\n})\n\nconst filterSize = computed(() => {\n  return isDesktop ? 'md' : 'sm'\n})\n\nconst toggleFilterState = () => {\n  props.isActiveFilter\n    ? emit('deactivateFilter', props.filter)\n    : emit('setActiveFilter', props.filter)\n}\n</script>\n\n<template>\n  <the-chip\n    :active=\"isActiveFilter\"\n    :disabled=\"isFilterDisabled\"\n    :weight=\"filterFontWeight\"\n    :size=\"filterSize\"\n    @click=\"toggleFilterState\"\n  >\n    {{ filter.name }}\n  </the-chip>\n</template>\n","<script lang=\"ts\" setup>\ntype Props = {\n  isFiltersActivated: boolean\n  isFiltersDialogOpen: boolean\n}\n\ndefineProps<Props>()\n\nconst emit = defineEmits(['update:model-value'])\n\nconst setFiltersDialogState = (value: boolean) => {\n  emit('update:model-value', value)\n}\n</script>\n\n<template>\n  <the-dialog\n    :model-value=\"isFiltersDialogOpen\"\n    @update:model-value=\"setFiltersDialogState\"\n  >\n    <h3>Фильтры</h3>\n\n    <div class=\"dialog\">\n      <div class=\"dialog__filters\">\n        <slot />\n      </div>\n\n      <the-button block @click=\"setFiltersDialogState(false)\">\n        Применить\n      </the-button>\n    </div>\n  </the-dialog>\n</template>\n\n<style scoped lang=\"scss\">\n.dialog {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  height: 100%;\n  padding-top: 10px;\n}\n</style>\n","<script lang=\"ts\" setup>\nconst emit = defineEmits(['openFiltersDialog'])\n\ntype Props = {\n  selectedFiltersCount: number\n}\n\ndefineProps<Props>()\n\nconst openFiltersDialog = () => emit('openFiltersDialog')\n</script>\n\n<template>\n  <div class=\"filter--widget\">\n    <the-badge\n      color=\"var(--ui-white)\"\n      background-color=\"var(--ui-primary)\"\n      :content=\"selectedFiltersCount\"\n      :offset-x=\"10\"\n      :offset-y=\"10\"\n    >\n      <the-button\n        width=\"48\"\n        height=\"48\"\n        background-color=\"var(--ui-green)\"\n        icon=\"filter\"\n        icon-color=\"var(--ui-white)\"\n        size=\"sm\"\n        radius=\"lg\"\n        @click=\"openFiltersDialog\"\n      />\n    </the-badge>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.filter--widget {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  z-index: 8;\n  padding: 25px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport type { Tag } from '@/types/api/api-v3/product'\n\nimport CategoryFilter from '@/components/Category/CategoryFilter.vue'\nimport CategoryFilterDialog from '@/components/Category/CategoryFilterDialog.vue'\nimport CategoryFilterWidget from '@/components/Category/CategoryFilterWidget.vue'\n\ntype Props = {\n  filters: Tag[]\n  isFiltersActivated: boolean\n  selectedFilters: Record<string, number>\n  possibleFilters: Record<string, number>\n}\n\nwithDefaults(defineProps<Props>(), {\n  filters: () => [],\n})\n\nconst emit = defineEmits([\n  'resetAllFilters',\n  'setActiveFilter',\n  'deactivateFilter',\n])\n\nconst { isMobile } = useDevice()\n\nconst isActiveDialog = ref(false)\n\nconst onToggleDialog = (state: boolean) => (isActiveDialog.value = state)\n\nconst onResetAllFilters = () => emit('resetAllFilters')\n\nconst onSetFilter = (filter: Tag) => emit('setActiveFilter', filter)\n\nconst onResetFilter = (filter: Tag) => emit('deactivateFilter', filter)\n</script>\n\n<template>\n  <template v-if=\"isMobile\">\n    <category-filter-widget\n      :selected-filters-count=\"Object.keys(selectedFilters).length\"\n      @open-filters-dialog=\"onToggleDialog(true)\"\n    />\n\n    <category-filter-dialog\n      :is-filters-activated=\"isFiltersActivated\"\n      :is-filters-dialog-open=\"isActiveDialog\"\n      @update:model-value=\"onToggleDialog\"\n      @reset-all-filters=\"onResetAllFilters\"\n    >\n      <div class=\"filters--wrapper\">\n        <category-filter\n          v-for=\"(filter, index) in filters\"\n          :key=\"index\"\n          :filter=\"filter\"\n          :is-active-filter=\"filter.slug in selectedFilters\"\n          :is-possible-filter=\"filter.slug in possibleFilters\"\n          :is-filters-activated=\"isFiltersActivated\"\n          @set-active-filter=\"onSetFilter\"\n          @deactivate-filter=\"onResetFilter\"\n        />\n\n        <the-button\n          v-if=\"isFiltersActivated\"\n          variant=\"transparent\"\n          size=\"xs\"\n          font=\"sm\"\n          radius=\"lg\"\n          icon=\"close-thin\"\n          indent-left\n          @click=\"onResetAllFilters\"\n        >\n          Сбросить фильтры\n        </the-button>\n      </div>\n    </category-filter-dialog>\n  </template>\n\n  <div v-else class=\"filters--wrapper\">\n    <category-filter\n      v-for=\"(filter, index) in filters\"\n      :key=\"index\"\n      :filter=\"filter\"\n      :is-active-filter=\"filter.slug in selectedFilters\"\n      :is-possible-filter=\"filter.slug in possibleFilters\"\n      :is-filters-activated=\"isFiltersActivated\"\n      @set-active-filter=\"onSetFilter\"\n      @deactivate-filter=\"onResetFilter\"\n    />\n\n    <transition name=\"height\">\n      <the-button\n        v-if=\"isFiltersActivated\"\n        variant=\"transparent\"\n        size=\"sm\"\n        font=\"sm\"\n        radius=\"lg\"\n        icon=\"close-thin\"\n        indent-left\n        @click=\"onResetAllFilters\"\n      >\n        Сбросить фильтры\n      </the-button>\n    </transition>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@use '@/assets/styles/animations.scss' as *;\n\n.filters--wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 20px 10px;\n  padding: 0 0 30px;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport { useToggleStore } from '@/store/toggle/toggle'\n\nimport { Product } from '@/types/api/api-v3/product'\nimport { NewProduct } from '@/types/api/api-v4/product'\nimport { NAME_PARENT_COMPONENT } from '@/types/products'\n\nimport ProductCard from '@/components/Product/ProductCard/ProductCard.vue'\nimport ProductItem from '@/components/Product/ProductItem/ProductItem.vue'\nimport ProductModal from '@/components/Product/ProductModal.vue'\n\ntype Props = {\n  products: Product[] | NewProduct[]\n  isLoading?: boolean\n  parentComponent?: NAME_PARENT_COMPONENT\n}\n\nconst props = defineProps<Props>()\n\nconst { newProductCardEnabled } = useToggleStore()\n\nconst { productDialog, openDialogProduct, closeDialogProduct } =\n  useProductModal()\n\nconst onOpenDialogProduct = (product: Product) => {\n  openDialogProduct({\n    currentProduct: product,\n    productList: props.products,\n    visible: true,\n  })\n}\n</script>\n\n<template>\n  <div\n    class=\"product-list\"\n    :class=\"{ 'product-list--old': !newProductCardEnabled }\"\n  >\n    <slot />\n\n    <template v-if=\"newProductCardEnabled\">\n      <product-card\n        v-for=\"product in products\"\n        :key=\"product.id\"\n        :product=\"product\"\n        :is-loading=\"isLoading\"\n        @on-open-dialog=\"onOpenDialogProduct\"\n      />\n    </template>\n\n    <template v-else>\n      <product-item\n        v-for=\"product in products\"\n        :key=\"product.id\"\n        :product=\"product\"\n        :parent-component=\"parentComponent\"\n        @open-dialog-product=\"onOpenDialogProduct\"\n      />\n    </template>\n\n    <product-modal\n      :product-dialog=\"productDialog\"\n      @close-dialog-product=\"closeDialogProduct\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.product-list {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, 276px);\n  gap: 100px 32px;\n\n  // TODO: Удалить после того как все города перейдут на новый дизайн карточек\n  &--old {\n    grid-template-columns: repeat(auto-fit, 270px);\n    gap: 100px 36px;\n  }\n\n  @include media('<=portrait-phone', '>=phone') {\n    grid-template-columns: repeat(2, minmax(145px, 1fr));\n    gap: 10px;\n    padding: 25px 0 0;\n  }\n\n  @include media('<=tablet', '>=portrait-phone') {\n    grid-template-columns: repeat(2, minmax(120px, 225px));\n    gap: 10px;\n    padding: 25px 0 0;\n  }\n\n  // Границы ширины [от 768 до 1024]\n  @include media('>=tablet', '<=desktop-mini') {\n    grid-template-columns: repeat(3, minmax(217px, 1fr));\n    gap: 10px;\n    padding: 25px 0 0;\n  }\n}\n</style>\n"],"names":["useProductFilters","products","$metrics","useNuxtApp","newProductCardEnabled","useToggleStore","isFiltersActivated","ref","selectedFilters","possibleFilters","allProducts","computed","filteredProducts","setActiveFilter","filter","setPossibleFilters","deactivateFilter","resetAllFilters","getFilteredProducts","filters","filtersLength","product","tags","getProductTags","intersections","tag","getPossibleFilters","productTags","props","__props","emit","__emit","isDesktop","useDevice","isFilterDisabled","filterFontWeight","filterSize","toggleFilterState","setFiltersDialogState","value","openFiltersDialog","isMobile","isActiveDialog","onToggleDialog","state","onResetAllFilters","onSetFilter","onResetFilter","productDialog","openDialogProduct","closeDialogProduct","useProductModal","onOpenDialogProduct"],"mappings":"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","debug_id":"9392795d-0613-5a6d-849f-9309e3b37420"}