@opensig/opendesign
Version:
<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>
394 lines (393 loc) • 16.6 kB
JavaScript
;
const vue = require("vue");
const pagination = require("./pagination.js");
const index$4 = require("../popover/index.js");
const index$3 = require("../input-number/index.js");
const index$1 = require("../select/index.js");
const index$2 = require("../option/index.js");
const icons = require("../_utils/icons.js");
const types = require("./types.js");
const styleClass = require("../_utils/style-class.js");
const index$6 = require("../icon/index.js");
const index = require("../locale/index.js");
const index$5 = require("../virtual-list/index.js");
const log = require("../_utils/log.js");
const OOptionList_vue_vue_type_script_setup_true_lang = require("../option/OOptionList.vue.js");
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__ */ vue.defineComponent({
__name: "OPagination",
props: /* @__PURE__ */ vue.mergeModels(types.paginationProps, {
"pageSize": {},
"pageSizeModifiers": {},
"page": {},
"pageModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["change"], ["update:pageSize", "update:page"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const round = styleClass.getRoundClass(props, "pagination");
const emits = __emit;
const { t } = index.useI18n();
const simpleLayout = ["pager"];
const pages = vue.ref([]);
const pageSize = vue.useModel(__props, "pageSize");
if (!pageSize.value) {
pageSize.value = props.pageSizes[0];
} else if (!props.pageSizes.includes(pageSize.value)) {
log.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 = vue.computed(() => Math.ceil(props.total / pageSize.value));
const pageVal = vue.useModel(__props, "page");
if (!pageVal.value) {
pageVal.value = 1;
}
pages.value = pagination.getPagerList(totalPage.value, pageVal.value, props.showPageCount);
const pageSizeList = vue.computed(() => {
return pagination.getSizeOptions(props.pageSizes, t("pagination.countPerPage"), pageSize.value);
});
const defaultSizeLabel = vue.computed(() => pageSize.value + t("pagination.countPerPage"));
const layout = vue.computed(() => {
return props.simple ? simpleLayout : props.layout;
});
vue.watch(
() => [totalPage.value, pageVal.value],
() => {
pages.value = pagination.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 = vue.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 vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-pagination", [`o-pagination-${props.variant}`, vue.unref(round).class.value]]),
style: vue.normalizeStyle(vue.unref(round).style.value)
},
[
vue.createElementVNode("div", _hoisted_1, [
vue.createCommentVNode(" total "),
layout.value.includes("total") || _ctx.$props.showTotal ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "total", {
total: props.total
}, () => [
vue.createTextVNode(
vue.toDisplayString(vue.unref(t)("pagination.total", props.total)),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" sizes "),
layout.value.includes("pagesize") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
pageSizeList.value.length > 1 ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OSelect), {
key: 0,
"model-value": pageSize.value,
class: "o-pagination-select",
"default-label": defaultSizeLabel.value,
round: props.round,
variant: props.variant,
onChange: selectPageSize
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(pageSizeList.value, (item) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$2.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"])) : (vue.openBlock(), vue.createElementBlock(
"div",
_hoisted_4,
vue.toDisplayString(pageSizeList.value[0].label),
1
/* TEXT */
))
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" pager "),
layout.value.includes("pager") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-pagination-prev", {
"is-disabled": pageVal.value === 1
}]),
tabindex: "-1",
onClick: _cache[0] || (_cache[0] = () => pageVal.value !== 1 && clickPageBtn(false))
},
[
vue.createVNode(vue.unref(icons.IconChevronLeft))
],
2
/* CLASS */
),
vue.createElementVNode("div", _hoisted_6, [
props.simple ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.createVNode(vue.unref(index$3.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] = vue.createTextVNode(" / ")),
vue.createElementVNode(
"span",
null,
vue.toDisplayString(totalPage.value),
1
/* TEXT */
)
])) : (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(pages.value, (item) => {
return vue.openBlock(), vue.createElementBlock("div", {
key: item.value,
class: vue.normalizeClass(["o-pagination-item", { active: item.value === pageVal.value }]),
tabindex: "-1",
onClick: ($event) => selectPage(item.value)
}, [
!item.isMore ? (vue.openBlock(), vue.createElementBlock(
"span",
_hoisted_9,
vue.toDisplayString(item.value),
1
/* TEXT */
)) : (vue.openBlock(), vue.createBlock(vue.unref(index$4.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: vue.withCtx(() => [
vue.createElementVNode("span", {
onClick: vue.withModifiers(($event) => moreClick(item), ["stop"]),
class: "o-pagination-more-icon-wrap"
}, [
vue.createVNode(vue.unref(index$6.OIcon), {
class: "o-pagination-more-icon",
icon: vue.unref(icons.IconEllipsis)
}, null, 8, ["icon"]),
vue.createVNode(vue.unref(index$6.OIcon), {
class: "o-pagination-more-arrow-icon",
icon: item.value === "left" ? vue.unref(icons.IconArrowLeft) : vue.unref(icons.IconArrowRight)
}, null, 8, ["icon"])
], 8, _hoisted_10)
]),
default: vue.withCtx(() => [
vue.createVNode(
vue.unref(OOptionList_vue_vue_type_script_setup_true_lang),
{ scrollbar: "" },
{
default: vue.withCtx(() => [
vue.createCommentVNode(" 当下拉项大于50，采用虚拟列表 "),
item.list && item.list.length > 50 ? (vue.openBlock(), vue.createBlock(vue.unref(index$5.OVirtualList), {
key: 0,
list: item.list,
class: "o-pagination-virtual-more-list",
scrollbar: { showType: "hover", size: "small" }
}, {
default: vue.withCtx((data) => [
(vue.openBlock(), vue.createBlock(vue.unref(index$2.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 ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(item.list, (opt) => {
return vue.openBlock(), vue.createBlock(vue.unref(index$2.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 */
)) : vue.createCommentVNode("v-if", true)
]),
_: 2
/* DYNAMIC */
},
1024
/* DYNAMIC_SLOTS */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["disabled", "visible", "onUpdate:visible"]))
], 10, _hoisted_8);
}),
128
/* KEYED_FRAGMENT */
))
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-pagination-next", {
"is-disabled": pageVal.value === totalPage.value
}]),
tabindex: "-1",
onClick: _cache[1] || (_cache[1] = () => pageVal.value !== totalPage.value && clickPageBtn(true))
},
[
vue.createVNode(vue.unref(icons.IconChevronRight))
],
2
/* CLASS */
)
])) : vue.createCommentVNode("v-if", true),
vue.createCommentVNode(" jumper "),
layout.value.includes("jumper") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
vue.createElementVNode(
"span",
null,
vue.toDisplayString(vue.unref(t)("pagination.goto")),
1
/* TEXT */
),
vue.createVNode(vue.unref(index$3.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"])
])) : vue.createCommentVNode("v-if", true)
])
],
6
/* CLASS, STYLE */
);
};
}
});
module.exports = _sfc_main;