{"version":3,"file":"Cqz3Y7f7.js","sources":["../../../../composables/useNewsPagination.ts","../../../../node_modules/@smenaspace/ui-layer/components/pagination/Pagination.vue","../../../../components/News/TheNewsList.vue","../../../../pages/news/index.vue"],"sourcesContent":["export const useNewsPagination = () => {\n  const { isDesktop } = useDevice()\n\n  // Кол-во новостей всего\n  const countNews = ref(0)\n  const currentPage = ref(1)\n  const countElementsOnPage = !isDesktop ? 6 : 12 // Кл-во новостей на странице\n\n  const countPages = computed(() => {\n    return Math.ceil(countNews.value / countElementsOnPage)\n  })\n\n  const scrollToTop = () => {\n    window?.scrollTo({\n      top: 0,\n      behavior: 'smooth',\n    })\n  }\n\n  const onChangeCurrentPage = async (value: number, fetchMethod: Function) => {\n    currentPage.value = value\n\n    await fetchMethod()\n\n    scrollToTop()\n  }\n\n  return {\n    countNews,\n    currentPage,\n    countElementsOnPage,\n    countPages,\n    onChangeCurrentPage,\n  }\n}\n","<script setup lang=\"ts\">\nconst ELLIPSIS = '...'\n\ntype PaginationProps = {\n  totalPages: number\n}\n\ntype PageType = number | typeof ELLIPSIS\n\nconst emit = defineEmits(['onPageChanged'])\nconst props = defineProps<PaginationProps>()\n\nconst currentPage = defineModel({ default: 1 })\n\nconst getPageClasses = (page: PageType) => {\n  return computed(() => {\n    const classes = ['app-pagination__list-item']\n\n    if (currentPage.value === page) {\n      classes.push('app-pagination__list-item--active')\n    }\n\n    if (page === ELLIPSIS) {\n      classes.push('app-pagination__list-item--ellipsis')\n    }\n\n    return classes\n  }).value\n}\n\nconst getTabIndex = (page: PageType) => {\n  return computed<number>(() => -Number(page === ELLIPSIS)).value\n}\n\nconst getDataTestId = (page: PageType) => {\n  return computed(() => {\n    if (currentPage.value === page) {\n      return 'pagination-active-item'\n    }\n\n    return 'pagination-item'\n  }).value\n}\n\nconst pageRange = computed<Array<PageType>>(() => {\n  const totalPageNumbers = 5\n\n  // Если страниц меньше или равно totalPageNumbers, возвращаем все страницы\n  if (props.totalPages <= totalPageNumbers) {\n    return Array.from({ length: props.totalPages }, (_, index) => index + 1)\n  }\n\n  const leftSiblingIndex = Math.max(currentPage.value - 1, 1)\n  const rightSiblingIndex = Math.min(currentPage.value + 1, props.totalPages)\n\n  const firstPageIndex = 1\n  const lastPageIndex = props.totalPages\n\n  const shouldShowLeftEllipsis = leftSiblingIndex > 2\n  const shouldShowRightEllipsis = rightSiblingIndex < props.totalPages - 1\n\n  if (!shouldShowLeftEllipsis && shouldShowRightEllipsis) {\n    const leftRange = createRange(1, totalPageNumbers)\n\n    return [...leftRange, ELLIPSIS, lastPageIndex]\n  }\n\n  if (shouldShowLeftEllipsis && !shouldShowRightEllipsis) {\n    const rightRange = createRange(props.totalPages - 4, props.totalPages)\n\n    return [firstPageIndex, ELLIPSIS, ...rightRange]\n  }\n\n  if (shouldShowLeftEllipsis && shouldShowRightEllipsis) {\n    const middleRange = createRange(leftSiblingIndex, rightSiblingIndex)\n\n    return [firstPageIndex, ELLIPSIS, ...middleRange, ELLIPSIS, lastPageIndex]\n  }\n\n  return []\n})\n\nconst createRange = (start: number, end: number) => {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i)\n}\n\nconst onPageChange = (page: PageType) => {\n  if (page === ELLIPSIS) return\n\n  currentPage.value = page\n\n  emit('onPageChanged', page)\n}\n</script>\n\n<template>\n  <nav v-if=\"totalPages > 1\" class=\"app-pagination\">\n    <the-button\n      class=\"app-pagination__button\"\n      variant=\"tertiary\"\n      :disabled=\"currentPage === 1\"\n      aria-label=\"Предыдущая страница\"\n      size=\"xs\"\n      icon=\"expand-right\"\n      data-test-id=\"prev-button\"\n      @click=\"onPageChange(currentPage - 1)\"\n    />\n\n    <div\n      role=\"list\"\n      class=\"app-pagination__list\"\n      data-test-id=\"pagination-list\"\n    >\n      <the-button\n        v-for=\"page in pageRange\"\n        :key=\"page\"\n        :class=\"getPageClasses(page)\"\n        :tabindex=\"getTabIndex(page)\"\n        variant=\"tertiary\"\n        :data-test-id=\"getDataTestId(page)\"\n        size=\"xs\"\n        @click=\"onPageChange(page)\"\n      >\n        {{ page }}\n      </the-button>\n    </div>\n\n    <the-button\n      class=\"app-pagination__button\"\n      variant=\"tertiary\"\n      :disabled=\"currentPage === totalPages\"\n      aria-label=\"Следующая страница\"\n      icon=\"expand-right\"\n      data-test-id=\"next-button\"\n      size=\"xs\"\n      @click=\"onPageChange(currentPage + 1)\"\n    />\n  </nav>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-pagination {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: center;\n\n  &__button {\n    border-radius: 6px;\n\n    &:first-child {\n      transform: rotate(180deg);\n    }\n  }\n\n  &__list {\n    display: flex;\n    align-items: center;\n    height: 32px;\n    background-color: var(--ui-grey);\n    border-radius: 6px;\n\n    &-item {\n      position: relative;\n      display: grid;\n      place-content: center;\n      width: 32px;\n      height: 32px;\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      -webkit-user-select: none;\n      user-select: none;\n      border-radius: 6px;\n      transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n\n      &--active {\n        background-color: rgba(var(--ui-secondary-rgb), 0.1);\n      }\n\n      &--ellipsis {\n        pointer-events: none;\n      }\n\n      &:hover {\n        background-color: rgba(var(--ui-secondary-rgb), 0.05);\n        transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n      }\n\n      &::after {\n        position: absolute;\n        top: 10%;\n        left: 0;\n        width: 1px;\n        height: 60%;\n        content: '';\n        background-color: var(--ui-secondary);\n        opacity: 0.1;\n        transform: translateY(15%);\n      }\n\n      &:first-child::after {\n        content: none;\n      }\n\n      &--active::after {\n        content: none;\n      }\n\n      &--active + &::after {\n        content: none;\n      }\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { SlugNews } from '@/types/api/api-v3/news'\n\nimport NewsCard from '@/components/News/NewsCard.vue'\n\ntype Props = {\n  newsList: SlugNews[]\n  isLight?: boolean\n  countPages: number\n  withImage?: boolean\n}\ndefineProps<Props>()\n\nconst currentPage = defineModel<number>()\n</script>\n\n<template>\n  <div id=\"newsListContainer\" class=\"news-list\">\n    <div class=\"news-list__container\">\n      <nuxt-link\n        v-for=\"(news, index) in newsList\"\n        :key=\"index\"\n        :to=\"`/news/${news.slug}/`\"\n        :prefetch=\"false\"\n        class=\"news-list__container-link\"\n      >\n        <news-card\n          class=\"news-list__container-card\"\n          :news=\"news\"\n          :is-light=\"isLight\"\n          :with-image=\"withImage\"\n        />\n      </nuxt-link>\n    </div>\n\n    <the-pagination v-model=\"currentPage\" :total-pages=\"countPages\" />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.news-list {\n  display: grid;\n  gap: 80px;\n\n  &__container {\n    display: grid;\n    // ширина карточки в 3 колонки с учетом column-gap: 36px;\n    grid-template-columns: repeat(3, calc((100% - 72px) / 3));\n    row-gap: 30px;\n    column-gap: 36px;\n\n    &-link {\n      height: max-content;\n      transition: 0.2s ease-in;\n\n      &:hover {\n        cursor: pointer;\n        transform: translateY(5px);\n      }\n    }\n\n    &-card {\n      max-width: unset !important;\n    }\n\n    @include media('<desktop-mini') {\n      grid-template-columns: repeat(\n        2,\n        calc((100% - 40px) / 2)\n      ); // ширина карточки в 2 колонки с учетом gap: 20px;\n\n      gap: 20px;\n\n      &__pagination {\n        margin-top: 60px;\n      }\n    }\n\n    @include media('<tablet') {\n      grid-template-columns: 100%;\n    }\n  }\n\n  @include media('<desktop-mini') {\n    gap: 60px;\n    padding-bottom: 120px;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useNewsPagination } from '@/composables/useNewsPagination'\n\nimport { useCityStore } from '@/store/city/city'\n\nimport {\n  HttpStatusCode,\n  NotFoundError,\n  ServerError,\n  Success,\n} from '@/api/results'\nimport { SlugNews } from '@/types/api/api-v3/news'\n\nimport TheNewsList from '@/components/News/TheNewsList.vue'\n\n/* Stores */\nconst {\n  cityInfo: { padeg, domain },\n} = useCityStore()\n\nconst newsList = ref<SlugNews[]>([])\n\nconst { $apiService } = useNuxtApp()\n\nconst {\n  countNews,\n  currentPage,\n  countElementsOnPage,\n  countPages,\n  onChangeCurrentPage,\n} = useNewsPagination()\n\nconst pageTitle = padeg?.pred\n  ? `Новости от Farfor в ${padeg.pred}`\n  : 'Новости от Farfor'\n\nconst pageDescription = padeg?.pred\n  ? `Важные новости и приятные акции от доставки суши и пиццы Farfor в ${padeg.pred}: узнавайте больше, заказывайте чаще`\n  : 'Важные новости и приятные акции от доставки суши и пиццы Farfor: узнавайте больше, заказывайте чаще'\n\nconst { data, error } = await useAsyncData(async () => {\n  const responseNewsData = await $apiService.news.fetchListNews(\n    currentPage.value,\n    countElementsOnPage,\n  )\n\n  if (responseNewsData instanceof NotFoundError) {\n    throw createError({\n      statusCode: HttpStatusCode.NOT_FOUND,\n    })\n  }\n\n  if (responseNewsData instanceof ServerError) {\n    throw createError({\n      statusCode: HttpStatusCode.INTERNAL_SERVER_ERROR,\n    })\n  }\n\n  return responseNewsData.data\n})\n\nif (error.value) showError(error.value)\n\ncountNews.value = data?.value?.count || 1\n\nnewsList.value = data.value?.results || []\n\nconst breadcrumbs = computed(() => {\n  const pred = padeg.pred\n\n  return [\n    { text: `Доставка суши в ${pred}`, href: '/' },\n    { text: 'Новости', href: 'news' },\n  ]\n})\n\nconst fetchNewsData = async () => {\n  const responseNewsData = await $apiService.news.fetchListNews(\n    currentPage.value,\n    countElementsOnPage,\n  )\n\n  if (responseNewsData instanceof Success) {\n    newsList.value = (responseNewsData.data?.results || []) as SlugNews[]\n    countNews.value = responseNewsData.data?.count || 1\n  }\n}\n</script>\n\n<template>\n  <div class=\"news-page\">\n    <app-head\n      :title=\"pageTitle\"\n      :seo=\"{\n        title: pageTitle,\n        description: pageDescription,\n        keywords: '',\n      }\"\n    />\n\n    <the-breadcrumbs\n      class=\"news-page__breadcrumbs\"\n      :breadcrumbs=\"breadcrumbs\"\n      :domain=\"domain\"\n    />\n\n    <h1 class=\"news-page__title\">Новости</h1>\n\n    <the-news-list\n      v-model=\"currentPage\"\n      :count-pages=\"countPages\"\n      :news-list=\"newsList\"\n      with-image\n      is-light\n      @update:model-value=\"onChangeCurrentPage($event, fetchNewsData)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.news-page {\n  padding-top: 40px;\n\n  &__breadcrumbs {\n    margin-bottom: 20px;\n  }\n\n  &__title {\n    margin-bottom: 48px;\n    font-size: 28px;\n    font-weight: 800;\n  }\n\n  @include media('<desktop-mini') {\n    padding-top: 20px;\n\n    &__title {\n      margin-bottom: 27px;\n      font-size: 18px;\n    }\n  }\n}\n</style>\n"],"names":["useNewsPagination","isDesktop","useDevice","countNews","ref","currentPage","countElementsOnPage","countPages","computed","scrollToTop","value","fetchMethod","ELLIPSIS","emit","__emit","props","__props","_useModel","getPageClasses","page","classes","getTabIndex","getDataTestId","pageRange","_","index","leftSiblingIndex","rightSiblingIndex","firstPageIndex","lastPageIndex","shouldShowLeftEllipsis","shouldShowRightEllipsis","createRange","rightRange","middleRange","start","end","i","onPageChange","padeg","domain","useCityStore","newsList","$apiService","useNuxtApp","onChangeCurrentPage","pageTitle","pageDescription","data","error","__temp","__restore","_withAsyncContext","useAsyncData","responseNewsData","NotFoundError","createError","HttpStatusCode","ServerError","showError","_a","_b","breadcrumbs","fetchNewsData","Success"],"mappings":"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","debug_id":"ca13209e-8793-5269-ad4d-fafc9e1c575a"}