xdesign-vue-next/es/slider/slider-button.mjs.map

XDesign Component for vue-next

{"version":3,"file":"slider-button.mjs","sources":["../../src/slider/slider-button.tsx"],"sourcesContent":["import {\n  PropType,\n  defineComponent,\n  ComponentPublicInstance,\n  ref,\n  computed,\n  reactive,\n  nextTick,\n  watchEffect,\n  inject,\n} from 'vue';\nimport TTooltip from '../tooltip/index';\nimport { TdSliderProps } from './type';\n\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useSliderTooltip } from './hooks/useSliderTooltip';\nimport { sliderPropsInjectKey } from './util/constants';\nimport isFunction from 'lodash/isFunction';\n\nexport default defineComponent({\n  name: 'XSliderButton',\n  props: {\n    value: {\n      type: [Number],\n      default: 0,\n    },\n    vertical: {\n      type: Boolean,\n      default: false,\n    },\n    tooltipProps: {\n      type: [Boolean, Object],\n      default: true,\n    },\n    label: {\n      type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,\n      default: false,\n    },\n  },\n  emits: ['input'],\n  setup(props, ctx) {\n    const COMPONENT_NAME = usePrefixClass('slider__button');\n    const tooltipConfig = computed(() => props);\n    const { tooltipRef, tooltipProps, toggleTooltip, showTooltip } = useSliderTooltip(tooltipConfig);\n    const parentProps = inject(sliderPropsInjectKey);\n    const buttonRef = ref();\n\n    /** --------------------- slide button 相关状态start ------------------- */\n    const slideButtonProps = reactive({\n      dragging: false,\n      isClick: false,\n      startX: 0,\n      startY: 0,\n      startPos: 0,\n      newPos: null,\n    });\n\n    const rangeDiff = computed(() => {\n      return Number(parentProps.max) - Number(parentProps.min);\n    });\n\n    const currentPos = computed(() => {\n      return `${((props.value - parentProps.min) / rangeDiff.value) * 100}%`;\n    });\n\n    const step = computed(() => {\n      return parentProps.step;\n    });\n\n    const wrapperStyle = computed(() => {\n      return props.vertical ? { bottom: currentPos.value } : { left: currentPos.value };\n    });\n\n    watchEffect(() => {\n      parentProps.toggleDragging(slideButtonProps.dragging);\n    });\n    /** --------------------- slide button 相关状态end ------------------- */\n\n    /** --------------------- slide button 相关事件start ------------------- */\n    /** 设置当前位置 */\n    const setPosition = (pos: number) => {\n      let newPos = pos;\n      if (newPos === null || Number.isNaN(newPos)) {\n        return;\n      }\n\n      if (newPos > 100) {\n        newPos = 100;\n      } else if (newPos < 0) {\n        newPos = 0;\n      }\n      const perStepLen = (100 * step.value) / rangeDiff.value;\n      const steps = Math.round(newPos / perStepLen);\n      let value = steps * perStepLen * rangeDiff.value * 0.01;\n      value += parentProps.min;\n      value = Number(parseFloat(`${value}`).toFixed(parentProps.precision));\n      ctx.emit('input', value);\n      nextTick(() => {\n        tooltipRef.value && tooltipRef.value.updatePopper?.();\n      });\n    };\n\n    const handleMouseEnter = () => {\n      (buttonRef.value as ComponentPublicInstance).focus();\n      toggleTooltip(true);\n    };\n    const handleMouseLeave = () => {\n      if (!slideButtonProps.dragging) {\n        toggleTooltip(false);\n      }\n    };\n\n    const onDragStart = (event: MouseEvent | TouchEvent) => {\n      slideButtonProps.dragging = true;\n      slideButtonProps.isClick = true;\n      const { type } = event;\n      let { clientY, clientX } = event as MouseEvent;\n      if (type === 'touchstart') {\n        const touch = (event as TouchEvent).touches;\n        [clientY, clientX] = [touch[0].clientY, touch[0].clientX];\n      }\n      if (props.vertical) {\n        slideButtonProps.startY = clientY;\n      } else {\n        slideButtonProps.startX = clientX;\n      }\n      slideButtonProps.startPos = parseFloat(currentPos.value);\n      slideButtonProps.newPos = slideButtonProps.startPos;\n    };\n\n    const onDragging = (e: MouseEvent | TouchEvent) => {\n      const event = e;\n      if (!slideButtonProps.dragging) {\n        return;\n      }\n      slideButtonProps.isClick = false;\n      if (parentProps?.resetSize && isFunction(parentProps?.resetSize)) {\n        parentProps.resetSize();\n      }\n      let diff = 0;\n      const parentSliderSize = parentProps.sliderSize;\n      if (props.vertical) {\n        diff = slideButtonProps.startY - (event as MouseEvent).clientY;\n      } else {\n        diff = (event as MouseEvent).clientX - slideButtonProps.startX;\n      }\n      diff = (diff / parentSliderSize) * 100;\n      slideButtonProps.newPos = slideButtonProps.startPos + diff;\n      setPosition(slideButtonProps.newPos);\n    };\n\n    const onDragEnd = () => {\n      if (slideButtonProps.dragging) {\n        setTimeout(() => {\n          slideButtonProps.dragging = false;\n          toggleTooltip(false);\n          if (!slideButtonProps.isClick) {\n            setPosition(slideButtonProps.newPos);\n          }\n        }, 0);\n        window.removeEventListener('mousemove', onDragging);\n        window.removeEventListener('touchmove', onDragging);\n        window.removeEventListener('mouseup', onDragEnd);\n        window.removeEventListener('touchend', onDragEnd);\n        window.removeEventListener('contextmenu', onDragEnd);\n      }\n    };\n\n    function onButtonDown(event: MouseEvent | TouchEvent) {\n      if (parentProps.disabled) {\n        return;\n      }\n      event.preventDefault();\n      onDragStart(event);\n      window.addEventListener('mousemove', onDragging);\n      window.addEventListener('mouseup', onDragEnd);\n      window.addEventListener('touchmove', onDragging);\n      window.addEventListener('touchend', onDragEnd);\n      window.addEventListener('contextmenu', onDragEnd);\n    }\n\n    const onKeyDown = (state: 'sub' | 'add') => {\n      if (parentProps.disabled) {\n        return;\n      }\n      let stepLength = (step.value / rangeDiff.value) * 100;\n      if (state === 'sub') {\n        stepLength = -stepLength;\n      }\n      slideButtonProps.newPos = parseFloat(currentPos.value) + stepLength;\n      setPosition(slideButtonProps.newPos);\n    };\n\n    const onNativeKeyDown = (e: KeyboardEvent) => {\n      const { code } = e;\n      e.preventDefault();\n      if (code === 'ArrowDown' || code === 'ArrowLeft') {\n        onKeyDown('sub');\n      }\n      if (code === 'ArrowUp' || code === 'ArrowRight') {\n        onKeyDown('add');\n      }\n    };\n    /** --------------------- slide button 相关事件end ------------------- */\n\n    /** 暴露设置按钮坐标方法供父组件调用 */\n    ctx.expose({\n      setPosition,\n    });\n\n    return () => (\n      <div\n        ref={buttonRef}\n        class={`${COMPONENT_NAME.value}-wrapper`}\n        style={wrapperStyle.value}\n        tabindex=\"0\"\n        show-tooltip={showTooltip.value}\n        disabled={parentProps.disabled}\n        onmouseenter={handleMouseEnter}\n        onmouseleave={handleMouseLeave}\n        onmousedown={onButtonDown}\n        onTouchstart={onButtonDown}\n        onfocus={handleMouseEnter}\n        onblur={handleMouseLeave}\n        onKeydown={onNativeKeyDown}\n      >\n        {showTooltip.value ? (\n          <TTooltip ref={tooltipRef} disabled={!showTooltip.value} {...tooltipProps.value}>\n            <div class={[COMPONENT_NAME.value, { [`${COMPONENT_NAME.value}--dragging`]: slideButtonProps.dragging }]} />\n          </TTooltip>\n        ) : (\n          <div\n            class={[COMPONENT_NAME.value, { [`${COMPONENT_NAME.value}--dragging`]: slideButtonProps.dragging }]}\n          ></div>\n        )}\n      </div>\n    );\n  },\n});\n"],"names":["name","props","value","vertical","type","tooltipProps","label","setup","dragging","isClick","startX","startY","startPos","newPos","watchEffect","parentProps","ctx","nextTick","buttonRef","clientY","clientX","slideButtonProps","isFunction","diff","setPosition","setTimeout","window","_createVNode"],"mappings":"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"}