@varlet/ui 2.14.2 → 2.15.0-alpha.1692990022445

package/es/space/props.mjs

@@ -1,13 +1,7 @@
-import { isArray, isNumber, isString } from '@varlet/shared';
-export var internalSizeValidator = size => ['mini', 'small', 'normal', 'large'].includes(size);
-export var sizeValidator = size => internalSizeValidator(size) || isArray(size) || isNumber(size) || isString(size);
-var justifyValidator = justify => ['start', 'end', 'center', 'space-around', 'space-between', 'flex-start', 'flex-end'].includes(justify);
-var alignValidator = align => ['stretch', 'center', 'start', 'end', 'baseline', 'flex-start', 'flex-end'].includes(align);
 export var props = {
   size: {
     type: [String, Number, Array],
-    default: 'normal',
-    validator: sizeValidator
+    default: 'normal'
   },
   wrap: {
     type: Boolean,
@@ -19,15 +13,8 @@ export var props = {
   },
   justify: {
     type: String,
-    default: 'flex-start',
-    validator: justifyValidator
+    default: 'flex-start'
   },
-  align: {
-    type: String,
-    validator: alignValidator
-  },
-  inline: {
-    type: Boolean,
-    default: false
-  }
+  align: String,
+  inline: Boolean
 };

package/es/step/props.mjs

@@ -3,10 +3,6 @@ export var props = {
     type: String,
     default: 'check'
   },
-  currentIcon: {
-    type: String
-  },
-  inactiveIcon: {
-    type: String
-  }
+  currentIcon: String,
+  inactiveIcon: String
 };

package/es/steps/props.mjs

@@ -1,7 +1,4 @@
 import { defineListenerProp } from '../utils/components.mjs';
-function directionValidator(direction) {
-  return ['horizontal', 'vertical'].includes(direction);
-}
 export var props = {
   active: {
     type: [String, Number],
@@ -9,14 +6,9 @@ export var props = {
   },
   direction: {
     type: String,
-    default: 'horizontal',
-    validator: directionValidator
-  },
-  activeColor: {
-    type: String
-  },
-  inactiveColor: {
-    type: String
+    default: 'horizontal'
   },
+  activeColor: String,
+  inactiveColor: String,
   onClickStep: defineListenerProp()
 };

package/es/sticky/props.mjs

@@ -8,13 +8,7 @@ export var props = {
     type: [String, Number],
     default: 10
   },
-  cssMode: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
+  cssMode: Boolean,
+  disabled: Boolean,
   onScroll: defineListenerProp()
 };

package/es/swipe/Swipe.mjs

@@ -6,10 +6,10 @@ import { doubleRaf, nextTickFrame } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { clamp, isNumber, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
-import { onSmartUnmounted, onWindowResize } from '@varlet/use';
+import { onSmartUnmounted, onWindowResize, useTouch } from '@varlet/use';
 import { usePopup } from '../popup/provide.mjs';
 var SWIPE_DELAY = 250;
-var SWIPE_DISTANCE = 20;
+var SWIPE_OFFSET = 20;
 var {
   n,
   classes
@@ -26,7 +26,7 @@ function __render__(_ctx, _cache) {
     style: _normalizeStyle({
       width: !_ctx.vertical ? _ctx.trackSize + "px" : undefined,
       height: _ctx.vertical ? _ctx.trackSize + "px" : undefined,
-      transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.translate + "px)",
+      transform: "translate" + (_ctx.vertical ? 'Y' : 'X') + "(" + _ctx.trackTranslate + "px)",
       transitionDuration: _ctx.lockDuration ? "0ms" : _ctx.toNumber(_ctx.duration) + "ms"
     }),
     onTouchstart: _cache[0] || (_cache[0] = function () {
@@ -64,7 +64,7 @@ var __sfc__ = defineComponent({
     var size = ref(0);
     var vertical = computed(() => props.vertical);
     var trackSize = ref(0);
-    var translate = ref(0);
+    var trackTranslate = ref(0);
     var lockDuration = ref(false);
     var index = ref(0);
     var {
@@ -76,40 +76,48 @@ var __sfc__ = defineComponent({
       popup,
       bindPopup
     } = usePopup();
+    var {
+      deltaX,
+      deltaY,
+      moveX,
+      moveY,
+      offsetX,
+      offsetY,
+      touching,
+      direction,
+      startTime,
+      startTouch,
+      moveTouch,
+      endTouch
+    } = useTouch();
     var initializedIndex = false;
-    var touching = false;
     var timer = -1;
-    var startX;
-    var startY;
-    var startTime;
-    var prevX;
-    var prevY;
     var findSwipeItem = idx => swipeItems.find(_ref => {
       var {
         index
       } = _ref;
       return index.value === idx;
     });
-    var dispatchBorrower = () => {
+    var dispatchSwipeItems = () => {
       if (!props.loop) {
         return;
       }
       // track out of bounds from left
-      if (translate.value >= 0) {
+      if (trackTranslate.value >= 0) {
         findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
       }
       // track out of bounds from right
-      if (translate.value <= -(trackSize.value - size.value)) {
+      if (trackTranslate.value <= -(trackSize.value - size.value)) {
         findSwipeItem(0).setTranslate(trackSize.value);
       }
       // track not out of bounds
-      if (translate.value > -(trackSize.value - size.value) && translate.value < 0) {
+      if (trackTranslate.value > -(trackSize.value - size.value) && trackTranslate.value < 0) {
         findSwipeItem(length.value - 1).setTranslate(0);
         findSwipeItem(0).setTranslate(0);
       }
     };
     var getSwipeIndex = targetSwipeIndex => {
-      var swipeIndex = isNumber(targetSwipeIndex) ? targetSwipeIndex : Math.floor((translate.value - size.value / 2) / -size.value);
+      var swipeIndex = isNumber(targetSwipeIndex) ? targetSwipeIndex : Math.floor((trackTranslate.value - size.value / 2) / -size.value);
       var {
         loop
       } = props;
@@ -146,15 +154,14 @@ var __sfc__ = defineComponent({
       return clamp(index, 0, length.value - 1);
     };
     var fixPosition = fn => {
-      var overLeft = translate.value >= size.value;
-      var overRight = translate.value <= -trackSize.value;
+      var overLeft = trackTranslate.value >= size.value;
+      var overRight = trackTranslate.value <= -trackSize.value;
       var leftTranslate = 0;
       var rightTranslate = -(trackSize.value - size.value);
       lockDuration.value = true;
-      // 检测是否有越界情况 越界修正
       if (overLeft || overRight) {
         lockDuration.value = true;
-        translate.value = overRight ? leftTranslate : rightTranslate;
+        trackTranslate.value = overRight ? leftTranslate : rightTranslate;
         findSwipeItem(0).setTranslate(0);
         findSwipeItem(length.value - 1).setTranslate(0);
       }
@@ -186,26 +193,15 @@ var __sfc__ = defineComponent({
     var stopAutoplay = () => {
       timer && clearTimeout(timer);
     };
-    var getDirection = (x, y) => {
-      if (x > y && x > 10) {
-        return 'horizontal';
-      }
-      if (y > x && y > 10) {
-        return 'vertical';
-      }
+    var setTrackTranslate = value => {
+      trackTranslate.value = value;
+      dispatchSwipeItems();
     };
     var handleTouchstart = event => {
       if (length.value <= 1 || !props.touchable) {
         return;
       }
-      var {
-        clientX,
-        clientY
-      } = event.touches[0];
-      startX = clientX;
-      startY = clientY;
-      startTime = performance.now();
-      touching = true;
+      startTouch(event);
       stopAutoplay();
       fixPosition(() => {
         lockDuration.value = true;
@@ -216,48 +212,38 @@ var __sfc__ = defineComponent({
         touchable,
         vertical
       } = props;
-      if (!touching || !touchable) {
+      if (!touching.value || !touchable) {
         return;
       }
-      var {
-        clientX,
-        clientY
-      } = event.touches[0];
-      var deltaX = Math.abs(clientX - startX);
-      var deltaY = Math.abs(clientY - startY);
-      var direction = getDirection(deltaX, deltaY);
+      moveTouch(event);
       var expectDirection = vertical ? 'vertical' : 'horizontal';
-      if (direction === expectDirection) {
-        event.preventDefault();
-        var moveX = prevX !== undefined ? clientX - prevX : 0;
-        var moveY = prevY !== undefined ? clientY - prevY : 0;
-        prevX = clientX;
-        prevY = clientY;
-        translate.value += vertical ? moveY : moveX;
-        dispatchBorrower();
+      if (direction.value !== expectDirection) {
+        return;
       }
+      event.preventDefault();
+      setTrackTranslate(trackTranslate.value + (vertical ? moveY.value : moveX.value));
     };
     var handleTouchend = () => {
-      if (!touching) {
+      if (!touching.value) {
         return;
       }
       var {
         vertical,
         onChange
       } = props;
-      var positive = vertical ? prevY < startY : prevX < startX;
-      var distance = vertical ? Math.abs(startY - prevY) : Math.abs(startX - prevX);
-      var quickSwiping = performance.now() - startTime <= SWIPE_DELAY && distance >= SWIPE_DISTANCE;
+      endTouch();
+      var positive = vertical ? deltaY.value < 0 : deltaX.value < 0;
+      var offset = vertical ? offsetY.value : offsetX.value;
+      var quickSwiping = performance.now() - startTime.value <= SWIPE_DELAY && offset >= SWIPE_OFFSET;
       var swipeIndex = quickSwiping ? positive ? getSwipeIndex(index.value + 1) : getSwipeIndex(index.value - 1) : getSwipeIndex();
-      touching = false;
       lockDuration.value = false;
-      prevX = undefined;
-      prevY = undefined;
-      translate.value = swipeIndex * -size.value;
+      setTrackTranslate(swipeIndex * -size.value);
       var prevIndex = index.value;
       index.value = swipeIndexToIndex(swipeIndex);
       startAutoplay();
-      prevIndex !== index.value && call(onChange, index.value);
+      if (prevIndex !== index.value) {
+        call(onChange, index.value);
+      }
     };
 
     // expose
@@ -268,7 +254,7 @@ var __sfc__ = defineComponent({
       lockDuration.value = true;
       size.value = props.vertical ? swipeEl.value.offsetHeight : swipeEl.value.offsetWidth;
       trackSize.value = size.value * length.value;
-      translate.value = index.value * -size.value;
+      trackTranslate.value = index.value * -size.value;
       swipeItems.forEach(swipeItem => {
         swipeItem.setTranslate(0);
       });
@@ -295,11 +281,11 @@ var __sfc__ = defineComponent({
       fixPosition(() => {
         if (currentIndex === length.value - 1 && loop) {
           findSwipeItem(0).setTranslate(trackSize.value);
-          translate.value = length.value * -size.value;
+          trackTranslate.value = length.value * -size.value;
           return;
         }
         if (currentIndex !== length.value - 1) {
-          translate.value = index.value * -size.value;
+          trackTranslate.value = index.value * -size.value;
         }
       });
     };
@@ -321,11 +307,11 @@ var __sfc__ = defineComponent({
       fixPosition(() => {
         if (currentIndex === 0 && loop) {
           findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
-          translate.value = size.value;
+          trackTranslate.value = size.value;
           return;
         }
         if (currentIndex !== 0) {
-          translate.value = index.value * -size.value;
+          trackTranslate.value = index.value * -size.value;
         }
       });
     };
@@ -384,7 +370,7 @@ var __sfc__ = defineComponent({
       index,
       swipeEl,
       trackSize,
-      translate,
+      trackTranslate,
       lockDuration,
       handleTouchstart,
       handleTouchmove,

package/es/swipe/props.mjs

@@ -4,9 +4,7 @@ export var props = {
     type: Boolean,
     default: true
   },
-  autoplay: {
-    type: [String, Number]
-  },
+  autoplay: [String, Number],
   duration: {
     type: [String, Number],
     default: 300
@@ -19,13 +17,8 @@ export var props = {
     type: Boolean,
     default: true
   },
-  indicatorColor: {
-    type: String
-  },
-  vertical: {
-    type: Boolean,
-    default: false
-  },
+  indicatorColor: String,
+  vertical: Boolean,
   touchable: {
     type: Boolean,
     default: true

package/es/switch/Switch.mjs

@@ -1,7 +1,7 @@
 import VarFormDetails from '../form-details/index.mjs';
 import Ripple from '../ripple/index.mjs';
-import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import Hover from '../hover/index.mjs';
+import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import { defineComponent, computed, nextTick } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { multiplySizeUnit } from '../utils/elements.mjs';
@@ -136,14 +136,18 @@ var __sfc__ = defineComponent({
         'onUpdate:modelValue': updateModelValue
       } = props;
       call(onClick, event);
-      if (disabled || loading || readonly || form != null && form.disabled.value || form != null && form.readonly.value) return;
+      if (disabled || loading || readonly || form != null && form.disabled.value || form != null && form.readonly.value) {
+        return;
+      }
       var newValue = modelValue === activeValue ? inactiveValue : activeValue;
       call(onChange, newValue);
       call(updateModelValue, newValue);
       validateWithTrigger();
     };
     var hover = value => {
-      if (props.disabled || form != null && form.disabled.value) return;
+      if (props.disabled || form != null && form.disabled.value) {
+        return;
+      }
       handleHovering(value);
     };
     var reset = () => {
@@ -159,15 +163,15 @@ var __sfc__ = defineComponent({
     return {
       n,
       classes,
-      multiplySizeUnit,
-      switchActive,
       hovering,
-      hover,
       radius,
       styleComputed,
       errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
-      formReadonly: form == null ? void 0 : form.readonly
+      formReadonly: form == null ? void 0 : form.readonly,
+      multiplySizeUnit,
+      switchActive,
+      hover
     };
   }
 });

package/es/switch/props.mjs

@@ -9,33 +9,14 @@ export var props = {
   inactiveValue: {
     default: false
   },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  color: {
-    type: String
-  },
-  loadingColor: {
-    type: String
-  },
-  closeColor: {
-    type: String
-  },
-  size: {
-    type: [String, Number]
-  },
-  rules: {
-    type: Array
-  },
+  disabled: Boolean,
+  readonly: Boolean,
+  loading: Boolean,
+  color: String,
+  loadingColor: String,
+  closeColor: String,
+  size: [String, Number],
+  rules: Array,
   ripple: {
     type: Boolean,
     default: true

package/es/tab/props.mjs

@@ -1,11 +1,6 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
-  name: {
-    type: [String, Number]
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
+  name: [String, Number],
+  disabled: Boolean,
   onClick: defineListenerProp()
 };

package/es/tab-item/props.mjs

@@ -1,5 +1,3 @@
 export var props = {
-  name: {
-    type: [String, Number]
-  }
+  name: [String, Number]
 };

package/es/tabs/props.mjs

@@ -1,14 +1,5 @@
 import { defineListenerProp, pickProps } from '../utils/components.mjs';
 import { props as stickyProps } from '../sticky/props.mjs';
-function directionValidator(direction) {
-  return ['horizontal', 'vertical'].includes(direction);
-}
-function scrollableValidator(scrollable) {
-  return ['auto', 'always'].includes(scrollable);
-}
-function indicatorPositionValidator(indicatorPosition) {
-  return ['normal', 'reverse'].includes(indicatorPosition);
-}
 export var props = {
   active: {
     type: [String, Number],
@@ -16,58 +7,33 @@ export var props = {
   },
   layoutDirection: {
     type: String,
-    default: 'horizontal',
-    validator: directionValidator
+    default: 'horizontal'
   },
   itemDirection: {
     type: String,
-    default: 'horizontal',
-    validator: directionValidator
-  },
-  fixedBottom: {
-    type: Boolean,
-    default: false
-  },
-  activeColor: {
-    type: String
-  },
-  inactiveColor: {
-    type: String
-  },
-  disabledColor: {
-    type: String
-  },
-  color: {
-    type: String
-  },
-  indicatorColor: {
-    type: String
-  },
-  indicatorSize: {
-    type: [String, Number]
-  },
+    default: 'horizontal'
+  },
+  fixedBottom: Boolean,
+  activeColor: String,
+  inactiveColor: String,
+  disabledColor: String,
+  color: String,
+  indicatorColor: String,
+  indicatorSize: [String, Number],
   elevation: {
     type: [Boolean, String, Number],
     default: false
   },
   scrollable: {
     type: String,
-    default: 'auto',
-    validator: scrollableValidator
+    default: 'auto'
   },
   indicatorPosition: {
     type: String,
-    default: 'normal',
-    validator: indicatorPositionValidator
-  },
-  safeArea: {
-    type: Boolean,
-    default: false
-  },
-  sticky: {
-    type: Boolean,
-    default: false
+    default: 'normal'
   },
+  safeArea: Boolean,
+  sticky: Boolean,
   stickyCssMode: pickProps(stickyProps, 'cssMode'),
   stickyZIndex: pickProps(stickyProps, 'zIndex'),
   offsetTop: pickProps(stickyProps, 'offsetTop'),

package/es/tabs-items/props.mjs

@@ -8,9 +8,6 @@ export var props = {
     type: Boolean,
     default: true
   },
-  loop: {
-    type: Boolean,
-    default: false
-  },
+  loop: Boolean,
   'onUpdate:active': defineListenerProp()
 };

package/es/time-picker/props.mjs

@@ -2,45 +2,23 @@ import { defineListenerProp } from '../utils/components.mjs';
 export var hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'];
 export var hours24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
 export var minSec = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
-function formatValidator(type) {
-  return ['ampm', '24hr'].includes(type);
-}
 export var props = {
-  modelValue: {
-    type: String
-  },
+  modelValue: String,
   elevation: {
     type: [Boolean, Number, String],
     default: false
   },
-  color: {
-    type: String
-  },
-  headerColor: {
-    type: String
-  },
+  color: String,
+  headerColor: String,
   format: {
     type: String,
-    default: 'ampm',
-    validator: formatValidator
-  },
-  allowedTime: {
-    type: Object
-  },
-  min: {
-    type: String
-  },
-  max: {
-    type: String
-  },
-  useSeconds: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
+    default: 'ampm'
   },
+  allowedTime: Object,
+  min: String,
+  max: String,
+  useSeconds: Boolean,
+  readonly: Boolean,
   'onUpdate:modelValue': defineListenerProp(),
   onChange: defineListenerProp()
 };