You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
8.8 KiB
260 lines
8.8 KiB
'use strict';
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
var vue = require('vue');
|
|
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 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({
|
|
total: Number,
|
|
pageSize: Number,
|
|
defaultPageSize: Number,
|
|
currentPage: Number,
|
|
defaultCurrentPage: Number,
|
|
pageCount: Number,
|
|
pagerCount: {
|
|
type: Number,
|
|
validator: (value) => {
|
|
return typeof value === "number" && (value | 0) === value && value > 4 && value < 22 && value % 2 === 1;
|
|
},
|
|
default: 7
|
|
},
|
|
layout: {
|
|
type: String,
|
|
default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
|
|
},
|
|
pageSizes: {
|
|
type: props.definePropType(Array),
|
|
default: () => props.mutable([10, 20, 30, 40, 50, 100])
|
|
},
|
|
popperClass: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
prevText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
nextText: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
small: Boolean,
|
|
background: Boolean,
|
|
disabled: Boolean,
|
|
hideOnSinglePage: Boolean
|
|
});
|
|
const paginationEmits = {
|
|
"update:current-page": (val) => typeof val === "number",
|
|
"update:page-size": (val) => typeof val === "number",
|
|
"size-change": (val) => typeof val === "number",
|
|
"current-change": (val) => typeof val === "number",
|
|
"prev-click": (val) => typeof val === "number",
|
|
"next-click": (val) => typeof val === "number"
|
|
};
|
|
const componentName = "ElPagination";
|
|
var Pagination = vue.defineComponent({
|
|
name: componentName,
|
|
props: paginationProps,
|
|
emits: paginationEmits,
|
|
setup(props, { emit, slots }) {
|
|
const { t } = index.useLocale();
|
|
const vnodeProps = vue.getCurrentInstance().vnode.props || {};
|
|
const hasCurrentPageListener = "onUpdate:currentPage" in vnodeProps || "onUpdate:current-page" in vnodeProps || "onCurrentChange" in vnodeProps;
|
|
const hasPageSizeListener = "onUpdate:pageSize" in vnodeProps || "onUpdate:page-size" in vnodeProps || "onSizeChange" in vnodeProps;
|
|
const assertValidUsage = vue.computed(() => {
|
|
if (isAbsent(props.total) && isAbsent(props.pageCount))
|
|
return false;
|
|
if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
|
|
return false;
|
|
if (props.layout.includes("sizes")) {
|
|
if (!isAbsent(props.pageCount)) {
|
|
if (!hasPageSizeListener)
|
|
return false;
|
|
} else if (!isAbsent(props.total)) {
|
|
if (!isAbsent(props.pageSize)) {
|
|
if (!hasPageSizeListener) {
|
|
return false;
|
|
}
|
|
} else {
|
|
}
|
|
}
|
|
}
|
|
return true;
|
|
});
|
|
const innerPageSize = vue.ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
|
|
const innerCurrentPage = vue.ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
|
|
const pageSizeBridge = vue.computed({
|
|
get() {
|
|
return isAbsent(props.pageSize) ? innerPageSize.value : props.pageSize;
|
|
},
|
|
set(v) {
|
|
if (isAbsent(props.pageSize)) {
|
|
innerPageSize.value = v;
|
|
}
|
|
if (hasPageSizeListener) {
|
|
emit("update:page-size", v);
|
|
emit("size-change", v);
|
|
}
|
|
}
|
|
});
|
|
const pageCountBridge = vue.computed(() => {
|
|
let pageCount = 0;
|
|
if (!isAbsent(props.pageCount)) {
|
|
pageCount = props.pageCount;
|
|
} else if (!isAbsent(props.total)) {
|
|
pageCount = Math.max(1, Math.ceil(props.total / pageSizeBridge.value));
|
|
}
|
|
return pageCount;
|
|
});
|
|
const currentPageBridge = vue.computed({
|
|
get() {
|
|
return isAbsent(props.currentPage) ? innerCurrentPage.value : props.currentPage;
|
|
},
|
|
set(v) {
|
|
let newCurrentPage = v;
|
|
if (v < 1) {
|
|
newCurrentPage = 1;
|
|
} else if (v > pageCountBridge.value) {
|
|
newCurrentPage = pageCountBridge.value;
|
|
}
|
|
if (isAbsent(props.currentPage)) {
|
|
innerCurrentPage.value = newCurrentPage;
|
|
}
|
|
if (hasCurrentPageListener) {
|
|
emit("update:current-page", newCurrentPage);
|
|
emit("current-change", newCurrentPage);
|
|
}
|
|
}
|
|
});
|
|
vue.watch(pageCountBridge, (val) => {
|
|
if (currentPageBridge.value > val)
|
|
currentPageBridge.value = val;
|
|
});
|
|
function handleCurrentChange(val) {
|
|
currentPageBridge.value = val;
|
|
}
|
|
function handleSizeChange(val) {
|
|
pageSizeBridge.value = val;
|
|
const newPageCount = pageCountBridge.value;
|
|
if (currentPageBridge.value > newPageCount) {
|
|
currentPageBridge.value = newPageCount;
|
|
}
|
|
}
|
|
function prev() {
|
|
if (props.disabled)
|
|
return;
|
|
currentPageBridge.value -= 1;
|
|
emit("prev-click", currentPageBridge.value);
|
|
}
|
|
function next() {
|
|
if (props.disabled)
|
|
return;
|
|
currentPageBridge.value += 1;
|
|
emit("next-click", currentPageBridge.value);
|
|
}
|
|
vue.provide(pagination.elPaginationKey, {
|
|
pageCount: pageCountBridge,
|
|
disabled: vue.computed(() => props.disabled),
|
|
currentPage: currentPageBridge,
|
|
changeEvent: handleCurrentChange,
|
|
handleSizeChange
|
|
});
|
|
return () => {
|
|
var _a, _b;
|
|
if (!assertValidUsage.value) {
|
|
error.debugWarn(componentName, t("el.pagination.deprecationWarning"));
|
|
return null;
|
|
}
|
|
if (!props.layout)
|
|
return null;
|
|
if (props.hideOnSinglePage && pageCountBridge.value <= 1)
|
|
return null;
|
|
const rootChildren = [];
|
|
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"], {
|
|
disabled: props.disabled,
|
|
currentPage: currentPageBridge.value,
|
|
prevText: props.prevText,
|
|
onClick: prev
|
|
}),
|
|
jumper: vue.h(jumper_vue_vue_type_script_lang["default"]),
|
|
pager: vue.h(pager_vue_vue_type_script_lang["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"], {
|
|
disabled: props.disabled,
|
|
currentPage: currentPageBridge.value,
|
|
pageCount: pageCountBridge.value,
|
|
nextText: props.nextText,
|
|
onClick: next
|
|
}),
|
|
sizes: vue.h(sizes_vue_vue_type_script_lang["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 })
|
|
};
|
|
const components = props.layout.split(",").map((item) => item.trim());
|
|
let haveRightWrapper = false;
|
|
components.forEach((c) => {
|
|
if (c === "->") {
|
|
haveRightWrapper = true;
|
|
return;
|
|
}
|
|
if (!haveRightWrapper) {
|
|
rootChildren.push(TEMPLATE_MAP[c]);
|
|
} else {
|
|
rightWrapperChildren.push(TEMPLATE_MAP[c]);
|
|
}
|
|
});
|
|
if (haveRightWrapper && rightWrapperChildren.length > 0) {
|
|
rootChildren.unshift(rightWrapperRoot);
|
|
}
|
|
return vue.h("div", {
|
|
role: "pagination",
|
|
"aria-label": "pagination",
|
|
class: [
|
|
"el-pagination",
|
|
{
|
|
"is-background": props.background,
|
|
"el-pagination--small": props.small
|
|
}
|
|
]
|
|
}, rootChildren);
|
|
};
|
|
}
|
|
});
|
|
|
|
exports["default"] = Pagination;
|
|
exports.paginationEmits = paginationEmits;
|
|
exports.paginationProps = paginationProps;
|
|
//# sourceMappingURL=pagination.js.map
|