hongluan-ui
Version:
Hongluan Component Library for Vue 3
285 lines (282 loc) • 9.13 kB
JavaScript
import { defineComponent, getCurrentInstance, computed, ref, watch, provide, h } from 'vue';
import '../../../hooks/index.mjs';
import '../../../utils/index.mjs';
import '../../../tokens/index.mjs';
import Prev from './components/prev2.mjs';
import Next from './components/next2.mjs';
import Sizes from './components/sizes2.mjs';
import Jumper from './components/jumper.mjs';
import Total from './components/total.mjs';
import Pager from './components/pager2.mjs';
import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
import { isNumber } from '../../../utils/types.mjs';
import { mutable } from '../../../utils/typescript.mjs';
import { isValidComponentSize } from '../../../utils/vue/validator.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useLocale } from '../../../hooks/use-locale/index.mjs';
import { paginationKey } from '../../../tokens/pagination.mjs';
import { debugWarn } from '../../../utils/error.mjs';
const isAbsent = (v) => typeof v !== "number";
const paginationProps = buildProps({
total: Number,
pageSize: Number,
defaultPageSize: Number,
currentPage: Number,
defaultCurrentPage: Number,
pageCount: Number,
pagerCount: {
type: Number,
validator: (value) => {
return isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
},
default: 7
},
layout: {
type: String,
default: ["prev", "pager", "next", "jumper", "->", "total"].join(", ")
},
pageSizes: {
type: definePropType(Array),
default: () => mutable([10, 20, 30, 40, 50, 100])
},
popperClass: {
type: String,
default: ""
},
prevText: {
type: String,
default: ""
},
nextText: {
type: String,
default: ""
},
disabled: Boolean,
hideOnSinglePage: Boolean,
gap: {
type: String,
default: ""
},
pagerGap: {
type: String,
default: ""
},
align: {
type: String,
default: ""
},
block: Boolean,
line: Boolean,
size: {
type: String,
validator: isValidComponentSize
},
teleported: {
type: Boolean,
default: true
}
});
const paginationEmits = {
"update:current-page": (val) => isNumber(val),
"update:page-size": (val) => isNumber(val),
"size-change": (val) => isNumber(val),
change: (currentPage, pageSize) => isNumber(currentPage) && isNumber(pageSize),
"current-change": (val) => isNumber(val),
"prev-click": (val) => isNumber(val),
"next-click": (val) => isNumber(val)
};
const componentName = "Pagination";
var Pagination = defineComponent({
name: componentName,
props: paginationProps,
emits: paginationEmits,
setup(props, { emit, slots }) {
const { namespace } = useNamespace("pagination");
const { t } = useLocale();
const vnodeProps = 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 = 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 = ref(isAbsent(props.defaultPageSize) ? 10 : props.defaultPageSize);
const innerCurrentPage = ref(isAbsent(props.defaultCurrentPage) ? 1 : props.defaultCurrentPage);
const pageSizeBridge = 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 = 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 = 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);
}
}
});
watch(pageCountBridge, (val) => {
if (currentPageBridge.value > val)
currentPageBridge.value = val;
});
watch([currentPageBridge, pageSizeBridge], (value) => {
emit("change", ...value);
}, { flush: "post" });
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);
}
function addClass(element, cls) {
if (element) {
if (!element.props) {
element.props = {};
}
element.props.class = [element.props.class, cls].join(" ");
}
}
provide(paginationKey, {
pageCount: pageCountBridge,
disabled: computed(() => props.disabled),
size: computed(() => props.size),
currentPage: currentPageBridge,
changeEvent: handleCurrentChange,
handleSizeChange
});
return () => {
var _a, _b, _c, _d;
if (!assertValidUsage.value) {
debugWarn(componentName, t("hl.pagination.deprecationWarning"));
return null;
}
if (!props.layout)
return null;
if (props.hideOnSinglePage && pageCountBridge.value <= 1)
return null;
const rootChildren = [];
const TEMPLATE_MAP = {
prev: h(Prev, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
prevText: props.prevText,
onClick: prev
}, {
"prev-icon": (_a = slots["prev-icon"]) == null ? void 0 : _a.call(slots)
}),
jumper: h(Jumper),
pager: h(Pager, {
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
pagerCount: props.pagerCount,
onChange: handleCurrentChange,
disabled: props.disabled
}),
next: h(Next, {
disabled: props.disabled,
currentPage: currentPageBridge.value,
pageCount: pageCountBridge.value,
nextText: props.nextText,
onClick: next
}, {
"next-icon": (_b = slots["next-icon"]) == null ? void 0 : _b.call(slots)
}),
sizes: h(Sizes, {
pageSize: pageSizeBridge.value,
pageSizes: props.pageSizes,
popperClass: props.popperClass,
disabled: props.disabled,
teleported: props.teleported,
size: props.size
}),
slot: (_d = (_c = slots == null ? void 0 : slots.default) == null ? void 0 : _c.call(slots)) != null ? _d : null,
total: h(Total, { total: isAbsent(props.total) ? 0 : props.total })
};
const components = props.layout.split(",").map((item) => item.trim());
components.forEach((c) => {
rootChildren.push(TEMPLATE_MAP[c]);
});
addClass(rootChildren[0], "is-first");
addClass(rootChildren[rootChildren.length - 1], "is-last");
return h("div", {
class: [
namespace.value,
props.align,
{
line: props.line,
block: props.block
},
props.size ? props.size : ""
],
style: [
props.gap ? `--pagination-gap: ${props.gap}` : "",
props.pagerGap ? `--pagination-pager-gap: ${props.pagerGap}` : ""
]
}, rootChildren);
};
}
});
export { Pagination as default, paginationEmits, paginationProps };
//# sourceMappingURL=pagination.mjs.map