Pagination.js 5.6 KB

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