element-plus/es/components/slider/src/composables/use-slide.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-slide.mjs","sources":["../../../../../../../packages/components/slider/src/composables/use-slide.ts"],"sourcesContent":["import { computed, nextTick, ref, shallowRef } from 'vue'\nimport {\n  CHANGE_EVENT,\n  INPUT_EVENT,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useFormDisabled, useFormItem } from '@element-plus/components/form'\n\nimport type { CSSProperties, Ref, SetupContext } from 'vue'\nimport type { Arrayable } from '@element-plus/utils'\nimport type { SliderEmits, SliderInitData, SliderProps } from '../slider'\nimport type { ButtonRefs, SliderButtonInstance } from '../button'\n\nexport const useSlide = (\n  props: SliderProps,\n  initData: SliderInitData,\n  emit: SetupContext<SliderEmits>['emit']\n) => {\n  const { formItem: elFormItem } = useFormItem()\n\n  const slider = shallowRef<HTMLElement>()\n\n  const firstButton = ref<SliderButtonInstance>()\n\n  const secondButton = ref<SliderButtonInstance>()\n\n  const buttonRefs: ButtonRefs = {\n    firstButton,\n    secondButton,\n  }\n\n  const sliderDisabled = useFormDisabled()\n\n  const minValue = computed(() => {\n    return Math.min(initData.firstValue, initData.secondValue)\n  })\n\n  const maxValue = computed(() => {\n    return Math.max(initData.firstValue, initData.secondValue)\n  })\n\n  const barSize = computed(() => {\n    return props.range\n      ? `${\n          (100 * (maxValue.value - minValue.value)) / (props.max - props.min)\n        }%`\n      : `${\n          (100 * (initData.firstValue - props.min)) / (props.max - props.min)\n        }%`\n  })\n\n  const barStart = computed(() => {\n    return props.range\n      ? `${(100 * (minValue.value - props.min)) / (props.max - props.min)}%`\n      : '0%'\n  })\n\n  const runwayStyle = computed<CSSProperties>(() => {\n    return props.vertical ? { height: props.height } : {}\n  })\n\n  const barStyle = computed<CSSProperties>(() => {\n    return props.vertical\n      ? {\n          height: barSize.value,\n          bottom: barStart.value,\n        }\n      : {\n          width: barSize.value,\n          left: barStart.value,\n        }\n  })\n\n  const resetSize = () => {\n    if (slider.value) {\n      const rect = slider.value.getBoundingClientRect()\n      initData.sliderSize = rect[props.vertical ? 'height' : 'width']\n    }\n  }\n\n  const getButtonRefByPercent = (\n    percent: number\n  ): Ref<SliderButtonInstance | undefined> => {\n    const targetValue = props.min + (percent * (props.max - props.min)) / 100\n    if (!props.range) {\n      return firstButton\n    }\n    let buttonRefName: 'firstButton' | 'secondButton'\n    if (\n      Math.abs(minValue.value - targetValue) <\n      Math.abs(maxValue.value - targetValue)\n    ) {\n      buttonRefName =\n        initData.firstValue < initData.secondValue\n          ? 'firstButton'\n          : 'secondButton'\n    } else {\n      buttonRefName =\n        initData.firstValue > initData.secondValue\n          ? 'firstButton'\n          : 'secondButton'\n    }\n    return buttonRefs[buttonRefName]\n  }\n\n  const setPosition = (\n    percent: number\n  ): Ref<SliderButtonInstance | undefined> => {\n    const buttonRef = getButtonRefByPercent(percent)\n    buttonRef.value!.setPosition(percent)\n    return buttonRef\n  }\n\n  const setFirstValue = (firstValue: number | undefined) => {\n    initData.firstValue = firstValue ?? props.min\n    _emit(\n      props.range ? [minValue.value, maxValue.value] : (firstValue ?? props.min)\n    )\n  }\n\n  const setSecondValue = (secondValue: number) => {\n    initData.secondValue = secondValue\n\n    if (props.range) {\n      _emit([minValue.value, maxValue.value])\n    }\n  }\n\n  const _emit = (val: Arrayable<number>) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    emit(INPUT_EVENT, val)\n  }\n\n  const emitChange = async () => {\n    await nextTick()\n    emit(\n      CHANGE_EVENT,\n      props.range ? [minValue.value, maxValue.value] : props.modelValue\n    )\n  }\n\n  const handleSliderPointerEvent = (\n    event: MouseEvent | TouchEvent\n  ): Ref<SliderButtonInstance | undefined> | undefined => {\n    if (sliderDisabled.value || initData.dragging) return\n    resetSize()\n    let newPercent = 0\n    if (props.vertical) {\n      const clientY =\n        (event as TouchEvent).touches?.item(0)?.clientY ??\n        (event as MouseEvent).clientY\n      const sliderOffsetBottom = slider.value!.getBoundingClientRect().bottom\n      newPercent = ((sliderOffsetBottom - clientY) / initData.sliderSize) * 100\n    } else {\n      const clientX =\n        (event as TouchEvent).touches?.item(0)?.clientX ??\n        (event as MouseEvent).clientX\n      const sliderOffsetLeft = slider.value!.getBoundingClientRect().left\n      newPercent = ((clientX - sliderOffsetLeft) / initData.sliderSize) * 100\n    }\n    if (newPercent < 0 || newPercent > 100) return\n    return setPosition(newPercent)\n  }\n\n  const onSliderWrapperPrevent = (event: TouchEvent) => {\n    if (\n      buttonRefs['firstButton'].value?.dragging ||\n      buttonRefs['secondButton'].value?.dragging\n    ) {\n      event.preventDefault()\n    }\n  }\n\n  const onSliderDown = async (event: MouseEvent | TouchEvent) => {\n    const buttonRef = handleSliderPointerEvent(event)\n    if (buttonRef) {\n      await nextTick()\n      buttonRef.value!.onButtonDown(event)\n    }\n  }\n\n  const onSliderClick = (event: MouseEvent | TouchEvent) => {\n    const buttonRef = handleSliderPointerEvent(event)\n    if (buttonRef) {\n      emitChange()\n    }\n  }\n\n  const onSliderMarkerDown = (position: number) => {\n    if (sliderDisabled.value || initData.dragging) return\n    const buttonRef = setPosition(position)\n    if (buttonRef) {\n      emitChange()\n    }\n  }\n\n  return {\n    elFormItem,\n    slider,\n    firstButton,\n    secondButton,\n    sliderDisabled,\n    minValue,\n    maxValue,\n    runwayStyle,\n    barStyle,\n    resetSize,\n    setPosition,\n    emitChange,\n    onSliderWrapperPrevent,\n    onSliderClick,\n    onSliderDown,\n    onSliderMarkerDown,\n    setFirstValue,\n    setSecondValue,\n  }\n}\n"],"names":[],"mappings":"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"}