vxe-pc-ui 4.17.20 → 4.17.21

package/lib/slider/src/slider.js

@@ -11,19 +11,21 @@ var _ui = require("../../ui");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function createInternalData() {
   return {
-    // _isUp: false
-  };
-}
-function createReactData() {
-  return {
+    // _isUp: false,
+    currValue: 0,
     startValue: 0,
     endValue: 0
   };
 }
+function createReactData() {
+  return {};
+}
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeSlider',
   props: {
     modelValue: [String, Number, Array],
+    startValue: [String, Number],
+    endValue: [String, Number],
     vertical: Boolean,
     max: {
       type: [String, Number],
@@ -58,7 +60,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       default: () => (0, _ui.getConfig)().slider.immediate
     }
   },
-  emits: ['update:modelValue', 'change', 'track-dragstart', 'track-dragover', 'track-dragend'],
+  emits: ['update:modelValue', 'update:startValue', 'update:endValue', 'change', 'track-dragstart', 'track-dragover', 'track-dragend'],
   setup(props, context) {
     const {
       emit
@@ -109,6 +111,14 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeMinNum = (0, _vue.computed)(() => {
       return _xeUtils.default.toNumber(props.min || 0);
     });
+    const computeMVal = (0, _vue.computed)(() => {
+      const {
+        range,
+        startValue,
+        endValue
+      } = props;
+      return range ? `${startValue || ''}${endValue || ''}` : '';
+    });
     const computeMaps = {};
     const $xeSlider = {
       xID,
@@ -130,61 +140,119 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const collapsePaneMethods = {
       dispatchEvent
     };
-    const getStartPercent = startValue => {
-      const {
-        range
-      } = props;
+    const getBarPercent = currValue => {
       const maxNum = computeMaxNum.value;
       const minNum = computeMinNum.value;
-      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;
     };
-    const getEndPercent = (startValue, endValue) => {
-      const {
-        range
-      } = props;
-      const maxNum = computeMaxNum.value;
-      const minNum = computeMinNum.value;
-      return _xeUtils.default.floor((endValue - (range ? startValue : 0) - minNum) / _xeUtils.default.toNumber(maxNum - minNum) * 100);
+    const parseFields = (startValue, endValue) => {
+      const [sVal, eVal] = _xeUtils.default.orderBy([_xeUtils.default.toNumber(startValue), _xeUtils.default.toNumber(endValue)]);
+      const 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));
     };
-    const updateModel = () => {
+    const parseArrs = arrVals => {
+      const [sVal, eVal] = _xeUtils.default.orderBy(arrVals);
+      const 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));
+    };
+    const parseNum = val => {
+      const currValue = _xeUtils.default.floor(_xeUtils.default.toNumber(val || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = 0;
+      internalData.endValue = currValue;
+    };
+    const updateModelValue = umType => {
       const {
-        modelValue
+        range,
+        modelValue,
+        startValue,
+        endValue
       } = props;
-      if (_xeUtils.default.isArray(modelValue)) {
-        const [sVal, eVal] = _xeUtils.default.clone(modelValue, true).sort();
-        reactData.startValue = _xeUtils.default.floor(_xeUtils.default.toNumber(sVal || 0));
-        reactData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(eVal || 0));
+      if (!umType) {
+        if (range) {
+          if (_xeUtils.default.eqNull(modelValue)) {
+            if (startValue || endValue) {
+              parseFields(startValue, endValue);
+            }
+          } else {
+            if (_xeUtils.default.isArray(modelValue)) {
+              parseArrs(modelValue.map(num => _xeUtils.default.toNumber(num)));
+            } else {
+              parseNum(modelValue);
+            }
+          }
+        } else {
+          parseNum(modelValue);
+        }
+      } else if (range && umType === 2) {
+        parseFields(startValue, endValue);
       } else {
-        reactData.startValue = 0;
-        reactData.endValue = _xeUtils.default.floor(_xeUtils.default.toNumber(modelValue || 0));
+        if (_xeUtils.default.isArray(modelValue)) {
+          parseArrs(modelValue.map(num => _xeUtils.default.toNumber(num)));
+        } else {
+          parseNum(modelValue);
+        }
       }
+      updateBarStyle();
+      updateTrackStyle();
     };
     const updateBarStyle = () => {
       const {
+        range
+      } = props;
+      const {
+        currValue,
         startValue,
         endValue
-      } = reactData;
-      const trackElem = refTrackElem.value;
+      } = 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.default.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.default.floor(startPercent + endPercent)}%`;
+        if (range) {
+          const [sVal, eVal] = _xeUtils.default.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 => {
@@ -192,11 +260,17 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         range
       } = props;
       const {
+        currValue,
         startValue,
         endValue
-      } = reactData;
-      const value = range ? [startValue, endValue].sort() : endValue;
+      } = internalData;
+      const vals = range ? _xeUtils.default.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);
@@ -205,14 +279,25 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
       }
     };
-    const handleMousedownEvent = (evnt, isEnd) => {
+    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;
-      const maxNum = computeMaxNum.value;
-      const minNum = computeMinNum.value;
       if (!(formReadonly || isDisabled)) {
         evnt.preventDefault();
         document.onmousemove = evnt => {
@@ -220,49 +305,49 @@ var _default = exports.default = (0, _comp.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.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))));
+            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;
+              }
             }
+            internalData.currValue = currValue;
+            btnElem.style.left = getBarPercent(currValue) + '%';
             dispatchEvent('track-dragover', {
-              startValue: reactData.startValue,
-              endValue: reactData.endValue
+              currentValue: internalData.currValue,
+              startValue: internalData.startValue,
+              endValue: internalData.endValue
             }, evnt);
           }
           if (immediate) {
             changeEvent(evnt);
           }
-          updateBarStyle();
+          updateTrackStyle();
         };
         document.onmouseup = evnt => {
           document.onmousemove = null;
           document.onmouseup = null;
           dispatchEvent('track-dragend', {
-            startValue: reactData.startValue,
-            endValue: reactData.endValue
+            currentValue: internalData.currValue,
+            startValue: internalData.startValue,
+            endValue: internalData.endValue
           }, evnt);
           changeEvent(evnt);
-          updateBarStyle();
+          updateTrackStyle();
         };
         dispatchEvent('track-dragstart', {
-          startValue: reactData.startValue,
-          endValue: reactData.endValue
+          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 = () => {
@@ -291,28 +376,35 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         class: 'vxe-slider--bar-track'
       }), formReadonly || !range ? (0, _ui.renderEmptyElement)($xeSlider) : (0, _vue.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 ? (0, _ui.renderEmptyElement)($xeSlider) : (0, _vue.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
       })])]);
     };
     (0, _vue.watch)(() => props.modelValue, () => {
       if (!internalData._isUp) {
-        updateModel();
+        updateModelValue(1);
+      }
+      internalData._isUp = false;
+    });
+    (0, _vue.watch)(computeMVal, () => {
+      if (!internalData._isUp) {
+        updateModelValue(2);
       }
       internalData._isUp = false;
     });
     (0, _vue.onMounted)(() => {
-      updateBarStyle();
+      updateModelValue();
     });
     (0, _vue.onBeforeUnmount)(() => {
       _xeUtils.default.assign(reactData, createReactData());
       _xeUtils.default.assign(internalData, createInternalData());
     });
-    updateModel();
     $xeSlider.renderVN = renderVN;
     return $xeSlider;
   },

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

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{startValue:0,endValue:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSlider",props:{modelValue:[String,Number,Array],vertical:Boolean,max:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.max},min:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.min},step:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.step},size:{type:String,default:()=>(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size},range:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.range},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},immediate:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.immediate}},emits:["update:modelValue","change","track-dragstart","track-dragover","track-dragend"],setup(i,e){let l=e.emit,r=(0,_vue.inject)("$xeForm",null),u=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let n=(0,_ui.useSize)(i).computeSize,d=(0,_vue.ref)(),s=(0,_vue.ref)(),o=(0,_vue.ref)(),f=(0,_vue.ref)(),v=(0,_vue.ref)(),_=(0,_vue.reactive)(createReactData()),a=createInternalData(),m={refElem:d},c=(0,_vue.computed)(()=>{var e=i.readonly;return null===e?!!r&&r.props.readonly:e}),p=(0,_vue.computed)(()=>{var e=i.disabled;return null===e?!!r&&r.props.disabled:e}),g=(0,_vue.computed)(()=>_xeUtils.default.toNumber(i.max||0)),x=(0,_vue.computed)(()=>_xeUtils.default.toNumber(i.min||0)),V={},b={xID:t,props:i,context:e,reactData:_,getRefMaps:()=>m,getComputeMaps:()=>V},U=e=>{a._isUp=!0,l("update:modelValue",e)},y=(e,t,a)=>{l(e,(0,_ui.createEvent)(a,{$slider:b},t))};t={dispatchEvent:y};let h=e=>{var t=i.range,a=g.value,l=x.value;return t?_xeUtils.default.floor((e-l)/_xeUtils.default.toNumber(a-l)*100):0},N=(e,t)=>{var a=i.range,l=g.value,r=x.value;return _xeUtils.default.floor((t-(a?e:0)-r)/_xeUtils.default.toNumber(l-r)*100)},D=()=>{var e,t,a=i.modelValue;_xeUtils.default.isArray(a)?([e,t]=_xeUtils.default.clone(a,!0).sort(),_.startValue=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0)),_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))):(_.startValue=0,_.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(a||0)))},C=()=>{var{startValue:e,endValue:t}=_,a=o.value,l=f.value,r=v.value;let u=0,n=0;n=t<e?(u=h(t),N(t,e)):(u=h(e),N(e,t)),a&&(a.style.left=u+"%",a.style.width=n+"%"),l&&(l.style.left=u+"%"),r&&(r.style.left=_xeUtils.default.floor(u+n)+"%")},M=e=>{var t=i.range,{startValue:a,endValue:l}=_,t=t?[a,l].sort():l;U(t),y("change",{value:t},e),r&&u&&r.triggerItemEvent(e,u.itemConfig.field,t)},E=(e,l)=>{let r=i.immediate;var t=c.value,a=p.value;let u=g.value,n=x.value;t||a||(e.preventDefault(),document.onmousemove=e=>{e.preventDefault();var t=d.value,a=s.value;t&&a&&(t=a.getBoundingClientRect(),a=(e.clientX-t.left)/t.width,l?_.endValue=_xeUtils.default.floor(Math.max(n,Math.min(u,a*(u-n)+n))):_.startValue=_xeUtils.default.floor(Math.max(n,Math.min(u,a*(u-n)))),y("track-dragover",{startValue:_.startValue,endValue:_.endValue},e)),r&&M(e),C()},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,y("track-dragend",{startValue:_.startValue,endValue:_.endValue},e),M(e),C()},y("track-dragstart",{startValue:_.startValue,endValue:_.endValue},e))},I=e=>{var t=v.value,a=e.currentTarget;E(e,!!t&&t.offsetLeft<a.offsetLeft)},S=e=>{var t=f.value,a=e.currentTarget;E(e,!t||a.offsetLeft>t.offsetLeft)};Object.assign(b,t,{});return(0,_vue.watch)(()=>i.modelValue,()=>{a._isUp||D(),a._isUp=!1}),(0,_vue.onMounted)(()=>{C()}),(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(_,createReactData()),_xeUtils.default.assign(a,createInternalData())}),D(),b.renderVN=()=>{var{vertical:e,range:t}=i,a=n.value,l=c.value,r=p.value;return(0,_vue.h)("div",{ref:d,class:["vxe-slider",{["size--"+a]:a,"is--vertical":e,"is--readonly":l,"is--disabled":r}]},[(0,_vue.h)("div",{class:"vxe-slider--inner"},[(0,_vue.h)("div",{ref:s,class:"vxe-slider--bar-wrapper"}),(0,_vue.h)("div",{ref:o,class:"vxe-slider--bar-track"}),l||!t?(0,_ui.renderEmptyElement)(b):(0,_vue.h)("div",{ref:f,class:"vxe-slider--bar-btn vxe-slider--start-btn",onMousedown:I}),l?(0,_ui.renderEmptyElement)(b):(0,_vue.h)("div",{ref:v,class:"vxe-slider--bar-btn vxe-slider--end-btn",onMousedown:S})])])},b},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{currValue:0,startValue:0,endValue:0}}function createReactData(){return{}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSlider",props:{modelValue:[String,Number,Array],startValue:[String,Number],endValue:[String,Number],vertical:Boolean,max:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.max},min:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.min},step:{type:[String,Number],default:()=>(0,_ui.getConfig)().slider.step},size:{type:String,default:()=>(0,_ui.getConfig)().slider.size||(0,_ui.getConfig)().size},range:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.range},readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},immediate:{type:Boolean,default:()=>(0,_ui.getConfig)().slider.immediate}},emits:["update:modelValue","update:startValue","update:endValue","change","track-dragstart","track-dragover","track-dragend"],setup(d,e){let l=e.emit,i=(0,_vue.inject)("$xeForm",null),n=(0,_vue.inject)("xeFormItemInfo",null);var t=_xeUtils.default.uniqueId();let s=(0,_ui.useSize)(d).computeSize,o=(0,_vue.ref)(),f=(0,_vue.ref)(),v=(0,_vue.ref)(),_=(0,_vue.ref)(),m=(0,_vue.ref)(),a=(0,_vue.reactive)(createReactData()),c=createInternalData(),r={refElem:o},p=(0,_vue.computed)(()=>{var e=d.readonly;return null===e?!!i&&i.props.readonly:e}),V=(0,_vue.computed)(()=>{var e=d.disabled;return null===e?!!i&&i.props.disabled:e}),u=(0,_vue.computed)(()=>_xeUtils.default.toNumber(d.max||0)),g=(0,_vue.computed)(()=>_xeUtils.default.toNumber(d.min||0));var x=(0,_vue.computed)(()=>{var{range:e,startValue:t,endValue:a}=d;return e?""+(t||"")+(a||""):""});let y={},U={xID:t,props:d,context:e,reactData:a,getRefMaps:()=>r,getComputeMaps:()=>y},b=e=>{c._isUp=!0,l("update:modelValue",e)},h=(e,t,a)=>{l(e,(0,_ui.createEvent)(a,{$slider:U},t))};t={dispatchEvent:h};let N=e=>{var t=u.value,a=g.value;return t===a?0:((e=t<(e=e<a?a:e)?t:e)-a)/(t-a)*100},B=(e,t)=>{var[e,t]=_xeUtils.default.orderBy([_xeUtils.default.toNumber(e),_xeUtils.default.toNumber(t)]),e=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0));c.currValue=e,c.startValue=e,c.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))},D=e=>{var[e,t]=_xeUtils.default.orderBy(e),e=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0));c.currValue=e,c.startValue=e,c.endValue=_xeUtils.default.floor(_xeUtils.default.toNumber(t||0))},M=e=>{e=_xeUtils.default.floor(_xeUtils.default.toNumber(e||0));c.currValue=e,c.startValue=0,c.endValue=e},C=e=>{var{range:t,modelValue:a,startValue:r,endValue:u}=d;e?t&&2===e?B(r,u):_xeUtils.default.isArray(a)?D(a.map(e=>_xeUtils.default.toNumber(e))):M(a):t?_xeUtils.default.eqNull(a)?(r||u)&&B(r,u):_xeUtils.default.isArray(a)?D(a.map(e=>_xeUtils.default.toNumber(e))):M(a):M(a),(()=>{const{range:e}=d,{currValue:t,startValue:a,endValue:r}=c,u=_.value,l=m.value;if(e){const[i,n]=_xeUtils.default.orderBy([a,r]);if(u)u.style.left=N(i)+"%";if(l)l.style.left=N(n)+"%"}else if(l)l.style.left=N(t)+"%"})(),S()},S=()=>{var e=d.range,{currValue:t,startValue:a,endValue:r}=c,u=v.value;u&&(e?([e,a]=_xeUtils.default.orderBy([a,r]),u.style.left=N(e)+"%",u.style.width=N(a-e)+"%"):(u.style.left="0",u.style.width=N(t)+"%"))},q=e=>{var t=d.range,{currValue:a,startValue:r,endValue:u}=c,r=t?_xeUtils.default.orderBy([r,u]):[],u=t?r:a;b(u),t&&(l("update:startValue",r[0]||0),l("update:endValue",r[1]||0)),h("change",{value:u},e),i&&n&&i.triggerItemEvent(e,n.itemConfig.field,u)},w=(e,t)=>{var a=u.value,r=g.value;return 0===t?r:(e=Math.max(0,Math.min(t,e)),Math.floor(r+e/t*(a-r)))},E=e=>{let{range:u,immediate:l}=d,i=e.currentTarget;var t=p.value,a=V.value;t||a||(e.preventDefault(),document.onmousemove=e=>{e.preventDefault();var t,a=o.value,r=f.value;a&&r&&(a=i.getAttribute("data-type"),t=(r=r.getBoundingClientRect()).width,r=Math.min(t,Math.max(0,e.clientX-r.left)),r=w(r,t),u&&("1"===a?c.startValue=r:c.endValue=r),c.currValue=r,i.style.left=N(r)+"%",h("track-dragover",{currentValue:c.currValue,startValue:c.startValue,endValue:c.endValue},e)),l&&q(e),S()},document.onmouseup=e=>{document.onmousemove=null,document.onmouseup=null,h("track-dragend",{currentValue:c.currValue,startValue:c.startValue,endValue:c.endValue},e),q(e),S()},h("track-dragstart",{currentValue:c.currValue,startValue:c.startValue,endValue:c.endValue},e))};Object.assign(U,t,{});return(0,_vue.watch)(()=>d.modelValue,()=>{c._isUp||C(1),c._isUp=!1}),(0,_vue.watch)(x,()=>{c._isUp||C(2),c._isUp=!1}),(0,_vue.onMounted)(()=>{C()}),(0,_vue.onBeforeUnmount)(()=>{_xeUtils.default.assign(a,createReactData()),_xeUtils.default.assign(c,createInternalData())}),U.renderVN=()=>{var{vertical:e,range:t}=d,a=s.value,r=p.value,u=V.value;return(0,_vue.h)("div",{ref:o,class:["vxe-slider",{["size--"+a]:a,"is--vertical":e,"is--readonly":r,"is--disabled":u}]},[(0,_vue.h)("div",{class:"vxe-slider--inner"},[(0,_vue.h)("div",{ref:f,class:"vxe-slider--bar-wrapper"}),(0,_vue.h)("div",{ref:v,class:"vxe-slider--bar-track"}),r||!t?(0,_ui.renderEmptyElement)(U):(0,_vue.h)("div",{ref:_,class:"vxe-slider--bar-btn","data-type":"1",onMousedown:E}),r?(0,_ui.renderEmptyElement)(U):(0,_vue.h)("div",{ref:m,class:"vxe-slider--bar-btn","data-type":"2",onMousedown:E})])])},U},render(){return this.renderVN()}});

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

@@ -41,6 +41,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     separator: {
       type: String,
       default: () => (0, _ui.getConfig)().space.separator
+    },
+    align: {
+      type: String,
+      default: () => (0, _ui.getConfig)().space.align
     }
   },
   emits: [],
@@ -62,6 +66,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     const computeWrapperStyle = (0, _vue.computed)(() => {
       const {
+        align,
         gap
       } = props;
       const stys = {};
@@ -79,6 +84,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           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);
       }
@@ -106,16 +114,40 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     };
     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.default.each(defaultSlot({}), (itemVN, index, items) => {
+          itemVNs.push((0, _vue.h)('div', {
+            key: 'i' + index,
+            class: ['vxe-space--item', (0, _dom.getPropClass)(itemClassName, {
+              index
+            })]
+          }, [itemVN]));
+          if ((separator || separatorSlot) && index < items.length - 1) {
+            itemVNs.push((0, _vue.h)('div', {
+              key: 's' + index,
+              class: 'vxe-space--separator'
+            }, separatorSlot ? separatorSlot({}) : '' + separator));
+          }
+        });
+      }
+      return itemVNs;
+    };
     const renderVN = () => {
       const {
         vertical,
         wrap,
-        className,
-        itemClassName
+        className
       } = props;
       const wrapperStyle = computeWrapperStyle.value;
       const vSize = computeSize.value;
-      const defaultSlot = slots.default;
       return (0, _vue.h)('div', {
         ref: refElem,
         class: ['vxe-space', (0, _dom.getPropClass)(className, {}), {
@@ -124,14 +156,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           'is--vertical': vertical
         }],
         style: wrapperStyle
-      }, defaultSlot ? (defaultSlot({}) || []).map((itemVN, index) => {
-        return (0, _vue.h)('div', {
-          key: index,
-          class: ['vxe-space--item', (0, _dom.getPropClass)(itemClassName, {
-            index
-          })]
-        }, [itemVN]);
-      }) : []);
+      }, renderItems());
     };
     $xeSpace.renderVN = renderVN;
     return $xeSpace;

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

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_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}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSpace",props:{size:{type:String,default:()=>(0,_ui.getConfig)().space.size||(0,_ui.getConfig)().size},wrap:{type:Boolean,default:()=>(0,_ui.getConfig)().space.wrap},gap:{type:[Number,String,Array,Object],default:()=>(0,_ui.getConfig)().space.gap},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().space.vertical},className:{type:String,default:()=>(0,_ui.getConfig)().space.className},itemClassName:{type:String,default:()=>(0,_ui.getConfig)().space.itemClassName},separator:{type:String,default:()=>(0,_ui.getConfig)().space.separator}},emits:[],setup(l,e){let{emit:i,slots:p}=e;var t=_xeUtils.default.uniqueId();let o=(0,_ui.useSize)(l).computeSize,n=(0,_vue.ref)();var a=(0,_vue.reactive)({activeValue:null});let r={refElem:n},c=(0,_vue.computed)(()=>{var e=l.gap,t={};let a="",i="";return _xeUtils.default.isNumber(e)||_xeUtils.default.isString(e)?(a=e,i=e):e&&(i=_xeUtils.default.isArray(e)?(a=e[0],e[1]):(a=e.rowGap||"",e.columGap||"")),(0,_utils.eqEmptyValue)(a)||(t["--vxe-ui-space-current-row-gap"]=(0,_dom.toCssUnit)(a)),(0,_utils.eqEmptyValue)(i)||(t["--vxe-ui-space-current-column-gap"]=(0,_dom.toCssUnit)(i)),t}),u={},s={xID:t,props:l,context:e,reactData:a,getRefMaps:()=>r,getComputeMaps:()=>u};Object.assign(s,{dispatchEvent:(e,t,a)=>{i(e,(0,_ui.createEvent)(a,{$space:s},t))}},{});return s.renderVN=()=>{let{vertical:e,wrap:t,className:a,itemClassName:i}=l;var r=c.value,u=o.value,s=p.default;return(0,_vue.h)("div",{ref:n,class:["vxe-space",(0,_dom.getPropClass)(a,{}),{["size--"+u]:u,"is--wrap":t,"is--vertical":e}],style:r},s?(s({})||[]).map((e,t)=>(0,_vue.h)("div",{key:t,class:["vxe-space--item",(0,_dom.getPropClass)(i,{index:t})]},[e])):[])},s},render(){return this.renderVN()}});
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_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}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeSpace",props:{size:{type:String,default:()=>(0,_ui.getConfig)().space.size||(0,_ui.getConfig)().size},wrap:{type:Boolean,default:()=>(0,_ui.getConfig)().space.wrap},gap:{type:[Number,String,Array,Object],default:()=>(0,_ui.getConfig)().space.gap},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().space.vertical},className:{type:String,default:()=>(0,_ui.getConfig)().space.className},itemClassName:{type:String,default:()=>(0,_ui.getConfig)().space.itemClassName},separator:{type:String,default:()=>(0,_ui.getConfig)().space.separator},align:{type:String,default:()=>(0,_ui.getConfig)().space.align}},emits:[],setup(l,e){let{emit:i,slots:p}=e;var t=_xeUtils.default.uniqueId();let s=(0,_ui.useSize)(l).computeSize,u=(0,_vue.ref)();var a=(0,_vue.reactive)({activeValue:null});let r={refElem:u},o=(0,_vue.computed)(()=>{var{align:e,gap:t}=l,a={};let i="",r="";return _xeUtils.default.isNumber(t)||_xeUtils.default.isString(t)?(i=t,r=t):t&&(r=_xeUtils.default.isArray(t)?(i=t[0],t[1]):(i=t.rowGap||"",t.columGap||"")),e&&(a["align-items"]=e),(0,_utils.eqEmptyValue)(i)||(a["--vxe-ui-space-current-row-gap"]=(0,_dom.toCssUnit)(i)),(0,_utils.eqEmptyValue)(r)||(a["--vxe-ui-space-current-column-gap"]=(0,_dom.toCssUnit)(r)),a}),n={},c={xID:t,props:l,context:e,reactData:a,getRefMaps:()=>r,getComputeMaps:()=>n};Object.assign(c,{dispatchEvent:(e,t,a)=>{i(e,(0,_ui.createEvent)(a,{$space:c},t))}},{});return c.renderVN=()=>{var{vertical:e,wrap:t,className:a}=l,i=o.value,r=s.value;return(0,_vue.h)("div",{ref:u,class:["vxe-space",(0,_dom.getPropClass)(a,{}),{["size--"+r]:r,"is--wrap":t,"is--vertical":e}],style:i},(()=>{let{separator:i,itemClassName:r}=l,s=[];var e=p.default;let u=p.separator;return e&&_xeUtils.default.each(e({}),(e,t,a)=>{s.push((0,_vue.h)("div",{key:"i"+t,class:["vxe-space--item",(0,_dom.getPropClass)(r,{index:t})]},[e])),(i||u)&&t<a.length-1&&s.push((0,_vue.h)("div",{key:"s"+t,class:"vxe-space--separator"},u?u({}):""+i))}),s})())},c},render(){return this.renderVN()}});

package/lib/space/style/style.css

@@ -26,6 +26,7 @@
 .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 {

package/lib/space/style/style.min.css

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