@varlet/ui 1.26.1-alpha.1644652196468 → 1.26.3

package/es/badge/Badge.js

@@ -59,7 +59,7 @@ export default 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/es/checkbox/Checkbox.js

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

package/es/checkbox-group/CheckboxGroup.js

@@ -99,7 +99,11 @@ export default defineComponent({
         sync
       } = _ref;
       return sync(props.modelValue);
-    }); // expose
+    });
+
+    var resetWithAnimation = () => {
+      checkboxes.forEach(checkbox => checkbox.resetWithAnimation());
+    }; // expose
 
 
     var checkAll = () => {
@@ -112,6 +116,7 @@ export default defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
       return changedModelValue;
     }; // expose
@@ -132,6 +137,7 @@ export default defineComponent({
         return checkedValue.value;
       });
       var changedModelValue = uniq(checkedValues);
+      resetWithAnimation();
       (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
       return changedModelValue;
     }; // expose

package/es/date-picker/DatePicker.js

@@ -40,7 +40,7 @@ export function render(_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;
@@ -225,14 +225,15 @@ export default 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')));

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

@@ -41,7 +41,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["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

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

@@ -35,7 +35,7 @@ export function render(_ctx, _cache) {
   }, null, 8
   /* PROPS */
   , ["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

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

@@ -36,7 +36,7 @@ export function render(_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

package/es/divider/Divider.js

@@ -59,7 +59,7 @@ export default 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);
     };
 
     onMounted(() => {

package/es/image-preview/ImagePreview.js

@@ -7,6 +7,7 @@ import { props } from './props';
 import { toNumber } from '../utils/shared';
 var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
+var TAP_DELAY = 250;
 var ANIMATION_DURATION = 200;
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
@@ -203,11 +204,11 @@ export default 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/es/list/List.js

@@ -89,8 +89,10 @@ export default defineComponent({
       var containerBottom = scroller === window ? window.innerHeight : scroller.getBoundingClientRect().bottom;
       var {
         bottom: detectorBottom
-      } = detectorEl.value.getBoundingClientRect();
-      return detectorBottom - toPxNum(props.offset) <= containerBottom;
+      } = detectorEl.value.getBoundingClientRect(); // The fractional part of the detectorBottom when bottoming out overflows
+      // https://github.com/varletjs/varlet/issues/310
+
+      return Math.floor(detectorBottom) - toPxNum(props.offset) <= containerBottom;
     }; // expose
 
 

package/es/menu/Menu.js

@@ -78,7 +78,7 @@ export default defineComponent({
 
     var renderTransition = () => _createVNode(Transition, {
       "name": "var-menu",
-      "onAfterEnter": props.onOpen,
+      "onAfterEnter": props.onOpened,
       "onAfterLeave": props.onClosed
     }, {
       default: () => [_withDirectives(_createVNode("div", {

package/es/ripple/index.js

@@ -53,8 +53,6 @@ function createRipple(event) {
   }
 
   var task = () => {
-    var _ripple$color;
-
     _ripple.tasker = null;
     var {
       x,
@@ -69,7 +67,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/es/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/es/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/es/slider/Slider.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = 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.apply(this, arguments); }
+
 import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
 import { useValidation } from '../utils/components';
 import { useForm } from '../form/provide';
@@ -74,11 +76,9 @@ export function render(_ctx, _cache) {
     /* STYLE */
     ), _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 === undefined ? undefined : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : '0px',
-        width: _ctx.thumbSize === undefined ? undefined : _ctx.thumbsProps[item.enumValue].active ? 3 * _ctx.toNumber(_ctx.thumbSize) + "px" : '0px'
-      })
+      style: _normalizeStyle(_extends({
+        background: _ctx.thumbColor
+      }, _ctx.getRippleSize(item)))
     }, null, 6
     /* CLASS, STYLE */
     ), _createElementVNode("div", {
@@ -166,6 +166,19 @@ export default defineComponent({
       return list;
     });
 
+    var getRippleSize = item => {
+      var size;
+
+      if (props.thumbSize !== undefined) {
+        size = thumbsProps[item.enumValue].active ? 3 * toNumber(props.thumbSize) + "px" : '0px';
+      }
+
+      return {
+        height: size,
+        width: size
+      };
+    };
+
     var showLabel = type => {
       if (props.labelVisible === 'always') return true;
       if (props.labelVisible === 'never') return false;
@@ -369,6 +382,7 @@ export default defineComponent({
       thumbsProps,
       thumbList,
       toNumber,
+      getRippleSize,
       showLabel,
       start,
       move,

package/es/space/Space.js

@@ -1,5 +1,5 @@
 import { createVNode as _createVNode } from "vue";
-import { defineComponent } from 'vue';
+import { defineComponent, Fragment, Comment } from 'vue';
 import { internalSizeValidator, props } from './props';
 import { toPxNum } from '../utils/elements';
 import { isArray } from '../utils/shared';
@@ -36,9 +36,28 @@ export default defineComponent({
         size
       } = props;
       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';