586 lines
33 KiB
JavaScript
586 lines
33 KiB
JavaScript
"use strict";
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.paginationProps = void 0;
|
|
/* eslint-disable @typescript-eslint/no-non-null-assertion */
|
|
const vue_1 = require("vue");
|
|
const vooks_1 = require("vooks");
|
|
const popselect_1 = require("../../popselect");
|
|
const select_1 = require("../../select");
|
|
const input_1 = require("../../input");
|
|
const _internal_1 = require("../../_internal");
|
|
const icons_1 = require("../../_internal/icons");
|
|
const _mixins_1 = require("../../_mixins");
|
|
const styles_1 = require("../styles");
|
|
const utils_1 = require("./utils");
|
|
const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
|
|
const _utils_1 = require("../../_utils");
|
|
const use_rtl_1 = require("../../_mixins/use-rtl");
|
|
exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { simple: Boolean, page: Number, defaultPage: {
|
|
type: Number,
|
|
default: 1
|
|
}, itemCount: Number, pageCount: Number, defaultPageCount: {
|
|
type: Number,
|
|
default: 1
|
|
}, showSizePicker: Boolean, pageSize: Number, defaultPageSize: Number, pageSizes: {
|
|
type: Array,
|
|
default() {
|
|
return [10];
|
|
}
|
|
}, showQuickJumper: Boolean, size: {
|
|
type: String,
|
|
default: 'medium'
|
|
}, disabled: Boolean, pageSlot: {
|
|
type: Number,
|
|
default: 9
|
|
}, selectProps: Object, prev: Function, next: Function, goto: Function, prefix: Function, suffix: Function, label: Function, displayOrder: {
|
|
type: Array,
|
|
default: ['pages', 'size-picker', 'quick-jumper']
|
|
}, to: _utils_1.useAdjustedTo.propTo, showQuickJumpDropdown: { type: Boolean, default: true }, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array],
|
|
/** @deprecated */
|
|
onPageSizeChange: [Function, Array],
|
|
/** @deprecated */
|
|
onChange: [Function, Array] });
|
|
exports.default = (0, vue_1.defineComponent)({
|
|
name: 'Pagination',
|
|
props: exports.paginationProps,
|
|
setup(props) {
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
(0, vue_1.watchEffect)(() => {
|
|
if (props.pageCount !== undefined && props.itemCount !== undefined) {
|
|
(0, _utils_1.warn)('pagination', "`page-count` and `item-count` should't be specified together. Only `item-count` will take effect.");
|
|
}
|
|
if (props.onPageSizeChange) {
|
|
(0, _utils_1.warnOnce)('pagination', '`on-page-size-change` is deprecated, please use `on-update:page-size` instead.');
|
|
}
|
|
if (props.onChange) {
|
|
(0, _utils_1.warnOnce)('pagination', '`on-change` is deprecated, please use `on-update:page` instead.');
|
|
}
|
|
});
|
|
}
|
|
const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
|
|
const themeRef = (0, _mixins_1.useTheme)('Pagination', '-pagination', index_cssr_1.default, styles_1.paginationLight, props, mergedClsPrefixRef);
|
|
const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
|
|
const selfRef = (0, vue_1.ref)(null);
|
|
const uncontrolledPageRef = (0, vue_1.ref)(props.defaultPage);
|
|
const uncontrolledPageSizeRef = (0, vue_1.ref)((0, utils_1.getDefaultPageSize)(props));
|
|
const mergedPageRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'page'), uncontrolledPageRef);
|
|
const mergedPageSizeRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'pageSize'), uncontrolledPageSizeRef);
|
|
const mergedPageCountRef = (0, vue_1.computed)(() => {
|
|
// item count has high priority, for it can affect prefix slot rendering
|
|
const { itemCount } = props;
|
|
if (itemCount !== undefined) {
|
|
return Math.max(1, Math.ceil(itemCount / mergedPageSizeRef.value));
|
|
}
|
|
const { pageCount } = props;
|
|
if (pageCount !== undefined)
|
|
return Math.max(pageCount, 1);
|
|
return 1;
|
|
});
|
|
const jumperValueRef = (0, vue_1.ref)('');
|
|
(0, vue_1.watchEffect)(() => {
|
|
void props.simple;
|
|
jumperValueRef.value = String(mergedPageRef.value);
|
|
});
|
|
const fastForwardActiveRef = (0, vue_1.ref)(false);
|
|
const fastBackwardActiveRef = (0, vue_1.ref)(false);
|
|
const showFastForwardMenuRef = (0, vue_1.ref)(false);
|
|
const showFastBackwardMenuRef = (0, vue_1.ref)(false);
|
|
const handleFastForwardMouseenter = () => {
|
|
if (props.disabled)
|
|
return;
|
|
fastForwardActiveRef.value = true;
|
|
disableTransitionOneTick();
|
|
};
|
|
const handleFastForwardMouseleave = () => {
|
|
if (props.disabled)
|
|
return;
|
|
fastForwardActiveRef.value = false;
|
|
disableTransitionOneTick();
|
|
};
|
|
const handleFastBackwardMouseenter = () => {
|
|
fastBackwardActiveRef.value = true;
|
|
disableTransitionOneTick();
|
|
};
|
|
const handleFastBackwardMouseleave = () => {
|
|
fastBackwardActiveRef.value = false;
|
|
disableTransitionOneTick();
|
|
};
|
|
const handleMenuSelect = (value) => {
|
|
doUpdatePage(value);
|
|
};
|
|
const pageItemsInfo = (0, vue_1.computed)(() => (0, utils_1.createPageItemsInfo)(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot, props.showQuickJumpDropdown));
|
|
(0, vue_1.watchEffect)(() => {
|
|
if (!pageItemsInfo.value.hasFastBackward) {
|
|
fastBackwardActiveRef.value = false;
|
|
showFastBackwardMenuRef.value = false;
|
|
}
|
|
else if (!pageItemsInfo.value.hasFastForward) {
|
|
fastForwardActiveRef.value = false;
|
|
showFastForwardMenuRef.value = false;
|
|
}
|
|
});
|
|
const pageSizeOptionsRef = (0, vue_1.computed)(() => {
|
|
const suffix = localeRef.value.selectionSuffix;
|
|
return props.pageSizes.map((size) => {
|
|
if (typeof size === 'number') {
|
|
return {
|
|
label: `${size} / ${suffix}`,
|
|
value: size
|
|
};
|
|
}
|
|
else {
|
|
return size;
|
|
}
|
|
});
|
|
});
|
|
const inputSizeRef = (0, vue_1.computed)(() => {
|
|
var _a, _b;
|
|
return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) ||
|
|
(0, _utils_1.smallerSize)(props.size));
|
|
});
|
|
const selectSizeRef = (0, vue_1.computed)(() => {
|
|
var _a, _b;
|
|
return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
|
|
(0, _utils_1.smallerSize)(props.size));
|
|
});
|
|
const startIndexRef = (0, vue_1.computed)(() => {
|
|
return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
|
|
});
|
|
const endIndexRef = (0, vue_1.computed)(() => {
|
|
const endIndex = mergedPageRef.value * mergedPageSizeRef.value - 1;
|
|
const { itemCount } = props;
|
|
if (itemCount !== undefined) {
|
|
return endIndex > itemCount - 1 ? itemCount - 1 : endIndex;
|
|
}
|
|
return endIndex;
|
|
});
|
|
const mergedItemCountRef = (0, vue_1.computed)(() => {
|
|
const { itemCount } = props;
|
|
if (itemCount !== undefined)
|
|
return itemCount;
|
|
return (props.pageCount || 1) * mergedPageSizeRef.value;
|
|
});
|
|
const rtlEnabledRef = (0, use_rtl_1.useRtl)('Pagination', mergedRtlRef, mergedClsPrefixRef);
|
|
const disableTransitionOneTick = () => {
|
|
void (0, vue_1.nextTick)(() => {
|
|
var _a;
|
|
const { value: selfEl } = selfRef;
|
|
if (!selfEl)
|
|
return;
|
|
selfEl.classList.add('transition-disabled');
|
|
void ((_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.offsetWidth);
|
|
selfEl.classList.remove('transition-disabled');
|
|
});
|
|
};
|
|
function doUpdatePage(page) {
|
|
if (page === mergedPageRef.value)
|
|
return;
|
|
const { 'onUpdate:page': _onUpdatePage, onUpdatePage, onChange, simple } = props;
|
|
if (_onUpdatePage)
|
|
(0, _utils_1.call)(_onUpdatePage, page);
|
|
if (onUpdatePage)
|
|
(0, _utils_1.call)(onUpdatePage, page);
|
|
// deprecated
|
|
if (onChange)
|
|
(0, _utils_1.call)(onChange, page);
|
|
uncontrolledPageRef.value = page;
|
|
if (simple) {
|
|
jumperValueRef.value = String(page);
|
|
}
|
|
}
|
|
function doUpdatePageSize(pageSize) {
|
|
if (pageSize === mergedPageSizeRef.value)
|
|
return;
|
|
const { 'onUpdate:pageSize': _onUpdatePageSize, onUpdatePageSize, onPageSizeChange } = props;
|
|
if (_onUpdatePageSize)
|
|
(0, _utils_1.call)(_onUpdatePageSize, pageSize);
|
|
if (onUpdatePageSize)
|
|
(0, _utils_1.call)(onUpdatePageSize, pageSize);
|
|
// deprecated
|
|
if (onPageSizeChange)
|
|
(0, _utils_1.call)(onPageSizeChange, pageSize);
|
|
uncontrolledPageSizeRef.value = pageSize;
|
|
// update new page when overflows.
|
|
// we may have different update strategy, but i've no time to impl it
|
|
if (mergedPageCountRef.value < mergedPageRef.value) {
|
|
doUpdatePage(mergedPageCountRef.value);
|
|
}
|
|
}
|
|
function forward() {
|
|
if (props.disabled)
|
|
return;
|
|
const page = Math.min(mergedPageRef.value + 1, mergedPageCountRef.value);
|
|
doUpdatePage(page);
|
|
}
|
|
function backward() {
|
|
if (props.disabled)
|
|
return;
|
|
const page = Math.max(mergedPageRef.value - 1, 1);
|
|
doUpdatePage(page);
|
|
}
|
|
function fastForward() {
|
|
if (props.disabled)
|
|
return;
|
|
const page = Math.min(pageItemsInfo.value.fastForwardTo, mergedPageCountRef.value);
|
|
doUpdatePage(page);
|
|
}
|
|
function fastBackward() {
|
|
if (props.disabled)
|
|
return;
|
|
const page = Math.max(pageItemsInfo.value.fastBackwardTo, 1);
|
|
doUpdatePage(page);
|
|
}
|
|
function handleSizePickerChange(value) {
|
|
doUpdatePageSize(value);
|
|
}
|
|
function doQuickJump() {
|
|
const page = parseInt(jumperValueRef.value);
|
|
if (Number.isNaN(page))
|
|
return;
|
|
doUpdatePage(Math.max(1, Math.min(page, mergedPageCountRef.value)));
|
|
if (!props.simple) {
|
|
jumperValueRef.value = '';
|
|
}
|
|
}
|
|
function handleQuickJumperChange() {
|
|
doQuickJump();
|
|
}
|
|
function handlePageItemClick(pageItem) {
|
|
if (props.disabled)
|
|
return;
|
|
switch (pageItem.type) {
|
|
case 'page':
|
|
doUpdatePage(pageItem.label);
|
|
break;
|
|
case 'fast-backward':
|
|
fastBackward();
|
|
break;
|
|
case 'fast-forward':
|
|
fastForward();
|
|
break;
|
|
}
|
|
}
|
|
function handleJumperInput(value) {
|
|
jumperValueRef.value = value.replace(/\D+/g, '');
|
|
}
|
|
(0, vue_1.watchEffect)(() => {
|
|
void mergedPageRef.value;
|
|
void mergedPageSizeRef.value;
|
|
disableTransitionOneTick();
|
|
});
|
|
const cssVarsRef = (0, vue_1.computed)(() => {
|
|
const { size } = props;
|
|
const { self: { buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, jumperTextColor, jumperTextColorDisabled, buttonColor, buttonColorHover, buttonColorPressed, [(0, _utils_1.createKey)('itemPadding', size)]: itemPadding, [(0, _utils_1.createKey)('itemMargin', size)]: itemMargin, [(0, _utils_1.createKey)('inputWidth', size)]: inputWidth, [(0, _utils_1.createKey)('selectWidth', size)]: selectWidth, [(0, _utils_1.createKey)('inputMargin', size)]: inputMargin, [(0, _utils_1.createKey)('selectMargin', size)]: selectMargin, [(0, _utils_1.createKey)('jumperFontSize', size)]: jumperFontSize, [(0, _utils_1.createKey)('prefixMargin', size)]: prefixMargin, [(0, _utils_1.createKey)('suffixMargin', size)]: suffixMargin, [(0, _utils_1.createKey)('itemSize', size)]: itemSize, [(0, _utils_1.createKey)('buttonIconSize', size)]: buttonIconSize, [(0, _utils_1.createKey)('itemFontSize', size)]: itemFontSize, [`${(0, _utils_1.createKey)('itemMargin', size)}Rtl`]: itemMarginRtl, [`${(0, _utils_1.createKey)('inputMargin', size)}Rtl`]: inputMarginRtl }, common: { cubicBezierEaseInOut } } = themeRef.value;
|
|
return {
|
|
'--n-prefix-margin': prefixMargin,
|
|
'--n-suffix-margin': suffixMargin,
|
|
'--n-item-font-size': itemFontSize,
|
|
'--n-select-width': selectWidth,
|
|
'--n-select-margin': selectMargin,
|
|
'--n-input-width': inputWidth,
|
|
'--n-input-margin': inputMargin,
|
|
'--n-input-margin-rtl': inputMarginRtl,
|
|
'--n-item-size': itemSize,
|
|
'--n-item-text-color': itemTextColor,
|
|
'--n-item-text-color-disabled': itemTextColorDisabled,
|
|
'--n-item-text-color-hover': itemTextColorHover,
|
|
'--n-item-text-color-active': itemTextColorActive,
|
|
'--n-item-text-color-pressed': itemTextColorPressed,
|
|
'--n-item-color': itemColor,
|
|
'--n-item-color-hover': itemColorHover,
|
|
'--n-item-color-disabled': itemColorDisabled,
|
|
'--n-item-color-active': itemColorActive,
|
|
'--n-item-color-active-hover': itemColorActiveHover,
|
|
'--n-item-color-pressed': itemColorPressed,
|
|
'--n-item-border': itemBorder,
|
|
'--n-item-border-hover': itemBorderHover,
|
|
'--n-item-border-disabled': itemBorderDisabled,
|
|
'--n-item-border-active': itemBorderActive,
|
|
'--n-item-border-pressed': itemBorderPressed,
|
|
'--n-item-padding': itemPadding,
|
|
'--n-item-border-radius': itemBorderRadius,
|
|
'--n-bezier': cubicBezierEaseInOut,
|
|
'--n-jumper-font-size': jumperFontSize,
|
|
'--n-jumper-text-color': jumperTextColor,
|
|
'--n-jumper-text-color-disabled': jumperTextColorDisabled,
|
|
'--n-item-margin': itemMargin,
|
|
'--n-item-margin-rtl': itemMarginRtl,
|
|
'--n-button-icon-size': buttonIconSize,
|
|
'--n-button-icon-color': buttonIconColor,
|
|
'--n-button-icon-color-hover': buttonIconColorHover,
|
|
'--n-button-icon-color-pressed': buttonIconColorPressed,
|
|
'--n-button-color-hover': buttonColorHover,
|
|
'--n-button-color': buttonColor,
|
|
'--n-button-color-pressed': buttonColorPressed,
|
|
'--n-button-border': buttonBorder,
|
|
'--n-button-border-hover': buttonBorderHover,
|
|
'--n-button-border-pressed': buttonBorderPressed
|
|
};
|
|
});
|
|
const themeClassHandle = inlineThemeDisabled
|
|
? (0, _mixins_1.useThemeClass)('pagination', (0, vue_1.computed)(() => {
|
|
let hash = '';
|
|
const { size } = props;
|
|
hash += size[0];
|
|
return hash;
|
|
}), cssVarsRef, props)
|
|
: undefined;
|
|
return {
|
|
rtlEnabled: rtlEnabledRef,
|
|
mergedClsPrefix: mergedClsPrefixRef,
|
|
locale: localeRef,
|
|
selfRef,
|
|
mergedPage: mergedPageRef,
|
|
pageItems: (0, vue_1.computed)(() => {
|
|
return pageItemsInfo.value.items;
|
|
}),
|
|
mergedItemCount: mergedItemCountRef,
|
|
jumperValue: jumperValueRef,
|
|
pageSizeOptions: pageSizeOptionsRef,
|
|
mergedPageSize: mergedPageSizeRef,
|
|
inputSize: inputSizeRef,
|
|
selectSize: selectSizeRef,
|
|
mergedTheme: themeRef,
|
|
mergedPageCount: mergedPageCountRef,
|
|
startIndex: startIndexRef,
|
|
endIndex: endIndexRef,
|
|
showFastForwardMenu: showFastForwardMenuRef,
|
|
showFastBackwardMenu: showFastBackwardMenuRef,
|
|
fastForwardActive: fastForwardActiveRef,
|
|
fastBackwardActive: fastBackwardActiveRef,
|
|
handleMenuSelect,
|
|
handleFastForwardMouseenter,
|
|
handleFastForwardMouseleave,
|
|
handleFastBackwardMouseenter,
|
|
handleFastBackwardMouseleave,
|
|
handleJumperInput,
|
|
handleBackwardClick: backward,
|
|
handleForwardClick: forward,
|
|
handlePageItemClick,
|
|
handleSizePickerChange,
|
|
handleQuickJumperChange,
|
|
cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
|
|
themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
|
|
onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
|
|
};
|
|
},
|
|
render() {
|
|
// it's ok to expand all prop here since no slots' deps
|
|
const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, simple, prev, next, prefix, suffix, label, goto, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handleForwardClick, handleQuickJumperChange, onRender } = this;
|
|
onRender === null || onRender === void 0 ? void 0 : onRender();
|
|
const renderPrefix = $slots.prefix || prefix;
|
|
const renderSuffix = $slots.suffix || suffix;
|
|
const renderPrev = prev || $slots.prev;
|
|
const renderNext = next || $slots.next;
|
|
const renderLabel = label || $slots.label;
|
|
return ((0, vue_1.h)("div", { ref: "selfRef", class: [
|
|
`${mergedClsPrefix}-pagination`,
|
|
this.themeClass,
|
|
this.rtlEnabled && `${mergedClsPrefix}-pagination--rtl`,
|
|
disabled && `${mergedClsPrefix}-pagination--disabled`,
|
|
simple && `${mergedClsPrefix}-pagination--simple`
|
|
], style: cssVars },
|
|
renderPrefix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({
|
|
page: mergedPage,
|
|
pageSize: mergedPageSize,
|
|
pageCount: mergedPageCount,
|
|
startIndex: this.startIndex,
|
|
endIndex: this.endIndex,
|
|
itemCount: this.mergedItemCount
|
|
}))) : null,
|
|
this.displayOrder.map((part) => {
|
|
switch (part) {
|
|
case 'pages':
|
|
return ((0, vue_1.h)(vue_1.Fragment, null,
|
|
(0, vue_1.h)("div", { class: [
|
|
`${mergedClsPrefix}-pagination-item`,
|
|
!renderPrev &&
|
|
`${mergedClsPrefix}-pagination-item--button`,
|
|
(mergedPage <= 1 ||
|
|
mergedPage > mergedPageCount ||
|
|
disabled) &&
|
|
`${mergedClsPrefix}-pagination-item--disabled`
|
|
], onClick: handleBackwardClick }, renderPrev ? (renderPrev({
|
|
page: mergedPage,
|
|
pageSize: mergedPageSize,
|
|
pageCount: mergedPageCount,
|
|
startIndex: this.startIndex,
|
|
endIndex: this.endIndex,
|
|
itemCount: this.mergedItemCount
|
|
})) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
|
|
default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.ForwardIcon, null) : (0, vue_1.h)(icons_1.BackwardIcon, null)
|
|
}))),
|
|
simple ? ((0, vue_1.h)(vue_1.Fragment, null,
|
|
(0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
|
|
(0, vue_1.h)(input_1.NInput, { value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onChange: handleQuickJumperChange })),
|
|
"\u00A0/ ",
|
|
mergedPageCount)) : (pageItems.map((pageItem, index) => {
|
|
let contentNode;
|
|
let onMouseenter;
|
|
let onMouseleave;
|
|
const { type } = pageItem;
|
|
switch (type) {
|
|
case 'page':
|
|
// eslint-disable-next-line no-case-declarations
|
|
const pageNode = pageItem.label;
|
|
if (renderLabel) {
|
|
contentNode = renderLabel({
|
|
type: 'page',
|
|
node: pageNode,
|
|
active: pageItem.active
|
|
});
|
|
}
|
|
else {
|
|
contentNode = pageNode;
|
|
}
|
|
break;
|
|
case 'fast-forward':
|
|
// eslint-disable-next-line no-case-declarations
|
|
const fastForwardNode = this.fastForwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
|
|
default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastBackwardIcon, null)) : ((0, vue_1.h)(icons_1.FastForwardIcon, null))
|
|
})) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
|
|
if (renderLabel) {
|
|
contentNode = renderLabel({
|
|
type: 'fast-forward',
|
|
node: fastForwardNode,
|
|
active: this.fastForwardActive ||
|
|
this.showFastForwardMenu
|
|
});
|
|
}
|
|
else {
|
|
contentNode = fastForwardNode;
|
|
}
|
|
onMouseenter = this.handleFastForwardMouseenter;
|
|
onMouseleave = this.handleFastForwardMouseleave;
|
|
break;
|
|
case 'fast-backward':
|
|
// eslint-disable-next-line no-case-declarations
|
|
const fastBackwardNode = this.fastBackwardActive ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
|
|
default: () => this.rtlEnabled ? ((0, vue_1.h)(icons_1.FastForwardIcon, null)) : ((0, vue_1.h)(icons_1.FastBackwardIcon, null))
|
|
})) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.MoreIcon, null) }));
|
|
if (renderLabel) {
|
|
contentNode = renderLabel({
|
|
type: 'fast-backward',
|
|
node: fastBackwardNode,
|
|
active: this.fastBackwardActive ||
|
|
this.showFastBackwardMenu
|
|
});
|
|
}
|
|
else {
|
|
contentNode = fastBackwardNode;
|
|
}
|
|
onMouseenter = this.handleFastBackwardMouseenter;
|
|
onMouseleave = this.handleFastBackwardMouseleave;
|
|
break;
|
|
}
|
|
const itemNode = ((0, vue_1.h)("div", { key: index, class: [
|
|
`${mergedClsPrefix}-pagination-item`,
|
|
pageItem.active &&
|
|
`${mergedClsPrefix}-pagination-item--active`,
|
|
type !== 'page' &&
|
|
((type === 'fast-backward' &&
|
|
this.showFastBackwardMenu) ||
|
|
(type === 'fast-forward' &&
|
|
this.showFastForwardMenu)) &&
|
|
`${mergedClsPrefix}-pagination-item--hover`,
|
|
disabled &&
|
|
`${mergedClsPrefix}-pagination-item--disabled`,
|
|
type === 'page' &&
|
|
`${mergedClsPrefix}-pagination-item--clickable`
|
|
], onClick: () => {
|
|
handlePageItemClick(pageItem);
|
|
}, onMouseenter: onMouseenter, onMouseleave: onMouseleave }, contentNode));
|
|
if (type === 'page' &&
|
|
!pageItem.mayBeFastBackward &&
|
|
!pageItem.mayBeFastForward) {
|
|
return itemNode;
|
|
}
|
|
else {
|
|
const key = pageItem.type === 'page'
|
|
? pageItem.mayBeFastBackward
|
|
? 'fast-backward'
|
|
: 'fast-forward'
|
|
: pageItem.type;
|
|
if (pageItem.type !== 'page' && !pageItem.options) {
|
|
return itemNode;
|
|
}
|
|
return ((0, vue_1.h)(popselect_1.NPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
|
|
peers: {
|
|
InternalSelectMenu: {
|
|
height: 'calc(var(--n-option-height) * 4.6)'
|
|
}
|
|
}
|
|
}, nodeProps: () => ({
|
|
style: {
|
|
justifyContent: 'center'
|
|
}
|
|
}), show: type === 'page'
|
|
? false
|
|
: type === 'fast-backward'
|
|
? this.showFastBackwardMenu
|
|
: this.showFastForwardMenu, onUpdateShow: (value) => {
|
|
if (type === 'page')
|
|
return;
|
|
if (value) {
|
|
if (type === 'fast-backward') {
|
|
this.showFastBackwardMenu = value;
|
|
}
|
|
else {
|
|
this.showFastForwardMenu = value;
|
|
}
|
|
}
|
|
else {
|
|
this.showFastBackwardMenu = false;
|
|
this.showFastForwardMenu = false;
|
|
}
|
|
}, options: pageItem.type !== 'page' && pageItem.options
|
|
? pageItem.options
|
|
: [], onUpdateValue: this.handleMenuSelect, scrollable: true, showCheckmark: false }, { default: () => itemNode }));
|
|
}
|
|
})),
|
|
(0, vue_1.h)("div", { class: [
|
|
`${mergedClsPrefix}-pagination-item`,
|
|
!renderNext &&
|
|
`${mergedClsPrefix}-pagination-item--button`,
|
|
{
|
|
[`${mergedClsPrefix}-pagination-item--disabled`]: mergedPage < 1 ||
|
|
mergedPage >= mergedPageCount ||
|
|
disabled
|
|
}
|
|
], onClick: handleForwardClick }, renderNext ? (renderNext({
|
|
page: mergedPage,
|
|
pageSize: mergedPageSize,
|
|
pageCount: mergedPageCount,
|
|
itemCount: this.mergedItemCount,
|
|
startIndex: this.startIndex,
|
|
endIndex: this.endIndex
|
|
})) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
|
|
default: () => this.rtlEnabled ? (0, vue_1.h)(icons_1.BackwardIcon, null) : (0, vue_1.h)(icons_1.ForwardIcon, null)
|
|
})))));
|
|
case 'size-picker': {
|
|
return !simple && showSizePicker ? ((0, vue_1.h)(select_1.NSelect, Object.assign({ consistentMenuWidth: false, placeholder: "", showCheckmark: false, to: this.to }, this.selectProps, { size: selectSize, options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange }))) : null;
|
|
}
|
|
case 'quick-jumper':
|
|
return !simple && showQuickJumper ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },
|
|
goto
|
|
? goto()
|
|
: (0, _utils_1.resolveSlot)(this.$slots.goto, () => [locale.goto]),
|
|
(0, vue_1.h)(input_1.NInput, { value: jumperValue, onUpdateValue: handleJumperInput, size: inputSize, placeholder: "", disabled: disabled, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onChange: handleQuickJumperChange }))) : null;
|
|
default:
|
|
return null;
|
|
}
|
|
}),
|
|
renderSuffix ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-pagination-suffix` }, renderSuffix({
|
|
page: mergedPage,
|
|
pageSize: mergedPageSize,
|
|
pageCount: mergedPageCount,
|
|
startIndex: this.startIndex,
|
|
endIndex: this.endIndex,
|
|
itemCount: this.mergedItemCount
|
|
}))) : null));
|
|
}
|
|
});
|