vxe-pc-ui 4.1.19 → 4.1.21

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/pulldown/src/pulldown.js

@@ -39,6 +39,7 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeModal = inject('$xeModal', null);
+        const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const xID = XEUtils.uniqueId();
@@ -46,15 +47,18 @@ export default defineComponent({
         const reactData = reactive({
             initialized: false,
             panelIndex: 0,
-            panelStyle: null,
+            panelStyle: {},
             panelPlacement: null,
             visiblePanel: false,
             visibleAnimate: false,
             isActivated: false
         });
+        const internalData = {
+            hpTimeout: undefined
+        };
         const refElem = ref();
-        const refPulldowContent = ref();
-        const refPulldowPnanel = ref();
+        const refPulldownContent = ref();
+        const refPulldownPanel = ref();
         const computeBtnTransfer = computed(() => {
             const { transfer } = props;
             if (transfer === null) {
@@ -62,7 +66,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -76,6 +80,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let pulldownMethods = {};
@@ -96,8 +101,8 @@ export default defineComponent({
                 const { panelIndex, visiblePanel } = reactData;
                 const btnTransfer = computeBtnTransfer.value;
                 if (visiblePanel) {
-                    const targetElem = refPulldowContent.value;
-                    const panelElem = refPulldowPnanel.value;
+                    const targetElem = refPulldownContent.value;
+                    const panelElem = refPulldownPanel.value;
                     if (panelElem && targetElem) {
                         const targetHeight = targetElem.offsetHeight;
                         const targetWidth = targetElem.offsetWidth;
@@ -165,7 +170,6 @@ export default defineComponent({
                 return nextTick();
             });
         };
-        let hidePanelTimeout;
         /**
          * 显示下拉面板
          */
@@ -175,7 +179,9 @@ export default defineComponent({
             }
             return new Promise(resolve => {
                 if (!props.disabled) {
-                    clearTimeout(hidePanelTimeout);
+                    if (internalData.hpTimeout) {
+                        clearTimeout(internalData.hpTimeout);
+                    }
                     reactData.isActivated = true;
                     reactData.visibleAnimate = true;
                     setTimeout(() => {
@@ -203,7 +209,7 @@ export default defineComponent({
             emit('update:modelValue', false);
             return new Promise(resolve => {
                 if (reactData.visibleAnimate) {
-                    hidePanelTimeout = window.setTimeout(() => {
+                    internalData.hpTimeout = window.setTimeout(() => {
                         reactData.visibleAnimate = false;
                         nextTick(() => {
                             resolve();
@@ -247,7 +253,7 @@ export default defineComponent({
         const handleGlobalMousewheelEvent = (evnt) => {
             const { disabled } = props;
             const { visiblePanel } = reactData;
-            const panelElem = refPulldowPnanel.value;
+            const panelElem = refPulldownPanel.value;
             if (!disabled) {
                 if (visiblePanel) {
                     if (getEventTargetNode(evnt, panelElem).flag) {
@@ -264,7 +270,7 @@ export default defineComponent({
             const { disabled } = props;
             const { visiblePanel } = reactData;
             const el = refElem.value;
-            const panelElem = refPulldowPnanel.value;
+            const panelElem = refPulldownPanel.value;
             if (!disabled) {
                 reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag;
                 if (visiblePanel && !reactData.isActivated) {
@@ -343,7 +349,7 @@ export default defineComponent({
                     }]
             }, [
                 h('div', {
-                    ref: refPulldowContent,
+                    ref: refPulldownContent,
                     class: 'vxe-pulldown--content',
                     onClick: clickTargetEvent
                 }, defaultSlot ? defaultSlot({ $pulldown: $xePulldown }) : []),
@@ -352,7 +358,7 @@ export default defineComponent({
                     disabled: btnTransfer ? !initialized : true
                 }, [
                     h('div', {
-                        ref: refPulldowPnanel,
+                        ref: refPulldownPanel,
                         class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xePulldown }) : popupClassName) : '', {
                                 [`size--${vSize}`]: vSize,
                                 'is--shadow': showPopupShadow,

package/es/radio/src/button.js

@@ -102,7 +102,7 @@ export default defineComponent({
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const name = computeName.value;
-            const checked = computeChecked.value;
+            const isChecked = computeChecked.value;
             return h('label', {
                 class: ['vxe-radio', 'vxe-radio-button', {
                         [`size--${vSize}`]: vSize,
@@ -114,7 +114,7 @@ export default defineComponent({
                     class: 'vxe-radio--input',
                     type: 'radio',
                     name,
-                    checked,
+                    checked: isChecked,
                     disabled: isDisabled,
                     onChange: changeEvent,
                     onClick: clickEvent

package/es/radio/src/group.js

@@ -78,11 +78,12 @@ export default defineComponent({
         };
         const radioGroupPrivateMethods = {
             handleChecked(params, evnt) {
-                emit('update:modelValue', params.label);
+                const value = params.label;
+                emit('update:modelValue', value);
                 dispatchEvent('change', params, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
-                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, params.label);
+                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
             }
         };
@@ -108,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

@@ -3,29 +3,38 @@ import { createOption, watchOption, destroyOption, assembleOption } from './util
 export default defineComponent({
     name: 'VxeOptgroup',
     props: {
-        label: { type: [String, Number, Boolean], default: '' },
-        visible: { type: Boolean, default: null },
+        label: {
+            type: [String, Number, Boolean],
+            default: ''
+        },
+        visible: {
+            type: Boolean,
+            default: null
+        },
         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,24 +3,32 @@ import { createOption, watchOption, destroyOption, assembleOption } from './util
 export default defineComponent({
     name: 'VxeOption',
     props: {
-        value: null,
-        label: { type: [String, Number, Boolean], default: '' },
-        visible: { type: Boolean, default: null },
+        value: [String, Number, Boolean],
+        label: {
+            type: [String, Number, Boolean],
+            default: ''
+        },
+        visible: {
+            type: Boolean,
+            default: null
+        },
         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', {