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

A Component Library for Vue 3

{"version":3,"file":"useSlide.mjs","sources":["../../../../../../packages/components/slider/src/useSlide.ts"],"sourcesContent":["import { computed, inject, nextTick, ref, shallowRef } from 'vue'\nimport {\n  CHANGE_EVENT,\n  UPDATE_MODEL_EVENT,\n  INPUT_EVENT,\n} from '@element-plus/utils/constants'\nimport { elFormKey, elFormItemKey } from '@element-plus/tokens'\nimport type { CSSProperties } from 'vue'\nimport type { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'\n\nimport type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'\nimport type { Nullable } from '@element-plus/utils/types'\n\nexport const useSlide = (\n  props: ISliderProps,\n  initData: ISliderInitData,\n  emit\n) => {\n  const elForm = inject(elFormKey, {} as ElFormContext)\n  const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)\n\n  const slider = shallowRef<Nullable<HTMLElement>>(null)\n\n  const firstButton = ref(null)\n\n  const secondButton = ref(null)\n\n  const buttonRefs: ButtonRefs = {\n    firstButton,\n    secondButton,\n  }\n\n  const sliderDisabled = computed(() => {\n    return props.disabled || elForm.disabled || false\n  })\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      initData.sliderSize =\n        slider.value[`client${props.vertical ? 'Height' : 'Width'}`]\n    }\n  }\n\n  const setPosition = (percent: number) => {\n    const targetValue = props.min + (percent * (props.max - props.min)) / 100\n    if (!props.range) {\n      firstButton.value.setPosition(percent)\n      return\n    }\n    let buttonRefName: string\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    buttonRefs[buttonRefName].value.setPosition(percent)\n  }\n\n  const setFirstValue = (firstValue: number) => {\n    initData.firstValue = firstValue\n    _emit(props.range ? [minValue.value, maxValue.value] : firstValue)\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: number | 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 onSliderClick = (event: MouseEvent) => {\n    if (sliderDisabled.value || initData.dragging) return\n    resetSize()\n    if (props.vertical) {\n      const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom\n      setPosition(\n        ((sliderOffsetBottom - event.clientY) / initData.sliderSize) * 100\n      )\n    } else {\n      const sliderOffsetLeft = slider.value.getBoundingClientRect().left\n      setPosition(\n        ((event.clientX - sliderOffsetLeft) / initData.sliderSize) * 100\n      )\n    }\n    emitChange()\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    onSliderClick,\n    setFirstValue,\n    setSecondValue,\n  }\n}\n"],"names":[],"mappings":"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"}