element-plus/es/components/slider/src/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.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-plus/components/input-number'\nimport {\n  UPDATE_MODEL_EVENT,\n  CHANGE_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/constants'\nimport { off, on, throwError, isValidComponentSize } from '@element-plus/utils'\nimport { useNamespace, useSize } from '@element-plus/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-plus/constants'\nimport type { Nullable } from '@element-plus/utils'\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    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: 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 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()\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?.('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          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":["SliderMarker","_openBlock"],"mappings":"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"}