1 line
12 KiB
Plaintext
1 line
12 KiB
Plaintext
|
{"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 { 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 { form: elForm, 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 = 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 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
|