vxe-pc-ui 4.17.29 → 4.18.0

package/es/select/src/select.js

@@ -747,21 +747,6 @@ export default defineVxeComponent({
             }
             reactData.reactFlag++;
         };
-        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;
@@ -924,6 +909,12 @@ export default defineVxeComponent({
                 updatePlacement();
             }
         };
+        const handleGlobalScrollEvent = () => {
+            const { visiblePanel } = reactData;
+            if (visiblePanel) {
+                updatePlacement();
+            }
+        };
         const handleFocusSearch = () => {
             if (props.filterable) {
                 nextTick(() => {
@@ -1728,18 +1719,18 @@ export default defineVxeComponent({
                     loadData(options);
                 }
             });
-            globalEvents.on($xeSelect, 'mousewheel', handleGlobalMousewheelEvent);
             globalEvents.on($xeSelect, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeSelect, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeSelect, 'blur', handleGlobalBlurEvent);
             globalEvents.on($xeSelect, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeSelect, 'scroll', handleGlobalScrollEvent);
         });
         onUnmounted(() => {
-            globalEvents.off($xeSelect, 'mousewheel');
             globalEvents.off($xeSelect, 'mousedown');
             globalEvents.off($xeSelect, 'keydown');
             globalEvents.off($xeSelect, 'blur');
             globalEvents.off($xeSelect, 'resize');
+            globalEvents.off($xeSelect, 'scroll');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());
         });

package/es/slider/src/slider.js

@@ -1,10 +1,13 @@
 import { ref, h, reactive, watch, computed, inject, onMounted, onBeforeUnmount } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, createEvent, renderEmptyElement, useSize } from '../../ui';
+import { VxeUI, getConfig, createEvent, renderEmptyElement, useSize } from '../../ui';
+import { getText } from '../../ui/src/utils';
 function createInternalData() {
     return {
         // _isUp: false,
+        isDragStatus: false,
+        isBtnActive: false,
         currValue: 0,
         startValue: 0,
         endValue: 0
@@ -48,10 +51,19 @@ export default defineVxeComponent({
             type: Boolean,
             default: null
         },
+        status: {
+            type: String,
+            default: () => getConfig().slider.status
+        },
         immediate: {
             type: Boolean,
             default: () => getConfig().slider.immediate
-        }
+        },
+        showTooltip: {
+            type: Boolean,
+            default: () => getConfig().slider.showTooltip
+        },
+        tooltipConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -108,6 +120,9 @@ export default defineVxeComponent({
             const { range, startValue, endValue } = props;
             return range ? `${startValue || ''}${endValue || ''}` : '';
         });
+        const computeTooltipOpts = computed(() => {
+            return Object.assign({}, getConfig().slider.tooltipConfig, props.tooltipConfig);
+        });
         const computeMaps = {};
         const $xeSlider = {
             xID,
@@ -260,6 +275,38 @@ export default defineVxeComponent({
             const raw = minNum + ratio * (maxNum - minNum);
             return Math.floor(raw);
         };
+        const handleShowTip = (btnElem) => {
+            const { showTooltip } = props;
+            if (showTooltip) {
+                if (VxeUI.tooltip) {
+                    const { currValue } = internalData;
+                    const tooltipOpts = computeTooltipOpts.value;
+                    const { contentMethod } = tooltipOpts;
+                    const content = getText(contentMethod
+                        ? contentMethod({
+                            $slider: $xeSlider,
+                            value: currValue
+                        })
+                        : '' + currValue);
+                    if (content) {
+                        VxeUI.tooltip.open(btnElem, Object.assign({}, Object.assign(Object.assign({}, tooltipOpts), { content }), {
+                            contentMethod: undefined
+                        }));
+                    }
+                    else {
+                        VxeUI.tooltip.close();
+                    }
+                }
+            }
+        };
+        const handleHideTip = () => {
+            const { showTooltip } = props;
+            if (showTooltip) {
+                if (VxeUI.tooltip) {
+                    VxeUI.tooltip.close();
+                }
+            }
+        };
         const handleBtnMousedownEvent = (evnt) => {
             const { range, immediate } = props;
             const btnElem = evnt.currentTarget;
@@ -271,6 +318,7 @@ export default defineVxeComponent({
                     evnt.preventDefault();
                     const el = refElem.value;
                     const barElem = refBarElem.value;
+                    internalData.isDragStatus = true;
                     if (el && barElem) {
                         const btnType = btnElem.getAttribute('data-type');
                         const barRect = barElem.getBoundingClientRect();
@@ -297,10 +345,12 @@ export default defineVxeComponent({
                         changeEvent(evnt);
                     }
                     updateTrackStyle();
+                    handleShowTip(btnElem);
                 };
                 document.onmouseup = (evnt) => {
                     document.onmousemove = null;
                     document.onmouseup = null;
+                    internalData.isDragStatus = false;
                     dispatchEvent('track-dragend', {
                         currentValue: internalData.currValue,
                         startValue: internalData.startValue,
@@ -308,18 +358,37 @@ export default defineVxeComponent({
                     }, evnt);
                     changeEvent(evnt);
                     updateTrackStyle();
+                    if (!internalData.isBtnActive) {
+                        handleHideTip();
+                    }
                 };
                 dispatchEvent('track-dragstart', {
                     currentValue: internalData.currValue,
                     startValue: internalData.startValue,
                     endValue: internalData.endValue
                 }, evnt);
+                internalData.isDragStatus = false;
+            }
+        };
+        const handleBtnMouseenterEvent = (evnt) => {
+            const { startValue, endValue } = internalData;
+            const btnElem = evnt.currentTarget;
+            const btnType = btnElem.getAttribute('data-type');
+            internalData.currValue = btnType === '1' ? startValue : endValue;
+            internalData.isBtnActive = true;
+            handleShowTip(btnElem);
+        };
+        const handleBtnMouseleaveEvent = () => {
+            const { isDragStatus } = internalData;
+            internalData.isBtnActive = false;
+            if (!isDragStatus) {
+                handleHideTip();
             }
         };
         const collapsePanePrivateMethods = {};
         Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
         const renderVN = () => {
-            const { vertical, range } = props;
+            const { status, vertical, range } = props;
             const vSize = computeSize.value;
             const formReadonly = computeFormReadonly.value;
             const isDisabled = computeIsDisabled.value;
@@ -327,6 +396,7 @@ export default defineVxeComponent({
                 ref: refElem,
                 class: ['vxe-slider', {
                         [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status,
                         'is--vertical': vertical,
                         'is--readonly': formReadonly,
                         'is--disabled': isDisabled
@@ -349,6 +419,8 @@ export default defineVxeComponent({
                             ref: refStartBtnElem,
                             class: 'vxe-slider--bar-btn',
                             'data-type': '1',
+                            onMouseenter: handleBtnMouseenterEvent,
+                            onMouseleave: handleBtnMouseleaveEvent,
                             onMousedown: handleBtnMousedownEvent
                         }),
                     formReadonly
@@ -357,6 +429,8 @@ export default defineVxeComponent({
                             ref: refEndBtnElem,
                             class: 'vxe-slider--bar-btn',
                             'data-type': '2',
+                            onMouseenter: handleBtnMouseenterEvent,
+                            onMouseleave: handleBtnMouseleaveEvent,
                             onMousedown: handleBtnMousedownEvent
                         })
                 ])

package/es/slider/style.css

@@ -13,7 +13,14 @@
   background-color: var(--vxe-ui-font-primary-darken-color);
 }
 .vxe-slider.theme--primary .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-font-primary-color);
+  border-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-slider.theme--primary.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-font-primary-disabled-color);
+}
+.vxe-slider.theme--primary.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-font-primary-disabled-color);
+  cursor: not-allowed;
 }
 .vxe-slider.theme--success .vxe-slider--bar-track {
   background-color: var(--vxe-ui-status-success-color);
@@ -25,7 +32,14 @@
   background-color: var(--vxe-ui-status-success-darken-color);
 }
 .vxe-slider.theme--success .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-status-success-color);
+  border-color: var(--vxe-ui-status-success-color);
+}
+.vxe-slider.theme--success.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-success-disabled-color);
+}
+.vxe-slider.theme--success.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-status-success-disabled-color);
+  cursor: not-allowed;
 }
 .vxe-slider.theme--info .vxe-slider--bar-track {
   background-color: var(--vxe-ui-status-info-color);
@@ -37,7 +51,14 @@
   background-color: var(--vxe-ui-status-info-darken-color);
 }
 .vxe-slider.theme--info .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-status-info-color);
+  border-color: var(--vxe-ui-status-info-color);
+}
+.vxe-slider.theme--info.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-info-disabled-color);
+}
+.vxe-slider.theme--info.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-status-info-disabled-color);
+  cursor: not-allowed;
 }
 .vxe-slider.theme--warning .vxe-slider--bar-track {
   background-color: var(--vxe-ui-status-warning-color);
@@ -49,7 +70,14 @@
   background-color: var(--vxe-ui-status-warning-darken-color);
 }
 .vxe-slider.theme--warning .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-status-warning-color);
+  border-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-slider.theme--warning.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-warning-disabled-color);
+}
+.vxe-slider.theme--warning.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-status-warning-disabled-color);
+  cursor: not-allowed;
 }
 .vxe-slider.theme--danger .vxe-slider--bar-track {
   background-color: var(--vxe-ui-status-danger-color);
@@ -61,7 +89,14 @@
   background-color: var(--vxe-ui-status-danger-darken-color);
 }
 .vxe-slider.theme--danger .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-status-danger-color);
+  border-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-slider.theme--danger.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-danger-disabled-color);
+}
+.vxe-slider.theme--danger.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-status-danger-disabled-color);
+  cursor: not-allowed;
 }
 .vxe-slider.theme--error .vxe-slider--bar-track {
   background-color: var(--vxe-ui-status-error-color);
@@ -73,9 +108,20 @@
   background-color: var(--vxe-ui-status-error-darken-color);
 }
 .vxe-slider.theme--error .vxe-slider--bar-btn {
-  background-color: var(--vxe-ui-status-error-color);
+  border-color: var(--vxe-ui-status-error-color);
+}
+.vxe-slider.theme--error.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-status-error-disabled-color);
+}
+.vxe-slider.theme--error.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-status-error-disabled-color);
+  cursor: not-allowed;
+}
+.vxe-slider.is--disabled .vxe-slider--bar-track {
+  background-color: var(--vxe-ui-font-primary-disabled-color);
 }
 .vxe-slider.is--disabled .vxe-slider--bar-btn {
+  border-color: var(--vxe-ui-font-primary-disabled-color);
   cursor: not-allowed;
 }
 .vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,
@@ -87,6 +133,7 @@
 }
 .vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active {
   transform: translate(-50%, -50%) scale(1.1);
+  cursor: grab;
 }
 .vxe-slider.is--readonly .vxe-slider--bar-wrapper,
 .vxe-slider.is--readonly .vxe-slider--inner {

package/es/slider/style.min.css

@@ -1 +1 @@
-.vxe-slider{position:relative;display:block;padding:.8em}.vxe-slider.theme--primary .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider.theme--primary .vxe-slider--bar-btn{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--success .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-lighten-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-slider.theme--success .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--info .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-lighten-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-slider.theme--info .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--warning .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-slider.theme--warning .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--danger .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-slider.theme--danger .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--error .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-slider.theme--error .vxe-slider--bar-btn{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.is--disabled .vxe-slider--bar-btn{cursor:not-allowed}.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,.vxe-slider:not(.is--disabled) .vxe-slider--inner{cursor:pointer}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover{transform:translate(-50%,-50%) scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform:translate(-50%,-50%) scale(1.1)}.vxe-slider.is--readonly .vxe-slider--bar-wrapper,.vxe-slider.is--readonly .vxe-slider--inner{cursor:default}.vxe-slider--inner{position:relative}.vxe-slider--bar-wrapper{background-color:#e4e7ed}.vxe-slider--bar-track{position:absolute;left:0;top:0;z-index:1;background-color:var(--vxe-ui-font-primary-color)}.vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider--bar-track:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider--bar-track,.vxe-slider--bar-wrapper{height:.3em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-slider--bar-btn{position:absolute;width:1.2em;height:1.2em;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}
+.vxe-slider{position:relative;display:block;padding:.8em}.vxe-slider.theme--primary .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider.theme--primary .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider.theme--primary .vxe-slider--bar-btn{border-color:var(--vxe-ui-font-primary-color)}.vxe-slider.theme--primary.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-disabled-color)}.vxe-slider.theme--primary.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-font-primary-disabled-color);cursor:not-allowed}.vxe-slider.theme--success .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-lighten-color)}.vxe-slider.theme--success .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-success-darken-color)}.vxe-slider.theme--success .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-success-color)}.vxe-slider.theme--success.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-status-success-disabled-color)}.vxe-slider.theme--success.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-success-disabled-color);cursor:not-allowed}.vxe-slider.theme--info .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-lighten-color)}.vxe-slider.theme--info .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-info-darken-color)}.vxe-slider.theme--info .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-info-color)}.vxe-slider.theme--info.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-status-info-disabled-color)}.vxe-slider.theme--info.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-info-disabled-color);cursor:not-allowed}.vxe-slider.theme--warning .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-lighten-color)}.vxe-slider.theme--warning .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-warning-darken-color)}.vxe-slider.theme--warning .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-warning-color)}.vxe-slider.theme--warning.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-status-warning-disabled-color)}.vxe-slider.theme--warning.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-warning-disabled-color);cursor:not-allowed}.vxe-slider.theme--danger .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-lighten-color)}.vxe-slider.theme--danger .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-danger-darken-color)}.vxe-slider.theme--danger .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-danger-color)}.vxe-slider.theme--danger.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-status-danger-disabled-color)}.vxe-slider.theme--danger.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-danger-disabled-color);cursor:not-allowed}.vxe-slider.theme--error .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-lighten-color)}.vxe-slider.theme--error .vxe-slider--bar-track:hover{background-color:var(--vxe-ui-status-error-darken-color)}.vxe-slider.theme--error .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-error-color)}.vxe-slider.theme--error.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-status-error-disabled-color)}.vxe-slider.theme--error.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-status-error-disabled-color);cursor:not-allowed}.vxe-slider.is--disabled .vxe-slider--bar-track{background-color:var(--vxe-ui-font-primary-disabled-color)}.vxe-slider.is--disabled .vxe-slider--bar-btn{border-color:var(--vxe-ui-font-primary-disabled-color);cursor:not-allowed}.vxe-slider:not(.is--disabled) .vxe-slider--bar-wrapper,.vxe-slider:not(.is--disabled) .vxe-slider--inner{cursor:pointer}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover{transform:translate(-50%,-50%) scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform:translate(-50%,-50%) scale(1.1);cursor:grab}.vxe-slider.is--readonly .vxe-slider--bar-wrapper,.vxe-slider.is--readonly .vxe-slider--inner{cursor:default}.vxe-slider--inner{position:relative}.vxe-slider--bar-wrapper{background-color:#e4e7ed}.vxe-slider--bar-track{position:absolute;left:0;top:0;z-index:1;background-color:var(--vxe-ui-font-primary-color)}.vxe-slider--bar-track:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-slider--bar-track:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-slider--bar-track,.vxe-slider--bar-wrapper{height:.3em;border-radius:var(--vxe-ui-base-border-radius)}.vxe-slider--bar-btn{position:absolute;width:1.2em;height:1.2em;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}

package/es/space/src/space.js

@@ -38,6 +38,26 @@ export default defineVxeComponent({
         align: {
             type: String,
             default: () => getConfig().space.align
+        },
+        fill: {
+            type: Boolean,
+            default: () => getConfig().space.fill
+        },
+        itemWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemWidth
+        },
+        itemMinWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemMinWidth
+        },
+        itemMaxWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.itemMaxWidth
+        },
+        separatorWidth: {
+            type: [String, Number],
+            default: () => getConfig().space.separatorWidth
         }
     },
     emits: [],
@@ -100,20 +120,36 @@ export default defineVxeComponent({
         const spacePrivateMethods = {};
         Object.assign($xeSpace, spaceMethods, spacePrivateMethods);
         const renderItems = () => {
-            const { separator, itemClassName } = props;
+            const { separator, itemClassName, itemWidth, itemMinWidth, itemMaxWidth, separatorWidth } = props;
             const itemVNs = [];
             const defaultSlot = slots.default;
             const separatorSlot = slots.separator;
+            const srStys = {};
+            if (separatorWidth) {
+                srStys.width = toCssUnit(itemWidth);
+            }
+            const itemStys = {};
+            if (itemWidth) {
+                itemStys.width = toCssUnit(itemWidth);
+            }
+            if (itemMinWidth) {
+                itemStys.minWidth = toCssUnit(itemMinWidth);
+            }
+            if (itemMaxWidth) {
+                itemStys.maxWidth = toCssUnit(itemMaxWidth);
+            }
             if (defaultSlot) {
                 XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
                     itemVNs.push(h('div', {
                         key: 'i' + index,
-                        class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+                        class: ['vxe-space--item', getPropClass(itemClassName, { index })],
+                        style: itemStys
                     }, [itemVN]));
                     if ((separator || separatorSlot) && index < items.length - 1) {
                         itemVNs.push(h('div', {
                             key: 's' + index,
-                            class: 'vxe-space--separator'
+                            class: 'vxe-space--separator',
+                            style: srStys
                         }, separatorSlot ? separatorSlot({}) : ('' + separator)));
                     }
                 });
@@ -121,7 +157,7 @@ export default defineVxeComponent({
             return itemVNs;
         };
         const renderVN = () => {
-            const { vertical, wrap, className } = props;
+            const { vertical, wrap, className, fill, itemWidth, itemMinWidth, itemMaxWidth } = props;
             const wrapperStyle = computeWrapperStyle.value;
             const vSize = computeSize.value;
             return h('div', {
@@ -129,7 +165,9 @@ export default defineVxeComponent({
                 class: ['vxe-space', getPropClass(className, {}), {
                         [`size--${vSize}`]: vSize,
                         'is--wrap': wrap,
-                        'is--vertical': vertical
+                        'is--vertical': vertical,
+                        'is--fill': fill,
+                        'is--width': itemWidth || itemMinWidth || itemMaxWidth
                     }],
                 style: wrapperStyle
             }, renderItems());

package/es/space/style.css

@@ -34,4 +34,11 @@
 }
 .vxe-space.is--vertical {
   flex-direction: column;
+}
+.vxe-space.is--fill > .vxe-space--item {
+  flex-grow: 1;
+}
+
+.vxe-space--separator {
+  flex-shrink: 0;
 }

package/es/space/style.min.css

@@ -1 +1 @@
-.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}
+.vxe-space{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-default);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-default)}.vxe-space.size--xlarge{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-xlarge);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-xlarge)}.vxe-space.size--large{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-large);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-large)}.vxe-space.size--medium{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-medium);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-medium)}.vxe-space.size--small{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-small);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-small)}.vxe-space.size--mini{--vxe-ui-space-current-row-gap:var(--vxe-ui-space-row-gap-mini);--vxe-ui-space-current-column-gap:var(--vxe-ui-space-column-gap-mini)}.vxe-space{display:inline-flex;flex-direction:row;align-items:center;gap:var(--vxe-ui-space-current-row-gap) var(--vxe-ui-space-current-column-gap)}.vxe-space.is--wrap{flex-wrap:wrap}.vxe-space.is--vertical{flex-direction:column}.vxe-space.is--fill>.vxe-space--item{flex-grow:1}.vxe-space--separator{flex-shrink:0}