@vuesax-alpha/nightly
Version:
A Component Library for Vue 3
343 lines (338 loc) • 11.7 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../utils/index.js');
require('../../../hooks/index.js');
require('../../../tokens/index.js');
var iconsVue = require('@vuesax-alpha/icons-vue');
var next = require('./components/next.js');
var prev = require('./components/prev2.js');
var sizes = require('./components/sizes2.js');
var jumper = require('./components/jumper2.js');
var total = require('./components/total.js');
var pager = require('./components/pager2.js');
var runtime = require('../../../utils/vue/props/runtime.js');
var index = require('../../../hooks/use-common-props/index.js');
var types = require('../../../utils/types.js');
var typescript = require('../../../utils/typescript.js');
var icon = require('../../../utils/vue/icon.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var pagination = require('../../../tokens/pagination.js');
var error = require('../../../utils/error.js');
var color = require('../../../utils/color.js');
const isAbsent = (v) => typeof v !== "number";
const paginationProps = runtime.buildProps({
color: index.useColorProp,
total: { type: Number },
defaultCurrentPage: { type: Number },
currentPage: { type: Number },
defaultPageSize: { type: Number },
pageSize: { type: Number },
pageCount: { type: Number },
pagerCount: {
type: Number,
validator: (value) => {
return types.isNumber(value) && Math.trunc(value) === value && value > 4 && value < 22 && value % 2 === 1;
},
default: 7
},
layout: {
type: runtime.definePropType([String, Array]),
default: () => typescript.mutable([
"prev",
"pager",
"next",
"jumper",
"->",
"total",
"slot",
"sizes"
])
},
pageSizes: {
type: runtime.definePropType(Array),
default: () => typescript.mutable([10, 20, 30, 40, 50, 100])
},
hideOnSinglePage: { type: Boolean },
prevText: {
type: String,
default: ""
},
prevIcon: {
type: icon.iconPropType,
default: () => iconsVue.ChevronLeft
},
nextText: {
type: String,
default: ""
},
nextIcon: {
type: icon.iconPropType,
default: () => iconsVue.ChevronRight
},
infinite: { type: Boolean, default: false },
progress: { type: Boolean },
notMargin: { type: Boolean },
buttonsDotted: { type: Boolean, default: false },
shape: {
type: String,
values: ["circle", "square"],
default: ""
},
disabled: { type: Boolean, default: false },
disabledItems: {
type: runtime.definePropType(Array),
default: () => []
},
loadingItems: {
type: runtime.definePropType(Array),
default: () => []
}
});
const paginationEmits = {
"update:current-page": (val) => types.isNumber(val),
"update:page-size": (val) => types.isNumber(val),
"size-change": (val) => types.isNumber(val),
"page-change": (val) => types.isNumber(val),
"prev-click": (val) => types.isNumber(val),
"next-click": (val) => types.isNumber(val)
};
const COMPONENT_NAME = "VsPagination";
var Pagination = vue.defineComponent({
name: COMPONENT_NAME,
props: paginationProps,
emits: paginationEmits,
setup(props, { emit, slots }) {
const ns = index$1.useNamespace("pagination");
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 "need to set props `total` or `pageCount`, otherwise count of pages cannot be determined.";
if (!isAbsent(props.currentPage) && !hasCurrentPageListener)
return "You have to use v-model binding of `currentPage`.\nIf you just want to provide a default value, `defaultCurrentPage` is here for you.";
if (props.layout.includes("sizes")) {
if (!isAbsent(props.pageCount)) {
if (!hasPageSizeListener)
return "Your layout having `sizes`. If `pageCount` is assign, then you have to watch `pageSize` change and recalculate `pageCount`.";
} else if (!isAbsent(props.total)) {
if (!isAbsent(props.pageSize)) {
if (!hasPageSizeListener) {
return "Your layout having `sizes`. If you have `pageSize` defined, meaning you want to have `pageSize` controlled yourself from component. Thus page size `listener` is required, you are account for `pageSize` changed.";
}
} 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 = props.infinite ? pageCountBridge.value : 1;
} else if (v > pageCountBridge.value) {
newCurrentPage = props.infinite ? 1 : pageCountBridge.value;
}
if (isAbsent(props.currentPage)) {
innerCurrentPage.value = newCurrentPage;
}
if (hasCurrentPageListener) {
emit("update:current-page", newCurrentPage);
emit("page-change", newCurrentPage);
}
}
});
vue.watch(currentPageBridge, (newValue, oldValue) => {
if (isPagerDisabled(newValue) || isPagerLoading(newValue)) {
let newVal = newValue;
if (newValue > oldValue) {
newVal += 1;
} else {
newVal -= 1;
}
if (newVal > pageCountBridge.value) {
newVal = props.infinite ? 1 : oldValue;
} else if (newVal <= 0) {
newVal = props.infinite ? pageCountBridge.value : newValue + 1;
}
currentPageBridge.value = newVal;
}
});
vue.watch(pageCountBridge, (val) => {
if (currentPageBridge.value > val)
currentPageBridge.value = val;
});
const isPagerLoading = (pager = Number.NaN) => props.loadingItems.includes(pager);
const isPagerDisabled = (pager = Number.NaN) => props.disabled || props.disabledItems.includes(pager);
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$1() {
if (props.disabled)
return;
currentPageBridge.value -= 1;
emit("prev-click", currentPageBridge.value);
}
function next$1() {
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(" ");
}
}
vue.provide(pagination.paginationContextKey, {
pageCount: pageCountBridge,
disabled: vue.computed(() => props.disabled),
currentPage: currentPageBridge,
buttonsDotted: vue.computed(() => props.buttonsDotted),
infinite: vue.computed(() => props.infinite),
loadingItems: vue.computed(() => props.loadingItems),
disabledItems: vue.computed(() => props.disabledItems),
isPagerDisabled,
isPagerLoading,
changeEvent: handleCurrentChange,
handleSizeChange
});
return () => {
var _a, _b;
if (assertValidUsage.value != true) {
error.debugWarn(COMPONENT_NAME, assertValidUsage.value);
return null;
}
if (!props.layout.length)
return null;
if (props.hideOnSinglePage && pageCountBridge.value <= 1)
return null;
const rootChildren = [];
const rightWrapperChildren = [];
const rightWrapperRoot = vue.h(
"div",
{ class: ns.e("rightwrapper") },
rightWrapperChildren
);
const TEMPLATE_MAP = {
prev: vue.h(prev["default"], {
prevText: props.prevText,
prevIcon: props.prevIcon,
onClick: prev$1
}),
jumper: vue.h(jumper["default"]),
pager: vue.h(pager["default"], {
color: props.color,
progress: props.progress,
pagerCount: props.pagerCount,
onChange: handleCurrentChange
}),
next: vue.h(next["default"], {
nextText: props.nextText,
nextIcon: props.nextIcon,
onClick: next$1
}),
sizes: vue.h(sizes["default"], {
pageSize: pageSizeBridge.value,
pageSizes: props.pageSizes
}),
slot: (_b = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots, {
currentPage: currentPageBridge.value,
total: props.total,
pageSize: pageSizeBridge.value,
pageSizes: props.pageSizes,
pagerCount: props.pagerCount
})) != null ? _b : null,
total: vue.h(total["default"], { total: isAbsent(props.total) ? 0 : props.total })
};
const components = props.layout.toString().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]);
}
});
addClass(rootChildren[0], ns.is("first"));
addClass(rootChildren[rootChildren.length - 1], ns.is("last"));
if (haveRightWrapper && rightWrapperChildren.length > 0) {
addClass(rightWrapperChildren[0], ns.is("first"));
addClass(
rightWrapperChildren[rightWrapperChildren.length - 1],
ns.is("last")
);
rootChildren.push(rightWrapperRoot);
}
return vue.h(
"div",
{
role: "pagination",
"aria-label": "pagination",
class: [
ns.b(),
ns.is(props.shape),
ns.is("buttons-dotted", props.buttonsDotted),
ns.is("not-margin", props.notMargin)
],
style: ns.cssVar({
color: color.getVsColor(props.color)
})
},
rootChildren
);
};
}
});
exports["default"] = Pagination;
exports.paginationEmits = paginationEmits;
exports.paginationProps = paginationProps;
//# sourceMappingURL=pagination.js.map