123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144 |
- import { createVNode as _createVNode } from "vue";
- import { computed, watchEffect, defineComponent } from "vue";
- import { clamp, makeStringProp, makeNumberProp, makeNumericProp, createNamespace, BORDER_SURROUND } from "../utils/index.mjs";
- const [name, bem, t] = createNamespace("pagination");
- const makePage = (number, text, active) => ({
- number,
- text,
- active
- });
- const paginationProps = {
- mode: makeStringProp("multi"),
- prevText: String,
- nextText: String,
- pageCount: makeNumericProp(0),
- modelValue: makeNumberProp(0),
- totalItems: makeNumericProp(0),
- showPageSize: makeNumericProp(5),
- itemsPerPage: makeNumericProp(10),
- forceEllipses: Boolean
- };
- var stdin_default = defineComponent({
- name,
- props: paginationProps,
- emits: ["change", "update:modelValue"],
- setup(props, {
- emit,
- slots
- }) {
- const count = computed(() => {
- const {
- pageCount,
- totalItems,
- itemsPerPage
- } = props;
- const count2 = +pageCount || Math.ceil(+totalItems / +itemsPerPage);
- return Math.max(1, count2);
- });
- const pages = computed(() => {
- const items = [];
- const pageCount = count.value;
- const showPageSize = +props.showPageSize;
- const {
- modelValue,
- forceEllipses
- } = props;
- let startPage = 1;
- let endPage = pageCount;
- const isMaxSized = showPageSize < pageCount;
- if (isMaxSized) {
- startPage = Math.max(modelValue - Math.floor(showPageSize / 2), 1);
- endPage = startPage + showPageSize - 1;
- if (endPage > pageCount) {
- endPage = pageCount;
- startPage = endPage - showPageSize + 1;
- }
- }
- for (let number = startPage; number <= endPage; number++) {
- const page = makePage(number, number, number === modelValue);
- items.push(page);
- }
- if (isMaxSized && showPageSize > 0 && forceEllipses) {
- if (startPage > 1) {
- const prevPages = makePage(startPage - 1, "...");
- items.unshift(prevPages);
- }
- if (endPage < pageCount) {
- const nextPages = makePage(endPage + 1, "...");
- items.push(nextPages);
- }
- }
- return items;
- });
- const updateModelValue = (value, emitChange) => {
- value = clamp(value, 1, count.value);
- if (props.modelValue !== value) {
- emit("update:modelValue", value);
- if (emitChange) {
- emit("change", value);
- }
- }
- };
- watchEffect(() => updateModelValue(props.modelValue));
- const renderDesc = () => _createVNode("li", {
- "class": bem("page-desc")
- }, [slots.pageDesc ? slots.pageDesc() : `${props.modelValue}/${count.value}`]);
- const renderPrevButton = () => {
- const {
- mode,
- modelValue
- } = props;
- const slot = slots["prev-text"];
- const disabled = modelValue === 1;
- return _createVNode("li", {
- "class": [bem("item", {
- disabled,
- border: mode === "simple",
- prev: true
- }), BORDER_SURROUND]
- }, [_createVNode("button", {
- "type": "button",
- "disabled": disabled,
- "onClick": () => updateModelValue(modelValue - 1, true)
- }, [slot ? slot() : props.prevText || t("prev")])]);
- };
- const renderNextButton = () => {
- const {
- mode,
- modelValue
- } = props;
- const slot = slots["next-text"];
- const disabled = modelValue === count.value;
- return _createVNode("li", {
- "class": [bem("item", {
- disabled,
- border: mode === "simple",
- next: true
- }), BORDER_SURROUND]
- }, [_createVNode("button", {
- "type": "button",
- "disabled": disabled,
- "onClick": () => updateModelValue(modelValue + 1, true)
- }, [slot ? slot() : props.nextText || t("next")])]);
- };
- const renderPages = () => pages.value.map((page) => _createVNode("li", {
- "class": [bem("item", {
- active: page.active,
- page: true
- }), BORDER_SURROUND]
- }, [_createVNode("button", {
- "type": "button",
- "aria-current": page.active || void 0,
- "onClick": () => updateModelValue(page.number, true)
- }, [slots.page ? slots.page(page) : page.text])]));
- return () => _createVNode("nav", {
- "role": "navigation",
- "class": bem()
- }, [_createVNode("ul", {
- "class": bem("items")
- }, [renderPrevButton(), props.mode === "simple" ? renderDesc() : renderPages(), renderNextButton()])]);
- }
- });
- export {
- stdin_default as default
- };
|