@varlet/ui 2.9.0 → 2.9.1-alpha.1678875429822

package/lib/varlet.cjs.js

@@ -584,8 +584,8 @@ function _asyncToGenerator$d(fn2) {
     });
   };
 }
-function _extends$m() {
-  _extends$m = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$n() {
+  _extends$n = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -596,7 +596,7 @@ function _extends$m() {
     }
     return target;
   };
-  return _extends$m.apply(this, arguments);
+  return _extends$n.apply(this, arguments);
 }
 function pickProps(props2, propsKey) {
   return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
@@ -625,7 +625,7 @@ function mountInstance(component, props2, eventListener) {
   }
   var Host = {
     setup() {
-      return () => vue.h(component, _extends$m({}, props2, eventListener));
+      return () => vue.h(component, _extends$n({}, props2, eventListener));
     }
   };
   var {
@@ -752,8 +752,8 @@ function defineListenerProp(fallback) {
     default: fallback
   };
 }
-function _extends$l() {
-  _extends$l = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$m() {
+  _extends$m = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -764,10 +764,10 @@ function _extends$l() {
     }
     return target;
   };
-  return _extends$l.apply(this, arguments);
+  return _extends$m.apply(this, arguments);
 }
 var {
-  n: n$1g
+  n: n$1h
 } = createNamespace("ripple");
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -822,7 +822,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple2 = document.createElement("div");
-    ripple2.classList.add(n$1g());
+    ripple2.classList.add(n$1h());
     ripple2.style.opacity = "0";
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
@@ -841,7 +841,7 @@ function createRipple(event) {
 function removeRipple() {
   var _ripple = this._ripple;
   var task = () => {
-    var ripples = this.querySelectorAll("." + n$1g());
+    var ripples = this.querySelectorAll("." + n$1h());
     if (!ripples.length) {
       return;
     }
@@ -870,7 +870,7 @@ function forbidRippleTask() {
 }
 function mounted$2(el, binding) {
   var _binding$value, _binding$value$touchm, _binding$value2;
-  el._ripple = _extends$l({
+  el._ripple = _extends$m({
     tasker: null
   }, (_binding$value = binding.value) != null ? _binding$value : {}, {
     touchmoveForbid: (_binding$value$touchm = (_binding$value2 = binding.value) == null ? void 0 : _binding$value2.touchmoveForbid) != null ? _binding$value$touchm : Context.touchmoveForbid,
@@ -909,7 +909,7 @@ function updated$2(el, binding) {
   var diff2 = newBinding.touchmoveForbid !== ((_el$_ripple = el._ripple) == null ? void 0 : _el$_ripple.touchmoveForbid) || newBinding.color !== ((_el$_ripple2 = el._ripple) == null ? void 0 : _el$_ripple2.color) || newBinding.disabled !== ((_el$_ripple3 = el._ripple) == null ? void 0 : _el$_ripple3.disabled);
   if (diff2) {
     var _el$_ripple4, _el$_ripple5;
-    el._ripple = _extends$l({
+    el._ripple = _extends$m({
       tasker: newBinding.disabled ? null : (_el$_ripple4 = el._ripple) == null ? void 0 : _el$_ripple4.tasker,
       removeRipple: (_el$_ripple5 = el._ripple) == null ? void 0 : _el$_ripple5.removeRipple
     }, newBinding);
@@ -928,7 +928,7 @@ const Ripple$1 = Ripple;
 function positionValidator$4(position) {
   return ["top", "bottom", "right", "left", "center"].includes(position);
 }
-var props$18 = {
+var props$19 = {
   show: {
     type: Boolean,
     default: false
@@ -1057,8 +1057,8 @@ function useZIndex(source, count) {
     zIndex
   };
 }
-function _extends$k() {
-  _extends$k = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$l() {
+  _extends$l = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1069,19 +1069,19 @@ function _extends$k() {
     }
     return target;
   };
-  return _extends$k.apply(this, arguments);
+  return _extends$l.apply(this, arguments);
 }
 function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  n: n$1f,
-  classes: classes$12
+  n: n$1g,
+  classes: classes$13
 } = createNamespace("popup");
 const Popup = vue.defineComponent({
   name: "VarPopup",
   inheritAttrs: false,
-  props: props$18,
+  props: props$19,
   setup(props2, _ref) {
     var {
       slots,
@@ -1115,8 +1115,8 @@ const Popup = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$12(n$1f("overlay"), overlayClass),
-        "style": _extends$k({
+        "class": classes$13(n$1g("overlay"), overlayClass),
+        "style": _extends$l({
           zIndex: zIndex.value - 1
         }, overlayStyle),
         "onClick": hidePopup
@@ -1124,7 +1124,7 @@ const Popup = vue.defineComponent({
     };
     var renderContent = () => {
       return vue.createVNode("div", vue.mergeProps({
-        "class": classes$12(n$1f("content"), n$1f("--" + props2.position), [props2.defaultStyle, n$1f("--content-background-color")], [props2.defaultStyle, n$1f("$-elevation--3")]),
+        "class": classes$13(n$1g("content"), n$1g("--" + props2.position), [props2.defaultStyle, n$1g("--content-background-color")], [props2.defaultStyle, n$1g("$-elevation--3")]),
         "style": {
           zIndex: zIndex.value
         }
@@ -1140,17 +1140,17 @@ const Popup = vue.defineComponent({
         position
       } = props2;
       return vue.createVNode(vue.Transition, {
-        "name": n$1f("$-fade"),
+        "name": n$1g("$-fade"),
         "onAfterEnter": onOpened,
         "onAfterLeave": onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$12(n$1f("$--box"), n$1f()),
+          "class": classes$13(n$1g("$--box"), n$1g()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [overlay2 && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": transition || n$1f("$-pop-" + position)
+          "name": transition || n$1g("$-pop-" + position)
         }, {
           default: () => [show && renderContent()]
         })]), [[vue.vShow, show]])]
@@ -1177,7 +1177,7 @@ Popup.install = function(app) {
   app.component(Popup.name, Popup);
 };
 var _PopupComponent = Popup;
-var props$17 = {
+var props$18 = {
   name: {
     type: String
   },
@@ -1230,10 +1230,10 @@ function _asyncToGenerator$c(fn2) {
   };
 }
 var {
-  n: n$1e,
-  classes: classes$11
+  n: n$1f,
+  classes: classes$12
 } = createNamespace("icon");
-function __render__$1e(_ctx, _cache) {
+function __render__$1f(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"),
     {
@@ -1253,9 +1253,9 @@ function __render__$1e(_ctx, _cache) {
     ["class", "style", "src", "onClick"]
   );
 }
-var __sfc__$1f = vue.defineComponent({
+var __sfc__$1g = vue.defineComponent({
   name: "VarIcon",
-  props: props$17,
+  props: props$18,
   setup(props2) {
     var nextName = vue.ref("");
     var animateInProgress = vue.ref(false);
@@ -1285,8 +1285,8 @@ var __sfc__$1f = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1e,
-      classes: classes$11,
+      n: n$1f,
+      classes: classes$12,
       nextName,
       animateInProgress,
       isURL,
@@ -1295,14 +1295,14 @@ var __sfc__$1f = vue.defineComponent({
     };
   }
 });
-__sfc__$1f.render = __render__$1e;
-const Icon = __sfc__$1f;
+__sfc__$1g.render = __render__$1f;
+const Icon = __sfc__$1g;
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
 var _IconComponent = Icon;
-function _extends$j() {
-  _extends$j = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$k() {
+  _extends$k = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1313,9 +1313,9 @@ function _extends$j() {
     }
     return target;
   };
-  return _extends$j.apply(this, arguments);
+  return _extends$k.apply(this, arguments);
 }
-var props$16 = _extends$j({
+var props$17 = _extends$k({
   show: {
     type: Boolean,
     default: false
@@ -1333,7 +1333,7 @@ var props$16 = _extends$j({
   },
   onSelect: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$18, [
+}, pickProps(props$19, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -1552,8 +1552,8 @@ const enUS = {
   paginationPage: "page",
   paginationJump: "Go to"
 };
-function _extends$i() {
-  _extends$i = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$j() {
+  _extends$j = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1564,7 +1564,7 @@ function _extends$i() {
     }
     return target;
   };
-  return _extends$i.apply(this, arguments);
+  return _extends$j.apply(this, arguments);
 }
 function useLocale() {
   var packs2 = {};
@@ -1585,7 +1585,7 @@ function useLocale() {
       console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
       return;
     }
-    packs2[lang] = _extends$i({}, packs2[lang], pack3);
+    packs2[lang] = _extends$j({}, packs2[lang], pack3);
     use2(lang);
   };
   return {
@@ -1626,11 +1626,11 @@ const Locale = {
   useLocale
 };
 var {
-  n: n$1d,
-  classes: classes$10
+  n: n$1e,
+  classes: classes$11
 } = createNamespace("action-sheet");
 var _hoisted_1$r = ["onClick"];
-function __render__$1d(_ctx, _cache) {
+function __render__$1e(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_popup = vue.resolveComponent("var-popup");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -1723,7 +1723,7 @@ function __render__$1d(_ctx, _cache) {
     ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]
   );
 }
-var __sfc__$1e = vue.defineComponent({
+var __sfc__$1f = vue.defineComponent({
   name: "VarActionSheet",
   directives: {
     Ripple: Ripple$1
@@ -1733,7 +1733,7 @@ var __sfc__$1e = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$16,
+  props: props$17,
   setup(props2) {
     var popupShow = vue.ref(false);
     var handleSelect = (action) => {
@@ -1754,8 +1754,8 @@ var __sfc__$1e = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1d,
-      classes: classes$10,
+      n: n$1e,
+      classes: classes$11,
       handlePopupUpdateShow,
       popupShow,
       pack,
@@ -1764,10 +1764,10 @@ var __sfc__$1e = vue.defineComponent({
     };
   }
 });
-__sfc__$1e.render = __render__$1d;
-const VarActionSheet = __sfc__$1e;
-function _extends$h() {
-  _extends$h = Object.assign ? Object.assign.bind() : function(target) {
+__sfc__$1f.render = __render__$1e;
+const VarActionSheet = __sfc__$1f;
+function _extends$i() {
+  _extends$i = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1778,15 +1778,15 @@ function _extends$h() {
     }
     return target;
   };
-  return _extends$h.apply(this, arguments);
+  return _extends$i.apply(this, arguments);
 }
 var singletonOptions$3;
-var defaultOptions$2 = {};
-function normalizeOptions$2(options) {
+var defaultOptions$3 = {};
+function normalizeOptions$3(options) {
   if (options === void 0) {
     options = {};
   }
-  return _extends$h({}, defaultOptions$2, options);
+  return _extends$i({}, defaultOptions$3, options);
 }
 function ActionSheet(options) {
   if (!inBrowser()) {
@@ -1794,7 +1794,7 @@ function ActionSheet(options) {
   }
   return new Promise((resolve) => {
     ActionSheet.close();
-    var reactiveActionSheetOptions = vue.reactive(normalizeOptions$2(options));
+    var reactiveActionSheetOptions = vue.reactive(normalizeOptions$3(options));
     reactiveActionSheetOptions.teleport = "body";
     singletonOptions$3 = reactiveActionSheetOptions;
     var {
@@ -1825,10 +1825,10 @@ function ActionSheet(options) {
   });
 }
 function setDefaultOptions$2(options) {
-  defaultOptions$2 = options;
+  defaultOptions$3 = options;
 }
 function resetDefaultOptions$2() {
-  defaultOptions$2 = {};
+  defaultOptions$3 = {};
 }
 function close$1() {
   if (singletonOptions$3 != null) {
@@ -1856,7 +1856,7 @@ function positionValidator$3(position) {
   var validPositions = ["left", "center", "right"];
   return validPositions.includes(position);
 }
-var props$15 = {
+var props$16 = {
   color: {
     type: String
   },
@@ -1887,10 +1887,10 @@ var props$15 = {
   }
 };
 var {
-  n: n$1c,
-  classes: classes$$
+  n: n$1d,
+  classes: classes$10
 } = createNamespace("app-bar");
-function __render__$1c(_ctx, _cache) {
+function __render__$1d(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -1971,9 +1971,9 @@ function __render__$1c(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1d = vue.defineComponent({
+var __sfc__$1e = vue.defineComponent({
   name: "VarAppBar",
-  props: props$15,
+  props: props$16,
   setup(props2, _ref) {
     var {
       slots
@@ -2007,16 +2007,16 @@ var __sfc__$1d = vue.defineComponent({
     useMounted(computePadding);
     vue.onUpdated(computePadding);
     return {
-      n: n$1c,
-      classes: classes$$,
+      n: n$1d,
+      classes: classes$10,
       rootStyles,
       paddingLeft,
       paddingRight
     };
   }
 });
-__sfc__$1d.render = __render__$1c;
-const AppBar = __sfc__$1d;
+__sfc__$1e.render = __render__$1d;
+const AppBar = __sfc__$1e;
 AppBar.install = function(app) {
   app.component(AppBar.name, AppBar);
 };
@@ -2050,8 +2050,8 @@ function _asyncToGenerator$b(fn2) {
     });
   };
 }
-function _extends$g() {
-  _extends$g = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$h() {
+  _extends$h = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2062,7 +2062,7 @@ function _extends$g() {
     }
     return target;
   };
-  return _extends$g.apply(this, arguments);
+  return _extends$h.apply(this, arguments);
 }
 var BACKGROUND_IMAGE_ARG_NAME = "background-image";
 var LAZY_LOADING = "lazy-loading";
@@ -2132,7 +2132,7 @@ function createLazy(el, binding) {
     error: (_el$getAttribute2 = el.getAttribute(LAZY_ERROR)) != null ? _el$getAttribute2 : defaultLazyOptions.error,
     attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
   };
-  el._lazy = _extends$g({
+  el._lazy = _extends$h({
     src: binding.value,
     arg: binding.arg,
     currentAttempt: 0,
@@ -2268,7 +2268,7 @@ var internalSizeValidator$1 = (size) => ["mini", "small", "normal", "large"].inc
 function sizeValidator$5(size) {
   return internalSizeValidator$1(size) || isNumber(size) || isString(size);
 }
-var props$14 = {
+var props$15 = {
   round: {
     type: Boolean,
     default: true
@@ -2311,12 +2311,12 @@ var props$14 = {
   onError: defineListenerProp()
 };
 var {
-  n: n$1b,
-  classes: classes$_
+  n: n$1c,
+  classes: classes$$
 } = createNamespace("avatar");
 var _hoisted_1$q = ["src", "lazy-loading", "lazy-error"];
 var _hoisted_2$d = ["src"];
-function __render__$1b(_ctx, _cache) {
+function __render__$1c(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2396,12 +2396,12 @@ function __render__$1b(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1c = vue.defineComponent({
+var __sfc__$1d = vue.defineComponent({
   name: "VarAvatar",
   directives: {
     Lazy: Lazy$1
   },
-  props: props$14,
+  props: props$15,
   setup(props2) {
     var avatarElement = vue.ref(null);
     var textElement = vue.ref(null);
@@ -2445,8 +2445,8 @@ var __sfc__$1c = vue.defineComponent({
       internalSizeValidator: internalSizeValidator$1,
       sizeValidator: sizeValidator$5,
       toSizeUnit,
-      n: n$1b,
-      classes: classes$_,
+      n: n$1c,
+      classes: classes$$,
       avatarElement,
       textElement,
       scale,
@@ -2456,13 +2456,13 @@ var __sfc__$1c = vue.defineComponent({
     };
   }
 });
-__sfc__$1c.render = __render__$1b;
-const Avatar = __sfc__$1c;
+__sfc__$1d.render = __render__$1c;
+const Avatar = __sfc__$1d;
 Avatar.install = function(app) {
   app.component(Avatar.name, Avatar);
 };
 var _AvatarComponent = Avatar;
-var props$13 = {
+var props$14 = {
   offset: {
     type: [Number, String]
   },
@@ -2472,10 +2472,10 @@ var props$13 = {
   }
 };
 var {
-  n: n$1a,
-  classes: classes$Z
+  n: n$1b,
+  classes: classes$_
 } = createNamespace("avatar-group");
-function __render__$1a(_ctx, _cache) {
+function __render__$1b(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2487,9 +2487,9 @@ function __render__$1a(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1b = vue.defineComponent({
+var __sfc__$1c = vue.defineComponent({
   name: "VarAvatarGroup",
-  props: props$13,
+  props: props$14,
   setup(props2) {
     var rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2500,15 +2500,15 @@ var __sfc__$1b = vue.defineComponent({
       };
     });
     return {
-      n: n$1a,
-      classes: classes$Z,
+      n: n$1b,
+      classes: classes$_,
       toSizeUnit,
       rootStyles
     };
   }
 });
-__sfc__$1b.render = __render__$1a;
-const AvatarGroup = __sfc__$1b;
+__sfc__$1c.render = __render__$1b;
+const AvatarGroup = __sfc__$1c;
 AvatarGroup.install = function(app) {
   app.component(AvatarGroup.name, AvatarGroup);
 };
@@ -2519,7 +2519,7 @@ function typeValidator$a(type) {
 function sizeValidator$4(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$12 = {
+var props$13 = {
   type: {
     type: String,
     default: "circle",
@@ -2545,8 +2545,8 @@ var props$12 = {
   }
 };
 var {
-  n: n$19,
-  classes: classes$Y
+  n: n$1a,
+  classes: classes$Z
 } = createNamespace("loading");
 var _withScopeId$6 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 var _hoisted_1$p = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
@@ -2564,7 +2564,7 @@ var _hoisted_1$p = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.crea
   /* HOISTED */
 ));
 var _hoisted_2$c = [_hoisted_1$p];
-function __render__$19(_ctx, _cache) {
+function __render__$1a(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2685,9 +2685,9 @@ function __render__$19(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$1a = vue.defineComponent({
+var __sfc__$1b = vue.defineComponent({
   name: "VarLoading",
-  props: props$12,
+  props: props$13,
   setup(props2, _ref) {
     var {
       slots
@@ -2704,20 +2704,67 @@ var __sfc__$1a = vue.defineComponent({
       return props2.loading;
     });
     return {
-      n: n$19,
-      classes: classes$Y,
+      n: n$1a,
+      classes: classes$Z,
       multiplySizeUnit,
       loadingTypeDict,
       isShow
     };
   }
 });
-__sfc__$1a.render = __render__$19;
-const Loading = __sfc__$1a;
+__sfc__$1b.render = __render__$1a;
+const Loading = __sfc__$1b;
 Loading.install = function(app) {
   app.component(Loading.name, Loading);
 };
 var _LoadingComponent = Loading;
+var props$12 = {
+  hovering: {
+    type: Boolean,
+    default: true
+  }
+};
+var {
+  n: n$19,
+  classes: classes$Y
+} = createNamespace("hover-overlay");
+function __render__$19(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.hovering, _ctx.n("--hovering")]))
+    },
+    null,
+    2
+    /* CLASS */
+  );
+}
+var __sfc__$1a = vue.defineComponent({
+  name: "VarHoverOverlay",
+  props: props$12,
+  setup() {
+    return {
+      n: n$19,
+      classes: classes$Y
+    };
+  }
+});
+__sfc__$1a.render = __render__$19;
+const HoverOverlay = __sfc__$1a;
+HoverOverlay.install = function(app) {
+  app.component(HoverOverlay.name, HoverOverlay);
+};
+function useHoverOverlay() {
+  var hovering = vue.ref(false);
+  var handleHovering = (value) => {
+    hovering.value = value;
+  };
+  return {
+    hovering,
+    handleHovering
+  };
+}
+var _HoverOverlayComponent = HoverOverlay;
 function shouldDisabled(arg) {
   if (!arg) {
     return false;
@@ -2842,8 +2889,8 @@ var Hover = {
 };
 var _HoverComponent = Hover;
 const Hover$1 = Hover;
-function _extends$f() {
-  _extends$f = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$g() {
+  _extends$g = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -2854,7 +2901,7 @@ function _extends$f() {
     }
     return target;
   };
-  return _extends$f.apply(this, arguments);
+  return _extends$g.apply(this, arguments);
 }
 function typeValidator$9(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
@@ -2920,9 +2967,9 @@ var props$11 = {
   loadingRadius: {
     type: [Number, String]
   },
-  loadingType: pickProps(props$12, "type"),
-  loadingSize: pickProps(props$12, "size"),
-  loadingColor: _extends$f({}, pickProps(props$12, "color"), {
+  loadingType: pickProps(props$13, "type"),
+  loadingSize: pickProps(props$13, "size"),
+  loadingColor: _extends$g({}, pickProps(props$13, "color"), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
@@ -2960,6 +3007,7 @@ var {
 var _hoisted_1$o = ["type", "disabled"];
 function __render__$18(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
+  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(
@@ -3001,25 +3049,26 @@ function __render__$18(_ctx, _cache) {
       [vue.renderSlot(_ctx.$slots, "default")],
       2
       /* CLASS */
-    ), vue.createElementVNode(
-      "div",
+    ), vue.createVNode(
+      _component_var_hover_overlay,
       {
-        class: vue.normalizeClass(_ctx.classes(_ctx.n("overlay"), [_ctx.hovering, _ctx.n("--hovering")]))
+        hovering: _ctx.hovering
       },
       null,
-      2
-      /* CLASS */
+      8,
+      ["hovering"]
     )],
     46,
     _hoisted_1$o
   )), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
-  }], [_directive_hover, _ctx.handleHover, "desktop"]]);
+  }], [_directive_hover, _ctx.handleHovering, "desktop"]]);
 }
 var __sfc__$19 = vue.defineComponent({
   name: "VarButton",
   components: {
-    VarLoading: Loading
+    VarLoading: Loading,
+    VarHoverOverlay: HoverOverlay
   },
   directives: {
     Ripple: Ripple$1,
@@ -3028,10 +3077,13 @@ var __sfc__$19 = vue.defineComponent({
   props: props$11,
   setup(props2) {
     var pending = vue.ref(false);
-    var hovering = vue.ref(false);
     var {
       buttonGroup: buttonGroup2
     } = useButtonGroup();
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var states = vue.computed(() => {
       if (!buttonGroup2) {
         return {
@@ -3094,16 +3146,13 @@ var __sfc__$19 = vue.defineComponent({
       }
       attemptAutoLoading(call(onTouchstart, e));
     };
-    var handleHover = (isHover) => {
-      hovering.value = isHover;
-    };
     return {
       n: n$18,
       classes: classes$X,
       pending,
       states,
       hovering,
-      handleHover,
+      handleHovering,
       handleClick,
       handleTouchstart
     };
@@ -3413,8 +3462,8 @@ function useBottomNavigationItems() {
     bindBottomNavigationItem: bindChildren
   };
 }
-function _extends$e() {
-  _extends$e = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$f() {
+  _extends$f = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -3425,7 +3474,7 @@ function _extends$e() {
     }
     return target;
   };
-  return _extends$e.apply(this, arguments);
+  return _extends$f.apply(this, arguments);
 }
 var {
   n: n$15,
@@ -3585,7 +3634,7 @@ var __sfc__$16 = vue.defineComponent({
     bindBottomNavigationItem(bottomNavigationProvider);
     vue.watch(() => length.value, matchBoundary);
     vue.watch(() => props2.fabProps, (newValue) => {
-      fabProps.value = _extends$e({}, defaultFabProps, newValue);
+      fabProps.value = _extends$f({}, defaultFabProps, newValue);
     }, {
       immediate: true,
       deep: true
@@ -4747,8 +4796,8 @@ function useCheckboxGroup() {
     bindCheckboxGroup: bindParent
   };
 }
-function _extends$d() {
-  _extends$d = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$e() {
+  _extends$e = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -4759,7 +4808,7 @@ function _extends$d() {
     }
     return target;
   };
-  return _extends$d.apply(this, arguments);
+  return _extends$e.apply(this, arguments);
 }
 var FORM_BIND_FORM_ITEM_KEY = Symbol("FORM_BIND_FORM_ITEM_KEY");
 function useForm() {
@@ -4770,7 +4819,7 @@ function useForm() {
   } = useParent(FORM_BIND_FORM_ITEM_KEY);
   var instance = vue.getCurrentInstance();
   var bindForm = bindParent ? (formItemProvider) => {
-    bindParent(_extends$d({}, formItemProvider, {
+    bindParent(_extends$e({}, formItemProvider, {
       instance
     }));
   } : null;
@@ -5229,7 +5278,7 @@ var props$Q = {
   textColor: {
     type: String
   },
-  iconName: pickProps(props$17, "name"),
+  iconName: pickProps(props$18, "name"),
   plain: {
     type: Boolean,
     default: false
@@ -8480,8 +8529,8 @@ var DELAY = 600;
 var _hoisted_1$l = ["inputmode", "readonly", "disabled"];
 function __render__$S(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
+  var _component_var_button = vue.resolveComponent("var-button");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
-  var _directive_ripple = vue.resolveDirective("ripple");
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -8495,27 +8544,32 @@ function __render__$S(_ctx, _cache) {
           background: _ctx.color ? _ctx.color : void 0
         }
       }, _ctx.$attrs),
-      [vue.withDirectives(vue.createVNode(
-        _component_var_icon,
+      [vue.createVNode(
+        _component_var_button,
         {
-          "var-counter-cover": "",
-          name: "minus",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("decrement-button"), [!_ctx.decrementButton, _ctx.n("--hidden")], [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")])),
           style: vue.normalizeStyle({
             width: _ctx.toSizeUnit(_ctx.buttonSize),
             height: _ctx.toSizeUnit(_ctx.buttonSize)
           }),
+          round: "",
+          "var-counter-cover": "",
+          ripple: _ctx.ripple && _ctx.decrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableDecrement && !_ctx.isMin,
           onClick: _ctx.decrement,
           onTouchstart: _ctx.pressDecrement,
           onTouchend: _ctx.releaseDecrement,
           onTouchcancel: _ctx.releaseDecrement
         },
-        null,
+        {
+          default: vue.withCtx(() => [vue.createVNode(_component_var_icon, {
+            name: "minus"
+          })]),
+          _: 1
+          /* STABLE */
+        },
         8,
-        ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]
-      ), [[_directive_ripple, {
-        disabled: !_ctx.ripple || _ctx.disabled || _ctx.formDisabled || _ctx.readonly || _ctx.formReadonly || _ctx.disableDecrement || !_ctx.decrementButton || _ctx.isMin
-      }]]), vue.withDirectives(vue.createElementVNode(
+        ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]
+      ), vue.withDirectives(vue.createElementVNode(
         "input",
         {
           class: vue.normalizeClass(_ctx.classes(_ctx.n("input"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")])),
@@ -8534,27 +8588,32 @@ function __render__$S(_ctx, _cache) {
         null,
         46,
         _hoisted_1$l
-      ), [[vue.vModelText, _ctx.inputValue]]), vue.withDirectives(vue.createVNode(
-        _component_var_icon,
+      ), [[vue.vModelText, _ctx.inputValue]]), vue.createVNode(
+        _component_var_button,
         {
-          "var-counter-cover": "",
-          name: "plus",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("increment-button"), [!_ctx.incrementButton, _ctx.n("--hidden")], [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")])),
           style: vue.normalizeStyle({
             width: _ctx.toSizeUnit(_ctx.buttonSize),
             height: _ctx.toSizeUnit(_ctx.buttonSize)
           }),
+          round: "",
+          "var-counter-cover": "",
+          ripple: _ctx.ripple && _ctx.incrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableIncrement && !_ctx.isMax,
           onClick: _ctx.increment,
           onTouchstart: _ctx.pressIncrement,
           onTouchend: _ctx.releaseIncrement,
           onTouchcancel: _ctx.releaseIncrement
         },
-        null,
+        {
+          default: vue.withCtx(() => [vue.createVNode(_component_var_icon, {
+            name: "plus"
+          })]),
+          _: 1
+          /* STABLE */
+        },
         8,
-        ["class", "style", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]
-      ), [[_directive_ripple, {
-        disabled: !_ctx.ripple || _ctx.disabled || _ctx.readonly || _ctx.formDisabled || _ctx.formReadonly || _ctx.disableIncrement || !_ctx.incrementButton || _ctx.isMax
-      }]])],
+        ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]
+      )],
       16
       /* FULL_PROPS */
     ), vue.createVNode(
@@ -8573,6 +8632,7 @@ function __render__$S(_ctx, _cache) {
 var __sfc__$T = vue.defineComponent({
   name: "VarCounter",
   components: {
+    VarButton: Button,
     VarIcon: Icon,
     VarFormDetails: FormDetails
   },
@@ -8583,10 +8643,6 @@ var __sfc__$T = vue.defineComponent({
   props: props$L,
   setup(props2) {
     var inputValue = vue.ref("");
-    var incrementTimer;
-    var decrementTimer;
-    var incrementDelayTimer;
-    var decrementDelayTimer;
     var {
       bindForm,
       form
@@ -8602,6 +8658,10 @@ var __sfc__$T = vue.defineComponent({
       readonly: formReadonly,
       disabled: formDisabled
     } = form != null ? form : {};
+    var incrementTimer;
+    var decrementTimer;
+    var incrementDelayTimer;
+    var decrementDelayTimer;
     var validate = () => v(props2.rules, props2.modelValue);
     var validateWithTrigger = (trigger) => {
       vue.nextTick(() => {
@@ -9487,8 +9547,8 @@ var __sfc__$S = vue.defineComponent({
 });
 __sfc__$S.render = __render__$R;
 const PanelHeader = __sfc__$S;
-function _extends$c() {
-  _extends$c = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$d() {
+  _extends$d = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9499,7 +9559,7 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
@@ -9556,7 +9616,7 @@ function __render__$Q(_ctx, _cache) {
                   type: "primary",
                   "var-month-picker-cover": "",
                   ripple: false
-                }, _extends$c({}, _ctx.buttonProps(month.index)), {
+                }, _extends$d({}, _ctx.buttonProps(month.index)), {
                   onClick: (event) => _ctx.chooseMonth(month, event)
                 }),
                 {
@@ -9896,8 +9956,8 @@ var __sfc__$Q = vue.defineComponent({
 });
 __sfc__$Q.render = __render__$P;
 const YearPickerPanel = __sfc__$Q;
-function _extends$b() {
-  _extends$b = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$c() {
+  _extends$c = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9908,7 +9968,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
@@ -9995,7 +10055,7 @@ function __render__$O(_ctx, _cache) {
                     "var-day-picker-cover": "",
                     round: "",
                     ripple: false
-                  }, _extends$b({}, _ctx.buttonProps(day)), {
+                  }, _extends$c({}, _ctx.buttonProps(day)), {
                     onClick: (event) => _ctx.chooseDay(day, event)
                   }),
                   {
@@ -10846,8 +10906,8 @@ DatePicker.install = function(app) {
   app.component(DatePicker.name, DatePicker);
 };
 var _DatePickerComponent = DatePicker;
-function _extends$a() {
-  _extends$a = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$b() {
+  _extends$b = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -10858,12 +10918,12 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 function messageAlignValidator(messageAlign) {
   return ["left", "center", "right"].includes(messageAlign);
 }
-var props$J = _extends$a({
+var props$J = _extends$b({
   show: {
     type: Boolean,
     default: false
@@ -10918,7 +10978,7 @@ var props$J = _extends$a({
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$18, [
+}, pickProps(props$19, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -10933,8 +10993,8 @@ var props$J = _extends$a({
   // internal for function call closes the dialog
   "onRouteChange"
 ]));
-function _extends$9() {
-  _extends$9 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$a() {
+  _extends$a = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -10945,7 +11005,7 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
 var {
   n: n$M,
@@ -10978,7 +11038,7 @@ function __render__$M(_ctx, _cache) {
         "div",
         vue.mergeProps({
           class: _ctx.classes(_ctx.n("$--box"), _ctx.n(), _ctx.dialogClass),
-          style: _extends$9({
+          style: _extends$a({
             width: _ctx.toSizeUnit(_ctx.width)
           }, _ctx.dialogStyle)
         }, _ctx.$attrs),
@@ -11154,8 +11214,8 @@ var __sfc__$N = vue.defineComponent({
 });
 __sfc__$N.render = __render__$M;
 const VarDialog = __sfc__$N;
-function _extends$8() {
-  _extends$8 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$9() {
+  _extends$9 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11166,20 +11226,20 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 var singletonOptions$2;
-var defaultOptions$1 = {};
-function normalizeOptions$1(options) {
+var defaultOptions$2 = {};
+function normalizeOptions$2(options) {
   if (options === void 0) {
     options = {};
   }
   if (isString(options)) {
-    return _extends$8({}, defaultOptions$1, {
+    return _extends$9({}, defaultOptions$2, {
       message: options
     });
   }
-  return _extends$8({}, defaultOptions$1, options);
+  return _extends$9({}, defaultOptions$2, options);
 }
 function Dialog(options) {
   if (!inBrowser()) {
@@ -11187,7 +11247,7 @@ function Dialog(options) {
   }
   return new Promise((resolve) => {
     Dialog.close();
-    var dialogOptions = normalizeOptions$1(options);
+    var dialogOptions = normalizeOptions$2(options);
     var reactiveDialogOptions = vue.reactive(dialogOptions);
     reactiveDialogOptions.teleport = "body";
     singletonOptions$2 = reactiveDialogOptions;
@@ -11223,10 +11283,10 @@ function Dialog(options) {
   });
 }
 function setDefaultOptions$1(options) {
-  defaultOptions$1 = options;
+  defaultOptions$2 = options;
 }
 function resetDefaultOptions$1() {
-  defaultOptions$1 = {};
+  defaultOptions$2 = {};
 }
 function close() {
   if (singletonOptions$2 != null) {
@@ -11274,8 +11334,8 @@ var props$I = {
     default: false
   }
 };
-function _extends$7() {
-  _extends$7 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$8() {
+  _extends$8 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11286,7 +11346,7 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 var {
   n: n$L,
@@ -11336,13 +11396,13 @@ var __sfc__$M = vue.defineComponent({
         margin
       };
       if (isBoolean(inset) || inset === 0) {
-        return _extends$7({}, baseStyle);
+        return _extends$8({}, baseStyle);
       }
       var _inset = toNumber(inset);
       var absInsetWithUnit = Math.abs(_inset) + (inset + "").replace(_inset + "", "");
-      return vertical ? _extends$7({}, baseStyle, {
+      return vertical ? _extends$8({}, baseStyle, {
         height: "calc(80% - " + toSizeUnit(absInsetWithUnit) + ")"
-      }) : _extends$7({}, baseStyle, {
+      }) : _extends$8({}, baseStyle, {
         width: "calc(100% - " + toSizeUnit(absInsetWithUnit) + ")",
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
       });
@@ -11356,7 +11416,7 @@ var __sfc__$M = vue.defineComponent({
     vue.onUpdated(() => {
       checkHasText();
     });
-    return _extends$7({
+    return _extends$8({
       n: n$L,
       classes: classes$D
     }, vue.toRefs(state), {
@@ -12637,8 +12697,8 @@ var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyS
 var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
-function _extends$6() {
-  _extends$6 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$7() {
+  _extends$7 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -12649,7 +12709,7 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 function asyncGeneratorStep$9(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -12857,9 +12917,9 @@ function usePopover(options) {
       skidding,
       distance
     } = getPosition();
-    var modifiers = [_extends$6({}, flip$1, {
+    var modifiers = [_extends$7({}, flip$1, {
       enabled: show.value
-    }), _extends$6({}, offset$1, {
+    }), _extends$7({}, offset$1, {
       options: {
         offset: [skidding, distance]
       }
@@ -13142,8 +13202,8 @@ var props$G = {
     default: true
   }
 };
-function _extends$5() {
-  _extends$5 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$6() {
+  _extends$6 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -13154,7 +13214,7 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 var {
   n: n$J,
@@ -13228,7 +13288,7 @@ var __sfc__$K = vue.defineComponent({
           sameWidth: true
         };
       }
-      return _extends$5({
+      return _extends$6({
         sameWidth: true
       }, props2.tooltip);
     });
@@ -14339,8 +14399,8 @@ SwipeItem.install = function(app) {
   app.component(SwipeItem.name, SwipeItem);
 };
 var _SwipeItemComponent = SwipeItem;
-function _extends$4() {
-  _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
+function _extends$5() {
+  _extends$5 = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -14351,9 +14411,9 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
-var props$B = _extends$4({
+var props$B = _extends$5({
   show: {
     type: Boolean,
     default: false
@@ -14374,7 +14434,7 @@ var props$B = _extends$4({
     default: false
   },
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$18, [
+}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$19, [
   "lockScroll",
   "teleport",
   "onOpen",
@@ -14736,17 +14796,44 @@ var __sfc__$F = vue.defineComponent({
 });
 __sfc__$F.render = __render__$E;
 const VarImagePreview = __sfc__$F;
+function _extends$4() {
+  _extends$4 = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$4.apply(this, arguments);
+}
 var singletonOptions$1;
+var defaultOptions$1 = {};
+function normalizeOptions$1(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  if (isString(options)) {
+    return _extends$4({}, defaultOptions$1, {
+      images: [options]
+    });
+  }
+  if (isArray(options)) {
+    return _extends$4({}, defaultOptions$1, {
+      images: options
+    });
+  }
+  return _extends$4({}, defaultOptions$1, options);
+}
 function ImagePreview(options) {
   if (!inBrowser()) {
     return;
   }
   ImagePreview.close();
-  var imagePreviewOptions = isString(options) ? {
-    images: [options]
-  } : isArray(options) ? {
-    images: options
-  } : options;
+  var imagePreviewOptions = normalizeOptions$1(options);
   var reactiveImagePreviewOptions = vue.reactive(imagePreviewOptions);
   reactiveImagePreviewOptions.teleport = "body";
   singletonOptions$1 = reactiveImagePreviewOptions;
@@ -14778,6 +14865,12 @@ ImagePreview.close = () => {
     });
   }
 };
+ImagePreview.setDefaultOptions = (options) => {
+  defaultOptions$1 = options;
+};
+ImagePreview.resetDefaultOptions = () => {
+  defaultOptions$1 = {};
+};
 VarImagePreview.install = function(app) {
   app.component(VarImagePreview.name, VarImagePreview);
 };
@@ -15705,6 +15798,7 @@ var __sfc__$B = vue.defineComponent({
     var id = vue.ref("var-input-" + vue.getCurrentInstance().uid);
     var el = vue.ref(null);
     var isFocus = vue.ref(false);
+    var isComposing = vue.ref(false);
     var type = vue.computed(() => {
       if (props2.type === "number") {
         return "text";
@@ -15750,7 +15844,7 @@ var __sfc__$B = vue.defineComponent({
         hint,
         modelValue
       } = props2;
-      if (!hint && !isEmpty(modelValue)) {
+      if (!hint && (!isEmpty(modelValue) || isComposing.value)) {
         return n$z("--placeholder-hidden");
       }
       if (hint && (!isEmpty(modelValue) || isFocus.value)) {
@@ -15775,27 +15869,20 @@ var __sfc__$B = vue.defineComponent({
       if (props2.type === "number") {
         value = formatNumber(value);
       }
-      value = withMaxlength(withTrim(value));
-      target.value = value;
-      return value;
+      return withMaxlength(withTrim(value));
     };
-    var handleCompositionStart = (e) => {
-      Object.assign(e.target, {
-        composing: true
-      });
+    var handleCompositionStart = () => {
+      isComposing.value = true;
     };
     var handleCompositionEnd = (e) => {
-      var target = e.target;
-      if (target.composing) {
-        target.composing = false;
-        target.dispatchEvent(new Event("input"));
+      if (!isComposing.value) {
+        return;
       }
+      isComposing.value = false;
+      e.target.dispatchEvent(new Event("input"));
     };
     var handleInput = (e) => {
-      var {
-        composing
-      } = e.target;
-      if (composing) {
+      if (isComposing.value) {
         return;
       }
       var value = updateValue(e);
@@ -15883,6 +15970,7 @@ var __sfc__$B = vue.defineComponent({
       el,
       id,
       isFocus,
+      isComposing,
       errorMessage,
       type,
       maxlengthText,
@@ -17393,7 +17481,7 @@ var props$n = _extends$3({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(props$18, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
+}, pickProps(props$19, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
   n: n$q,
   classes: classes$l
@@ -20465,7 +20553,9 @@ var {
 } = createNamespace("slider");
 var _hoisted_1$3 = ["onTouchstart", "onTouchmove", "onTouchend", "onTouchcancel"];
 function __render__$d(_ctx, _cache) {
+  var _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
+  var _directive_hover = vue.resolveDirective("hover");
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -20529,7 +20619,7 @@ function __render__$d(_ctx, _cache) {
             },
             [vue.renderSlot(_ctx.$slots, "button", {
               currentValue: item.text
-            }, () => [vue.createElementVNode(
+            }, () => [vue.withDirectives(vue.createElementVNode(
               "div",
               {
                 class: vue.normalizeClass(_ctx.n("thumb-block")),
@@ -20540,15 +20630,23 @@ function __render__$d(_ctx, _cache) {
               null,
               6
               /* CLASS, STYLE */
-            ), vue.createElementVNode(
+            ), [[_directive_hover, (value) => _ctx.hover(value, item), "desktop"]]), vue.createElementVNode(
               "div",
               {
                 class: vue.normalizeClass(_ctx.classes(_ctx.n("thumb-ripple"), [_ctx.thumbsProps[item.enumValue].active, _ctx.n("thumb-ripple--active")])),
                 style: vue.normalizeStyle({
-                  background: _ctx.thumbColor
+                  background: _ctx.thumbsProps[item.enumValue].active ? _ctx.thumbColor : void 0
                 })
               },
-              null,
+              [vue.createVNode(
+                _component_var_hover_overlay,
+                {
+                  hovering: item.hovering
+                },
+                null,
+                8,
+                ["hovering"]
+              )],
               6
               /* CLASS, STYLE */
             ), vue.createElementVNode(
@@ -20599,7 +20697,11 @@ function __render__$d(_ctx, _cache) {
 var __sfc__$e = vue.defineComponent({
   name: "VarSlider",
   components: {
-    VarFormDetails: FormDetails
+    VarFormDetails: FormDetails,
+    VarHoverOverlay: HoverOverlay
+  },
+  directives: {
+    Hover: Hover$1
   },
   props: props$d,
   setup(props2) {
@@ -20613,6 +20715,14 @@ var __sfc__$e = vue.defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var {
+      hovering: hoveringFirst,
+      handleHovering: handleHoveringFirst
+    } = useHoverOverlay();
+    var {
+      hovering: hoveringSecond,
+      handleHovering: handleHoveringSecond
+    } = useHoverOverlay();
     var validate = () => v(props2.rules, props2.modelValue);
     var getThumbProps = () => ({
       startPosition: 0,
@@ -20640,17 +20750,23 @@ var __sfc__$e = vue.defineComponent({
         list2 = [{
           value: getValue(modelValue[0]),
           enumValue: Thumbs.First,
-          text: toPrecision(modelValue[0])
+          text: toPrecision(modelValue[0]),
+          hovering: vue.unref(hoveringFirst),
+          handleHovering: handleHoveringFirst
         }, {
           value: getValue(modelValue[1]),
           enumValue: Thumbs.Second,
-          text: toPrecision(modelValue[1])
+          text: toPrecision(modelValue[1]),
+          hovering: vue.unref(hoveringSecond),
+          handleHovering: handleHoveringSecond
         }];
       } else if (isNumber(modelValue)) {
         list2 = [{
           value: getValue(modelValue),
           enumValue: Thumbs.First,
-          text: toPrecision(modelValue)
+          text: toPrecision(modelValue),
+          hovering: vue.unref(hoveringFirst),
+          handleHovering: handleHoveringFirst
         }];
       }
       return list2;
@@ -20700,6 +20816,11 @@ var __sfc__$e = vue.defineComponent({
       var isInteger = parseInt("" + num, 10) === num;
       return isInteger ? num : toNumber(num.toPrecision(5));
     };
+    var hover = (value, item) => {
+      if (isDisabled.value)
+        return;
+      item.handleHovering(value);
+    };
     var setPercent = (moveDistance, type) => {
       var rangeValue = [];
       var {
@@ -20736,6 +20857,9 @@ var __sfc__$e = vue.defineComponent({
     var start2 = (event, type) => {
       if (!maxWidth.value)
         maxWidth.value = sliderEl.value.offsetWidth;
+      if (!isDisabled.value) {
+        thumbsProps[type].active = true;
+      }
       if (isDisabled.value || isReadonly.value)
         return;
       call(props2.onStart);
@@ -20746,7 +20870,6 @@ var __sfc__$e = vue.defineComponent({
       if (isDisabled.value || isReadonly.value || !isScroll.value)
         return;
       var moveDistance = event.touches[0].clientX - thumbsProps[type].startPosition + thumbsProps[type].currentLeft;
-      thumbsProps[type].active = true;
       if (moveDistance <= 0)
         moveDistance = 0;
       else if (moveDistance >= maxWidth.value)
@@ -20761,11 +20884,13 @@ var __sfc__$e = vue.defineComponent({
         step: step2,
         min: min2
       } = props2;
+      if (!isDisabled.value) {
+        thumbsProps[type].active = false;
+      }
       if (isDisabled.value || isReadonly.value)
         return;
       var rangeValue = [];
       thumbsProps[type].currentLeft = thumbsProps[type].percentValue * unitWidth.value;
-      thumbsProps[type].active = false;
       var curValue = thumbsProps[type].percentValue * toNumber(step2) + toNumber(min2);
       if (range && isArray(modelValue)) {
         rangeValue = type === Thumbs.First ? [curValue, modelValue[1]] : [modelValue[0], curValue];
@@ -20874,6 +20999,7 @@ var __sfc__$e = vue.defineComponent({
       errorMessage,
       thumbsProps,
       thumbList,
+      hover,
       multiplySizeUnit,
       toNumber,
       showLabel,
@@ -20940,10 +21066,10 @@ var props$c = {
     type: Boolean,
     default: false
   },
-  loadingType: pickProps(props$12, "type"),
-  loadingSize: pickProps(props$12, "size"),
-  loadingRadius: pickProps(props$12, "radius"),
-  loadingColor: _extends$2({}, pickProps(props$12, "color"), {
+  loadingType: pickProps(props$13, "type"),
+  loadingSize: pickProps(props$13, "size"),
+  loadingRadius: pickProps(props$13, "radius"),
+  loadingColor: _extends$2({}, pickProps(props$13, "color"), {
     default: "currentColor"
   }),
   // 是否禁止滚动穿透
@@ -21915,9 +22041,11 @@ var {
 } = createNamespace("switch");
 function __render__$8(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
+  var _component_var_hover_overlay = vue.resolveComponent("var-hover-overlay");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
   var _directive_ripple = vue.resolveDirective("ripple");
-  return vue.openBlock(), vue.createElementBlock(
+  var _directive_hover = vue.resolveDirective("hover");
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "div",
     {
       class: vue.normalizeClass(_ctx.n())
@@ -21965,6 +22093,14 @@ function __render__$8(_ctx, _cache) {
           )) : vue.createCommentVNode("v-if", true)],
           6
           /* CLASS, STYLE */
+        ), vue.createVNode(
+          _component_var_hover_overlay,
+          {
+            hovering: _ctx.hovering
+          },
+          null,
+          8,
+          ["hovering"]
         )],
         6
         /* CLASS, STYLE */
@@ -21984,16 +22120,18 @@ function __render__$8(_ctx, _cache) {
     )],
     2
     /* CLASS */
-  );
+  )), [[_directive_hover, _ctx.hover, "desktop"]]);
 }
 var __sfc__$8 = vue.defineComponent({
   name: "VarSwitch",
   components: {
     VarLoading: Loading,
-    VarFormDetails: FormDetails
+    VarFormDetails: FormDetails,
+    VarHoverOverlay: HoverOverlay
   },
   directives: {
-    Ripple: Ripple$1
+    Ripple: Ripple$1,
+    Hover: Hover$1
   },
   props: props$7,
   setup(props2) {
@@ -22007,6 +22145,10 @@ var __sfc__$8 = vue.defineComponent({
       validate: v,
       resetValidation
     } = useValidation();
+    var {
+      hovering,
+      handleHovering
+    } = useHoverOverlay();
     var validate = () => v(props2.rules, props2.modelValue);
     var validateWithTrigger = () => vue.nextTick(() => vt(["onChange"], "onChange", props2.rules, props2.modelValue));
     var styleComputed = vue.computed(() => {
@@ -22070,6 +22212,11 @@ var __sfc__$8 = vue.defineComponent({
       call(updateModelValue, newValue);
       validateWithTrigger();
     };
+    var hover = (value) => {
+      if (props2.disabled || form != null && form.disabled.value)
+        return;
+      handleHovering(value);
+    };
     var reset = () => {
       call(props2["onUpdate:modelValue"], props2.inactiveValue);
       resetValidation();
@@ -22084,6 +22231,8 @@ var __sfc__$8 = vue.defineComponent({
       n: n$8,
       classes: classes$7,
       switchActive,
+      hovering,
+      hover,
       radius,
       styleComputed,
       errorMessage,
@@ -24560,6 +24709,7 @@ const breadcrumb = "";
 const BreadcrumbSfc = "";
 const breadcrumbs = "";
 const BreadcrumbsSfc = "";
+const hoverOverlay = "";
 const ButtonSfc = "";
 const buttonGroup = "";
 const ButtonGroupSfc = "";
@@ -24594,6 +24744,7 @@ const EllipsisSfc = "";
 const fab = "";
 const FormSfc = "";
 const FormDetailsSfc = "";
+const HoverOverlaySfc = "";
 const IconSfc = "";
 const image = "";
 const ImageSfc = "";
@@ -24671,7 +24822,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.9.0";
+const version = "2.9.1-alpha.1678875429822";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -24704,6 +24855,7 @@ function install(app) {
   Form.install && app.use(Form);
   FormDetails.install && app.use(FormDetails);
   Hover$1.install && app.use(Hover$1);
+  HoverOverlay.install && app.use(HoverOverlay);
   Icon.install && app.use(Icon);
   Image$1.install && app.use(Image$1);
   ImagePreview.install && app.use(ImagePreview);
@@ -24787,6 +24939,7 @@ const index_bundle = {
   Form,
   FormDetails,
   Hover: Hover$1,
+  HoverOverlay,
   Icon,
   Image: Image$1,
   ImagePreview,
@@ -24867,6 +25020,7 @@ exports.Fab = Fab;
 exports.Form = Form;
 exports.FormDetails = FormDetails;
 exports.Hover = Hover$1;
+exports.HoverOverlay = HoverOverlay;
 exports.Icon = Icon;
 exports.Image = Image$1;
 exports.ImagePreview = ImagePreview;
@@ -24948,6 +25102,7 @@ exports._FabComponent = _FabComponent;
 exports._FormComponent = _FormComponent;
 exports._FormDetailsComponent = _FormDetailsComponent;
 exports._HoverComponent = _HoverComponent;
+exports._HoverOverlayComponent = _HoverOverlayComponent;
 exports._IconComponent = _IconComponent;
 exports._ImageComponent = _ImageComponent;
 exports._ImagePreviewComponent = _ImagePreviewComponent;
@@ -24996,11 +25151,11 @@ exports._ThemesComponent = _ThemesComponent;
 exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
-exports.actionSheetProps = props$16;
+exports.actionSheetProps = props$17;
 exports.add = add$2;
-exports.appBarProps = props$15;
-exports.avatarGroupProps = props$13;
-exports.avatarProps = props$14;
+exports.appBarProps = props$16;
+exports.avatarGroupProps = props$14;
+exports.avatarProps = props$15;
 exports.backTopProps = props$10;
 exports.badgeProps = props$$;
 exports.bottomNavigationItemProps = props$Z;
@@ -25026,7 +25181,7 @@ exports.dividerProps = props$I;
 exports.enUS = enUS;
 exports.formDetailsProps = props$T;
 exports.formProps = props$E;
-exports.iconProps = props$17;
+exports.iconProps = props$18;
 exports.imageCache = imageCache;
 exports.imagePreviewProps = props$B;
 exports.imageProps = props$D;
@@ -25037,7 +25192,7 @@ exports.install = install;
 exports.linkProps = props$w;
 exports.listProps = props$v;
 exports.loadingBarProps = props$u;
-exports.loadingProps = props$12;
+exports.loadingProps = props$13;
 exports.menuProps = props$s;
 exports.merge = merge;
 exports.optionProps = props$r;
@@ -25047,7 +25202,7 @@ exports.packs = packs;
 exports.paginationProps = props$p;
 exports.paperProps = props$o;
 exports.pickerProps = props$n;
-exports.popupProps = props$18;
+exports.popupProps = props$19;
 exports.progressProps = props$m;
 exports.pullRefreshProps = props$l;
 exports.radioGroupProps = props$j;
@@ -25075,6 +25230,7 @@ exports.timePickerProps = props$1;
 exports.tooltipProps = props$H;
 exports.uploaderProps = props;
 exports.use = use;
+exports.useHoverOverlay = useHoverOverlay;
 exports.useLocale = useLocale;
 exports.version = version;
 exports.zhCN = zhCN;