vxe-pc-ui 3.17.19 → 3.17.21

package/es/slider/src/slider.js

@@ -1,6 +1,17 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { getConfig, createEvent, renderEmptyElement } from '../../ui';
+function createInternalData() {
+    return {
+        // _isUp: false,
+        currValue: 0,
+        startValue: 0,
+        endValue: 0
+    };
+}
+function createReactData() {
+    return {};
+}
 export default {
     name: 'VxeSlider',
     model: {
@@ -9,6 +20,8 @@ export default {
     },
     props: {
         value: [String, Number, Array],
+        startValue: [String, Number],
+        endValue: [String, Number],
         vertical: Boolean,
         max: {
             type: [String, Number],
@@ -37,6 +50,10 @@ export default {
         disabled: {
             type: Boolean,
             default: null
+        },
+        immediate: {
+            type: Boolean,
+            default: () => getConfig().slider.immediate
         }
     },
     inject: {
@@ -50,14 +67,9 @@ export default {
     },
     data() {
         const xID = XEUtils.uniqueId();
-        const reactData = {
-            startValue: 0,
-            endValue: 0
-        };
-        return {
-            xID,
-            reactData
-        };
+        const reactData = createReactData();
+        return Object.assign(Object.assign({}, {}), { xID,
+            reactData });
     },
     computed: Object.assign(Object.assign({}, {}), { computeFormReadonly() {
             const $xeSlider = this;
@@ -94,6 +106,12 @@ export default {
             const $xeSlider = this;
             const props = $xeSlider;
             return XEUtils.toNumber(props.min || 0);
+        },
+        computeMVal() {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            const { range, startValue, endValue } = props;
+            return range ? `${startValue || ''}${endValue || ''}` : '';
         } }),
     methods: {
         //
@@ -105,7 +123,9 @@ export default {
         },
         emitModel(value) {
             const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
             const { _events } = $xeSlider;
+            internalData._isUp = true;
             if (_events && _events.modelValue) {
                 $xeSlider.$emit('modelValue', value);
             }
@@ -113,128 +133,219 @@ export default {
                 $xeSlider.$emit('model-value', value);
             }
         },
-        getStartPercent(startValue) {
+        getBarPercent(currValue) {
             const $xeSlider = this;
-            const props = $xeSlider;
-            const { range } = props;
             const maxNum = $xeSlider.computeMaxNum;
             const minNum = $xeSlider.computeMinNum;
-            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;
         },
-        getEndPercent(startValue, endValue) {
+        parseFields(startValue, endValue) {
             const $xeSlider = this;
-            const props = $xeSlider;
-            const { range } = props;
-            const maxNum = $xeSlider.computeMaxNum;
-            const minNum = $xeSlider.computeMinNum;
-            return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100);
+            const internalData = $xeSlider.internalData;
+            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));
+        },
+        parseArrs(arrVals) {
+            const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
+            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));
+        },
+        parseNum(val) {
+            const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
+            const currValue = XEUtils.floor(XEUtils.toNumber(val || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = 0;
+            internalData.endValue = currValue;
         },
-        updateModel() {
+        updateModelValue(umType) {
             const $xeSlider = this;
             const props = $xeSlider;
-            const reactData = $xeSlider.reactData;
-            const { value } = props;
-            if (XEUtils.isArray(value)) {
-                const [sVal, eVal] = XEUtils.clone(value, true).sort();
-                reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+            const { range, value: modelValue, startValue, endValue } = props;
+            if (!umType) {
+                if (range) {
+                    if (XEUtils.eqNull(modelValue)) {
+                        if (startValue || endValue) {
+                            $xeSlider.parseFields(startValue, endValue);
+                        }
+                    }
+                    else {
+                        if (XEUtils.isArray(modelValue)) {
+                            $xeSlider.parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                        }
+                        else {
+                            $xeSlider.parseNum(modelValue);
+                        }
+                    }
+                }
+                else {
+                    $xeSlider.parseNum(modelValue);
+                }
+            }
+            else if (range && umType === 2) {
+                $xeSlider.parseFields(startValue, endValue);
             }
             else {
-                reactData.startValue = 0;
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(value || 0));
+                if (XEUtils.isArray(modelValue)) {
+                    $xeSlider.parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                }
+                else {
+                    $xeSlider.parseNum(modelValue);
+                }
             }
+            $xeSlider.updateBarStyle();
+            $xeSlider.updateTrackStyle();
         },
         updateBarStyle() {
             const $xeSlider = this;
-            const reactData = $xeSlider.reactData;
-            const { startValue, endValue } = reactData;
-            const trackElem = $xeSlider.$refs.refTrackElem;
+            const props = $xeSlider;
+            const internalData = $xeSlider.internalData;
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
             const startBtnElem = $xeSlider.$refs.refStartBtnElem;
             const endBtnElem = $xeSlider.$refs.refEndBtnElem;
-            let startPercent = 0;
-            let endPercent = 0;
-            if (startValue > endValue) {
-                startPercent = $xeSlider.getStartPercent(endValue);
-                endPercent = $xeSlider.getEndPercent(endValue, startValue);
+            if (range) {
+                const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+                if (startBtnElem) {
+                    startBtnElem.style.left = $xeSlider.getBarPercent(sVal) + '%';
+                }
+                if (endBtnElem) {
+                    endBtnElem.style.left = $xeSlider.getBarPercent(eVal) + '%';
+                }
             }
             else {
-                startPercent = $xeSlider.getStartPercent(startValue);
-                endPercent = $xeSlider.getEndPercent(startValue, endValue);
+                if (endBtnElem) {
+                    endBtnElem.style.left = $xeSlider.getBarPercent(currValue) + '%';
+                }
             }
+        },
+        updateTrackStyle() {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            const internalData = $xeSlider.internalData;
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
+            const trackElem = $xeSlider.$refs.refTrackElem;
             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 = $xeSlider.getBarPercent(sVal) + '%';
+                    trackElem.style.width = $xeSlider.getBarPercent(eVal - sVal) + '%';
+                }
+                else {
+                    trackElem.style.left = '0';
+                    trackElem.style.width = $xeSlider.getBarPercent(currValue) + '%';
+                }
             }
         },
         changeEvent(evnt) {
             const $xeSlider = this;
             const props = $xeSlider;
-            const reactData = $xeSlider.reactData;
+            const internalData = $xeSlider.internalData;
             const $xeForm = $xeSlider.$xeForm;
             const formItemInfo = $xeSlider.formItemInfo;
             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;
             $xeSlider.emitModel(value);
+            if (range) {
+                $xeSlider.$emit('update:startValue', vals[0] || 0);
+                $xeSlider.$emit('update:endValue', vals[1] || 0);
+            }
             $xeSlider.dispatchEvent('change', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         },
-        handleMousedownEvent(evnt, isEnd) {
+        getValueByLeft(offsetLeft, barWidth) {
             const $xeSlider = this;
-            const reactData = $xeSlider.reactData;
-            const formReadonly = $xeSlider.computeFormReadonly;
-            const isDisabled = $xeSlider.computeIsDisabled;
             const maxNum = $xeSlider.computeMaxNum;
             const minNum = $xeSlider.computeMinNum;
+            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);
+        },
+        handleBtnMousedownEvent(evnt) {
+            const $xeSlider = this;
+            const props = $xeSlider;
+            const internalData = $xeSlider.internalData;
+            const { range, immediate } = props;
+            const btnElem = evnt.currentTarget;
+            const formReadonly = $xeSlider.computeFormReadonly;
+            const isDisabled = $xeSlider.computeIsDisabled;
             if (!(formReadonly || isDisabled)) {
                 evnt.preventDefault();
                 document.onmousemove = evnt => {
                     evnt.preventDefault();
+                    const el = $xeSlider.$refs.refElem;
                     const barElem = $xeSlider.$refs.refBarElem;
-                    if (barElem) {
+                    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 = $xeSlider.getValueByLeft(offsetLeft, barWidth);
+                        if (range) {
+                            if (btnType === '1') {
+                                internalData.startValue = currValue;
+                            }
+                            else {
+                                internalData.endValue = currValue;
+                            }
                         }
-                        $xeSlider.dispatchEvent('track-dragover', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                        internalData.currValue = currValue;
+                        btnElem.style.left = $xeSlider.getBarPercent(currValue) + '%';
+                        $xeSlider.dispatchEvent('track-dragover', {
+                            currentValue: internalData.currValue,
+                            startValue: internalData.startValue,
+                            endValue: internalData.endValue
+                        }, evnt);
+                    }
+                    if (immediate) {
+                        $xeSlider.changeEvent(evnt);
                     }
-                    $xeSlider.updateBarStyle();
+                    $xeSlider.updateTrackStyle();
                 };
                 document.onmouseup = (evnt) => {
                     document.onmousemove = null;
                     document.onmouseup = null;
-                    $xeSlider.dispatchEvent('track-dragend', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                    $xeSlider.dispatchEvent('track-dragend', {
+                        currentValue: internalData.currValue,
+                        startValue: internalData.startValue,
+                        endValue: internalData.endValue
+                    }, evnt);
                     $xeSlider.changeEvent(evnt);
-                    $xeSlider.updateBarStyle();
+                    $xeSlider.updateTrackStyle();
                 };
-                $xeSlider.dispatchEvent('track-dragstart', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                $xeSlider.dispatchEvent('track-dragstart', {
+                    currentValue: internalData.currValue,
+                    startValue: internalData.startValue,
+                    endValue: internalData.endValue
+                }, evnt);
             }
         },
-        handleStartMousedownEvent(evnt) {
-            const $xeSlider = this;
-            const endBtnElem = $xeSlider.$refs.refEndBtnElem;
-            const startBtnElem = evnt.currentTarget;
-            $xeSlider.handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
-        },
-        handleEndMousedownEvent(evnt) {
-            const $xeSlider = this;
-            const startBtnElem = $xeSlider.$refs.refStartBtnElem;
-            const endBtnElem = evnt.currentTarget;
-            $xeSlider.handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
-        },
         //
         // Render
         //
@@ -269,18 +380,24 @@ export default {
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: 'refStartBtnElem',
-                            class: 'vxe-slider--bar-btn vxe-slider--start-btn',
+                            class: 'vxe-slider--bar-btn',
+                            attrs: {
+                                'data-type': '1'
+                            },
                             on: {
-                                mousedown: $xeSlider.handleStartMousedownEvent
+                                mousedown: $xeSlider.handleBtnMousedownEvent
                             }
                         }),
                     formReadonly
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: 'refEndBtnElem',
-                            class: 'vxe-slider--bar-btn vxe-slider--end-btn',
+                            class: 'vxe-slider--bar-btn',
+                            attrs: {
+                                'data-type': '2'
+                            },
                             on: {
-                                mousedown: $xeSlider.handleEndMousedownEvent
+                                mousedown: $xeSlider.handleBtnMousedownEvent
                             }
                         })
                 ])
@@ -290,16 +407,37 @@ export default {
     watch: {
         value() {
             const $xeSlider = this;
-            $xeSlider.updateModel();
+            const internalData = $xeSlider.internalData;
+            if (!internalData._isUp) {
+                $xeSlider.updateModelValue(1);
+            }
+            internalData._isUp = false;
+        },
+        computeMVal() {
+            const $xeSlider = this;
+            const internalData = $xeSlider.internalData;
+            if (!internalData._isUp) {
+                $xeSlider.updateModelValue(2);
+            }
+            internalData._isUp = false;
         }
     },
     created() {
         const $xeSlider = this;
-        $xeSlider.updateModel();
+        $xeSlider.internalData = createInternalData();
+        $xeSlider.updateModelValue();
     },
     mounted() {
         const $xeSlider = this;
         $xeSlider.updateBarStyle();
+        $xeSlider.updateTrackStyle();
+    },
+    beforeDestroy() {
+        const $xeSlider = this;
+        const reactData = $xeSlider.reactData;
+        const internalData = $xeSlider.internalData;
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     render(h) {
         return this.renderVN(h);

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 { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, globalMixins } from '../../ui';
+import { getPropClass, toCssUnit } from '../../ui/src/dom';
+import { eqEmptyValue } from '../../ui/src/utils';
+export default {
+    name: 'VxeSpace',
+    mixins: [
+        globalMixins.sizeMixin,
+        globalMixins.permissionMixin
+    ],
+    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
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            activeValue: null
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeWrapperStyle() {
+            const $xeSpace = this;
+            const props = $xeSpace;
+            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;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeSpace = this;
+            $xeSpace.$emit(type, createEvent(evnt, { $space: $xeSpace }, params));
+        },
+        //
+        // Render
+        //
+        renderItems(h) {
+            const $xeSpace = this;
+            const props = $xeSpace;
+            const slots = $xeSpace.$scopedSlots;
+            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;
+        },
+        renderVN(h) {
+            const $xeSpace = this;
+            const props = $xeSpace;
+            const { vertical, wrap, className } = props;
+            const wrapperStyle = $xeSpace.computeWrapperStyle;
+            const vSize = $xeSpace.computeSize;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-space', getPropClass(className, {}), {
+                        [`size--${vSize}`]: vSize,
+                        'is--wrap': wrap,
+                        'is--vertical': vertical
+                    }],
+                style: wrapperStyle
+            }, $xeSpace.renderItems(h));
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};