vxe-pc-ui 4.20.34 → 4.20.35

package/es/slider/src/slider.js

@@ -17,318 +17,340 @@ function createInternalData() {
 function createReactData() {
   return {};
 }
-var slider_default = defineVxeComponent({
-  name: "VxeSlider",
-  props: {
-    modelValue: [String, Number, Array],
-    startValue: [String, Number],
-    endValue: [String, Number],
-    vertical: Boolean,
-    max: {
-      type: [String, Number],
-      default: () => getConfig().slider.max
+var slider_default = (
+  /* define-vxe-component start */
+  defineVxeComponent({
+    name: "VxeSlider",
+    props: {
+      modelValue: [String, Number, Array],
+      startValue: [String, Number],
+      endValue: [String, Number],
+      vertical: Boolean,
+      max: {
+        type: [String, Number],
+        default: () => getConfig().slider.max
+      },
+      min: {
+        type: [String, Number],
+        default: () => getConfig().slider.min
+      },
+      step: {
+        type: [String, Number],
+        default: () => getConfig().slider.step
+      },
+      size: {
+        type: String,
+        default: () => getConfig().slider.size || getConfig().size
+      },
+      range: {
+        type: Boolean,
+        default: () => getConfig().slider.range
+      },
+      readonly: {
+        type: Boolean,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: null
+      },
+      status: {
+        type: String,
+        default: () => getConfig().slider.status
+      },
+      immediate: {
+        type: Boolean,
+        default: () => getConfig().slider.immediate
+      },
+      showTooltip: {
+        type: Boolean,
+        default: () => getConfig().slider.showTooltip
+      },
+      tooltipConfig: Object
     },
-    min: {
-      type: [String, Number],
-      default: () => getConfig().slider.min
-    },
-    step: {
-      type: [String, Number],
-      default: () => getConfig().slider.step
-    },
-    size: {
-      type: String,
-      default: () => getConfig().slider.size || getConfig().size
-    },
-    range: {
-      type: Boolean,
-      default: () => getConfig().slider.range
-    },
-    readonly: {
-      type: Boolean,
-      default: null
-    },
-    disabled: {
-      type: Boolean,
-      default: null
-    },
-    status: {
-      type: String,
-      default: () => getConfig().slider.status
-    },
-    immediate: {
-      type: Boolean,
-      default: () => getConfig().slider.immediate
-    },
-    showTooltip: {
-      type: Boolean,
-      default: () => getConfig().slider.showTooltip
-    },
-    tooltipConfig: Object
-  },
-  emits: ["update:modelValue", "update:startValue", "update:endValue", "change", "track-dragstart", "track-dragover", "track-dragend"],
-  setup(props, context) {
-    const { emit } = context;
-    const $xeForm = inject("$xeForm", null);
-    const formItemInfo = inject("xeFormItemInfo", null);
-    const xID = XEUtils.uniqueId();
-    const { computeSize } = useFns.useSize(props);
-    const refElem = ref();
-    const refBarElem = ref();
-    const refTrackElem = ref();
-    const refStartBtnElem = ref();
-    const refEndBtnElem = ref();
-    const reactData = reactive(createReactData());
-    const internalData = createInternalData();
-    const refMaps = {
-      refElem
-    };
-    const computeFormReadonly = computed(() => {
-      const { readonly } = props;
-      if (readonly === null) {
-        if ($xeForm) {
-          return $xeForm.props.readonly;
+    emits: ["update:modelValue", "update:startValue", "update:endValue", "change", "track-dragstart", "track-dragover", "track-dragend"],
+    setup(props, context) {
+      const { emit } = context;
+      const $xeForm = inject("$xeForm", null);
+      const formItemInfo = inject("xeFormItemInfo", null);
+      const xID = XEUtils.uniqueId();
+      const { computeSize } = useFns.useSize(props);
+      const refElem = ref();
+      const refBarElem = ref();
+      const refTrackElem = ref();
+      const refStartBtnElem = ref();
+      const refEndBtnElem = ref();
+      const reactData = reactive(createReactData());
+      const internalData = createInternalData();
+      const refMaps = {
+        refElem
+      };
+      const computeFormReadonly = computed(() => {
+        const { readonly } = props;
+        if (readonly === null) {
+          if ($xeForm) {
+            return $xeForm.props.readonly;
+          }
+          return false;
         }
-        return false;
-      }
-      return readonly;
-    });
-    const computeIsDisabled = computed(() => {
-      const { disabled } = props;
-      if (disabled === null) {
-        if ($xeForm) {
-          return $xeForm.props.disabled;
+        return readonly;
+      });
+      const computeIsDisabled = computed(() => {
+        const { disabled } = props;
+        if (disabled === null) {
+          if ($xeForm) {
+            return $xeForm.props.disabled;
+          }
+          return false;
         }
-        return false;
-      }
-      return disabled;
-    });
-    const computeMaxNum = computed(() => {
-      return XEUtils.toNumber(props.max || 0);
-    });
-    const computeMinNum = computed(() => {
-      return XEUtils.toNumber(props.min || 0);
-    });
-    const computeMVal = computed(() => {
-      const { range, startValue, endValue } = props;
-      return range ? `${startValue || ""}${endValue || ""}` : "";
-    });
-    const computeTooltipOpts = computed(() => {
-      return Object.assign({}, getConfig().slider.tooltipConfig, props.tooltipConfig);
-    });
-    const computeMaps = {};
-    const $xeSlider = {
-      xID,
-      props,
-      context,
-      reactData,
-      getRefMaps: () => refMaps,
-      getComputeMaps: () => computeMaps
-    };
-    const emitModel = (value) => {
-      internalData._isUp = true;
-      emit("update:modelValue", value);
-    };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, { $slider: $xeSlider }, params));
-    };
-    const collapsePaneMethods = {
-      dispatchEvent
-    };
-    const getBarPercent = (currValue) => {
-      const maxNum = computeMaxNum.value;
-      const minNum = computeMinNum.value;
-      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)));
+        return disabled;
+      });
+      const computeMaxNum = computed(() => {
+        return XEUtils.toNumber(props.max || 0);
+      });
+      const computeMinNum = computed(() => {
+        return XEUtils.toNumber(props.min || 0);
+      });
+      const computeMVal = computed(() => {
+        const { range, startValue, endValue } = props;
+        return range ? `${startValue || ""}${endValue || ""}` : "";
+      });
+      const computeTooltipOpts = computed(() => {
+        return Object.assign({}, getConfig().slider.tooltipConfig, props.tooltipConfig);
+      });
+      const computeMaps = {};
+      const $xeSlider = {
+        xID,
+        props,
+        context,
+        reactData,
+        getRefMaps: () => refMaps,
+        getComputeMaps: () => computeMaps
+      };
+      const emitModel = (value) => {
+        internalData._isUp = true;
+        emit("update:modelValue", value);
+      };
+      const dispatchEvent = (type, params, evnt) => {
+        emit(type, createEvent(evnt, { $slider: $xeSlider }, params));
+      };
+      const collapsePaneMethods = {
+        dispatchEvent
+      };
+      const getBarPercent = (currValue) => {
+        const maxNum = computeMaxNum.value;
+        const minNum = computeMinNum.value;
+        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 {
-              parseNum(modelValue);
+              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 {
-          parseNum(modelValue);
+          if (XEUtils.isArray(modelValue)) {
+            parseArrs(modelValue.map((num) => XEUtils.toNumber(num)));
+          } else {
+            parseNum(modelValue);
+          }
         }
-      } else if (range && umType === 2) {
-        parseFields(startValue, endValue);
-      } else {
-        if (XEUtils.isArray(modelValue)) {
-          parseArrs(modelValue.map((num) => XEUtils.toNumber(num)));
+        updateBarStyle();
+        updateTrackStyle();
+      };
+      const updateBarStyle = () => {
+        const { range } = props;
+        const { currValue, startValue, endValue } = internalData;
+        const startBtnElem = refStartBtnElem.value;
+        const endBtnElem = refEndBtnElem.value;
+        if (range) {
+          const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
+          if (startBtnElem) {
+            startBtnElem.style.left = getBarPercent(sVal) + "%";
+          }
+          if (endBtnElem) {
+            endBtnElem.style.left = getBarPercent(eVal) + "%";
+          }
         } else {
-          parseNum(modelValue);
+          if (endBtnElem) {
+            endBtnElem.style.left = getBarPercent(currValue) + "%";
+          }
         }
-      }
-      updateBarStyle();
-      updateTrackStyle();
-    };
-    const updateBarStyle = () => {
-      const { range } = props;
-      const { currValue, startValue, endValue } = internalData;
-      const startBtnElem = refStartBtnElem.value;
-      const endBtnElem = refEndBtnElem.value;
-      if (range) {
-        const [sVal, eVal] = XEUtils.orderBy([startValue, endValue]);
-        if (startBtnElem) {
-          startBtnElem.style.left = getBarPercent(sVal) + "%";
+      };
+      const updateTrackStyle = () => {
+        const { range } = props;
+        const { currValue, startValue, endValue } = internalData;
+        const trackElem = refTrackElem.value;
+        if (trackElem) {
+          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) + "%";
+          }
         }
-        if (endBtnElem) {
-          endBtnElem.style.left = getBarPercent(eVal) + "%";
+      };
+      const changeEvent = (evnt) => {
+        const { range } = props;
+        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);
         }
-      } else {
-        if (endBtnElem) {
-          endBtnElem.style.left = getBarPercent(currValue) + "%";
+        dispatchEvent("change", { value }, evnt);
+        if ($xeForm && formItemInfo) {
+          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
         }
-      }
-    };
-    const updateTrackStyle = () => {
-      const { range } = props;
-      const { currValue, startValue, endValue } = internalData;
-      const trackElem = refTrackElem.value;
-      if (trackElem) {
-        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 getValueByLeft = (offsetLeft, barWidth) => {
+        const maxNum = computeMaxNum.value;
+        const minNum = computeMinNum.value;
+        if (barWidth === 0) {
+          return minNum;
         }
-      }
-    };
-    const changeEvent = (evnt) => {
-      const { range } = props;
-      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 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 handleShowTip = (btnElem) => {
-      const { showTooltip } = props;
-      if (showTooltip) {
-        if (VxeUI.tooltip) {
-          const { currValue } = internalData;
-          const tooltipOpts = computeTooltipOpts.value;
-          const { contentMethod } = tooltipOpts;
-          const content = getText(
-            contentMethod ? contentMethod({
-              $slider: $xeSlider,
-              value: currValue
-            }) : "" + currValue
-          );
-          if (content) {
-            VxeUI.tooltip.open(
-              btnElem,
-              Object.assign(
-                {},
-                {
-                  ...tooltipOpts,
-                  content
-                },
-                {
-                  contentMethod: void 0
-                }
-              )
+        const clamped = Math.max(0, Math.min(barWidth, offsetLeft));
+        const ratio = clamped / barWidth;
+        const raw = minNum + ratio * (maxNum - minNum);
+        return Math.floor(raw);
+      };
+      const handleShowTip = (btnElem) => {
+        const { showTooltip } = props;
+        if (showTooltip) {
+          if (VxeUI.tooltip) {
+            const { currValue } = internalData;
+            const tooltipOpts = computeTooltipOpts.value;
+            const { contentMethod } = tooltipOpts;
+            const content = getText(
+              contentMethod ? contentMethod({
+                $slider: $xeSlider,
+                value: currValue
+              }) : "" + currValue
             );
-          } else {
-            VxeUI.tooltip.close();
+            if (content) {
+              VxeUI.tooltip.open(
+                btnElem,
+                Object.assign(
+                  {},
+                  {
+                    ...tooltipOpts,
+                    content
+                  },
+                  {
+                    contentMethod: void 0
+                  }
+                )
+              );
+            } else {
+              VxeUI.tooltip.close();
+            }
           }
         }
-      }
-    };
-    const handleHideTip = () => {
-      const { showTooltip } = props;
-      if (showTooltip) {
-        if (VxeUI.tooltip) {
-          VxeUI.tooltip.close();
+      };
+      const handleHideTip = () => {
+        const { showTooltip } = props;
+        if (showTooltip) {
+          if (VxeUI.tooltip) {
+            VxeUI.tooltip.close();
+          }
         }
-      }
-    };
-    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 = (evnt2) => {
-          evnt2.preventDefault();
-          const el = refElem.value;
-          const barElem = refBarElem.value;
-          internalData.isDragStatus = true;
-          if (el && barElem) {
-            const btnType = btnElem.getAttribute("data-type");
-            const barRect = barElem.getBoundingClientRect();
-            const barWidth = barRect.width;
-            const offsetLeft = Math.min(barWidth, Math.max(0, evnt2.clientX - barRect.left));
-            const currValue = getValueByLeft(offsetLeft, barWidth);
-            if (range) {
-              if (btnType === "1") {
-                internalData.startValue = currValue;
-              } else {
-                internalData.endValue = currValue;
+      };
+      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 = (evnt2) => {
+            evnt2.preventDefault();
+            const el = refElem.value;
+            const barElem = refBarElem.value;
+            internalData.isDragStatus = true;
+            if (el && barElem) {
+              const btnType = btnElem.getAttribute("data-type");
+              const barRect = barElem.getBoundingClientRect();
+              const barWidth = barRect.width;
+              const offsetLeft = Math.min(barWidth, Math.max(0, evnt2.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",
+                {
+                  currentValue: internalData.currValue,
+                  startValue: internalData.startValue,
+                  endValue: internalData.endValue
+                },
+                evnt2
+              );
             }
-            internalData.currValue = currValue;
-            btnElem.style.left = getBarPercent(currValue) + "%";
+            if (immediate) {
+              changeEvent(evnt2);
+            }
+            updateTrackStyle();
+            handleShowTip(btnElem);
+          };
+          document.onmouseup = (evnt2) => {
+            document.onmousemove = null;
+            document.onmouseup = null;
+            internalData.isDragStatus = false;
             dispatchEvent(
-              "track-dragover",
+              "track-dragend",
               {
                 currentValue: internalData.currValue,
                 startValue: internalData.startValue,
@@ -336,146 +358,127 @@ var slider_default = defineVxeComponent({
               },
               evnt2
             );
-          }
-          if (immediate) {
             changeEvent(evnt2);
-          }
-          updateTrackStyle();
-          handleShowTip(btnElem);
-        };
-        document.onmouseup = (evnt2) => {
-          document.onmousemove = null;
-          document.onmouseup = null;
-          internalData.isDragStatus = false;
+            updateTrackStyle();
+            if (!internalData.isBtnActive) {
+              handleHideTip();
+            }
+          };
           dispatchEvent(
-            "track-dragend",
+            "track-dragstart",
             {
               currentValue: internalData.currValue,
               startValue: internalData.startValue,
               endValue: internalData.endValue
             },
-            evnt2
+            evnt
           );
-          changeEvent(evnt2);
-          updateTrackStyle();
-          if (!internalData.isBtnActive) {
-            handleHideTip();
-          }
-        };
-        dispatchEvent(
-          "track-dragstart",
+          internalData.isDragStatus = false;
+        }
+      };
+      const handleBtnMouseenterEvent = (evnt) => {
+        const { startValue, endValue } = internalData;
+        const btnElem = evnt.currentTarget;
+        const btnType = btnElem.getAttribute("data-type");
+        internalData.currValue = btnType === "1" ? startValue : endValue;
+        internalData.isBtnActive = true;
+        handleShowTip(btnElem);
+      };
+      const handleBtnMouseleaveEvent = () => {
+        const { isDragStatus } = internalData;
+        internalData.isBtnActive = false;
+        if (!isDragStatus) {
+          handleHideTip();
+        }
+      };
+      const collapsePanePrivateMethods = {};
+      Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
+      const renderVN = () => {
+        const { status, vertical, range } = props;
+        const vSize = computeSize.value;
+        const formReadonly = computeFormReadonly.value;
+        const isDisabled = computeIsDisabled.value;
+        return h(
+          "div",
           {
-            currentValue: internalData.currValue,
-            startValue: internalData.startValue,
-            endValue: internalData.endValue
+            ref: refElem,
+            class: [
+              "vxe-slider",
+              {
+                [`size--${vSize}`]: vSize,
+                [`theme--${status}`]: status,
+                "is--vertical": vertical,
+                "is--readonly": formReadonly,
+                "is--disabled": isDisabled
+              }
+            ]
           },
-          evnt
-        );
-        internalData.isDragStatus = false;
-      }
-    };
-    const handleBtnMouseenterEvent = (evnt) => {
-      const { startValue, endValue } = internalData;
-      const btnElem = evnt.currentTarget;
-      const btnType = btnElem.getAttribute("data-type");
-      internalData.currValue = btnType === "1" ? startValue : endValue;
-      internalData.isBtnActive = true;
-      handleShowTip(btnElem);
-    };
-    const handleBtnMouseleaveEvent = () => {
-      const { isDragStatus } = internalData;
-      internalData.isBtnActive = false;
-      if (!isDragStatus) {
-        handleHideTip();
-      }
-    };
-    const collapsePanePrivateMethods = {};
-    Object.assign($xeSlider, collapsePaneMethods, collapsePanePrivateMethods);
-    const renderVN = () => {
-      const { status, vertical, range } = props;
-      const vSize = computeSize.value;
-      const formReadonly = computeFormReadonly.value;
-      const isDisabled = computeIsDisabled.value;
-      return h(
-        "div",
-        {
-          ref: refElem,
-          class: [
-            "vxe-slider",
-            {
-              [`size--${vSize}`]: vSize,
-              [`theme--${status}`]: status,
-              "is--vertical": vertical,
-              "is--readonly": formReadonly,
-              "is--disabled": isDisabled
-            }
+          [
+            h(
+              "div",
+              {
+                class: "vxe-slider--inner"
+              },
+              [
+                h("div", {
+                  ref: refBarElem,
+                  class: "vxe-slider--bar-wrapper"
+                }),
+                h("div", {
+                  ref: refTrackElem,
+                  class: "vxe-slider--bar-track"
+                }),
+                formReadonly || !range ? renderEmptyElement($xeSlider) : h("div", {
+                  ref: refStartBtnElem,
+                  class: "vxe-slider--bar-btn",
+                  "data-type": "1",
+                  onMouseenter: handleBtnMouseenterEvent,
+                  onMouseleave: handleBtnMouseleaveEvent,
+                  onMousedown: handleBtnMousedownEvent
+                }),
+                formReadonly ? renderEmptyElement($xeSlider) : h("div", {
+                  ref: refEndBtnElem,
+                  class: "vxe-slider--bar-btn",
+                  "data-type": "2",
+                  onMouseenter: handleBtnMouseenterEvent,
+                  onMouseleave: handleBtnMouseleaveEvent,
+                  onMousedown: handleBtnMousedownEvent
+                })
+              ]
+            )
           ]
-        },
-        [
-          h(
-            "div",
-            {
-              class: "vxe-slider--inner"
-            },
-            [
-              h("div", {
-                ref: refBarElem,
-                class: "vxe-slider--bar-wrapper"
-              }),
-              h("div", {
-                ref: refTrackElem,
-                class: "vxe-slider--bar-track"
-              }),
-              formReadonly || !range ? renderEmptyElement($xeSlider) : h("div", {
-                ref: refStartBtnElem,
-                class: "vxe-slider--bar-btn",
-                "data-type": "1",
-                onMouseenter: handleBtnMouseenterEvent,
-                onMouseleave: handleBtnMouseleaveEvent,
-                onMousedown: handleBtnMousedownEvent
-              }),
-              formReadonly ? renderEmptyElement($xeSlider) : h("div", {
-                ref: refEndBtnElem,
-                class: "vxe-slider--bar-btn",
-                "data-type": "2",
-                onMouseenter: handleBtnMouseenterEvent,
-                onMouseleave: handleBtnMouseleaveEvent,
-                onMousedown: handleBtnMousedownEvent
-              })
-            ]
-          )
-        ]
+        );
+      };
+      watch(
+        () => props.modelValue,
+        () => {
+          if (!internalData._isUp) {
+            updateModelValue(1);
+          }
+          internalData._isUp = false;
+        }
       );
-    };
-    watch(
-      () => props.modelValue,
-      () => {
+      watch(computeMVal, () => {
         if (!internalData._isUp) {
-          updateModelValue(1);
+          updateModelValue(2);
         }
         internalData._isUp = false;
-      }
-    );
-    watch(computeMVal, () => {
-      if (!internalData._isUp) {
-        updateModelValue(2);
-      }
-      internalData._isUp = false;
-    });
-    onMounted(() => {
-      updateModelValue();
-    });
-    onBeforeUnmount(() => {
-      XEUtils.assign(reactData, createReactData());
-      XEUtils.assign(internalData, createInternalData());
-    });
-    $xeSlider.renderVN = renderVN;
-    return $xeSlider;
-  },
-  render() {
-    return this.renderVN();
-  }
-});
+      });
+      onMounted(() => {
+        updateModelValue();
+      });
+      onBeforeUnmount(() => {
+        XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
+      });
+      $xeSlider.renderVN = renderVN;
+      return $xeSlider;
+    },
+    render() {
+      return this.renderVN();
+    }
+  })
+);
 export {
   slider_default as default
 };