{"version":3,"file":"index.vue.mjs","sources":["../../../../../packages/components/slider/src/index.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"sliderWrapper\"\n    :class=\"sliderKls\"\n    role=\"slider\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-orientation=\"vertical ? 'vertical' : 'horizontal'\"\n    :aria-disabled=\"sliderDisabled\"\n  >\n    <div\n      ref=\"slider\"\n      :class=\"[\n        ns.e('runway'),\n        { 'show-input': showInput && !range, disabled: sliderDisabled },\n      ]\"\n      :style=\"runwayStyle\"\n      @click=\"onSliderClick\"\n    >\n      <div :class=\"ns.e('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=\"ns.e('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=\"[ns.e('stop'), ns.e('marks-stop')]\"\n          ></div>\n        </div>\n        <div :class=\"ns.e('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    <el-input-number\n      v-if=\"showInput && !range\"\n      ref=\"input\"\n      :model-value=\"firstValue\"\n      :class=\"ns.e('input')\"\n      :step=\"step\"\n      :disabled=\"sliderDisabled\"\n      :controls=\"showInputControls\"\n      :min=\"min\"\n      :max=\"max\"\n      :debounce=\"debounce\"\n      :size=\"sliderInputSize\"\n      @update:model-value=\"setFirstValue\"\n      @change=\"emitChange\"\n    />\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-ultra/components/input-number'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\nFORM_COMPONENT_PROPS,\n} from '@element-ultra/shared'\nimport { off, on, throwError, isValidComponentSize } from '@element-ultra/utils'\nimport { useNamespace, useSize } from '@element-ultra/hooks'\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 } from '@element-ultra/shared'\nimport type { Nullable } from '@element-ultra/utils'\n\nexport default defineComponent({\n  name: 'ElSlider',\n\n  components: {\n    ElInputNumber,\n    SliderButton,\n    SliderMarker,\n  },\n\n  props: {\n    ...FORM_COMPONENT_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    size: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    inputSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\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: undefined\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    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\n    const ns = useNamespace('slider')\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 sliderWrapperSize = useSize({ props })\n    const sliderInputSize = computed(\n      () => props.inputSize || sliderWrapperSize.value\n    )\n\n    const sliderKls = computed(() => [\n      ns.b(),\n      ns.m(sliderWrapperSize.value),\n      ns.is('vertical', props.vertical),\n      { [ns.m('with-input')]: props.showInput },\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      ns,\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      sliderWrapperSize,\n      sliderInputSize,\n      sliderKls,\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()\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()\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          initData.firstValue === val[0] &&\n          initData.secondValue === val[1])\n      ) {\n        return\n      }\n      setValues()\n    },\n    {\n      deep: true,\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":["_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createVNode","_createBlock","_createCommentVNode","_Fragment","_renderList","_createElementVNode"],"mappings":"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"}