plus-pro-components/lib/components/pagination/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../constants/index.js');
var elementPlus = require('element-plus');
var page = require('../../../constants/page.js');

const _hoisted_1 = { class: "plus-pagination" };
const _hoisted_2 = /* @__PURE__ */ vue.createElementVNode(
  "span",
  null,
  null,
  -1
  /* HOISTED */
);
const _hoisted_3 = /* @__PURE__ */ vue.createElementVNode(
  "span",
  null,
  null,
  -1
  /* HOISTED */
);
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "PlusPagination"
  },
  __name: "index",
  props: {
    modelValue: { default: () => ({ ...page.DefaultPageInfo }) },
    total: { default: 0 },
    pageSizeList: { default: () => [...page.DefaultPageSizeList] },
    align: { default: "right" }
  },
  emits: ["update:modelValue", "change", "size-change", "current-change"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const pageInfo = vue.ref({ ...page.DefaultPageInfo });
    vue.watchEffect(() => {
      pageInfo.value = { ...props.modelValue };
    });
    const handleEmit = () => {
      emit("update:modelValue", pageInfo.value);
      emit("change", pageInfo.value);
    };
    const handleSizeChange = (pageSize) => {
      pageInfo.value.pageSize = pageSize;
      pageInfo.value.page = 1;
      handleEmit();
      emit("size-change", pageSize);
    };
    const handleCurrentChange = (page) => {
      pageInfo.value.page = page;
      handleEmit();
      emit("current-change", page);
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        _ctx.align === "right" ? vue.renderSlot(_ctx.$slots, "pagination-left", { key: 0 }, () => [
          _hoisted_2
        ]) : vue.createCommentVNode("v-if", true),
        vue.createVNode(vue.unref(elementPlus.ElPagination), vue.mergeProps({
          layout: "total, sizes, prev, pager, next, jumper",
          background: false,
          "current-page": pageInfo.value.page,
          "page-size": pageInfo.value.pageSize,
          total: _ctx.total,
          "page-sizes": _ctx.pageSizeList
        }, _ctx.$attrs, {
          onSizeChange: handleSizeChange,
          onCurrentChange: handleCurrentChange
        }), null, 16, ["current-page", "page-size", "total", "page-sizes"]),
        _ctx.align === "left" ? vue.renderSlot(_ctx.$slots, "pagination-right", { key: 1 }, () => [
          _hoisted_3
        ]) : vue.createCommentVNode("v-if", true)
      ]);
    };
  }
});

exports.default = _sfc_main;