@varlet/ui 2.14.2 → 2.15.0-alpha.1692990022445

package/es/fab/props.mjs

@@ -1,19 +1,6 @@
 import { defineListenerProp } from '../utils/components.mjs';
-import { typeValidator } from '../button/props.mjs';
-export function positionValidator(position) {
-  return ['left-top', 'right-top', 'left-bottom', 'right-bottom'].includes(position);
-}
-export function directionValidator(direction) {
-  return ['top', 'right', 'bottom', 'left'].includes(direction);
-}
-export function triggerValidator(trigger) {
-  return ['click', 'hover'].includes(trigger);
-}
 export var props = {
-  active: {
-    type: Boolean,
-    default: false
-  },
+  active: Boolean,
   show: {
     type: Boolean,
     default: true
@@ -24,31 +11,22 @@ export var props = {
   },
   type: {
     type: String,
-    default: 'primary',
-    validator: typeValidator
+    default: 'primary'
   },
   position: {
     type: String,
-    default: 'right-bottom',
-    validator: positionValidator
+    default: 'right-bottom'
   },
   direction: {
     type: String,
-    default: 'top',
-    validator: directionValidator
+    default: 'top'
   },
   trigger: {
     type: String,
-    default: 'click',
-    validator: triggerValidator
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  color: {
-    type: String
+    default: 'click'
   },
+  disabled: Boolean,
+  color: String,
   inactiveIcon: {
     type: String,
     default: 'plus'
@@ -57,12 +35,8 @@ export var props = {
     type: String,
     default: 'window-close'
   },
-  inactiveIconSize: {
-    type: [Number, String]
-  },
-  activeIconSize: {
-    type: [Number, String]
-  },
+  inactiveIconSize: [Number, String],
+  activeIconSize: [Number, String],
   fixed: {
     type: Boolean,
     default: true
@@ -71,26 +45,15 @@ export var props = {
     type: [Number, String],
     default: 90
   },
-  top: {
-    type: [Number, String]
-  },
-  bottom: {
-    type: [Number, String]
-  },
-  left: {
-    type: [Number, String]
-  },
-  right: {
-    type: [Number, String]
-  },
+  top: [Number, String],
+  bottom: [Number, String],
+  left: [Number, String],
+  right: [Number, String],
   elevation: {
     type: [Boolean, Number, String],
     default: true
   },
-  safeArea: {
-    type: Boolean,
-    default: false
-  },
+  safeArea: Boolean,
   teleport: {
     type: [String, Object, Boolean],
     default: 'body'

package/es/field-decorator/props.mjs

@@ -1,10 +1,4 @@
 import { defineListenerProp } from '../utils/components.mjs';
-export function sizeValidator(size) {
-  return ['small', 'normal'].includes(size);
-}
-export function variantValidator(variant) {
-  return ['outlined', 'standard'].includes(variant);
-}
 export var props = {
   value: {
     type: null,
@@ -14,22 +8,16 @@ export var props = {
     type: String,
     default: ''
   },
-  isFocus: {
-    type: Boolean
-  },
+  isFocus: Boolean,
   size: {
     type: String,
-    default: 'normal',
-    validator: sizeValidator
+    default: 'normal'
   },
   variant: {
     type: String,
-    default: 'standard',
-    validator: variantValidator
-  },
-  placeholder: {
-    type: String
+    default: 'standard'
   },
+  placeholder: String,
   line: {
     type: Boolean,
     default: true
@@ -38,36 +26,15 @@ export var props = {
     type: Boolean,
     default: true
   },
-  textColor: {
-    type: String
-  },
-  focusColor: {
-    type: String
-  },
-  blurColor: {
-    type: String
-  },
-  errorMessage: {
-    type: String
-  },
-  formDisabled: {
-    type: Boolean
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
-  cursor: {
-    type: String
-  },
-  composing: {
-    type: Boolean,
-    default: false
-  },
+  textColor: String,
+  focusColor: String,
+  blurColor: String,
+  errorMessage: String,
+  formDisabled: Boolean,
+  disabled: Boolean,
+  clearable: Boolean,
+  cursor: String,
+  composing: Boolean,
   onClick: defineListenerProp(),
   onClear: defineListenerProp()
 };

package/es/form/props.mjs

@@ -1,19 +1,7 @@
-function scrollToErrorValidator(status) {
-  return ['start', 'end'].includes(status);
-}
 export var props = {
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  scrollToError: {
-    type: String,
-    validator: scrollToErrorValidator
-  },
+  disabled: Boolean,
+  readonly: Boolean,
+  scrollToError: String,
   scrollToErrorOffsetY: {
     type: [String, Number],
     default: 0

package/es/icon/props.mjs

@@ -1,14 +1,8 @@
 import { defineListenerProp } from '../utils/components.mjs';
 export var props = {
-  name: {
-    type: String
-  },
-  size: {
-    type: [Number, String]
-  },
-  color: {
-    type: String
-  },
+  name: String,
+  size: [Number, String],
+  color: String,
   namespace: {
     type: String,
     default: 'var-icon'
@@ -17,8 +11,6 @@ export var props = {
     type: [Number, String],
     default: 0
   },
-  animationClass: {
-    type: String
-  },
+  animationClass: String,
   onClick: defineListenerProp()
 };

package/es/image/props.mjs

@@ -1,46 +1,22 @@
 import { defineListenerProp } from '../utils/components.mjs';
-function fitValidator(fit) {
-  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit);
-}
 export var props = {
-  src: {
-    type: String
-  },
+  src: String,
   fit: {
     type: String,
-    validator: fitValidator,
     default: 'fill'
   },
-  alt: {
-    type: String
-  },
-  title: {
-    type: String
-  },
-  width: {
-    type: [String, Number]
-  },
-  height: {
-    type: [String, Number]
-  },
+  alt: String,
+  title: String,
+  width: [String, Number],
+  height: [String, Number],
   radius: {
     type: [String, Number],
     default: 0
   },
-  loading: {
-    type: String
-  },
-  error: {
-    type: String
-  },
-  lazy: {
-    type: Boolean,
-    default: false
-  },
-  ripple: {
-    type: Boolean,
-    default: false
-  },
+  loading: String,
+  error: String,
+  lazy: Boolean,
+  ripple: Boolean,
   block: {
     type: Boolean,
     default: true

package/es/image-preview/ImagePreview.mjs

@@ -3,9 +3,9 @@ import VarSwipeItem from '../swipe-item/index.mjs';
 import VarIcon from '../icon/index.mjs';
 import VarPopup from '../popup/index.mjs';
 import { defineComponent, ref, computed, watch } from 'vue';
+import { toNumber, clamp } from '@varlet/shared';
+import { useEventListener, useTouch } from '@varlet/use';
 import { props } from './props.mjs';
-import { toNumber } from '@varlet/shared';
-import { useEventListener } from '@varlet/use';
 import { call, createNamespace } from '../utils/components.mjs';
 var {
   n,
@@ -121,6 +121,29 @@ var __sfc__ = defineComponent({
   props,
   setup(props) {
     var popupShow = ref(false);
+    var scale = ref(1);
+    var translateX = ref(0);
+    var translateY = ref(0);
+    var transitionTimingFunction = ref(undefined);
+    var transitionDuration = ref(undefined);
+    var canSwipe = ref(true);
+    var swipeRef = ref(null);
+    var {
+      moveX,
+      moveY,
+      distance,
+      startTime,
+      startTouch,
+      moveTouch,
+      endTouch
+    } = useTouch();
+    var targets = {
+      start: null,
+      prev: null
+    };
+    var closeRunner = null;
+    var longPressRunner = null;
+    var isLongPress = false;
     var initialIndex = computed(() => {
       // For compatibility with current, temporarily keep this computed method
       // Current will be replaced by initialIndex in the future
@@ -133,20 +156,8 @@ var __sfc__ = defineComponent({
         return toNumber(initialIndex);
       }
       var index = images.findIndex(image => image === current);
-      return index >= 0 ? index : 0;
+      return Math.max(index, 0);
     });
-    var scale = ref(1);
-    var translateX = ref(0);
-    var translateY = ref(0);
-    var transitionTimingFunction = ref(undefined);
-    var transitionDuration = ref(undefined);
-    var canSwipe = ref(true);
-    var swipeRef = ref(null);
-    var startTouch = null;
-    var prevTouch = null;
-    var closeRunner = null;
-    var longPressRunner = null;
-    var isLongPress = false;
     var isPreventDefault = computed(() => {
       var {
         imagePreventDefault,
@@ -154,27 +165,10 @@ var __sfc__ = defineComponent({
       } = props;
       return show && imagePreventDefault;
     });
-    var getDistance = (touch, target) => {
-      var {
-        clientX: touchX,
-        clientY: touchY
-      } = touch;
-      var {
-        clientX: targetX,
-        clientY: targetY
-      } = target;
-      return Math.abs(Math.sqrt(Math.pow(targetX - touchX, 2) + Math.pow(targetY - touchY, 2)));
-    };
-    var createVarTouch = (touch, target) => ({
-      clientX: touch.clientX,
-      clientY: touch.clientY,
-      timestamp: performance.now(),
-      target
-    });
     var zoomIn = () => {
       scale.value = toNumber(props.zoom);
       canSwipe.value = false;
-      prevTouch = null;
+      targets.prev = null;
       window.setTimeout(() => {
         transitionTimingFunction.value = 'linear';
         transitionDuration.value = '0s';
@@ -185,28 +179,30 @@ var __sfc__ = defineComponent({
       translateX.value = 0;
       translateY.value = 0;
       canSwipe.value = true;
-      prevTouch = null;
+      targets.prev = null;
       transitionTimingFunction.value = undefined;
       transitionDuration.value = undefined;
     };
-    var isDoubleTouch = currentTouch => {
-      if (!prevTouch) {
+    var isDoubleTouch = target => {
+      if (!targets.prev) {
         return false;
       }
-      return getDistance(prevTouch, currentTouch) <= DISTANCE_OFFSET && currentTouch.timestamp - prevTouch.timestamp <= EVENT_DELAY && prevTouch.target === currentTouch.target;
+      return distance.value <= DISTANCE_OFFSET && performance.now() - startTime.value <= EVENT_DELAY && targets.prev === target;
     };
     var isTapTouch = target => {
-      if (!target || !startTouch || !prevTouch) {
+      if (!target || !targets.start || !targets.prev) {
         return false;
       }
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && performance.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
+      return distance.value <= DISTANCE_OFFSET && performance.now() - startTime.value < TAP_DELAY && (target === targets.start || target.parentNode === targets.start);
     };
     var handleTouchcancel = () => {
+      endTouch();
       window.clearTimeout(longPressRunner);
       isLongPress = false;
-      startTouch = null;
+      targets.start = null;
     };
     var handleTouchend = event => {
+      endTouch();
       window.clearTimeout(longPressRunner);
 
       // avoid triggering tap event sometimes
@@ -217,26 +213,24 @@ var __sfc__ = defineComponent({
       var isTap = isTapTouch(event.target);
       closeRunner = window.setTimeout(() => {
         isTap && close();
-        startTouch = null;
+        targets.start = null;
       }, EVENT_DELAY);
     };
     var handleTouchstart = (event, idx) => {
       window.clearTimeout(closeRunner);
       window.clearTimeout(longPressRunner);
-      var currentTouch = createVarTouch(event.touches[0], event.currentTarget);
-      startTouch = currentTouch;
+      var target = event.currentTarget;
+      targets.start = target;
       longPressRunner = window.setTimeout(() => {
-        var {
-          onLongPress
-        } = props;
         isLongPress = true;
-        call(onLongPress, idx);
+        call(props.onLongPress, idx);
       }, LONG_PRESS_DELAY);
-      if (isDoubleTouch(currentTouch)) {
+      if (isDoubleTouch(target)) {
         scale.value > 1 ? zoomOut() : zoomIn();
         return;
       }
-      prevTouch = currentTouch;
+      startTouch(event);
+      targets.prev = target;
     };
     var getZoom = target => {
       var {
@@ -283,33 +277,22 @@ var __sfc__ = defineComponent({
       var displayHeight = imageRadio > rootRadio ? height : width * imageRadio;
       return Math.max(0, (zoom * displayHeight - height) / 2) / zoom;
     };
-    var getMoveTranslate = (current, move, limit) => {
-      if (current + move >= limit) {
-        return limit;
-      }
-      if (current + move <= -limit) {
-        return -limit;
-      }
-      return current + move;
-    };
     var handleTouchmove = event => {
-      if (!prevTouch) {
+      if (!targets.prev) {
         return;
       }
+      moveTouch(event);
       var target = event.currentTarget;
-      var currentTouch = createVarTouch(event.touches[0], target);
-      if (getDistance(currentTouch, prevTouch) > DISTANCE_OFFSET) {
+      if (distance.value > DISTANCE_OFFSET) {
         window.clearTimeout(longPressRunner);
       }
       if (scale.value > 1) {
-        var moveX = currentTouch.clientX - prevTouch.clientX;
-        var moveY = currentTouch.clientY - prevTouch.clientY;
         var limitX = getLimitX(target);
         var limitY = getLimitY(target);
-        translateX.value = getMoveTranslate(translateX.value, moveX, limitX);
-        translateY.value = getMoveTranslate(translateY.value, moveY, limitY);
+        translateX.value = clamp(translateX.value + moveX.value, -limitX, limitX);
+        translateY.value = clamp(translateY.value + moveY.value, -limitY, limitY);
       }
-      prevTouch = currentTouch;
+      targets.prev = target;
     };
     var close = () => {
       if (scale.value > 1) {

package/es/image-preview/props.mjs

@@ -3,22 +3,14 @@ import { defineListenerProp, pickProps } from '../utils/components.mjs';
 import { props as swipeProps } from '../swipe/props.mjs';
 import { props as popupProps } from '../popup/props.mjs';
 export var props = _extends({
-  show: {
-    type: Boolean,
-    default: false
-  },
-  imagePreventDefault: {
-    type: Boolean,
-    default: false
-  },
+  show: Boolean,
+  imagePreventDefault: Boolean,
   images: {
     type: Array,
     default: () => []
   },
   /** @deprecated Use initialIndex to instead. */
-  current: {
-    type: String
-  },
+  current: String,
   initialIndex: {
     type: [String, Number],
     default: 0
@@ -27,10 +19,7 @@ export var props = _extends({
     type: [String, Number],
     default: 2
   },
-  closeable: {
-    type: Boolean,
-    default: false
-  },
+  closeable: Boolean,
   'onUpdate:show': defineListenerProp(),
   onLongPress: defineListenerProp()
 }, pickProps(swipeProps, ['loop', 'indicator', 'onChange']), pickProps(popupProps, ['lockScroll', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed',

package/es/index-anchor/props.mjs

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

package/es/index-bar/props.mjs

@@ -9,25 +9,14 @@ export var props = {
     default: 0
   },
   /** @deprecated Use stickyCssMode to instead. */
-  cssMode: {
-    type: Boolean,
-    default: false
-  },
-  stickyCssMode: {
-    type: Boolean,
-    default: false
-  },
-  hideList: {
-    type: Boolean,
-    default: false
-  },
+  cssMode: Boolean,
+  stickyCssMode: Boolean,
+  hideList: Boolean,
   zIndex: {
     type: [Number, String],
     default: 1
   },
-  highlightColor: {
-    type: String
-  },
+  highlightColor: String,
   duration: {
     type: [Number, String],
     default: 0

package/es/index.bundle.mjs

@@ -247,7 +247,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '2.14.2'
+const version = '2.15.0-alpha.1692990022445'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -164,7 +164,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '2.14.2'
+const version = '2.15.0-alpha.1692990022445'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)