chore: rename range to clamp (#8903)

* chore: rename range to clamp

* chore: merge upstream

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()

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}`;
     };

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;
           }
 

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

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);
     };

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,

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<ComponentInstance>(
-      SWIPE_KEY
-    );
+    const { children, linkChildren } =
+      useChildren<ComponentInstance>(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;

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);
 }