Pagination.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_utils = require("../utils");
  26. const [name, bem, t] = (0, import_utils.createNamespace)("pagination");
  27. const makePage = (number, text, active) => ({
  28. number,
  29. text,
  30. active
  31. });
  32. const paginationProps = {
  33. mode: (0, import_utils.makeStringProp)("multi"),
  34. prevText: String,
  35. nextText: String,
  36. pageCount: (0, import_utils.makeNumericProp)(0),
  37. modelValue: (0, import_utils.makeNumberProp)(0),
  38. totalItems: (0, import_utils.makeNumericProp)(0),
  39. showPageSize: (0, import_utils.makeNumericProp)(5),
  40. itemsPerPage: (0, import_utils.makeNumericProp)(10),
  41. forceEllipses: Boolean
  42. };
  43. var stdin_default = (0, import_vue2.defineComponent)({
  44. name,
  45. props: paginationProps,
  46. emits: ["change", "update:modelValue"],
  47. setup(props, {
  48. emit,
  49. slots
  50. }) {
  51. const count = (0, import_vue2.computed)(() => {
  52. const {
  53. pageCount,
  54. totalItems,
  55. itemsPerPage
  56. } = props;
  57. const count2 = +pageCount || Math.ceil(+totalItems / +itemsPerPage);
  58. return Math.max(1, count2);
  59. });
  60. const pages = (0, import_vue2.computed)(() => {
  61. const items = [];
  62. const pageCount = count.value;
  63. const showPageSize = +props.showPageSize;
  64. const {
  65. modelValue,
  66. forceEllipses
  67. } = props;
  68. let startPage = 1;
  69. let endPage = pageCount;
  70. const isMaxSized = showPageSize < pageCount;
  71. if (isMaxSized) {
  72. startPage = Math.max(modelValue - Math.floor(showPageSize / 2), 1);
  73. endPage = startPage + showPageSize - 1;
  74. if (endPage > pageCount) {
  75. endPage = pageCount;
  76. startPage = endPage - showPageSize + 1;
  77. }
  78. }
  79. for (let number = startPage; number <= endPage; number++) {
  80. const page = makePage(number, number, number === modelValue);
  81. items.push(page);
  82. }
  83. if (isMaxSized && showPageSize > 0 && forceEllipses) {
  84. if (startPage > 1) {
  85. const prevPages = makePage(startPage - 1, "...");
  86. items.unshift(prevPages);
  87. }
  88. if (endPage < pageCount) {
  89. const nextPages = makePage(endPage + 1, "...");
  90. items.push(nextPages);
  91. }
  92. }
  93. return items;
  94. });
  95. const updateModelValue = (value, emitChange) => {
  96. value = (0, import_utils.clamp)(value, 1, count.value);
  97. if (props.modelValue !== value) {
  98. emit("update:modelValue", value);
  99. if (emitChange) {
  100. emit("change", value);
  101. }
  102. }
  103. };
  104. (0, import_vue2.watchEffect)(() => updateModelValue(props.modelValue));
  105. const renderDesc = () => (0, import_vue.createVNode)("li", {
  106. "class": bem("page-desc")
  107. }, [slots.pageDesc ? slots.pageDesc() : `${props.modelValue}/${count.value}`]);
  108. const renderPrevButton = () => {
  109. const {
  110. mode,
  111. modelValue
  112. } = props;
  113. const slot = slots["prev-text"];
  114. const disabled = modelValue === 1;
  115. return (0, import_vue.createVNode)("li", {
  116. "class": [bem("item", {
  117. disabled,
  118. border: mode === "simple",
  119. prev: true
  120. }), import_utils.BORDER_SURROUND]
  121. }, [(0, import_vue.createVNode)("button", {
  122. "type": "button",
  123. "disabled": disabled,
  124. "onClick": () => updateModelValue(modelValue - 1, true)
  125. }, [slot ? slot() : props.prevText || t("prev")])]);
  126. };
  127. const renderNextButton = () => {
  128. const {
  129. mode,
  130. modelValue
  131. } = props;
  132. const slot = slots["next-text"];
  133. const disabled = modelValue === count.value;
  134. return (0, import_vue.createVNode)("li", {
  135. "class": [bem("item", {
  136. disabled,
  137. border: mode === "simple",
  138. next: true
  139. }), import_utils.BORDER_SURROUND]
  140. }, [(0, import_vue.createVNode)("button", {
  141. "type": "button",
  142. "disabled": disabled,
  143. "onClick": () => updateModelValue(modelValue + 1, true)
  144. }, [slot ? slot() : props.nextText || t("next")])]);
  145. };
  146. const renderPages = () => pages.value.map((page) => (0, import_vue.createVNode)("li", {
  147. "class": [bem("item", {
  148. active: page.active,
  149. page: true
  150. }), import_utils.BORDER_SURROUND]
  151. }, [(0, import_vue.createVNode)("button", {
  152. "type": "button",
  153. "aria-current": page.active || void 0,
  154. "onClick": () => updateModelValue(page.number, true)
  155. }, [slots.page ? slots.page(page) : page.text])]));
  156. return () => (0, import_vue.createVNode)("nav", {
  157. "role": "navigation",
  158. "class": bem()
  159. }, [(0, import_vue.createVNode)("ul", {
  160. "class": bem("items")
  161. }, [renderPrevButton(), props.mode === "simple" ? renderDesc() : renderPages(), renderNextButton()])]);
  162. }
  163. });