@varlet/ui 2.14.1 → 2.14.3-alpha.1692871861882

package/lib/varlet.cjs.js

@@ -616,6 +616,94 @@ function useInitialized(source, value) {
   }, { immediate: true });
   return initialized;
 }
+function getDirection(x, y) {
+  if (x > y) {
+    return "horizontal";
+  }
+  if (y > x) {
+    return "vertical";
+  }
+}
+function useTouch() {
+  const startX = vue.ref(0);
+  const startY = vue.ref(0);
+  const deltaX = vue.ref(0);
+  const deltaY = vue.ref(0);
+  const offsetX = vue.ref(0);
+  const offsetY = vue.ref(0);
+  const prevX = vue.ref(0);
+  const prevY = vue.ref(0);
+  const moveX = vue.ref(0);
+  const moveY = vue.ref(0);
+  const direction = vue.ref();
+  const touching = vue.ref(false);
+  const startTime = vue.ref(0);
+  const distance = vue.ref(0);
+  const resetTouch = () => {
+    startX.value = 0;
+    startY.value = 0;
+    deltaX.value = 0;
+    deltaY.value = 0;
+    offsetX.value = 0;
+    offsetY.value = 0;
+    prevX.value = 0;
+    prevY.value = 0;
+    moveX.value = 0;
+    moveY.value = 0;
+    direction.value = void 0;
+    touching.value = false;
+    startTime.value = 0;
+    distance.value = 0;
+  };
+  const startTouch = (event) => {
+    resetTouch();
+    const { clientX: x, clientY: y } = event.touches[0];
+    startX.value = x;
+    startY.value = y;
+    prevX.value = x;
+    prevY.value = y;
+    touching.value = true;
+    startTime.value = performance.now();
+  };
+  const moveTouch = (event) => {
+    const { clientX: x, clientY: y } = event.touches[0];
+    deltaX.value = x - startX.value;
+    deltaY.value = y - startY.value;
+    offsetX.value = Math.abs(deltaX.value);
+    offsetY.value = Math.abs(deltaY.value);
+    distance.value = Math.sqrt(offsetX.value ** 2 + offsetY.value ** 2);
+    moveX.value = x - prevX.value;
+    moveY.value = y - prevY.value;
+    if (!direction.value) {
+      direction.value = getDirection(offsetX.value, offsetY.value);
+    }
+    prevX.value = x;
+    prevY.value = y;
+  };
+  const endTouch = () => {
+    touching.value = false;
+  };
+  return {
+    startX,
+    startY,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    prevX,
+    prevY,
+    moveX,
+    moveY,
+    direction,
+    touching,
+    startTime,
+    distance,
+    resetTouch,
+    startTouch,
+    moveTouch,
+    endTouch
+  };
+}
 function asyncGeneratorStep$f(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -4738,6 +4826,10 @@ var props$V = {
     type: Boolean,
     default: false
   },
+  indeterminate: {
+    type: Boolean,
+    default: false
+  },
   iconSize: {
     type: [String, Number]
   },
@@ -4754,7 +4846,8 @@ var props$V = {
   },
   onClick: defineListenerProp(),
   onChange: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
+  "onUpdate:modelValue": defineListenerProp(),
+  "onUpdate:indeterminate": defineListenerProp()
 };
 var CHECKBOX_GROUP_BIND_CHECKBOX_KEY = Symbol("CHECKBOX_GROUP_BIND_CHECKBOX_KEY");
 function useCheckboxes() {
@@ -4852,26 +4945,33 @@ function __render__$10(_ctx, _cache) {
       [vue.withDirectives((vue.openBlock(), vue.createElementBlock(
         "div",
         {
-          class: vue.normalizeClass(_ctx.classes(_ctx.n("action"), [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("action"), [_ctx.checked || _ctx.isIndeterminate, _ctx.n("--checked"), _ctx.n("--unchecked")], [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
           style: vue.normalizeStyle({
-            color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
+            color: _ctx.checked || _ctx.isIndeterminate ? _ctx.checkedColor : _ctx.uncheckedColor
           })
         },
-        [_ctx.checked ? vue.renderSlot(_ctx.$slots, "checked-icon", {
+        [_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "indeterminate-icon", {
           key: 0
         }, () => [vue.createVNode(_component_var_icon, {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
-          name: "checkbox-marked",
+          name: "minus-box",
           size: _ctx.iconSize,
           "var-checkbox-cover": ""
-        }, null, 8, ["class", "size"])]) : vue.renderSlot(_ctx.$slots, "unchecked-icon", {
+        }, null, 8, ["class", "size"])]) : vue.createCommentVNode("v-if", true), _ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "checked-icon", {
           key: 1
+        }, () => [vue.createVNode(_component_var_icon, {
+          class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+          name: "checkbox-marked",
+          size: _ctx.iconSize,
+          "var-checkbox-cover": ""
+        }, null, 8, ["class", "size"])]) : vue.createCommentVNode("v-if", true), !_ctx.checked && !_ctx.isIndeterminate ? vue.renderSlot(_ctx.$slots, "unchecked-icon", {
+          key: 2
         }, () => [vue.createVNode(_component_var_icon, {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
           name: "checkbox-blank-outline",
           size: _ctx.iconSize,
           "var-checkbox-cover": ""
-        }, null, 8, ["class", "size"])]), vue.createVNode(_component_var_hover_overlay, {
+        }, null, 8, ["class", "size"])]) : vue.createCommentVNode("v-if", true), vue.createVNode(_component_var_hover_overlay, {
           hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering
         }, null, 8, ["hovering"])],
         6
@@ -4909,7 +5009,7 @@ var __sfc__$11 = vue.defineComponent({
   },
   props: props$V,
   setup(props2) {
-    var value = vue.ref(false);
+    var value = useVModel(props2, "modelValue");
     var checked = vue.computed(() => value.value === props2.checkedValue);
     var checkedValue = vue.computed(() => props2.checkedValue);
     var withAnimation = vue.ref(false);
@@ -4932,6 +5032,7 @@ var __sfc__$11 = vue.defineComponent({
       // expose
       resetValidation
     } = useValidation();
+    var isIndeterminate = useVModel(props2, "indeterminate");
     var validateWithTrigger = (trigger) => {
       vue.nextTick(() => {
         var {
@@ -4943,12 +5044,12 @@ var __sfc__$11 = vue.defineComponent({
       });
     };
     var change = (changedValue) => {
-      value.value = changedValue;
       var {
         checkedValue: checkedValue2,
         onChange
       } = props2;
-      call(props2["onUpdate:modelValue"], value.value);
+      value.value = changedValue;
+      isIndeterminate.value = false;
       call(onChange, value.value);
       validateWithTrigger("onChange");
       changedValue === checkedValue2 ? checkboxGroup2 == null ? void 0 : checkboxGroup2.onChecked(checkedValue2) : checkboxGroup2 == null ? void 0 : checkboxGroup2.onUnchecked(checkedValue2);
@@ -4986,7 +5087,7 @@ var __sfc__$11 = vue.defineComponent({
       withAnimation.value = false;
     };
     var reset = () => {
-      call(props2["onUpdate:modelValue"], props2.uncheckedValue);
+      value.value = props2.uncheckedValue;
       resetValidation();
     };
     var toggle = (changedValue) => {
@@ -5001,11 +5102,6 @@ var __sfc__$11 = vue.defineComponent({
       change(changedValue);
     };
     var validate = () => v(props2.rules, props2.modelValue);
-    vue.watch(() => props2.modelValue, (newValue) => {
-      value.value = newValue;
-    }, {
-      immediate: true
-    });
     var checkboxProvider = {
       checkedValue,
       checked,
@@ -5018,6 +5114,7 @@ var __sfc__$11 = vue.defineComponent({
     call(bindCheckboxGroup, checkboxProvider);
     call(bindForm, checkboxProvider);
     return {
+      isIndeterminate,
       withAnimation,
       checked,
       errorMessage,
@@ -10529,7 +10626,7 @@ var __sfc__$R = vue.defineComponent({
       startX = clientX;
       startY = clientY;
     };
-    var getDirection = (x, y) => x >= y && x > 20 ? "x" : "y";
+    var getDirection2 = (x, y) => x >= y && x > 20 ? "x" : "y";
     var handleTouchmove = (event) => {
       if (isUntouchable.value)
         return;
@@ -10539,7 +10636,7 @@ var __sfc__$R = vue.defineComponent({
       } = event.touches[0];
       var x = clientX - startX;
       var y = clientY - startY;
-      touchDirection = getDirection(Math.abs(x), Math.abs(y));
+      touchDirection = getDirection2(Math.abs(x), Math.abs(y));
       checkType = x > 0 ? "prev" : "next";
     };
     var handleTouchend = () => {
@@ -11285,7 +11382,8 @@ var props$K = {
   teleport: {
     type: [String, Object, Boolean],
     default: "body"
-  }
+  },
+  onClick: defineListenerProp()
 };
 function _extends$b() {
   _extends$b = Object.assign ? Object.assign.bind() : function(target) {
@@ -11357,6 +11455,9 @@ function __render__$N(_ctx, _cache) {
       }),
       onTouchcancel: _cache[3] || (_cache[3] = function() {
         return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+      }),
+      onClick: _cache[4] || (_cache[4] = function() {
+        return _ctx.handleClick && _ctx.handleClick(...arguments);
       })
     }, _ctx.getAttrs()),
     [vue.renderSlot(_ctx.$slots, "default")],
@@ -11384,50 +11485,45 @@ var __sfc__$O = vue.defineComponent({
     var dragged = vue.ref(false);
     var enableTransition = vue.ref(false);
     var dragging = vue.ref(false);
+    var {
+      touching,
+      moveX,
+      moveY,
+      startTouch,
+      moveTouch,
+      endTouch,
+      resetTouch
+    } = useTouch();
     var {
       disabled: teleportDisabled
     } = useTeleport();
-    var touching = false;
-    var prevX = 0;
-    var prevY = 0;
     var draggingRunner = null;
     var handleTouchstart = (event) => {
       if (props2.disabled) {
         return;
       }
-      draggingRunner && window.clearTimeout(draggingRunner);
-      var {
-        clientX,
-        clientY
-      } = event.touches[0];
+      if (draggingRunner) {
+        window.clearTimeout(draggingRunner);
+      }
       saveXY();
-      prevX = clientX;
-      prevY = clientY;
-      touching = true;
+      startTouch(event);
       dragging.value = false;
     };
     var handleTouchmove = /* @__PURE__ */ function() {
       var _ref2 = _asyncToGenerator$b(function* (event) {
-        if (!touching || props2.disabled) {
+        if (!touching.value || props2.disabled) {
           return;
         }
         event.preventDefault();
         enableTransition.value = false;
         dragged.value = true;
         dragging.value = true;
-        var {
-          clientX,
-          clientY
-        } = event.touches[0];
-        var deltaX = clientX - prevX;
-        var deltaY = clientY - prevY;
-        prevX = clientX;
-        prevY = clientY;
+        moveTouch(event);
         if (props2.direction.includes("x")) {
-          x.value += deltaX;
+          x.value += moveX.value;
         }
         if (props2.direction.includes("y")) {
-          y.value += deltaY;
+          y.value += moveY.value;
         }
         clampToBoundary();
       });
@@ -11439,13 +11535,19 @@ var __sfc__$O = vue.defineComponent({
       if (props2.disabled) {
         return;
       }
-      touching = false;
+      endTouch();
       enableTransition.value = true;
       attract();
       draggingRunner = window.setTimeout(() => {
         dragging.value = false;
       });
     };
+    var handleClick = (event) => {
+      if (dragging.value) {
+        return;
+      }
+      call(props2.onClick, event);
+    };
     var saveXY = () => {
       var {
         left: left2,
@@ -11576,9 +11678,7 @@ var __sfc__$O = vue.defineComponent({
       dragging.value = false;
       x.value = 0;
       y.value = 0;
-      touching = false;
-      prevX = 0;
-      prevY = 0;
+      resetTouch();
     };
     vue.watch(() => props2.boundary, toPxBoundary);
     onWindowResize(resize);
@@ -11599,6 +11699,7 @@ var __sfc__$O = vue.defineComponent({
       handleTouchstart,
       handleTouchmove,
       handleTouchend,
+      handleClick,
       resize,
       reset
     };
@@ -13677,7 +13778,6 @@ const Fab = vue.defineComponent({
     var host = vue.ref(null);
     var dragRef = vue.ref(null);
     var handleClick = (e, value, childrenLength) => {
-      var _dragRef$value;
       e.stopPropagation();
       if (props2.trigger !== "click" || props2.disabled) {
         return;
@@ -13686,9 +13786,6 @@ const Fab = vue.defineComponent({
         call(props2.onClick, isActive.value, e);
         return;
       }
-      if ((_dragRef$value = dragRef.value) != null && _dragRef$value.dragging) {
-        return;
-      }
       isActive.value = value;
       call(props2.onClick, isActive.value, e);
       call(isActive.value ? props2.onOpen : props2.onClose);
@@ -13741,8 +13838,8 @@ const Fab = vue.defineComponent({
       isActive.value = false;
     });
     vue.watch(() => [props2.position, props2.fixed, props2.top, props2.bottom, props2.left, props2.right], () => {
-      var _dragRef$value2;
-      (_dragRef$value2 = dragRef.value) == null ? void 0 : _dragRef$value2.reset();
+      var _dragRef$value;
+      (_dragRef$value = dragRef.value) == null ? void 0 : _dragRef$value.reset();
     });
     useClickOutside(host, "click", handleClickOutside);
     return () => {
@@ -13764,12 +13861,12 @@ const Fab = vue.defineComponent({
         "disabled": props2.disabled || !props2.drag || !props2.fixed,
         "direction": dragProps.direction,
         "attraction": dragProps.attraction,
-        "boundary": dragProps.boundary
+        "boundary": dragProps.boundary,
+        "onClick": (e) => handleClick(e, !isActive.value, children.length)
       }, attrs), {
         default: () => [vue.createVNode("div", {
           "class": classes$C(n$K(), n$K("--direction-" + props2.direction), [props2.safeArea, n$K("--safe-area")]),
           "ref": host,
-          "onClick": (e) => handleClick(e, !isActive.value, children.length),
           "onMouseleave": () => handleMouse(false, children.length),
           "onMouseenter": () => handleMouse(true, children.length)
         }, [vue.createVNode(vue.Transition, {
@@ -14173,7 +14270,7 @@ function _asyncToGenerator$8(fn2) {
   };
 }
 var SWIPE_DELAY = 250;
-var SWIPE_DISTANCE = 20;
+var SWIPE_OFFSET = 20;
 var {
   n: n$H,
   classes: classes$A
@@ -14193,7 +14290,7 @@ function __render__$I(_ctx, _cache) {
         style: vue.normalizeStyle({
           width: !_ctx.vertical ? _ctx.trackSize + "px" : void 0,
           height: _ctx.vertical ? _ctx.trackSize + "px" : void 0,
-          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() {
@@ -14249,7 +14346,7 @@ var __sfc__$J = vue.defineComponent({
     var size = vue.ref(0);
     var vertical = vue.computed(() => props2.vertical);
     var trackSize = vue.ref(0);
-    var translate = vue.ref(0);
+    var trackTranslate = vue.ref(0);
     var lockDuration = vue.ref(false);
     var index = vue.ref(0);
     var {
@@ -14261,37 +14358,45 @@ var __sfc__$J = vue.defineComponent({
       popup: popup2,
       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: index2
       } = _ref;
       return index2.value === idx;
     });
-    var dispatchBorrower = () => {
+    var dispatchSwipeItems = () => {
       if (!props2.loop) {
         return;
       }
-      if (translate.value >= 0) {
+      if (trackTranslate.value >= 0) {
         findSwipeItem(length.value - 1).setTranslate(-trackSize.value);
       }
-      if (translate.value <= -(trackSize.value - size.value)) {
+      if (trackTranslate.value <= -(trackSize.value - size.value)) {
         findSwipeItem(0).setTranslate(trackSize.value);
       }
-      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
       } = props2;
@@ -14328,14 +14433,14 @@ var __sfc__$J = vue.defineComponent({
       return clamp$1(index2, 0, length.value - 1);
     };
     var fixPosition = (fn2) => {
-      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);
       }
@@ -14367,26 +14472,15 @@ var __sfc__$J = vue.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 || !props2.touchable) {
         return;
       }
-      var {
-        clientX,
-        clientY
-      } = event.touches[0];
-      startX = clientX;
-      startY = clientY;
-      startTime = performance.now();
-      touching = true;
+      startTouch(event);
       stopAutoplay();
       fixPosition(() => {
         lockDuration.value = true;
@@ -14397,48 +14491,38 @@ var __sfc__$J = vue.defineComponent({
         touchable,
         vertical: vertical2
       } = props2;
-      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 = vertical2 ? "vertical" : "horizontal";
-      if (direction === expectDirection) {
-        event.preventDefault();
-        var moveX = prevX !== void 0 ? clientX - prevX : 0;
-        var moveY = prevY !== void 0 ? clientY - prevY : 0;
-        prevX = clientX;
-        prevY = clientY;
-        translate.value += vertical2 ? moveY : moveX;
-        dispatchBorrower();
+      if (direction.value !== expectDirection) {
+        return;
       }
+      event.preventDefault();
+      setTrackTranslate(trackTranslate.value + (vertical2 ? moveY.value : moveX.value));
     };
     var handleTouchend = () => {
-      if (!touching) {
+      if (!touching.value) {
         return;
       }
       var {
         vertical: vertical2,
         onChange
       } = props2;
-      var positive = vertical2 ? prevY < startY : prevX < startX;
-      var distance = vertical2 ? Math.abs(startY - prevY) : Math.abs(startX - prevX);
-      var quickSwiping = performance.now() - startTime <= SWIPE_DELAY && distance >= SWIPE_DISTANCE;
+      endTouch();
+      var positive = vertical2 ? deltaY.value < 0 : deltaX.value < 0;
+      var offset2 = vertical2 ? offsetY.value : offsetX.value;
+      var quickSwiping = performance.now() - startTime.value <= SWIPE_DELAY && offset2 >= SWIPE_OFFSET;
       var swipeIndex = quickSwiping ? positive ? getSwipeIndex(index.value + 1) : getSwipeIndex(index.value - 1) : getSwipeIndex();
-      touching = false;
       lockDuration.value = false;
-      prevX = void 0;
-      prevY = void 0;
-      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);
+      }
     };
     var resize = () => {
       if (!swipeEl.value) {
@@ -14447,7 +14531,7 @@ var __sfc__$J = vue.defineComponent({
       lockDuration.value = true;
       size.value = props2.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((swipeItem2) => {
         swipeItem2.setTranslate(0);
       });
@@ -14473,11 +14557,11 @@ var __sfc__$J = vue.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;
         }
       });
     };
@@ -14498,11 +14582,11 @@ var __sfc__$J = vue.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;
         }
       });
     };
@@ -14558,7 +14642,7 @@ var __sfc__$J = vue.defineComponent({
       index,
       swipeEl,
       trackSize,
-      translate,
+      trackTranslate,
       lockDuration,
       handleTouchstart,
       handleTouchmove,
@@ -14828,6 +14912,29 @@ var __sfc__$H = vue.defineComponent({
   props: props$D,
   setup(props2) {
     var popupShow = vue.ref(false);
+    var scale = vue.ref(1);
+    var translateX = vue.ref(0);
+    var translateY = vue.ref(0);
+    var transitionTimingFunction = vue.ref(void 0);
+    var transitionDuration = vue.ref(void 0);
+    var canSwipe = vue.ref(true);
+    var swipeRef = vue.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 = vue.computed(() => {
       var {
         images,
@@ -14838,20 +14945,8 @@ var __sfc__$H = vue.defineComponent({
         return toNumber(initialIndex2);
       }
       var index = images.findIndex((image2) => image2 === current);
-      return index >= 0 ? index : 0;
+      return Math.max(index, 0);
     });
-    var scale = vue.ref(1);
-    var translateX = vue.ref(0);
-    var translateY = vue.ref(0);
-    var transitionTimingFunction = vue.ref(void 0);
-    var transitionDuration = vue.ref(void 0);
-    var canSwipe = vue.ref(true);
-    var swipeRef = vue.ref(null);
-    var startTouch = null;
-    var prevTouch = null;
-    var closeRunner = null;
-    var longPressRunner = null;
-    var isLongPress = false;
     var isPreventDefault = vue.computed(() => {
       var {
         imagePreventDefault,
@@ -14859,27 +14954,10 @@ var __sfc__$H = vue.defineComponent({
       } = props2;
       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 = (touches, target) => ({
-      clientX: touches.clientX,
-      clientY: touches.clientY,
-      timestamp: performance.now(),
-      target
-    });
     var zoomIn = () => {
       scale.value = toNumber(props2.zoom);
       canSwipe.value = false;
-      prevTouch = null;
+      targets.prev = null;
       window.setTimeout(() => {
         transitionTimingFunction.value = "linear";
         transitionDuration.value = "0s";
@@ -14890,28 +14968,30 @@ var __sfc__$H = vue.defineComponent({
       translateX.value = 0;
       translateY.value = 0;
       canSwipe.value = true;
-      prevTouch = null;
+      targets.prev = null;
       transitionTimingFunction.value = void 0;
       transitionDuration.value = void 0;
     };
-    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);
       if (isLongPress) {
         isLongPress = false;
@@ -14920,26 +15000,24 @@ var __sfc__$H = vue.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
-        } = props2;
         isLongPress = true;
-        call(onLongPress, idx);
+        call(props2.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 {
@@ -14986,33 +15064,22 @@ var __sfc__$H = vue.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$1(translateX.value + moveX.value, -limitX, limitX);
+        translateY.value = clamp$1(translateY.value + moveY.value, -limitY, limitY);
       }
-      prevTouch = currentTouch;
+      targets.prev = target;
     };
     var close = () => {
       if (scale.value > 1) {
@@ -17266,7 +17333,9 @@ var {
 } = createNamespace("option");
 function __render__$x(_ctx, _cache) {
   var _component_var_checkbox = vue.resolveComponent("var-checkbox");
+  var _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   var _directive_ripple = vue.resolveDirective("ripple");
+  var _directive_hover = vue.resolveDirective("hover");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -17310,18 +17379,22 @@ function __render__$x(_ctx, _cache) {
       )])],
       2
       /* CLASS */
-    )],
+    ), vue.createVNode(_component_var_hover_overlay, {
+      hovering: _ctx.hovering
+    }, null, 8, ["hovering"])],
     6
     /* CLASS, STYLE */
-  )), [[_directive_ripple]]);
+  )), [[_directive_ripple], [_directive_hover, _ctx.handleHovering, "desktop"]]);
 }
 var __sfc__$y = vue.defineComponent({
   name: "VarOption",
   directives: {
-    Ripple: Ripple$1
+    Ripple: Ripple$1,
+    Hover: Hover$1
   },
   components: {
-    VarCheckbox: Checkbox
+    VarCheckbox: Checkbox,
+    VarHoverOverlay: HoverOverlay
   },
   props: props$s,
   setup(props2) {
@@ -17339,6 +17412,10 @@ var __sfc__$y = vue.defineComponent({
       onSelect,
       computeLabel
     } = select2;
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var handleClick = () => {
       if (multiple.value) {
         optionSelected.value = !optionSelected.value;
@@ -17363,6 +17440,8 @@ var __sfc__$y = vue.defineComponent({
       optionSelected,
       multiple,
       focusColor,
+      hovering,
+      handleHovering,
       handleClick,
       handleSelect
     };
@@ -19209,7 +19288,7 @@ var __sfc__$s = vue.defineComponent({
   inheritAttrs: false,
   props: props$l,
   setup(props2) {
-    var value = vue.ref(false);
+    var value = useVModel(props2, "modelValue");
     var checked = vue.computed(() => value.value === props2.checkedValue);
     var withAnimation = vue.ref(false);
     var {
@@ -19250,7 +19329,6 @@ var __sfc__$s = vue.defineComponent({
         return;
       }
       value.value = changedValue;
-      call(props2["onUpdate:modelValue"], value.value);
       call(onChange, value.value);
       radioGroup2 == null ? void 0 : radioGroup2.onToggle(checkedValue);
       validateWithTrigger("onChange");
@@ -19281,7 +19359,7 @@ var __sfc__$s = vue.defineComponent({
       value.value = v2 === checkedValue ? checkedValue : uncheckedValue;
     };
     var reset = () => {
-      call(props2["onUpdate:modelValue"], props2.uncheckedValue);
+      value.value = props2.uncheckedValue;
       resetValidation();
     };
     var validate = () => v(props2.rules, props2.modelValue);
@@ -19296,11 +19374,6 @@ var __sfc__$s = vue.defineComponent({
       }
       change(changedValue);
     };
-    vue.watch(() => props2.modelValue, (newValue) => {
-      value.value = newValue;
-    }, {
-      immediate: true
-    });
     var radioProvider = {
       sync,
       validate,
@@ -25453,7 +25526,7 @@ const uploader = "";
 const UploaderSfc = "";
 const watermark = "";
 const WatermarkSfc = "";
-const version = "2.14.1";
+const version = "2.14.3-alpha.1692871861882";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);