Pagination.js 5.8 KB

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