vxe-pc-ui 4.17.30 → 4.18.1

package/es/button/src/button.js

@@ -123,6 +123,7 @@ const VxeButtonComponent = defineVxeComponent({
         const { slots, emit } = context;
         const $xeModal = inject('$xeModal', null);
         const $xeDrawer = inject('$xeDrawer', null);
+        const $xeGrid = inject('$xeGrid', null);
         const $xeTable = inject('$xeTable', null);
         const $xeTree = inject('$xeTree', null);
         const $xeForm = inject('$xeForm', null);
@@ -169,7 +170,7 @@ const VxeButtonComponent = defineVxeComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
+                if ($xeGrid || $xeTable || $xeTree || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -525,12 +526,6 @@ const VxeButtonComponent = defineVxeComponent({
                 return nextTick();
             }
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const panelElem = refBtnPanel.value;
-            if (reactData.visiblePanel && !getEventTargetNode(evnt, panelElem).flag) {
-                hidePanel();
-            }
-        };
         const handleGlobalMousedownEvent = (evnt) => {
             const btnDisabled = computeBtnDisabled.value;
             const { visiblePanel } = reactData;
@@ -549,6 +544,12 @@ const VxeButtonComponent = defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         Object.assign($xeButton, buttonMethods);
         const renderVN = () => {
             const { className, trigger, title, routerLink, type, destroyOnClose, name, loading, shadow, showDropdownIcon } = props;
@@ -729,14 +730,14 @@ const VxeButtonComponent = defineVxeComponent({
             if (props.type === 'text') {
                 warnLog('vxe.error.delProp', ['type=text', 'mode=text']);
             }
-            globalEvents.on($xeButton, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeButton, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeButton, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeButton, 'scroll', handleGlobalScrollEvent);
         });
         onUnmounted(() => {
-            globalEvents.off($xeButton, 'mousewheel');
             globalEvents.off($xeButton, 'mousedown');
             globalEvents.off($xeButton, 'resize');
+            globalEvents.off($xeButton, 'scroll');
         });
         return $xeButton;
     },

package/es/cascader/src/cascader.js

@@ -891,21 +891,6 @@ export default defineVxeComponent({
             const { $event } = params;
             hideOptionPanel($event);
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelElem = refOptionPanel.value;
-                    if (getEventTargetNode(evnt, panelElem).flag) {
-                        updatePlacement();
-                    }
-                    else {
-                        hideOptionPanel(evnt);
-                    }
-                }
-            }
-        };
         const handleGlobalMousedownEvent = (evnt) => {
             const { visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
@@ -939,6 +924,12 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         const handleFocusSearch = () => {
             if (props.filterable) {
                 nextTick(() => {
@@ -1782,16 +1773,16 @@ export default defineVxeComponent({
         });
         loadData(props.options || []);
         onMounted(() => {
-            globalEvents.on($xeCascader, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeCascader, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeCascader, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeCascader, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeCascader, 'scroll', handleGlobalScrollEvent);
         });
         onUnmounted(() => {
-            globalEvents.off($xeCascader, 'mousewheel');
             globalEvents.off($xeCascader, 'mousedown');
             globalEvents.off($xeCascader, 'blur');
             globalEvents.off($xeCascader, 'resize');
+            globalEvents.off($xeCascader, 'scroll');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());
         });

package/es/color-picker/src/color-picker.js

@@ -588,21 +588,6 @@ export default defineVxeComponent({
                 }
             }
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelElem = refOptionPanel.value;
-                    if (getEventTargetNode(evnt, panelElem).flag) {
-                        updatePlacement();
-                    }
-                    else {
-                        hideOptionPanel();
-                    }
-                }
-            }
-        };
         const handleGlobalMousedownEvent = (evnt) => {
             const { visiblePanel } = reactData;
             const isDisabled = computeIsDisabled.value;
@@ -636,6 +621,12 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent(evnt, { $colorPicker: $xeColorPicker }, params));
         };
@@ -1039,16 +1030,16 @@ export default defineVxeComponent({
             updateType();
         });
         onMounted(() => {
-            globalEvents.on($xeColorPicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeColorPicker, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeColorPicker, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeColorPicker, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeColorPicker, 'scroll', handleGlobalScrollEvent);
         });
         onUnmounted(() => {
-            globalEvents.off($xeColorPicker, 'mousewheel');
             globalEvents.off($xeColorPicker, 'mousedown');
             globalEvents.off($xeColorPicker, 'blur');
             globalEvents.off($xeColorPicker, 'resize');
+            globalEvents.off($xeColorPicker, 'scroll');
         });
         updateType();
         provide('$xeColorPicker', $xeColorPicker);

package/es/components.js

@@ -27,6 +27,7 @@ import VxeCountdown from './countdown';
 import VxeDatePanel from './date-panel';
 import VxeDatePicker from './date-picker';
 import VxeDateRangePicker from './date-range-picker';
+import VxeDivider from './divider';
 import VxeDrawer, { DrawerController } from './drawer';
 import VxeEmpty from './empty';
 import VxeForm from './form';
@@ -123,6 +124,7 @@ const components = [
     VxeDatePanel,
     VxeDatePicker,
     VxeDateRangePicker,
+    VxeDivider,
     VxeDrawer,
     VxeEmpty,
     VxeForm,
@@ -262,6 +264,7 @@ export * from './countdown';
 export * from './date-panel';
 export * from './date-picker';
 export * from './date-range-picker';
+export * from './divider';
 export * from './drawer';
 export * from './empty';
 export * from './form';

package/es/date-picker/src/date-picker.js

@@ -1080,21 +1080,6 @@ export default defineVxeComponent({
                 }
             }
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelWrapperElem = refPanelWrapper.value;
-                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
-                        updatePlacement();
-                    }
-                    else {
-                        hidePanel();
-                    }
-                }
-            }
-        };
         const handleGlobalBlurEvent = () => {
             const { isActivated, visiblePanel } = reactData;
             if (visiblePanel) {
@@ -1117,6 +1102,12 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         // 弹出面板
         const updateZindex = () => {
             const popupOpts = computePopupOpts.value;
@@ -1590,11 +1581,11 @@ export default defineVxeComponent({
         });
         updateModelValue();
         nextTick(() => {
-            globalEvents.on($xeDatePicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeDatePicker, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeDatePicker, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeDatePicker, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeDatePicker, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeDatePicker, 'scroll', handleGlobalScrollEvent);
         });
         onMounted(() => {
             const { type, multiple, maskedConfig } = props;
@@ -1608,11 +1599,11 @@ export default defineVxeComponent({
             }
         });
         onUnmounted(() => {
-            globalEvents.off($xeDatePicker, 'mousewheel');
             globalEvents.off($xeDatePicker, 'mousedown');
             globalEvents.off($xeDatePicker, 'keydown');
             globalEvents.off($xeDatePicker, 'blur');
             globalEvents.off($xeDatePicker, 'resize');
+            globalEvents.off($xeDatePicker, 'scroll');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());
         });

package/es/date-range-picker/src/date-range-picker.js

@@ -918,22 +918,6 @@ export default defineVxeComponent({
                 }
             }
         };
-        const handleGlobalMousewheelEvent = (evnt) => {
-            const { visiblePanel } = reactData;
-            const isDisabled = computeIsDisabled.value;
-            if (!isDisabled) {
-                if (visiblePanel) {
-                    const panelWrapperElem = refPanelWrapper.value;
-                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
-                        updatePlacement();
-                    }
-                    else {
-                        checkValue();
-                        hidePanel();
-                    }
-                }
-            }
-        };
         const handleGlobalBlurEvent = () => {
             const { visiblePanel, isActivated } = reactData;
             if (visiblePanel) {
@@ -956,6 +940,12 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         // 弹出面板
         const updateZindex = () => {
             const popupOpts = computePopupOpts.value;
@@ -1483,11 +1473,11 @@ export default defineVxeComponent({
         });
         updateModelValue(true);
         nextTick(() => {
-            globalEvents.on($xeDateRangePicker, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeDateRangePicker, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeDateRangePicker, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeDateRangePicker, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeDateRangePicker, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeDateRangePicker, 'scroll', handleGlobalScrollEvent);
         });
         onDeactivated(() => {
             checkValue();
@@ -1496,10 +1486,11 @@ export default defineVxeComponent({
             checkValue();
         });
         onUnmounted(() => {
-            globalEvents.off($xeDateRangePicker, 'mousewheel');
             globalEvents.off($xeDateRangePicker, 'mousedown');
+            globalEvents.off($xeDateRangePicker, 'keydown');
             globalEvents.off($xeDateRangePicker, 'blur');
             globalEvents.off($xeDateRangePicker, 'resize');
+            globalEvents.off($xeDateRangePicker, 'scroll');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());
         });

package/es/divider/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeDividerComponent from './src/divider';
+import { dynamicApp } from '../dynamics';
+export const VxeDivider = Object.assign({}, VxeDividerComponent, {
+    install(app) {
+        app.component(VxeDividerComponent.name, VxeDividerComponent);
+    }
+});
+dynamicApp.use(VxeDivider);
+VxeUI.component(VxeDividerComponent);
+export const Divider = VxeDivider;
+export default VxeDivider;

package/es/divider/src/divider.js

@@ -0,0 +1,73 @@
+import { ref, h } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, useSize } from '../../ui';
+export default defineVxeComponent({
+    name: 'VxeDivider',
+    props: {
+        vertical: {
+            type: Boolean,
+            default: () => getConfig().divider.vertical
+        },
+        titleContent: {
+            type: String,
+            default: () => getConfig().divider.titleContent
+        },
+        titleAlign: {
+            type: String,
+            default: () => getConfig().divider.titleAlign
+        },
+        size: {
+            type: String,
+            default: () => getConfig().divider.size || getConfig().size
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { emit, slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {};
+        const $xeDivider = {
+            xID,
+            props,
+            context,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $divider: $xeDivider }, params));
+        };
+        const dividerMethods = {
+            dispatchEvent
+        };
+        const dividerPrivateMethods = {};
+        Object.assign($xeDivider, dividerMethods, dividerPrivateMethods);
+        const renderVN = () => {
+            const { vertical, titleContent, titleAlign } = props;
+            const vSize = computeSize.value;
+            const titleSlot = slots.title;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-divider', vertical ? 'is--vertical' : 'is--horizontal', `t--align-${titleAlign || 'center'}`, {
+                        [`size--${vSize}`]: vSize
+                    }]
+            }, (titleContent || titleSlot) && !vertical
+                ? [
+                    h('span', {
+                        class: 'vxe-divider--content'
+                    }, titleSlot ? titleSlot({}) : titleContent)
+                ]
+                : []);
+        };
+        $xeDivider.renderVN = renderVN;
+        return $xeDivider;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/divider/style.css

@@ -0,0 +1,83 @@
+.vxe-divider {
+  --vxe-ui-divider-current-font-size: inherit;
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-default);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-default);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-default);
+}
+.vxe-divider.size--xlarge {
+  --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-xlarge);
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-xlarge);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-xlarge);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-xlarge);
+}
+.vxe-divider.size--large {
+  --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-large);
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-large);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-large);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-large);
+}
+.vxe-divider.size--medium {
+  --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-medium);
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-medium);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-medium);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-medium);
+}
+.vxe-divider.size--small {
+  --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-small);
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-small);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-small);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-small);
+}
+.vxe-divider.size--mini {
+  --vxe-ui-divider-current-font-size: var(--vxe-ui-font-size-mini);
+  --vxe-ui-divider-padding: var(--vxe-ui-layout-padding-mini);
+  --vxe-ui-divider-current-horizontal-margin: var(--vxe-ui-divider-horizontal-margin-mini);
+  --vxe-ui-divider-current-vertical-margin: var(--vxe-ui-divider-vertical-margin-mini);
+}
+
+.vxe-divider {
+  color: var(--vxe-ui-font-color);
+  font-size: var(--vxe-ui-divider-current-font-size);
+  white-space: nowrap;
+}
+.vxe-divider.is--horizontal {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: var(--vxe-ui-divider-current-horizontal-margin) 0;
+}
+.vxe-divider.is--horizontal::after, .vxe-divider.is--horizontal::before {
+  content: "";
+  display: block;
+  height: 1px;
+  border-top: var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color);
+}
+.vxe-divider.is--horizontal.t--align-left::after {
+  flex-grow: 1;
+}
+.vxe-divider.is--horizontal.t--align-left::before {
+  width: 1.2em;
+  flex-shrink: 0;
+}
+.vxe-divider.is--horizontal.t--align-center::after, .vxe-divider.is--horizontal.t--align-center::before {
+  flex-grow: 1;
+}
+.vxe-divider.is--horizontal.t--align-right::after {
+  width: 1.2em;
+  flex-shrink: 0;
+}
+.vxe-divider.is--horizontal.t--align-right::before {
+  flex-grow: 1;
+}
+.vxe-divider.is--horizontal .vxe-divider--content {
+  padding: 0 var(--vxe-ui-divider-padding);
+}
+.vxe-divider.is--vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  vertical-align: middle;
+  margin: 0 var(--vxe-ui-divider-current-vertical-margin);
+  border-left: var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color);
+}

package/es/divider/style.min.css

@@ -0,0 +1 @@
+.vxe-divider{--vxe-ui-divider-current-font-size:inherit;--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-default);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-default);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-default)}.vxe-divider.size--xlarge{--vxe-ui-divider-current-font-size:var(--vxe-ui-font-size-xlarge);--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-xlarge);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-xlarge);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-xlarge)}.vxe-divider.size--large{--vxe-ui-divider-current-font-size:var(--vxe-ui-font-size-large);--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-large);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-large);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-large)}.vxe-divider.size--medium{--vxe-ui-divider-current-font-size:var(--vxe-ui-font-size-medium);--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-medium);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-medium);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-medium)}.vxe-divider.size--small{--vxe-ui-divider-current-font-size:var(--vxe-ui-font-size-small);--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-small);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-small);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-small)}.vxe-divider.size--mini{--vxe-ui-divider-current-font-size:var(--vxe-ui-font-size-mini);--vxe-ui-divider-padding:var(--vxe-ui-layout-padding-mini);--vxe-ui-divider-current-horizontal-margin:var(--vxe-ui-divider-horizontal-margin-mini);--vxe-ui-divider-current-vertical-margin:var(--vxe-ui-divider-vertical-margin-mini)}.vxe-divider{color:var(--vxe-ui-font-color);font-size:var(--vxe-ui-divider-current-font-size);white-space:nowrap}.vxe-divider.is--horizontal{width:100%;display:flex;flex-direction:row;align-items:center;margin:var(--vxe-ui-divider-current-horizontal-margin) 0}.vxe-divider.is--horizontal::after,.vxe-divider.is--horizontal::before{content:"";display:block;height:1px;border-top:var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color)}.vxe-divider.is--horizontal.t--align-left::after{flex-grow:1}.vxe-divider.is--horizontal.t--align-left::before{width:1.2em;flex-shrink:0}.vxe-divider.is--horizontal.t--align-center::after,.vxe-divider.is--horizontal.t--align-center::before{flex-grow:1}.vxe-divider.is--horizontal.t--align-right::after{width:1.2em;flex-shrink:0}.vxe-divider.is--horizontal.t--align-right::before{flex-grow:1}.vxe-divider.is--horizontal .vxe-divider--content{padding:0 var(--vxe-ui-divider-padding)}.vxe-divider.is--vertical{display:inline-block;width:1px;height:1em;vertical-align:middle;margin:0 var(--vxe-ui-divider-current-vertical-margin);border-left:var(--vxe-ui-divider-border-width) solid var(--vxe-ui-input-border-color)}

package/es/empty/src/empty.js

@@ -1,14 +1,17 @@
 import { ref, h, reactive } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getI18n, getIcon, createEvent } from '../../ui';
+import { getConfig, getI18n, getIcon, createEvent } from '../../ui';
 export default defineVxeComponent({
     name: 'VxeEmpty',
     props: {
         imageUrl: String,
         imageStyle: Object,
         icon: String,
-        status: String,
+        status: {
+            type: String,
+            default: () => getConfig().empty.status
+        },
         content: [String, Number]
     },
     emits: [],