@varlet/ui 1.27.15 → 1.27.17

package/es/collapse-item/CollapseItem.js

@@ -108,14 +108,23 @@ export default defineComponent({
 
     var closePanel = () => {
       if (!contentEl.value) return;
-      contentEl.value.style.height = 0 + 'px';
+      var {
+        offsetHeight
+      } = contentEl.value;
+      contentEl.value.style.height = offsetHeight + 'px';
+      requestAnimationFrame(() => {
+        ;
+        contentEl.value.style.height = 0 + 'px';
+      });
     };
 
     var transitionend = () => {
       if (!isShow.value) {
         show.value = false;
-        contentEl.value.style.height = '';
       }
+
+      ;
+      contentEl.value.style.height = '';
     };
 
     var collapseItemProvider = {

package/es/input/Input.js

@@ -23,7 +23,7 @@ export function render(_ctx, _cache) {
 
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), 'var--box', [_ctx.disabled, _ctx.n('--disabled')])),
-    onClick: _cache[8] || (_cache[8] = function () {
+    onClick: _cache[10] || (_cache[10] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, [_createElementVNode("div", {
@@ -69,6 +69,9 @@ export function render(_ctx, _cache) {
     }),
     onChange: _cache[3] || (_cache[3] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[4] || (_cache[4] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, "\n        ", 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -86,17 +89,20 @@ export function render(_ctx, _cache) {
       color: _ctx.textColor,
       caretColor: !_ctx.errorMessage ? _ctx.focusColor : undefined
     }),
-    onFocus: _cache[4] || (_cache[4] = function () {
+    onFocus: _cache[5] || (_cache[5] = function () {
       return _ctx.handleFocus && _ctx.handleFocus(...arguments);
     }),
-    onBlur: _cache[5] || (_cache[5] = function () {
+    onBlur: _cache[6] || (_cache[6] = function () {
       return _ctx.handleBlur && _ctx.handleBlur(...arguments);
     }),
-    onInput: _cache[6] || (_cache[6] = function () {
+    onInput: _cache[7] || (_cache[7] = function () {
       return _ctx.handleInput && _ctx.handleInput(...arguments);
     }),
-    onChange: _cache[7] || (_cache[7] = function () {
+    onChange: _cache[8] || (_cache[8] = function () {
       return _ctx.handleChange && _ctx.handleChange(...arguments);
+    }),
+    onTouchstart: _cache[9] || (_cache[9] = function () {
+      return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
@@ -277,7 +283,20 @@ export default defineComponent({
       validateWithTrigger('onClick');
     };
 
-    var withTrim = value => props.modelModifiers.trim ? value.trim() : value; // expose
+    var withTrim = value => props.modelModifiers.trim ? value.trim() : value;
+
+    var handleTouchstart = e => {
+      var {
+        disabled,
+        readonly
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      e.stopPropagation();
+    }; // expose
 
 
     var reset = () => {
@@ -329,6 +348,7 @@ export default defineComponent({
       handleChange,
       handleClear,
       handleClick,
+      handleTouchstart,
       validate,
       resetValidation,
       reset,

package/es/select/Select.js

@@ -8,7 +8,7 @@ import { props } from './props';
 import { useValidation, createNamespace, call } from '../utils/components';
 import { useOptions } from './provide';
 import { useForm } from '../form/provide';
-import { toPxNum } from '../utils/elements';
+import { getTop, toPxNum } from '../utils/elements';
 var {
   n,
   classes
@@ -457,16 +457,22 @@ export default defineComponent({
       var {
         body
       } = document;
+      var bodyScrollHeight = body.scrollHeight;
       nextTick(() => {
-        var _menuEl$value, _menuEl$value2;
+        var _menuEl$value;
 
         var {
-          offsetTop: menuOffsetTop,
           offsetHeight: menuOffsetHeight
         } = (_menuEl$value = menuEl.value) == null ? void 0 : _menuEl$value.parentElement;
-        var menuOffsetBottom = body.scrollHeight - menuOffsetHeight - menuOffsetTop;
-        if (menuOffsetTop < 0) offsetY.value = getOffsetY();
-        if (menuOffsetBottom < 0) offsetY.value -= ((_menuEl$value2 = menuEl.value) == null ? void 0 : _menuEl$value2.parentElement).offsetHeight - getOffsetY();
+        var wrapOffsetTop = getTop(wrapEl.value);
+
+        if (wrapOffsetTop + offsetY.value < 0) {
+          offsetY.value = getOffsetY();
+        }
+
+        if (menuOffsetHeight + wrapOffsetTop + offsetY.value > bodyScrollHeight) {
+          offsetY.value -= menuOffsetHeight - getOffsetY();
+        }
       });
     };
 

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; width: 100%; transform-origin: left; transition-property: top, transform, width; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); word-break: break-all; overflow-x: hidden;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; width: 133.33%; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/es/select/select.less

@@ -112,6 +112,7 @@
     font-size: inherit;
     color: var(--select-select-text-color);
     word-break: break-all;
+    overflow-x: hidden;
   }
 
   &__arrow[var-select-cover] {

package/es/skeleton/Skeleton.js

@@ -31,7 +31,8 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+  )) : _createCommentVNode("v-if", true), _ctx.avatar || _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
     class: _normalizeClass(_ctx.n('article'))
   }, [_ctx.avatar ? (_openBlock(), _createElementBlock("div", {
     key: 0,
@@ -46,7 +47,8 @@ export function render(_ctx, _cache) {
   /* CLASS */
   )], 6
   /* CLASS, STYLE */
-  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
+  )) : _createCommentVNode("v-if", true), _ctx.title || _ctx.toNumber(_ctx.rows) > 0 ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
     class: _normalizeClass(_ctx.n('section'))
   }, [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
@@ -78,9 +80,9 @@ export function render(_ctx, _cache) {
   /* KEYED_FRAGMENT */
   ))], 2
   /* CLASS */
-  )], 2
+  )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
-  )], 2
+  )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
   )) : _createCommentVNode("v-if", true), _ctx.loading && _ctx.fullscreen ? (_openBlock(), _createElementBlock("div", {
     key: 2,

package/es/slider/Slider.js

@@ -18,7 +18,7 @@ var Thumbs;
   Thumbs["Second"] = "2";
 })(Thumbs || (Thumbs = {}));
 
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, withModifiers as _withModifiers, resolveComponent as _resolveComponent, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -63,8 +63,8 @@ export function render(_ctx, _cache) {
         left: item.value + "%",
         zIndex: _ctx.thumbsProps[item.enumValue].active ? 1 : undefined
       }),
-      onTouchstart: $event => _ctx.start($event, item.enumValue),
-      onTouchmove: $event => _ctx.move($event, item.enumValue),
+      onTouchstart: _withModifiers($event => _ctx.start($event, item.enumValue), ["stop"]),
+      onTouchmove: _withModifiers($event => _ctx.move($event, item.enumValue), ["stop"]),
       onTouchend: $event => _ctx.end(item.enumValue),
       onTouchcancel: $event => _ctx.end(item.enumValue)
     }, [_renderSlot(_ctx.$slots, "button", {

package/es/snackbar/snackbar.css

@@ -1 +1 @@
-:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__transition { top: 0; position: fixed;}.var-snackbar__transition .var-snackbar__wrapper { position: absolute;}.var-snackbar__transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar__transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar__transition .var-snackbar__wrapper-bottom { bottom: 5%;}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}

package/es/snackbar/snackbar.less

@@ -121,10 +121,6 @@
     }
   }
 
-  &-fade-leave-active {
-    position: absolute;
-  }
-
   &-fade-enter-from,
   &-fade-leave-to {
     opacity: 0;