@opensig/opendesign/es/pagination/OPagination.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, mergeModels, ref, useModel, computed, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, withCtx, Fragment, renderList, createVNode, withModifiers } from "vue";
import { getPagerList, getSizeOptions } from "./pagination.mjs";
import { OPopover } from "../popover/index.mjs";
import { OInputNumber } from "../input-number/index.mjs";
import { OSelect } from "../select/index.mjs";
import { OOption } from "../option/index.mjs";
import { IconChevronLeft, IconEllipsis, IconArrowLeft, IconArrowRight, IconChevronRight } from "../_utils/icons.mjs";
import { paginationProps } from "./types.mjs";
import { getRoundClass } from "../_utils/style-class.mjs";
import { OIcon } from "../icon/index.mjs";
import { useI18n } from "../locale/index.mjs";
import { OVirtualList } from "../virtual-list/index.mjs";
import { log } from "../_utils/log.mjs";
import _sfc_main$1 from "../option/OOptionList.vue.mjs";
const _hoisted_1 = { class: "o-pagination-wrap" };
const _hoisted_2 = {
  key: 0,
  class: "o-pagination-total"
};
const _hoisted_3 = {
  key: 1,
  class: "o-pagination-size"
};
const _hoisted_4 = {
  key: 1,
  class: "o-pagination-page-size"
};
const _hoisted_5 = {
  key: 2,
  class: "o-pagination-pager"
};
const _hoisted_6 = { class: "o-pagination-pages" };
const _hoisted_7 = {
  key: 0,
  class: "o-pagination-simple"
};
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { key: 0 };
const _hoisted_10 = ["onClick"];
const _hoisted_11 = {
  key: 3,
  class: "o-pagination-goto"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OPagination",
  props: /* @__PURE__ */ mergeModels(paginationProps, {
    "pageSize": {},
    "pageSizeModifiers": {},
    "page": {},
    "pageModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["change"], ["update:pageSize", "update:page"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const round = getRoundClass(props, "pagination");
    const emits = __emit;
    const { t } = useI18n();
    const simpleLayout = ["pager"];
    const pages = ref([]);
    const pageSize = useModel(__props, "pageSize");
    if (!pageSize.value) {
      pageSize.value = props.pageSizes[0];
    } else if (!props.pageSizes.includes(pageSize.value)) {
      log.warn(`pageSize[${pageSize.value}] is not in pageSizes[${props.pageSizes}]! set to first value of pageSizes[${props.pageSizes[0]}]`);
      pageSize.value = props.pageSizes[0];
    }
    const totalPage = computed(() => Math.ceil(props.total / pageSize.value));
    const pageVal = useModel(__props, "page");
    if (!pageVal.value) {
      pageVal.value = 1;
    }
    pages.value = getPagerList(totalPage.value, pageVal.value, props.showPageCount);
    const pageSizeList = computed(() => {
      return getSizeOptions(props.pageSizes, t("pagination.countPerPage"), pageSize.value);
    });
    const defaultSizeLabel = computed(() => pageSize.value + t("pagination.countPerPage"));
    const layout = computed(() => {
      return props.simple ? simpleLayout : props.layout;
    });
    watch(
      () => [totalPage.value, pageVal.value],
      () => {
        pages.value = getPagerList(totalPage.value, pageVal.value, props.showPageCount);
      }
    );
    const updatePageAndPageSize = (page, size) => {
      let changed = false;
      const oldPage = pageVal.value;
      const oldPageSize = pageSize.value;
      if (pageVal.value !== page) {
        changed = true;
        pageVal.value = page;
      }
      if (pageSize.value !== size) {
        changed = true;
        pageSize.value = size;
      }
      if (changed) {
        emits("change", { page, pageSize: size }, { page: oldPage, pageSize: oldPageSize });
      }
    };
    const selectPage = (page) => {
      updatePageAndPageSize(Number(page), pageSize.value);
    };
    const clickPageBtn = (Increase) => {
      updatePageAndPageSize(Increase ? pageVal.value + 1 : pageVal.value - 1, pageSize.value);
    };
    const moreVisible = ref({
      left: false,
      right: false
    });
    const moreClick = (more) => {
      const { value, list } = more;
      if (!list || typeof value !== "string") {
        return;
      }
      if (value === "left") {
        updatePageAndPageSize(list[list.length - 1], pageSize.value);
      } else if (value === "right") {
        updatePageAndPageSize(list[0], pageSize.value);
      }
      moreVisible.value[value] = false;
    };
    const goToPage = (val) => {
      let v = Math.round(Number(val));
      if (v < 1 || isNaN(v)) {
        v = 1;
      } else if (v > totalPage.value) {
        v = totalPage.value;
      }
      updatePageAndPageSize(v, pageSize.value);
    };
    const selectPageSize = (val) => {
      const size = Number(val);
      if (!size) {
        return;
      }
      const currentIndex = pageSize.value * (pageVal.value - 1);
      const newPage = Math.floor(currentIndex / size) + 1;
      updatePageAndPageSize(newPage, size);
    };
    const onMoreItemClick = (item, value) => {
      selectPage(item);
      if (value === "left" || value === "right") {
        moreVisible.value[value] = false;
      }
    };
    const validateInput = (value) => {
      return value === Math.round(Number(value));
    };
    __expose({
      pageCount: totalPage
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-pagination", [`o-pagination-${props.variant}`, unref(round).class.value]]),
          style: normalizeStyle(unref(round).style.value)
        },
        [
          createElementVNode("div", _hoisted_1, [
            createCommentVNode(" total "),
            layout.value.includes("total") || _ctx.$props.showTotal ? (openBlock(), createElementBlock("div", _hoisted_2, [
              renderSlot(_ctx.$slots, "total", {
                total: props.total
              }, () => [
                createTextVNode(
                  toDisplayString(unref(t)("pagination.total", props.total)),
                  1
                  /* TEXT */
                )
              ])
            ])) : createCommentVNode("v-if", true),
            createCommentVNode(" sizes "),
            layout.value.includes("pagesize") ? (openBlock(), createElementBlock("div", _hoisted_3, [
              pageSizeList.value.length > 1 ? (openBlock(), createBlock(unref(OSelect), {
                key: 0,
                "model-value": pageSize.value,
                class: "o-pagination-select",
                "default-label": defaultSizeLabel.value,
                round: props.round,
                variant: props.variant,
                onChange: selectPageSize
              }, {
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(pageSizeList.value, (item) => {
                      return openBlock(), createBlock(unref(OOption), {
                        key: item.value,
                        label: item.label,
                        value: item.value
                      }, null, 8, ["label", "value"]);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ]),
                _: 1
                /* STABLE */
              }, 8, ["model-value", "default-label", "round", "variant"])) : (openBlock(), createElementBlock(
                "div",
                _hoisted_4,
                toDisplayString(pageSizeList.value[0].label),
                1
                /* TEXT */
              ))
            ])) : createCommentVNode("v-if", true),
            createCommentVNode(" pager "),
            layout.value.includes("pager") ? (openBlock(), createElementBlock("div", _hoisted_5, [
              createElementVNode(
                "div",
                {
                  class: normalizeClass(["o-pagination-prev", {
                    "is-disabled": pageVal.value === 1
                  }]),
                  tabindex: "-1",
                  onClick: _cache[0] || (_cache[0] = () => pageVal.value !== 1 && clickPageBtn(false))
                },
                [
                  createVNode(unref(IconChevronLeft))
                ],
                2
                /* CLASS */
              ),
              createElementVNode("div", _hoisted_6, [
                props.simple ? (openBlock(), createElementBlock("div", _hoisted_7, [
                  createVNode(unref(OInputNumber), {
                    "model-value": pageVal.value,
                    clearable: false,
                    class: "o-pagination-input",
                    controls: "none",
                    min: 1,
                    max: totalPage.value,
                    round: props.round,
                    variant: props.variant,
                    "empty-value": pageVal.value,
                    validate: validateInput,
                    onChange: goToPage
                  }, null, 8, ["model-value", "max", "round", "variant", "empty-value"]),
                  _cache[2] || (_cache[2] = createTextVNode(" / ")),
                  createElementVNode(
                    "span",
                    null,
                    toDisplayString(totalPage.value),
                    1
                    /* TEXT */
                  )
                ])) : (openBlock(true), createElementBlock(
                  Fragment,
                  { key: 1 },
                  renderList(pages.value, (item) => {
                    return openBlock(), createElementBlock("div", {
                      key: item.value,
                      class: normalizeClass(["o-pagination-item", { active: item.value === pageVal.value }]),
                      tabindex: "-1",
                      onClick: ($event) => selectPage(item.value)
                    }, [
                      !item.isMore ? (openBlock(), createElementBlock(
                        "span",
                        _hoisted_9,
                        toDisplayString(item.value),
                        1
                        /* TEXT */
                      )) : (openBlock(), createBlock(unref(OPopover), {
                        key: 1,
                        position: "bottom",
                        "wrap-class": "o-options-popup",
                        disabled: !props.showMore,
                        visible: moreVisible.value[item.value],
                        "onUpdate:visible": ($event) => moreVisible.value[item.value] = $event
                      }, {
                        target: withCtx(() => [
                          createElementVNode("span", {
                            onClick: withModifiers(($event) => moreClick(item), ["stop"]),
                            class: "o-pagination-more-icon-wrap"
                          }, [
                            createVNode(unref(OIcon), {
                              class: "o-pagination-more-icon",
                              icon: unref(IconEllipsis)
                            }, null, 8, ["icon"]),
                            createVNode(unref(OIcon), {
                              class: "o-pagination-more-arrow-icon",
                              icon: item.value === "left" ? unref(IconArrowLeft) : unref(IconArrowRight)
                            }, null, 8, ["icon"])
                          ], 8, _hoisted_10)
                        ]),
                        default: withCtx(() => [
                          createVNode(
                            unref(_sfc_main$1),
                            { scrollbar: "" },
                            {
                              default: withCtx(() => [
                                createCommentVNode(" 当下拉项大于50，采用虚拟列表 "),
                                item.list && item.list.length > 50 ? (openBlock(), createBlock(unref(OVirtualList), {
                                  key: 0,
                                  list: item.list,
                                  class: "o-pagination-virtual-more-list",
                                  scrollbar: { showType: "hover", size: "small" }
                                }, {
                                  default: withCtx((data) => [
                                    (openBlock(), createBlock(unref(OOption), {
                                      key: data.item,
                                      class: "o-pagination-more-item",
                                      label: String(data.item),
                                      value: data.item,
                                      onClick: ($event) => onMoreItemClick(data.item, item.value)
                                    }, null, 8, ["label", "value", "onClick"]))
                                  ]),
                                  _: 2
                                  /* DYNAMIC */
                                }, 1032, ["list"])) : item.list ? (openBlock(true), createElementBlock(
                                  Fragment,
                                  { key: 1 },
                                  renderList(item.list, (opt) => {
                                    return openBlock(), createBlock(unref(OOption), {
                                      key: opt,
                                      class: "o-pagination-more-item",
                                      label: String(opt),
                                      value: opt,
                                      onClick: ($event) => onMoreItemClick(opt, item.value)
                                    }, null, 8, ["label", "value", "onClick"]);
                                  }),
                                  128
                                  /* KEYED_FRAGMENT */
                                )) : createCommentVNode("v-if", true)
                              ]),
                              _: 2
                              /* DYNAMIC */
                            },
                            1024
                            /* DYNAMIC_SLOTS */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["disabled", "visible", "onUpdate:visible"]))
                    ], 10, _hoisted_8);
                  }),
                  128
                  /* KEYED_FRAGMENT */
                ))
              ]),
              createElementVNode(
                "div",
                {
                  class: normalizeClass(["o-pagination-next", {
                    "is-disabled": pageVal.value === totalPage.value
                  }]),
                  tabindex: "-1",
                  onClick: _cache[1] || (_cache[1] = () => pageVal.value !== totalPage.value && clickPageBtn(true))
                },
                [
                  createVNode(unref(IconChevronRight))
                ],
                2
                /* CLASS */
              )
            ])) : createCommentVNode("v-if", true),
            createCommentVNode(" jumper "),
            layout.value.includes("jumper") ? (openBlock(), createElementBlock("div", _hoisted_11, [
              createElementVNode(
                "span",
                null,
                toDisplayString(unref(t)("pagination.goto")),
                1
                /* TEXT */
              ),
              createVNode(unref(OInputNumber), {
                "model-value": pageVal.value,
                class: "o-pagination-input",
                controls: "none",
                min: 1,
                max: totalPage.value,
                round: props.round,
                variant: props.variant,
                validate: validateInput,
                "empty-value": pageVal.value,
                onChange: goToPage
              }, null, 8, ["model-value", "max", "round", "variant", "empty-value"])
            ])) : createCommentVNode("v-if", true)
          ])
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});
export {
  _sfc_main as default
};