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":";;;;;AAaO,MAAM,QAAW,GAAA,CACtB,KACA,EAAA,QAAA,EACA,IACG,KAAA;AACH,EAAA,MAAM,EAAE,QAAA,EAAU,UAAW,EAAA,GAAI,WAAY,EAAA,CAAA;AAE7C,EAAA,MAAM,SAAS,UAAwB,EAAA,CAAA;AAEvC,EAAA,MAAM,cAAc,GAA0B,EAAA,CAAA;AAE9C,EAAA,MAAM,eAAe,GAA0B,EAAA,CAAA;AAE/C,EAAA,MAAM,UAAyB,GAAA;AAAA,IAC7B,WAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,iBAAiB,eAAgB,EAAA,CAAA;AAEvC,EAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,IAAA,OAAO,IAAK,CAAA,GAAA,CAAI,QAAS,CAAA,UAAA,EAAY,SAAS,WAAW,CAAA,CAAA;AAAA,GAC1D,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,IAAA,OAAO,IAAK,CAAA,GAAA,CAAI,QAAS,CAAA,UAAA,EAAY,SAAS,WAAW,CAAA,CAAA;AAAA,GAC1D,CAAA,CAAA;AAED,EAAM,MAAA,OAAA,GAAU,SAAS,MAAM;AAC7B,IAAO,OAAA,KAAA,CAAM,QACT,CACG,EAAA,GAAA,IAAO,SAAS,KAAQ,GAAA,QAAA,CAAS,UAAW,KAAM,CAAA,GAAA,GAAM,MAAM,GAEjE,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EACG,OAAO,QAAS,CAAA,UAAA,GAAa,MAAM,GAAS,CAAA,IAAA,KAAA,CAAM,MAAM,KAAM,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAEtE,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,IAAO,OAAA,KAAA,CAAM,KACT,GAAA,CAAA,EAAI,GAAO,IAAA,QAAA,CAAS,KAAQ,GAAA,KAAA,CAAM,GAAS,CAAA,IAAA,KAAA,CAAM,GAAM,GAAA,KAAA,CAAM,GAC7D,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,CAAA;AAAA,GACL,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,SAAwB,MAAM;AAChD,IAAA,OAAO,MAAM,QAAW,GAAA,EAAE,QAAQ,KAAM,CAAA,MAAA,KAAW,EAAC,CAAA;AAAA,GACrD,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,SAAwB,MAAM;AAC7C,IAAA,OAAO,MAAM,QACT,GAAA;AAAA,MACE,QAAQ,OAAQ,CAAA,KAAA;AAAA,MAChB,QAAQ,QAAS,CAAA,KAAA;AAAA,KAEnB,GAAA;AAAA,MACE,OAAO,OAAQ,CAAA,KAAA;AAAA,MACf,MAAM,QAAS,CAAA,KAAA;AAAA,KACjB,CAAA;AAAA,GACL,CAAA,CAAA;AAED,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,OAAO,KAAO,EAAA;AAChB,MAAM,MAAA,IAAA,GAAO,MAAO,CAAA,KAAA,CAAM,qBAAsB,EAAA,CAAA;AAChD,MAAA,QAAA,CAAS,UAAa,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,GAAW,QAAW,GAAA,OAAA,CAAA,CAAA;AAAA,KACzD;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,OAC0C,KAAA;AAC1C,IAAA,MAAM,cAAc,KAAM,CAAA,GAAA,GAAO,WAAW,KAAM,CAAA,GAAA,GAAM,MAAM,GAAQ,CAAA,GAAA,GAAA,CAAA;AACtE,IAAI,IAAA,CAAC,MAAM,KAAO,EAAA;AAChB,MAAO,OAAA,WAAA,CAAA;AAAA,KACT;AACA,IAAI,IAAA,aAAA,CAAA;AACJ,IACE,IAAA,IAAA,CAAK,GAAI,CAAA,QAAA,CAAS,KAAQ,GAAA,WAAW,CACrC,GAAA,IAAA,CAAK,GAAI,CAAA,QAAA,CAAS,KAAQ,GAAA,WAAW,CACrC,EAAA;AACA,MAAA,aAAA,GACE,QAAS,CAAA,UAAA,GAAa,QAAS,CAAA,WAAA,GAC3B,aACA,GAAA,cAAA,CAAA;AAAA,KACD,MAAA;AACL,MAAA,aAAA,GACE,QAAS,CAAA,UAAA,GAAa,QAAS,CAAA,WAAA,GAC3B,aACA,GAAA,cAAA,CAAA;AAAA,KACR;AACA,IAAA,OAAO,UAAW,CAAA,aAAA,CAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAClB,OAC0C,KAAA;AAC1C,IAAM,MAAA,SAAA,GAAY,sBAAsB,OAAO,CAAA,CAAA;AAC/C,IAAU,SAAA,CAAA,KAAA,CAAO,YAAY,OAAO,CAAA,CAAA;AACpC,IAAO,OAAA,SAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,UAAmC,KAAA;AACxD,IAAS,QAAA,CAAA,UAAA,GAAa,kCAAc,KAAM,CAAA,GAAA,CAAA;AAC1C,IAAA,KAAA;AAAA,MACE,KAAA,CAAM,QAAQ,CAAC,QAAA,CAAS,OAAO,QAAS,CAAA,KAAK,CAAK,GAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,KAAM,CAAA,GAAA;AAAA,KACxE,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,WAAwB,KAAA;AAC9C,IAAA,QAAA,CAAS,WAAc,GAAA,WAAA,CAAA;AAEvB,IAAA,IAAI,MAAM,KAAO,EAAA;AACf,MAAA,KAAA,CAAM,CAAC,QAAA,CAAS,KAAO,EAAA,QAAA,CAAS,KAAK,CAAC,CAAA,CAAA;AAAA,KACxC;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,KAAA,GAAQ,CAAC,GAA2B,KAAA;AACxC,IAAA,IAAA,CAAK,oBAAoB,GAAG,CAAA,CAAA;AAC5B,IAAA,IAAA,CAAK,aAAa,GAAG,CAAA,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,MAAM,aAAa,YAAY;AAC7B,IAAA,MAAM,QAAS,EAAA,CAAA;AACf,IAAA,IAAA;AAAA,MACE,YAAA;AAAA,MACA,KAAA,CAAM,QAAQ,CAAC,QAAA,CAAS,OAAO,QAAS,CAAA,KAAK,IAAI,KAAM,CAAA,UAAA;AAAA,KACzD,CAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,wBAAA,GAA2B,CAC/B,KACsD,KAAA;AA/I1D,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAgJI,IAAI,IAAA,cAAA,CAAe,SAAS,QAAS,CAAA,QAAA;AAAU,MAAA,OAAA;AAC/C,IAAU,SAAA,EAAA,CAAA;AACV,IAAA,IAAI,UAAa,GAAA,CAAA,CAAA;AACjB,IAAA,IAAI,MAAM,QAAU,EAAA;AAClB,MAAM,MAAA,OAAA,GAAA,CACH,uBAAqB,OAArB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA8B,KAAK,CAAnC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuC,OAAvC,KAAA,IAAA,GAAA,EAAA,GACA,KAAqB,CAAA,OAAA,CAAA;AACxB,MAAA,MAAM,kBAAqB,GAAA,MAAA,CAAO,KAAO,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AACjE,MAAe,UAAA,GAAA,CAAA,kBAAA,GAAqB,OAAW,IAAA,QAAA,CAAS,UAAc,GAAA,GAAA,CAAA;AAAA,KACjE,MAAA;AACL,MAAM,MAAA,OAAA,GAAA,CACH,uBAAqB,OAArB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA8B,KAAK,CAAnC,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAuC,OAAvC,KAAA,IAAA,GAAA,EAAA,GACA,KAAqB,CAAA,OAAA,CAAA;AACxB,MAAA,MAAM,gBAAmB,GAAA,MAAA,CAAO,KAAO,CAAA,qBAAA,EAAwB,CAAA,IAAA,CAAA;AAC/D,MAAe,UAAA,GAAA,CAAA,OAAA,GAAU,gBAAoB,IAAA,QAAA,CAAS,UAAc,GAAA,GAAA,CAAA;AAAA,KACtE;AACA,IAAI,IAAA,UAAA,GAAa,KAAK,UAAa,GAAA,GAAA;AAAK,MAAA,OAAA;AACxC,IAAA,OAAO,YAAY,UAAU,CAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAM,MAAA,sBAAA,GAAyB,CAAC,KAAsB,KAAA;AApKxD,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAqKI,IACE,IAAA,CAAA,CAAA,EAAA,GAAA,UAAA,CAAW,eAAe,KAA1B,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAiC,eACjC,EAAW,GAAA,UAAA,CAAA,cAAA,CAAA,CAAgB,KAA3B,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAkC,QAClC,CAAA,EAAA;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AAAA,KACvB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,OAAO,KAAmC,KAAA;AAC7D,IAAM,MAAA,SAAA,GAAY,yBAAyB,KAAK,CAAA,CAAA;AAChD,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,MAAM,QAAS,EAAA,CAAA;AACf,MAAU,SAAA,CAAA,KAAA,CAAO,aAAa,KAAK,CAAA,CAAA;AAAA,KACrC;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAAmC,KAAA;AACxD,IAAM,MAAA,SAAA,GAAY,yBAAyB,KAAK,CAAA,CAAA;AAChD,IAAA,IAAI,SAAW,EAAA;AACb,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,QAAqB,KAAA;AAC/C,IAAI,IAAA,cAAA,CAAe,SAAS,QAAS,CAAA,QAAA;AAAU,MAAA,OAAA;AAC/C,IAAM,MAAA,SAAA,GAAY,YAAY,QAAQ,CAAA,CAAA;AACtC,IAAA,IAAI,SAAW,EAAA;AACb,MAAW,UAAA,EAAA,CAAA;AAAA,KACb;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,sBAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}