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

A Component Library for Vue 3

{"version":3,"file":"use-slide.mjs","names":[],"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"],"mappings":"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"}