vxe-pc-ui 4.17.20 → 4.17.21

package/lib/index.umd.js

@@ -4662,7 +4662,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.17.20"}`;
+const uiVersion = `ui v${"4.17.21"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4680,7 +4680,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.17.20";
+const ui_version = "4.17.21";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -46436,21 +46436,25 @@ const SplitPane = VxeSplitPane;
 
 
 
+
+
 function slider_createInternalData() {
   return {
-    // _isUp: false
-  };
-}
-function slider_createReactData() {
-  return {
+    // _isUp: false,
+    currValue: 0,
     startValue: 0,
     endValue: 0
   };
 }
+function slider_createReactData() {
+  return {};
+}
 /* harmony default export */ var slider = (defineVxeComponent({
   name: 'VxeSlider',
   props: {
     modelValue: [String, Number, Array],
+    startValue: [String, Number],
+    endValue: [String, Number],
     vertical: Boolean,
     max: {
       type: [String, Number],
@@ -46485,7 +46489,7 @@ function slider_createReactData() {
       default: () => 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
@@ -46536,6 +46540,14 @@ function slider_createReactData() {
     const computeMinNum = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(props.min || 0);
     });
+    const computeMVal = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        range,
+        startValue,
+        endValue
+      } = props;
+      return range ? `${startValue || ''}${endValue || ''}` : '';
+    });
     const computeMaps = {};
     const $xeSlider = {
       xID,
@@ -46557,61 +46569,119 @@ function slider_createReactData() {
     const collapsePaneMethods = {
       dispatchEvent
     };
-    const getStartPercent = startValue => {
-      const {
-        range
-      } = props;
+    const getBarPercent = currValue => {
       const maxNum = computeMaxNum.value;
       const minNum = computeMinNum.value;
-      return range ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor((startValue - minNum) / external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor((endValue - (range ? startValue : 0) - minNum) / external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(maxNum - minNum) * 100);
+    const parseFields = (startValue, endValue) => {
+      const [sVal, eVal] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy([external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(startValue), external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(endValue)]);
+      const currValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sVal || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = currValue;
+      internalData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(eVal || 0));
     };
-    const updateModel = () => {
+    const parseArrs = arrVals => {
+      const [sVal, eVal] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().orderBy(arrVals);
+      const currValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sVal || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = currValue;
+      internalData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(eVal || 0));
+    };
+    const parseNum = val => {
+      const currValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(val || 0));
+      internalData.currValue = currValue;
+      internalData.startValue = 0;
+      internalData.endValue = currValue;
+    };
+    const updateModelValue = umType => {
       const {
-        modelValue
+        range,
+        modelValue,
+        startValue,
+        endValue
       } = props;
-      if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue)) {
-        const [sVal, eVal] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().clone(modelValue, true).sort();
-        reactData.startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sVal || 0));
-        reactData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(eVal || 0));
+      if (!umType) {
+        if (range) {
+          if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(modelValue)) {
+            if (startValue || endValue) {
+              parseFields(startValue, endValue);
+            }
+          } else {
+            if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue)) {
+              parseArrs(modelValue.map(num => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(num)));
+            } else {
+              parseNum(modelValue);
+            }
+          }
+        } else {
+          parseNum(modelValue);
+        }
+      } else if (range && umType === 2) {
+        parseFields(startValue, endValue);
       } else {
-        reactData.startValue = 0;
-        reactData.endValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(modelValue || 0));
+        if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(modelValue)) {
+          parseArrs(modelValue.map(num => external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = `${external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(startPercent + endPercent)}%`;
+        if (range) {
+          const [sVal, eVal] = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 => {
@@ -46619,11 +46689,17 @@ function slider_createReactData() {
         range
       } = props;
       const {
+        currValue,
         startValue,
         endValue
-      } = reactData;
-      const value = range ? [startValue, endValue].sort() : endValue;
+      } = internalData;
+      const vals = range ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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);
@@ -46632,14 +46708,25 @@ function slider_createReactData() {
         $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 => {
@@ -46647,49 +46734,49 @@ function slider_createReactData() {
           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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
-            } else {
-              reactData.startValue = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_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 = () => {
@@ -46718,28 +46805,35 @@ function slider_createReactData() {
         class: 'vxe-slider--bar-track'
       }), formReadonly || !range ? renderEmptyElement($xeSlider) : (0,external_commonjs_vue_commonjs2_vue_root_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 ? renderEmptyElement($xeSlider) : (0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, () => {
       if (!internalData._isUp) {
-        updateModel();
+        updateModelValue(1);
+      }
+      internalData._isUp = false;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeMVal, () => {
+      if (!internalData._isUp) {
+        updateModelValue(2);
       }
       internalData._isUp = false;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      updateBarStyle();
+      updateModelValue();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(reactData, slider_createReactData());
       external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().assign(internalData, slider_createInternalData());
     });
-    updateModel();
     $xeSlider.renderVN = renderVN;
     return $xeSlider;
   },
@@ -46768,7 +46862,6 @@ const Slider = VxeSlider;
 
 
 
-
 /* harmony default export */ var space = (defineVxeComponent({
   name: 'VxeSpace',
   props: {
@@ -46799,6 +46892,10 @@ const Slider = VxeSlider;
     separator: {
       type: String,
       default: () => getConfig().space.separator
+    },
+    align: {
+      type: String,
+      default: () => getConfig().space.align
     }
   },
   emits: [],
@@ -46820,6 +46917,7 @@ const Slider = VxeSlider;
     };
     const computeWrapperStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
+        align,
         gap
       } = props;
       const stys = {};
@@ -46837,6 +46935,9 @@ const Slider = VxeSlider;
           columGap = gap.columGap || '';
         }
       }
+      if (align) {
+        stys['align-items'] = align;
+      }
       if (!eqEmptyValue(rowGap)) {
         stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap);
       }
@@ -46864,16 +46965,40 @@ const Slider = VxeSlider;
     };
     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) {
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(defaultSlot({}), (itemVN, index, items) => {
+          itemVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+            key: 'i' + index,
+            class: ['vxe-space--item', getPropClass(itemClassName, {
+              index
+            })]
+          }, [itemVN]));
+          if ((separator || separatorSlot) && index < items.length - 1) {
+            itemVNs.push((0,external_commonjs_vue_commonjs2_vue_root_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,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
         class: ['vxe-space', getPropClass(className, {}), {
@@ -46882,14 +47007,7 @@ const Slider = VxeSlider;
           'is--vertical': vertical
         }],
         style: wrapperStyle
-      }, defaultSlot ? (defaultSlot({}) || []).map((itemVN, index) => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-          key: index,
-          class: ['vxe-space--item', getPropClass(itemClassName, {
-            index
-          })]
-        }, [itemVN]);
-      }) : []);
+      }, renderItems());
     };
     $xeSpace.renderVN = renderVN;
     return $xeSpace;