You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
13 KiB
1 line
13 KiB
2 years ago
|
{"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.newPo
|