vxe-pc-ui 4.17.20 → 4.17.22

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.17.20"}`;
+const uiVersion = `ui v${"4.17.22"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$i = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.17.20";
+const version = "4.17.22";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -37697,19 +37697,21 @@ const SplitPane = VxeSplitPane;
 
 function createInternalData$6() {
     return {
-    // _isUp: false
-    };
-}
-function createReactData$6() {
-    return {
+        // _isUp: false,
+        currValue: 0,
         startValue: 0,
         endValue: 0
     };
 }
+function createReactData$6() {
+    return {};
+}
 var VxeSliderComponent = defineVxeComponent({
     name: 'VxeSlider',
     props: {
         modelValue: [String, Number, Array],
+        startValue: [String, Number],
+        endValue: [String, Number],
         vertical: Boolean,
         max: {
             type: [String, Number],
@@ -37746,6 +37748,8 @@ var VxeSliderComponent = defineVxeComponent({
     },
     emits: [
         'update:modelValue',
+        'update:startValue',
+        'update:endValue',
         'change',
         'track-dragstart',
         'track-dragover',
@@ -37793,6 +37797,10 @@ var VxeSliderComponent = defineVxeComponent({
         const computeMinNum = computed(() => {
             return XEUtils.toNumber(props.min || 0);
         });
+        const computeMVal = computed(() => {
+            const { range, startValue, endValue } = props;
+            return range ? `${startValue || ''}${endValue || ''}` : '';
+        });
         const computeMaps = {};
         const $xeSlider = {
             xID,
@@ -37812,73 +37820,144 @@ var VxeSliderComponent = defineVxeComponent({
         const collapsePaneMethods = {
             dispatchEvent
         };
-        const getStartPercent = (startValue) => {
-            const { range } = props;
+        const getBarPercent = (currValue) => {
             const maxNum = computeMaxNum.value;
             const minNum = computeMinNum.value;
-            return range ? XEUtils.floor((startValue - minNum) / XEUtils.toNumber(maxNum - minNum) * 100) : 0;
-        };
-        const getEndPercent = (startValue, endValue) => {
-            const { range } = props;
-            const maxNum = computeMaxNum.value;
-            const minNum = computeMinNum.value;
-            return XEUtils.floor((endValue - (range ? startValue : 0) - minNum) / XEUtils.toNumber(maxNum - minNum) * 100);
-        };
-        const updateModel = () => {
-            const { modelValue } = props;
-            if (XEUtils.isArray(modelValue)) {
-                const [sVal, eVal] = XEUtils.clone(modelValue, true).sort();
-                reactData.startValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+            if (maxNum === minNum) {
+                return 0;
+            }
+            if (currValue < minNum) {
+                currValue = minNum;
+            }
+            if (currValue > maxNum) {
+                currValue = maxNum;
+            }
+            return ((currValue - minNum) / (maxNum - minNum)) * 100;
+        };
+        const parseFields = (startValue, endValue) => {
+            const [sVal, eVal] = XEUtils.orderBy([XEUtils.toNumber(startValue), XEUtils.toNumber(endValue)]);
+            const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = currValue;
+            internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+        };
+        const parseArrs = (arrVals) => {
+            const [sVal, eVal] = XEUtils.orderBy(arrVals);
+            const currValue = XEUtils.floor(XEUtils.toNumber(sVal || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = currValue;
+            internalData.endValue = XEUtils.floor(XEUtils.toNumber(eVal || 0));
+        };
+        const parseNum = (val) => {
+            const currValue = XEUtils.floor(XEUtils.toNumber(val || 0));
+            internalData.currValue = currValue;
+            internalData.startValue = 0;
+            internalData.endValue = currValue;
+        };
+        const updateModelValue = (umType) => {
+            const { range, modelValue, startValue, endValue } = props;
+            if (!umType) {
+                if (range) {
+                    if (XEUtils.eqNull(modelValue)) {
+                        if (startValue || endValue) {
+                            parseFields(startValue, endValue);
+                        }
+                    }
+                    else {
+                        if (XEUtils.isArray(modelValue)) {
+                            parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                        }
+                        else {
+                            parseNum(modelValue);
+                        }
+                    }
+                }
+                else {
+                    parseNum(modelValue);
+                }
+            }
+            else if (range && umType === 2) {
+                parseFields(startValue, endValue);
             }
             else {
-                reactData.startValue = 0;
-                reactData.endValue = XEUtils.floor(XEUtils.toNumber(modelValue || 0));
+                if (XEUtils.isArray(modelValue)) {
+                    parseArrs(modelValue.map(num => XEUtils.toNumber(num)));
+                }
+                else {
+                    parseNum(modelValue);
+                }
             }
+            updateBarStyle();
+            updateTrackStyle();
         };
         const updateBarStyle = () => {
-            const { startValue, endValue } = reactData;
-            const trackElem = refTrackElem.value;
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
             const startBtnElem = refStartBtnElem.value;
             const endBtnElem = refEndBtnElem.value;
-            let startPercent = 0;
-            let endPercent = 0;
-            if (startValue > endValue) {
-                startPercent = getStartPercent(endValue);
-                endPercent = getEndPercent(endValue, startValue);
+            if (range) {
+                const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+                if (startBtnElem) {
+                    startBtnElem.style.left = getBarPercent(sVal) + '%';
+                }
+                if (endBtnElem) {
+                    endBtnElem.style.left = getBarPercent(eVal) + '%';
+                }
             }
             else {
-                startPercent = getStartPercent(startValue);
-                endPercent = getEndPercent(startValue, endValue);
+                if (endBtnElem) {
+                    endBtnElem.style.left = getBarPercent(currValue) + '%';
+                }
             }
+        };
+        const updateTrackStyle = () => {
+            const { range } = props;
+            const { currValue, startValue, endValue } = internalData;
+            const trackElem = refTrackElem.value;
             if (trackElem) {
-                trackElem.style.left = `${startPercent}%`;
-                trackElem.style.width = `${endPercent}%`;
-            }
-            if (startBtnElem) {
-                startBtnElem.style.left = `${startPercent}%`;
-            }
-            if (endBtnElem) {
-                endBtnElem.style.left = `${XEUtils.floor(startPercent + endPercent)}%`;
+                if (range) {
+                    const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+                    trackElem.style.left = getBarPercent(sVal) + '%';
+                    trackElem.style.width = getBarPercent(eVal - sVal) + '%';
+                }
+                else {
+                    trackElem.style.left = '0';
+                    trackElem.style.width = getBarPercent(currValue) + '%';
+                }
             }
         };
         const changeEvent = (evnt) => {
             const { range } = props;
-            const { startValue, endValue } = reactData;
-            const value = range ? [startValue, endValue].sort() : endValue;
+            const { currValue, startValue, endValue } = internalData;
+            const vals = range ? XEUtils.orderBy([startValue, endValue]) : [];
+            const value = range ? vals : currValue;
             emitModel(value);
+            if (range) {
+                emit('update:startValue', vals[0] || 0);
+                emit('update:endValue', vals[1] || 0);
+            }
             dispatchEvent('change', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
-        const handleMousedownEvent = (evnt, isEnd) => {
-            const { immediate } = props;
-            const formReadonly = computeFormReadonly.value;
-            const isDisabled = computeIsDisabled.value;
+        const getValueByLeft = (offsetLeft, barWidth) => {
             const maxNum = computeMaxNum.value;
             const minNum = computeMinNum.value;
+            if (barWidth === 0) {
+                return minNum;
+            }
+            const clamped = Math.max(0, Math.min(barWidth, offsetLeft));
+            const ratio = clamped / barWidth;
+            const raw = minNum + ratio * (maxNum - minNum);
+            return Math.floor(raw);
+        };
+        const handleBtnMousedownEvent = (evnt) => {
+            const { range, immediate } = props;
+            const btnElem = evnt.currentTarget;
+            const formReadonly = computeFormReadonly.value;
+            const isDisabled = computeIsDisabled.value;
             if (!(formReadonly || isDisabled)) {
                 evnt.preventDefault();
                 document.onmousemove = evnt => {
@@ -37886,41 +37965,50 @@ var VxeSliderComponent = defineVxeComponent({
                     const el = refElem.value;
                     const barElem = refBarElem.value;
                     if (el && barElem) {
+                        const btnType = btnElem.getAttribute('data-type');
                         const barRect = barElem.getBoundingClientRect();
-                        const trackWidth = (evnt.clientX - barRect.left) / barRect.width;
-                        if (isEnd) {
-                            reactData.endValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum) + minNum)));
-                        }
-                        else {
-                            reactData.startValue = XEUtils.floor(Math.max(minNum, Math.min(maxNum, trackWidth * (maxNum - minNum))));
+                        const barWidth = barRect.width;
+                        const offsetLeft = Math.min(barWidth, Math.max(0, evnt.clientX - barRect.left));
+                        const currValue = getValueByLeft(offsetLeft, barWidth);
+                        if (range) {
+                            if (btnType === '1') {
+                                internalData.startValue = currValue;
+                            }
+                            else {
+                                internalData.endValue = currValue;
+                            }
                         }
-                        dispatchEvent('track-dragover', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                        internalData.currValue = currValue;
+                        btnElem.style.left = getBarPercent(currValue) + '%';
+                        dispatchEvent('track-dragover', {
+                            currentValue: internalData.currValue,
+                            startValue: internalData.startValue,
+                            endValue: internalData.endValue
+                        }, evnt);
                     }
                     if (immediate) {
                         changeEvent(evnt);
                     }
-                    updateBarStyle();
+                    updateTrackStyle();
                 };
                 document.onmouseup = (evnt) => {
                     document.onmousemove = null;
                     document.onmouseup = null;
-                    dispatchEvent('track-dragend', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                    dispatchEvent('track-dragend', {
+                        currentValue: internalData.currValue,
+                        startValue: internalData.startValue,
+                        endValue: internalData.endValue
+                    }, evnt);
                     changeEvent(evnt);
-                    updateBarStyle();
+                    updateTrackStyle();
                 };
-                dispatchEvent('track-dragstart', { startValue: reactData.startValue, endValue: reactData.endValue }, evnt);
+                dispatchEvent('track-dragstart', {
+                    currentValue: internalData.currValue,
+                    startValue: internalData.startValue,
+                    endValue: internalData.endValue
+                }, evnt);
             }
         };
-        const handleStartMousedownEvent = (evnt) => {
-            const endBtnElem = refEndBtnElem.value;
-            const startBtnElem = evnt.currentTarget;
-            handleMousedownEvent(evnt, endBtnElem ? endBtnElem.offsetLeft < startBtnElem.offsetLeft : false);
-        };
-        const handleEndMousedownEvent = (evnt) => {
-            const startBtnElem = refStartBtnElem.value;
-            const endBtnElem = evnt.currentTarget;
-            handleMousedownEvent(evnt, startBtnElem ? endBtnElem.offsetLeft > startBtnElem.offsetLeft : true);
-        };
         const collapsePanePrivateMethods = {};
         Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
         const renderVN = () => {
@@ -37952,33 +38040,40 @@ var VxeSliderComponent = defineVxeComponent({
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: refStartBtnElem,
-                            class: 'vxe-slider--bar-btn vxe-slider--start-btn',
-                            onMousedown: handleStartMousedownEvent
+                            class: 'vxe-slider--bar-btn',
+                            'data-type': '1',
+                            onMousedown: handleBtnMousedownEvent
                         }),
                     formReadonly
                         ? renderEmptyElement($xeSlider)
                         : h('div', {
                             ref: refEndBtnElem,
-                            class: 'vxe-slider--bar-btn vxe-slider--end-btn',
-                            onMousedown: handleEndMousedownEvent
+                            class: 'vxe-slider--bar-btn',
+                            'data-type': '2',
+                            onMousedown: handleBtnMousedownEvent
                         })
                 ])
             ]);
         };
         watch(() => props.modelValue, () => {
             if (!internalData._isUp) {
-                updateModel();
+                updateModelValue(1);
+            }
+            internalData._isUp = false;
+        });
+        watch(computeMVal, () => {
+            if (!internalData._isUp) {
+                updateModelValue(2);
             }
             internalData._isUp = false;
         });
         onMounted(() => {
-            updateBarStyle();
+            updateModelValue();
         });
         onBeforeUnmount(() => {
             XEUtils.assign(reactData, createReactData$6());
             XEUtils.assign(internalData, createInternalData$6());
         });
-        updateModel();
         $xeSlider.renderVN = renderVN;
         return $xeSlider;
     },
@@ -38026,6 +38121,10 @@ var VxeSpaceComponent = defineVxeComponent({
         separator: {
             type: String,
             default: () => getConfig$3().space.separator
+        },
+        align: {
+            type: String,
+            default: () => getConfig$3().space.align
         }
     },
     emits: [],
@@ -38041,7 +38140,7 @@ var VxeSpaceComponent = defineVxeComponent({
             refElem
         };
         const computeWrapperStyle = computed(() => {
-            const { gap } = props;
+            const { align, gap } = props;
             const stys = {};
             let rowGap = '';
             let columGap = '';
@@ -38059,6 +38158,9 @@ var VxeSpaceComponent = defineVxeComponent({
                     columGap = gap.columGap || '';
                 }
             }
+            if (align) {
+                stys['align-items'] = align;
+            }
             if (!eqEmptyValue(rowGap)) {
                 stys['--vxe-ui-space-current-row-gap'] = toCssUnit(rowGap);
             }
@@ -38084,11 +38186,31 @@ var VxeSpaceComponent = 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.each(defaultSlot({}), (itemVN, index, items) => {
+                    itemVNs.push(h('div', {
+                        key: 'i' + index,
+                        class: ['vxe-space--item', getPropClass(itemClassName, { index })]
+                    }, [itemVN]));
+                    if ((separator || separatorSlot) && index < items.length - 1) {
+                        itemVNs.push(h('div', {
+                            key: 's' + index,
+                            class: 'vxe-space--separator'
+                        }, separatorSlot ? separatorSlot({}) : ('' + separator)));
+                    }
+                });
+            }
+            return itemVNs;
+        };
         const renderVN = () => {
-            const { vertical, wrap, className, itemClassName } = props;
+            const { vertical, wrap, className } = props;
             const wrapperStyle = computeWrapperStyle.value;
             const vSize = computeSize.value;
-            const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
                 class: ['vxe-space', getPropClass(className, {}), {
@@ -38097,14 +38219,7 @@ var VxeSpaceComponent = defineVxeComponent({
                         'is--vertical': vertical
                     }],
                 style: wrapperStyle
-            }, defaultSlot
-                ? (defaultSlot({}) || []).map((itemVN, index) => {
-                    return h('div', {
-                        key: index,
-                        class: ['vxe-space--item', getPropClass(itemClassName, { index })]
-                    }, [itemVN]);
-                })
-                : []);
+            }, renderItems());
         };
         $xeSpace.renderVN = renderVN;
         return $xeSpace;