element-plus 1.2.0-beta.3 → 1.2.0-beta.4

package/es/components/slider/src/index.vue_vue_type_script_lang.mjs

@@ -0,0 +1,268 @@
+import { defineComponent, reactive, computed, toRefs, provide, watch, ref, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import { ElInputNumber } from '../../input-number/index.mjs';
+import { UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT } from '../../../utils/constants.mjs';
+import { on, off } from '../../../utils/dom.mjs';
+import { throwError } from '../../../utils/error.mjs';
+import './button.mjs';
+import './marker.mjs';
+import { useMarks } from './useMarks.mjs';
+import { useSlide } from './useSlide.mjs';
+import { useStops } from './useStops.mjs';
+import script$1 from './button.vue_vue_type_script_lang.mjs';
+import script$2 from './marker.vue_vue_type_script_lang.mjs';
+
+var script = defineComponent({
+  name: "ElSlider",
+  components: {
+    ElInputNumber,
+    SliderButton: script$1,
+    SliderMarker: script$2
+  },
+  props: {
+    modelValue: {
+      type: [Number, Array],
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    showInput: {
+      type: Boolean,
+      default: false
+    },
+    showInputControls: {
+      type: Boolean,
+      default: true
+    },
+    inputSize: {
+      type: String,
+      default: "small"
+    },
+    showStops: {
+      type: Boolean,
+      default: false
+    },
+    showTooltip: {
+      type: Boolean,
+      default: true
+    },
+    formatTooltip: {
+      type: Function,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    height: {
+      type: String,
+      default: ""
+    },
+    debounce: {
+      type: Number,
+      default: 300
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    tooltipClass: {
+      type: String,
+      default: void 0
+    },
+    marks: Object
+  },
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],
+  setup(props, { emit }) {
+    const initData = reactive({
+      firstValue: 0,
+      secondValue: 0,
+      oldValue: 0,
+      dragging: false,
+      sliderSize: 1
+    });
+    const {
+      elFormItem,
+      slider,
+      firstButton,
+      secondButton,
+      sliderDisabled,
+      minValue,
+      maxValue,
+      runwayStyle,
+      barStyle,
+      resetSize,
+      emitChange,
+      onSliderClick,
+      setFirstValue,
+      setSecondValue
+    } = useSlide(props, initData, emit);
+    const { stops, getStopStyle } = useStops(props, initData, minValue, maxValue);
+    const markList = useMarks(props);
+    useWatch(props, initData, minValue, maxValue, emit, elFormItem);
+    const precision = computed(() => {
+      const precisions = [props.min, props.max, props.step].map((item) => {
+        const decimal = `${item}`.split(".")[1];
+        return decimal ? decimal.length : 0;
+      });
+      return Math.max.apply(null, precisions);
+    });
+    const { sliderWrapper } = useLifecycle(props, initData, resetSize);
+    const { firstValue, secondValue, oldValue, dragging, sliderSize } = toRefs(initData);
+    const updateDragging = (val) => {
+      initData.dragging = val;
+    };
+    provide("SliderProvider", {
+      ...toRefs(props),
+      sliderSize,
+      disabled: sliderDisabled,
+      precision,
+      emitChange,
+      resetSize,
+      updateDragging
+    });
+    return {
+      firstValue,
+      secondValue,
+      oldValue,
+      dragging,
+      sliderSize,
+      slider,
+      firstButton,
+      secondButton,
+      sliderDisabled,
+      runwayStyle,
+      barStyle,
+      emitChange,
+      onSliderClick,
+      getStopStyle,
+      setFirstValue,
+      setSecondValue,
+      stops,
+      markList,
+      sliderWrapper
+    };
+  }
+});
+const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
+  const _emit = (val) => {
+    emit(UPDATE_MODEL_EVENT, val);
+    emit(INPUT_EVENT, val);
+  };
+  const valueChanged = () => {
+    if (props.range) {
+      return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
+    } else {
+      return props.modelValue !== initData.oldValue;
+    }
+  };
+  const setValues = () => {
+    var _a, _b;
+    if (props.min > props.max) {
+      throwError("Slider", "min should not be greater than max.");
+      return;
+    }
+    const val = props.modelValue;
+    if (props.range && Array.isArray(val)) {
+      if (val[1] < props.min) {
+        _emit([props.min, props.min]);
+      } else if (val[0] > props.max) {
+        _emit([props.max, props.max]);
+      } else if (val[0] < props.min) {
+        _emit([props.min, val[1]]);
+      } else if (val[1] > props.max) {
+        _emit([val[0], props.max]);
+      } else {
+        initData.firstValue = val[0];
+        initData.secondValue = val[1];
+        if (valueChanged()) {
+          (_a = elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change");
+          initData.oldValue = val.slice();
+        }
+      }
+    } else if (!props.range && typeof val === "number" && !isNaN(val)) {
+      if (val < props.min) {
+        _emit(props.min);
+      } else if (val > props.max) {
+        _emit(props.max);
+      } else {
+        initData.firstValue = val;
+        if (valueChanged()) {
+          (_b = elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change");
+          initData.oldValue = val;
+        }
+      }
+    }
+  };
+  setValues();
+  watch(() => initData.dragging, (val) => {
+    if (!val) {
+      setValues();
+    }
+  });
+  watch(() => props.modelValue, (val, oldVal) => {
+    if (initData.dragging || Array.isArray(val) && Array.isArray(oldVal) && val.every((item, index) => item === oldVal[index])) {
+      return;
+    }
+    setValues();
+  });
+  watch(() => [props.min, props.max], () => {
+    setValues();
+  });
+};
+const useLifecycle = (props, initData, resetSize) => {
+  const sliderWrapper = ref(null);
+  onMounted(async () => {
+    let valuetext;
+    if (props.range) {
+      if (Array.isArray(props.modelValue)) {
+        initData.firstValue = Math.max(props.min, props.modelValue[0]);
+        initData.secondValue = Math.min(props.max, props.modelValue[1]);
+      } else {
+        initData.firstValue = props.min;
+        initData.secondValue = props.max;
+      }
+      initData.oldValue = [initData.firstValue, initData.secondValue];
+      valuetext = `${initData.firstValue}-${initData.secondValue}`;
+    } else {
+      if (typeof props.modelValue !== "number" || isNaN(props.modelValue)) {
+        initData.firstValue = props.min;
+      } else {
+        initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue));
+      }
+      initData.oldValue = initData.firstValue;
+      valuetext = initData.firstValue;
+    }
+    sliderWrapper.value.setAttribute("aria-valuetext", valuetext);
+    sliderWrapper.value.setAttribute("aria-label", props.label ? props.label : `slider between ${props.min} and ${props.max}`);
+    on(window, "resize", resetSize);
+    await nextTick();
+    resetSize();
+  });
+  onBeforeUnmount(() => {
+    off(window, "resize", resetSize);
+  });
+  return {
+    sliderWrapper
+  };
+};
+
+export { script as default };
+//# sourceMappingURL=index.vue_vue_type_script_lang.mjs.map

package/es/components/slider/src/index.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"sliderWrapper\"\n    class=\"el-slider\"\n    :class=\"{ 'is-vertical': vertical, 'el-slider--with-input': showInput }\"\n    role=\"slider\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n    :aria-disabled=\"sliderDisabled\"\n  >\n    <el-input-number\n      v-if=\"showInput && !range\"\n      ref=\"input\"\n      :model-value=\"firstValue\"\n      class=\"el-slider__input\"\n      :step=\"step\"\n      :disabled=\"sliderDisabled\"\n      :controls=\"showInputControls\"\n      :min=\"min\"\n      :max=\"max\"\n      :debounce=\"debounce\"\n      :size=\"inputSize\"\n      @update:model-value=\"setFirstValue\"\n      @change=\"emitChange\"\n    />\n    <div\n      ref=\"slider\"\n      class=\"el-slider__runway\"\n      :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n      :style=\"runwayStyle\"\n      @click=\"onSliderClick\"\n    >\n      <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n      <slider-button\n        ref=\"firstButton\"\n        :model-value=\"firstValue\"\n        :vertical=\"vertical\"\n        :tooltip-class=\"tooltipClass\"\n        @update:model-value=\"setFirstValue\"\n      />\n      <slider-button\n        v-if=\"range\"\n        ref=\"secondButton\"\n        :model-value=\"secondValue\"\n        :vertical=\"vertical\"\n        :tooltip-class=\"tooltipClass\"\n        @update:model-value=\"setSecondValue\"\n      />\n      <div v-if=\"showStops\">\n        <div\n          v-for=\"(item, key) in stops\"\n          :key=\"key\"\n          class=\"el-slider__stop\"\n          :style=\"getStopStyle(item)\"\n        ></div>\n      </div>\n      <template v-if=\"markList.length > 0\">\n        <div>\n          <div\n            v-for=\"(item, key) in markList\"\n            :key=\"key\"\n            :style=\"getStopStyle(item.position)\"\n            class=\"el-slider__stop el-slider__marks-stop\"\n          ></div>\n        </div>\n        <div class=\"el-slider__marks\">\n          <slider-marker\n            v-for=\"(item, key) in markList\"\n            :key=\"key\"\n            :mark=\"item.mark\"\n            :style=\"getStopStyle(item.position)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElSlider',\n\n  components: {\n    ElInputNumber,\n    SliderButton,\n    SliderMarker,\n  },\n\n  props: {\n    modelValue: {\n      type: [Number, Array] as PropType<number | number[]>,\n      default: 0,\n    },\n    min: {\n      type: Number,\n      default: 0,\n    },\n    max: {\n      type: Number,\n      default: 100,\n    },\n    step: {\n      type: Number,\n      default: 1,\n    },\n    showInput: {\n      type: Boolean,\n      default: false,\n    },\n    showInputControls: {\n      type: Boolean,\n      default: true,\n    },\n    inputSize: {\n      type: String as PropType<ComponentSize>,\n      default: 'small',\n    },\n    showStops: {\n      type: Boolean,\n      default: false,\n    },\n    showTooltip: {\n      type: Boolean,\n      default: true,\n    },\n    formatTooltip: {\n      type: Function as PropType<(val: number) => number | string>,\n      default: undefined,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    range: {\n      type: Boolean,\n      default: false,\n    },\n    vertical: {\n      type: Boolean,\n      default: false,\n    },\n    height: {\n      type: String,\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    label: {\n      type: String,\n      default: undefined,\n    },\n    tooltipClass: {\n      type: String,\n      default: undefined,\n    },\n    marks: Object,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n  setup(props, { emit }) {\n    const initData = reactive({\n      firstValue: 0,\n      secondValue: 0,\n      oldValue: 0,\n      dragging: false,\n      sliderSize: 1,\n    })\n\n    const {\n      elFormItem,\n      slider,\n      firstButton,\n      secondButton,\n      sliderDisabled,\n      minValue,\n      maxValue,\n      runwayStyle,\n      barStyle,\n      resetSize,\n      emitChange,\n      onSliderClick,\n      setFirstValue,\n      setSecondValue,\n    } = useSlide(props, initData, emit)\n\n    const { stops, getStopStyle } = useStops(\n      props,\n      initData,\n      minValue,\n      maxValue\n    )\n\n    const markList = useMarks(props)\n\n    useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n    const precision = computed(() => {\n      const precisions = [props.min, props.max, props.step].map((item) => {\n        const decimal = `${item}`.split('.')[1]\n        return decimal ? decimal.length : 0\n      })\n      return Math.max.apply(null, precisions)\n    })\n\n    const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n    const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n      toRefs(initData)\n\n    const updateDragging = (val: boolean) => {\n      initData.dragging = val\n    }\n\n    provide('SliderProvider', {\n      ...toRefs(props),\n      sliderSize,\n      disabled: sliderDisabled,\n      precision,\n      emitChange,\n      resetSize,\n      updateDragging,\n    })\n\n    return {\n      firstValue,\n      secondValue,\n      oldValue,\n      dragging,\n      sliderSize,\n\n      slider,\n      firstButton,\n      secondButton,\n      sliderDisabled,\n      runwayStyle,\n      barStyle,\n      emitChange,\n      onSliderClick,\n      getStopStyle,\n      setFirstValue,\n      setSecondValue,\n\n      stops,\n      markList,\n\n      sliderWrapper,\n    }\n  },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n  const _emit = (val: number | number[]) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    emit(INPUT_EVENT, val)\n  }\n\n  const valueChanged = () => {\n    if (props.range) {\n      return ![minValue.value, maxValue.value].every(\n        (item, index) => item === initData.oldValue[index]\n      )\n    } else {\n      return props.modelValue !== initData.oldValue\n    }\n  }\n\n  const setValues = () => {\n    if (props.min > props.max) {\n      throwError('Slider', 'min should not be greater than max.')\n      return\n    }\n    const val = props.modelValue\n    if (props.range && Array.isArray(val)) {\n      if (val[1] < props.min) {\n        _emit([props.min, props.min])\n      } else if (val[0] > props.max) {\n        _emit([props.max, props.max])\n      } else if (val[0] < props.min) {\n        _emit([props.min, val[1]])\n      } else if (val[1] > props.max) {\n        _emit([val[0], props.max])\n      } else {\n        initData.firstValue = val[0]\n        initData.secondValue = val[1]\n        if (valueChanged()) {\n          elFormItem.validate?.('change')\n          initData.oldValue = val.slice()\n        }\n      }\n    } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n      if (val < props.min) {\n        _emit(props.min)\n      } else if (val > props.max) {\n        _emit(props.max)\n      } else {\n        initData.firstValue = val\n        if (valueChanged()) {\n          elFormItem.validate?.('change')\n          initData.oldValue = val\n        }\n      }\n    }\n  }\n\n  setValues()\n\n  watch(\n    () => initData.dragging,\n    (val) => {\n      if (!val) {\n        setValues()\n      }\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val, oldVal) => {\n      if (\n        initData.dragging ||\n        (Array.isArray(val) &&\n          Array.isArray(oldVal) &&\n          val.every((item, index) => item === oldVal[index]))\n      ) {\n        return\n      }\n      setValues()\n    }\n  )\n\n  watch(\n    () => [props.min, props.max],\n    () => {\n      setValues()\n    }\n  )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n  const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n  onMounted(async () => {\n    let valuetext\n    if (props.range) {\n      if (Array.isArray(props.modelValue)) {\n        initData.firstValue = Math.max(props.min, props.modelValue[0])\n        initData.secondValue = Math.min(props.max, props.modelValue[1])\n      } else {\n        initData.firstValue = props.min\n        initData.secondValue = props.max\n      }\n      initData.oldValue = [initData.firstValue, initData.secondValue]\n      valuetext = `${initData.firstValue}-${initData.secondValue}`\n    } else {\n      if (typeof props.modelValue !== 'number' || isNaN(props.modelValue)) {\n        initData.firstValue = props.min\n      } else {\n        initData.firstValue = Math.min(\n          props.max,\n          Math.max(props.min, props.modelValue)\n        )\n      }\n      initData.oldValue = initData.firstValue\n      valuetext = initData.firstValue\n    }\n\n    sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n    // label screen reader\n    sliderWrapper.value.setAttribute(\n      'aria-label',\n      props.label ? props.label : `slider between ${props.min} and ${props.max}`\n    )\n\n    on(window, 'resize', resetSize)\n\n    await nextTick()\n    resetSize()\n  })\n\n  onBeforeUnmount(() => {\n    off(window, 'resize', resetSize)\n  })\n\n  return {\n    sliderWrapper,\n  }\n}\n</script>\n"],"names":["SliderButton","SliderMarker"],"mappings":"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"}

package/es/components/slider/src/index.vue_vue_type_template_id_24c42d04_lang.mjs

@@ -0,0 +1,93 @@
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, createCommentVNode, createElementVNode, normalizeStyle, createVNode, Fragment, renderList } from 'vue';
+
+const _hoisted_1 = ["aria-valuemin", "aria-valuemax", "aria-orientation", "aria-disabled"];
+const _hoisted_2 = { key: 1 };
+const _hoisted_3 = { class: "el-slider__marks" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_input_number = resolveComponent("el-input-number");
+  const _component_slider_button = resolveComponent("slider-button");
+  const _component_slider_marker = resolveComponent("slider-marker");
+  return openBlock(), createElementBlock("div", {
+    ref: "sliderWrapper",
+    class: normalizeClass(["el-slider", { "is-vertical": _ctx.vertical, "el-slider--with-input": _ctx.showInput }]),
+    role: "slider",
+    "aria-valuemin": _ctx.min,
+    "aria-valuemax": _ctx.max,
+    "aria-orientation": _ctx.vertical ? "vertical" : "horizontal",
+    "aria-disabled": _ctx.sliderDisabled
+  }, [
+    _ctx.showInput && !_ctx.range ? (openBlock(), createBlock(_component_el_input_number, {
+      key: 0,
+      ref: "input",
+      "model-value": _ctx.firstValue,
+      class: "el-slider__input",
+      step: _ctx.step,
+      disabled: _ctx.sliderDisabled,
+      controls: _ctx.showInputControls,
+      min: _ctx.min,
+      max: _ctx.max,
+      debounce: _ctx.debounce,
+      size: _ctx.inputSize,
+      "onUpdate:modelValue": _ctx.setFirstValue,
+      onChange: _ctx.emitChange
+    }, null, 8, ["model-value", "step", "disabled", "controls", "min", "max", "debounce", "size", "onUpdate:modelValue", "onChange"])) : createCommentVNode("v-if", true),
+    createElementVNode("div", {
+      ref: "slider",
+      class: normalizeClass(["el-slider__runway", { "show-input": _ctx.showInput && !_ctx.range, disabled: _ctx.sliderDisabled }]),
+      style: normalizeStyle(_ctx.runwayStyle),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onSliderClick && _ctx.onSliderClick(...args))
+    }, [
+      createElementVNode("div", {
+        class: "el-slider__bar",
+        style: normalizeStyle(_ctx.barStyle)
+      }, null, 4),
+      createVNode(_component_slider_button, {
+        ref: "firstButton",
+        "model-value": _ctx.firstValue,
+        vertical: _ctx.vertical,
+        "tooltip-class": _ctx.tooltipClass,
+        "onUpdate:modelValue": _ctx.setFirstValue
+      }, null, 8, ["model-value", "vertical", "tooltip-class", "onUpdate:modelValue"]),
+      _ctx.range ? (openBlock(), createBlock(_component_slider_button, {
+        key: 0,
+        ref: "secondButton",
+        "model-value": _ctx.secondValue,
+        vertical: _ctx.vertical,
+        "tooltip-class": _ctx.tooltipClass,
+        "onUpdate:modelValue": _ctx.setSecondValue
+      }, null, 8, ["model-value", "vertical", "tooltip-class", "onUpdate:modelValue"])) : createCommentVNode("v-if", true),
+      _ctx.showStops ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stops, (item, key) => {
+          return openBlock(), createElementBlock("div", {
+            key,
+            class: "el-slider__stop",
+            style: normalizeStyle(_ctx.getStopStyle(item))
+          }, null, 4);
+        }), 128))
+      ])) : createCommentVNode("v-if", true),
+      _ctx.markList.length > 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        createElementVNode("div", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.markList, (item, key) => {
+            return openBlock(), createElementBlock("div", {
+              key,
+              style: normalizeStyle(_ctx.getStopStyle(item.position)),
+              class: "el-slider__stop el-slider__marks-stop"
+            }, null, 4);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.markList, (item, key) => {
+            return openBlock(), createBlock(_component_slider_marker, {
+              key,
+              mark: item.mark,
+              style: normalizeStyle(_ctx.getStopStyle(item.position))
+            }, null, 8, ["mark", "style"]);
+          }), 128))
+        ])
+      ], 64)) : createCommentVNode("v-if", true)
+    ], 6)
+  ], 10, _hoisted_1);
+}
+
+export { render };
+//# sourceMappingURL=index.vue_vue_type_template_id_24c42d04_lang.mjs.map

package/es/components/slider/src/index.vue_vue_type_template_id_24c42d04_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue_type_template_id_24c42d04_lang.mjs","sources":["../../../../../../packages/components/slider/src/index.vue?vue&type=template&id=24c42d04&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"sliderWrapper\"\n    class=\"el-slider\"\n    :class=\"{ 'is-vertical': vertical, 'el-slider--with-input': showInput }\"\n    role=\"slider\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n    :aria-disabled=\"sliderDisabled\"\n  >\n    <el-input-number\n      v-if=\"showInput && !range\"\n      ref=\"input\"\n      :model-value=\"firstValue\"\n      class=\"el-slider__input\"\n      :step=\"step\"\n      :disabled=\"sliderDisabled\"\n      :controls=\"showInputControls\"\n      :min=\"min\"\n      :max=\"max\"\n      :debounce=\"debounce\"\n      :size=\"inputSize\"\n      @update:model-value=\"setFirstValue\"\n      @change=\"emitChange\"\n    />\n    <div\n      ref=\"slider\"\n      class=\"el-slider__runway\"\n      :class=\"{ 'show-input': showInput && !range, disabled: sliderDisabled }\"\n      :style=\"runwayStyle\"\n      @click=\"onSliderClick\"\n    >\n      <div class=\"el-slider__bar\" :style=\"barStyle\"></div>\n      <slider-button\n        ref=\"firstButton\"\n        :model-value=\"firstValue\"\n        :vertical=\"vertical\"\n        :tooltip-class=\"tooltipClass\"\n        @update:model-value=\"setFirstValue\"\n      />\n      <slider-button\n        v-if=\"range\"\n        ref=\"secondButton\"\n        :model-value=\"secondValue\"\n        :vertical=\"vertical\"\n        :tooltip-class=\"tooltipClass\"\n        @update:model-value=\"setSecondValue\"\n      />\n      <div v-if=\"showStops\">\n        <div\n          v-for=\"(item, key) in stops\"\n          :key=\"key\"\n          class=\"el-slider__stop\"\n          :style=\"getStopStyle(item)\"\n        ></div>\n      </div>\n      <template v-if=\"markList.length > 0\">\n        <div>\n          <div\n            v-for=\"(item, key) in markList\"\n            :key=\"key\"\n            :style=\"getStopStyle(item.position)\"\n            class=\"el-slider__stop el-slider__marks-stop\"\n          ></div>\n        </div>\n        <div class=\"el-slider__marks\">\n          <slider-marker\n            v-for=\"(item, key) in markList\"\n            :key=\"key\"\n            :mark=\"item.mark\"\n            :style=\"getStopStyle(item.position)\"\n          />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  computed,\n  defineComponent,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  toRefs,\n  watch,\n} from 'vue'\nimport ElInputNumber from '@element-plus/components/input-number'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\nimport { throwError } from '@element-plus/utils/error'\nimport SliderButton from './button.vue'\nimport SliderMarker from './marker.vue'\nimport { useMarks } from './useMarks'\nimport { useSlide } from './useSlide'\nimport { useStops } from './useStops'\n\nimport type { PropType, Ref } from 'vue'\nimport type { ComponentSize, Nullable } from '@element-plus/utils/types'\n\nexport default defineComponent({\n  name: 'ElSlider',\n\n  components: {\n    ElInputNumber,\n    SliderButton,\n    SliderMarker,\n  },\n\n  props: {\n    modelValue: {\n      type: [Number, Array] as PropType<number | number[]>,\n      default: 0,\n    },\n    min: {\n      type: Number,\n      default: 0,\n    },\n    max: {\n      type: Number,\n      default: 100,\n    },\n    step: {\n      type: Number,\n      default: 1,\n    },\n    showInput: {\n      type: Boolean,\n      default: false,\n    },\n    showInputControls: {\n      type: Boolean,\n      default: true,\n    },\n    inputSize: {\n      type: String as PropType<ComponentSize>,\n      default: 'small',\n    },\n    showStops: {\n      type: Boolean,\n      default: false,\n    },\n    showTooltip: {\n      type: Boolean,\n      default: true,\n    },\n    formatTooltip: {\n      type: Function as PropType<(val: number) => number | string>,\n      default: undefined,\n    },\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n    range: {\n      type: Boolean,\n      default: false,\n    },\n    vertical: {\n      type: Boolean,\n      default: false,\n    },\n    height: {\n      type: String,\n      default: '',\n    },\n    debounce: {\n      type: Number,\n      default: 300,\n    },\n    label: {\n      type: String,\n      default: undefined,\n    },\n    tooltipClass: {\n      type: String,\n      default: undefined,\n    },\n    marks: Object,\n  },\n\n  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, INPUT_EVENT],\n\n  setup(props, { emit }) {\n    const initData = reactive({\n      firstValue: 0,\n      secondValue: 0,\n      oldValue: 0,\n      dragging: false,\n      sliderSize: 1,\n    })\n\n    const {\n      elFormItem,\n      slider,\n      firstButton,\n      secondButton,\n      sliderDisabled,\n      minValue,\n      maxValue,\n      runwayStyle,\n      barStyle,\n      resetSize,\n      emitChange,\n      onSliderClick,\n      setFirstValue,\n      setSecondValue,\n    } = useSlide(props, initData, emit)\n\n    const { stops, getStopStyle } = useStops(\n      props,\n      initData,\n      minValue,\n      maxValue\n    )\n\n    const markList = useMarks(props)\n\n    useWatch(props, initData, minValue, maxValue, emit, elFormItem)\n\n    const precision = computed(() => {\n      const precisions = [props.min, props.max, props.step].map((item) => {\n        const decimal = `${item}`.split('.')[1]\n        return decimal ? decimal.length : 0\n      })\n      return Math.max.apply(null, precisions)\n    })\n\n    const { sliderWrapper } = useLifecycle(props, initData, resetSize)\n\n    const { firstValue, secondValue, oldValue, dragging, sliderSize } =\n      toRefs(initData)\n\n    const updateDragging = (val: boolean) => {\n      initData.dragging = val\n    }\n\n    provide('SliderProvider', {\n      ...toRefs(props),\n      sliderSize,\n      disabled: sliderDisabled,\n      precision,\n      emitChange,\n      resetSize,\n      updateDragging,\n    })\n\n    return {\n      firstValue,\n      secondValue,\n      oldValue,\n      dragging,\n      sliderSize,\n\n      slider,\n      firstButton,\n      secondButton,\n      sliderDisabled,\n      runwayStyle,\n      barStyle,\n      emitChange,\n      onSliderClick,\n      getStopStyle,\n      setFirstValue,\n      setSecondValue,\n\n      stops,\n      markList,\n\n      sliderWrapper,\n    }\n  },\n})\n\nconst useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {\n  const _emit = (val: number | number[]) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    emit(INPUT_EVENT, val)\n  }\n\n  const valueChanged = () => {\n    if (props.range) {\n      return ![minValue.value, maxValue.value].every(\n        (item, index) => item === initData.oldValue[index]\n      )\n    } else {\n      return props.modelValue !== initData.oldValue\n    }\n  }\n\n  const setValues = () => {\n    if (props.min > props.max) {\n      throwError('Slider', 'min should not be greater than max.')\n      return\n    }\n    const val = props.modelValue\n    if (props.range && Array.isArray(val)) {\n      if (val[1] < props.min) {\n        _emit([props.min, props.min])\n      } else if (val[0] > props.max) {\n        _emit([props.max, props.max])\n      } else if (val[0] < props.min) {\n        _emit([props.min, val[1]])\n      } else if (val[1] > props.max) {\n        _emit([val[0], props.max])\n      } else {\n        initData.firstValue = val[0]\n        initData.secondValue = val[1]\n        if (valueChanged()) {\n          elFormItem.validate?.('change')\n          initData.oldValue = val.slice()\n        }\n      }\n    } else if (!props.range && typeof val === 'number' && !isNaN(val)) {\n      if (val < props.min) {\n        _emit(props.min)\n      } else if (val > props.max) {\n        _emit(props.max)\n      } else {\n        initData.firstValue = val\n        if (valueChanged()) {\n          elFormItem.validate?.('change')\n          initData.oldValue = val\n        }\n      }\n    }\n  }\n\n  setValues()\n\n  watch(\n    () => initData.dragging,\n    (val) => {\n      if (!val) {\n        setValues()\n      }\n    }\n  )\n\n  watch(\n    () => props.modelValue,\n    (val, oldVal) => {\n      if (\n        initData.dragging ||\n        (Array.isArray(val) &&\n          Array.isArray(oldVal) &&\n          val.every((item, index) => item === oldVal[index]))\n      ) {\n        return\n      }\n      setValues()\n    }\n  )\n\n  watch(\n    () => [props.min, props.max],\n    () => {\n      setValues()\n    }\n  )\n}\n\nconst useLifecycle = (props, initData, resetSize) => {\n  const sliderWrapper: Ref<Nullable<HTMLElement>> = ref(null)\n\n  onMounted(async () => {\n    let valuetext\n    if (props.range) {\n      if (Array.isArray(props.modelValue)) {\n        initData.firstValue = Math.max(props.min, props.modelValue[0])\n        initData.secondValue = Math.min(props.max, props.modelValue[1])\n      } else {\n        initData.firstValue = props.min\n        initData.secondValue = props.max\n      }\n      initData.oldValue = [initData.firstValue, initData.secondValue]\n      valuetext = `${initData.firstValue}-${initData.secondValue}`\n    } else {\n      if (typeof props.modelValue !== 'number' || isNaN(props.modelValue)) {\n        initData.firstValue = props.min\n      } else {\n        initData.firstValue = Math.min(\n          props.max,\n          Math.max(props.min, props.modelValue)\n        )\n      }\n      initData.oldValue = initData.firstValue\n      valuetext = initData.firstValue\n    }\n\n    sliderWrapper.value.setAttribute('aria-valuetext', valuetext)\n\n    // label screen reader\n    sliderWrapper.value.setAttribute(\n      'aria-label',\n      props.label ? props.label : `slider between ${props.min} and ${props.max}`\n    )\n\n    on(window, 'resize', resetSize)\n\n    await nextTick()\n    resetSize()\n  })\n\n  onBeforeUnmount(() => {\n    off(window, 'resize', resetSize)\n  })\n\n  return {\n    sliderWrapper,\n  }\n}\n</script>\n"],"names":["_createElementBlock","_createBlock","_createElementVNode","_createVNode"],"mappings":";;;;qBAkEa,OAAM;;;;;sBAjEjBA;IACE,KAAI;AAAA,IACJ,uBAAM,8BACmB,wCAAmC;IAC5D,MAAK;AAAA,IACJ,iBAAe;IACf,iBAAe;IACf,oBAAkB;IAClB,iBAAe;;IAGR,mBAAc,2BADtBC;;MAEE,KAAI;AAAA,MACH,eAAa;MACd,OAAM;AAAA,MACL,MAAM;MACN,UAAU;MACV,UAAU;MACV,KAAK;MACL,KAAK;MACL,UAAU;MACV,MAAM;MACN,uBAAoB;MACpB,UAAQ;;IAEXC;MACE,KAAI;AAAA,MACJ,uBAAM,qCACkB,mBAAc,sBAAiB;MACtD,sBAAO;MACP,gDAAO;;MAERA;QAAK,OAAM;AAAA,QAAkB,sBAAO;;MACpCC;QACE,KAAI;AAAA,QACH,eAAa;QACb,UAAU;QACV,iBAAe;QACf,uBAAoB;;MAGf,2BADRF;;QAEE,KAAI;AAAA,QACH,eAAa;QACb,UAAU;QACV,iBAAe;QACf,uBAAoB;;MAEZ,+BAAXD;0BACEA,8CACwB,aAAd,MAAM;8BADhBA;YAEG;AAAA,YACD,OAAM;AAAA,YACL,sBAAO,kBAAa;AAAA;;;MAGT,cAAS,2BAAzBA;QACEE;4BACEF,8CACwB,gBAAd,MAAM;gCADhBA;cAEG;AAAA,cACA,sBAAO,kBAAa,KAAK;AAAA,cAC1B,OAAM;AAAA;;;QAGVE,0BAAA;4BACEF,8CACwB,gBAAd,MAAM;gCADhBC;cAEG;AAAA,cACA,MAAM,KAAK;AAAA,cACX,sBAAO,kBAAa,KAAK;AAAA;;;;;;;;;;"}

package/es/components/slider/src/marker.mjs

@@ -1,5 +1,5 @@
-import script from './marker.vue_vue&type=script&lang.mjs';
-export { default } from './marker.vue_vue&type=script&lang.mjs';
+import script from './marker.vue_vue_type_script_lang.mjs';
+export { default } from './marker.vue_vue_type_script_lang.mjs';
 
 script.__file = "packages/components/slider/src/marker.vue";
 //# sourceMappingURL=marker.mjs.map

package/es/components/slider/src/marker.vue_vue_type_script_lang.mjs

@@ -0,0 +1,29 @@
+import { defineComponent, computed, h } from 'vue';
+
+var script = defineComponent({
+  name: "ElMarker",
+  props: {
+    mark: {
+      type: [String, Object],
+      default: () => void 0
+    }
+  },
+  setup(props) {
+    const label = computed(() => {
+      return typeof props.mark === "string" ? props.mark : props.mark.label;
+    });
+    return {
+      label
+    };
+  },
+  render() {
+    var _a;
+    return h("div", {
+      class: "el-slider__marks-text",
+      style: (_a = this.mark) == null ? void 0 : _a.style
+    }, this.label);
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=marker.vue_vue_type_script_lang.mjs.map

package/es/components/slider/src/marker.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/slider/src/marker.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { computed, defineComponent, h } from 'vue'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMarker',\n  props: {\n    mark: {\n      type: [String, Object] as PropType<string | Record<string, unknown>>,\n      default: () => undefined,\n    },\n  },\n  setup(props) {\n    const label = computed(() => {\n      return typeof props.mark === 'string' ? props.mark : props.mark.label\n    })\n\n    return {\n      label,\n    }\n  },\n  render() {\n    return h(\n      'div',\n      {\n        class: 'el-slider__marks-text',\n        style: this.mark?.style,\n      },\n      this.label\n    )\n  },\n})\n</script>\n"],"names":[],"mappings":";;AAKA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ;AAAA,MACf,SAAS,MAAM;AAAA;AAAA;AAAA,EAGnB,MAAM,OAAO;AACX,UAAM,QAAQ,SAAS,MAAM;AAC3B,aAAO,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,MAAM,KAAK;AAAA;AAGlE,WAAO;AAAA,MACL;AAAA;AAAA;AAAA,EAGJ,SAAS;;AACP,WAAO,EACL,OACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO,WAAK,SAAL,mBAAW;AAAA,OAEpB,KAAK;AAAA;AAAA;;;;"}

package/es/components/space/src/item.mjs

@@ -1,6 +1,6 @@
-import script from './item.vue_vue&type=script&lang.mjs';
-export { default } from './item.vue_vue&type=script&lang.mjs';
-import { render } from './item.vue_vue&type=template&id=88dfb868&lang.mjs';
+import script from './item.vue_vue_type_script_lang.mjs';
+export { default } from './item.vue_vue_type_script_lang.mjs';
+import { render } from './item.vue_vue_type_template_id_88dfb868_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/space/src/item.vue";

package/es/components/space/src/item.vue_vue_type_script_lang.mjs

@@ -0,0 +1,21 @@
+import { defineComponent, computed } from 'vue';
+import { buildProps } from '../../../utils/props.mjs';
+
+const spaceItem = buildProps({
+  prefixCls: {
+    type: String,
+    default: "el-space"
+  }
+});
+var script = defineComponent({
+  props: spaceItem,
+  setup(props) {
+    const classes = computed(() => [`${props.prefixCls}__item`]);
+    return {
+      classes
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=item.vue_vue_type_script_lang.mjs.map

package/es/components/space/src/item.vue_vue_type_script_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/space/src/item.vue"],"sourcesContent":["<template>\n  <div :class=\"classes\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\n\nconst spaceItem = buildProps({\n  prefixCls: {\n    type: String,\n    default: 'el-space',\n  },\n} as const)\n\nexport default defineComponent({\n  props: spaceItem,\n\n  setup(props) {\n    const classes = computed(() => [`${props.prefixCls}__item`])\n\n    return {\n      classes,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;AAUA,MAAM,YAAY,WAAW;AAAA,EAC3B,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;AAIb,aAAe,gBAAgB;AAAA,EAC7B,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,UAAU,SAAS,MAAM,CAAC,GAAG,MAAM;AAEzC,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}

package/es/components/space/src/item.vue_vue_type_template_id_88dfb868_lang.mjs

@@ -0,0 +1,12 @@
+import { openBlock, createElementBlock, normalizeClass, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+
+export { render };
+//# sourceMappingURL=item.vue_vue_type_template_id_88dfb868_lang.mjs.map

package/es/components/space/src/item.vue_vue_type_template_id_88dfb868_lang.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_template_id_88dfb868_lang.mjs","sources":["../../../../../../packages/components/space/src/item.vue?vue&type=template&id=88dfb868&lang.js"],"sourcesContent":["<template>\n  <div :class=\"classes\">\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { buildProps } from '@element-plus/utils/props'\n\nconst spaceItem = buildProps({\n  prefixCls: {\n    type: String,\n    default: 'el-space',\n  },\n} as const)\n\nexport default defineComponent({\n  props: spaceItem,\n\n  setup(props) {\n    const classes = computed(() => [`${props.prefixCls}__item`])\n\n    return {\n      classes,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot"],"mappings":";;;sBACEA;IAAM,sBAAO;;IACXC;;;;;;"}

package/es/components/space/src/space.mjs

@@ -5,7 +5,7 @@ import { isNumber } from '../../../utils/util.mjs';
 import { buildProps, definePropType, componentSize } from '../../../utils/props.mjs';
 import './item.mjs';
 import { useSpace } from './use-space.mjs';
-import script from './item.vue_vue&type=script&lang.mjs';
+import script from './item.vue_vue_type_script_lang.mjs';
 
 const spaceProps = buildProps({
   direction: {

package/es/components/steps/index.d.ts

@@ -41,8 +41,8 @@ export declare const ElSteps: import("../../utils/types").SFCWithInstall<import(
     finishStatus?: unknown;
     processStatus?: unknown;
 } & {
-    space: string | number;
     active: number;
+    space: string | number;
     direction: string;
     alignCenter: boolean;
     simple: boolean;
@@ -51,8 +51,8 @@ export declare const ElSteps: import("../../utils/types").SFCWithInstall<import(
 } & {}> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    space: string | number;
     active: number;
+    space: string | number;
     direction: string;
     alignCenter: boolean;
     simple: boolean;
@@ -98,13 +98,13 @@ export declare const ElSteps: import("../../utils/types").SFCWithInstall<import(
         status?: unknown;
     } & {
         title: string;
-        description: string;
         icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        description: string;
         status: string;
     } & {}>, {
         title: string;
-        description: string;
         icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+        description: string;
         status: string;
     }>;
 };
@@ -148,12 +148,12 @@ export declare const ElStep: import("../../utils/types").SFCWithInstall<import("
     status?: unknown;
 } & {
     title: string;
-    description: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    description: string;
     status: string;
 } & {}>, {
     title: string;
-    description: string;
     icon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    description: string;
     status: string;
 }>>;

package/es/components/steps/index.mjs

@@ -1,8 +1,8 @@
 import { withInstall, withNoopInstall } from '../../utils/with-install.mjs';
 import './src/index.mjs';
 import './src/item.mjs';
-import script from './src/index.vue_vue&type=script&lang.mjs';
-import script$1 from './src/item.vue_vue&type=script&lang.mjs';
+import script from './src/index.vue_vue_type_script_lang.mjs';
+import script$1 from './src/item.vue_vue_type_script_lang.mjs';
 
 const ElSteps = withInstall(script, {
   Step: script$1

package/es/components/steps/src/index.mjs

@@ -1,6 +1,6 @@
-import script from './index.vue_vue&type=script&lang.mjs';
-export { default } from './index.vue_vue&type=script&lang.mjs';
-import { render } from './index.vue_vue&type=template&id=882d196c&lang.mjs';
+import script from './index.vue_vue_type_script_lang.mjs';
+export { default } from './index.vue_vue_type_script_lang.mjs';
+import { render } from './index.vue_vue_type_template_id_882d196c_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/steps/src/index.vue";

package/es/components/steps/src/index.vue.d.ts

@@ -41,8 +41,8 @@ declare const _default: import("vue").DefineComponent<{
     finishStatus?: unknown;
     processStatus?: unknown;
 } & {
-    space: string | number;
     active: number;
+    space: string | number;
     direction: string;
     alignCenter: boolean;
     simple: boolean;
@@ -51,8 +51,8 @@ declare const _default: import("vue").DefineComponent<{
 } & {}> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    space: string | number;
     active: number;
+    space: string | number;
     direction: string;
     alignCenter: boolean;
     simple: boolean;