@varlet/ui 1.26.1-alpha.1644652196468 → 1.26.3

package/es/varlet.esm.js

@@ -1,4 +1,4 @@
-import { reactive, getCurrentInstance, watch, onBeforeMount, onUnmounted, onActivated, onDeactivated, ref, onMounted, provide, computed, inject, nextTick, createApp, onBeforeUnmount, h, isVNode, defineComponent, createVNode, Teleport, Transition, withDirectives, mergeProps, vShow, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, resolveComponent, resolveDirective, withCtx, createElementVNode, renderSlot, toDisplayString, createElementBlock, Fragment, renderList, createCommentVNode, onUpdated, createTextVNode, pushScopeId, popScopeId, withModifiers, normalizeProps, guardReactiveProps, vModelText, toRefs, withKeys, toRaw, TransitionGroup } from "vue";
+import { reactive, getCurrentInstance, watch, onBeforeMount, onUnmounted, onActivated, onDeactivated, ref, onMounted, provide, computed, inject, nextTick, createApp, onBeforeUnmount, h, isVNode, defineComponent, createVNode, Teleport, Transition, withDirectives, mergeProps, vShow, openBlock, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, resolveComponent, resolveDirective, withCtx, createElementVNode, renderSlot, toDisplayString, createElementBlock, Fragment, renderList, createCommentVNode, onUpdated, createTextVNode, pushScopeId, popScopeId, withModifiers, normalizeProps, guardReactiveProps, vModelText, toRefs, withKeys, toRaw, TransitionGroup, Comment } from "vue";
 var context = {
   locks: {},
   zIndex: 2e3,
@@ -6,8 +6,8 @@ var context = {
 };
 reactive(context);
 var Context = reactive(context);
-function _extends$c() {
-  _extends$c = Object.assign || function(target) {
+function _extends$d() {
+  _extends$d = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -18,7 +18,7 @@ function _extends$c() {
     }
     return target;
   };
-  return _extends$c.apply(this, arguments);
+  return _extends$d.apply(this, arguments);
 }
 var ANIMATION_DURATION$1 = 250;
 function setStyles(element) {
@@ -64,7 +64,6 @@ function createRipple(event) {
     return;
   }
   var task = () => {
-    var _ripple$color;
     _ripple.tasker = null;
     var {
       x,
@@ -79,7 +78,7 @@ function createRipple(event) {
     ripple2.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple2.style.width = size + "px";
     ripple2.style.height = size + "px";
-    ripple2.style.backgroundColor = (_ripple$color = _ripple.color) != null ? _ripple$color : "currentColor";
+    _ripple.color && (ripple2.style.backgroundColor = _ripple.color);
     ripple2.dataset.createdAt = String(performance.now());
     setStyles(this);
     this.appendChild(ripple2);
@@ -119,7 +118,7 @@ function forbidRippleTask() {
 }
 function mounted$1(el, binding) {
   var _binding$value, _binding$value$touchm, _binding$value2;
-  el._ripple = _extends$c({
+  el._ripple = _extends$d({
     tasker: null
   }, (_binding$value = binding.value) != null ? _binding$value : {}, {
     touchmoveForbid: (_binding$value$touchm = (_binding$value2 = binding.value) == null ? void 0 : _binding$value2.touchmoveForbid) != null ? _binding$value$touchm : Context.touchmoveForbid,
@@ -150,7 +149,7 @@ function unmounted(el) {
 }
 function updated$1(el, binding) {
   var _binding$value3, _binding$value$touchm2, _binding$value4;
-  el._ripple = _extends$c({}, el._ripple, (_binding$value3 = binding.value) != null ? _binding$value3 : {}, {
+  el._ripple = _extends$d({}, el._ripple, (_binding$value3 = binding.value) != null ? _binding$value3 : {}, {
     touchmoveForbid: (_binding$value$touchm2 = (_binding$value4 = binding.value) == null ? void 0 : _binding$value4.touchmoveForbid) != null ? _binding$value$touchm2 : Context.touchmoveForbid,
     tasker: null
   });
@@ -476,8 +475,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
-function _extends$b() {
-  _extends$b = Object.assign || function(target) {
+function _extends$c() {
+  _extends$c = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -488,7 +487,7 @@ function _extends$b() {
     }
     return target;
   };
-  return _extends$b.apply(this, arguments);
+  return _extends$c.apply(this, arguments);
 }
 function pickProps(props2, propsKey) {
   return Array.isArray(propsKey) ? propsKey.reduce((pickedProps, key) => {
@@ -517,7 +516,7 @@ function mountInstance(component, props2, eventListener) {
   }
   var Host = {
     setup() {
-      return () => h(component, _extends$b({}, props2, eventListener));
+      return () => h(component, _extends$c({}, props2, eventListener));
     }
   };
   var {
@@ -605,7 +604,7 @@ function useChildren(key) {
     removeItem(childProviders, childProvider);
   };
   var bindChildren = (parentProvider) => {
-    provide(key, _extends$b({
+    provide(key, _extends$c({
       collect,
       clear: clear2
     }, parentProvider));
@@ -708,8 +707,8 @@ function exposeApis(apis) {
     Object.assign(instance.proxy, apis);
   }
 }
-function _extends$a() {
-  _extends$a = Object.assign || function(target) {
+function _extends$b() {
+  _extends$b = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -720,7 +719,7 @@ function _extends$a() {
     }
     return target;
   };
-  return _extends$a.apply(this, arguments);
+  return _extends$b.apply(this, arguments);
 }
 function _isSlot$2(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -768,7 +767,7 @@ var Popup = defineComponent({
       } = props2;
       return createVNode("div", {
         "class": ["var-popup__overlay", overlayClass],
-        "style": _extends$a({
+        "style": _extends$b({
           zIndex: zIndex.value - 1
         }, overlayStyle),
         "onClick": hidePopup
@@ -1131,8 +1130,8 @@ var Icon = defineComponent({
 Icon.install = function(app) {
   app.component(Icon.name, Icon);
 };
-function _extends$9() {
-  _extends$9 = Object.assign || function(target) {
+function _extends$a() {
+  _extends$a = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1143,9 +1142,9 @@ function _extends$9() {
     }
     return target;
   };
-  return _extends$9.apply(this, arguments);
+  return _extends$a.apply(this, arguments);
 }
-var props$Q = _extends$9({
+var props$Q = _extends$a({
   show: {
     type: Boolean,
     default: false
@@ -1277,8 +1276,8 @@ var zhCN = {
   paginationPage: "\u9875",
   paginationJump: "\u524D\u5F80"
 };
-function _extends$8() {
-  _extends$8 = Object.assign || function(target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1289,7 +1288,7 @@ function _extends$8() {
     }
     return target;
   };
-  return _extends$8.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 function useLocale() {
   var packs2 = {};
@@ -1310,7 +1309,7 @@ function useLocale() {
       console.warn("The " + lang + " does not exist. You can mount a language package using the add method");
       return;
     }
-    packs2[lang] = _extends$8({}, packs2[lang], pack3);
+    packs2[lang] = _extends$9({}, packs2[lang], pack3);
     use2(lang);
   };
   return {
@@ -2029,7 +2028,7 @@ var Badge = defineComponent({
         dot,
         icon: icon2
       } = props2;
-      var positionBasic = (slots.default == null ? void 0 : slots.default()) && "var-badge__position var-badge--" + position;
+      var positionBasic = slots.default && "var-badge__position var-badge--" + position;
       var dotClass = dot && "var-badge__dot";
       var positionClass = getPositionClass();
       var iconClass = icon2 && "var-badge__icon";
@@ -2476,6 +2475,9 @@ var Checkbox = defineComponent({
       } = props2;
       value.value = values.includes(checkedValue2) ? checkedValue2 : uncheckedValue;
     };
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
+    };
     var reset = () => {
       var _props$onUpdateModel2;
       (_props$onUpdateModel2 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel2.call(props2, props2.uncheckedValue);
@@ -2504,7 +2506,8 @@ var Checkbox = defineComponent({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);
@@ -2631,6 +2634,9 @@ var CheckboxGroup = defineComponent({
       } = _ref;
       return sync(props2.modelValue);
     });
+    var resetWithAnimation = () => {
+      checkboxes.forEach((checkbox2) => checkbox2.resetWithAnimation());
+    };
     var checkAll2 = () => {
       var _props$onUpdateModel2;
       var checkedValues = checkboxes.map((_ref2) => {
@@ -2640,6 +2646,7 @@ var CheckboxGroup = defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel2.call(props2, changedModelValue);
       return changedModelValue;
     };
@@ -2657,6 +2664,7 @@ var CheckboxGroup = defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props2["onUpdate:modelValue"]) == null ? void 0 : _props$onUpdateModel3.call(props2, changedModelValue);
       return changedModelValue;
     };
@@ -6545,7 +6553,7 @@ function render$F(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("check-panel"))
   }, [createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("div", {
       key: _ctx.showDate
@@ -6624,8 +6632,8 @@ var PanelHeader = defineComponent({
     };
   }
 });
-function _extends$7() {
-  _extends$7 = Object.assign || function(target) {
+function _extends$8() {
+  _extends$8 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -6636,7 +6644,7 @@ function _extends$7() {
     }
     return target;
   };
-  return _extends$7.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
@@ -6656,7 +6664,7 @@ function render$E(_ctx, _cache) {
     onCheckPanel: _ctx.clickYear,
     onCheckDate: _ctx.checkDate
   }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]), createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("ul", {
       key: _ctx.panelKey
@@ -6668,7 +6676,7 @@ function render$E(_ctx, _cache) {
         class: "var-month-picker__button",
         "var-month-picker-cover": "",
         ripple: false
-      }, _extends$7({}, _ctx.buttonProps(month.index)), {
+      }, _extends$8({}, _ctx.buttonProps(month.index)), {
         onClick: ($event) => _ctx.chooseMonth(month)
       }), {
         default: withCtx(() => [createTextVNode(toDisplayString(_ctx.getMonthAbbr(month.index)), 1)]),
@@ -6950,8 +6958,8 @@ var YearPickerPanel = defineComponent({
     };
   }
 });
-function _extends$6() {
-  _extends$6 = Object.assign || function(target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -6962,7 +6970,7 @@ function _extends$6() {
     }
     return target;
   };
-  return _extends$6.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
@@ -6988,7 +6996,7 @@ function render$C(_ctx, _cache) {
     onCheckPanel: _ctx.clickMonth,
     onCheckDate: _ctx.checkDate
   }, null, 8, ["date", "disabled", "onCheckPanel", "onCheckDate"]), createVNode(Transition, {
-    name: _ctx.reverse ? "var-date-picker-reverse-translatex" : "var-date-picker-translatex"
+    name: "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatex"
   }, {
     default: withCtx(() => [(openBlock(), createElementBlock("div", {
       key: _ctx.panelKey
@@ -7007,7 +7015,7 @@ function render$C(_ctx, _cache) {
         "var-day-picker-cover": "",
         round: "",
         ripple: false
-      }, _extends$6({}, _ctx.buttonProps(day)), {
+      }, _extends$7({}, _ctx.buttonProps(day)), {
         onClick: ($event) => _ctx.chooseDay(day)
       }), {
         default: withCtx(() => [createTextVNode(toDisplayString(_ctx.filterDay(day)), 1)]),
@@ -7272,7 +7280,7 @@ function render$B(_ctx, _cache) {
     class: normalizeClass(["var-date-picker-title__date", [!_ctx.isYearPanel ? "var-date-picker-title__date--active" : null, _ctx.range ? "var-date-picker-title__date--range" : null]]),
     onClick: _cache[1] || (_cache[1] = ($event) => _ctx.clickEl("date"))
   }, [createVNode(Transition, {
-    name: _ctx.multiple ? "" : _ctx.reverse ? "var-date-picker-reverse-translatey" : "var-date-picker-translatey"
+    name: _ctx.multiple ? "" : "var-date-picker" + (_ctx.reverse ? "-reverse" : "") + "-translatey"
   }, {
     default: withCtx(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -7420,13 +7428,14 @@ var DatePicker = defineComponent({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = computed(() => {
-      var _chooseMonth$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2, _chooseDay$value;
+      var _chooseMonth$value, _chooseDay$value, _chooseYear$value, _chooseMonth$value$in, _chooseMonth$value2;
       var weekIndex = dayjs(chooseYear.value + "-" + ((_chooseMonth$value = chooseMonth.value) == null ? void 0 : _chooseMonth$value.index) + "-" + chooseDay.value).day();
+      var date = chooseDay.value ? (_chooseDay$value = chooseDay.value) == null ? void 0 : _chooseDay$value.padStart(2, "0") : "";
       return {
         week: "" + weekIndex,
         year: (_chooseYear$value = chooseYear.value) != null ? _chooseYear$value : "",
         month: (_chooseMonth$value$in = (_chooseMonth$value2 = chooseMonth.value) == null ? void 0 : _chooseMonth$value2.index) != null ? _chooseMonth$value$in : "",
-        date: (_chooseDay$value = chooseDay.value) != null ? _chooseDay$value : ""
+        date
       };
     });
     var formatRange = computed(() => getChoose.value.chooseRangeDay.map((choose) => dayjs(choose).format("YYYY-MM-DD")));
@@ -7644,8 +7653,8 @@ var DatePicker = defineComponent({
 DatePicker.install = function(app) {
   app.component(DatePicker.name, DatePicker);
 };
-function _extends$5() {
-  _extends$5 = Object.assign || function(target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7656,12 +7665,12 @@ function _extends$5() {
     }
     return target;
   };
-  return _extends$5.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 function messageAlignValidator(messageAlign) {
   return ["left", "center", "right"].includes(messageAlign);
 }
-var props$y = _extends$5({
+var props$y = _extends$6({
   show: {
     type: Boolean,
     default: false
@@ -7959,8 +7968,8 @@ var props$x = {
     default: false
   }
 };
-function _extends$4() {
-  _extends$4 = Object.assign || function(target) {
+function _extends$5() {
+  _extends$5 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -7971,7 +7980,7 @@ function _extends$4() {
     }
     return target;
   };
-  return _extends$4.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
 var _hoisted_1$o = {
   key: 0,
@@ -8005,18 +8014,18 @@ var Divider = defineComponent({
         margin
       };
       if (isBool(inset) || inset === 0)
-        return _extends$4({}, baseStyle);
+        return _extends$5({}, baseStyle);
       var _inset = toNumber(inset);
       var absInsetWithUnit = Math.abs(_inset) + (inset + "").replace(_inset + "", "");
-      return vertical ? _extends$4({}, baseStyle, {
+      return vertical ? _extends$5({}, baseStyle, {
         height: "calc(80% - " + toSizeUnit(absInsetWithUnit) + ")"
-      }) : _extends$4({}, baseStyle, {
+      }) : _extends$5({}, baseStyle, {
         width: "calc(100% - " + toSizeUnit(absInsetWithUnit) + ")",
         left: _inset > 0 ? toSizeUnit(absInsetWithUnit) : toSizeUnit(0)
       });
     });
     var checkHasText = () => {
-      state.withText = Boolean(slots.default == null ? void 0 : slots.default().length) || Boolean(props2.description);
+      state.withText = Boolean(slots.default) || Boolean(props2.description);
     };
     onMounted(() => {
       checkHasText();
@@ -8024,7 +8033,7 @@ var Divider = defineComponent({
     onUpdated(() => {
       checkHasText();
     });
-    return _extends$4({}, toRefs(state), {
+    return _extends$5({}, toRefs(state), {
       style,
       isInset
     });
@@ -8159,8 +8168,8 @@ function _asyncToGenerator$7(fn) {
     });
   };
 }
-function _extends$3() {
-  _extends$3 = Object.assign || function(target) {
+function _extends$4() {
+  _extends$4 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -8171,7 +8180,7 @@ function _extends$3() {
     }
     return target;
   };
-  return _extends$3.apply(this, arguments);
+  return _extends$4.apply(this, arguments);
 }
 var BACKGROUND_IMAGE_ARG_NAME = "background-image";
 var LAZY_LOADING = "lazy-loading";
@@ -8241,7 +8250,7 @@ function createLazy(el, binding) {
     error: (_el$getAttribute2 = el.getAttribute(LAZY_ERROR)) != null ? _el$getAttribute2 : defaultLazyOptions.error,
     attempt: el.getAttribute(LAZY_ATTEMPT) ? Number(el.getAttribute(LAZY_ATTEMPT)) : defaultLazyOptions.attempt
   };
-  el._lazy = _extends$3({
+  el._lazy = _extends$4({
     src: binding.value,
     arg: binding.arg,
     currentAttempt: 0,
@@ -8990,8 +8999,8 @@ var SwipeItem = defineComponent({
 SwipeItem.install = function(app) {
   app.component(SwipeItem.name, SwipeItem);
 };
-function _extends$2() {
-  _extends$2 = Object.assign || function(target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -9002,9 +9011,9 @@ function _extends$2() {
     }
     return target;
   };
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
-var props$t = _extends$2({
+var props$t = _extends$3({
   show: {
     type: Boolean,
     default: false
@@ -9038,6 +9047,7 @@ var props$t = _extends$2({
 ]));
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 250;
 var ANIMATION_DURATION = 200;
 var _hoisted_1$k = ["src", "alt"];
 var _hoisted_2$f = {
@@ -9196,10 +9206,10 @@ var VarImagePreview = defineComponent({
       return getDistance(prevTouch, currentTouch) <= DISTANCE_OFFSET && currentTouch.timestamp - prevTouch.timestamp <= EVENT_DELAY && prevTouch.target === currentTouch.target;
     };
     var isTapTouch = (target) => {
-      if (!startTouch || !prevTouch) {
+      if (!target || !startTouch || !prevTouch) {
         return false;
       }
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
     var handleTouchend = (event) => {
       checker = window.setTimeout(() => {
@@ -10356,7 +10366,7 @@ var List = defineComponent({
       var {
         bottom: detectorBottom
       } = detectorEl.value.getBoundingClientRect();
-      return detectorBottom - toPxNum(props2.offset) <= containerBottom;
+      return Math.floor(detectorBottom) - toPxNum(props2.offset) <= containerBottom;
     };
     var check2 = /* @__PURE__ */ function() {
       var _ref = _asyncToGenerator$3(function* () {
@@ -10518,7 +10528,7 @@ var Menu = defineComponent({
     });
     var renderTransition = () => createVNode(Transition, {
       "name": "var-menu",
-      "onAfterEnter": props2.onOpen,
+      "onAfterEnter": props2.onOpened,
       "onAfterLeave": props2.onClosed
     }, {
       default: () => [withDirectives(createVNode("div", {
@@ -11051,8 +11061,8 @@ var Pagination = defineComponent({
 Pagination.install = function(app) {
   app.component(Pagination.name, Pagination);
 };
-function _extends$1() {
-  _extends$1 = Object.assign || function(target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -11063,9 +11073,9 @@ function _extends$1() {
     }
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
-var props$k = _extends$1({
+var props$k = _extends$2({
   columns: {
     type: Array,
     default: () => []
@@ -13203,6 +13213,20 @@ var props$b = {
     type: Function
   }
 };
+function _extends$1() {
+  _extends$1 = Object.assign || function(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends$1.apply(this, arguments);
+}
 var Thumbs;
 (function(Thumbs2) {
   Thumbs2["First"] = "1";
@@ -13259,11 +13283,9 @@ function render$d(_ctx, _cache) {
       })
     }, null, 4), createElementVNode("div", {
       class: normalizeClass(["var-slider__thumb-ripple", [_ctx.thumbsProps[item.enumValue].active ? "var-slider__thumb-ripple-active" : null]]),
-      style: normalizeStyle({
-        background: _ctx.thumbColor,
-        height: _ctx.thumbSize === void 0 ? void 0 : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : "0px",
-        width: _ctx.thumbSize === void 0 ? void 0 : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : "0px"
-      })
+      style: normalizeStyle(_extends$1({
+        background: _ctx.thumbColor
+      }, _ctx.getRippleSize(item)))
     }, null, 6), createElementVNode("div", {
       class: normalizeClass(["var-slider__thumb-label", [_ctx.showLabel(item.enumValue) ? "var-slider__thumb-label-active" : null]]),
       style: normalizeStyle({
@@ -13329,6 +13351,16 @@ var Slider = defineComponent({
       }
       return list2;
     });
+    var getRippleSize = (item) => {
+      var size;
+      if (props2.thumbSize !== void 0) {
+        size = thumbsProps[item.enumValue].active ? 3 * toNumber(props2.thumbSize) + "px" : "0px";
+      }
+      return {
+        height: size,
+        width: size
+      };
+    };
     var showLabel = (type) => {
       if (props2.labelVisible === "always")
         return true;
@@ -13517,6 +13549,7 @@ var Slider = defineComponent({
       thumbsProps,
       thumbList,
       toNumber,
+      getRippleSize,
       showLabel,
       start,
       move,
@@ -14002,9 +14035,25 @@ var Space = defineComponent({
         size
       } = props2;
       var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
-      var lastIndex = children.length - 1;
       var isInternalSize = internalSizeValidator(size);
       var [y, x] = getSize(size, isInternalSize);
+      var flatten = (vNodes) => {
+        var result = [];
+        vNodes.forEach((vNode) => {
+          if (vNode.type === Comment)
+            return;
+          if (vNode.type === Fragment && isArray(vNode.children)) {
+            vNode.children.forEach((item) => {
+              result.push(item);
+            });
+            return;
+          }
+          result.push(vNode);
+        });
+        return result;
+      };
+      children = flatten(children);
+      var lastIndex = children.length - 1;
       var spacers = children.map((child, index) => {
         var margin = "0";
         if (direction === "row") {

package/highlight/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/badge/Badge.js

@@ -71,7 +71,7 @@ var _default = (0, _vue.defineComponent)({
         dot,
         icon
       } = props;
-      var positionBasic = (slots.default == null ? void 0 : slots.default()) && "var-badge__position var-badge--" + position;
+      var positionBasic = slots.default && "var-badge__position var-badge--" + position;
       var dotClass = dot && 'var-badge__dot';
       var positionClass = getPositionClass();
       var iconClass = icon && 'var-badge__icon';

package/lib/checkbox/Checkbox.js

@@ -171,6 +171,10 @@ var _default = (0, _vue.defineComponent)({
         uncheckedValue
       } = props;
       value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
+    };
+
+    var resetWithAnimation = () => {
+      withAnimation.value = false;
     }; // expose
 
 
@@ -210,7 +214,8 @@ var _default = (0, _vue.defineComponent)({
       sync,
       validate,
       resetValidation,
-      reset
+      reset,
+      resetWithAnimation
     };
     bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
     bindForm == null ? void 0 : bindForm(checkboxProvider);

package/lib/checkbox-group/CheckboxGroup.js

@@ -114,7 +114,11 @@ var _default = (0, _vue.defineComponent)({
         sync
       } = _ref;
       return sync(props.modelValue);
-    }); // expose
+    });
+
+    var resetWithAnimation = () => {
+      checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
+    }; // expose
 
 
     var checkAll = () => {
@@ -127,6 +131,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
       return changedModelValue;
     }; // expose
@@ -147,6 +152,7 @@ var _default = (0, _vue.defineComponent)({
         return checkedValue.value;
       });
       var changedModelValue = (0, _shared.uniq)(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
       return changedModelValue;
     }; // expose