vxe-pc-ui 4.1.20 → 4.1.21

package/es/number-input/src/number-input.js

@@ -226,7 +226,7 @@ export default defineComponent({
             const { inputValue } = reactData;
             numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
-        const emitModel = (val, inputValue, evnt) => {
+        const handleChange = (val, inputValue, evnt) => {
             const value = val ? Number(val) : null;
             const isChange = Number(value) !== props.modelValue;
             if (isChange) {
@@ -247,7 +247,7 @@ export default defineComponent({
             const value = inputValue ? XEUtils.toNumber(inputValue) : null;
             reactData.inputValue = inputValue;
             if (inpImmediate) {
-                emitModel(value, inputValue, evnt);
+                handleChange(value, inputValue, evnt);
             }
             else {
                 numberInputMethods.dispatchEvent('input', { value }, evnt);
@@ -277,7 +277,7 @@ export default defineComponent({
         };
         const clearValueEvent = (evnt, value) => {
             focus();
-            emitModel(null, '', evnt);
+            handleChange(null, '', evnt);
             numberInputMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
@@ -303,7 +303,7 @@ export default defineComponent({
                         validValue = Number(textValue);
                     }
                     if (inputValue !== validValue) {
-                        emitModel(validValue, textValue, { type: 'init' });
+                        handleChange(validValue, textValue, { type: 'init' });
                     }
                 }
             }
@@ -334,7 +334,7 @@ export default defineComponent({
                         }
                     }
                     const inpValue = getNumberValue(inpNumVal);
-                    emitModel(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' });
+                    handleChange(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' });
                 }
             }
         };
@@ -343,7 +343,7 @@ export default defineComponent({
             const inpImmediate = computeInpImmediate.value;
             const value = inputValue ? Number(inputValue) : null;
             if (!inpImmediate) {
-                emitModel(value, `${inputValue || ''}`, evnt);
+                handleChange(value, `${inputValue || ''}`, evnt);
             }
             afterCheckValue();
             reactData.isActivated = false;

package/es/pager/src/pager.js

@@ -7,34 +7,73 @@ import VxeInputComponent from '../../input/src/input';
 export default defineComponent({
     name: 'VxePager',
     props: {
-        size: { type: String, default: () => getConfig().pager.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().pager.size || getConfig().size
+        },
         // 自定义布局
-        layouts: { type: Array, default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] },
+        layouts: {
+            type: Array,
+            default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
+        },
         // 当前页
-        currentPage: { type: Number, default: 1 },
+        currentPage: {
+            type: Number,
+            default: 1
+        },
         // 加载中
         loading: Boolean,
         // 每页大小
-        pageSize: { type: Number, default: () => getConfig().pager.pageSize || 10 },
+        pageSize: {
+            type: Number,
+            default: () => getConfig().pager.pageSize || 10
+        },
         // 总条数
         total: { type: Number, default: 0 },
         // 显示页码按钮的数量
-        pagerCount: { type: Number, default: () => getConfig().pager.pagerCount || 7 },
+        pagerCount: {
+            type: Number,
+            default: () => getConfig().pager.pagerCount || 7
+        },
         // 每页大小选项列表
-        pageSizes: { type: Array, default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100] },
+        pageSizes: {
+            type: Array,
+            default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100]
+        },
         // 列对其方式
-        align: { type: String, default: () => getConfig().pager.align },
+        align: {
+            type: String,
+            default: () => getConfig().pager.align
+        },
         // 带边框
-        border: { type: Boolean, default: () => getConfig().pager.border },
+        border: {
+            type: Boolean,
+            default: () => getConfig().pager.border
+        },
         // 带背景颜色
-        background: { type: Boolean, default: () => getConfig().pager.background },
+        background: {
+            type: Boolean,
+            default: () => getConfig().pager.background
+        },
         // 配套的样式
-        perfect: { type: Boolean, default: () => getConfig().pager.perfect },
+        perfect: {
+            type: Boolean,
+            default: () => getConfig().pager.perfect
+        },
         // 当只有一页时隐藏
-        autoHidden: { type: Boolean, default: () => getConfig().pager.autoHidden },
-        transfer: { type: Boolean, default: () => getConfig().pager.transfer },
+        autoHidden: {
+            type: Boolean,
+            default: () => getConfig().pager.autoHidden
+        },
+        transfer: {
+            type: Boolean,
+            default: () => getConfig().pager.transfer
+        },
         className: [String, Function],
-        pageSizePlacement: { type: String, default: () => getConfig().pager.pageSizePlacement },
+        pageSizePlacement: {
+            type: String,
+            default: () => getConfig().pager.pageSizePlacement
+        },
         // 自定义图标
         iconPrevPage: String,
         iconJumpPrev: String,
@@ -61,6 +100,33 @@ export default defineComponent({
         const refMaps = {
             refElem
         };
+        const computePageCount = computed(() => {
+            return getPageCount(props.total, props.pageSize);
+        });
+        const computeNumList = computed(() => {
+            const { pagerCount } = props;
+            const pageCount = computePageCount.value;
+            const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount;
+            const rest = [];
+            for (let index = 0; index < len; index++) {
+                rest.push(index);
+            }
+            return rest;
+        });
+        const computeOffsetNumber = computed(() => {
+            return Math.floor((props.pagerCount - 2) / 2);
+        });
+        const computeSizeList = computed(() => {
+            return props.pageSizes.map((item) => {
+                if (XEUtils.isNumber(item)) {
+                    return {
+                        value: item,
+                        label: `${getI18n('vxe.pager.pagesize', [item])}`
+                    };
+                }
+                return Object.assign({ value: '', label: '' }, item);
+            });
+        });
         const $xePager = {
             xID,
             props,
@@ -72,9 +138,6 @@ export default defineComponent({
         const getPageCount = (total, size) => {
             return Math.max(Math.ceil(total / size), 1);
         };
-        const computePageCount = computed(() => {
-            return getPageCount(props.total, props.pageSize);
-        });
         const jumpPageEvent = (evnt, currentPage) => {
             emit('update:currentPage', currentPage);
             if (evnt && currentPage !== props.currentPage) {
@@ -98,30 +161,6 @@ export default defineComponent({
             reactData.inpCurrPage = currPage;
             changeCurrentPage(current, $event);
         };
-        const computeNumList = computed(() => {
-            const { pagerCount } = props;
-            const pageCount = computePageCount.value;
-            const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount;
-            const rest = [];
-            for (let index = 0; index < len; index++) {
-                rest.push(index);
-            }
-            return rest;
-        });
-        const computeOffsetNumber = computed(() => {
-            return Math.floor((props.pagerCount - 2) / 2);
-        });
-        const computeSizeList = computed(() => {
-            return props.pageSizes.map((item) => {
-                if (XEUtils.isNumber(item)) {
-                    return {
-                        value: item,
-                        label: `${getI18n('vxe.pager.pagesize', [item])}`
-                    };
-                }
-                return Object.assign({ value: '', label: '' }, item);
-            });
-        });
         const handleHomePage = (evnt) => {
             const { currentPage } = props;
             if (currentPage > 1) {
@@ -313,7 +352,7 @@ export default defineComponent({
                     class: 'vxe-pager--num-btn',
                     type: 'button',
                     onClick: (evnt) => jumpPageEvent(evnt, 1)
-                }, 1), renderPrevJump('span'));
+                }, '1'), renderPrevJump('span'));
             }
             numList.forEach((item, index) => {
                 const number = startNumber + index;
@@ -325,7 +364,7 @@ export default defineComponent({
                             }],
                         type: 'button',
                         onClick: (evnt) => jumpPageEvent(evnt, number)
-                    }, number));
+                    }, `${number}`));
                 }
             });
             if (showJump && isGt) {
@@ -410,10 +449,11 @@ export default defineComponent({
                 class: 'vxe-pager--total'
             }, getI18n('vxe.pager.total', [props.total]));
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $pager: $xePager }, params));
+        };
         pagerMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $pager: $xePager }, params));
-            },
+            dispatchEvent,
             homePage() {
                 handleHomePage();
                 return nextTick();

package/es/password-input/src/password-input.js

@@ -99,7 +99,7 @@ export default defineComponent({
             const value = inputElem.value;
             emitInputEvent(value, evnt);
         };
-        const emitModel = (value, evnt) => {
+        const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             passwordInputMethods.dispatchEvent('input', { value }, evnt);
@@ -140,7 +140,7 @@ export default defineComponent({
         };
         const clearValueEvent = (evnt, value) => {
             focus();
-            emitModel('', evnt);
+            handleChange('', evnt);
             passwordInputMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {

package/es/print/src/page-break.js

@@ -1,12 +1,13 @@
 import { defineComponent, ref, h, reactive, inject, onMounted, onUnmounted, createCommentVNode } from 'vue';
 import XEUtils from 'xe-utils';
+import { createEvent } from '../../ui';
 import { assemblePageBreak, destroyPageBreak } from './util';
 export default defineComponent({
     name: 'VxePrintPageBreak',
     props: {},
     emits: [],
     setup(props, context) {
-        const { slots } = context;
+        const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const $xePrint = inject('$xePrint', null);
         const refElem = ref();
@@ -27,6 +28,14 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $print: $xePrint }, params));
+        };
+        const printPageBreakMethods = {
+            dispatchEvent
+        };
+        const printPageBreakPrivateMethods = {};
+        Object.assign($xePrintPageBreak, printPageBreakMethods, printPageBreakPrivateMethods);
         if (!$xePrint) {
             $xePrintPageBreak.renderVN = () => {
                 return createCommentVNode();
@@ -38,7 +47,6 @@ export default defineComponent({
                 ref: refElem
             });
         };
-        $xePrintPageBreak.renderVN = renderVN;
         onMounted(() => {
             const elem = refElem.value;
             if ($xePrint && elem) {
@@ -50,6 +58,7 @@ export default defineComponent({
                 destroyPageBreak($xePrint, pageBreakConfig);
             }
         });
+        $xePrintPageBreak.renderVN = renderVN;
         return $xePrintPageBreak;
     },
     render() {

package/es/print/src/print.js

@@ -61,10 +61,11 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $print: $xePrint }, params));
+        };
         const printMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $print: $xePrint }, params));
-            },
+            dispatchEvent,
             print() {
                 const elem = refElem.value;
                 return printHtml(Object.assign({}, props, {
@@ -73,7 +74,8 @@ export default defineComponent({
                 }));
             }
         };
-        Object.assign($xePrint, printMethods);
+        const printPrivateMethods = {};
+        Object.assign($xePrint, printMethods, printPrivateMethods);
         const renderPageConfigLayouts = () => {
             const { title, showPageNumber, showAllPageTitle, align, headerAlign, footerAlign } = props;
             const pageBreaks = props.pageBreaks || [];

package/es/radio/src/group.js

@@ -109,8 +109,11 @@ export default defineComponent({
                     })
                     : []));
         };
-        $xeRadioGroup.renderVN = renderVN;
         provide('$xeRadioGroup', $xeRadioGroup);
-        return renderVN;
+        $xeRadioGroup.renderVN = renderVN;
+        return $xeRadioGroup;
+    },
+    render() {
+        return this.renderVN();
     }
 });

package/es/row/src/row.js

@@ -84,8 +84,8 @@ export default defineComponent({
                 onClick: clickEvent
             }, defaultSlot ? defaultSlot({}) : []);
         };
-        $xeRow.renderVN = renderVN;
         provide('$xeRow', $xeRow);
+        $xeRow.renderVN = renderVN;
         return $xeRow;
     },
     render() {

package/es/select/src/optgroup.js

@@ -14,24 +14,27 @@ export default defineComponent({
         className: [String, Function],
         disabled: Boolean
     },
+    emits: [],
     setup(props, { slots }) {
         const elem = ref();
         const $xeSelect = inject('$xeSelect', {});
-        const option = createOption($xeSelect, props);
-        const xeOption = { option };
-        option.options = [];
-        provide('$xeOptgroup', xeOption);
-        watchOption(props, option);
+        const optionConfig = createOption($xeSelect, props);
+        const $xeOptgroup = { optionConfig };
+        optionConfig.options = [];
+        provide('$xeOptgroup', $xeOptgroup);
+        watchOption(props, optionConfig);
         onMounted(() => {
-            assembleOption($xeSelect, elem.value, option);
+            const el = elem.value;
+            assembleOption($xeSelect, el, optionConfig);
         });
         onUnmounted(() => {
-            destroyOption($xeSelect, option);
+            destroyOption($xeSelect, optionConfig);
         });
         return () => {
+            const defaultSlot = slots.default;
             return h('div', {
                 ref: elem
-            }, slots.default ? slots.default() : []);
+            }, defaultSlot ? defaultSlot({}) : []);
         };
     }
 });

package/es/select/src/option.js

@@ -3,7 +3,7 @@ import { createOption, watchOption, destroyOption, assembleOption } from './util
 export default defineComponent({
     name: 'VxeOption',
     props: {
-        value: null,
+        value: [String, Number, Boolean],
         label: {
             type: [String, Number, Boolean],
             default: ''
@@ -15,18 +15,20 @@ export default defineComponent({
         className: [String, Function],
         disabled: Boolean
     },
+    emits: [],
     setup(props, { slots }) {
         const elem = ref();
         const $xeSelect = inject('$xeSelect', {});
-        const optGroup = inject('$xeOptgroup', null);
-        const option = createOption($xeSelect, props);
-        option.slots = slots;
-        watchOption(props, option);
+        const $xeOptgroup = inject('$xeOptgroup', null);
+        const optionConfig = createOption($xeSelect, props);
+        optionConfig.slots = slots;
+        watchOption(props, optionConfig);
         onMounted(() => {
-            assembleOption($xeSelect, elem.value, option, optGroup);
+            const el = elem.value;
+            assembleOption($xeSelect, el, optionConfig, $xeOptgroup);
         });
         onUnmounted(() => {
-            destroyOption($xeSelect, option);
+            destroyOption($xeSelect, optionConfig);
         });
         return () => {
             return h('div', {

package/es/select/src/select.js

@@ -167,10 +167,10 @@ export default defineComponent({
             return getI18n('vxe.base.pleaseSelect');
         });
         const computePropsOpts = computed(() => {
-            return props.optionProps || {};
+            return Object.assign({}, props.optionProps);
         });
         const computeGroupPropsOpts = computed(() => {
-            return props.optionGroupProps || {};
+            return Object.assign({}, props.optionGroupProps);
         });
         const computeLabelField = computed(() => {
             const propsOpts = computePropsOpts.value;
@@ -204,6 +204,27 @@ export default defineComponent({
         const computeMultiMaxCharNum = computed(() => {
             return XEUtils.toNumber(props.multiCharOverflow);
         });
+        const computeSelectLabel = computed(() => {
+            const { modelValue, multiple, remote } = props;
+            const multiMaxCharNum = computeMultiMaxCharNum.value;
+            if (modelValue && multiple) {
+                const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
+                if (remote) {
+                    return vals.map(val => getRemoteSelectLabel(val)).join(', ');
+                }
+                return vals.map((val) => {
+                    const label = getSelectLabel(val);
+                    if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
+                        return `${label.substring(0, multiMaxCharNum)}...`;
+                    }
+                    return label;
+                }).join(', ');
+            }
+            if (remote) {
+                return getRemoteSelectLabel(modelValue);
+            }
+            return getSelectLabel(modelValue);
+        });
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
                 if (XEUtils.isString(slotFunc)) {
@@ -265,27 +286,6 @@ export default defineComponent({
             const item = findOption(value);
             return XEUtils.toValueString(item ? item[labelField] : value);
         };
-        const computeSelectLabel = computed(() => {
-            const { modelValue, multiple, remote } = props;
-            const multiMaxCharNum = computeMultiMaxCharNum.value;
-            if (modelValue && multiple) {
-                const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue];
-                if (remote) {
-                    return vals.map(val => getRemoteSelectLabel(val)).join(', ');
-                }
-                return vals.map((val) => {
-                    const label = getSelectLabel(val);
-                    if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) {
-                        return `${label.substring(0, multiMaxCharNum)}...`;
-                    }
-                    return label;
-                }).join(', ');
-            }
-            if (remote) {
-                return getRemoteSelectLabel(modelValue);
-            }
-            return getSelectLabel(modelValue);
-        });
         const getOptkey = () => {
             const optionOpts = computeOptionOpts.value;
             return optionOpts.keyField || props.optionId || '_X_OPTION_KEY';
@@ -498,8 +498,8 @@ export default defineComponent({
             }, 350);
         };
         const changeEvent = (evnt, selectValue) => {
+            emit('update:modelValue', selectValue);
             if (selectValue !== props.modelValue) {
-                emit('update:modelValue', selectValue);
                 selectMethods.dispatchEvent('change', { value: selectValue }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -734,12 +734,14 @@ export default defineComponent({
         const focusSearchEvent = () => {
             reactData.isActivated = true;
         };
-        const triggerSearchEvent = XEUtils.debounce(function () {
+        const handleSearchEvent = () => {
             const { remote, remoteMethod } = props;
             const { searchValue } = reactData;
             if (remote && remoteMethod) {
                 reactData.searchLoading = true;
-                Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => {
+                Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick())
+                    .catch(() => nextTick())
+                    .finally(() => {
                     reactData.searchLoading = false;
                     refreshOption();
                 });
@@ -747,7 +749,8 @@ export default defineComponent({
             else {
                 refreshOption();
             }
-        }, 350, { trailing: true });
+        };
+        const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true });
         const togglePanelEvent = (params) => {
             const { $event } = params;
             $event.preventDefault();
@@ -956,7 +959,7 @@ export default defineComponent({
                     }, defaultSlot ? defaultSlot({}) : []),
                     h('span', {
                         class: 'vxe-select-label'
-                    }, selectLabel)
+                    }, [selectLabel])
                 ]);
             }
             return h('div', {
@@ -1055,7 +1058,6 @@ export default defineComponent({
                 ])
             ]);
         };
-        $xeSelect.renderVN = renderVN;
         watch(() => reactData.staticOptions, (value) => {
             if (value.some((item) => item.options && item.options.length)) {
                 reactData.fullOptionList = [];
@@ -1100,6 +1102,7 @@ export default defineComponent({
             globalEvents.off($xeSelect, 'blur');
         });
         provide('$xeSelect', $xeSelect);
+        $xeSelect.renderVN = renderVN;
         return $xeSelect;
     },
     render() {

package/es/select/src/util.js

@@ -14,11 +14,11 @@ export function watchOption(props, option) {
         });
     });
 }
-export function assembleOption($xeSelect, el, option, optGroup) {
+export function assembleOption($xeSelect, el, option, $xeOptgroup) {
     const { reactData } = $xeSelect;
     const { staticOptions } = reactData;
     const parentElem = el.parentNode;
-    const parentOption = optGroup ? optGroup.option : null;
+    const parentOption = $xeOptgroup ? $xeOptgroup.optionConfig : null;
     const parentCols = parentOption ? parentOption.options : staticOptions;
     if (parentElem && parentCols) {
         parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, option);