{"version":3,"file":"PaginationDefault-b290d6d4.js","sources":["../../../app/frontend/components/pagination/PaginationDefault.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { toPath } from '@/utilities/path'\n\nconst DEFAULT_PAGINATION_QUERY = 'page'\n\nexport default defineComponent({\n  name: 'PaginationDefault',\n\n  props: {\n    /**\n     * クエリパラメータでアンカーを作る場合のクエリ key 名\n     * 指定なかった場合は無視される\n     */\n    queryParam: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * パスパラメータでアンカーを作る場合の、URL に含まれる動的部分\n     * @example\n     *  \"/foo/bar/:id\" -> path-param=\"id\"\n     */\n    pathParam: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * 現在のページ page 番号\n     */\n    page: {\n      type: Number,\n      required: true,\n      validator: (value: number) => {\n        return Number.isInteger(value)\n      },\n    },\n\n    /**\n     * ページの最大数\n     */\n    totalPage: {\n      type: Number,\n      required: true,\n      validator: (value: number) => {\n        return Number.isInteger(value)\n      },\n    },\n\n    /**\n     * 前後に表示するページ番号の件数\n     * @example\n     *  :offset=\"3\"\n     *  < 1 2 3 [4] 5 6 7 >\n     */\n    offset: {\n      type: Number,\n      default: 2,\n      validator: (value: number) => {\n        return value > 0 && Number.isInteger(value)\n      },\n    },\n  },\n\n  setup(props) {\n    /**\n     * ページが存在するか\n     */\n    const hasPagination = computed((): boolean => {\n      return props.totalPage > 0\n    })\n\n    /**\n     * 現在ページ\n     * @description props で受け渡されたページ番号が総ページ数より大きい場合は最終ページを current ページに設定する\n     */\n    const currentPage = computed((): number => {\n      return props.page > props.totalPage ? props.totalPage : props.page\n    })\n\n    /**\n     * page から offset 数分の過去ページの配列\n     */\n    const prev = computed((): number[] => {\n      return currentPage.value > 1\n        ? [...Array(props.offset)]\n          .map((_, i) => currentPage.value - (i + 1))\n          .filter(v => v > 0)\n          .reverse()\n        : []\n    })\n\n    /**\n     * page から offset 数分の未来ページの配列\n     */\n    const follow = computed((): number[] => {\n      return currentPage.value < props.totalPage\n        ? [...Array(props.totalPage - currentPage.value)]\n          .map((_, i) => currentPage.value + (i + 1))\n          .slice(0, props.offset)\n        : []\n    })\n\n    /**\n     * 一つ前のページが存在するか\n     */\n    const hasBackward = computed((): boolean => {\n      return currentPage.value > 1\n    })\n\n    /**\n     * 一つ後のページが存在するか\n     */\n    const hasForward = computed((): boolean => {\n      return currentPage.value < props.totalPage\n    })\n\n    /**\n     * 遷移先パス生成\n     *\n     * @param page 遷移先のページ番号（またはページ ID の文字列）\n     */\n    const navigateTo = (page: number | string): string => {\n      const currentPage = location.href\n      const _page = (typeof page === 'number' && !(page <= 0))\n        ? page.toString()\n        : (typeof page === 'string' && !(page === ''))\n          ? page\n          : ''\n      if (!_page) return currentPage\n\n      let _navigateTo = currentPage\n      if (props.pathParam) {\n        const param = {\n          [props.pathParam]: _page\n        }\n        _navigateTo = toPath(_navigateTo, param)\n      } else {\n        const query = props.queryParam || DEFAULT_PAGINATION_QUERY\n        const url = new URL(_navigateTo)\n        url.searchParams.set(query, _page)\n        _navigateTo = url.href\n      }\n\n      return _navigateTo\n    }\n\n    return {\n      // computed\n      hasPagination,\n      currentPage,\n      prev,\n      follow,\n      hasBackward,\n      hasForward,\n\n      // methods\n      navigateTo,\n    }\n  },\n})\n</script>\n\n<template>\n  <nav\n    v-if=\"hasPagination\"\n    class=\"o-list__pagination\">\n    <ul class=\"o-list__pagination--items\">\n      <!-- baclward -->\n      <li\n        v-if=\"hasBackward\"\n        class=\"o-list__pagination--item is-backward\">\n        <div class=\"o-action__pagination is-backward\">\n          <a\n            class=\"o-action__pagination--item\"\n            :href=\"navigateTo(page - 1)\">\n            前へ\n          </a>\n        <!-- /.o-action__pagination --></div>\n      </li>\n\n      <!-- prev pages -->\n      <li\n        v-for=\"item in prev\"\n        :key=\"item\"\n        class=\"o-list__pagination--item is-prev\">\n        <div class=\"o-action__pagination\">\n          <a\n            class=\"o-action__pagination--item\"\n            :href=\"navigateTo(item)\">\n            {{ item }}\n          </a>\n        <!-- /.o-action__pagination --></div>\n      </li>\n\n      <!-- current page -->\n      <li class=\"o-list__pagination--item is-current\">\n        {{ page }}\n      </li>\n\n      <!-- follow pages -->\n      <li\n        v-for=\"item in follow\"\n        :key=\"item\"\n        class=\"o-list__pagination--item is-follow\">\n        <div class=\"o-action__pagination\">\n          <a\n            class=\"o-action__pagination--item\"\n            :href=\"navigateTo(item)\">\n            {{ item }}\n          </a>\n        <!-- /.o-action__pagination --></div>\n      </li>\n\n      <!-- forward page -->\n      <li\n        v-if=\"hasForward\"\n        class=\"o-list__pagination--item is-forward\">\n        <div class=\"o-action__pagination is-forward\">\n          <a\n            class=\"o-action__pagination--item\"\n            :href=\"navigateTo(page + 1)\">\n            次へ\n          </a>\n        <!-- /.o-action__pagination --></div>\n      </li>\n    </ul>\n  </nav>\n</template>\n\n<style lang=\"sass\" scoped>\n.o-list__pagination\n  $root: &\n\n  & &--items\n    display: flex\n    justify-content: center\n    align-items: center\n\n  $button-size-px: 40\n  $font-size-px: 14\n  & &--item\n    width: #{math.div($button-size-px, $font-size-px)}em\n    line-height: #{math.div($button-size-px, $font-size-px)}em\n    font-size: $font-small\n    text-align: center\n    margin-left: 1em\n    border-radius: 50%\n\n    &:first-child\n      margin-left: 0\n\n    &.is-current\n      color: $font-orange\n      background-color: rgba($bg-x-light-orange, 1)\n      cursor: default\n\n    &.is-backward,\n    &.is-forward\n      width: auto\n      display: flex\n\n      &.is-backward::after,\n      &.is-forward::before\n        content: \"…\"\n        color: $font-gray\n        font-size: $font-small\n\n      &.is-backward::after\n        margin-left: 1em\n\n      &.is-forward::before\n        margin-right: 1em\n\n  +breakpoint\n    #{$root}--items\n      width: 100%\n      justify-content: space-between\n\n    #{$root}--item\n      flex-grow: 1\n      display: flex\n      margin-left: 0\n\n      &.is-prev,\n      &.is-follow,\n      &.is-current\n        display: none\n\n      &.is-forward\n        justify-content: flex-end\n\n      &.is-backward::after,\n      &.is-forward::before\n        display: none\n\n.o-action__pagination\n  $root: &\n\n  & &--item\n    display: block\n    color: $font-black\n    text-align: center\n    text-decoration: none\n    border-radius: 50%\n    +transition\n\n    +mouseover\n      background-color: rgba($bg-black, 0.03)\n\n  $icon-size-px: 4\n  $font-size-px: 14\n  $icon-size-em: math.div($icon-size-px, $font-size-px)\n  $icon-margin-px: 14\n  $icon-margin-em: math.div($icon-margin-px, $font-size-px)\n  &.is-backward,\n  &.is-forward\n    #{$root}--item\n      position: relative\n      border-radius: 0\n\n      &::before\n        content: \"\"\n        width: #{$icon-size-em}em\n        height: #{$icon-size-em}em\n        display: block\n        position: absolute\n        top: 50%\n\n      +mouseover\n        text-decoration: underline\n        background-color: transparent\n\n  &.is-backward\n    #{$root}--item\n      padding:\n        left: #{$icon-size-em + $icon-margin-em}em\n        right: 1.2em\n\n      &::before\n        left: 0\n        transform: translateY(-50%) rotate(45deg)\n        margin-left: 0.1em\n        border:\n          bottom: 2px solid $border-x-dark-gray\n          left: 2px solid $border-x-dark-gray\n\n  &.is-forward\n    #{$root}--item\n      padding:\n        left: 1.2em\n        right: #{$icon-size-em + $icon-margin-em}em\n\n      &::before\n        right: 0\n        transform: translateY(-50%) rotate(-45deg)\n        margin-right: 0.1em\n        border:\n          bottom: 2px solid $border-x-dark-gray\n          right: 2px solid $border-x-dark-gray\n\n  +breakpoint\n    $icon-size-px: 4\n    $font-size-px: 14\n    $icon-size-em: math.div($icon-size-px, $font-size-px)\n    $icon-margin-px: 14\n    $icon-margin-em: math.div($icon-margin-px, $font-size-px)\n    $button-margin-px: 28\n    $button-margin-em: math.div($button-margin-px, $font-size-px)\n    &.is-backward,\n    &.is-forward\n      #{$root}--item\n        background-color: rgba($bg-white, 1)\n        border: 1px solid $border-gray\n        border-radius: 100vh\n\n    &.is-backward\n      #{$root}--item\n        padding:\n          left: #{$icon-size-em + $icon-margin-em + $button-margin-em}em\n          right: #{$button-margin-em}em\n\n        &::before\n          left: #{$button-margin-em}em\n\n    &.is-forward\n      #{$root}--item\n        padding:\n          left: #{$button-margin-em}em\n          right: #{$icon-size-em + $icon-margin-em + $button-margin-em}em\n\n        &::before\n          right: #{$button-margin-em}em\n</style>\n"],"names":["DEFAULT_PAGINATION_QUERY","_sfc_main","defineComponent","value","props","hasPagination","computed","currentPage","prev","_","i","v","follow","hasBackward","hasForward","page","_page","_navigateTo","param","toPath","query","url","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_7","_hoisted_11","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_createElementVNode","_hoisted_2","_createCommentVNode","_Fragment","_renderList","item","_hoisted_6","_hoisted_8","_toDisplayString","_hoisted_9","_hoisted_12"],"mappings":"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"}