diff --git a/src/datetime-picker/DatePicker.tsx b/src/datetime-picker/DatePicker.tsx index 5007ffe4e..581c77bf5 100644 --- a/src/datetime-picker/DatePicker.tsx +++ b/src/datetime-picker/DatePicker.tsx @@ -11,7 +11,7 @@ import { // Utils import { pick, - range, + clamp, extend, isDate, padZero, @@ -63,7 +63,7 @@ export default defineComponent({ setup(props, { emit, slots }) { const formatValue = (value?: Date) => { if (isDate(value)) { - const timestamp = range( + const timestamp = clamp( value.getTime(), props.minDate.getTime(), props.maxDate.getTime() diff --git a/src/datetime-picker/TimePicker.tsx b/src/datetime-picker/TimePicker.tsx index bb068c4b2..758c9de4c 100644 --- a/src/datetime-picker/TimePicker.tsx +++ b/src/datetime-picker/TimePicker.tsx @@ -10,7 +10,7 @@ import { // Utils import { pick, - range, + clamp, extend, padZero, createNamespace, @@ -60,8 +60,8 @@ export default defineComponent({ } let [hour, minute] = value.split(':'); - hour = padZero(range(+hour, +minHour, +maxHour)); - minute = padZero(range(+minute, +minMinute, +maxMinute)); + hour = padZero(clamp(+hour, +minHour, +maxHour)); + minute = padZero(clamp(+minute, +minMinute, +maxMinute)); return `${hour}:${minute}`; }; diff --git a/src/image-preview/ImagePreviewItem.tsx b/src/image-preview/ImagePreviewItem.tsx index 154cacd06..89e5920cb 100644 --- a/src/image-preview/ImagePreviewItem.tsx +++ b/src/image-preview/ImagePreviewItem.tsx @@ -1,7 +1,7 @@ import { watch, computed, reactive, CSSProperties, defineComponent } from 'vue'; // Utils -import { range, preventDefault, createNamespace } from '../utils'; +import { clamp, preventDefault, createNamespace } from '../utils'; // Composables import { useTouch } from '../composables/use-touch'; @@ -107,7 +107,7 @@ export default defineComponent({ }); const setScale = (scale: number) => { - scale = range(scale, +props.minZoom, +props.maxZoom); + scale = clamp(scale, +props.minZoom, +props.maxZoom); if (scale !== state.scale) { state.scale = scale; @@ -171,8 +171,8 @@ export default defineComponent({ const { deltaX, deltaY } = touch; const moveX = deltaX.value + startMoveX; const moveY = deltaY.value + startMoveY; - state.moveX = range(moveX, -maxMoveX.value, maxMoveX.value); - state.moveY = range(moveY, -maxMoveY.value, maxMoveY.value); + state.moveX = clamp(moveX, -maxMoveX.value, maxMoveX.value); + state.moveY = clamp(moveY, -maxMoveY.value, maxMoveY.value); } if (state.zooming && touches.length === 2) { @@ -224,8 +224,8 @@ export default defineComponent({ if (!event.touches.length) { if (state.zooming) { - state.moveX = range(state.moveX, -maxMoveX.value, maxMoveX.value); - state.moveY = range(state.moveY, -maxMoveY.value, maxMoveY.value); + state.moveX = clamp(state.moveX, -maxMoveX.value, maxMoveX.value); + state.moveY = clamp(state.moveY, -maxMoveY.value, maxMoveY.value); state.zooming = false; } diff --git a/src/picker/PickerColumn.tsx b/src/picker/PickerColumn.tsx index eb2ebf922..416025301 100644 --- a/src/picker/PickerColumn.tsx +++ b/src/picker/PickerColumn.tsx @@ -4,7 +4,7 @@ import { ref, watch, reactive, PropType, defineComponent } from 'vue'; // Utils import { deepClone } from '../utils/deep-clone'; import { - range, + clamp, isObject, unknownProp, preventDefault, @@ -119,7 +119,7 @@ export default defineComponent({ (props.itemHeight * (+props.visibleItemCount - 1)) / 2; const adjustIndex = (index: number) => { - index = range(index, 0, count()); + index = clamp(index, 0, count()); for (let i = index; i < count(); i++) { if (!isOptionDisabled(state.options[i])) return i; @@ -178,7 +178,7 @@ export default defineComponent({ }; const getIndexByOffset = (offset: number) => - range(Math.round(-offset / props.itemHeight), 0, count() - 1); + clamp(Math.round(-offset / props.itemHeight), 0, count() - 1); const momentum = (distance: number, duration: number) => { const speed = Math.abs(distance / duration); @@ -234,7 +234,7 @@ export default defineComponent({ preventDefault(event, true); } - state.offset = range( + state.offset = clamp( startOffset + touch.deltaY.value, -(count() * props.itemHeight), props.itemHeight diff --git a/src/slider/Slider.tsx b/src/slider/Slider.tsx index bbf5db15a..4986b673c 100644 --- a/src/slider/Slider.tsx +++ b/src/slider/Slider.tsx @@ -2,7 +2,7 @@ import { ref, computed, PropType, CSSProperties, defineComponent } from 'vue'; // Utils import { - range, + clamp, addUnit, addNumber, getSizeStyle, @@ -108,7 +108,7 @@ export default defineComponent({ const max = +props.max; const step = +props.step; - value = range(value, min, max); + value = clamp(value, min, max); const diff = Math.round((value - min) / step) * step; return addNumber(min, diff); }; diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index b7db1f8ff..03f78400f 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -1,7 +1,7 @@ import { ref, Ref, reactive, computed, PropType, defineComponent } from 'vue'; // Utils -import { range, isDef, createNamespace, preventDefault } from '../utils'; +import { clamp, isDef, createNamespace, preventDefault } from '../utils'; import { callInterceptor, Interceptor } from '../utils/interceptor'; // Composables @@ -117,7 +117,7 @@ export default defineComponent({ preventDefault(event, props.stopPropagation); } - state.offset = range( + state.offset = clamp( deltaX.value + startOffset, -rightWidth.value, leftWidth.value @@ -154,14 +154,13 @@ export default defineComponent({ } }; - const getClickHandler = (position: SwipeCellPosition, stop?: boolean) => ( - event: MouseEvent - ) => { - if (stop) { - event.stopPropagation(); - } - onClick(position); - }; + const getClickHandler = + (position: SwipeCellPosition, stop?: boolean) => (event: MouseEvent) => { + if (stop) { + event.stopPropagation(); + } + onClick(position); + }; const renderSideContent = ( side: SwipeCellSide, diff --git a/src/swipe/Swipe.tsx b/src/swipe/Swipe.tsx index 6bb055163..f5d4c9285 100644 --- a/src/swipe/Swipe.tsx +++ b/src/swipe/Swipe.tsx @@ -15,7 +15,7 @@ import { // Utils import { - range, + clamp, isHidden, truthProp, preventDefault, @@ -93,9 +93,8 @@ export default defineComponent({ const touch = useTouch(); const windowSize = useWindowSize(); - const { children, linkChildren } = useChildren( - SWIPE_KEY - ); + const { children, linkChildren } = + useChildren(SWIPE_KEY); const count = computed(() => children.length); @@ -149,9 +148,9 @@ export default defineComponent({ if (pace) { if (props.loop) { - return range(active + pace, -1, count.value); + return clamp(active + pace, -1, count.value); } - return range(active + pace, 0, maxCount.value); + return clamp(active + pace, 0, maxCount.value); } return active; }; @@ -164,7 +163,7 @@ export default defineComponent({ let targetOffset = offset - currentPosition; if (!props.loop) { - targetOffset = range(targetOffset, minOffset.value, 0); + targetOffset = clamp(targetOffset, minOffset.value, 0); } return targetOffset; diff --git a/src/utils/format/number.ts b/src/utils/format/number.ts index b80503715..30dfb3ee0 100644 --- a/src/utils/format/number.ts +++ b/src/utils/format/number.ts @@ -1,4 +1,5 @@ -export function range(num: number, min: number, max: number): number { +/** clamps number within the inclusive lower and upper bounds */ +export function clamp(num: number, min: number, max: number): number { return Math.min(Math.max(num, min), max); }