{"version":3,"file":"PaginateSection-BJ6iQai2.mjs","names":[],"sources":["../src/components/display/list/PaginateSection.vue","../src/components/display/list/PaginateSection.vue"],"sourcesContent":["<template>\n  <div class=\"paginate-fixed\">\n    <div class=\"mx-2\">\n      {{ t(\"Showing items number\", { page: page + 1, totalPage: totalPage }) }}\n    </div>\n    <div class=\"d-flex flex-nowrap\">\n      <button\n        v-for=\"paginateButton in buttonsLeft\"\n        :key=\"paginateButton.title\"\n        class=\"btn btn-paginate\"\n        :title=\"paginateButton.title\"\n        :disabled=\"paginateButton.disabled\"\n        @click=\"paginateButton.action\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path fill-rule=\"evenodd\" :d=\"paginateButton.path\" />\n        </svg>\n      </button>\n      <template v-for=\"pageNumber in pagination\" :key=\"pageNumber\">\n        <span v-if=\"null === pageNumber\" class=\"btn btn-min-width btn-paginate\"> ... </span>\n        <button\n          v-else\n          class=\"btn btn-min-width btn-paginate\"\n          :class=\"{ active: page === pageNumber - 1 }\"\n          @click=\"changeFirst((pageNumber - 1) * rowsPerPage)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </template>\n      <button\n        v-for=\"paginateButton in buttonsRight\"\n        :key=\"paginateButton.title\"\n        class=\"btn btn-min-width btn-paginate\"\n        :title=\"paginateButton.title\"\n        :disabled=\"paginateButton.disabled\"\n        @click=\"paginateButton.action\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path fill-rule=\"evenodd\" :d=\"paginateButton.path\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  totalCount: { default: 0, type: Number },\n  first: { default: 0, type: Number },\n  rowsPerPage: { default: 0, type: Number },\n  rangeSize: { default: 1, type: Number },\n})\n\n\n//Emits\nconst emit = defineEmits([\"update:first\"]);\n\n//Composables\nconst { t } = useI18n();\n\n//Computed\nconst buttonsLeft = computed(() => {\n  return [\n    {\n      title: t(\"Go to first page\"),\n      disabled: 0 === props.first,\n      action: () => {changeFirst(0);},\n      path: \"M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z\",\n    },\n    {\n      title: t(\"Go to previous page\"),\n      disabled: 0 === props.first,\n      action: () => {changeFirst(props.first - props.rowsPerPage);},\n      path: \"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\",\n    },\n  ];\n});\nconst buttonsRight = computed(() => {\n  return [\n    {\n      title: t(\"Go to next page\"),\n      disabled: lastFirst.value === props.first,\n      action: () => {changeFirst(props.first + props.rowsPerPage);},\n      path: \"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\",\n    },\n    {\n      title: t(\"Go to last page\"),\n      disabled: lastFirst.value === props.first,\n      action: () => {changeFirst(lastFirst.value);},\n      path: \"M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z\",\n    },\n  ];\n});\nconst page = computed(() =>Math.floor(props.first / props.rowsPerPage));\nconst totalPage = computed(() =>Math.ceil(props.totalCount / props.rowsPerPage));\nconst pagination = computed(() => {\n  if (-1 === props.rangeSize) {\n    return [];\n  }\n  const minPaginationElems = 5 + props.rangeSize * 2;\n  let rangeStart =\n    totalPage.value <= minPaginationElems\n      ? 1\n      : page.value + 1 - props.rangeSize;\n  let rangeEnd =\n    totalPage.value <= minPaginationElems\n      ? totalPage.value\n      : page.value + 1 + props.rangeSize;\n  rangeEnd = rangeEnd > totalPage.value ? totalPage.value : rangeEnd;\n  rangeStart = rangeStart < 1 ? 1 : rangeStart;\n  if (totalPage.value > minPaginationElems) {\n    return getPaginationArrayWithEllipsis(\n      rangeStart,\n      rangeEnd,\n      minPaginationElems,\n    );\n  }\n  const res = [];\n  for (let i = rangeStart; i <= rangeEnd; i++) {\n    res.push(i);\n  }\n  return res;\n});\nconst lastFirst = computed(() =>(totalPage.value - 1) * props.rowsPerPage);\n\n\n//Methods\nfunction getPaginationArrayWithEllipsis(\n  rangeStart: number,\n  rangeEnd: number,\n  minPaginationElems: number,\n) {\n  const res = [];\n  const isStartBoundaryReached = rangeStart - 1 < 3;\n  const isEndBoundaryReached = totalPage.value - rangeEnd < 3;\n  if (isStartBoundaryReached) {\n    rangeEnd = minPaginationElems - 2;\n    for (let i = 1; i < rangeStart; i++) {\n      res.push(i);\n    }\n  } else {\n    res.push(1);\n    res.push(null);\n  }\n  if (isEndBoundaryReached) {\n    rangeStart = totalPage.value - (minPaginationElems - 3);\n    for (let i = rangeStart; i <= totalPage.value; i++) {\n      res.push(i);\n    }\n  } else {\n    for (let i = rangeStart; i <= rangeEnd; i++) {\n      res.push(i);\n    }\n    res.push(null);\n    res.push(totalPage.value);\n  }\n  return res;\n}\nfunction changeFirst(newFirst: number) {\n  emit(\"update:first\", newFirst);\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .paginate-fixed {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    position: sticky;\n    background: var(--octopus-background);\n    padding: 0.5rem 0;\n    z-index: 10;\n\n    .btn.btn-paginate {\n      border-radius: 0;\n      color: var(--octopus-btn-paginate-fg);\n      background: var(--octopus-btn-paginate-bg);\n\n      &.active {\n        color: var(--octopus-btn-paginate-active-fg);\n        background: var(--octopus-btn-paginate-active-bg);\n      }\n    }\n  }\n\n  .module-box .paginate-fixed,\n  .octopus-modal .paginate-fixed,\n  .octopus-accordion .paginate-fixed {\n    bottom: 0 !important;\n  }\n\n}\n</style>\n","<template>\n  <div class=\"paginate-fixed\">\n    <div class=\"mx-2\">\n      {{ t(\"Showing items number\", { page: page + 1, totalPage: totalPage }) }}\n    </div>\n    <div class=\"d-flex flex-nowrap\">\n      <button\n        v-for=\"paginateButton in buttonsLeft\"\n        :key=\"paginateButton.title\"\n        class=\"btn btn-paginate\"\n        :title=\"paginateButton.title\"\n        :disabled=\"paginateButton.disabled\"\n        @click=\"paginateButton.action\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path fill-rule=\"evenodd\" :d=\"paginateButton.path\" />\n        </svg>\n      </button>\n      <template v-for=\"pageNumber in pagination\" :key=\"pageNumber\">\n        <span v-if=\"null === pageNumber\" class=\"btn btn-min-width btn-paginate\"> ... </span>\n        <button\n          v-else\n          class=\"btn btn-min-width btn-paginate\"\n          :class=\"{ active: page === pageNumber - 1 }\"\n          @click=\"changeFirst((pageNumber - 1) * rowsPerPage)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </template>\n      <button\n        v-for=\"paginateButton in buttonsRight\"\n        :key=\"paginateButton.title\"\n        class=\"btn btn-min-width btn-paginate\"\n        :title=\"paginateButton.title\"\n        :disabled=\"paginateButton.disabled\"\n        @click=\"paginateButton.action\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"16\"\n          height=\"16\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 16 16\"\n        >\n          <path fill-rule=\"evenodd\" :d=\"paginateButton.path\" />\n        </svg>\n      </button>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\n\n//Props \nconst props = defineProps({\n  totalCount: { default: 0, type: Number },\n  first: { default: 0, type: Number },\n  rowsPerPage: { default: 0, type: Number },\n  rangeSize: { default: 1, type: Number },\n})\n\n\n//Emits\nconst emit = defineEmits([\"update:first\"]);\n\n//Composables\nconst { t } = useI18n();\n\n//Computed\nconst buttonsLeft = computed(() => {\n  return [\n    {\n      title: t(\"Go to first page\"),\n      disabled: 0 === props.first,\n      action: () => {changeFirst(0);},\n      path: \"M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z\",\n    },\n    {\n      title: t(\"Go to previous page\"),\n      disabled: 0 === props.first,\n      action: () => {changeFirst(props.first - props.rowsPerPage);},\n      path: \"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\",\n    },\n  ];\n});\nconst buttonsRight = computed(() => {\n  return [\n    {\n      title: t(\"Go to next page\"),\n      disabled: lastFirst.value === props.first,\n      action: () => {changeFirst(props.first + props.rowsPerPage);},\n      path: \"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z\",\n    },\n    {\n      title: t(\"Go to last page\"),\n      disabled: lastFirst.value === props.first,\n      action: () => {changeFirst(lastFirst.value);},\n      path: \"M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z\",\n    },\n  ];\n});\nconst page = computed(() =>Math.floor(props.first / props.rowsPerPage));\nconst totalPage = computed(() =>Math.ceil(props.totalCount / props.rowsPerPage));\nconst pagination = computed(() => {\n  if (-1 === props.rangeSize) {\n    return [];\n  }\n  const minPaginationElems = 5 + props.rangeSize * 2;\n  let rangeStart =\n    totalPage.value <= minPaginationElems\n      ? 1\n      : page.value + 1 - props.rangeSize;\n  let rangeEnd =\n    totalPage.value <= minPaginationElems\n      ? totalPage.value\n      : page.value + 1 + props.rangeSize;\n  rangeEnd = rangeEnd > totalPage.value ? totalPage.value : rangeEnd;\n  rangeStart = rangeStart < 1 ? 1 : rangeStart;\n  if (totalPage.value > minPaginationElems) {\n    return getPaginationArrayWithEllipsis(\n      rangeStart,\n      rangeEnd,\n      minPaginationElems,\n    );\n  }\n  const res = [];\n  for (let i = rangeStart; i <= rangeEnd; i++) {\n    res.push(i);\n  }\n  return res;\n});\nconst lastFirst = computed(() =>(totalPage.value - 1) * props.rowsPerPage);\n\n\n//Methods\nfunction getPaginationArrayWithEllipsis(\n  rangeStart: number,\n  rangeEnd: number,\n  minPaginationElems: number,\n) {\n  const res = [];\n  const isStartBoundaryReached = rangeStart - 1 < 3;\n  const isEndBoundaryReached = totalPage.value - rangeEnd < 3;\n  if (isStartBoundaryReached) {\n    rangeEnd = minPaginationElems - 2;\n    for (let i = 1; i < rangeStart; i++) {\n      res.push(i);\n    }\n  } else {\n    res.push(1);\n    res.push(null);\n  }\n  if (isEndBoundaryReached) {\n    rangeStart = totalPage.value - (minPaginationElems - 3);\n    for (let i = rangeStart; i <= totalPage.value; i++) {\n      res.push(i);\n    }\n  } else {\n    for (let i = rangeStart; i <= rangeEnd; i++) {\n      res.push(i);\n    }\n    res.push(null);\n    res.push(totalPage.value);\n  }\n  return res;\n}\nfunction changeFirst(newFirst: number) {\n  emit(\"update:first\", newFirst);\n}\n</script>\n\n<style lang=\"scss\">\n\n.octopus-app {\n  .paginate-fixed {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    width: 100%;\n    position: sticky;\n    background: var(--octopus-background);\n    padding: 0.5rem 0;\n    z-index: 10;\n\n    .btn.btn-paginate {\n      border-radius: 0;\n      color: var(--octopus-btn-paginate-fg);\n      background: var(--octopus-btn-paginate-bg);\n\n      &.active {\n        color: var(--octopus-btn-paginate-active-fg);\n        background: var(--octopus-btn-paginate-active-bg);\n      }\n    }\n  }\n\n  .module-box .paginate-fixed,\n  .octopus-modal .paginate-fixed,\n  .octopus-accordion .paginate-fixed {\n    bottom: 0 !important;\n  }\n\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8DA,MAAM,QAAQ;EASd,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,QAAQ;EAGtB,MAAM,cAAc,eAAe;GACjC,OAAO,CACL;IACE,OAAO,EAAE,kBAAkB;IAC3B,UAAU,MAAM,MAAM;IACtB,cAAc;KAAC,YAAY,CAAC;IAAE;IAC9B,MAAM;GACR,GACA;IACE,OAAO,EAAE,qBAAqB;IAC9B,UAAU,MAAM,MAAM;IACtB,cAAc;KAAC,YAAY,MAAM,QAAQ,MAAM,WAAW;IAAE;IAC5D,MAAM;GACR,CACF;EACF,CAAC;EACD,MAAM,eAAe,eAAe;GAClC,OAAO,CACL;IACE,OAAO,EAAE,iBAAiB;IAC1B,UAAU,UAAU,UAAU,MAAM;IACpC,cAAc;KAAC,YAAY,MAAM,QAAQ,MAAM,WAAW;IAAE;IAC5D,MAAM;GACR,GACA;IACE,OAAO,EAAE,iBAAiB;IAC1B,UAAU,UAAU,UAAU,MAAM;IACpC,cAAc;KAAC,YAAY,UAAU,KAAK;IAAE;IAC5C,MAAM;GACR,CACF;EACF,CAAC;EACD,MAAM,OAAO,eAAc,KAAK,MAAM,MAAM,QAAQ,MAAM,WAAW,CAAC;EACtE,MAAM,YAAY,eAAc,KAAK,KAAK,MAAM,aAAa,MAAM,WAAW,CAAC;EAC/E,MAAM,aAAa,eAAe;GAChC,IAAI,OAAO,MAAM,WACf,OAAO,CAAC;GAEV,MAAM,qBAAqB,IAAI,MAAM,YAAY;GACjD,IAAI,aACF,UAAU,SAAS,qBACf,IACA,KAAK,QAAQ,IAAI,MAAM;GAC7B,IAAI,WACF,UAAU,SAAS,qBACf,UAAU,QACV,KAAK,QAAQ,IAAI,MAAM;GAC7B,WAAW,WAAW,UAAU,QAAQ,UAAU,QAAQ;GAC1D,aAAa,aAAa,IAAI,IAAI;GAClC,IAAI,UAAU,QAAQ,oBACpB,OAAO,+BACL,YACA,UACA,kBACF;GAEF,MAAM,MAAM,CAAC;GACb,KAAK,IAAI,IAAI,YAAY,KAAK,UAAU,KACtC,IAAI,KAAK,CAAC;GAEZ,OAAO;EACT,CAAC;EACD,MAAM,YAAY,gBAAe,UAAU,QAAQ,KAAK,MAAM,WAAW;EAIzE,SAAS,+BACP,YACA,UACA,oBACA;GACA,MAAM,MAAM,CAAC;GACb,MAAM,yBAAyB,aAAa,IAAI;GAChD,MAAM,uBAAuB,UAAU,QAAQ,WAAW;GAC1D,IAAI,wBAAwB;IAC1B,WAAW,qBAAqB;IAChC,KAAK,IAAI,IAAI,GAAG,IAAI,YAAY,KAC9B,IAAI,KAAK,CAAC;GAEd,OAAO;IACL,IAAI,KAAK,CAAC;IACV,IAAI,KAAK,IAAI;GACf;GACA,IAAI,sBAAsB;IACxB,aAAa,UAAU,SAAS,qBAAqB;IACrD,KAAK,IAAI,IAAI,YAAY,KAAK,UAAU,OAAO,KAC7C,IAAI,KAAK,CAAC;GAEd,OAAO;IACL,KAAK,IAAI,IAAI,YAAY,KAAK,UAAU,KACtC,IAAI,KAAK,CAAC;IAEZ,IAAI,KAAK,IAAI;IACb,IAAI,KAAK,UAAU,KAAK;GAC1B;GACA,OAAO;EACT;EACA,SAAS,YAAY,UAAkB;GACrC,KAAK,gBAAgB,QAAQ;EAC/B;;;;;;;;;;;;;;;;;;;;;;;;mBC/KO,OAAM,iBAAgB;mBACpB,OAAM,OAAM;mBAGZ,OAAM,qBAAoB;;;;;;;CAUzB,OAAM;CACN,OAAM;CACN,QAAO;CACP,MAAK;CACL,SAAQ;;;;;CAMuB,OAAM;;;;;;;;;CAmBrC,OAAM;CACN,OAAM;CACN,QAAO;CACP,MAAK;CACL,SAAQ;;;;qBA/ChB,mBAqDM,OArDN,YAqDM,CApDJ,mBAEM,OAFN,YAEM,gBADD,OAAA,EAAC,wBAAA;EAAA,MAAiC,OAAA,OAAI;EAAA,WAAiB,OAAA;CAAS,CAAA,CAAA,GAAA,CAAA,GAErE,mBAgDM,OAhDN,YAgDM;oBA/CJ,mBAiBS,UAAA,MAAA,WAhBkB,OAAA,cAAlB,mBAAc;uBADvB,mBAiBS,UAAA;IAfN,KAAK,eAAe;IACrB,OAAM;IACL,OAAO,eAAe;IACtB,UAAU,eAAe;IACzB,SAAO,eAAe;qBAEvB,mBAQM,OARN,YAQM,CADJ,mBAAqD,QAAA;IAA/C,aAAU;IAAW,GAAG,eAAe;;;oBAGjD,mBAUW,UAAA,MAAA,WAVoB,OAAA,aAAd,eAAU;2DAAsB,WAAU,GAAA,CAAA,SACpC,cAAA,UAAA,GAArB,mBAAoF,QAApF,YAAwE,OAAK,MAAA,UAAA,GAC7E,mBAOS,UAAA;;IALP,OAAK,eAAA,CAAC,kCAAgC,EAAA,QACpB,OAAA,SAAS,aAAU,EAAA,CAAA,CAAA;IACpC,UAAK,WAAE,OAAA,aAAa,aAAU,KAAQ,OAAA,WAAW;sBAE/C,UAAU,GAAA,IAAA,UAAA,EAAA,GAAA,EAAA;;oBAGjB,mBAiBS,UAAA,MAAA,WAhBkB,OAAA,eAAlB,mBAAc;uBADvB,mBAiBS,UAAA;IAfN,KAAK,eAAe;IACrB,OAAM;IACL,OAAO,eAAe;IACtB,UAAU,eAAe;IACzB,SAAO,eAAe;qBAEvB,mBAQM,OARN,aAQM,CADJ,mBAAqD,QAAA;IAA/C,aAAU;IAAW,GAAG,eAAe"}