vxe-pc-ui 3.17.20 → 3.17.21

package/lib/slider/src/slider.js

@@ -20,15 +20,15 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function createInternalData() {
   return {
-    // _isUp: false
-  };
-}
-function createReactData() {
-  return {
+    // _isUp: false,
+    currValue: 0,
     startValue: 0,
     endValue: 0
   };
 }
+function createReactData() {
+  return {};
+}
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeSlider',
   model: {
@@ -37,6 +37,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   },
   props: {
     value: [String, Number, Array],
+    startValue: [String, Number],
+    endValue: [String, Number],
     vertical: Boolean,
     max: {
       type: [String, Number],
@@ -136,6 +138,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeSlider = this;
       var props = $xeSlider;
       return _xeUtils.default.toNumber(props.min || 0);
+    },
+    computeMVal: function computeMVal() {
+      var $xeSlider = this;
+      var props = $xeSlider;
+      var range = props.range,
+        startValue = props.startValue,
+        endValue = props.endValue;
+      return range ? "".concat(startValue || '').concat(endValue || '') : '';
     }
   }),
   methods: {
@@ -159,78 +169,159 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeSlider.$emit('model-value', value);
       }
     },
-    getStartPercent: function getStartPercent(startValue) {
+    getBarPercent: function getBarPercent(currValue) {
       var $xeSlider = this;
-      var props = $xeSlider;
-      var range = props.range;
       var maxNum = $xeSlider.computeMaxNum;
       var minNum = $xeSlider.computeMinNum;
-      return range ? _xeUtils.default.floor((startValue - minNum) / _xeUtils.default.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: function getEndPercent(startValue, endValue) {
+    parseFields: function parseFields(startValue, endValue) {
       var $xeSlider = this;
-      var props = $xeSlider;
-      var range = props.range;
-      var maxNum = $xeSlider.computeMaxNum;
-      var minNum = $xeSlider.computeMinNum;
-      return _xeUtils.default.floor((endValue - (range ? startValue : 0) - minNum) / _xeUtils.default.toNumber(maxNum - minNum) * 100);
+      var internalData = $xeSlider.internalData;
+      var _XEUtils$orderBy = _xeUtils.default.orderBy([_xeUtils.default.toNumber(startValue), _xeUtils.default.toNumber(endValue)]),
+        _XEUtils$orderBy2 = _slicedToArray(_XEUtils$orderBy, 2),
+        sVal = _XEUtils$orderBy2[0],
+        eVal = _XEUtils$orderBy2[1];
+      var currValue = _xeUtils.default.floor(_xeUtils.default.toNumber(sVal || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = currValue;
+      internalData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(eVal || 0));
     },
-    updateModel: function updateModel() {
+    parseArrs: function parseArrs(arrVals) {
+      var $xeSlider = this;
+      var internalData = $xeSlider.internalData;
+      var _XEUtils$orderBy3 = _xeUtils.default.orderBy(arrVals),
+        _XEUtils$orderBy4 = _slicedToArray(_XEUtils$orderBy3, 2),
+        sVal = _XEUtils$orderBy4[0],
+        eVal = _XEUtils$orderBy4[1];
+      var currValue = _xeUtils.default.floor(_xeUtils.default.toNumber(sVal || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = currValue;
+      internalData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(eVal || 0));
+    },
+    parseNum: function parseNum(val) {
+      var $xeSlider = this;
+      var internalData = $xeSlider.internalData;
+      var currValue = _xeUtils.default.floor(_xeUtils.default.toNumber(val || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = 0;
+      internalData.endValue = currValue;
+    },
+    updateModelValue: function updateModelValue(umType) {
       var $xeSlider = this;
       var props = $xeSlider;
-      var reactData = $xeSlider.reactData;
-      var value = props.value;
-      if (_xeUtils.default.isArray(value)) {
-        var _XEUtils$clone$sort = _xeUtils.default.clone(value, true).sort(),
-          _XEUtils$clone$sort2 = _slicedToArray(_XEUtils$clone$sort, 2),
-          sVal = _XEUtils$clone$sort2[0],
-          eVal = _XEUtils$clone$sort2[1];
-        reactData.startValue = _xeUtils.default.floor(_xeUtils.default.toNumber(sVal || 0));
-        reactData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(eVal || 0));
+      var range = props.range,
+        modelValue = props.value,
+        startValue = props.startValue,
+        endValue = props.endValue;
+      if (!umType) {
+        if (range) {
+          if (_xeUtils.default.eqNull(modelValue)) {
+            if (startValue || endValue) {
+              $xeSlider.parseFields(startValue, endValue);
+            }
+          } else {
+            if (_xeUtils.default.isArray(modelValue)) {
+              $xeSlider.parseArrs(modelValue.map(function (num) {
+                return _xeUtils.default.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.default.floor(_xeUtils.default.toNumber(value || 0));
+        if (_xeUtils.default.isArray(modelValue)) {
+          $xeSlider.parseArrs(modelValue.map(function (num) {
+            return _xeUtils.default.toNumber(num);
+          }));
+        } else {
+          $xeSlider.parseNum(modelValue);
+        }
       }
+      $xeSlider.updateBarStyle();
+      $xeSlider.updateTrackStyle();
     },
     updateBarStyle: function updateBarStyle() {
       var $xeSlider = this;
-      var reactData = $xeSlider.reactData;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
-      var trackElem = $xeSlider.$refs.refTrackElem;
+      var props = $xeSlider;
+      var internalData = $xeSlider.internalData;
+      var range = props.range;
+      var currValue = internalData.currValue,
+        startValue = internalData.startValue,
+        endValue = internalData.endValue;
       var startBtnElem = $xeSlider.$refs.refStartBtnElem;
       var endBtnElem = $xeSlider.$refs.refEndBtnElem;
-      var startPercent = 0;
-      var endPercent = 0;
-      if (startValue > endValue) {
-        startPercent = $xeSlider.getStartPercent(endValue);
-        endPercent = $xeSlider.getEndPercent(endValue, startValue);
+      if (range) {
+        var _XEUtils$orderBy5 = _xeUtils.default.orderBy([startValue, endValue]),
+          _XEUtils$orderBy6 = _slicedToArray(_XEUtils$orderBy5, 2),
+          sVal = _XEUtils$orderBy6[0],
+          eVal = _XEUtils$orderBy6[1];
+        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: function updateTrackStyle() {
+      var $xeSlider = this;
+      var props = $xeSlider;
+      var internalData = $xeSlider.internalData;
+      var range = props.range;
+      var currValue = internalData.currValue,
+        startValue = internalData.startValue,
+        endValue = internalData.endValue;
+      var trackElem = $xeSlider.$refs.refTrackElem;
       if (trackElem) {
-        trackElem.style.left = "".concat(startPercent, "%");
-        trackElem.style.width = "".concat(endPercent, "%");
-      }
-      if (startBtnElem) {
-        startBtnElem.style.left = "".concat(startPercent, "%");
-      }
-      if (endBtnElem) {
-        endBtnElem.style.left = "".concat(_xeUtils.default.floor(startPercent + endPercent), "%");
+        if (range) {
+          var _XEUtils$orderBy7 = _xeUtils.default.orderBy([startValue, endValue]),
+            _XEUtils$orderBy8 = _slicedToArray(_XEUtils$orderBy7, 2),
+            sVal = _XEUtils$orderBy8[0],
+            eVal = _XEUtils$orderBy8[1];
+          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: function changeEvent(evnt) {
       var $xeSlider = this;
       var props = $xeSlider;
-      var reactData = $xeSlider.reactData;
+      var internalData = $xeSlider.internalData;
       var $xeForm = $xeSlider.$xeForm;
       var formItemInfo = $xeSlider.formItemInfo;
       var range = props.range;
-      var startValue = reactData.startValue,
-        endValue = reactData.endValue;
-      var value = range ? [startValue, endValue].sort() : endValue;
+      var currValue = internalData.currValue,
+        startValue = internalData.startValue,
+        endValue = internalData.endValue;
+      var vals = range ? _xeUtils.default.orderBy([startValue, endValue]) : [];
+      var 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: value
       }, evnt);
@@ -239,66 +330,77 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
       }
     },
-    handleMousedownEvent: function handleMousedownEvent(evnt, isEnd) {
+    getValueByLeft: function getValueByLeft(offsetLeft, barWidth) {
+      var $xeSlider = this;
+      var maxNum = $xeSlider.computeMaxNum;
+      var minNum = $xeSlider.computeMinNum;
+      if (barWidth === 0) {
+        return minNum;
+      }
+      var clamped = Math.max(0, Math.min(barWidth, offsetLeft));
+      var ratio = clamped / barWidth;
+      var raw = minNum + ratio * (maxNum - minNum);
+      return Math.floor(raw);
+    },
+    handleBtnMousedownEvent: function handleBtnMousedownEvent(evnt) {
       var $xeSlider = this;
       var props = $xeSlider;
-      var reactData = $xeSlider.reactData;
-      var immediate = props.immediate;
+      var internalData = $xeSlider.internalData;
+      var range = props.range,
+        immediate = props.immediate;
+      var btnElem = evnt.currentTarget;
       var formReadonly = $xeSlider.computeFormReadonly;
       var isDisabled = $xeSlider.computeIsDisabled;
-      var maxNum = $xeSlider.computeMaxNum;
-      var minNum = $xeSlider.computeMinNum;
       if (!(formReadonly || isDisabled)) {
         evnt.preventDefault();
         document.onmousemove = function (evnt) {
           evnt.preventDefault();
+          var el = $xeSlider.$refs.refElem;
           var barElem = $xeSlider.$refs.refBarElem;
-          if (barElem) {
+          if (el && barElem) {
+            var btnType = btnElem.getAttribute('data-type');
             var barRect = barElem.getBoundingClientRect();
-            var trackWidth = (evnt.clientX - barRect.left) / barRect.width;
-            if (isEnd) {
-              reactData.endValue = _xeUtils.default.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
-            } else {
-              reactData.startValue = _xeUtils.default.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))));
+            var barWidth = barRect.width;
+            var offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - barRect.left));
+            var currValue = $xeSlider.getValueByLeft(offsetLeft, barWidth);
+            if (range) {
+              if (btnType === '1') {
+                internalData.startValue = currValue;
+              } else {
+                internalData.endValue = currValue;
+              }
             }
+            internalData.currValue = currValue;
+            btnElem.style.left = $xeSlider.getBarPercent(currValue) + '%';
             $xeSlider.dispatchEvent('track-dragover', {
-              startValue: reactData.startValue,
-              endValue: reactData.endValue
+              currentValue: internalData.currValue,
+              startValue: internalData.startValue,
+              endValue: internalData.endValue
             }, evnt);
           }
           if (immediate) {
             $xeSlider.changeEvent(evnt);
           }
-          $xeSlider.updateBarStyle();
+          $xeSlider.updateTrackStyle();
         };
         document.onmouseup = function (evnt) {
           document.onmousemove = null;
           document.onmouseup = null;
           $xeSlider.dispatchEvent('track-dragend', {
-            startValue: reactData.startValue,
-            endValue: reactData.endValue
+            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
+          currentValue: internalData.currValue,
+          startValue: internalData.startValue,
+          endValue: internalData.endValue
         }, evnt);
       }
     },
-    handleStartMousedownEvent: function handleStartMousedownEvent(evnt) {
-      var $xeSlider = this;
-      var endBtnElem = $xeSlider.$refs.refEndBtnElem;
-      var startBtnElem = evnt.currentTarget;
-      $xeSlider.handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
-    },
-    handleEndMousedownEvent: function handleEndMousedownEvent(evnt) {
-      var $xeSlider = this;
-      var startBtnElem = $xeSlider.$refs.refStartBtnElem;
-      var endBtnElem = evnt.currentTarget;
-      $xeSlider.handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
-    },
     //
     // Render
     //
@@ -323,15 +425,21 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         class: 'vxe-slider--bar-track'
       }), formReadonly || !range ? (0, _ui.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 ? (0, _ui.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
         }
       })])]);
     }
@@ -341,7 +449,15 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeSlider = this;
       var internalData = $xeSlider.internalData;
       if (!internalData._isUp) {
-        $xeSlider.updateModel();
+        $xeSlider.updateModelValue(1);
+      }
+      internalData._isUp = false;
+    },
+    computeMVal: function computeMVal() {
+      var $xeSlider = this;
+      var internalData = $xeSlider.internalData;
+      if (!internalData._isUp) {
+        $xeSlider.updateModelValue(2);
       }
       internalData._isUp = false;
     }
@@ -349,11 +465,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
   created: function created() {
     var $xeSlider = this;
     $xeSlider.internalData = createInternalData();
-    $xeSlider.updateModel();
+    $xeSlider.updateModelValue();
   },
   mounted: function mounted() {
     var $xeSlider = this;
     $xeSlider.updateBarStyle();
+    $xeSlider.updateTrackStyle();
   },
   beforeDestroy: function beforeDestroy() {
     var $xeSlider = this;

package/lib/slider/src/slider.min.js

@@ -1 +1 @@
-function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,r){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0===r)return("string"===t?String:Number)(e);r=r.call(e,t||"default");if("object"!=_typeof(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var r;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(r="Object"===(r={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=Array(t);r<t;r++)n[r]=e[r];return n}function _iterableToArrayLimit(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,a,i,o,l=[],u=!0,s=!1;try{if(i=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;u=!1}else for(;!(u=(n=i.call(r)).done)&&(l.push(n.value),l.length!==t);u=!0);}catch(e){s=!0,a=e}finally{try{if(!u&&null!=r.return&&(o=r.return(),Object(o)!==o))return}finally{if(s)throw a}}return l}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function createInternalData(){return{}}function createReactData(){return{startValue:0,endValue:0}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSlider",model:{prop:"value",event:"modelValue"},props:{value:[String,Number,Array],vertical:Boolean,max:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.max}},min:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.min}},step:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.step}},size:{type:String,default:function(){return(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size}},range:{type:Boolean,default:function(){return(0,_ui.getConfig)().slider.range}},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},immediate:{type:Boolean,default:function(){return(0,_ui.getConfig)().slider.immediate}}},inject:{$xeForm:{default:null},formItemInfo:{from:"xeFormItemInfo",default:null}},data:function(){var e=_xeUtils.default.uniqueId(),t=createReactData();return Object.assign(Object.assign({},{}),{xID:e,reactData:t})},computed:Object.assign(Object.assign({},{}),{computeFormReadonly:function(){var e=this.$xeForm,t=this.readonly;return null===t?!!e&&e.readonly:t},computeIsDisabled:function(){var e=this.$xeForm,t=this.disabled;return null===t?!!e&&e.disabled:t},computeMaxNum:function(){return _xeUtils.default.toNumber(this.max||0)},computeMinNum:function(){return _xeUtils.default.toNumber(this.min||0)}}),methods:{dispatchEvent:function(e,t,r){this.$emit(e,(0,_ui.createEvent)(r,{$watermark:this},t))},emitModel:function(e){var t=this.internalData,r=this._events;t._isUp=!0,r&&r.modelValue?this.$emit("modelValue",e):this.$emit("model-value",e)},getStartPercent:function(e){var t=this.range,r=this.computeMaxNum,n=this.computeMinNum;return t?_xeUtils.default.floor((e-n)/_xeUtils.default.toNumber(r-n)*100):0},getEndPercent:function(e,t){var r=this.range,n=this.computeMaxNum,a=this.computeMinNum;return _xeUtils.default.floor((t-(r?e:0)-a)/_xeUtils.default.toNumber(n-a)*100)},updateModel:function(){var e,t,r=this.reactData,n=this.value;_xeUtils.default.isArray(n)?(e=(t=_slicedToArray(_xeUtils.default.clone(n,!0).sort(),2))[0],t=t[1],r.startValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0)),r.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))):(r.startValue=0,r.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(n||0)))},updateBarStyle:function(){var e=this,t=e.reactData,r=t.startValue,t=t.endValue,n=e.$refs.refTrackElem,a=e.$refs.refStartBtnElem,i=e.$refs.refEndBtnElem,o=0,l=0,l=t<r?(o=e.getStartPercent(t),e.getEndPercent(t,r)):(o=e.getStartPercent(r),e.getEndPercent(r,t));n&&(n.style.left="".concat(o,"%"),n.style.width="".concat(l,"%")),a&&(a.style.left="".concat(o,"%")),i&&(i.style.left="".concat(_xeUtils.default.floor(o+l),"%"))},changeEvent:function(e){var t=this,r=t.reactData,n=t.$xeForm,a=t.formItemInfo,i=t.range,o=r.startValue,r=r.endValue,i=i?[o,r].sort():r;t.emitModel(i),t.dispatchEvent("change",{value:i},e),n&&a&&n.triggerItemEvent(e,a.itemConfig.field,i)},handleMousedownEvent:function(e,r){var n=this,a=n.reactData,i=n.immediate,o=n.computeMaxNum,l=n.computeMinNum;n.computeFormReadonly||n.computeIsDisabled||(e.preventDefault(),document.onmousemove=function(e){e.preventDefault();var t=n.$refs.refBarElem;t&&(t=t.getBoundingClientRect(),t=(e.clientX-t.left)/t.width,r?a.endValue=_xeUtils.default.floor(Math.max(l,Math.min(o,t*(o-l)+l))):a.startValue=_xeUtils.default.floor(Math.max(l,Math.min(o,t*(o-l)))),n.dispatchEvent("track-dragover",{startValue:a.startValue,endValue:a.endValue},e)),i&&n.changeEvent(e),n.updateBarStyle()},document.onmouseup=function(e){document.onmousemove=null,document.onmouseup=null,n.dispatchEvent("track-dragend",{startValue:a.startValue,endValue:a.endValue},e),n.changeEvent(e),n.updateBarStyle()},n.dispatchEvent("track-dragstart",{startValue:a.startValue,endValue:a.endValue},e))},handleStartMousedownEvent:function(e){var t=this.$refs.refEndBtnElem,r=e.currentTarget;this.handleMousedownEvent(e,!!t&&t.offsetLeft<r.offsetLeft)},handleEndMousedownEvent:function(e){var t=this.$refs.refStartBtnElem,r=e.currentTarget;this.handleMousedownEvent(e,!t||r.offsetLeft>t.offsetLeft)},renderVN:function(e){var t=this,r=t.vertical,n=t.range,a=t.computeSize,i=t.computeFormReadonly,o=t.computeIsDisabled;return e("div",{ref:"refElem",class:["vxe-slider",_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(a),a),"is--vertical",r),"is--readonly",i),"is--disabled",o)]},[e("div",{class:"vxe-slider--inner"},[e("div",{ref:"refBarElem",class:"vxe-slider--bar-wrapper"}),e("div",{ref:"refTrackElem",class:"vxe-slider--bar-track"}),i||!n?(0,_ui.renderEmptyElement)(t):e("div",{ref:"refStartBtnElem",class:"vxe-slider--bar-btn vxe-slider--start-btn",on:{mousedown:t.handleStartMousedownEvent}}),i?(0,_ui.renderEmptyElement)(t):e("div",{ref:"refEndBtnElem",class:"vxe-slider--bar-btn vxe-slider--end-btn",on:{mousedown:t.handleEndMousedownEvent}})])])}},watch:{value:function(){var e=this.internalData;e._isUp||this.updateModel(),e._isUp=!1}},created:function(){this.internalData=createInternalData(),this.updateModel()},mounted:function(){this.updateBarStyle()},beforeDestroy:function(){var e=this.reactData,t=this.internalData;_xeUtils.default.assign(e,createReactData()),_xeUtils.default.assign(t,createInternalData())},render:function(e){return this.renderVN(e)}});
+function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _defineProperty(e,t,r){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0===r)return("string"===t?String:Number)(e);r=r.call(e,t||"default");if("object"!=_typeof(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){var r;if(e)return"string"==typeof e?_arrayLikeToArray(e,t):"Map"===(r="Object"===(r={}.toString.call(e).slice(8,-1))&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?_arrayLikeToArray(e,t):void 0}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,a=Array(t);r<t;r++)a[r]=e[r];return a}function _iterableToArrayLimit(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var a,n,u,l,i=[],o=!0,s=!1;try{if(u=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;o=!1}else for(;!(o=(a=u.call(r)).done)&&(i.push(a.value),i.length!==t);o=!0);}catch(e){s=!0,n=e}finally{try{if(!o&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(s)throw n}}return i}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function createInternalData(){return{currValue:0,startValue:0,endValue:0}}function createReactData(){return{}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSlider",model:{prop:"value",event:"modelValue"},props:{value:[String,Number,Array],startValue:[String,Number],endValue:[String,Number],vertical:Boolean,max:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.max}},min:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.min}},step:{type:[String,Number],default:function(){return(0,_ui.getConfig)().slider.step}},size:{type:String,default:function(){return(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size}},range:{type:Boolean,default:function(){return(0,_ui.getConfig)().slider.range}},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},immediate:{type:Boolean,default:function(){return(0,_ui.getConfig)().slider.immediate}}},inject:{$xeForm:{default:null},formItemInfo:{from:"xeFormItemInfo",default:null}},data:function(){var e=_xeUtils.default.uniqueId(),t=createReactData();return Object.assign(Object.assign({},{}),{xID:e,reactData:t})},computed:Object.assign(Object.assign({},{}),{computeFormReadonly:function(){var e=this.$xeForm,t=this.readonly;return null===t?!!e&&e.readonly:t},computeIsDisabled:function(){var e=this.$xeForm,t=this.disabled;return null===t?!!e&&e.disabled:t},computeMaxNum:function(){return _xeUtils.default.toNumber(this.max||0)},computeMinNum:function(){return _xeUtils.default.toNumber(this.min||0)},computeMVal:function(){var e=this.range,t=this.startValue,r=this.endValue;return e?"".concat(t||"").concat(r||""):""}}),methods:{dispatchEvent:function(e,t,r){this.$emit(e,(0,_ui.createEvent)(r,{$watermark:this},t))},emitModel:function(e){var t=this.internalData,r=this._events;t._isUp=!0,r&&r.modelValue?this.$emit("modelValue",e):this.$emit("model-value",e)},getBarPercent:function(e){var t=this.computeMaxNum,r=this.computeMinNum;return t===r?0:((e=t<(e=e<r?r:e)?t:e)-r)/(t-r)*100},parseFields:function(e,t){var r=this.internalData,e=_slicedToArray(_xeUtils.default.orderBy([_xeUtils.default.toNumber(e),_xeUtils.default.toNumber(t)]),2),t=e[0],e=e[1],t=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0));r.currValue=t,r.startValue=t,r.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0))},parseArrs:function(e){var t=this.internalData,e=_slicedToArray(_xeUtils.default.orderBy(e),2),r=e[0],e=e[1],r=_xeUtils.default.floor(_xeUtils.default.toNumber(r||0));t.currValue=r,t.startValue=r,t.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0))},parseNum:function(e){var t=this.internalData,e=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0));t.currValue=e,t.startValue=0,t.endValue=e},updateModelValue:function(e){var t=this,r=t.range,a=t.value,n=t.startValue,u=t.endValue;e?r&&2===e?t.parseFields(n,u):_xeUtils.default.isArray(a)?t.parseArrs(a.map(function(e){return _xeUtils.default.toNumber(e)})):t.parseNum(a):r?_xeUtils.default.eqNull(a)?(n||u)&&t.parseFields(n,u):_xeUtils.default.isArray(a)?t.parseArrs(a.map(function(e){return _xeUtils.default.toNumber(e)})):t.parseNum(a):t.parseNum(a),t.updateBarStyle(),t.updateTrackStyle()},updateBarStyle:function(){var e=this,t=e.internalData,r=e.range,a=t.currValue,n=e.$refs.refStartBtnElem,u=e.$refs.refEndBtnElem;r?(t=(r=_slicedToArray(_xeUtils.default.orderBy([t.startValue,t.endValue]),2))[0],r=r[1],n&&(n.style.left=e.getBarPercent(t)+"%"),u&&(u.style.left=e.getBarPercent(r)+"%")):u&&(u.style.left=e.getBarPercent(a)+"%")},updateTrackStyle:function(){var e=this,t=e.internalData,r=e.range,a=t.currValue,n=e.$refs.refTrackElem;n&&(r?(t=(r=_slicedToArray(_xeUtils.default.orderBy([t.startValue,t.endValue]),2))[0],r=r[1],n.style.left=e.getBarPercent(t)+"%",n.style.width=e.getBarPercent(r-t)+"%"):(n.style.left="0",n.style.width=e.getBarPercent(a)+"%"))},changeEvent:function(e){var t=this,r=t.internalData,a=t.$xeForm,n=t.formItemInfo,u=t.range,l=r.currValue,r=u?_xeUtils.default.orderBy([r.startValue,r.endValue]):[],l=u?r:l;t.emitModel(l),u&&(t.$emit("update:startValue",r[0]||0),t.$emit("update:endValue",r[1]||0)),t.dispatchEvent("change",{value:l},e),a&&n&&a.triggerItemEvent(e,n.itemConfig.field,l)},getValueByLeft:function(e,t){var r=this.computeMaxNum,a=this.computeMinNum;return 0===t?a:(e=Math.max(0,Math.min(t,e)),Math.floor(a+e/t*(r-a)))},handleBtnMousedownEvent:function(e){var n=this,u=n.internalData,l=n.range,i=n.immediate,o=e.currentTarget;n.computeFormReadonly||n.computeIsDisabled||(e.preventDefault(),document.onmousemove=function(e){e.preventDefault();var t,r=n.$refs.refElem,a=n.$refs.refBarElem;r&&a&&(r=o.getAttribute("data-type"),t=(a=a.getBoundingClientRect()).width,a=Math.min(t,Math.max(0,e.clientX-a.left)),a=n.getValueByLeft(a,t),l&&("1"===r?u.startValue=a:u.endValue=a),u.currValue=a,o.style.left=n.getBarPercent(a)+"%",n.dispatchEvent("track-dragover",{currentValue:u.currValue,startValue:u.startValue,endValue:u.endValue},e)),i&&n.changeEvent(e),n.updateTrackStyle()},document.onmouseup=function(e){document.onmousemove=null,document.onmouseup=null,n.dispatchEvent("track-dragend",{currentValue:u.currValue,startValue:u.startValue,endValue:u.endValue},e),n.changeEvent(e),n.updateTrackStyle()},n.dispatchEvent("track-dragstart",{currentValue:u.currValue,startValue:u.startValue,endValue:u.endValue},e))},renderVN:function(e){var t=this,r=t.vertical,a=t.range,n=t.computeSize,u=t.computeFormReadonly,l=t.computeIsDisabled;return e("div",{ref:"refElem",class:["vxe-slider",_defineProperty(_defineProperty(_defineProperty(_defineProperty({},"size--".concat(n),n),"is--vertical",r),"is--readonly",u),"is--disabled",l)]},[e("div",{class:"vxe-slider--inner"},[e("div",{ref:"refBarElem",class:"vxe-slider--bar-wrapper"}),e("div",{ref:"refTrackElem",class:"vxe-slider--bar-track"}),u||!a?(0,_ui.renderEmptyElement)(t):e("div",{ref:"refStartBtnElem",class:"vxe-slider--bar-btn",attrs:{"data-type":"1"},on:{mousedown:t.handleBtnMousedownEvent}}),u?(0,_ui.renderEmptyElement)(t):e("div",{ref:"refEndBtnElem",class:"vxe-slider--bar-btn",attrs:{"data-type":"2"},on:{mousedown:t.handleBtnMousedownEvent}})])])}},watch:{value:function(){var e=this.internalData;e._isUp||this.updateModelValue(1),e._isUp=!1},computeMVal:function(){var e=this.internalData;e._isUp||this.updateModelValue(2),e._isUp=!1}},created:function(){this.internalData=createInternalData(),this.updateModelValue()},mounted:function(){this.updateBarStyle(),this.updateTrackStyle()},beforeDestroy:function(){var e=this.reactData,t=this.internalData;_xeUtils.default.assign(e,createReactData()),_xeUtils.default.assign(t,createInternalData())},render:function(e){return this.renderVN(e)}});

package/lib/slider/style/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/lib/slider/style/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/lib/space/src/space.js

@@ -59,6 +59,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       default: function _default() {
         return (0, _ui.getConfig)().space.separator;
       }
+    },
+    align: {
+      type: String,
+      default: function _default() {
+        return (0, _ui.getConfig)().space.align;
+      }
     }
   },
   data: function data() {
@@ -75,7 +81,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     computeWrapperStyle: function computeWrapperStyle() {
       var $xeSpace = this;
       var props = $xeSpace;
-      var gap = props.gap;
+      var align = props.align,
+        gap = props.gap;
       var stys = {};
       var rowGap = '';
       var columGap = '';
@@ -91,6 +98,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           columGap = gap.columGap || '';
         }
       }
+      if (align) {
+        stys['align-items'] = align;
+      }
       if (!(0, _utils.eqEmptyValue)(rowGap)) {
         stys['--vxe-ui-space-current-row-gap'] = (0, _dom.toCssUnit)(rowGap);
       }
@@ -113,29 +123,46 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     //
     // Render
     //
-    renderVN: function renderVN(h) {
+    renderItems: function renderItems(h) {
       var $xeSpace = this;
       var props = $xeSpace;
       var slots = $xeSpace.$scopedSlots;
+      var separator = props.separator,
+        itemClassName = props.itemClassName;
+      var itemVNs = [];
+      var defaultSlot = slots.default;
+      var separatorSlot = slots.separator;
+      if (defaultSlot) {
+        _xeUtils.default.each(defaultSlot({}), function (itemVN, index, items) {
+          itemVNs.push(h('div', {
+            key: 'i' + index,
+            class: ['vxe-space--item', (0, _dom.getPropClass)(itemClassName, {
+              index: 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: function renderVN(h) {
+      var $xeSpace = this;
+      var props = $xeSpace;
       var vertical = props.vertical,
         wrap = props.wrap,
-        className = props.className,
-        itemClassName = props.itemClassName;
+        className = props.className;
       var wrapperStyle = $xeSpace.computeWrapperStyle;
       var vSize = $xeSpace.computeSize;
-      var defaultSlot = slots.default;
       return h('div', {
         ref: 'refElem',
         class: ['vxe-space', (0, _dom.getPropClass)(className, {}), _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--wrap', wrap), 'is--vertical', vertical)],
         style: wrapperStyle
-      }, defaultSlot ? (defaultSlot({}) || []).map(function (itemVN, index) {
-        return h('div', {
-          key: index,
-          class: ['vxe-space--item', (0, _dom.getPropClass)(itemClassName, {
-            index: index
-          })]
-        }, [itemVN]);
-      }) : []);
+      }, $xeSpace.renderItems(h));
     }
   },
   render: function render(h) {

package/lib/space/src/space.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSpace",mixins:[_ui.globalMixins.sizeMixin,_ui.globalMixins.permissionMixin],props:{size:{type:String,default:function(){return(0,_ui.getConfig)().space.size||(0,_ui.getConfig)().size}},wrap:{type:Boolean,default:function(){return(0,_ui.getConfig)().space.wrap}},gap:{type:[Number,String,Array,Object],default:function(){return(0,_ui.getConfig)().space.gap}},vertical:{type:Boolean,default:function(){return(0,_ui.getConfig)().space.vertical}},className:{type:String,default:function(){return(0,_ui.getConfig)().space.className}},itemClassName:{type:String,default:function(){return(0,_ui.getConfig)().space.itemClassName}},separator:{type:String,default:function(){return(0,_ui.getConfig)().space.separator}}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeValue:null}}},computed:Object.assign(Object.assign({},{}),{computeWrapperStyle:function(){var e=this.gap,t={},i="",r="";return _xeUtils.default.isNumber(e)||_xeUtils.default.isString(e)?r=i=e:e&&(r=_xeUtils.default.isArray(e)?(i=e[0],e[1]):(i=e.rowGap||"",e.columGap||"")),(0,_utils.eqEmptyValue)(i)||(t["--vxe-ui-space-current-row-gap"]=(0,_dom.toCssUnit)(i)),(0,_utils.eqEmptyValue)(r)||(t["--vxe-ui-space-current-column-gap"]=(0,_dom.toCssUnit)(r)),t}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$space:this},t))},renderVN:function(i){var e=this,t=e.$scopedSlots,r=e.vertical,n=e.wrap,o=e.itemClassName,u=e.computeWrapperStyle,a=e.computeSize,t=t.default;return i("div",{ref:"refElem",class:["vxe-space",(0,_dom.getPropClass)(e.className,{}),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(a),a),"is--wrap",n),"is--vertical",r)],style:u},t?(t({})||[]).map(function(e,t){return i("div",{key:t,class:["vxe-space--item",(0,_dom.getPropClass)(o,{index:t})]},[e])}):[])}},render:function(e){return this.renderVN(e)}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _defineProperty(e,t,i){return(t=_toPropertyKey(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function _toPropertyKey(e){e=_toPrimitive(e,"string");return"symbol"==_typeof(e)?e:e+""}function _toPrimitive(e,t){if("object"!=_typeof(e)||!e)return e;var i=e[Symbol.toPrimitive];if(void 0===i)return("string"===t?String:Number)(e);i=i.call(e,t||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSpace",mixins:[_ui.globalMixins.sizeMixin,_ui.globalMixins.permissionMixin],props:{size:{type:String,default:function(){return(0,_ui.getConfig)().space.size||(0,_ui.getConfig)().size}},wrap:{type:Boolean,default:function(){return(0,_ui.getConfig)().space.wrap}},gap:{type:[Number,String,Array,Object],default:function(){return(0,_ui.getConfig)().space.gap}},vertical:{type:Boolean,default:function(){return(0,_ui.getConfig)().space.vertical}},className:{type:String,default:function(){return(0,_ui.getConfig)().space.className}},itemClassName:{type:String,default:function(){return(0,_ui.getConfig)().space.itemClassName}},separator:{type:String,default:function(){return(0,_ui.getConfig)().space.separator}},align:{type:String,default:function(){return(0,_ui.getConfig)().space.align}}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeValue:null}}},computed:Object.assign(Object.assign({},{}),{computeWrapperStyle:function(){var e=this.align,t=this.gap,i={},r="",n="";return _xeUtils.default.isNumber(t)||_xeUtils.default.isString(t)?n=r=t:t&&(n=_xeUtils.default.isArray(t)?(r=t[0],t[1]):(r=t.rowGap||"",t.columGap||"")),e&&(i["align-items"]=e),(0,_utils.eqEmptyValue)(r)||(i["--vxe-ui-space-current-row-gap"]=(0,_dom.toCssUnit)(r)),(0,_utils.eqEmptyValue)(n)||(i["--vxe-ui-space-current-column-gap"]=(0,_dom.toCssUnit)(n)),i}}),methods:{dispatchEvent:function(e,t,i){this.$emit(e,(0,_ui.createEvent)(i,{$space:this},t))},renderItems:function(r){var e=this.$scopedSlots,n=this.separator,u=this.itemClassName,o=[],t=e.default,a=e.separator;return t&&_xeUtils.default.each(t({}),function(e,t,i){o.push(r("div",{key:"i"+t,class:["vxe-space--item",(0,_dom.getPropClass)(u,{index:t})]},[e])),(n||a)&&t<i.length-1&&o.push(r("div",{key:"s"+t,class:"vxe-space--separator"},a?a({}):""+n))}),o},renderVN:function(e){var t=this,i=t.vertical,r=t.wrap,n=t.computeWrapperStyle,u=t.computeSize;return e("div",{ref:"refElem",class:["vxe-space",(0,_dom.getPropClass)(t.className,{}),_defineProperty(_defineProperty(_defineProperty({},"size--".concat(u),u),"is--wrap",r),"is--vertical",i)],style:n},t.renderItems(e))}},render:function(e){return this.renderVN(e)}});