vxe-pc-ui 3.0.0 → 3.0.2

package/es/pager/src/pager.js

@@ -0,0 +1,687 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins } from '../../ui';
+import { errLog } from '../../ui/src/log';
+import VxeSelectComponent from '../../select/src/select';
+import VxeInputComponent from '../../input/src/input';
+export default defineVxeComponent({
+    name: 'VxePager',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        size: {
+            type: String,
+            default: () => getConfig().pager.size || getConfig().size
+        },
+        // 自定义布局
+        layouts: {
+            type: Array,
+            default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+        },
+        // 当前页
+        currentPage: {
+            type: Number,
+            default: 1
+        },
+        // 加载中
+        loading: Boolean,
+        // 每页大小
+        pageSize: {
+            type: Number,
+            default: () => getConfig().pager.pageSize || 10
+        },
+        // 总条数
+        total: { type: Number, default: 0 },
+        // 显示页码按钮的数量
+        pagerCount: {
+            type: Number,
+            default: () => getConfig().pager.pagerCount || 7
+        },
+        // 每页大小选项列表
+        pageSizes: {
+            type: Array,
+            default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100]
+        },
+        // 列对其方式
+        align: {
+            type: String,
+            default: () => getConfig().pager.align
+        },
+        // 带边框
+        border: {
+            type: Boolean,
+            default: () => getConfig().pager.border
+        },
+        // 带背景颜色
+        background: {
+            type: Boolean,
+            default: () => getConfig().pager.background
+        },
+        // 配套的样式
+        perfect: {
+            type: Boolean,
+            default: () => getConfig().pager.perfect
+        },
+        // 当只有一页时隐藏
+        autoHidden: {
+            type: Boolean,
+            default: () => getConfig().pager.autoHidden
+        },
+        transfer: {
+            type: Boolean,
+            default: () => getConfig().pager.transfer
+        },
+        className: [String, Function],
+        pageSizePlacement: {
+            type: String,
+            default: () => getConfig().pager.pageSizePlacement
+        },
+        // 自定义图标
+        iconPrevPage: String,
+        iconJumpPrev: String,
+        iconJumpNext: String,
+        iconNextPage: String,
+        iconJumpMore: String,
+        iconHomePage: String,
+        iconEndPage: String
+    },
+    inject: {
+        $xeGrid: {
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            inpCurrPage: 1
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computePageCount() {
+            const $xePager = this;
+            const props = $xePager;
+            return $xePager.getPageCount(props.total, props.pageSize);
+        },
+        computeNumList() {
+            const $xePager = this;
+            const props = $xePager;
+            const { pagerCount } = props;
+            const pageCount = $xePager.computePageCount;
+            const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount;
+            const rest = [];
+            for (let index = 0; index < len; index++) {
+                rest.push(index);
+            }
+            return rest;
+        },
+        computeOffsetNumber() {
+            const $xePager = this;
+            const props = $xePager;
+            return Math.floor((props.pagerCount - 2) / 2);
+        },
+        computeSizeList() {
+            const $xePager = this;
+            const props = $xePager;
+            return props.pageSizes.map((item) => {
+                if (XEUtils.isNumber(item)) {
+                    return {
+                        value: item,
+                        label: `${getI18n('vxe.pager.pagesize', [item])}`
+                    };
+                }
+                return Object.assign({ value: '', label: '' }, item);
+            });
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xePager = this;
+            $xePager.$emit(type, createEvent(evnt, { $pager: $xePager }, params));
+        },
+        homePage() {
+            const $xePager = this;
+            $xePager.handleHomePage();
+            return $xePager.$nextTick();
+        },
+        endPage() {
+            const $xePager = this;
+            $xePager.handleEndPage();
+            return $xePager.$nextTick();
+        },
+        prevPage() {
+            const $xePager = this;
+            $xePager.handlePrevPage();
+            return $xePager.$nextTick();
+        },
+        nextPage() {
+            const $xePager = this;
+            $xePager.handleNextPage();
+            return $xePager.$nextTick();
+        },
+        prevJump() {
+            const $xePager = this;
+            $xePager.handlePrevJump();
+            return $xePager.$nextTick();
+        },
+        nextJump() {
+            const $xePager = this;
+            $xePager.handleNextJump();
+            return $xePager.$nextTick();
+        },
+        getPageCount(total, size) {
+            return Math.max(Math.ceil(total / size), 1);
+        },
+        jumpPageEvent(evnt, currentPage) {
+            const $xePager = this;
+            const props = $xePager;
+            $xePager.$emit('update:currentPage', currentPage);
+            if (evnt && currentPage !== props.currentPage) {
+                $xePager.dispatchEvent('page-change', { type: 'current', pageSize: props.pageSize, currentPage }, evnt);
+            }
+        },
+        changeCurrentPage(currentPage, evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            $xePager.$emit('update:currentPage', currentPage);
+            if (evnt && currentPage !== props.currentPage) {
+                $xePager.dispatchEvent('page-change', { type: 'current', pageSize: props.pageSize, currentPage }, evnt);
+            }
+        },
+        triggerJumpEvent(params) {
+            const $xePager = this;
+            const reactData = $xePager.reactData;
+            const { $event } = params;
+            const inputElem = $event.target;
+            const inpValue = XEUtils.toInteger(inputElem.value);
+            const pageCount = $xePager.computePageCount.value;
+            const current = inpValue <= 0 ? 1 : inpValue >= pageCount ? pageCount : inpValue;
+            const currPage = XEUtils.toValueString(current);
+            inputElem.value = currPage;
+            reactData.inpCurrPage = currPage;
+            $xePager.changeCurrentPage(current, $event);
+        },
+        handleHomePage(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const { currentPage } = props;
+            if (currentPage > 1) {
+                $xePager.changeCurrentPage(1, evnt);
+            }
+        },
+        handleEndPage(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const { currentPage } = props;
+            const pageCount = $xePager.computePageCount;
+            if (currentPage < pageCount) {
+                $xePager.changeCurrentPage(pageCount, evnt);
+            }
+        },
+        handlePrevPage(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const { currentPage } = props;
+            const pageCount = $xePager.computePageCount;
+            if (currentPage > 1) {
+                $xePager.changeCurrentPage(Math.min(pageCount, Math.max(currentPage - 1, 1)), evnt);
+            }
+        },
+        handleNextPage(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const { currentPage } = props;
+            const pageCount = $xePager.computePageCount;
+            if (currentPage < pageCount) {
+                $xePager.changeCurrentPage(Math.min(pageCount, currentPage + 1), evnt);
+            }
+        },
+        handlePrevJump(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const numList = $xePager.computeNumList;
+            $xePager.changeCurrentPage(Math.max(props.currentPage - numList.length, 1), evnt);
+        },
+        handleNextJump(evnt) {
+            const $xePager = this;
+            const props = $xePager;
+            const pageCount = $xePager.computePageCount;
+            const numList = $xePager.computeNumList;
+            $xePager.changeCurrentPage(Math.min(props.currentPage + numList.length, pageCount), evnt);
+        },
+        pageSizeEvent(params) {
+            const $xePager = this;
+            const props = $xePager;
+            const { value } = params;
+            const pageSize = XEUtils.toNumber(value);
+            const pageCount = $xePager.getPageCount(props.total, pageSize);
+            let currentPage = props.currentPage;
+            if (currentPage > pageCount) {
+                currentPage = pageCount;
+                $xePager.$emit('update:currentPage', pageCount);
+            }
+            $xePager.$emit('update:pageSize', pageSize);
+            $xePager.dispatchEvent('page-change', { type: 'size', pageSize, currentPage }, params.$event);
+        },
+        jumpKeydownEvent(params) {
+            const $xePager = this;
+            const { $event } = params;
+            if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ENTER)) {
+                $xePager.triggerJumpEvent(params);
+            }
+            else if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ARROW_UP)) {
+                $event.preventDefault();
+                $xePager.handleNextPage($event);
+            }
+            else if (globalEvents.hasKey($event, GLOBAL_EVENT_KEYS.ARROW_DOWN)) {
+                $event.preventDefault();
+                $xePager.handlePrevPage($event);
+            }
+        },
+        //
+        // Render
+        //
+        // 第一页
+        renderHomePage(h) {
+            const $xePager = this;
+            const props = $xePager;
+            return h('button', {
+                class: ['vxe-pager--prev-btn', {
+                        'is--disabled': props.currentPage <= 1
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.homePageTitle')
+                },
+                on: {
+                    click: $xePager.handleHomePage
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-pager--btn-icon', props.iconHomePage || getIcon().PAGER_HOME]
+                })
+            ]);
+        },
+        // 上一页
+        renderPrevPage(h) {
+            const $xePager = this;
+            const props = $xePager;
+            return h('button', {
+                class: ['vxe-pager--prev-btn', {
+                        'is--disabled': props.currentPage <= 1
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.prevPageTitle')
+                },
+                on: {
+                    click: $xePager.handlePrevPage
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-pager--btn-icon', props.iconPrevPage || getIcon().PAGER_PREV_PAGE]
+                })
+            ]);
+        },
+        // 向上翻页
+        renderPrevJump(h, tagName) {
+            const $xePager = this;
+            const props = $xePager;
+            return h(tagName || 'button', {
+                class: ['vxe-pager--jump-prev', {
+                        'is--fixed': !tagName,
+                        'is--disabled': props.currentPage <= 1
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.prevJumpTitle')
+                },
+                on: {
+                    click: $xePager.handlePrevJump
+                }
+            }, [
+                tagName
+                    ? h('i', {
+                        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
+                    })
+                    : null,
+                h('i', {
+                    class: ['vxe-pager--jump-icon', props.iconJumpPrev || getIcon().PAGER_JUMP_PREV]
+                })
+            ]);
+        },
+        // 向下翻页
+        renderNextJump(h, tagName) {
+            const $xePager = this;
+            const props = $xePager;
+            const pageCount = $xePager.computePageCount;
+            return h(tagName || 'button', {
+                class: ['vxe-pager--jump-next', {
+                        'is--fixed': !tagName,
+                        'is--disabled': props.currentPage >= pageCount
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.nextJumpTitle')
+                },
+                on: {
+                    click: $xePager.handleNextJump
+                }
+            }, [
+                tagName
+                    ? h('i', {
+                        class: ['vxe-pager--jump-more-icon', props.iconJumpMore || getIcon().PAGER_JUMP_MORE]
+                    })
+                    : null,
+                h('i', {
+                    class: ['vxe-pager--jump-icon', props.iconJumpNext || getIcon().PAGER_JUMP_NEXT]
+                })
+            ]);
+        },
+        // 下一页
+        renderNextPage(h) {
+            const $xePager = this;
+            const props = $xePager;
+            const pageCount = $xePager.computePageCount;
+            return h('button', {
+                class: ['vxe-pager--next-btn', {
+                        'is--disabled': props.currentPage >= pageCount
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.nextPageTitle')
+                },
+                on: {
+                    click: $xePager.handleNextPage
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-pager--btn-icon', props.iconNextPage || getIcon().PAGER_NEXT_PAGE]
+                })
+            ]);
+        },
+        // 最后一页
+        renderEndPage(h) {
+            const $xePager = this;
+            const props = $xePager;
+            const pageCount = $xePager.computePageCount;
+            return h('button', {
+                class: ['vxe-pager--prev-btn', {
+                        'is--disabled': props.currentPage >= pageCount
+                    }],
+                attrs: {
+                    type: 'button',
+                    title: getI18n('vxe.pager.endPageTitle')
+                },
+                on: {
+                    click: $xePager.handleEndPage
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-pager--btn-icon', props.iconEndPage || getIcon().PAGER_END]
+                })
+            ]);
+        },
+        // 页数
+        renderNumber(h, showJump) {
+            const $xePager = this;
+            const props = $xePager;
+            const { currentPage, pagerCount } = props;
+            const nums = [];
+            const pageCount = $xePager.computePageCount;
+            const numList = $xePager.computeNumList;
+            const offsetNumber = $xePager.computeOffsetNumber;
+            const isOv = pageCount > pagerCount;
+            const isLt = isOv && currentPage > offsetNumber + 1;
+            const isGt = isOv && currentPage < pageCount - offsetNumber;
+            let startNumber = 1;
+            if (isOv) {
+                if (currentPage >= pageCount - offsetNumber) {
+                    startNumber = Math.max(pageCount - numList.length + 1, 1);
+                }
+                else {
+                    startNumber = Math.max(currentPage - offsetNumber, 1);
+                }
+            }
+            if (showJump && isLt) {
+                nums.push(h('button', {
+                    class: 'vxe-pager--num-btn',
+                    attrs: {
+                        type: 'button'
+                    },
+                    on: {
+                        click: (evnt) => $xePager.jumpPageEvent(evnt, 1)
+                    }
+                }, '1'), $xePager.renderPrevJump(h, 'span'));
+            }
+            numList.forEach((item, index) => {
+                const number = startNumber + index;
+                if (number <= pageCount) {
+                    nums.push(h('button', {
+                        key: number,
+                        class: ['vxe-pager--num-btn', {
+                                'is--active': currentPage === number
+                            }],
+                        attrs: {
+                            type: 'button'
+                        },
+                        on: {
+                            click: (evnt) => $xePager.jumpPageEvent(evnt, number)
+                        }
+                    }, `${number}`));
+                }
+            });
+            if (showJump && isGt) {
+                nums.push($xePager.renderNextJump(h, 'button'), h('button', {
+                    class: 'vxe-pager--num-btn',
+                    attrs: {
+                        type: 'button'
+                    },
+                    on: {
+                        click: (evnt) => $xePager.jumpPageEvent(evnt, pageCount)
+                    }
+                }, pageCount));
+            }
+            return h('span', {
+                class: 'vxe-pager--btn-wrapper'
+            }, nums);
+        },
+        // jumpNumber
+        renderJumpNumber(h) {
+            const $xePager = this;
+            return $xePager.renderNumber(h, true);
+        },
+        // sizes
+        renderSizes(h) {
+            const $xePager = this;
+            const props = $xePager;
+            const sizeList = $xePager.computeSizeList;
+            return h(VxeSelectComponent, {
+                class: 'vxe-pager--sizes',
+                props: {
+                    value: props.pageSize,
+                    placement: props.pageSizePlacement,
+                    transfer: props.transfer,
+                    options: sizeList
+                },
+                on: {
+                    change: $xePager.pageSizeEvent
+                }
+            });
+        },
+        // Jump
+        renderJump(h, isFull) {
+            const $xePager = this;
+            const reactData = $xePager.reactData;
+            const pageCount = $xePager.computePageCount;
+            return h('span', {
+                class: 'vxe-pager--jump'
+            }, [
+                isFull
+                    ? h('span', {
+                        class: 'vxe-pager--goto-text'
+                    }, getI18n('vxe.pager.goto'))
+                    : null,
+                h(VxeInputComponent, {
+                    class: 'vxe-pager--goto',
+                    props: {
+                        value: reactData.inpCurrPage,
+                        placeholder: getI18n('vxe.pager.gotoTitle'),
+                        align: 'center',
+                        type: 'integer',
+                        max: pageCount,
+                        min: 1,
+                        controls: false
+                    },
+                    on: {
+                        keydown: $xePager.jumpKeydownEvent,
+                        blur: $xePager.triggerJumpEvent,
+                        'modelValue'(val) {
+                            reactData.inpCurrPage = val;
+                        }
+                    }
+                }),
+                isFull
+                    ? h('span', {
+                        class: 'vxe-pager--classifier-text'
+                    }, getI18n('vxe.pager.pageClassifier'))
+                    : null
+            ]);
+        },
+        // FullJump
+        renderFullJump(h) {
+            const $xePager = this;
+            return $xePager.renderJump(h, true);
+        },
+        // PageCount
+        renderPageCount(h) {
+            const $xePager = this;
+            const pageCount = $xePager.computePageCount;
+            return h('span', {
+                class: 'vxe-pager--count'
+            }, [
+                h('span', {
+                    class: 'vxe-pager--separator'
+                }),
+                h('span', pageCount)
+            ]);
+        },
+        // total
+        renderTotal(h) {
+            const $xePager = this;
+            const props = $xePager;
+            return h('span', {
+                class: 'vxe-pager--total'
+            }, getI18n('vxe.pager.total', [props.total]));
+        },
+        renderVN(h) {
+            const $xePager = this;
+            const props = $xePager;
+            const slots = $xePager.$scopedSlots;
+            const $xeGrid = $xePager.$xeGrid;
+            const { align, layouts, className } = props;
+            const childNodes = [];
+            const vSize = $xePager.computeSize;
+            const pageCount = $xePager.computePageCount;
+            if (slots.left) {
+                childNodes.push(h('span', {
+                    class: 'vxe-pager--left-wrapper'
+                }, slots.left({ $grid: $xeGrid })));
+            }
+            layouts.forEach((name) => {
+                let renderFn;
+                switch (name) {
+                    case 'Home':
+                        renderFn = $xePager.renderHomePage;
+                        break;
+                    case 'PrevJump':
+                        renderFn = $xePager.renderPrevJump;
+                        break;
+                    case 'PrevPage':
+                        renderFn = $xePager.renderPrevPage;
+                        break;
+                    case 'Number':
+                        renderFn = $xePager.renderNumber;
+                        break;
+                    case 'JumpNumber':
+                        renderFn = $xePager.renderJumpNumber;
+                        break;
+                    case 'NextPage':
+                        renderFn = $xePager.renderNextPage;
+                        break;
+                    case 'NextJump':
+                        renderFn = $xePager.renderNextJump;
+                        break;
+                    case 'End':
+                        renderFn = $xePager.renderEndPage;
+                        break;
+                    case 'Sizes':
+                        renderFn = $xePager.renderSizes;
+                        break;
+                    case 'FullJump':
+                        renderFn = $xePager.renderFullJump;
+                        break;
+                    case 'Jump':
+                        renderFn = $xePager.renderJump;
+                        break;
+                    case 'PageCount':
+                        renderFn = $xePager.renderPageCount;
+                        break;
+                    case 'Total':
+                        renderFn = $xePager.renderTotal;
+                        break;
+                }
+                if (renderFn) {
+                    childNodes.push(renderFn(h));
+                }
+                else {
+                    if (process.env.NODE_ENV === 'development') {
+                        errLog('vxe.error.notProp', [`layouts -> ${name}`]);
+                    }
+                }
+            });
+            if (slots.right) {
+                childNodes.push(h('span', {
+                    class: 'vxe-pager--right-wrapper'
+                }, slots.right({ $grid: $xeGrid })));
+            }
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-pager', className ? (XEUtils.isFunction(className) ? className({ $pager: $xePager }) : className) : '', {
+                        [`size--${vSize}`]: vSize,
+                        [`align--${align}`]: align,
+                        'is--border': props.border,
+                        'is--background': props.background,
+                        'is--perfect': props.perfect,
+                        'is--hidden': props.autoHidden && pageCount === 1,
+                        'is--loading': props.loading
+                    }]
+            }, [
+                h('div', {
+                    class: 'vxe-pager--wrapper'
+                }, childNodes)
+            ]);
+        }
+    },
+    watch: {
+        currentPage(val) {
+            const $xePager = this;
+            const reactData = $xePager.reactData;
+            reactData.inpCurrPage = val;
+        }
+    },
+    created() {
+        const $xePager = this;
+        const props = $xePager;
+        const reactData = $xePager.reactData;
+        reactData.inpCurrPage = props.currentPage;
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});