@varlet/ui 2.8.6 → 2.9.0-alpha.1678371604765

package/lib/varlet.cjs.js

@@ -457,6 +457,104 @@ function useClickOutside(target, type, listener) {
   };
   useEventListener(document, type, handler);
 }
+var __rest = globalThis && globalThis.__rest || function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+function keyInProvides$1(key) {
+  const instance = vue.getCurrentInstance();
+  return key in instance.provides;
+}
+function useParent$1(key) {
+  if (!keyInProvides$1(key)) {
+    return {
+      index: null,
+      parentProvider: null,
+      bindParent: null
+    };
+  }
+  const provider = vue.inject(key);
+  const { childInstances, collect, clear: clear2 } = provider, parentProvider = __rest(provider, ["childInstances", "collect", "clear"]);
+  const childInstance = vue.getCurrentInstance();
+  const index = vue.computed(() => childInstances.indexOf(childInstance));
+  const bindParent = (childProvider) => {
+    vue.onMounted(() => {
+      vue.nextTick().then(() => {
+        collect(childInstance, childProvider);
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      vue.nextTick().then(() => {
+        clear2(childInstance, childProvider);
+      });
+    });
+  };
+  return {
+    index,
+    parentProvider,
+    bindParent
+  };
+}
+function flatVNodes$1(subTree) {
+  const vNodes = [];
+  const flat = (subTree2) => {
+    if (subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.component) {
+      flat(subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.component.subTree);
+      return;
+    }
+    if (Array.isArray(subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.children)) {
+      subTree2.children.forEach((child) => {
+        if (vue.isVNode(child)) {
+          vNodes.push(child);
+          flat(child);
+        }
+      });
+    }
+  };
+  flat(subTree);
+  return vNodes;
+}
+function useChildren$1(key) {
+  const parentInstance = vue.getCurrentInstance();
+  const childInstances = vue.reactive([]);
+  const childProviders = [];
+  const length = vue.computed(() => childInstances.length);
+  const sortInstances = () => {
+    const vNodes = flatVNodes$1(parentInstance.subTree);
+    childInstances.sort((a, b) => {
+      return vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode);
+    });
+  };
+  const collect = (childInstance, childProvider) => {
+    childInstances.push(childInstance);
+    childProviders.push(childProvider);
+    sortInstances();
+  };
+  const clear2 = (childInstance, childProvider) => {
+    removeItem(childInstances, childInstance);
+    removeItem(childProviders, childProvider);
+  };
+  const bindChildren = (parentProvider) => {
+    vue.provide(key, Object.assign({
+      childInstances,
+      collect,
+      clear: clear2
+    }, parentProvider));
+  };
+  return {
+    length,
+    childProviders,
+    bindChildren
+  };
+}
 var _excluded = ["collect", "clear"];
 function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -552,6 +650,22 @@ function mountInstance(component, props2, eventListener) {
     unmountInstance: unmount2
   };
 }
+function flatFragment(vNodes) {
+  var result2 = [];
+  vNodes.forEach((vNode) => {
+    if (vNode.type === vue.Comment) {
+      return;
+    }
+    if (vNode.type === vue.Fragment && isArray(vNode.children)) {
+      vNode.children.forEach((item) => {
+        result2.push(item);
+      });
+      return;
+    }
+    result2.push(vNode);
+  });
+  return result2;
+}
 function flatVNodes(subTree) {
   var vNodes = [];
   var flat = (subTree2) => {
@@ -781,7 +895,7 @@ function _extends$l() {
   return _extends$l.apply(this, arguments);
 }
 var {
-  n: n$1f
+  n: n$1g
 } = createNamespace("ripple");
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -836,7 +950,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple2 = document.createElement("div");
-    ripple2.classList.add(n$1f());
+    ripple2.classList.add(n$1g());
     ripple2.style.opacity = "0";
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
@@ -855,7 +969,7 @@ function createRipple(event) {
 function removeRipple() {
   var _ripple = this._ripple;
   var task = () => {
-    var ripples = this.querySelectorAll("." + n$1f());
+    var ripples = this.querySelectorAll("." + n$1g());
     if (!ripples.length) {
       return;
     }
@@ -939,10 +1053,10 @@ var Ripple = {
 };
 var _RippleComponent = Ripple;
 const Ripple$1 = Ripple;
-function positionValidator$3(position) {
+function positionValidator$4(position) {
   return ["top", "bottom", "right", "left", "center"].includes(position);
 }
-var props$17 = {
+var props$18 = {
   show: {
     type: Boolean,
     default: false
@@ -950,7 +1064,7 @@ var props$17 = {
   position: {
     type: String,
     default: "center",
-    validator: positionValidator$3
+    validator: positionValidator$4
   },
   transition: {
     type: String
@@ -1085,17 +1199,17 @@ function _extends$k() {
   };
   return _extends$k.apply(this, arguments);
 }
-function _isSlot$2(s) {
+function _isSlot$3(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  n: n$1e,
-  classes: classes$11
+  n: n$1f,
+  classes: classes$12
 } = createNamespace("popup");
 const Popup = vue.defineComponent({
   name: "VarPopup",
   inheritAttrs: false,
-  props: props$17,
+  props: props$18,
   setup(props2, _ref) {
     var {
       slots,
@@ -1129,7 +1243,7 @@ const Popup = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$11(n$1e("overlay"), overlayClass),
+        "class": classes$12(n$1f("overlay"), overlayClass),
         "style": _extends$k({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -1138,7 +1252,7 @@ const Popup = vue.defineComponent({
     };
     var renderContent = () => {
       return vue.createVNode("div", vue.mergeProps({
-        "class": classes$11(n$1e("content"), n$1e("--" + props2.position), [props2.defaultStyle, n$1e("--content-background-color")], [props2.defaultStyle, n$1e("$-elevation--3")]),
+        "class": classes$12(n$1f("content"), n$1f("--" + props2.position), [props2.defaultStyle, n$1f("--content-background-color")], [props2.defaultStyle, n$1f("$-elevation--3")]),
         "style": {
           zIndex: zIndex.value
         }
@@ -1154,17 +1268,17 @@ const Popup = vue.defineComponent({
         position
       } = props2;
       return vue.createVNode(vue.Transition, {
-        "name": n$1e("$-fade"),
+        "name": n$1f("$-fade"),
         "onAfterEnter": onOpened,
         "onAfterLeave": onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$11(n$1e("$--box"), n$1e()),
+          "class": classes$12(n$1f("$--box"), n$1f()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [overlay2 && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": transition || n$1e("$-pop-" + position)
+          "name": transition || n$1f("$-pop-" + position)
         }, {
           default: () => [show && renderContent()]
         })]), [[vue.vShow, show]])]
@@ -1179,7 +1293,7 @@ const Popup = vue.defineComponent({
         return vue.createVNode(vue.Teleport, {
           "to": teleport,
           "disabled": disabled.value
-        }, _isSlot$2(_slot = renderPopup()) ? _slot : {
+        }, _isSlot$3(_slot = renderPopup()) ? _slot : {
           default: () => [_slot]
         });
       }
@@ -1191,7 +1305,7 @@ Popup.install = function(app) {
   app.component(Popup.name, Popup);
 };
 var _PopupComponent = Popup;
-var props$16 = {
+var props$17 = {
   name: {
     type: String
   },
@@ -1209,6 +1323,9 @@ var props$16 = {
     type: [Number, String],
     default: 0
   },
+  animationClass: {
+    type: String
+  },
   onClick: defineListenerProp()
 };
 function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1241,17 +1358,17 @@ function _asyncToGenerator$c(fn2) {
   };
 }
 var {
-  n: n$1d,
-  classes: classes$10
+  n: n$1e,
+  classes: classes$11
 } = createNamespace("icon");
 function __render__$1e(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"),
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.namespace !== _ctx.n(), _ctx.namespace], _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n("image"), _ctx.namespace + "-" + _ctx.nextName], [_ctx.shrinking, _ctx.n("--shrinking")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.namespace !== _ctx.n(), _ctx.namespace], _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n("image"), _ctx.namespace + "-" + _ctx.nextName], [_ctx.animateInProgress, _ctx.animationClass == null ? _ctx.n("--shrinking") : _ctx.animationClass])),
       style: vue.normalizeStyle({
         color: _ctx.color,
-        transition: "transform " + _ctx.toNumber(_ctx.transition) + "ms",
+        "transition-duration": _ctx.toNumber(_ctx.transition) + "ms",
         width: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
         height: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
         fontSize: _ctx.toSizeUnit(_ctx.size)
@@ -1266,10 +1383,10 @@ function __render__$1e(_ctx, _cache) {
 }
 var __sfc__$1f = vue.defineComponent({
   name: "VarIcon",
-  props: props$16,
+  props: props$17,
   setup(props2) {
     var nextName = vue.ref("");
-    var shrinking = vue.ref(false);
+    var animateInProgress = vue.ref(false);
     var handleNameChange = /* @__PURE__ */ function() {
       var _ref = _asyncToGenerator$c(function* (newName, oldName) {
         var {
@@ -1279,11 +1396,13 @@ var __sfc__$1f = vue.defineComponent({
           nextName.value = newName;
           return;
         }
-        shrinking.value = true;
+        animateInProgress.value = true;
         yield vue.nextTick();
         setTimeout(() => {
-          oldName != null && (nextName.value = newName);
-          shrinking.value = false;
+          if (oldName != null) {
+            nextName.value = newName;
+          }
+          animateInProgress.value = false;
         }, toNumber(transition));
       });
       return function handleNameChange2(_x, _x2) {
@@ -1294,10 +1413,10 @@ var __sfc__$1f = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1d,
-      classes: classes$10,
+      n: n$1e,
+      classes: classes$11,
       nextName,
-      shrinking,
+      animateInProgress,
       isURL,
       toNumber,
       toSizeUnit
@@ -1324,7 +1443,7 @@ function _extends$j() {
   };
   return _extends$j.apply(this, arguments);
 }
-var props$15 = _extends$j({
+var props$16 = _extends$j({
   show: {
     type: Boolean,
     default: false
@@ -1342,7 +1461,7 @@ var props$15 = _extends$j({
   },
   onSelect: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$17, [
+}, pickProps(props$18, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -1635,8 +1754,8 @@ const Locale = {
   useLocale
 };
 var {
-  n: n$1c,
-  classes: classes$$
+  n: n$1d,
+  classes: classes$10
 } = createNamespace("action-sheet");
 var _hoisted_1$s = ["onClick"];
 function __render__$1d(_ctx, _cache) {
@@ -1742,7 +1861,7 @@ var __sfc__$1e = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$15,
+  props: props$16,
   setup(props2) {
     var popupShow = vue.ref(false);
     var handleSelect = (action) => {
@@ -1763,8 +1882,8 @@ var __sfc__$1e = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1c,
-      classes: classes$$,
+      n: n$1d,
+      classes: classes$10,
       handlePopupUpdateShow,
       popupShow,
       pack,
@@ -1861,11 +1980,11 @@ Object.assign(ActionSheet, {
   close: close$1
 });
 var _ActionSheetComponent = VarActionSheet;
-function positionValidator$2(position) {
+function positionValidator$3(position) {
   var validPositions = ["left", "center", "right"];
   return validPositions.includes(position);
 }
-var props$14 = {
+var props$15 = {
   color: {
     type: String
   },
@@ -1878,7 +1997,7 @@ var props$14 = {
   titlePosition: {
     type: String,
     default: "left",
-    validator: positionValidator$2
+    validator: positionValidator$3
   },
   elevation: {
     type: Boolean,
@@ -1896,8 +2015,8 @@ var props$14 = {
   }
 };
 var {
-  n: n$1b,
-  classes: classes$_
+  n: n$1c,
+  classes: classes$$
 } = createNamespace("app-bar");
 function __render__$1c(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -1982,7 +2101,7 @@ function __render__$1c(_ctx, _cache) {
 }
 var __sfc__$1d = vue.defineComponent({
   name: "VarAppBar",
-  props: props$14,
+  props: props$15,
   setup(props2, _ref) {
     var {
       slots
@@ -2016,8 +2135,8 @@ var __sfc__$1d = vue.defineComponent({
     useMounted(computePadding);
     vue.onUpdated(computePadding);
     return {
-      n: n$1b,
-      classes: classes$_,
+      n: n$1c,
+      classes: classes$$,
       rootStyles,
       paddingLeft,
       paddingRight
@@ -2277,7 +2396,7 @@ var internalSizeValidator$1 = (size) => ["mini", "small", "normal", "large"].inc
 function sizeValidator$5(size) {
   return internalSizeValidator$1(size) || isNumber(size) || isString(size);
 }
-var props$13 = {
+var props$14 = {
   round: {
     type: Boolean,
     default: true
@@ -2320,8 +2439,8 @@ var props$13 = {
   onError: defineListenerProp()
 };
 var {
-  n: n$1a,
-  classes: classes$Z
+  n: n$1b,
+  classes: classes$_
 } = createNamespace("avatar");
 var _hoisted_1$r = ["src", "lazy-loading", "lazy-error"];
 var _hoisted_2$d = ["src"];
@@ -2410,7 +2529,7 @@ var __sfc__$1c = vue.defineComponent({
   directives: {
     Lazy: Lazy$1
   },
-  props: props$13,
+  props: props$14,
   setup(props2) {
     var avatarElement = vue.ref(null);
     var textElement = vue.ref(null);
@@ -2454,8 +2573,8 @@ var __sfc__$1c = vue.defineComponent({
       internalSizeValidator: internalSizeValidator$1,
       sizeValidator: sizeValidator$5,
       toSizeUnit,
-      n: n$1a,
-      classes: classes$Z,
+      n: n$1b,
+      classes: classes$_,
       avatarElement,
       textElement,
       scale,
@@ -2471,7 +2590,7 @@ Avatar.install = function(app) {
   app.component(Avatar.name, Avatar);
 };
 var _AvatarComponent = Avatar;
-var props$12 = {
+var props$13 = {
   offset: {
     type: [Number, String]
   },
@@ -2481,8 +2600,8 @@ var props$12 = {
   }
 };
 var {
-  n: n$19,
-  classes: classes$Y
+  n: n$1a,
+  classes: classes$Z
 } = createNamespace("avatar-group");
 function __render__$1a(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -2498,7 +2617,7 @@ function __render__$1a(_ctx, _cache) {
 }
 var __sfc__$1b = vue.defineComponent({
   name: "VarAvatarGroup",
-  props: props$12,
+  props: props$13,
   setup(props2) {
     var rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2509,8 +2628,8 @@ var __sfc__$1b = vue.defineComponent({
       };
     });
     return {
-      n: n$19,
-      classes: classes$Y,
+      n: n$1a,
+      classes: classes$Z,
       toSizeUnit,
       rootStyles
     };
@@ -2528,7 +2647,7 @@ function typeValidator$a(type) {
 function sizeValidator$4(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$11 = {
+var props$12 = {
   // loading类型
   type: {
     type: String,
@@ -2557,8 +2676,8 @@ var props$11 = {
   }
 };
 var {
-  n: n$18,
-  classes: classes$X
+  n: n$19,
+  classes: classes$Y
 } = createNamespace("loading");
 var _withScopeId$6 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 var _hoisted_1$q = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
@@ -2699,7 +2818,7 @@ function __render__$19(_ctx, _cache) {
 }
 var __sfc__$1a = vue.defineComponent({
   name: "VarLoading",
-  props: props$11,
+  props: props$12,
   setup(props2, _ref) {
     var {
       slots
@@ -2716,8 +2835,8 @@ var __sfc__$1a = vue.defineComponent({
       return props2.loading;
     });
     return {
-      n: n$18,
-      classes: classes$X,
+      n: n$19,
+      classes: classes$Y,
       multiplySizeUnit,
       loadingTypeDict,
       isShow
@@ -2753,7 +2872,7 @@ function sizeValidator$3(size) {
 function nativeTypeValidator(nativeType) {
   return ["button", "reset", "submit"].includes(nativeType);
 }
-var props$10 = {
+var props$11 = {
   type: {
     type: String,
     validator: typeValidator$9
@@ -2808,9 +2927,9 @@ var props$10 = {
   loadingRadius: {
     type: [Number, String]
   },
-  loadingType: pickProps(props$11, "type"),
-  loadingSize: pickProps(props$11, "size"),
-  loadingColor: _extends$f({}, pickProps(props$11, "color"), {
+  loadingType: pickProps(props$12, "type"),
+  loadingSize: pickProps(props$12, "size"),
+  loadingColor: _extends$f({}, pickProps(props$12, "color"), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
@@ -2846,14 +2965,139 @@ function useButtonGroup() {
     bindButtonGroup: bindParent
   };
 }
+function shouldDisabled(arg) {
+  if (!arg) {
+    return false;
+  }
+  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  if (arg === "desktop" && isMobile) {
+    return true;
+  }
+  if (arg === "mobile" && !isMobile) {
+    return true;
+  }
+  return false;
+}
+function getStyle(element) {
+  var style = element.getAttribute("style");
+  if (!style)
+    return {};
+  return style.split(";").filter(Boolean).reduce((style2, item) => {
+    var [key, value] = item.split(":").map((item2) => item2.trim());
+    style2[camelize(key)] = value;
+    return style2;
+  }, {});
+}
+function updateRawStyle(element) {
+  var {
+    value
+  } = element._hover;
+  var style = getStyle(element);
+  Object.keys(value).forEach((key) => {
+    var camelizedKey = camelize(key);
+    var styleValue = value[camelizedKey];
+    if (styleValue != null && style[camelizedKey]) {
+      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
+    }
+  });
+}
+function updateStyle(element, styleValue) {
+  Object.keys(styleValue).forEach((key) => {
+    var value = styleValue[key];
+    if (value != null) {
+      element.style[key] = value;
+    }
+  });
+}
+function clearStyle(element) {
+  Object.keys(element._hover.value).forEach((key) => {
+    var value = element._hover.value[key];
+    if (value != null) {
+      element.style[key] = "";
+    }
+  });
+}
+function restoreStyle(element) {
+  clearStyle(element);
+  updateStyle(element, element._hover.rawStyle);
+}
+function createHover() {
+  var {
+    value
+  } = this._hover;
+  this._hover.hovering = true;
+  if (isFunction(value)) {
+    value(this._hover.hovering);
+    return;
+  }
+  updateStyle(this, value);
+}
+function removeHover() {
+  this._hover.hovering = false;
+  if (isFunction(this._hover.value)) {
+    this._hover.value(this._hover.hovering);
+    return;
+  }
+  restoreStyle(this);
+}
+function mounted(element, binding) {
+  var _element$_hover$hover, _element$_hover;
+  var {
+    arg,
+    value
+  } = binding;
+  if (shouldDisabled(arg)) {
+    return;
+  }
+  element._hover = {
+    value,
+    hovering: (_element$_hover$hover = (_element$_hover = element._hover) == null ? void 0 : _element$_hover.hovering) != null ? _element$_hover$hover : false,
+    rawStyle: {}
+  };
+  updateRawStyle(element);
+  element.addEventListener("mouseenter", createHover);
+  element.addEventListener("mouseleave", removeHover);
+}
+function unmounted(element, binding) {
+  if (shouldDisabled(binding.arg)) {
+    return;
+  }
+  restoreStyle(element);
+  element.removeEventListener("mouseenter", createHover);
+  element.removeEventListener("mouseleave", removeHover);
+}
+function beforeUpdate(element, binding) {
+  unmounted(element, binding);
+}
+function shouldUpdateStyle(element, binding) {
+  return !isFunction(binding.value) && element._hover.hovering;
+}
+function updated(element, binding) {
+  mounted(element, binding);
+  if (shouldUpdateStyle(element, binding)) {
+    updateStyle(element, binding.value);
+  }
+}
+var Hover = {
+  mounted,
+  unmounted,
+  beforeUpdate,
+  updated,
+  install(app) {
+    app.directive("hover", this);
+  }
+};
+var _HoverComponent = Hover;
+const Hover$1 = Hover;
 var {
-  n: n$17,
-  classes: classes$W
+  n: n$18,
+  classes: classes$X
 } = createNamespace("button");
 var _hoisted_1$p = ["type", "disabled"];
 function __render__$18(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
   var _directive_ripple = vue.resolveDirective("ripple");
+  var _directive_hover = vue.resolveDirective("hover");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "button",
     {
@@ -2893,12 +3137,20 @@ function __render__$18(_ctx, _cache) {
       [vue.renderSlot(_ctx.$slots, "default")],
       2
       /* CLASS */
+    ), vue.createElementVNode(
+      "div",
+      {
+        class: vue.normalizeClass(_ctx.classes(_ctx.n("overlay"), [_ctx.hovering, _ctx.n("--hovering")]))
+      },
+      null,
+      2
+      /* CLASS */
     )],
     46,
     _hoisted_1$p
   )), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
-  }]]);
+  }], [_directive_hover, _ctx.handleHover, "desktop"]]);
 }
 var __sfc__$19 = vue.defineComponent({
   name: "VarButton",
@@ -2906,11 +3158,13 @@ var __sfc__$19 = vue.defineComponent({
     VarLoading: Loading
   },
   directives: {
-    Ripple: Ripple$1
+    Ripple: Ripple$1,
+    Hover: Hover$1
   },
-  props: props$10,
+  props: props$11,
   setup(props2) {
     var pending = vue.ref(false);
+    var hovering = vue.ref(false);
     var {
       buttonGroup: buttonGroup2
     } = useButtonGroup();
@@ -2976,11 +3230,16 @@ var __sfc__$19 = vue.defineComponent({
       }
       attemptAutoLoading(call(onTouchstart, e));
     };
+    var handleHover = (isHover) => {
+      hovering.value = isHover;
+    };
     return {
-      n: n$17,
-      classes: classes$W,
+      n: n$18,
+      classes: classes$X,
       pending,
       states,
+      hovering,
+      handleHover,
       handleClick,
       handleTouchstart
     };
@@ -2992,7 +3251,7 @@ Button.install = function(app) {
   app.component(Button.name, Button);
 };
 var _ButtonComponent = Button;
-var props$$ = {
+var props$10 = {
   visibilityHeight: {
     type: [Number, String],
     default: 200
@@ -3013,8 +3272,8 @@ var props$$ = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$16,
-  classes: classes$V
+  n: n$17,
+  classes: classes$W
 } = createNamespace("back-top");
 function __render__$17(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -3064,7 +3323,7 @@ var __sfc__$18 = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$$,
+  props: props$10,
   setup(props2) {
     var show = vue.ref(false);
     var backTopEl = vue.ref(null);
@@ -3104,8 +3363,8 @@ var __sfc__$18 = vue.defineComponent({
       show,
       backTopEl,
       toSizeUnit,
-      n: n$16,
-      classes: classes$V,
+      n: n$17,
+      classes: classes$W,
       handleClick
     };
   }
@@ -3119,10 +3378,10 @@ var _BackTopComponent = BackTop;
 function typeValidator$8(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-function positionValidator$1(position) {
+function positionValidator$2(position) {
   return ["right-top", "right-bottom", "left-top", "left-bottom"].includes(position);
 }
-var props$_ = {
+var props$$ = {
   // 徽标类型
   type: {
     type: String,
@@ -3156,7 +3415,7 @@ var props$_ = {
   position: {
     type: String,
     default: "right-top",
-    validator: positionValidator$1
+    validator: positionValidator$2
   },
   // 图标
   icon: {
@@ -3164,8 +3423,8 @@ var props$_ = {
   }
 };
 var {
-  n: n$15,
-  classes: classes$U
+  n: n$16,
+  classes: classes$V
 } = createNamespace("badge");
 var _hoisted_1$o = {
   key: 1
@@ -3227,7 +3486,7 @@ var __sfc__$17 = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$_,
+  props: props$$,
   setup(props2, _ref) {
     var {
       slots
@@ -3239,11 +3498,11 @@ var __sfc__$17 = vue.defineComponent({
         dot,
         icon: icon2
       } = props2;
-      var positionBasic = slots.default && n$15("position") + " " + n$15("--" + position);
-      var dotClass = dot ? n$15("dot") : null;
+      var positionBasic = slots.default && n$16("position") + " " + n$16("--" + position);
+      var dotClass = dot ? n$16("dot") : null;
       var positionClass = getPositionClass();
-      var iconClass = icon2 ? n$15("icon") : null;
-      return [n$15("--" + type), positionBasic, dotClass, positionClass, iconClass];
+      var iconClass = icon2 ? n$16("icon") : null;
+      return [n$16("--" + type), positionBasic, dotClass, positionClass, iconClass];
     });
     var values = vue.computed(() => {
       var {
@@ -3265,13 +3524,13 @@ var __sfc__$17 = vue.defineComponent({
       if (!dot)
         return;
       if (position.includes("right"))
-        return n$15("dot--right");
+        return n$16("dot--right");
       if (position.includes("left"))
-        return n$15("dot--left");
+        return n$16("dot--left");
     };
     return {
-      n: n$15,
-      classes: classes$U,
+      n: n$16,
+      classes: classes$V,
       values,
       contentClass
     };
@@ -3283,7 +3542,7 @@ Badge.install = function(app) {
   app.component(Badge.name, Badge);
 };
 var _BadgeComponent = Badge;
-var props$Z = {
+var props$_ = {
   active: {
     type: [Number, String],
     default: 0
@@ -3349,8 +3608,8 @@ function _extends$e() {
   return _extends$e.apply(this, arguments);
 }
 var {
-  n: n$14,
-  classes: classes$T
+  n: n$15,
+  classes: classes$U
 } = createNamespace("bottom-navigation");
 var {
   n: nItem
@@ -3397,7 +3656,7 @@ var __sfc__$16 = vue.defineComponent({
   components: {
     VarButton: Button
   },
-  props: props$Z,
+  props: props$_,
   setup(props2, _ref) {
     var {
       slots
@@ -3525,8 +3784,8 @@ var __sfc__$16 = vue.defineComponent({
       addMarginClass(length.value);
     });
     return {
-      n: n$14,
-      classes: classes$T,
+      n: n$15,
+      classes: classes$U,
       length,
       bottomNavigationDom,
       handleFabClick,
@@ -3540,7 +3799,7 @@ BottomNavigation.install = function(app) {
   app.component(BottomNavigation.name, BottomNavigation);
 };
 var _BottomNavigationComponent = BottomNavigation;
-var props$Y = {
+var props$Z = {
   name: {
     type: String
   },
@@ -3578,8 +3837,8 @@ function useBottomNavigation() {
   };
 }
 var {
-  n: n$13,
-  classes: classes$S
+  n: n$14,
+  classes: classes$T
 } = createNamespace("bottom-navigation-item");
 var defaultBadgeProps = {
   type: "danger",
@@ -3659,7 +3918,7 @@ var __sfc__$15 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$Y,
+  props: props$Z,
   setup(props2) {
     var name = vue.computed(() => props2.name);
     var badge2 = vue.computed(() => props2.badge);
@@ -3694,8 +3953,8 @@ var __sfc__$15 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$13,
-      classes: classes$S,
+      n: n$14,
+      classes: classes$T,
       index,
       active,
       badge: badge2,
@@ -3711,22 +3970,19 @@ BottomNavigationItem.install = function(app) {
   app.component(BottomNavigationItem.name, BottomNavigationItem);
 };
 var _BottomNavigationItemComponent = BottomNavigationItem;
-var props$X = {
+var props$Y = {
   separator: {
     type: String
   },
   onClick: defineListenerProp()
 };
 var BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY = Symbol("BREADCRUMBS_BIND_BREADCRUMB_KEY");
-var BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY = Symbol("BREADCRUMBS_COUNT_BREADCRUMB_KEY");
 function useBreadcrumbsList() {
   var {
     childProviders,
-    bindChildren
-  } = useChildren(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindChildren,
     length
-  } = useAtChildrenCounter(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useChildren$1(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
   return {
     length,
     breadcrumbList: childProviders,
@@ -3736,11 +3992,9 @@ function useBreadcrumbsList() {
 function useBreadcrumb() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useParent$1(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-breadcrumb/> must in <var-breadcrumbs/>");
   }
@@ -3751,8 +4005,8 @@ function useBreadcrumb() {
   };
 }
 var {
-  n: n$12,
-  classes: classes$R
+  n: n$13,
+  classes: classes$S
 } = createNamespace("breadcrumb");
 function __render__$13(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -3791,7 +4045,7 @@ function __render__$13(_ctx, _cache) {
 }
 var __sfc__$14 = vue.defineComponent({
   name: "VarBreadcrumb",
-  props: props$X,
+  props: props$Y,
   setup(props2) {
     var {
       index,
@@ -3808,8 +4062,8 @@ var __sfc__$14 = vue.defineComponent({
     };
     bindBreadcrumb(null);
     return {
-      n: n$12,
-      classes: classes$R,
+      n: n$13,
+      classes: classes$S,
       isLast,
       parentSeparator,
       handleClick
@@ -3822,14 +4076,14 @@ Breadcrumb.install = function(app) {
   app.component(Breadcrumb.name, Breadcrumb);
 };
 var _BreadcrumbComponent = Breadcrumb;
-var props$W = {
+var props$X = {
   separator: {
     type: String,
     default: "/"
   }
 };
 var {
-  n: n$11
+  n: n$12
 } = createNamespace("breadcrumbs");
 function __render__$12(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -3844,7 +4098,7 @@ function __render__$12(_ctx, _cache) {
 }
 var __sfc__$13 = vue.defineComponent({
   name: "VarBreadcrumbs",
-  props: props$W,
+  props: props$X,
   setup(props2) {
     var separator = vue.computed(() => props2.separator);
     var {
@@ -3857,7 +4111,7 @@ var __sfc__$13 = vue.defineComponent({
     };
     bindBreadcrumbList(breadcrumbsProvider);
     return {
-      n: n$11
+      n: n$12
     };
   }
 });
@@ -3876,7 +4130,7 @@ function sizeValidator$2(size) {
 function modeValidator$1(mode) {
   return ["normal", "text", "outline"].includes(mode);
 }
-var props$V = {
+var props$W = {
   type: {
     type: String,
     default: "default",
@@ -3908,8 +4162,8 @@ var props$V = {
   }
 };
 var {
-  n: n$10,
-  classes: classes$Q
+  n: n$11,
+  classes: classes$R
 } = createNamespace("button-group");
 function __render__$11(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -3924,7 +4178,7 @@ function __render__$11(_ctx, _cache) {
 }
 var __sfc__$12 = vue.defineComponent({
   name: "VarButtonGroup",
-  props: props$V,
+  props: props$W,
   setup(props2) {
     var {
       bindButtons
@@ -3939,8 +4193,8 @@ var __sfc__$12 = vue.defineComponent({
     };
     bindButtons(buttonGroupProvider);
     return {
-      n: n$10,
-      classes: classes$Q
+      n: n$11,
+      classes: classes$R
     };
   }
 });
@@ -3953,7 +4207,7 @@ var _ButtonGroupComponent = ButtonGroup;
 function fitValidator$1(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
-var props$U = {
+var props$V = {
   src: {
     type: String
   },
@@ -4036,8 +4290,8 @@ function _asyncToGenerator$a(fn2) {
   };
 }
 var {
-  n: n$$,
-  classes: classes$P
+  n: n$10,
+  classes: classes$Q
 } = createNamespace("card");
 var RIPPLE_DELAY = 500;
 var _hoisted_1$n = ["src", "alt"];
@@ -4216,7 +4470,7 @@ var __sfc__$11 = vue.defineComponent({
     VarIcon: Icon,
     VarButton: Button
   },
-  props: props$U,
+  props: props$V,
   setup(props2) {
     var card2 = vue.ref(null);
     var cardFloater = vue.ref(null);
@@ -4319,8 +4573,8 @@ var __sfc__$11 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$$,
-      classes: classes$P,
+      n: n$10,
+      classes: classes$Q,
       toSizeUnit,
       card: card2,
       cardFloater,
@@ -4350,7 +4604,7 @@ Card.install = function(app) {
   app.component(Card.name, Card);
 };
 var _CardComponent = Card;
-var props$T = {
+var props$U = {
   title: {
     type: [Number, String]
   },
@@ -4386,8 +4640,8 @@ var props$T = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$_,
-  classes: classes$O
+  n: n$$,
+  classes: classes$P
 } = createNamespace("cell");
 function __render__$$(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -4468,7 +4722,7 @@ var __sfc__$10 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$T,
+  props: props$U,
   setup(props2) {
     var borderOffsetStyles = vue.computed(() => {
       if (props2.borderOffset == null) {
@@ -4483,8 +4737,8 @@ var __sfc__$10 = vue.defineComponent({
       call(props2.onClick, e);
     };
     return {
-      n: n$_,
-      classes: classes$O,
+      n: n$$,
+      classes: classes$P,
       toSizeUnit,
       borderOffsetStyles,
       handleClick
@@ -4497,7 +4751,7 @@ Cell.install = function(app) {
   app.component(Cell.name, Cell);
 };
 var _CellComponent = Cell;
-var props$S = {
+var props$T = {
   errorMessage: {
     type: String,
     default: ""
@@ -4508,7 +4762,7 @@ var props$S = {
   }
 };
 var {
-  n: n$Z
+  n: n$_
 } = createNamespace("form-details");
 var _hoisted_1$m = {
   key: 0
@@ -4594,9 +4848,9 @@ function __render__$_(_ctx, _cache) {
 }
 var __sfc__$$ = vue.defineComponent({
   name: "VarFormDetails",
-  props: props$S,
+  props: props$T,
   setup: () => ({
-    n: n$Z
+    n: n$_
   })
 });
 __sfc__$$.render = __render__$_;
@@ -4605,7 +4859,7 @@ FormDetails.install = function(app) {
   app.component(FormDetails.name, FormDetails);
 };
 var _FormDetailsComponent = FormDetails;
-var props$R = {
+var props$S = {
   modelValue: {
     type: [String, Number, Boolean, Object, Array],
     default: false
@@ -4722,8 +4976,8 @@ function useFormItems() {
   };
 }
 var {
-  n: n$Y,
-  classes: classes$N
+  n: n$Z,
+  classes: classes$O
 } = createNamespace("checkbox");
 function __render__$Z(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -4814,7 +5068,7 @@ var __sfc__$_ = vue.defineComponent({
     VarIcon: Icon,
     VarFormDetails: FormDetails
   },
-  props: props$R,
+  props: props$S,
   setup(props2) {
     var value = vue.ref(false);
     var checked = vue.computed(() => value.value === props2.checkedValue);
@@ -4927,8 +5181,8 @@ var __sfc__$_ = vue.defineComponent({
       checkboxGroupErrorMessage: checkboxGroup2 == null ? void 0 : checkboxGroup2.errorMessage,
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
-      n: n$Y,
-      classes: classes$N,
+      n: n$Z,
+      classes: classes$O,
       handleClick,
       toggle,
       reset,
@@ -4943,10 +5197,10 @@ Checkbox.install = function(app) {
   app.component(Checkbox.name, Checkbox);
 };
 var _CheckboxComponent = Checkbox;
-function directionValidator$4(direction) {
+function directionValidator$5(direction) {
   return ["horizontal", "vertical"].includes(direction);
 }
-var props$Q = {
+var props$R = {
   modelValue: {
     type: Array,
     default: () => []
@@ -4957,7 +5211,7 @@ var props$Q = {
   direction: {
     type: String,
     default: "horizontal",
-    validator: directionValidator$4
+    validator: directionValidator$5
   },
   validateTrigger: {
     type: Array,
@@ -4970,8 +5224,8 @@ var props$Q = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$X,
-  classes: classes$M
+  n: n$Y,
+  classes: classes$N
 } = createNamespace("checkbox-group");
 function __render__$Y(_ctx, _cache) {
   var _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -5006,7 +5260,7 @@ var __sfc__$Z = vue.defineComponent({
   components: {
     VarFormDetails: FormDetails
   },
-  props: props$Q,
+  props: props$R,
   setup(props2) {
     var max2 = vue.computed(() => props2.max);
     var checkedCount = vue.computed(() => props2.modelValue.length);
@@ -5119,8 +5373,8 @@ var __sfc__$Z = vue.defineComponent({
     call(bindForm, checkboxGroupProvider);
     return {
       errorMessage,
-      n: n$X,
-      classes: classes$M,
+      n: n$Y,
+      classes: classes$N,
       checkAll: checkAll2,
       inverseAll,
       reset,
@@ -5141,7 +5395,7 @@ function typeValidator$6(type) {
 function sizeValidator$1(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$P = {
+var props$Q = {
   type: {
     type: String,
     default: "default",
@@ -5158,7 +5412,7 @@ var props$P = {
   textColor: {
     type: String
   },
-  iconName: pickProps(props$16, "name"),
+  iconName: pickProps(props$17, "name"),
   plain: {
     type: Boolean,
     default: false
@@ -5178,8 +5432,8 @@ var props$P = {
   onClose: defineListenerProp()
 };
 var {
-  n: n$W,
-  classes: classes$L
+  n: n$X,
+  classes: classes$M
 } = createNamespace("chip");
 function __render__$X(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -5240,7 +5494,7 @@ var __sfc__$Y = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$P,
+  props: props$Q,
   setup(props2) {
     var chipStyles = vue.computed(() => {
       var {
@@ -5267,17 +5521,17 @@ var __sfc__$Y = vue.defineComponent({
         plain,
         round: round2
       } = props2;
-      var blockClass = block ? n$W("$--flex") : n$W("$--inline-flex");
-      var plainTypeClass = plain ? n$W("plain") + " " + n$W("plain-" + type) : n$W("--" + type);
-      var roundClass = round2 ? n$W("--round") : null;
-      return [n$W("--" + size), blockClass, plainTypeClass, roundClass];
+      var blockClass = block ? n$X("$--flex") : n$X("$--inline-flex");
+      var plainTypeClass = plain ? n$X("plain") + " " + n$X("plain-" + type) : n$X("--" + type);
+      var roundClass = round2 ? n$X("--round") : null;
+      return [n$X("--" + size), blockClass, plainTypeClass, roundClass];
     });
     var handleClose = (e) => {
       call(props2.onClose, e);
     };
     return {
-      n: n$W,
-      classes: classes$L,
+      n: n$X,
+      classes: classes$M,
       chipStyles,
       contentClass,
       handleClose
@@ -5290,7 +5544,7 @@ Chip.install = function(app) {
   app.component(Chip.name, Chip);
 };
 var _ChipComponent = Chip;
-function directionValidator$3(direction) {
+function directionValidator$4(direction) {
   return ["row", "column"].includes(direction);
 }
 function justifyValidator$2(justify) {
@@ -5299,7 +5553,7 @@ function justifyValidator$2(justify) {
 function alignValidator$2(align) {
   return ["stretch", "center", "start", "end", "baseline", "initial", "inherit", "flex-start", "flex-end"].includes(align);
 }
-var props$O = {
+var props$P = {
   span: {
     type: [String, Number],
     default: 24
@@ -5311,7 +5565,7 @@ var props$O = {
   direction: {
     type: String,
     default: "row",
-    validator: directionValidator$3
+    validator: directionValidator$4
   },
   justify: {
     type: String,
@@ -5372,8 +5626,8 @@ function useRow() {
   };
 }
 var {
-  n: n$V,
-  classes: classes$K
+  n: n$W,
+  classes: classes$L
 } = createNamespace("col");
 function __render__$W(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -5398,7 +5652,7 @@ function __render__$W(_ctx, _cache) {
 }
 var __sfc__$X = vue.defineComponent({
   name: "VarCol",
-  props: props$O,
+  props: props$P,
   setup(props2) {
     var padding = vue.ref({
       left: 0,
@@ -5425,10 +5679,10 @@ var __sfc__$X = vue.defineComponent({
           offset: _offset,
           span: _span
         } = size;
-        Number(_span) >= 0 && classes2.push(n$V("--span-" + mode + "-" + _span));
-        _offset && classes2.push(n$V("--offset-" + mode + "-" + _offset));
+        Number(_span) >= 0 && classes2.push(n$W("--span-" + mode + "-" + _span));
+        _offset && classes2.push(n$W("--offset-" + mode + "-" + _offset));
       } else {
-        Number(size) >= 0 && classes2.push(n$V("--span-" + mode + "-" + size));
+        Number(size) >= 0 && classes2.push(n$W("--span-" + mode + "-" + size));
       }
       return classes2;
     };
@@ -5440,8 +5694,8 @@ var __sfc__$X = vue.defineComponent({
     });
     call(bindRow, colProvider);
     return {
-      n: n$V,
-      classes: classes$K,
+      n: n$W,
+      classes: classes$L,
       padding,
       toNumber,
       toSizeUnit,
@@ -5475,7 +5729,7 @@ function useCollapseItem() {
     bindCollapseItem: bindChildren
   };
 }
-var props$N = {
+var props$O = {
   modelValue: {
     type: [Array, String, Number]
   },
@@ -5491,7 +5745,7 @@ var props$N = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$U
+  n: n$V
 } = createNamespace("collapse");
 function __render__$V(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -5506,7 +5760,7 @@ function __render__$V(_ctx, _cache) {
 }
 var __sfc__$W = vue.defineComponent({
   name: "VarCollapse",
-  props: props$N,
+  props: props$O,
   setup(props2) {
     var {
       length,
@@ -5599,7 +5853,7 @@ var __sfc__$W = vue.defineComponent({
     vue.watch(() => length.value, () => vue.nextTick().then(resize));
     vue.watch(() => props2.modelValue, () => vue.nextTick().then(resize));
     return {
-      n: n$U
+      n: n$V
     };
   }
 });
@@ -5626,7 +5880,7 @@ function useCollapse() {
     bindCollapse: bindParent
   };
 }
-var props$M = {
+var props$N = {
   name: {
     type: [String, Number]
   },
@@ -5643,8 +5897,8 @@ var props$M = {
   }
 };
 var {
-  n: n$T,
-  classes: classes$J
+  n: n$U,
+  classes: classes$K
 } = createNamespace("collapse-item");
 function __render__$U(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -5725,7 +5979,7 @@ var __sfc__$V = vue.defineComponent({
   components: {
     VarIcon: Icon
   },
-  props: props$M,
+  props: props$N,
   setup(props2) {
     var {
       index,
@@ -5809,9 +6063,9 @@ var __sfc__$V = vue.defineComponent({
         closePanel();
     });
     return {
-      n: n$T,
+      n: n$U,
       start: start2,
-      classes: classes$J,
+      classes: classes$K,
       show,
       isShow,
       offset: offset2,
@@ -5827,7 +6081,7 @@ CollapseItem.install = function(app) {
   app.component(CollapseItem.name, CollapseItem);
 };
 var _CollapseItemComponent = CollapseItem;
-var props$L = {
+var props$M = {
   time: {
     type: [String, Number],
     default: 0
@@ -5844,7 +6098,7 @@ var props$L = {
   onChange: defineListenerProp()
 };
 var {
-  n: n$S
+  n: n$T
 } = createNamespace("countdown");
 var SECOND = 1e3;
 var MINUTE = 60 * SECOND;
@@ -5867,7 +6121,7 @@ function __render__$T(_ctx, _cache) {
 }
 var __sfc__$U = vue.defineComponent({
   name: "VarCountdown",
-  props: props$L,
+  props: props$M,
   setup(props2) {
     var showTime = vue.ref("");
     var timeData = vue.ref({
@@ -5990,7 +6244,7 @@ var __sfc__$U = vue.defineComponent({
     return {
       showTime,
       timeData,
-      n: n$S,
+      n: n$T,
       start: start2,
       pause,
       reset
@@ -8330,7 +8584,7 @@ P[Symbol.toStringTag] = "Decimal";
 var Decimal = P.constructor = clone(DEFAULTS);
 LN10 = new Decimal(LN10);
 PI = new Decimal(PI);
-var props$K = {
+var props$L = {
   modelValue: {
     type: [String, Number],
     default: 0
@@ -8414,8 +8668,8 @@ var props$K = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$R,
-  classes: classes$I
+  n: n$S,
+  classes: classes$J
 } = createNamespace("counter");
 var SPEED = 100;
 var DELAY = 600;
@@ -8522,7 +8776,7 @@ var __sfc__$T = vue.defineComponent({
     Ripple: Ripple$1
   },
   inheritAttrs: false,
-  props: props$K,
+  props: props$L,
   setup(props2) {
     var inputValue = vue.ref("");
     var incrementTimer;
@@ -8730,8 +8984,8 @@ var __sfc__$T = vue.defineComponent({
     });
     setNormalizedValue(normalizeValue(String(props2.modelValue)));
     return {
-      n: n$R,
-      classes: classes$I,
+      n: n$S,
+      classes: classes$J,
       inputValue,
       errorMessage,
       formDisabled,
@@ -9226,7 +9480,7 @@ var WEEK_HEADER = [{
 }, {
   index: "6"
 }];
-var props$J = {
+var props$K = {
   modelValue: {
     type: [String, Array]
   },
@@ -9283,7 +9537,7 @@ var props$J = {
   "onUpdate:modelValue": defineListenerProp()
 };
 var {
-  n: n$Q
+  n: n$R
 } = createNamespace("picker-header");
 function __render__$R(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
@@ -9420,7 +9674,7 @@ var __sfc__$S = vue.defineComponent({
       forwardOrBackNum.value = 0;
     });
     return {
-      n: n$Q,
+      n: n$R,
       reverse,
       showDate,
       checkDate
@@ -9446,8 +9700,8 @@ function _extends$c() {
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$P,
-  classes: classes$H
+  n: n$Q,
+  classes: classes$I
 } = createNamespace("month-picker");
 var {
   n: nDate$1
@@ -9682,12 +9936,12 @@ var __sfc__$R = vue.defineComponent({
         color: !computeText() ? color : "",
         textColor: isCover ? "" : textColorOrCover(),
         [nDate$1() + "-color-cover"]: isCover,
-        class: classes$H(n$P("button"), [disabled, n$P("button--disabled")])
+        class: classes$I(n$Q("button"), [disabled, n$Q("button--disabled")])
       };
     };
     var chooseMonth = (month, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$P("button--disabled")))
+      if (buttonEl.classList.contains(n$Q("button--disabled")))
         return;
       emit("choose-month", month);
     };
@@ -9714,7 +9968,7 @@ var __sfc__$R = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$P,
+      n: n$Q,
       nDate: nDate$1,
       pack,
       MONTH_LIST,
@@ -9733,8 +9987,8 @@ var __sfc__$R = vue.defineComponent({
 __sfc__$R.render = __render__$Q;
 const MonthPickerPanel = __sfc__$R;
 var {
-  n: n$O,
-  classes: classes$G
+  n: n$P,
+  classes: classes$H
 } = createNamespace("year-picker");
 var _hoisted_1$k = ["onClick"];
 function __render__$P(_ctx, _cache) {
@@ -9822,14 +10076,14 @@ var __sfc__$Q = vue.defineComponent({
       emit("choose-year", year);
     };
     useMounted(() => {
-      var activeEl = document.querySelector("." + n$O("item--active"));
+      var activeEl = document.querySelector("." + n$P("item--active"));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: "center"
       });
     });
     return {
-      n: n$O,
-      classes: classes$G,
+      n: n$P,
+      classes: classes$H,
       yearList,
       chooseYear,
       toNumber
@@ -9855,8 +10109,8 @@ function _extends$b() {
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
-  n: n$N,
-  classes: classes$F
+  n: n$O,
+  classes: classes$G
 } = createNamespace("day-picker");
 var {
   n: nDate
@@ -10107,7 +10361,7 @@ var __sfc__$P = vue.defineComponent({
           text: true,
           outline: false,
           textColor: "",
-          class: n$N("button")
+          class: n$O("button")
         };
       }
       var {
@@ -10172,7 +10426,7 @@ var __sfc__$P = vue.defineComponent({
         outline: computeOutline(),
         textColor: isCover ? "" : textColorOrCover(),
         [nDate() + "-color-cover"]: isCover,
-        class: classes$F(n$N("button"), n$N("button--usable"), [disabled, n$N("button--disabled")])
+        class: classes$G(n$O("button"), n$O("button--usable"), [disabled, n$O("button--disabled")])
       };
     };
     var checkDate = (checkType) => {
@@ -10182,7 +10436,7 @@ var __sfc__$P = vue.defineComponent({
     };
     var chooseDay = (day, event) => {
       var buttonEl = event.currentTarget;
-      if (buttonEl.classList.contains(n$N("button--disabled")))
+      if (buttonEl.classList.contains(n$O("button--disabled")))
         return;
       emit("choose-day", day);
     };
@@ -10198,7 +10452,7 @@ var __sfc__$P = vue.defineComponent({
       initHeader();
     });
     return {
-      n: n$N,
+      n: n$O,
       nDate,
       days,
       reverse,
@@ -10218,8 +10472,8 @@ var __sfc__$P = vue.defineComponent({
 __sfc__$P.render = __render__$O;
 const DayPickerPanel = __sfc__$P;
 var {
-  n: n$M,
-  classes: classes$E
+  n: n$N,
+  classes: classes$F
 } = createNamespace("date-picker");
 function __render__$N(_ctx, _cache) {
   var _component_year_picker_panel = vue.resolveComponent("year-picker-panel");
@@ -10410,7 +10664,7 @@ var __sfc__$O = vue.defineComponent({
     YearPickerPanel,
     DayPickerPanel
   },
-  props: props$J,
+  props: props$K,
   setup(props2) {
     var startX = 0;
     var startY = 0;
@@ -10751,8 +11005,8 @@ var __sfc__$O = vue.defineComponent({
     });
     vue.watch(getPanelType, resetState);
     return {
-      n: n$M,
-      classes: classes$E,
+      n: n$N,
+      classes: classes$F,
       monthPanelEl,
       dayPanelEl,
       reverse,
@@ -10805,7 +11059,7 @@ function _extends$a() {
 function messageAlignValidator(messageAlign) {
   return ["left", "center", "right"].includes(messageAlign);
 }
-var props$I = _extends$a({
+var props$J = _extends$a({
   show: {
     type: Boolean,
     default: false
@@ -10860,7 +11114,7 @@ var props$I = _extends$a({
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$17, [
+}, pickProps(props$18, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -10890,8 +11144,8 @@ function _extends$9() {
   return _extends$9.apply(this, arguments);
 }
 var {
-  n: n$L,
-  classes: classes$D
+  n: n$M,
+  classes: classes$E
 } = createNamespace("dialog");
 function __render__$M(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
@@ -11021,7 +11275,7 @@ var __sfc__$N = vue.defineComponent({
     VarButton: Button
   },
   inheritAttrs: false,
-  props: props$I,
+  props: props$J,
   setup(props2) {
     var popupShow = vue.ref(false);
     var popupCloseOnClickOverlay = vue.ref(false);
@@ -11081,8 +11335,8 @@ var __sfc__$N = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$L,
-      classes: classes$D,
+      n: n$M,
+      classes: classes$E,
       pack,
       dt,
       popupShow,
@@ -11192,7 +11446,7 @@ Dialog.install = function(app) {
 };
 Dialog.Component = VarDialog;
 var _DialogComponent = VarDialog;
-var props$H = {
+var props$I = {
   inset: {
     type: [Boolean, Number, String],
     default: false
@@ -11231,8 +11485,8 @@ function _extends$7() {
   return _extends$7.apply(this, arguments);
 }
 var {
-  n: n$K,
-  classes: classes$C
+  n: n$L,
+  classes: classes$D
 } = createNamespace("divider");
 function __render__$L(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -11257,7 +11511,7 @@ function __render__$L(_ctx, _cache) {
 }
 var __sfc__$M = vue.defineComponent({
   name: "VarDivider",
-  props: props$H,
+  props: props$I,
   setup(props2, _ref) {
     var {
       slots
@@ -11299,8 +11553,8 @@ var __sfc__$M = vue.defineComponent({
       checkHasText();
     });
     return _extends$7({
-      n: n$K,
-      classes: classes$C
+      n: n$L,
+      classes: classes$D
     }, vue.toRefs(state), {
       style,
       isInset
@@ -12847,7 +13101,9 @@ function usePopover(options) {
   });
   vue.watch(() => options.disabled, close2);
   vue.onMounted(() => {
-    popoverInstance = createPopper(host.value, popover.value, getPopperOptions());
+    var _host$value;
+    var reference2 = options.reference ? (_host$value = host.value) == null ? void 0 : _host$value.querySelector(options.reference) : host.value;
+    popoverInstance = createPopper(reference2 != null ? reference2 : host.value, popover.value, getPopperOptions());
   });
   vue.onUnmounted(() => {
     popoverInstance.destroy();
@@ -12869,7 +13125,7 @@ function usePopover(options) {
     close: close2
   };
 }
-function triggerValidator$1(trigger) {
+function triggerValidator$2(trigger) {
   return ["click", "hover"].includes(trigger);
 }
 function placementValidator$1(alignment) {
@@ -12878,7 +13134,7 @@ function placementValidator$1(alignment) {
 function typeValidator$4(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-var props$G = {
+var props$H = {
   type: {
     type: String,
     default: "default",
@@ -12901,7 +13157,10 @@ var props$G = {
   trigger: {
     type: String,
     default: "hover",
-    validator: triggerValidator$1
+    validator: triggerValidator$2
+  },
+  reference: {
+    type: String
   },
   placement: {
     type: String,
@@ -12931,8 +13190,8 @@ var props$G = {
   "onUpdate:show": defineListenerProp()
 };
 var {
-  n: n$J,
-  classes: classes$B
+  n: n$K,
+  classes: classes$C
 } = createNamespace("tooltip");
 function __render__$K(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
@@ -13015,7 +13274,7 @@ function __render__$K(_ctx, _cache) {
 }
 var __sfc__$L = vue.defineComponent({
   name: "VarTooltip",
-  props: props$G,
+  props: props$H,
   setup(props2) {
     var {
       popover,
@@ -13043,8 +13302,8 @@ var __sfc__$L = vue.defineComponent({
       hostSize,
       show,
       zIndex,
-      n: n$J,
-      classes: classes$B,
+      n: n$K,
+      classes: classes$C,
       handleHostClick,
       handlePopoverClose,
       handleHostMouseenter,
@@ -13066,7 +13325,7 @@ var _TooltipComponent = Tooltip;
 function expandTriggerValidator(expandTrigger) {
   return ["click"].includes(expandTrigger);
 }
-var props$F = {
+var props$G = {
   expandTrigger: {
     type: String,
     validator: expandTriggerValidator
@@ -13094,8 +13353,8 @@ function _extends$5() {
   return _extends$5.apply(this, arguments);
 }
 var {
-  n: n$I,
-  classes: classes$A
+  n: n$J,
+  classes: classes$B
 } = createNamespace("ellipsis");
 var _hoisted_1$j = {
   key: 0
@@ -13143,54 +13402,295 @@ var __sfc__$K = vue.defineComponent({
   components: {
     VarTooltip: Tooltip
   },
+  props: props$G,
+  setup(props2) {
+    var expanding = vue.ref(false);
+    var rootStyles = vue.computed(() => {
+      if (!props2.lineClamp) {
+        return {};
+      }
+      return {
+        "-webkit-line-clamp": props2.lineClamp
+      };
+    });
+    var tooltip2 = vue.computed(() => {
+      if (props2.tooltip === false) {
+        return {
+          disabled: true
+        };
+      }
+      if (props2.tooltip === true) {
+        return {
+          sameWidth: true
+        };
+      }
+      return _extends$5({
+        sameWidth: true
+      }, props2.tooltip);
+    });
+    var handleClick = () => {
+      if (!props2.expandTrigger) {
+        return;
+      }
+      expanding.value = !expanding.value;
+    };
+    return {
+      n: n$J,
+      classes: classes$B,
+      tooltip: tooltip2,
+      expanding,
+      rootStyles,
+      handleClick
+    };
+  }
+});
+__sfc__$K.render = __render__$J;
+const Ellipsis = __sfc__$K;
+Ellipsis.install = function(app) {
+  app.component(Ellipsis.name, Ellipsis);
+};
+var _EllipsisComponent = Ellipsis;
+function positionValidator$1(position) {
+  return ["left-top", "right-top", "left-bottom", "right-bottom"].includes(position);
+}
+function directionValidator$3(direction) {
+  return ["top", "right", "bottom", "left"].includes(direction);
+}
+function triggerValidator$1(trigger) {
+  return ["click", "hover"].includes(trigger);
+}
+var props$F = {
+  active: {
+    type: Boolean,
+    default: false
+  },
+  show: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String,
+    default: "primary",
+    validator: typeValidator$9
+  },
+  position: {
+    type: String,
+    default: "right-bottom",
+    validator: positionValidator$1
+  },
+  direction: {
+    type: String,
+    default: "top",
+    validator: directionValidator$3
+  },
+  trigger: {
+    type: String,
+    default: "click",
+    validator: triggerValidator$1
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String
+  },
+  inactiveIcon: {
+    type: String,
+    default: "plus"
+  },
+  activeIcon: {
+    type: String,
+    default: "window-close"
+  },
+  inactiveIconSize: {
+    type: [Number, String]
+  },
+  activeIconSize: {
+    type: [Number, String]
+  },
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  top: {
+    type: [Number, String]
+  },
+  bottom: {
+    type: [Number, String]
+  },
+  left: {
+    type: [Number, String]
+  },
+  right: {
+    type: [Number, String]
+  },
+  teleport: {
+    type: String
+  },
+  onClick: defineListenerProp(),
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  "onUpdate:active": defineListenerProp()
+};
+function _isSlot$2(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+var {
+  classes: classes$A,
+  n: n$I
+} = createNamespace("fab");
+const Fab = vue.defineComponent({
+  name: "VarFab",
+  inheritAttrs: false,
   props: props$F,
-  setup(props2) {
-    var expanding = vue.ref(false);
-    var rootStyles = vue.computed(() => {
-      if (!props2.lineClamp) {
-        return {};
+  setup(props2, _ref) {
+    var {
+      slots,
+      attrs
+    } = _ref;
+    var localActive = vue.ref(false);
+    var host = vue.ref(null);
+    var {
+      disabled
+    } = useTeleport();
+    var isActive = vue.computed({
+      get() {
+        return localActive.value;
+      },
+      set(value) {
+        localActive.value = value;
+        call(props2["onUpdate:active"], value);
       }
-      return {
-        "-webkit-line-clamp": props2.lineClamp
-      };
     });
-    var tooltip2 = vue.computed(() => {
-      if (props2.tooltip === false) {
-        return {
-          disabled: true
-        };
+    var handleClick = (e, value, childrenLength) => {
+      e.stopPropagation();
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
       }
-      if (props2.tooltip === true) {
-        return {
-          sameWidth: true
-        };
+      if (childrenLength === 0) {
+        call(props2.onClick, isActive.value, e);
+        return;
       }
-      return _extends$5({
-        sameWidth: true
-      }, props2.tooltip);
-    });
-    var handleClick = () => {
-      if (!props2.expandTrigger) {
+      isActive.value = value;
+      call(props2.onClick, isActive.value, e);
+      call(isActive.value ? props2.onOpen : props2.onClose);
+    };
+    var handleMouse = (value, childrenLength) => {
+      if (props2.trigger !== "hover" || props2.disabled || childrenLength === 0) {
         return;
       }
-      expanding.value = !expanding.value;
+      isActive.value = value;
+      call(isActive.value ? props2.onOpen : props2.onClose);
     };
-    return {
-      n: n$I,
-      classes: classes$A,
-      tooltip: tooltip2,
-      expanding,
-      rootStyles,
-      handleClick
+    var handleClickOutside = () => {
+      if (props2.trigger !== "click" || props2.disabled) {
+        return;
+      }
+      if (isActive.value !== false) {
+        isActive.value = false;
+        call(props2.onClose);
+      }
+    };
+    var renderTrigger = () => {
+      if (slots.trigger) {
+        return props2.show ? slots.trigger({
+          active: isActive.value
+        }) : null;
+      }
+      return vue.withDirectives(vue.createVNode(Button, {
+        "var-fab-cover": true,
+        "class": n$I("trigger"),
+        "type": props2.type,
+        "color": props2.color,
+        "disabled": props2.disabled,
+        "round": true
+      }, {
+        default: () => [vue.createVNode(Icon, {
+          "var-fab-cover": true,
+          "class": classes$A([isActive.value, n$I("trigger-active-icon"), n$I("trigger-inactive-icon")]),
+          "name": isActive.value ? props2.activeIcon : props2.inactiveIcon,
+          "size": isActive.value ? props2.inactiveIconSize : props2.activeIconSize,
+          "transition": 200,
+          "animationClass": n$I("--trigger-icon-animation")
+        }, null)]
+      }), [[vue.vShow, props2.show]]);
+    };
+    var renderFab = () => {
+      var _slot;
+      var _slots$default;
+      var children = flatFragment((_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : []);
+      return vue.createVNode("div", vue.mergeProps({
+        "class": classes$A(n$I(), n$I("--position-" + props2.position), n$I("--direction-" + props2.direction), [props2.fixed, n$I("--fixed"), n$I("--absolute")]),
+        "style": {
+          zIndex: toNumber(props2.zIndex),
+          top: toSizeUnit(props2.top),
+          bottom: toSizeUnit(props2.bottom),
+          left: toSizeUnit(props2.left),
+          right: toSizeUnit(props2.right)
+        },
+        "ref": host,
+        "onClick": (e) => handleClick(e, !isActive.value, children.length),
+        "onMouseleave": () => handleMouse(false, children.length),
+        "onMouseenter": () => handleMouse(true, children.length)
+      }, attrs), [vue.createVNode(vue.Transition, {
+        "name": n$I("--active-transition")
+      }, _isSlot$2(_slot = renderTrigger()) ? _slot : {
+        default: () => [_slot]
+      }), vue.createVNode(vue.Transition, {
+        "name": n$I("--actions-transition-" + props2.direction),
+        "onAfterEnter": props2.onOpened,
+        "onAfterLeave": props2.onClosed
+      }, {
+        default: () => [vue.withDirectives(vue.createVNode("div", {
+          "class": n$I("actions"),
+          "onClick": (e) => e.stopPropagation()
+        }, [children.map((child) => {
+          return vue.createVNode("div", {
+            "class": n$I("action")
+          }, [child]);
+        })]), [[vue.vShow, props2.show && isActive.value && children.length]])]
+      })]);
+    };
+    vue.watch(() => props2.active, (value) => {
+      localActive.value = value;
+    }, {
+      immediate: true
+    });
+    vue.watch(() => props2.trigger, () => {
+      isActive.value = false;
+    });
+    vue.watch(() => props2.disabled, () => {
+      isActive.value = false;
+    });
+    useClickOutside(host, "click", handleClickOutside);
+    return () => {
+      var {
+        teleport
+      } = props2;
+      if (teleport) {
+        var _slot2;
+        return vue.createVNode(vue.Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot$2(_slot2 = renderFab()) ? _slot2 : {
+          default: () => [_slot2]
+        });
+      }
+      return renderFab();
     };
   }
 });
-__sfc__$K.render = __render__$J;
-const Ellipsis = __sfc__$K;
-Ellipsis.install = function(app) {
-  app.component(Ellipsis.name, Ellipsis);
+Fab.install = function(app) {
+  app.component(Fab.name, Fab);
 };
-var _EllipsisComponent = Ellipsis;
+var _FabComponent = Fab;
 function scrollToErrorValidator(status) {
   return ["start", "end"].includes(status);
 }
@@ -13333,128 +13833,6 @@ Form.install = function(app) {
 Form.useValidation = useValidation;
 Form.useForm = useForm;
 var _FormComponent = Form;
-function shouldDisabled(arg) {
-  if (!arg) {
-    return false;
-  }
-  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  if (arg === "desktop" && isMobile) {
-    return true;
-  }
-  if (arg === "mobile" && !isMobile) {
-    return true;
-  }
-  return false;
-}
-function getStyle(element) {
-  var style = element.getAttribute("style");
-  if (!style)
-    return {};
-  return style.split(";").filter(Boolean).reduce((style2, item) => {
-    var [key, value] = item.split(":").map((item2) => item2.trim());
-    style2[camelize(key)] = value;
-    return style2;
-  }, {});
-}
-function updateRawStyle(element) {
-  var {
-    value
-  } = element._hover;
-  var style = getStyle(element);
-  Object.keys(value).forEach((key) => {
-    var camelizedKey = camelize(key);
-    var styleValue = value[camelizedKey];
-    if (styleValue != null && style[camelizedKey]) {
-      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
-    }
-  });
-}
-function updateStyle(element, styleValue) {
-  Object.keys(styleValue).forEach((key) => {
-    var value = styleValue[key];
-    if (value != null) {
-      element.style[key] = value;
-    }
-  });
-}
-function clearStyle(element) {
-  Object.keys(element._hover.value).forEach((key) => {
-    element.style[key] = "";
-  });
-}
-function restoreStyle(element) {
-  clearStyle(element);
-  updateStyle(element, element._hover.rawStyle);
-  element._hover.rawStyle = {};
-}
-function createHover() {
-  var {
-    value
-  } = this._hover;
-  this._hover.hovering = true;
-  if (isFunction(value)) {
-    value(this._hover.hovering);
-    return;
-  }
-  updateStyle(this, value);
-}
-function removeHover() {
-  this._hover.hovering = false;
-  if (isFunction(this._hover.value)) {
-    this._hover.value(this._hover.hovering);
-    return;
-  }
-  restoreStyle(this);
-}
-function mounted(element, binding) {
-  var _element$_hover$hover, _element$_hover;
-  var {
-    arg,
-    value
-  } = binding;
-  if (shouldDisabled(arg)) {
-    return;
-  }
-  element._hover = {
-    value,
-    hovering: (_element$_hover$hover = (_element$_hover = element._hover) == null ? void 0 : _element$_hover.hovering) != null ? _element$_hover$hover : false,
-    rawStyle: {}
-  };
-  updateRawStyle(element);
-  element.addEventListener("mouseenter", createHover);
-  element.addEventListener("mouseleave", removeHover);
-}
-function unmounted(element, binding) {
-  if (shouldDisabled(binding.arg)) {
-    return;
-  }
-  restoreStyle(element);
-  element.removeEventListener("mouseenter", createHover);
-  element.removeEventListener("mouseleave", removeHover);
-}
-function beforeUpdate(element, binding) {
-  unmounted(element, binding);
-}
-function shouldUpdateStyle(element, binding) {
-  return !isFunction(binding.value) && element._hover.hovering;
-}
-function updated(element, binding) {
-  mounted(element, binding);
-  if (shouldUpdateStyle(element, binding)) {
-    updateStyle(element, binding.value);
-  }
-}
-var Hover = {
-  mounted,
-  unmounted,
-  beforeUpdate,
-  updated,
-  install(app) {
-    app.directive("hover", this);
-  }
-};
-var _HoverComponent = Hover;
-const Hover$1 = Hover;
 function fitValidator(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
@@ -14197,7 +14575,7 @@ var props$B = _extends$4({
     default: false
   },
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$17, [
+}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$18, [
   "lockScroll",
   "teleport",
   "onOpen",
@@ -16225,6 +16603,9 @@ var props$s = {
     default: "click",
     validator: triggerValidator
   },
+  reference: {
+    type: String
+  },
   placement: {
     type: String,
     default: "cover-top-start",
@@ -16495,7 +16876,8 @@ var __sfc__$x = vue.defineComponent({
       wrapWidth,
       multiple,
       focusColor,
-      onSelect
+      onSelect,
+      computeLabel
     } = select2;
     var handleClick = () => {
       optionSelected.value = !optionSelected.value;
@@ -16511,13 +16893,7 @@ var __sfc__$x = vue.defineComponent({
       selected,
       sync
     };
-    vue.watch([() => props2.label, () => props2.value], () => {
-      if (props2.label == null && props2.value == null) {
-        throw Error("Props label and value can't both be undefined\n");
-      }
-    }, {
-      immediate: true
-    });
+    vue.watch([() => props2.label, () => props2.value], computeLabel);
     bindSelect(optionProvider);
     return {
       n: n$u,
@@ -17208,7 +17584,7 @@ var props$n = _extends$3({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(props$17, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
+}, pickProps(props$18, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
   n: n$q,
   classes: classes$l
@@ -19942,6 +20318,7 @@ var __sfc__$g = vue.defineComponent({
       wrapWidth: vue.computed(() => wrapWidth.value),
       multiple,
       focusColor,
+      computeLabel,
       onSelect,
       reset,
       validate,
@@ -20759,10 +21136,10 @@ var props$c = {
     type: Boolean,
     default: false
   },
-  loadingType: pickProps(props$11, "type"),
-  loadingSize: pickProps(props$11, "size"),
-  loadingRadius: pickProps(props$11, "radius"),
-  loadingColor: _extends$2({}, pickProps(props$11, "color"), {
+  loadingType: pickProps(props$12, "type"),
+  loadingSize: pickProps(props$12, "size"),
+  loadingRadius: pickProps(props$12, "radius"),
+  loadingColor: _extends$2({}, pickProps(props$12, "color"), {
     default: "currentColor"
   }),
   // 是否禁止滚动穿透
@@ -21315,22 +21692,7 @@ const Space = vue.defineComponent({
       var children = (_call = call(slots.default)) != null ? _call : [];
       var isInternalSize = internalSizeValidator(size);
       var [y, x] = getSize(size, isInternalSize);
-      var flatten = (vNodes) => {
-        var result2 = [];
-        vNodes.forEach((vNode) => {
-          if (vNode.type === vue.Comment)
-            return;
-          if (vNode.type === vue.Fragment && isArray(vNode.children)) {
-            vNode.children.forEach((item) => {
-              result2.push(item);
-            });
-            return;
-          }
-          result2.push(vNode);
-        });
-        return result2;
-      };
-      children = flatten(children);
+      children = flatFragment(children);
       var lastIndex = children.length - 1;
       var spacers = children.map((child, index) => {
         var margin = computeMargin(y, x, {
@@ -21948,15 +22310,12 @@ var props$6 = {
   onClick: defineListenerProp()
 };
 var TABS_BIND_TAB_KEY = Symbol("TABS_BIND_TAB_KEY");
-var TABS_COUNT_TAB_KEY = Symbol("TABS_COUNT_TAB_KEY");
 function useTabList() {
   var {
     childProviders,
-    bindChildren
-  } = useChildren(TABS_BIND_TAB_KEY);
-  var {
+    bindChildren,
     length
-  } = useAtChildrenCounter(TABS_COUNT_TAB_KEY);
+  } = useChildren$1(TABS_BIND_TAB_KEY);
   return {
     length,
     tabList: childProviders,
@@ -21966,11 +22325,9 @@ function useTabList() {
 function useTabs() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(TABS_BIND_TAB_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(TABS_COUNT_TAB_KEY);
+  } = useParent$1(TABS_BIND_TAB_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-tab/> must in <var-tabs/>");
   }
@@ -22086,15 +22443,12 @@ Tab.install = function(app) {
 };
 var _TabComponent = Tab;
 var TABS_ITEMS_BIND_TAB_ITEM_KEY = Symbol("TABS_ITEMS_BIND_TAB_ITEM_KEY");
-var TABS_ITEMS_COUNT_TAB_ITEM_KEY = Symbol("TABS_ITEMS_COUNT_TAB_ITEM_KEY");
 function useTabItem() {
   var {
     bindChildren,
-    childProviders
-  } = useChildren(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  var {
+    childProviders,
     length
-  } = useAtChildrenCounter(TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+  } = useChildren$1(TABS_ITEMS_BIND_TAB_ITEM_KEY);
   return {
     length,
     tabItemList: childProviders,
@@ -22104,11 +22458,9 @@ function useTabItem() {
 function useTabsItems() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+  } = useParent$1(TABS_ITEMS_BIND_TAB_ITEM_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-tab-item/> must in <var-tabs-items/>");
   }
@@ -24440,6 +24792,7 @@ const DividerSfc = "";
 const tooltip = "";
 const ellipsis = "";
 const EllipsisSfc = "";
+const fab = "";
 const FormSfc = "";
 const FormDetailsSfc = "";
 const IconSfc = "";
@@ -24492,9 +24845,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
-const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
+const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -24519,7 +24872,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.8.6";
+const version = "2.9.0-alpha.1678371604765";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -24548,6 +24901,7 @@ function install(app) {
   Dialog.install && app.use(Dialog);
   Divider.install && app.use(Divider);
   Ellipsis.install && app.use(Ellipsis);
+  Fab.install && app.use(Fab);
   Form.install && app.use(Form);
   FormDetails.install && app.use(FormDetails);
   Hover$1.install && app.use(Hover$1);
@@ -24630,6 +24984,7 @@ const index_bundle = {
   Dialog,
   Divider,
   Ellipsis,
+  Fab,
   Form,
   FormDetails,
   Hover: Hover$1,
@@ -24709,6 +25064,7 @@ exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Divider = Divider;
 exports.Ellipsis = Ellipsis;
+exports.Fab = Fab;
 exports.Form = Form;
 exports.FormDetails = FormDetails;
 exports.Hover = Hover$1;
@@ -24789,6 +25145,7 @@ exports._DatePickerComponent = _DatePickerComponent;
 exports._DialogComponent = _DialogComponent;
 exports._DividerComponent = _DividerComponent;
 exports._EllipsisComponent = _EllipsisComponent;
+exports._FabComponent = _FabComponent;
 exports._FormComponent = _FormComponent;
 exports._FormDetailsComponent = _FormDetailsComponent;
 exports._HoverComponent = _HoverComponent;
@@ -24840,37 +25197,37 @@ exports._ThemesComponent = _ThemesComponent;
 exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
-exports.actionSheetProps = props$15;
+exports.actionSheetProps = props$16;
 exports.add = add$2;
-exports.appBarProps = props$14;
-exports.avatarGroupProps = props$12;
-exports.avatarProps = props$13;
-exports.backTopProps = props$$;
-exports.badgeProps = props$_;
-exports.bottomNavigationItemProps = props$Y;
-exports.bottomNavigationProps = props$Z;
-exports.breadcrumbProps = props$X;
-exports.breadcrumbsProps = props$W;
-exports.buttonProps = props$10;
-exports.cardProps = props$U;
-exports.cellProps = props$T;
-exports.checkboxGroupProps = props$Q;
-exports.checkboxProps = props$R;
-exports.chipProps = props$P;
-exports.colProps = props$O;
-exports.collapseItemProps = props$M;
-exports.collapseProps = props$N;
-exports.countdownProps = props$L;
-exports.counterProps = props$K;
-exports.datePickerProps = props$J;
+exports.appBarProps = props$15;
+exports.avatarGroupProps = props$13;
+exports.avatarProps = props$14;
+exports.backTopProps = props$10;
+exports.badgeProps = props$$;
+exports.bottomNavigationItemProps = props$Z;
+exports.bottomNavigationProps = props$_;
+exports.breadcrumbProps = props$Y;
+exports.breadcrumbsProps = props$X;
+exports.buttonProps = props$11;
+exports.cardProps = props$V;
+exports.cellProps = props$U;
+exports.checkboxGroupProps = props$R;
+exports.checkboxProps = props$S;
+exports.chipProps = props$Q;
+exports.colProps = props$P;
+exports.collapseItemProps = props$N;
+exports.collapseProps = props$O;
+exports.countdownProps = props$M;
+exports.counterProps = props$L;
+exports.datePickerProps = props$K;
 exports.default = index_bundle;
 exports.defaultLazyOptions = defaultLazyOptions;
-exports.dialogProps = props$I;
-exports.dividerProps = props$H;
+exports.dialogProps = props$J;
+exports.dividerProps = props$I;
 exports.enUS = enUS;
-exports.formDetailsProps = props$S;
+exports.formDetailsProps = props$T;
 exports.formProps = props$E;
-exports.iconProps = props$16;
+exports.iconProps = props$17;
 exports.imageCache = imageCache;
 exports.imagePreviewProps = props$B;
 exports.imageProps = props$D;
@@ -24881,7 +25238,7 @@ exports.install = install;
 exports.linkProps = props$w;
 exports.listProps = props$v;
 exports.loadingBarProps = props$u;
-exports.loadingProps = props$11;
+exports.loadingProps = props$12;
 exports.menuProps = props$s;
 exports.merge = merge;
 exports.optionProps = props$r;
@@ -24891,7 +25248,7 @@ exports.packs = packs;
 exports.paginationProps = props$p;
 exports.paperProps = props$o;
 exports.pickerProps = props$n;
-exports.popupProps = props$17;
+exports.popupProps = props$18;
 exports.progressProps = props$m;
 exports.pullRefreshProps = props$l;
 exports.radioGroupProps = props$j;
@@ -24916,7 +25273,7 @@ exports.tableProps = props$4;
 exports.tabsItemsProps = props$2;
 exports.tabsProps = props$3;
 exports.timePickerProps = props$1;
-exports.tooltipProps = props$G;
+exports.tooltipProps = props$H;
 exports.uploaderProps = props;
 exports.use = use;
 exports.useLocale = useLocale;