@element-plus/nightly 0.0.20220119 → 0.0.20220123

package/lib/components/pagination/src/components/pager.js

@@ -2,11 +2,198 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var pager_vue_vue_type_script_lang = require('./pager.vue_vue_type_script_lang.js');
-var pager_vue_vue_type_template_id_0bfc9916_lang = require('./pager.vue_vue_type_template_id_0bfc9916_lang.js');
+var vue = require('vue');
+var iconsVue = require('@element-plus/icons-vue');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
 
-pager_vue_vue_type_script_lang["default"].render = pager_vue_vue_type_template_id_0bfc9916_lang.render;
-pager_vue_vue_type_script_lang["default"].__file = "packages/components/pagination/src/components/pager.vue";
+const paginationPagerProps = {
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  pageCount: {
+    type: Number,
+    required: true
+  },
+  pagerCount: {
+    type: Number,
+    default: 7
+  },
+  disabled: Boolean
+};
+const _sfc_main = vue.defineComponent({
+  name: "ElPaginationPager",
+  components: {
+    DArrowLeft: iconsVue.DArrowLeft,
+    DArrowRight: iconsVue.DArrowRight,
+    MoreFilled: iconsVue.MoreFilled
+  },
+  props: paginationPagerProps,
+  emits: ["change"],
+  setup(props, { emit }) {
+    const showPrevMore = vue.ref(false);
+    const showNextMore = vue.ref(false);
+    const quickPrevHover = vue.ref(false);
+    const quickNextHover = vue.ref(false);
+    const pagers = vue.computed(() => {
+      const pagerCount = props.pagerCount;
+      const halfPagerCount = (pagerCount - 1) / 2;
+      const currentPage = Number(props.currentPage);
+      const pageCount = Number(props.pageCount);
+      let showPrevMore2 = false;
+      let showNextMore2 = false;
+      if (pageCount > pagerCount) {
+        if (currentPage > pagerCount - halfPagerCount) {
+          showPrevMore2 = true;
+        }
+        if (currentPage < pageCount - halfPagerCount) {
+          showNextMore2 = true;
+        }
+      }
+      const array = [];
+      if (showPrevMore2 && !showNextMore2) {
+        const startPage = pageCount - (pagerCount - 2);
+        for (let i = startPage; i < pageCount; i++) {
+          array.push(i);
+        }
+      } else if (!showPrevMore2 && showNextMore2) {
+        for (let i = 2; i < pagerCount; i++) {
+          array.push(i);
+        }
+      } else if (showPrevMore2 && showNextMore2) {
+        const offset = Math.floor(pagerCount / 2) - 1;
+        for (let i = currentPage - offset; i <= currentPage + offset; i++) {
+          array.push(i);
+        }
+      } else {
+        for (let i = 2; i < pageCount; i++) {
+          array.push(i);
+        }
+      }
+      return array;
+    });
+    vue.watchEffect(() => {
+      const halfPagerCount = (props.pagerCount - 1) / 2;
+      showPrevMore.value = false;
+      showNextMore.value = false;
+      if (props.pageCount > props.pagerCount) {
+        if (props.currentPage > props.pagerCount - halfPagerCount) {
+          showPrevMore.value = true;
+        }
+        if (props.currentPage < props.pageCount - halfPagerCount) {
+          showNextMore.value = true;
+        }
+      }
+    });
+    function onMouseenter(direction) {
+      if (props.disabled)
+        return;
+      if (direction === "left") {
+        quickPrevHover.value = true;
+      } else {
+        quickNextHover.value = true;
+      }
+    }
+    function onEnter(e) {
+      const target = e.target;
+      if (target.tagName.toLowerCase() === "li" && Array.from(target.classList).includes("number")) {
+        const newPage = Number(target.textContent);
+        if (newPage !== props.currentPage) {
+          emit("change", newPage);
+        }
+      }
+    }
+    function onPagerClick(event) {
+      const target = event.target;
+      if (target.tagName.toLowerCase() === "ul" || props.disabled) {
+        return;
+      }
+      let newPage = Number(target.textContent);
+      const pageCount = props.pageCount;
+      const currentPage = props.currentPage;
+      const pagerCountOffset = props.pagerCount - 2;
+      if (target.className.includes("more")) {
+        if (target.className.includes("quickprev")) {
+          newPage = currentPage - pagerCountOffset;
+        } else if (target.className.includes("quicknext")) {
+          newPage = currentPage + pagerCountOffset;
+        }
+      }
+      if (!isNaN(newPage)) {
+        if (newPage < 1) {
+          newPage = 1;
+        }
+        if (newPage > pageCount) {
+          newPage = pageCount;
+        }
+      }
+      if (newPage !== currentPage) {
+        emit("change", newPage);
+      }
+    }
+    return {
+      showPrevMore,
+      showNextMore,
+      quickPrevHover,
+      quickNextHover,
+      pagers,
+      onMouseenter,
+      onPagerClick,
+      onEnter
+    };
+  }
+});
+const _hoisted_1 = ["aria-current"];
+const _hoisted_2 = ["aria-current"];
+const _hoisted_3 = ["aria-current"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_d_arrow_left = vue.resolveComponent("d-arrow-left");
+  const _component_more_filled = vue.resolveComponent("more-filled");
+  const _component_d_arrow_right = vue.resolveComponent("d-arrow-right");
+  return vue.openBlock(), vue.createElementBlock("ul", {
+    class: "el-pager",
+    onClick: _cache[4] || (_cache[4] = (...args) => _ctx.onPagerClick && _ctx.onPagerClick(...args)),
+    onKeyup: _cache[5] || (_cache[5] = vue.withKeys((...args) => _ctx.onEnter && _ctx.onEnter(...args), ["enter"]))
+  }, [
+    _ctx.pageCount > 0 ? (vue.openBlock(), vue.createElementBlock("li", {
+      key: 0,
+      class: vue.normalizeClass([{ active: _ctx.currentPage === 1, disabled: _ctx.disabled }, "number"]),
+      "aria-current": _ctx.currentPage === 1,
+      tabindex: "0"
+    }, " 1 ", 10, _hoisted_1)) : vue.createCommentVNode("v-if", true),
+    _ctx.showPrevMore ? (vue.openBlock(), vue.createElementBlock("li", {
+      key: 1,
+      class: vue.normalizeClass(["el-icon more btn-quickprev", { disabled: _ctx.disabled }]),
+      onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.onMouseenter("left")),
+      onMouseleave: _cache[1] || (_cache[1] = ($event) => _ctx.quickPrevHover = false)
+    }, [
+      _ctx.quickPrevHover ? (vue.openBlock(), vue.createBlock(_component_d_arrow_left, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_more_filled, { key: 1 }))
+    ], 34)) : vue.createCommentVNode("v-if", true),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.pagers, (pager) => {
+      return vue.openBlock(), vue.createElementBlock("li", {
+        key: pager,
+        class: vue.normalizeClass([{ active: _ctx.currentPage === pager, disabled: _ctx.disabled }, "number"]),
+        "aria-current": _ctx.currentPage === pager,
+        tabindex: "0"
+      }, vue.toDisplayString(pager), 11, _hoisted_2);
+    }), 128)),
+    _ctx.showNextMore ? (vue.openBlock(), vue.createElementBlock("li", {
+      key: 2,
+      class: vue.normalizeClass(["el-icon more btn-quicknext", { disabled: _ctx.disabled }]),
+      onMouseenter: _cache[2] || (_cache[2] = ($event) => _ctx.onMouseenter("right")),
+      onMouseleave: _cache[3] || (_cache[3] = ($event) => _ctx.quickNextHover = false)
+    }, [
+      _ctx.quickNextHover ? (vue.openBlock(), vue.createBlock(_component_d_arrow_right, { key: 0 })) : (vue.openBlock(), vue.createBlock(_component_more_filled, { key: 1 }))
+    ], 34)) : vue.createCommentVNode("v-if", true),
+    _ctx.pageCount > 1 ? (vue.openBlock(), vue.createElementBlock("li", {
+      key: 3,
+      class: vue.normalizeClass([{ active: _ctx.currentPage === _ctx.pageCount, disabled: _ctx.disabled }, "number"]),
+      "aria-current": _ctx.currentPage === _ctx.pageCount,
+      tabindex: "0"
+    }, vue.toDisplayString(_ctx.pageCount), 11, _hoisted_3)) : vue.createCommentVNode("v-if", true)
+  ], 32);
+}
+var Pager = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = pager_vue_vue_type_script_lang["default"];
+exports["default"] = Pager;
 //# sourceMappingURL=pager.js.map

package/lib/components/pagination/src/components/pager.js.map

@@ -1 +1 @@
-{"version":3,"file":"pager.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"pager.js","sources":["../../../../../../../packages/components/pagination/src/components/pager.vue"],"sourcesContent":["<template>\n  <ul class=\"el-pager\" @click=\"onPagerClick\" @keyup.enter=\"onEnter\">\n    <li\n      v-if=\"pageCount > 0\"\n      :class=\"{ active: currentPage === 1, disabled }\"\n      class=\"number\"\n      :aria-current=\"currentPage === 1\"\n      tabindex=\"0\"\n    >\n      1\n    </li>\n    <li\n      v-if=\"showPrevMore\"\n      class=\"el-icon more btn-quickprev\"\n      :class=\"{ disabled }\"\n      @mouseenter=\"onMouseenter('left')\"\n      @mouseleave=\"quickPrevHover = false\"\n    >\n      <d-arrow-left v-if=\"quickPrevHover\" />\n      <more-filled v-else />\n    </li>\n    <li\n      v-for=\"pager in pagers\"\n      :key=\"pager\"\n      :class=\"{ active: currentPage === pager, disabled }\"\n      class=\"number\"\n      :aria-current=\"currentPage === pager\"\n      tabindex=\"0\"\n    >\n      {{ pager }}\n    </li>\n    <li\n      v-if=\"showNextMore\"\n      class=\"el-icon more btn-quicknext\"\n      :class=\"{ disabled }\"\n      @mouseenter=\"onMouseenter('right')\"\n      @mouseleave=\"quickNextHover = false\"\n    >\n      <d-arrow-right v-if=\"quickNextHover\" />\n      <more-filled v-else />\n    </li>\n    <li\n      v-if=\"pageCount > 1\"\n      :class=\"{ active: currentPage === pageCount, disabled }\"\n      class=\"number\"\n      :aria-current=\"currentPage === pageCount\"\n      tabindex=\"0\"\n    >\n      {{ pageCount }}\n    </li>\n  </ul>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, watchEffect } from 'vue'\nimport { MoreFilled, DArrowLeft, DArrowRight } from '@element-plus/icons-vue'\n\nconst paginationPagerProps = {\n  currentPage: {\n    type: Number,\n    default: 1,\n  },\n  pageCount: {\n    type: Number,\n    required: true,\n  },\n  pagerCount: {\n    type: Number,\n    default: 7,\n  },\n  disabled: Boolean,\n} as const\n\nexport default defineComponent({\n  name: 'ElPaginationPager',\n\n  components: {\n    DArrowLeft,\n    DArrowRight,\n    MoreFilled,\n  },\n  props: paginationPagerProps,\n  emits: ['change'],\n\n  setup(props, { emit }) {\n    const showPrevMore = ref(false)\n    const showNextMore = ref(false)\n    const quickPrevHover = ref(false)\n    const quickNextHover = ref(false)\n\n    const pagers = computed(() => {\n      const pagerCount = props.pagerCount\n      const halfPagerCount = (pagerCount - 1) / 2\n      const currentPage = Number(props.currentPage)\n      const pageCount = Number(props.pageCount)\n\n      let showPrevMore = false\n      let showNextMore = false\n      if (pageCount > pagerCount) {\n        if (currentPage > pagerCount - halfPagerCount) {\n          showPrevMore = true\n        }\n        if (currentPage < pageCount - halfPagerCount) {\n          showNextMore = true\n        }\n      }\n      const array: number[] = []\n      if (showPrevMore && !showNextMore) {\n        const startPage = pageCount - (pagerCount - 2)\n        for (let i = startPage; i < pageCount; i++) {\n          array.push(i)\n        }\n      } else if (!showPrevMore && showNextMore) {\n        for (let i = 2; i < pagerCount; i++) {\n          array.push(i)\n        }\n      } else if (showPrevMore && showNextMore) {\n        const offset = Math.floor(pagerCount / 2) - 1\n        for (let i = currentPage - offset; i <= currentPage + offset; i++) {\n          array.push(i)\n        }\n      } else {\n        for (let i = 2; i < pageCount; i++) {\n          array.push(i)\n        }\n      }\n\n      return array\n    })\n\n    watchEffect(() => {\n      const halfPagerCount = (props.pagerCount - 1) / 2\n\n      showPrevMore.value = false\n      showNextMore.value = false\n\n      if (props.pageCount > props.pagerCount) {\n        if (props.currentPage > props.pagerCount - halfPagerCount) {\n          showPrevMore.value = true\n        }\n        if (props.currentPage < props.pageCount - halfPagerCount) {\n          showNextMore.value = true\n        }\n      }\n    })\n\n    function onMouseenter(direction: 'left' | 'right') {\n      if (props.disabled) return\n      if (direction === 'left') {\n        quickPrevHover.value = true\n      } else {\n        quickNextHover.value = true\n      }\n    }\n\n    function onEnter(e: UIEvent) {\n      const target = e.target as HTMLElement\n      if (\n        target.tagName.toLowerCase() === 'li' &&\n        Array.from(target.classList).includes('number')\n      ) {\n        const newPage = Number(target.textContent)\n        if (newPage !== props.currentPage) {\n          emit('change', newPage)\n        }\n      }\n    }\n\n    function onPagerClick(event: UIEvent) {\n      const target = event.target as HTMLElement\n      if (target.tagName.toLowerCase() === 'ul' || props.disabled) {\n        return\n      }\n\n      let newPage = Number(target.textContent)\n      const pageCount = props.pageCount\n      const currentPage = props.currentPage\n      const pagerCountOffset = props.pagerCount - 2\n      if (target.className.includes('more')) {\n        if (target.className.includes('quickprev')) {\n          newPage = currentPage - pagerCountOffset\n        } else if (target.className.includes('quicknext')) {\n          newPage = currentPage + pagerCountOffset\n        }\n      }\n      if (!isNaN(newPage)) {\n        if (newPage < 1) {\n          newPage = 1\n        }\n        if (newPage > pageCount) {\n          newPage = pageCount\n        }\n      }\n      if (newPage !== currentPage) {\n        emit('change', newPage)\n      }\n    }\n\n    return {\n      showPrevMore,\n      showNextMore,\n      quickPrevHover,\n      quickNextHover,\n      pagers,\n\n      onMouseenter,\n      onPagerClick,\n      onEnter,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","DArrowLeft","DArrowRight","MoreFilled","ref","computed","_openBlock","_createElementBlock","_createCommentVNode","_createBlock"],"mappings":"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"}

package/lib/components/pagination/src/components/prev.js

@@ -2,11 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var prev_vue_vue_type_script_lang = require('./prev.vue_vue_type_script_lang.js');
-var prev_vue_vue_type_template_id_15259d71_lang = require('./prev.vue_vue_type_template_id_15259d71_lang.js');
+var vue = require('vue');
+var index = require('../../../icon/index.js');
+var iconsVue = require('@element-plus/icons-vue');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
 
-prev_vue_vue_type_script_lang["default"].render = prev_vue_vue_type_template_id_15259d71_lang.render;
-prev_vue_vue_type_script_lang["default"].__file = "packages/components/pagination/src/components/prev.vue";
+const paginationPrevProps = {
+  disabled: Boolean,
+  currentPage: {
+    type: Number,
+    default: 1
+  },
+  prevText: {
+    type: String,
+    default: ""
+  }
+};
+const _sfc_main = vue.defineComponent({
+  name: "ElPaginationPrev",
+  components: {
+    ElIcon: index.ElIcon,
+    ArrowLeft: iconsVue.ArrowLeft
+  },
+  props: paginationPrevProps,
+  emits: ["click"],
+  setup(props) {
+    const internalDisabled = vue.computed(() => props.disabled || props.currentPage <= 1);
+    return {
+      internalDisabled
+    };
+  }
+});
+const _hoisted_1 = ["disabled", "aria-disabled"];
+const _hoisted_2 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_arrow_left = vue.resolveComponent("arrow-left");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  return vue.openBlock(), vue.createElementBlock("button", {
+    type: "button",
+    class: "btn-prev",
+    disabled: _ctx.internalDisabled,
+    "aria-disabled": _ctx.internalDisabled,
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }, [
+    _ctx.prevText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.prevText), 1)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 1 }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_arrow_left)
+      ]),
+      _: 1
+    }))
+  ], 8, _hoisted_1);
+}
+var Prev = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = prev_vue_vue_type_script_lang["default"];
+exports["default"] = Prev;
 //# sourceMappingURL=prev.js.map

package/lib/components/pagination/src/components/prev.js.map

@@ -1 +1 @@
-{"version":3,"file":"prev.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"prev.js","sources":["../../../../../../../packages/components/pagination/src/components/prev.vue"],"sourcesContent":["<template>\n  <button\n    type=\"button\"\n    class=\"btn-prev\"\n    :disabled=\"internalDisabled\"\n    :aria-disabled=\"internalDisabled\"\n    @click=\"$emit('click', $event)\"\n  >\n    <span v-if=\"prevText\">{{ prevText }}</span>\n    <el-icon v-else><arrow-left /></el-icon>\n  </button>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ArrowLeft } from '@element-plus/icons-vue'\n\nconst paginationPrevProps = {\n  disabled: Boolean,\n  currentPage: {\n    type: Number,\n    default: 1,\n  },\n  prevText: {\n    type: String,\n    default: '',\n  },\n} as const\n\nexport default defineComponent({\n  name: 'ElPaginationPrev',\n\n  components: {\n    ElIcon,\n    ArrowLeft,\n  },\n  props: paginationPrevProps,\n  emits: ['click'],\n\n  setup(props) {\n    const internalDisabled = computed(\n      () => props.disabled || props.currentPage <= 1\n    )\n    return {\n      internalDisabled,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ElIcon","ArrowLeft","computed","_openBlock","_createElementBlock","_withCtx"],"mappings":";;;;;;;;;AAkBA,MAAM,sBAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;AAIb,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,YACVC;AAAA,eACAC;AAAA;AAAA,EAEF,OAAO;AAAA,EACP,OAAO,CAAC;AAAA,EAER,MAAM,OAAO;AACX,UAAM,mBAAmBC,aACvB,MAAM,MAAM,YAAY,MAAM,eAAe;AAE/C,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;;;SA3CGC,iBAAQC;AAAA,IACb,MAAK;AAAA,IACJ;AAAA,IACA,eAAa;AAAA,IACb,iBAAK;AAAA;KAEM;AAAA,sCACZA,uBAAwC,gGAAV;AAAA,eAAdC,YAAc;AAAA;;;;;;;;;;"}

package/lib/components/pagination/src/components/sizes.js

@@ -2,11 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var sizes_vue_vue_type_script_lang = require('./sizes.vue_vue_type_script_lang.js');
-var sizes_vue_vue_type_template_id_3a063678_lang = require('./sizes.vue_vue_type_template_id_3a063678_lang.js');
+var vue = require('vue');
+var isEqual = require('lodash/isEqual');
+var index = require('../../../select/index.js');
+require('../../../../hooks/index.js');
+var props = require('../../../../utils/props.js');
+var usePagination = require('../usePagination.js');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
+var index$1 = require('../../../../hooks/use-locale/index.js');
 
-sizes_vue_vue_type_script_lang["default"].render = sizes_vue_vue_type_template_id_3a063678_lang.render;
-sizes_vue_vue_type_script_lang["default"].__file = "packages/components/pagination/src/components/sizes.vue";
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-exports["default"] = sizes_vue_vue_type_script_lang["default"];
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+
+const paginationSizesProps = props.buildProps({
+  pageSize: {
+    type: Number,
+    required: true
+  },
+  pageSizes: {
+    type: props.definePropType(Array),
+    default: () => props.mutable([10, 20, 30, 40, 50, 100])
+  },
+  popperClass: {
+    type: String,
+    default: ""
+  },
+  disabled: Boolean
+});
+const _sfc_main = vue.defineComponent({
+  name: "ElPaginationSizes",
+  components: {
+    ElSelect: index.ElSelect,
+    ElOption: index.ElOption
+  },
+  props: paginationSizesProps,
+  emits: ["page-size-change"],
+  setup(props, { emit }) {
+    const { t } = index$1.useLocale();
+    const pagination = usePagination.usePagination();
+    const innerPageSize = vue.ref(props.pageSize);
+    vue.watch(() => props.pageSizes, (newVal, oldVal) => {
+      if (isEqual__default["default"](newVal, oldVal))
+        return;
+      if (Array.isArray(newVal)) {
+        const pageSize = newVal.indexOf(props.pageSize) > -1 ? props.pageSize : props.pageSizes[0];
+        emit("page-size-change", pageSize);
+      }
+    });
+    vue.watch(() => props.pageSize, (newVal) => {
+      innerPageSize.value = newVal;
+    });
+    const innerPagesizes = vue.computed(() => props.pageSizes);
+    function handleChange(val) {
+      if (val !== innerPageSize.value) {
+        innerPageSize.value = val;
+        pagination.handleSizeChange?.(Number(val));
+      }
+    }
+    return {
+      innerPagesizes,
+      innerPageSize,
+      t,
+      handleChange
+    };
+  }
+});
+const _hoisted_1 = { class: "el-pagination__sizes" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_option = vue.resolveComponent("el-option");
+  const _component_el_select = vue.resolveComponent("el-select");
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+    vue.createVNode(_component_el_select, {
+      "model-value": _ctx.innerPageSize,
+      disabled: _ctx.disabled,
+      "popper-class": _ctx.popperClass,
+      size: "small",
+      onChange: _ctx.handleChange
+    }, {
+      default: vue.withCtx(() => [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.innerPagesizes, (item) => {
+          return vue.openBlock(), vue.createBlock(_component_el_option, {
+            key: item,
+            value: item,
+            label: item + _ctx.t("el.pagination.pagesize")
+          }, null, 8, ["value", "label"]);
+        }), 128))
+      ]),
+      _: 1
+    }, 8, ["model-value", "disabled", "popper-class", "onChange"])
+  ]);
+}
+var Sizes = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
+
+exports["default"] = Sizes;
 //# sourceMappingURL=sizes.js.map

package/lib/components/pagination/src/components/sizes.js.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"sizes.js","sources":["../../../../../../../packages/components/pagination/src/components/sizes.vue"],"sourcesContent":["<template>\n  <span class=\"el-pagination__sizes\">\n    <el-select\n      :model-value=\"innerPageSize\"\n      :disabled=\"disabled\"\n      :popper-class=\"popperClass\"\n      size=\"small\"\n      @change=\"handleChange\"\n    >\n      <el-option\n        v-for=\"item in innerPagesizes\"\n        :key=\"item\"\n        :value=\"item\"\n        :label=\"item + t('el.pagination.pagesize')\"\n      />\n    </el-select>\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, watch, computed, ref } from 'vue'\nimport isEqual from 'lodash/isEqual'\nimport { ElSelect, ElOption } from '@element-plus/components/select'\nimport { useLocale } from '@element-plus/hooks'\nimport { buildProps, definePropType, mutable } from '@element-plus/utils/props'\nimport { usePagination } from '../usePagination'\n\nimport type { Nullable } from '@element-plus/utils/types'\n\nconst paginationSizesProps = buildProps({\n  pageSize: {\n    type: Number,\n    required: true,\n  },\n  pageSizes: {\n    type: definePropType<number[]>(Array),\n    default: () => mutable([10, 20, 30, 40, 50, 100] as const),\n  },\n  popperClass: {\n    type: String,\n    default: '',\n  },\n  disabled: Boolean,\n} as const)\n\nexport default defineComponent({\n  name: 'ElPaginationSizes',\n\n  components: {\n    ElSelect,\n    ElOption,\n  },\n\n  props: paginationSizesProps,\n  emits: ['page-size-change'],\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const pagination = usePagination()\n    const innerPageSize = ref<Nullable<number>>(props.pageSize)\n\n    watch(\n      () => props.pageSizes,\n      (newVal, oldVal) => {\n        if (isEqual(newVal, oldVal)) return\n        if (Array.isArray(newVal)) {\n          const pageSize =\n            newVal.indexOf(props.pageSize) > -1\n              ? props.pageSize\n              : props.pageSizes[0]\n          emit('page-size-change', pageSize)\n        }\n      }\n    )\n\n    watch(\n      () => props.pageSize,\n      (newVal) => {\n        innerPageSize.value = newVal\n      }\n    )\n\n    const innerPagesizes = computed(() => props.pageSizes)\n\n    function handleChange(val: number) {\n      if (val !== innerPageSize.value) {\n        innerPageSize.value = val\n        pagination.handleSizeChange?.(Number(val))\n      }\n    }\n\n    return {\n      innerPagesizes,\n      innerPageSize,\n\n      t,\n      handleChange,\n    }\n  },\n})\n</script>\n"],"names":["buildProps","definePropType","mutable","defineComponent","ElSelect","ElOption","useLocale","usePagination","ref","isEqual","computed","_openBlock","_createElementBlock","_Fragment","_createBlock"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,uBAAuBA,iBAAW;AAAA,EACtC,UAAU;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,WAAW;AAAA,IACT,MAAMC,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI;AAAA;AAAA,EAE9C,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA;AAGZ,MAAK,YAAaC,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,cACVC;AAAA,cACAC;AAAA;AAAA,EAGF,OAAO;AAAA,EACP,OAAO,CAAC;AAAA,EAER,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,MAAMC;AACd,UAAM,aAAaC;AACnB,UAAM,gBAAgBC,QAAsB,MAAM;AAElD,cACE,MAAM,MAAM,WACZ,CAAC,QAAQ,WAAW;AAClB,UAAIC,4BAAQ,QAAQ;AAAS;AAC7B,UAAI,MAAM,QAAQ,SAAS;AACzB,cAAM,WACJ,OAAO,QAAQ,MAAM,YAAY,KAC7B,MAAM,WACN,MAAM,UAAU;AACtB,aAAK,oBAAoB;AAAA;AAAA;AAK/B,cACE,MAAM,MAAM,UACZ,CAAC,WAAW;AACV,oBAAc,QAAQ;AAAA;AAI1B,UAAM,iBAAiBC,aAAS,MAAM,MAAM;AAE5C,0BAAsB,KAAa;AACjC,UAAI,QAAQ,cAAc,OAAO;AAC/B,sBAAc,QAAQ;AACtB,mBAAW,mBAAmB,OAAO;AAAA;AAAA;AAIzC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;SA9FFC,iBAaYC;AAAA,oBAZT,sBAA0B;AAAA,MAC1B,eAAU;AAAA,MACV,eAAY;AAAA,MACb,gBAAY;AAAA,MACX;AAAA;;iCAED;AAAA,qDAKEC;iBAHMF,iBAAIG;AAAA,YACT,KAAK;AAAA,YACL,OAAO;AAAA;;;;;;;;;;;;"}

package/lib/components/pagination/src/components/total.js

@@ -2,11 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var total_vue_vue_type_script_lang = require('./total.vue_vue_type_script_lang.js');
-var total_vue_vue_type_template_id_bc261314_lang = require('./total.vue_vue_type_template_id_bc261314_lang.js');
+var vue = require('vue');
+require('../../../../hooks/index.js');
+var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
+var index = require('../../../../hooks/use-locale/index.js');
 
-total_vue_vue_type_script_lang["default"].render = total_vue_vue_type_template_id_bc261314_lang.render;
-total_vue_vue_type_script_lang["default"].__file = "packages/components/pagination/src/components/total.vue";
+const paginationTotalProps = {
+  total: {
+    type: Number,
+    default: 1e3
+  }
+};
+const _sfc_main = vue.defineComponent({
+  name: "ElPaginationTotal",
+  props: paginationTotalProps,
+  setup() {
+    const { t } = index.useLocale();
+    return {
+      t
+    };
+  }
+});
+const _hoisted_1 = { class: "el-pagination__total" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.t("el.pagination.total", {
+    total: _ctx.total
+  })), 1);
+}
+var Total = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
 
-exports["default"] = total_vue_vue_type_script_lang["default"];
+exports["default"] = Total;
 //# sourceMappingURL=total.js.map

package/lib/components/pagination/src/components/total.js.map

@@ -1 +1 @@
-{"version":3,"file":"total.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"total.js","sources":["../../../../../../../packages/components/pagination/src/components/total.vue"],"sourcesContent":["<template>\n  <span class=\"el-pagination__total\">\n    {{\n      t('el.pagination.total', {\n        total,\n      })\n    }}\n  </span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { useLocale } from '@element-plus/hooks'\n\nimport type { ExtractPropTypes } from 'vue'\n\nconst paginationTotalProps = {\n  total: {\n    type: Number,\n    default: 1000,\n  },\n} as const\nexport type PaginationTotalProps = ExtractPropTypes<typeof paginationTotalProps>\n\nexport default defineComponent({\n  name: 'ElPaginationTotal',\n\n  props: paginationTotalProps,\n\n  setup() {\n    const { t } = useLocale()\n    return {\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","useLocale","_createElementBlock"],"mappings":";;;;;;;;;AAgBA,MAAM,uBAAuB;AAAA,EAC3B,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;AAKb,MAAK,YAAaA,oBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,EAEP,QAAQ;AACN,UAAM,EAAE,MAAMC;AACd,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;2BA/BJ,wBAMO,OANP,UAMO;0BAJgCC,uBAAK;AAAA;;;;;;;"}

package/lib/components/pagination/src/pagination.js

@@ -7,20 +7,14 @@ require('../../../hooks/index.js');
 var error = require('../../../utils/error.js');
 var props = require('../../../utils/props.js');
 require('../../../tokens/index.js');
-require('./components/prev.js');
-require('./components/next.js');
-require('./components/sizes.js');
-require('./components/jumper.js');
-require('./components/total.js');
-require('./components/pager.js');
+var prev = require('./components/prev.js');
+var next = require('./components/next.js');
+var sizes = require('./components/sizes.js');
+var jumper = require('./components/jumper.js');
+var total = require('./components/total.js');
+var pager = require('./components/pager.js');
 var index = require('../../../hooks/use-locale/index.js');
 var pagination = require('../../../tokens/pagination.js');
-var prev_vue_vue_type_script_lang = require('./components/prev.vue_vue_type_script_lang.js');
-var jumper_vue_vue_type_script_lang = require('./components/jumper.vue_vue_type_script_lang.js');
-var pager_vue_vue_type_script_lang = require('./components/pager.vue_vue_type_script_lang.js');
-var next_vue_vue_type_script_lang = require('./components/next.vue_vue_type_script_lang.js');
-var sizes_vue_vue_type_script_lang = require('./components/sizes.vue_vue_type_script_lang.js');
-var total_vue_vue_type_script_lang = require('./components/total.vue_vue_type_script_lang.js');
 
 const isAbsent = (v) => typeof v !== "number";
 const paginationProps = props.buildProps({
@@ -159,13 +153,13 @@ var Pagination = vue.defineComponent({
         currentPageBridge.value = newPageCount;
       }
     }
-    function prev() {
+    function prev$1() {
       if (props.disabled)
         return;
       currentPageBridge.value -= 1;
       emit("prev-click", currentPageBridge.value);
     }
-    function next() {
+    function next$1() {
       if (props.disabled)
         return;
       currentPageBridge.value += 1;
@@ -192,35 +186,35 @@ var Pagination = vue.defineComponent({
       const rightWrapperChildren = [];
       const rightWrapperRoot = vue.h("div", { class: "el-pagination__rightwrapper" }, rightWrapperChildren);
       const TEMPLATE_MAP = {
-        prev: vue.h(prev_vue_vue_type_script_lang["default"], {
+        prev: vue.h(prev["default"], {
           disabled: props.disabled,
           currentPage: currentPageBridge.value,
           prevText: props.prevText,
-          onClick: prev
+          onClick: prev$1
         }),
-        jumper: vue.h(jumper_vue_vue_type_script_lang["default"]),
-        pager: vue.h(pager_vue_vue_type_script_lang["default"], {
+        jumper: vue.h(jumper["default"]),
+        pager: vue.h(pager["default"], {
           currentPage: currentPageBridge.value,
           pageCount: pageCountBridge.value,
           pagerCount: props.pagerCount,
           onChange: handleCurrentChange,
           disabled: props.disabled
         }),
-        next: vue.h(next_vue_vue_type_script_lang["default"], {
+        next: vue.h(next["default"], {
           disabled: props.disabled,
           currentPage: currentPageBridge.value,
           pageCount: pageCountBridge.value,
           nextText: props.nextText,
-          onClick: next
+          onClick: next$1
         }),
-        sizes: vue.h(sizes_vue_vue_type_script_lang["default"], {
+        sizes: vue.h(sizes["default"], {
           pageSize: pageSizeBridge.value,
           pageSizes: props.pageSizes,
           popperClass: props.popperClass,
           disabled: props.disabled
         }),
         slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : null,
-        total: vue.h(total_vue_vue_type_script_lang["default"], { total: isAbsent(props.total) ? 0 : props.total })
+        total: vue.h(total["default"], { total: isAbsent(props.total) ? 0 : props.total })
       };
       const components = props.layout.split(",").map((item) => item.trim());
       let haveRightWrapper = false;