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
8.7 KiB
1 line
8.7 KiB
11 months ago
|
{"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
|