@varlet/ui 1.26.1 → 1.26.4

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,
@@ -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);
@@ -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
@@ -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
@@ -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
@@ -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")));
@@ -8016,7 +8025,7 @@ var Divider = defineComponent({
       });
     });
     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();
@@ -9038,6 +9047,7 @@ var props$t = _extends$3({
 ]));
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 350;
 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(() => {
@@ -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", {
@@ -12247,6 +12257,9 @@ var props$f = {
     type: [String, Number],
     default: "2"
   },
+  namespace: {
+    type: String
+  },
   half: {
     type: Boolean,
     default: false
@@ -12299,11 +12312,12 @@ function render$h(_ctx, _cache) {
       onClick: ($event) => _ctx.handleClick(val, $event)
     }, [createVNode(_component_var_icon, {
       transition: 0,
+      namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
       style: normalizeStyle({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
-    }, null, 8, ["name", "style"])], 14, _hoisted_3$6)), [[_directive_ripple, {
+    }, null, 8, ["namespace", "name", "style"])], 14, _hoisted_3$6)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
     }]]);
   }), 128))]), createVNode(_component_var_form_details, {
@@ -14025,9 +14039,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/attributes.json

@@ -1203,6 +1203,10 @@
     "type": "string",
     "description": "半选时图标的样式，只有在 `half` 为 `true` 时才有效 默认值：star-half-full"
   },
+  "var-rate/namespace": {
+    "type": "string",
+    "description": "图标的命名空间, 可扩展自定义图标库 默认值：var-icon"
+  },
   "var-rate/disabled": {
     "type": "boolean",
     "description": "是否禁止评分 默认值：false"

package/highlight/tags.json

@@ -455,6 +455,7 @@
       "gap",
       "half",
       "half-icon",
+      "namespace",
       "disabled",
       "disabled-color",
       "readonly",

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.3",
   "name": "VARLET",
   "contributions": {
     "html": {
@@ -3583,6 +3583,15 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "namespace",
+              "description": "图标的命名空间, 可扩展自定义图标库",
+              "default": "var-icon",
+              "value": {
+                "type": "string",
+                "kind": "expression"
+              }
+            },
             {
               "name": "disabled",
               "description": "是否禁止评分",

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

package/lib/date-picker/DatePicker.js

@@ -55,7 +55,7 @@ function render(_ctx, _cache) {
     class: (0, _vue.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'))
   }, [(0, _vue.createVNode)(_vue.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: (0, _vue.withCtx)(() => {
       var _ctx$chooseMonth, _ctx$chooseMonth2, _ctx$chooseMonth3;
@@ -245,14 +245,15 @@ var _default = (0, _vue.defineComponent)({
       return weekName.slice(0, 3) + ", " + monthName.slice(0, 3) + " " + chooseDay.value;
     });
     var slotProps = (0, _vue.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 = (0, _dayjs.default)(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 = (0, _vue.computed)(() => getChoose.value.chooseRangeDay.map(choose => (0, _dayjs.default)(choose).format('YYYY-MM-DD')));

package/lib/date-picker/src/day-picker-panel.js

@@ -59,7 +59,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.panelKey

package/lib/date-picker/src/month-picker-panel.js

@@ -53,7 +53,7 @@ function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["date", "disabled", "onCheckPanel", "onCheckDate"]), (0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("ul", {
       key: _ctx.panelKey

package/lib/date-picker/src/panel-header.js

@@ -48,7 +48,7 @@ function render(_ctx, _cache) {
     class: "var-picker-header__value",
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('check-panel'))
   }, [(0, _vue.createVNode)(_vue.Transition, {
-    name: _ctx.reverse ? 'var-date-picker-reverse-translatex' : 'var-date-picker-translatex'
+    name: "var-date-picker" + (_ctx.reverse ? '-reverse' : '') + "-translatex"
   }, {
     default: (0, _vue.withCtx)(() => [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
       key: _ctx.showDate

package/lib/divider/Divider.js

@@ -69,7 +69,7 @@ var _default = (0, _vue.defineComponent)({
     });
 
     var checkHasText = () => {
-      state.withText = Boolean(slots.default == null ? void 0 : slots.default().length) || Boolean(props.description);
+      state.withText = Boolean(slots.default) || Boolean(props.description);
     };
 
     (0, _vue.onMounted)(() => {

package/lib/image-preview/ImagePreview.js

@@ -22,6 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
 
 var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
@@ -219,11 +220,11 @@ var _default = (0, _vue.defineComponent)({
     };
 
     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 => {

package/lib/menu/Menu.js

@@ -88,7 +88,7 @@ var _default = (0, _vue.defineComponent)({
 
     var renderTransition = () => (0, _vue.createVNode)(_vue.Transition, {
       "name": "var-menu",
-      "onAfterEnter": props.onOpen,
+      "onAfterEnter": props.onOpened,
       "onAfterLeave": props.onClosed
     }, {
       default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {

package/lib/rate/Rate.js

@@ -49,13 +49,14 @@ function render(_ctx, _cache) {
       onClick: $event => _ctx.handleClick(val, $event)
     }, [(0, _vue.createVNode)(_component_var_icon, {
       transition: 0,
+      namespace: _ctx.namespace,
       name: _ctx.getIconName(val),
       style: (0, _vue.normalizeStyle)({
         fontSize: _ctx.toSizeUnit(_ctx.size)
       })
     }, null, 8
     /* PROPS */
-    , ["name", "style"])], 14
+    , ["namespace", "name", "style"])], 14
     /* CLASS, STYLE, PROPS */
     , _hoisted_3)), [[_directive_ripple, {
       disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple

package/lib/rate/props.js

@@ -33,6 +33,9 @@ var props = {
     type: [String, Number],
     default: '2'
   },
+  namespace: {
+    type: String
+  },
   half: {
     type: Boolean,
     default: false

package/lib/ripple/index.js

@@ -63,8 +63,6 @@ function createRipple(event) {
   }
 
   var task = () => {
-    var _ripple$color;
-
     _ripple.tasker = null;
     var {
       x,
@@ -79,7 +77,7 @@ function createRipple(event) {
     ripple.style.transform = "translate(" + x + "px, " + y + "px) scale3d(.3, .3, .3)";
     ripple.style.width = size + "px";
     ripple.style.height = size + "px";
-    ripple.style.backgroundColor = (_ripple$color = _ripple.color) != null ? _ripple$color : 'currentColor';
+    _ripple.color && (ripple.style.backgroundColor = _ripple.color);
     ripple.dataset.createdAt = String(performance.now());
     setStyles(this);
     this.appendChild(ripple);

package/lib/ripple/ripple.css

@@ -1 +1 @@
-:root { --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);}.var-ripple { position: absolute; transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100;}
+:root { --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6); --ripple-color: currentColor;}.var-ripple { position: absolute; transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear; top: 0; left: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; pointer-events: none; z-index: 100; background-color: var(--ripple-color);}

package/lib/ripple/ripple.less

@@ -1,7 +1,9 @@
 @ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+@ripple-color: currentColor;
 
 :root {
   --ripple-cubic-bezier: @ripple-cubic-bezier;
+  --ripple-color: @ripple-color;
 }
 
 .var-ripple {
@@ -14,4 +16,5 @@
   will-change: transform, opacity;
   pointer-events: none;
   z-index: 100;
+  background-color: var(--ripple-color);
 }

package/lib/space/Space.js

@@ -47,9 +47,28 @@ var _default = (0, _vue.defineComponent)({
         size
       } = props;
       var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
-      var lastIndex = children.length - 1;
       var isInternalSize = (0, _props.internalSizeValidator)(size);
       var [y, x] = getSize(size, isInternalSize);
+
+      var flatten = vNodes => {
+        var result = [];
+        vNodes.forEach(vNode => {
+          if (vNode.type === _vue.Comment) return;
+
+          if (vNode.type === _vue.Fragment && (0, _shared.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';