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

A Component Library for Vue 3

{"version":3,"file":"useSliderButton.mjs","sources":["../../../../../../packages/components/slider/src/useSliderButton.ts"],"sourcesContent":["import { computed, inject, nextTick, ref, watch } from 'vue'\nimport debounce from 'lodash/debounce'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { off, on } from '@element-plus/utils/dom'\n\nimport type { ComputedRef, CSSProperties } from 'vue'\nimport type {\n  ISliderButtonInitData,\n  ISliderButtonProps,\n  ISliderProvider,\n} from './slider.type'\n\nconst useTooltip = (\n  props: ISliderButtonProps,\n  formatTooltip: ComputedRef<(value: number) => number | string>,\n  showTooltip: ComputedRef<boolean>\n) => {\n  const tooltip = ref(null)\n\n  const tooltipVisible = ref(false)\n\n  const enableFormat = computed(() => {\n    return formatTooltip.value instanceof Function\n  })\n\n  const formatValue = computed(() => {\n    return (\n      (enableFormat.value && formatTooltip.value(props.modelValue)) ||\n      props.modelValue\n    )\n  })\n\n  const displayTooltip = debounce(() => {\n    showTooltip.value && (tooltipVisible.value = true)\n  }, 50)\n\n  const hideTooltip = debounce(() => {\n    showTooltip.value && (tooltipVisible.value = false)\n  }, 50)\n\n  return {\n    tooltip,\n    tooltipVisible,\n    formatValue,\n    displayTooltip,\n    hideTooltip,\n  }\n}\n\nexport const useSliderButton = (\n  props: ISliderButtonProps,\n  initData: ISliderButtonInitData,\n  emit\n) => {\n  const {\n    disabled,\n    min,\n    max,\n    step,\n    showTooltip,\n    precision,\n    sliderSize,\n    formatTooltip,\n    emitChange,\n    resetSize,\n    updateDragging,\n  } = inject<ISliderProvider>('SliderProvider')\n\n  const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } =\n    useTooltip(props, formatTooltip, showTooltip)\n\n  const currentPosition = computed(() => {\n    return `${\n      ((props.modelValue - min.value) / (max.value - min.value)) * 100\n    }%`\n  })\n\n  const wrapperStyle = computed(() => {\n    return (\n      props.vertical\n        ? { bottom: currentPosition.value }\n        : { left: currentPosition.value }\n    ) as CSSProperties\n  })\n\n  const handleMouseEnter = () => {\n    initData.hovering = true\n    displayTooltip()\n  }\n\n  const handleMouseLeave = () => {\n    initData.hovering = false\n    if (!initData.dragging) {\n      hideTooltip()\n    }\n  }\n\n  const onButtonDown = (event: MouseEvent | TouchEvent) => {\n    if (disabled.value) return\n    event.preventDefault()\n    onDragStart(event)\n    on(window, 'mousemove', onDragging)\n    on(window, 'touchmove', onDragging)\n    on(window, 'mouseup', onDragEnd)\n    on(window, 'touchend', onDragEnd)\n    on(window, 'contextmenu', onDragEnd)\n  }\n\n  const onLeftKeyDown = () => {\n    if (disabled.value) return\n    initData.newPosition =\n      parseFloat(currentPosition.value) -\n      (step.value / (max.value - min.value)) * 100\n    setPosition(initData.newPosition)\n    emitChange()\n  }\n\n  const onRightKeyDown = () => {\n    if (disabled.value) return\n    initData.newPosition =\n      parseFloat(currentPosition.value) +\n      (step.value / (max.value - min.value)) * 100\n    setPosition(initData.newPosition)\n    emitChange()\n  }\n\n  const getClientXY = (event: MouseEvent | TouchEvent) => {\n    let clientX: number\n    let clientY: number\n    if (event.type.startsWith('touch')) {\n      clientY = (event as TouchEvent).touches[0].clientY\n      clientX = (event as TouchEvent).touches[0].clientX\n    } else {\n      clientY = (event as MouseEvent).clientY\n      clientX = (event as MouseEvent).clientX\n    }\n    return {\n      clientX,\n      clientY,\n    }\n  }\n\n  const onDragStart = (event: MouseEvent | TouchEvent) => {\n    initData.dragging = true\n    initData.isClick = true\n    const { clientX, clientY } = getClientXY(event)\n    if (props.vertical) {\n      initData.startY = clientY\n    } else {\n      initData.startX = clientX\n    }\n    initData.startPosition = parseFloat(currentPosition.value)\n    initData.newPosition = initData.startPosition\n  }\n\n  const onDragging = (event: MouseEvent | TouchEvent) => {\n    if (initData.dragging) {\n      initData.isClick = false\n      displayTooltip()\n      resetSize()\n      let diff: number\n      const { clientX, clientY } = getClientXY(event)\n      if (props.vertical) {\n        initData.currentY = clientY\n        diff = ((initData.startY - initData.currentY) / sliderSize.value) * 100\n      } else {\n        initData.currentX = clientX\n        diff = ((initData.currentX - initData.startX) / sliderSize.value) * 100\n      }\n      initData.newPosition = initData.startPosition + diff\n      setPosition(initData.newPosition)\n    }\n  }\n\n  const onDragEnd = () => {\n    if (initData.dragging) {\n      /*\n       * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移\n       * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上\n       */\n      setTimeout(() => {\n        initData.dragging = false\n        if (!initData.hovering) {\n          hideTooltip()\n        }\n        if (!initData.isClick) {\n          setPosition(initData.newPosition)\n          emitChange()\n        }\n      }, 0)\n      off(window, 'mousemove', onDragging)\n      off(window, 'touchmove', onDragging)\n      off(window, 'mouseup', onDragEnd)\n      off(window, 'touchend', onDragEnd)\n      off(window, 'contextmenu', onDragEnd)\n    }\n  }\n\n  const setPosition = async (newPosition: number) => {\n    if (newPosition === null || isNaN(newPosition)) return\n    if (newPosition < 0) {\n      newPosition = 0\n    } else if (newPosition > 100) {\n      newPosition = 100\n    }\n    const lengthPerStep = 100 / ((max.value - min.value) / step.value)\n    const steps = Math.round(newPosition / lengthPerStep)\n    let value =\n      steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value\n    value = parseFloat(value.toFixed(precision.value))\n    emit(UPDATE_MODEL_EVENT, value)\n\n    if (!initData.dragging && props.modelValue !== initData.oldValue) {\n      initData.oldValue = props.modelValue\n    }\n\n    await nextTick()\n    initData.dragging && displayTooltip()\n    tooltip.value.updatePopper()\n  }\n\n  watch(\n    () => initData.dragging,\n    (val) => {\n      updateDragging(val)\n    }\n  )\n\n  return {\n    tooltip,\n    tooltipVisible,\n    showTooltip,\n    wrapperStyle,\n    formatValue,\n    handleMouseEnter,\n    handleMouseLeave,\n    onButtonDown,\n    onLeftKeyDown,\n    onRightKeyDown,\n    setPosition,\n  }\n}\n"],"names":[],"mappings":"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"}