@varlet/ui 2.8.1 → 2.8.2

package/lib/varlet.cjs.js

@@ -700,7 +700,7 @@ function _extends$l() {
   return _extends$l.apply(this, arguments);
 }
 var {
-  n: n$1e
+  n: n$1f
 } = createNamespace("ripple");
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -755,7 +755,7 @@ function createRipple(event) {
       size
     } = computeRippleStyles(this, event);
     var ripple2 = document.createElement("div");
-    ripple2.classList.add(n$1e());
+    ripple2.classList.add(n$1f());
     ripple2.style.opacity = "0";
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
@@ -774,7 +774,7 @@ function createRipple(event) {
 function removeRipple() {
   var _ripple = this._ripple;
   var task = () => {
-    var ripples = this.querySelectorAll("." + n$1e());
+    var ripples = this.querySelectorAll("." + n$1f());
     if (!ripples.length) {
       return;
     }
@@ -861,7 +861,7 @@ const Ripple$1 = Ripple;
 function positionValidator$3(position) {
   return ["top", "bottom", "right", "left", "center"].includes(position);
 }
-var props$16 = {
+var props$17 = {
   show: {
     type: Boolean,
     default: false
@@ -1008,13 +1008,13 @@ function _isSlot$2(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
 }
 var {
-  n: n$1d,
-  classes: classes$10
+  n: n$1e,
+  classes: classes$11
 } = createNamespace("popup");
 const Popup = vue.defineComponent({
   name: "VarPopup",
   inheritAttrs: false,
-  props: props$16,
+  props: props$17,
   setup(props2, _ref) {
     var {
       slots,
@@ -1048,7 +1048,7 @@ const Popup = vue.defineComponent({
         overlayStyle
       } = props2;
       return vue.createVNode("div", {
-        "class": classes$10(n$1d("overlay"), overlayClass),
+        "class": classes$11(n$1e("overlay"), overlayClass),
         "style": _extends$k({
           zIndex: zIndex.value - 1
         }, overlayStyle),
@@ -1057,7 +1057,7 @@ const Popup = vue.defineComponent({
     };
     var renderContent = () => {
       return vue.createVNode("div", vue.mergeProps({
-        "class": classes$10(n$1d("content"), n$1d("--" + props2.position), [props2.defaultStyle, n$1d("--content-background-color")], [props2.defaultStyle, n$1d("$-elevation--3")]),
+        "class": classes$11(n$1e("content"), n$1e("--" + props2.position), [props2.defaultStyle, n$1e("--content-background-color")], [props2.defaultStyle, n$1e("$-elevation--3")]),
         "style": {
           zIndex: zIndex.value
         }
@@ -1073,17 +1073,17 @@ const Popup = vue.defineComponent({
         position
       } = props2;
       return vue.createVNode(vue.Transition, {
-        "name": n$1d("$-fade"),
+        "name": n$1e("$-fade"),
         "onAfterEnter": onOpened,
         "onAfterLeave": onClosed
       }, {
         default: () => [vue.withDirectives(vue.createVNode("div", {
-          "class": classes$10(n$1d("$--box"), n$1d()),
+          "class": classes$11(n$1e("$--box"), n$1e()),
           "style": {
             zIndex: zIndex.value - 2
           }
         }, [overlay2 && renderOverlay(), vue.createVNode(vue.Transition, {
-          "name": transition || n$1d("$-pop-" + position)
+          "name": transition || n$1e("$-pop-" + position)
         }, {
           default: () => [show && renderContent()]
         })]), [[vue.vShow, show]])]
@@ -1110,7 +1110,7 @@ Popup.install = function(app) {
   app.component(Popup.name, Popup);
 };
 var _PopupComponent = Popup;
-var props$15 = {
+var props$16 = {
   name: {
     type: String
   },
@@ -1160,10 +1160,10 @@ function _asyncToGenerator$c(fn2) {
   };
 }
 var {
-  n: n$1c,
-  classes: classes$$
+  n: n$1d,
+  classes: classes$10
 } = createNamespace("icon");
-function __render__$1d(_ctx, _cache) {
+function __render__$1e(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"),
     {
@@ -1183,9 +1183,9 @@ function __render__$1d(_ctx, _cache) {
     ["class", "style", "src", "onClick"]
   );
 }
-var __sfc__$1e = vue.defineComponent({
+var __sfc__$1f = vue.defineComponent({
   name: "VarIcon",
-  props: props$15,
+  props: props$16,
   setup(props2) {
     var nextName = vue.ref("");
     var shrinking = vue.ref(false);
@@ -1213,8 +1213,8 @@ var __sfc__$1e = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1c,
-      classes: classes$$,
+      n: n$1d,
+      classes: classes$10,
       nextName,
       shrinking,
       isURL,
@@ -1223,8 +1223,8 @@ var __sfc__$1e = vue.defineComponent({
     };
   }
 });
-__sfc__$1e.render = __render__$1d;
-const Icon = __sfc__$1e;
+__sfc__$1f.render = __render__$1e;
+const Icon = __sfc__$1f;
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
@@ -1243,7 +1243,7 @@ function _extends$j() {
   };
   return _extends$j.apply(this, arguments);
 }
-var props$14 = _extends$j({
+var props$15 = _extends$j({
   show: {
     type: Boolean,
     default: false
@@ -1261,7 +1261,7 @@ var props$14 = _extends$j({
   },
   onSelect: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$16, [
+}, pickProps(props$17, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -1554,11 +1554,11 @@ const Locale = {
   useLocale
 };
 var {
-  n: n$1b,
-  classes: classes$_
+  n: n$1c,
+  classes: classes$$
 } = createNamespace("action-sheet");
 var _hoisted_1$s = ["onClick"];
-function __render__$1c(_ctx, _cache) {
+function __render__$1d(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_popup = vue.resolveComponent("var-popup");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -1651,7 +1651,7 @@ function __render__$1c(_ctx, _cache) {
     ["class", "overlay", "overlay-class", "overlay-style", "lock-scroll", "close-on-click-overlay", "teleport", "show", "onOpen", "onClose", "onClosed", "onOpened", "onRouteChange"]
   );
 }
-var __sfc__$1d = vue.defineComponent({
+var __sfc__$1e = vue.defineComponent({
   name: "VarActionSheet",
   directives: {
     Ripple: Ripple$1
@@ -1661,7 +1661,7 @@ var __sfc__$1d = vue.defineComponent({
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$14,
+  props: props$15,
   setup(props2) {
     var popupShow = vue.ref(false);
     var handleSelect = (action) => {
@@ -1682,8 +1682,8 @@ var __sfc__$1d = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$1b,
-      classes: classes$_,
+      n: n$1c,
+      classes: classes$$,
       handlePopupUpdateShow,
       popupShow,
       pack,
@@ -1692,8 +1692,8 @@ var __sfc__$1d = vue.defineComponent({
     };
   }
 });
-__sfc__$1d.render = __render__$1c;
-const VarActionSheet = __sfc__$1d;
+__sfc__$1e.render = __render__$1d;
+const VarActionSheet = __sfc__$1e;
 function _extends$h() {
   _extends$h = Object.assign ? Object.assign.bind() : function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -1784,7 +1784,7 @@ function positionValidator$2(position) {
   var validPositions = ["left", "center", "right"];
   return validPositions.includes(position);
 }
-var props$13 = {
+var props$14 = {
   color: {
     type: String
   },
@@ -1815,10 +1815,10 @@ var props$13 = {
   }
 };
 var {
-  n: n$1a,
-  classes: classes$Z
+  n: n$1b,
+  classes: classes$_
 } = createNamespace("app-bar");
-function __render__$1b(_ctx, _cache) {
+function __render__$1c(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -1899,9 +1899,9 @@ function __render__$1b(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1c = vue.defineComponent({
+var __sfc__$1d = vue.defineComponent({
   name: "VarAppBar",
-  props: props$13,
+  props: props$14,
   setup(props2, _ref) {
     var {
       slots
@@ -1935,16 +1935,16 @@ var __sfc__$1c = vue.defineComponent({
     vue.onMounted(computePadding);
     vue.onUpdated(computePadding);
     return {
-      n: n$1a,
-      classes: classes$Z,
+      n: n$1b,
+      classes: classes$_,
       rootStyles,
       paddingLeft,
       paddingRight
     };
   }
 });
-__sfc__$1c.render = __render__$1b;
-const AppBar = __sfc__$1c;
+__sfc__$1d.render = __render__$1c;
+const AppBar = __sfc__$1d;
 AppBar.install = function(app) {
   app.component(AppBar.name, AppBar);
 };
@@ -2193,17 +2193,17 @@ function fitValidator$2(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
 var internalSizeValidator$1 = (size) => ["mini", "small", "normal", "large"].includes(size);
-function sizeValidator$4(size) {
+function sizeValidator$5(size) {
   return internalSizeValidator$1(size) || isNumber(size) || isString(size);
 }
-var props$12 = {
+var props$13 = {
   round: {
     type: Boolean,
     default: true
   },
   size: {
     type: [String, Number],
-    validator: sizeValidator$4,
+    validator: sizeValidator$5,
     default: "normal"
   },
   color: {
@@ -2239,12 +2239,12 @@ var props$12 = {
   onError: defineListenerProp()
 };
 var {
-  n: n$19,
-  classes: classes$Y
+  n: n$1a,
+  classes: classes$Z
 } = createNamespace("avatar");
 var _hoisted_1$r = ["src", "lazy-loading", "lazy-error"];
 var _hoisted_2$d = ["src"];
-function __render__$1a(_ctx, _cache) {
+function __render__$1b(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2324,12 +2324,12 @@ function __render__$1a(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1b = vue.defineComponent({
+var __sfc__$1c = vue.defineComponent({
   name: "VarAvatar",
   directives: {
     Lazy: Lazy$1
   },
-  props: props$12,
+  props: props$13,
   setup(props2) {
     var avatarElement = vue.ref(null);
     var textElement = vue.ref(null);
@@ -2371,10 +2371,10 @@ var __sfc__$1b = vue.defineComponent({
     vue.onUpdated(getScale);
     return {
       internalSizeValidator: internalSizeValidator$1,
-      sizeValidator: sizeValidator$4,
+      sizeValidator: sizeValidator$5,
       toSizeUnit,
-      n: n$19,
-      classes: classes$Y,
+      n: n$1a,
+      classes: classes$Z,
       avatarElement,
       textElement,
       scale,
@@ -2384,13 +2384,13 @@ var __sfc__$1b = vue.defineComponent({
     };
   }
 });
-__sfc__$1b.render = __render__$1a;
-const Avatar = __sfc__$1b;
+__sfc__$1c.render = __render__$1b;
+const Avatar = __sfc__$1c;
 Avatar.install = function(app) {
   app.component(Avatar.name, Avatar);
 };
 var _AvatarComponent = Avatar;
-var props$11 = {
+var props$12 = {
   offset: {
     type: [Number, String]
   },
@@ -2400,10 +2400,10 @@ var props$11 = {
   }
 };
 var {
-  n: n$18,
-  classes: classes$X
+  n: n$19,
+  classes: classes$Y
 } = createNamespace("avatar-group");
-function __render__$19(_ctx, _cache) {
+function __render__$1a(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2415,9 +2415,9 @@ function __render__$19(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$1a = vue.defineComponent({
+var __sfc__$1b = vue.defineComponent({
   name: "VarAvatarGroup",
-  props: props$11,
+  props: props$12,
   setup(props2) {
     var rootStyles = vue.computed(() => {
       if (props2.offset == null) {
@@ -2428,31 +2428,31 @@ var __sfc__$1a = vue.defineComponent({
       };
     });
     return {
-      n: n$18,
-      classes: classes$X,
+      n: n$19,
+      classes: classes$Y,
       toSizeUnit,
       rootStyles
     };
   }
 });
-__sfc__$1a.render = __render__$19;
-const AvatarGroup = __sfc__$1a;
+__sfc__$1b.render = __render__$1a;
+const AvatarGroup = __sfc__$1b;
 AvatarGroup.install = function(app) {
   app.component(AvatarGroup.name, AvatarGroup);
 };
 var _AvatarGroupComponent = AvatarGroup;
-function typeValidator$9(type) {
+function typeValidator$a(type) {
   return ["circle", "wave", "cube", "rect", "disappear"].includes(type);
 }
-function sizeValidator$3(size) {
+function sizeValidator$4(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
-var props$10 = {
+var props$11 = {
   // loading类型
   type: {
     type: String,
     default: "circle",
-    validator: typeValidator$9
+    validator: typeValidator$a
   },
   radius: {
     type: [String, Number]
@@ -2461,7 +2461,7 @@ var props$10 = {
   size: {
     type: String,
     default: "normal",
-    validator: sizeValidator$3
+    validator: sizeValidator$4
   },
   // loading颜色
   color: {
@@ -2476,8 +2476,8 @@ var props$10 = {
   }
 };
 var {
-  n: n$17,
-  classes: classes$W
+  n: n$18,
+  classes: classes$X
 } = createNamespace("loading");
 var _withScopeId$6 = (n2) => (vue.pushScopeId(""), n2 = n2(), vue.popScopeId(), n2);
 var _hoisted_1$q = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.createElementVNode(
@@ -2495,7 +2495,7 @@ var _hoisted_1$q = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.crea
   /* HOISTED */
 ));
 var _hoisted_2$c = [_hoisted_1$q];
-function __render__$18(_ctx, _cache) {
+function __render__$19(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -2616,9 +2616,9 @@ function __render__$18(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$19 = vue.defineComponent({
+var __sfc__$1a = vue.defineComponent({
   name: "VarLoading",
-  props: props$10,
+  props: props$11,
   setup(props2, _ref) {
     var {
       slots
@@ -2635,16 +2635,16 @@ var __sfc__$19 = vue.defineComponent({
       return props2.loading;
     });
     return {
-      n: n$17,
-      classes: classes$W,
+      n: n$18,
+      classes: classes$X,
       multiplySizeUnit,
       loadingTypeDict,
       isShow
     };
   }
 });
-__sfc__$19.render = __render__$18;
-const Loading = __sfc__$19;
+__sfc__$1a.render = __render__$19;
+const Loading = __sfc__$1a;
 Loading.install = function(app) {
   app.component(Loading.name, Loading);
 };
@@ -2663,20 +2663,19 @@ function _extends$f() {
   };
   return _extends$f.apply(this, arguments);
 }
-function typeValidator$8(type) {
+function typeValidator$9(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
-function sizeValidator$2(size) {
+function sizeValidator$3(size) {
   return ["normal", "mini", "small", "large"].includes(size);
 }
 function nativeTypeValidator(nativeType) {
   return ["button", "reset", "submit"].includes(nativeType);
 }
-var props$$ = {
+var props$10 = {
   type: {
     type: String,
-    default: "default",
-    validator: typeValidator$8
+    validator: typeValidator$9
   },
   nativeType: {
     type: String,
@@ -2685,8 +2684,7 @@ var props$$ = {
   },
   size: {
     type: String,
-    default: "normal",
-    validator: sizeValidator$2
+    validator: sizeValidator$3
   },
   loading: {
     type: Boolean,
@@ -2729,29 +2727,59 @@ var props$$ = {
   loadingRadius: {
     type: [Number, String]
   },
-  loadingType: pickProps(props$10, "type"),
-  loadingSize: pickProps(props$10, "size"),
-  loadingColor: _extends$f({}, pickProps(props$10, "color"), {
+  loadingType: pickProps(props$11, "type"),
+  loadingSize: pickProps(props$11, "size"),
+  loadingColor: _extends$f({}, pickProps(props$11, "color"), {
     default: "currentColor"
   }),
   onClick: defineListenerProp(),
   onTouchstart: defineListenerProp()
 };
+var BUTTON_GROUP_BIND_BUTTON_KEY = Symbol("BUTTON_GROUP_BIND_BUTTON_KEY");
+var BUTTON_GROUP_COUNT_BUTTON_KEY = Symbol("BUTTON_GROUP_COUNT_BUTTON_KEY");
+function useButtons() {
+  var {
+    bindChildren,
+    childProviders
+  } = useChildren(BUTTON_GROUP_BIND_BUTTON_KEY);
+  var {
+    length
+  } = useAtChildrenCounter(BUTTON_GROUP_COUNT_BUTTON_KEY);
+  return {
+    length,
+    buttons: childProviders,
+    bindButtons: bindChildren
+  };
+}
+function useButtonGroup() {
+  var {
+    bindParent,
+    parentProvider
+  } = useParent(BUTTON_GROUP_BIND_BUTTON_KEY);
+  var {
+    index
+  } = useAtParentIndex(BUTTON_GROUP_COUNT_BUTTON_KEY);
+  return {
+    index,
+    buttonGroup: parentProvider,
+    bindButtonGroup: bindParent
+  };
+}
 var {
-  n: n$16,
-  classes: classes$V
+  n: n$17,
+  classes: classes$W
 } = createNamespace("button");
 var _hoisted_1$p = ["type", "disabled"];
-function __render__$17(_ctx, _cache) {
+function __render__$18(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
   var _directive_ripple = vue.resolveDirective("ripple");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "button",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n("--" + _ctx.size), [_ctx.block, _ctx.n("$--flex") + " " + _ctx.n("--block"), _ctx.n("$--inline-flex")], [_ctx.disabled, _ctx.n("--disabled")], [_ctx.text, _ctx.n("--text-" + _ctx.type) + " " + _ctx.n("--text"), _ctx.n("--" + _ctx.type) + " " + _ctx.n("$-elevation--2")], [_ctx.text && _ctx.disabled, _ctx.n("--text-disabled")], [_ctx.round, _ctx.n("--round")], [_ctx.outline, _ctx.n("--outline")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n("--" + _ctx.states.size), [_ctx.block, _ctx.n("$--flex") + " " + _ctx.n("--block"), _ctx.n("$--inline-flex")], [_ctx.disabled, _ctx.n("--disabled")], [_ctx.states.text, _ctx.n("--text-" + _ctx.states.type) + " " + _ctx.n("--text"), _ctx.n("--" + _ctx.states.type) + " " + _ctx.n("$-elevation--" + _ctx.states.elevation)], [_ctx.states.text && _ctx.disabled, _ctx.n("--text-disabled")], [_ctx.round, _ctx.n("--round")], [_ctx.states.outline, _ctx.n("--outline")])),
       style: vue.normalizeStyle({
-        color: _ctx.textColor,
-        background: _ctx.color
+        color: _ctx.states.textColor,
+        background: _ctx.states.color
       }),
       type: _ctx.nativeType,
       disabled: _ctx.disabled,
@@ -2791,7 +2819,7 @@ function __render__$17(_ctx, _cache) {
     disabled: _ctx.disabled || !_ctx.ripple
   }]]);
 }
-var __sfc__$18 = vue.defineComponent({
+var __sfc__$19 = vue.defineComponent({
   name: "VarButton",
   components: {
     VarLoading: Loading
@@ -2799,9 +2827,41 @@ var __sfc__$18 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$$,
+  props: props$10,
   setup(props2) {
     var pending = vue.ref(false);
+    var {
+      buttonGroup: buttonGroup2
+    } = useButtonGroup();
+    var states = vue.computed(() => {
+      if (!buttonGroup2) {
+        return {
+          elevation: 2,
+          type: props2.type != null ? props2.type : "default",
+          size: props2.size != null ? props2.size : "normal",
+          color: props2.color,
+          text: props2.text,
+          textColor: props2.textColor,
+          outline: props2.outline
+        };
+      }
+      var {
+        type,
+        size,
+        color,
+        textColor,
+        mode
+      } = buttonGroup2;
+      return {
+        elevation: 0,
+        type: props2.type != null ? props2.type : type.value,
+        size: props2.size != null ? props2.size : size.value,
+        color: props2.color != null ? props2.color : color.value,
+        textColor: props2.textColor != null ? props2.textColor : textColor.value,
+        text: mode.value !== "normal",
+        outline: mode.value === "outline"
+      };
+    });
     var attemptAutoLoading = (result2) => {
       if (props2.autoLoading) {
         pending.value = true;
@@ -2836,21 +2896,22 @@ var __sfc__$18 = vue.defineComponent({
       attemptAutoLoading(call(onTouchstart, e));
     };
     return {
-      n: n$16,
-      classes: classes$V,
+      n: n$17,
+      classes: classes$W,
       pending,
+      states,
       handleClick,
       handleTouchstart
     };
   }
 });
-__sfc__$18.render = __render__$17;
-const Button = __sfc__$18;
+__sfc__$19.render = __render__$18;
+const Button = __sfc__$19;
 Button.install = function(app) {
   app.component(Button.name, Button);
 };
 var _ButtonComponent = Button;
-var props$_ = {
+var props$$ = {
   visibilityHeight: {
     type: [Number, String],
     default: 200
@@ -2871,10 +2932,10 @@ var props$_ = {
   onClick: defineListenerProp()
 };
 var {
-  n: n$15,
-  classes: classes$U
+  n: n$16,
+  classes: classes$V
 } = createNamespace("back-top");
-function __render__$16(_ctx, _cache) {
+function __render__$17(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createBlock(
@@ -2915,14 +2976,14 @@ function __render__$16(_ctx, _cache) {
     ["disabled"]
   );
 }
-var __sfc__$17 = vue.defineComponent({
+var __sfc__$18 = vue.defineComponent({
   name: "VarBackTop",
   components: {
     VarButton: Button,
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$_,
+  props: props$$,
   setup(props2) {
     var show = vue.ref(false);
     var backTopEl = vue.ref(null);
@@ -2954,30 +3015,30 @@ var __sfc__$17 = vue.defineComponent({
       show,
       backTopEl,
       toSizeUnit,
-      n: n$15,
-      classes: classes$U,
+      n: n$16,
+      classes: classes$V,
       click
     };
   }
 });
-__sfc__$17.render = __render__$16;
-const BackTop = __sfc__$17;
+__sfc__$18.render = __render__$17;
+const BackTop = __sfc__$18;
 BackTop.install = function(app) {
   app.component(BackTop.name, BackTop);
 };
 var _BackTopComponent = BackTop;
-function typeValidator$7(type) {
+function typeValidator$8(type) {
   return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
 }
 function positionValidator$1(position) {
   return ["right-top", "right-bottom", "left-top", "left-bottom"].includes(position);
 }
-var props$Z = {
+var props$_ = {
   // 徽标类型
   type: {
     type: String,
     default: "default",
-    validator: typeValidator$7
+    validator: typeValidator$8
   },
   // 是否隐藏徽标
   hidden: {
@@ -3014,13 +3075,13 @@ var props$Z = {
   }
 };
 var {
-  n: n$14,
-  classes: classes$T
+  n: n$15,
+  classes: classes$U
 } = createNamespace("badge");
 var _hoisted_1$o = {
   key: 1
 };
-function __render__$15(_ctx, _cache) {
+function __render__$16(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3071,13 +3132,13 @@ function __render__$15(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$16 = vue.defineComponent({
+var __sfc__$17 = vue.defineComponent({
   name: "VarBadge",
   components: {
     VarIcon: Icon
   },
   inheritAttrs: false,
-  props: props$Z,
+  props: props$_,
   setup(props2, _ref) {
     var {
       slots
@@ -3089,11 +3150,11 @@ var __sfc__$16 = vue.defineComponent({
         dot,
         icon: icon2
       } = props2;
-      var positionBasic = slots.default && n$14("position") + " " + n$14("--" + position);
-      var dotClass = dot ? n$14("dot") : null;
+      var positionBasic = slots.default && n$15("position") + " " + n$15("--" + position);
+      var dotClass = dot ? n$15("dot") : null;
       var positionClass = getPositionClass();
-      var iconClass = icon2 ? n$14("icon") : null;
-      return [n$14("--" + type), positionBasic, dotClass, positionClass, iconClass];
+      var iconClass = icon2 ? n$15("icon") : null;
+      return [n$15("--" + type), positionBasic, dotClass, positionClass, iconClass];
     });
     var values = vue.computed(() => {
       var {
@@ -3115,25 +3176,25 @@ var __sfc__$16 = vue.defineComponent({
       if (!dot)
         return;
       if (position.includes("right"))
-        return n$14("dot--right");
+        return n$15("dot--right");
       if (position.includes("left"))
-        return n$14("dot--left");
+        return n$15("dot--left");
     };
     return {
-      n: n$14,
-      classes: classes$T,
+      n: n$15,
+      classes: classes$U,
       values,
       contentClass
     };
   }
 });
-__sfc__$16.render = __render__$15;
-const Badge = __sfc__$16;
+__sfc__$17.render = __render__$16;
+const Badge = __sfc__$17;
 Badge.install = function(app) {
   app.component(Badge.name, Badge);
 };
 var _BadgeComponent = Badge;
-var props$Y = {
+var props$Z = {
   active: {
     type: [Number, String],
     default: 0
@@ -3199,8 +3260,8 @@ function _extends$e() {
   return _extends$e.apply(this, arguments);
 }
 var {
-  n: n$13,
-  classes: classes$S
+  n: n$14,
+  classes: classes$T
 } = createNamespace("bottom-navigation");
 var {
   n: nItem
@@ -3211,7 +3272,7 @@ var RIGHT_SPACE_CLASS = nItem("--right-space");
 var defaultFabProps = {
   type: "primary"
 };
-function __render__$14(_ctx, _cache) {
+function __render__$15(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -3242,12 +3303,12 @@ function __render__$14(_ctx, _cache) {
     /* CLASS, STYLE */
   );
 }
-var __sfc__$15 = vue.defineComponent({
+var __sfc__$16 = vue.defineComponent({
   name: "VarBottomNavigation",
   components: {
     VarButton: Button
   },
-  props: props$Y,
+  props: props$Z,
   setup(props2, _ref) {
     var {
       slots
@@ -3375,8 +3436,8 @@ var __sfc__$15 = vue.defineComponent({
       addMarginClass(length.value);
     });
     return {
-      n: n$13,
-      classes: classes$S,
+      n: n$14,
+      classes: classes$T,
       length,
       bottomNavigationDom,
       handleFabClick,
@@ -3384,13 +3445,13 @@ var __sfc__$15 = vue.defineComponent({
     };
   }
 });
-__sfc__$15.render = __render__$14;
-const BottomNavigation = __sfc__$15;
+__sfc__$16.render = __render__$15;
+const BottomNavigation = __sfc__$16;
 BottomNavigation.install = function(app) {
   app.component(BottomNavigation.name, BottomNavigation);
 };
 var _BottomNavigationComponent = BottomNavigation;
-var props$X = {
+var props$Y = {
   name: {
     type: String
   },
@@ -3428,14 +3489,14 @@ function useBottomNavigation() {
   };
 }
 var {
-  n: n$12,
-  classes: classes$R
+  n: n$13,
+  classes: classes$S
 } = createNamespace("bottom-navigation-item");
 var defaultBadgeProps = {
   type: "danger",
   dot: true
 };
-function __render__$13(_ctx, _cache) {
+function __render__$14(_ctx, _cache) {
   var _component_var_icon = vue.resolveComponent("var-icon");
   var _component_var_badge = vue.resolveComponent("var-badge");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -3500,7 +3561,7 @@ function __render__$13(_ctx, _cache) {
     /* CLASS, STYLE */
   )), [[_directive_ripple]]);
 }
-var __sfc__$14 = vue.defineComponent({
+var __sfc__$15 = vue.defineComponent({
   name: "VarBottomNavigationItem",
   components: {
     VarBadge: Badge,
@@ -3509,7 +3570,7 @@ var __sfc__$14 = vue.defineComponent({
   directives: {
     Ripple: Ripple$1
   },
-  props: props$X,
+  props: props$Y,
   setup(props2) {
     var name = vue.computed(() => props2.name);
     var badge2 = vue.computed(() => props2.badge);
@@ -3544,8 +3605,8 @@ var __sfc__$14 = vue.defineComponent({
       immediate: true
     });
     return {
-      n: n$12,
-      classes: classes$R,
+      n: n$13,
+      classes: classes$S,
       index,
       active,
       badge: badge2,
@@ -3555,13 +3616,13 @@ var __sfc__$14 = vue.defineComponent({
     };
   }
 });
-__sfc__$14.render = __render__$13;
-const BottomNavigationItem = __sfc__$14;
+__sfc__$15.render = __render__$14;
+const BottomNavigationItem = __sfc__$15;
 BottomNavigationItem.install = function(app) {
   app.component(BottomNavigationItem.name, BottomNavigationItem);
 };
 var _BottomNavigationItemComponent = BottomNavigationItem;
-var props$W = {
+var props$X = {
   separator: {
     type: String
   },
@@ -3601,10 +3662,10 @@ function useBreadcrumb() {
   };
 }
 var {
-  n: n$11,
-  classes: classes$Q
+  n: n$12,
+  classes: classes$R
 } = createNamespace("breadcrumb");
-function __render__$12(_ctx, _cache) {
+function __render__$13(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -3639,9 +3700,9 @@ function __render__$12(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$13 = vue.defineComponent({
+var __sfc__$14 = vue.defineComponent({
   name: "VarBreadcrumb",
-  props: props$W,
+  props: props$X,
   setup(props2) {
     var {
       index,
@@ -3658,30 +3719,30 @@ var __sfc__$13 = vue.defineComponent({
     };
     bindBreadcrumb(null);
     return {
-      n: n$11,
-      classes: classes$Q,
+      n: n$12,
+      classes: classes$R,
       isLast,
       parentSeparator,
       handleClick
     };
   }
 });
-__sfc__$13.render = __render__$12;
-const Breadcrumb = __sfc__$13;
+__sfc__$14.render = __render__$13;
+const Breadcrumb = __sfc__$14;
 Breadcrumb.install = function(app) {
   app.component(Breadcrumb.name, Breadcrumb);
 };
 var _BreadcrumbComponent = Breadcrumb;
-var props$V = {
+var props$W = {
   separator: {
     type: String,
     default: "/"
   }
 };
 var {
-  n: n$10
+  n: n$11
 } = createNamespace("breadcrumbs");
-function __render__$11(_ctx, _cache) {
+function __render__$12(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
     {
@@ -3692,9 +3753,9 @@ function __render__$11(_ctx, _cache) {
     /* CLASS */
   );
 }
-var __sfc__$12 = vue.defineComponent({
+var __sfc__$13 = vue.defineComponent({
   name: "VarBreadcrumbs",
-  props: props$V,
+  props: props$W,
   setup(props2) {
     var separator = vue.computed(() => props2.separator);
     var {
@@ -3707,16 +3768,99 @@ var __sfc__$12 = vue.defineComponent({
     };
     bindBreadcrumbList(breadcrumbsProvider);
     return {
-      n: n$10
+      n: n$11
     };
   }
 });
-__sfc__$12.render = __render__$11;
-const Breadcrumbs = __sfc__$12;
+__sfc__$13.render = __render__$12;
+const Breadcrumbs = __sfc__$13;
 Breadcrumbs.install = function(app) {
   app.component(Breadcrumbs.name, Breadcrumbs);
 };
 var _BreadcrumbsComponent = Breadcrumbs;
+function typeValidator$7(type) {
+  return ["default", "primary", "info", "success", "warning", "danger"].includes(type);
+}
+function sizeValidator$2(size) {
+  return ["normal", "mini", "small", "large"].includes(size);
+}
+function modeValidator$1(mode) {
+  return ["normal", "text", "outline"].includes(mode);
+}
+var props$V = {
+  type: {
+    type: String,
+    default: "default",
+    validator: typeValidator$7
+  },
+  size: {
+    type: String,
+    default: "normal",
+    validator: sizeValidator$2
+  },
+  color: {
+    type: String
+  },
+  textColor: {
+    type: String
+  },
+  mode: {
+    type: String,
+    default: "normal",
+    validator: modeValidator$1
+  },
+  elevation: {
+    type: [Number, String],
+    default: 2
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  }
+};
+var {
+  n: n$10,
+  classes: classes$Q
+} = createNamespace("button-group");
+function __render__$11(_ctx, _cache) {
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    {
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.mode, "" + _ctx.n("--mode-" + _ctx.mode)], [_ctx.vertical, _ctx.n("--vertical"), _ctx.n("--horizontal")], [_ctx.mode === "normal", _ctx.n("$-elevation--" + _ctx.elevation)]))
+    },
+    [vue.renderSlot(_ctx.$slots, "default")],
+    2
+    /* CLASS */
+  );
+}
+var __sfc__$12 = vue.defineComponent({
+  name: "VarButtonGroup",
+  props: props$V,
+  setup(props2) {
+    var {
+      bindButtons
+    } = useButtons();
+    var buttonGroupProvider = {
+      elevation: vue.computed(() => props2.elevation),
+      type: vue.computed(() => props2.type),
+      size: vue.computed(() => props2.size),
+      color: vue.computed(() => props2.color),
+      textColor: vue.computed(() => props2.textColor),
+      mode: vue.computed(() => props2.mode)
+    };
+    bindButtons(buttonGroupProvider);
+    return {
+      n: n$10,
+      classes: classes$Q
+    };
+  }
+});
+__sfc__$12.render = __render__$11;
+const ButtonGroup = __sfc__$12;
+ButtonGroup.install = function(app) {
+  app.component(ButtonGroup.name, ButtonGroup);
+};
+var _ButtonGroupComponent = ButtonGroup;
 function fitValidator$1(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
@@ -4925,7 +5069,7 @@ var props$P = {
   textColor: {
     type: String
   },
-  iconName: pickProps(props$15, "name"),
+  iconName: pickProps(props$16, "name"),
   plain: {
     type: Boolean,
     default: false
@@ -10584,7 +10728,7 @@ var props$I = _extends$a({
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp(),
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$16, [
+}, pickProps(props$17, [
   "overlay",
   "overlayClass",
   "overlayStyle",
@@ -13809,7 +13953,7 @@ var props$B = _extends$4({
     default: false
   },
   "onUpdate:show": defineListenerProp()
-}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$16, [
+}, pickProps(props$C, ["loop", "indicator", "onChange"]), pickProps(props$17, [
   "lockScroll",
   "teleport",
   "onOpen",
@@ -16640,7 +16784,7 @@ function __render__$u(_ctx, _cache) {
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "div",
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), _ctx.n("$-elevation--" + _ctx.elevation), [_ctx.onClick, _ctx.n("--cursor")], [_ctx.round, _ctx.n("--round")], [_ctx.inline, _ctx.n("$--inline-flex")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.elevation != null, _ctx.n("$-elevation--" + _ctx.elevation)], [_ctx.onClick, _ctx.n("--cursor")], [_ctx.round, _ctx.n("--round")], [_ctx.inline, _ctx.n("$--inline-flex")])),
       style: vue.normalizeStyle({
         width: _ctx.toSizeUnit(_ctx.width),
         height: _ctx.toSizeUnit(_ctx.height),
@@ -16751,7 +16895,7 @@ var props$n = _extends$3({
   onChange: defineListenerProp(),
   onConfirm: defineListenerProp(),
   onCancel: defineListenerProp()
-}, pickProps(props$16, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
+}, pickProps(props$17, ["show", "onUpdate:show", "closeOnClickOverlay", "teleport", "onOpen", "onClose", "onOpened", "onClosed", "onClickOverlay", "onRouteChange"]));
 var {
   n: n$q,
   classes: classes$l
@@ -20305,10 +20449,10 @@ var props$c = {
     type: Boolean,
     default: false
   },
-  loadingType: pickProps(props$10, "type"),
-  loadingSize: pickProps(props$10, "size"),
-  loadingRadius: pickProps(props$10, "radius"),
-  loadingColor: _extends$2({}, pickProps(props$10, "color"), {
+  loadingType: pickProps(props$11, "type"),
+  loadingSize: pickProps(props$11, "size"),
+  loadingRadius: pickProps(props$11, "radius"),
+  loadingColor: _extends$2({}, pickProps(props$11, "color"), {
     default: "currentColor"
   }),
   // 是否禁止滚动穿透
@@ -23956,6 +24100,8 @@ const breadcrumbs = "";
 const BreadcrumbsSfc = "";
 const loading = "";
 const ButtonSfc = "";
+const buttonGroup = "";
+const ButtonGroupSfc = "";
 const card = "";
 const CardSfc = "";
 const cell = "";
@@ -24063,7 +24209,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.8.1";
+const version = "2.8.2";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);
@@ -24076,6 +24222,7 @@ function install(app) {
   Breadcrumb.install && app.use(Breadcrumb);
   Breadcrumbs.install && app.use(Breadcrumbs);
   Button.install && app.use(Button);
+  ButtonGroup.install && app.use(ButtonGroup);
   Card.install && app.use(Card);
   Cell.install && app.use(Cell);
   Checkbox.install && app.use(Checkbox);
@@ -24156,6 +24303,7 @@ const index_bundle = {
   Breadcrumb,
   Breadcrumbs,
   Button,
+  ButtonGroup,
   Card,
   Cell,
   Checkbox,
@@ -24233,6 +24381,7 @@ exports.BottomNavigationItem = BottomNavigationItem;
 exports.Breadcrumb = Breadcrumb;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Card = Card;
 exports.Cell = Cell;
 exports.Checkbox = Checkbox;
@@ -24311,6 +24460,7 @@ exports._BottomNavigationItemComponent = _BottomNavigationItemComponent;
 exports._BreadcrumbComponent = _BreadcrumbComponent;
 exports._BreadcrumbsComponent = _BreadcrumbsComponent;
 exports._ButtonComponent = _ButtonComponent;
+exports._ButtonGroupComponent = _ButtonGroupComponent;
 exports._CardComponent = _CardComponent;
 exports._CellComponent = _CellComponent;
 exports._CheckboxComponent = _CheckboxComponent;
@@ -24376,18 +24526,18 @@ exports._ThemesComponent = _ThemesComponent;
 exports._TimePickerComponent = _TimePickerComponent;
 exports._TooltipComponent = _TooltipComponent;
 exports._UploaderComponent = _UploaderComponent;
-exports.actionSheetProps = props$14;
+exports.actionSheetProps = props$15;
 exports.add = add$2;
-exports.appBarProps = props$13;
-exports.avatarGroupProps = props$11;
-exports.avatarProps = props$12;
-exports.backTopProps = props$_;
-exports.badgeProps = props$Z;
-exports.bottomNavigationItemProps = props$X;
-exports.bottomNavigationProps = props$Y;
-exports.breadcrumbProps = props$W;
-exports.breadcrumbsProps = props$V;
-exports.buttonProps = props$$;
+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;
@@ -24406,7 +24556,7 @@ exports.dividerProps = props$H;
 exports.enUS = enUS;
 exports.formDetailsProps = props$S;
 exports.formProps = props$E;
-exports.iconProps = props$15;
+exports.iconProps = props$16;
 exports.imageCache = imageCache;
 exports.imagePreviewProps = props$B;
 exports.imageProps = props$D;
@@ -24417,7 +24567,7 @@ exports.install = install;
 exports.linkProps = props$w;
 exports.listProps = props$v;
 exports.loadingBarProps = props$u;
-exports.loadingProps = props$10;
+exports.loadingProps = props$11;
 exports.menuProps = props$s;
 exports.merge = merge;
 exports.optionProps = props$r;
@@ -24427,7 +24577,7 @@ exports.packs = packs;
 exports.paginationProps = props$p;
 exports.paperProps = props$o;
 exports.pickerProps = props$n;
-exports.popupProps = props$16;
+exports.popupProps = props$17;
 exports.progressProps = props$m;
 exports.pullRefreshProps = props$l;
 exports.radioGroupProps = props$j;