vxe-pc-ui 4.17.19 → 4.17.21

package/es/slider/src/slider.js

@@ -1,11 +1,24 @@
-import { ref, h, reactive, watch, computed, inject, onMounted } from 'vue';
+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';
+function createInternalData() {
+    return {
+        // _isUp: false,
+        currValue: 0,
+        startValue: 0,
+        endValue: 0
+    };
+}
+function createReactData() {
+    return {};
+}
 export default defineVxeComponent({
     name: 'VxeSlider',
     props: {
         modelValue: [String, Number, Array],
+        startValue: [String, Number],
+        endValue: [String, Number],
         vertical: Boolean,
         max: {
             type: [String, Number],
@@ -34,10 +47,16 @@ export default defineVxeComponent({
         disabled: {
             type: Boolean,
             default: null
+        },
+        immediate: {
+            type: Boolean,
+            default: () => getConfig().slider.immediate
         }
     },
     emits: [
         'update:modelValue',
+        'update:startValue',
+        'update:endValue',
         'change',
         'track-dragstart',
         'track-dragover',
@@ -54,10 +73,8 @@ export default defineVxeComponent({
         const refTrackElem = ref();
         const refStartBtnElem = ref();
         const refEndBtnElem = ref();
-        const reactData = reactive({
-            startValue: 0,
-            endValue: 0
-        });
+        const reactData = reactive(createReactData());
+        const internalData = createInternalData();
         const refMaps = {
             refElem
         };
@@ -87,6 +104,10 @@ export default defineVxeComponent({
         const computeMinNum = computed(() => {
             return XEUtils.toNumber(props.min || 0);
         });
+        const computeMVal = computed(() => {
+            const { range, startValue, endValue } = props;
+            return range ? `${startValue || ''}${endValue || ''}` : '';
+        });
         const computeMaps = {};
         const $xeSlider = {
             xID,
@@ -97,6 +118,7 @@ export default defineVxeComponent({
             getComputeMaps: () => computeMaps
         };
         const emitModel = (value) => {
+            internalData._isUp = true;
             emit('update:modelValue', value);
         };
         const dispatchEvent = (type, params, evnt) => {
@@ -105,72 +127,144 @@ export default defineVxeComponent({
         const collapsePaneMethods = {
             dispatchEvent
         };
-        const getStartPercent = (startValue) => {
-            const { range } = props;
+        const getBarPercent = (currValue) => {
             const maxNum = computeMaxNum.value;
             const minNum = computeMinNum.value;
-            return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0;
+            if (maxNum === minNum) {
+                return 0;
+            }
+            if (currValue < minNum) {
+                currValue = minNum;
+            }
+            if (currValue > maxNum) {
+                currValue = maxNum;
+            }
+            return ((currValue - minNum) / (maxNum - minNum)) * 100;
         };
-        const getEndPercent = (startValue, endValue) => {
-            const { range } = props;
-            const maxNum = computeMaxNum.value;
-            const minNum = computeMinNum.value;
-            return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100);
+        const parseFields = (startValue, endValue) => {
+            const [sVal, eVal] = XEUtils.orderBy([XEUtils.toNumber(startValue), XEUtils.toNumber(endValue)]);
+            const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = currValue;
+            internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
         };
-        const updateModel = () => {
-            const { modelValue } = props;
-            if (XEUtils.isArray(modelValue)) {
-                const [sVal, eVal] = XEUtils.clone(modelValue, true).sort();
-                reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+        const parseArrs = (arrVals) => {
+            const [sVal, eVal] = XEUtils.orderBy(arrVals);
+            const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = currValue;
+            internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+        };
+        const parseNum = (val) => {
+            const currValue = XEUtils.floor(XEUtils.toNumber(val || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = 0;
+            internalData.endValue = currValue;
+        };
+        const updateModelValue = (umType) => {
+            const { range, modelValue, startValue, endValue } = props;
+            if (!umType) {
+                if (range) {
+                    if (XEUtils.eqNull(modelValue)) {
+                        if (startValue || endValue) {
+                            parseFields(startValue, endValue);
+                        }
+                    }
+                    else {
+                        if (XEUtils.isArray(modelValue)) {
+                            parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                        }
+                        else {
+                            parseNum(modelValue);
+                        }
+                    }
+                }
+                else {
+                    parseNum(modelValue);
+                }
+            }
+            else if (range && umType === 2) {
+                parseFields(startValue, endValue);
             }
             else {
-                reactData.startValue = 0;
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(modelValue || 0));
+                if (XEUtils.isArray(modelValue)) {
+                    parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                }
+                else {
+                    parseNum(modelValue);
+                }
             }
+            updateBarStyle();
+            updateTrackStyle();
         };
         const updateBarStyle = () => {
-            const { startValue, endValue } = reactData;
-            const trackElem = refTrackElem.value;
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
             const startBtnElem = refStartBtnElem.value;
             const endBtnElem = refEndBtnElem.value;
-            let startPercent = 0;
-            let endPercent = 0;
-            if (startValue > endValue) {
-                startPercent = getStartPercent(endValue);
-                endPercent = getEndPercent(endValue, startValue);
+            if (range) {
+                const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+                if (startBtnElem) {
+                    startBtnElem.style.left = getBarPercent(sVal) + '%';
+                }
+                if (endBtnElem) {
+                    endBtnElem.style.left = getBarPercent(eVal) + '%';
+                }
             }
             else {
-                startPercent = getStartPercent(startValue);
-                endPercent = getEndPercent(startValue, endValue);
+                if (endBtnElem) {
+                    endBtnElem.style.left = getBarPercent(currValue) + '%';
+                }
             }
+        };
+        const updateTrackStyle = () => {
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
+            const trackElem = refTrackElem.value;
             if (trackElem) {
-                trackElem.style.left = `${startPercent}%`;
-                trackElem.style.width = `${endPercent}%`;
-            }
-            if (startBtnElem) {
-                startBtnElem.style.left = `${startPercent}%`;
-            }
-            if (endBtnElem) {
-                endBtnElem.style.left = `${XEUtils.floor(startPercent + endPercent)}%`;
+                if (range) {
+                    const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+                    trackElem.style.left = getBarPercent(sVal) + '%';
+                    trackElem.style.width = getBarPercent(eVal - sVal) + '%';
+                }
+                else {
+                    trackElem.style.left = '0';
+                    trackElem.style.width = getBarPercent(currValue) + '%';
+                }
             }
         };
         const changeEvent = (evnt) => {
             const { range } = props;
-            const { startValue, endValue } = reactData;
-            const value = range ? [startValue, endValue].sort() : endValue;
+            const { currValue, startValue, endValue } = internalData;
+            const vals = range ? XEUtils.orderBy([startValue, endValue]) : [];
+            const value = range ? vals : currValue;
             emitModel(value);
+            if (range) {
+                emit('update:startValue', vals[0] || 0);
+                emit('update:endValue', vals[1] || 0);
+            }
             dispatchEvent('change', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
-        const handleMousedownEvent = (evnt, isEnd) => {
-            const formReadonly = computeFormReadonly.value;
-            const isDisabled = computeIsDisabled.value;
+        const getValueByLeft = (offsetLeft, barWidth) => {
             const maxNum = computeMaxNum.value;
             const minNum = computeMinNum.value;
+            if (barWidth === 0) {
+                return minNum;
+            }
+            const clamped = Math.max(0, Math.min(barWidth, offsetLeft));
+            const ratio = clamped / barWidth;
+            const raw = minNum + ratio * (maxNum - minNum);
+            return Math.floor(raw);
+        };
+        const handleBtnMousedownEvent = (evnt) => {
+            const { range, immediate } = props;
+            const btnElem = evnt.currentTarget;
+            const formReadonly = computeFormReadonly.value;
+            const isDisabled = computeIsDisabled.value;
             if (!(formReadonly || isDisabled)) {
                 evnt.preventDefault();
                 document.onmousemove = evnt => {
@@ -178,38 +272,50 @@ export default defineVxeComponent({
                     const el = refElem.value;
                     const barElem = refBarElem.value;
                     if (el && barElem) {
+                        const btnType = btnElem.getAttribute('data-type');
                         const barRect = barElem.getBoundingClientRect();
-                        const trackWidth = (evnt.clientX - barRect.left) / barRect.width;
-                        if (isEnd) {
-                            reactData.endValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
-                        }
-                        else {
-                            reactData.startValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))));
+                        const barWidth = barRect.width;
+                        const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - barRect.left));
+                        const currValue = getValueByLeft(offsetLeft, barWidth);
+                        if (range) {
+                            if (btnType === '1') {
+                                internalData.startValue = currValue;
+                            }
+                            else {
+                                internalData.endValue = currValue;
+                            }
                         }
-                        dispatchEvent('track-dragover', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                        internalData.currValue = currValue;
+                        btnElem.style.left = getBarPercent(currValue) + '%';
+                        dispatchEvent('track-dragover', {
+                            currentValue: internalData.currValue,
+                            startValue: internalData.startValue,
+                            endValue: internalData.endValue
+                        }, evnt);
                     }
-                    updateBarStyle();
+                    if (immediate) {
+                        changeEvent(evnt);
+                    }
+                    updateTrackStyle();
                 };
                 document.onmouseup = (evnt) => {
                     document.onmousemove = null;
                     document.onmouseup = null;
-                    dispatchEvent('track-dragend', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                    dispatchEvent('track-dragend', {
+                        currentValue: internalData.currValue,
+                        startValue: internalData.startValue,
+                        endValue: internalData.endValue
+                    }, evnt);
                     changeEvent(evnt);
-                    updateBarStyle();
+                    updateTrackStyle();
                 };
-                dispatchEvent('track-dragstart', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                dispatchEvent('track-dragstart', {
+                    currentValue: internalData.currValue,
+                    startValue: internalData.startValue,
+                    endValue: internalData.endValue
+                }, evnt);
             }
         };
-        const handleStartMousedownEvent = (evnt) => {
-            const endBtnElem = refEndBtnElem.value;
-            const startBtnElem = evnt.currentTarget;
-            handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
-        };
-        const handleEndMousedownEvent = (evnt) => {
-            const startBtnElem = refStartBtnElem.value;
-            const endBtnElem = evnt.currentTarget;
-            handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
-        };
         const collapsePanePrivateMethods = {};
         Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
         const renderVN = () => {
@@ -241,26 +347,40 @@ export default defineVxeComponent({
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: refStartBtnElem,
-                            class: 'vxe-slider--bar-btn vxe-slider--start-btn',
-                            onMousedown: handleStartMousedownEvent
+                            class: 'vxe-slider--bar-btn',
+                            'data-type': '1',
+                            onMousedown: handleBtnMousedownEvent
                         }),
                     formReadonly
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: refEndBtnElem,
-                            class: 'vxe-slider--bar-btn vxe-slider--end-btn',
-                            onMousedown: handleEndMousedownEvent
+                            class: 'vxe-slider--bar-btn',
+                            'data-type': '2',
+                            onMousedown: handleBtnMousedownEvent
                         })
                 ])
             ]);
         };
         watch(() => props.modelValue, () => {
-            updateModel();
+            if (!internalData._isUp) {
+                updateModelValue(1);
+            }
+            internalData._isUp = false;
+        });
+        watch(computeMVal, () => {
+            if (!internalData._isUp) {
+                updateModelValue(2);
+            }
+            internalData._isUp = false;
         });
         onMounted(() => {
-            updateBarStyle();
+            updateModelValue();
+        });
+        onBeforeUnmount(() => {
+            XEUtils.assign(reactData, createReactData());
+            XEUtils.assign(internalData, createInternalData());
         });
-        updateModel();
         $xeSlider.renderVN = renderVN;
         return $xeSlider;
     },

package/es/slider/style.css

@@ -1,7 +1,7 @@
 .vxe-slider {
   position: relative;
   display: block;
-  padding: 0.5em 1em;
+  padding: 0.8em;
 }
 .vxe-slider.theme--primary .vxe-slider--bar-track {
   background-color: var(--vxe-ui-font-primary-color);
@@ -83,10 +83,10 @@
   cursor: pointer;
 }
 .vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:hover {
-  transform: scale(1.2);
+  transform: translate(-50%, -50%) scale(1.2);
 }
 .vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active {
-  transform: scale(1.1);
+  transform: translate(-50%, -50%) scale(1.1);
 }
 .vxe-slider.is--readonly .vxe-slider--bar-wrapper,
 .vxe-slider.is--readonly .vxe-slider--inner {
@@ -123,21 +123,14 @@
 
 .vxe-slider--bar-btn {
   position: absolute;
-  width: 0.9em;
-  height: 0.9em;
-  top: -0.3em;
+  width: 1.2em;
+  height: 1.2em;
+  top: 50%;
+  transform: translate(-50%, -50%);
   border-radius: 50%;
-  border: 0.15em solid var(--vxe-ui-font-primary-color);
+  border: 2px solid var(--vxe-ui-font-primary-color);
   background-color: #fff;
   cursor: pointer;
   z-index: 1;
   transition: transform 0.1s ease-in-out;
-}
-
-.vxe-slider--start-btn {
-  left: -0.45em;
-}
-
-.vxe-slider--end-btn {
-  right: -0.45em;
 }

package/es/slider/style.min.css

@@ -1 +1 @@
-.vxe-slider{position:relative;display:block;padding:.5em 1em}.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:scale(1.2)}.vxe-slider:not(.is--disabled) .vxe-slider--bar-btn:active{transform: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:.9em;height:.9em;top:-.3em;border-radius:50%;border:.15em solid var(--vxe-ui-font-primary-color);background-color:#fff;cursor:pointer;z-index:1;transition:transform .1s ease-in-out}.vxe-slider--start-btn{left:-.45em}.vxe-slider--end-btn{right:-.45em}
+.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}

package/es/space/index.js

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

package/es/space/src/space.js

@@ -0,0 +1,143 @@
+import { ref, h, computed, reactive } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, useSize } from '../../ui';
+import { getPropClass, toCssUnit } from '../../ui/src/dom';
+import { eqEmptyValue } from '../../ui/src/utils';
+export default defineVxeComponent({
+    name: 'VxeSpace',
+    props: {
+        size: {
+            type: String,
+            default: () => getConfig().space.size || getConfig().size
+        },
+        wrap: {
+            type: Boolean,
+            default: () => getConfig().space.wrap
+        },
+        gap: {
+            type: [Number, String, Array, Object],
+            default: () => getConfig().space.gap
+        },
+        vertical: {
+            type: Boolean,
+            default: () => getConfig().space.vertical
+        },
+        className: {
+            type: String,
+            default: () => getConfig().space.className
+        },
+        itemClassName: {
+            type: String,
+            default: () => getConfig().space.itemClassName
+        },
+        separator: {
+            type: String,
+            default: () => getConfig().space.separator
+        },
+        align: {
+            type: String,
+            default: () => getConfig().space.align
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { emit, slots } = context;
+        const xID = XEUtils.uniqueId();
+        const { computeSize } = useSize(props);
+        const refElem = ref();
+        const reactData = reactive({
+            activeValue: null
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeWrapperStyle = computed(() => {
+            const { align, gap } = props;
+            const stys = {};
+            let rowGap = '';
+            let columGap = '';
+            if (XEUtils.isNumber(gap) || XEUtils.isString(gap)) {
+                rowGap = gap;
+                columGap = gap;
+            }
+            else if (gap) {
+                if (XEUtils.isArray(gap)) {
+                    rowGap = gap[0];
+                    columGap = gap[1];
+                }
+                else {
+                    rowGap = gap.rowGap || '';
+                    columGap = gap.columGap || '';
+                }
+            }
+            if (align) {
+                stys['align-items'] = align;
+            }
+            if (!eqEmptyValue(rowGap)) {
+                stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap);
+            }
+            if (!eqEmptyValue(columGap)) {
+                stys['--vxe-ui-space-current-column-gap'] = toCssUnit(columGap);
+            }
+            return stys;
+        });
+        const computeMaps = {};
+        const $xeSpace = {
+            xID,
+            props,
+            context,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $space: $xeSpace }, params));
+        };
+        const spaceMethods = {
+            dispatchEvent
+        };
+        const spacePrivateMethods = {};
+        Object.assign($xeSpace, spaceMethods, spacePrivateMethods);
+        const renderItems = () => {
+            const { separator, itemClassName } = props;
+            const itemVNs = [];
+            const defaultSlot = slots.default;
+            const separatorSlot = slots.separator;
+            if (defaultSlot) {
+                XEUtils.each(defaultSlot({}), (itemVN, index, items) => {
+                    itemVNs.push(h('div', {
+                        key: 'i' + index,
+                        class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+                    }, [itemVN]));
+                    if ((separator || separatorSlot) && index < items.length - 1) {
+                        itemVNs.push(h('div', {
+                            key: 's' + index,
+                            class: 'vxe-space--separator'
+                        }, separatorSlot ? separatorSlot({}) : ('' + separator)));
+                    }
+                });
+            }
+            return itemVNs;
+        };
+        const renderVN = () => {
+            const { vertical, wrap, className } = props;
+            const wrapperStyle = computeWrapperStyle.value;
+            const vSize = computeSize.value;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-space', getPropClass(className, {}), {
+                        [`size--${vSize}`]: vSize,
+                        'is--wrap': wrap,
+                        'is--vertical': vertical
+                    }],
+                style: wrapperStyle
+            }, renderItems());
+        };
+        $xeSpace.renderVN = renderVN;
+        return $xeSpace;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/space/style.css

@@ -0,0 +1,37 @@
+.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;
+}

package/es/space/style.min.css

@@ -0,0 +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}