@varlet/ui 2.10.2 → 2.10.3-alpha.1683717781836

package/es/collapse-item/collapseItem.css

@@ -1 +1 @@
-:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { display: flex; font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all; flex: 1;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}
+:root { --collapse-background: #fff; --collapse-text-color: #232222; --collapse-header-font-size: var(--font-size-lg); --collapse-header-padding: 10px 12px; --collapse-content-font-size: var(--font-size-md); --collapse-content-padding: 0 12px 10px; --collapse-item-margin-top: 16px; --collapse-disable-color: #bdbdbd; --collapse-border-top: thin solid rgba(0, 0, 0, 0.12);}.var-collapse-item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; position: relative; margin-top: 0; background: var(--collapse-background); color: var(--collapse-text-color); transition: margin-top 0.25s, background-color 0.25s;}.var-collapse-item__shadow { bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; z-index: -1;}.var-collapse-item:not(:first-child)::after { border-top: var(--collapse-divider-top); content: ''; left: 0; position: absolute; right: 0; top: 0;}.var-collapse-item__header { align-items: center; display: flex; font-size: var(--collapse-header-font-size); outline: none; padding: var(--collapse-header-padding); justify-content: space-between; position: relative;}.var-collapse-item__header-title { transition: color 0.25s;}.var-collapse-item__header-icon { transform: rotate(0deg); opacity: 1;}.var-collapse-item__header-open { transform: rotate(-180deg);}.var-collapse-item__header--disable { opacity: 0;}.var-collapse-item__content { font-size: var(--collapse-content-font-size); overflow: hidden; transition: all 0.25s;}.var-collapse-item__content-wrap { padding: var(--collapse-content-padding); word-break: break-all;}.var-collapse-item--active + .var-collapse-item,.var-collapse-item--active:not(:first-child) { margin-top: var(--collapse-item-margin-top);}.var-collapse-item--active + .var-collapse-item::after,.var-collapse-item--active:not(:first-child)::after { border-top: none;}.var-collapse-item--disable { color: var(--collapse-disable-color); cursor: not-allowed;}

package/es/field-decorator/FieldDecorator.mjs

@@ -1,9 +1,10 @@
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, ref, watch, computed } from 'vue';
+import { defineComponent, ref, computed, onUpdated } from 'vue';
 import { props } from './props.mjs';
 import { isEmpty } from '@varlet/shared';
 import { createNamespace, call } from '../utils/components.mjs';
 import { useEventListener, useMounted } from '@varlet/use';
+import { getRect, getStyle } from '../utils/elements.mjs';
 var {
   n,
   classes
@@ -19,10 +20,6 @@ function __render__(_ctx, _cache) {
 
   return _openBlock(), _createElementBlock("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.variant), [_ctx.size === 'small', _ctx.n('--small')], [_ctx.disabled, _ctx.n('--disabled')])),
-    style: _normalizeStyle({
-      '--field-decorator-legend-max-width': _ctx.legendMaxWidth,
-      '--filed-decorator-controller-width': _ctx.controllerWidth
-    }),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
@@ -31,35 +28,38 @@ function __render__(_ctx, _cache) {
     ref: "controllerEl",
     style: _normalizeStyle({
       color: _ctx.color,
-      cursor: _ctx.cursor
+      cursor: _ctx.cursor,
+      overflow: _ctx.isFloating ? 'visible' : 'hidden'
     })
   }, [_createElementVNode("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--icon-non-hint')])),
-    ref: "prependIconEl"
+    class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--icon-non-hint')]))
   }, [_renderSlot(_ctx.$slots, "prepend-icon")], 2
   /* CLASS */
   ), _createElementVNode("div", {
+    ref: "middleEl",
     class: _normalizeClass(_ctx.classes(_ctx.n('middle'), [!_ctx.hint, _ctx.n('--middle-non-hint')]))
-  }, [_renderSlot(_ctx.$slots, "default"), _ctx.hint || _ctx.alwaysCustomPlaceholder ? (_openBlock(), _createElementBlock("label", {
+  }, [_renderSlot(_ctx.$slots, "default")], 2
+  /* CLASS */
+  ), (_ctx.hint || _ctx.alwaysCustomPlaceholder) && _ctx.placeholderTransform ? (_openBlock(), _createElementBlock("label", {
     key: 0,
     class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), _ctx.n('$--ellipsis'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')], [_ctx.errorMessage, _ctx.n('--error')], [!_ctx.hint, _ctx.n('--placeholder-non-hint')], _ctx.computePlaceholderState())),
     style: _normalizeStyle({
+      color: _ctx.color,
       transform: _ctx.placeholderTransform,
-      color: _ctx.color
+      maxWidth: _ctx.placeholderMaxWidth
     }),
     for: _ctx.id
   }, [_createElementVNode("span", null, _toDisplayString(_ctx.placeholder), 1
   /* TEXT */
-  ), _createElementVNode("span", {
-    class: _normalizeClass(_ctx.n('placeholder-text')),
-    ref: "placeholderTextEl"
-  }, _toDisplayString(_ctx.placeholder), 3
-  /* TEXT, CLASS */
   )], 14
   /* CLASS, STYLE, PROPS */
-  , _hoisted_1)) : _createCommentVNode("v-if", true)], 2
-  /* CLASS */
-  ), _createElementVNode("div", {
+  , _hoisted_1)) : _createCommentVNode("v-if", true), _ctx.variant === 'outlined' ? (_openBlock(), _createElementBlock("span", {
+    key: 1,
+    ref: "placeholderTextEl",
+    class: _normalizeClass([_ctx.n('placeholder-text'), _ctx.n('$--ellipsis')])
+  }, _toDisplayString(_ctx.placeholder), 3
+  /* TEXT, CLASS */
+  )) : _createCommentVNode("v-if", true), _createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('icon'), [!_ctx.hint, _ctx.n('--icon-non-hint')]))
   }, [_ctx.clearable && !_ctx.isEmpty(_ctx.value) ? (_openBlock(), _createBlock(_component_var_icon, {
     key: 0,
@@ -78,17 +78,18 @@ function __render__(_ctx, _cache) {
   }, [_ctx.variant === 'outlined' ? (_openBlock(), _createElementBlock("fieldset", {
     key: 0,
     class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.isFocus, _ctx.n('--line-focus')], [_ctx.errorMessage, _ctx.n('--line-error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')])),
-    ref: "fieldsetEl"
+    style: _normalizeStyle({
+      borderColor: _ctx.color
+    })
   }, [_createElementVNode("legend", {
-    class: _normalizeClass(_ctx.classes(_ctx.n('line-legend'), [_ctx.isFloating(), _ctx.n('line-legend--hint')])),
+    class: _normalizeClass(_ctx.classes(_ctx.n('line-legend'), [_ctx.isFloating, _ctx.n('line-legend--hint')])),
     style: _normalizeStyle({
-      width: _ctx.legendWidth,
-      maxWidth: _ctx.legendMaxWidth
+      width: _ctx.legendWidth
     })
   }, null, 6
   /* CLASS, STYLE */
-  )], 2
-  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
   )) : (_openBlock(), _createElementBlock("div", {
     key: 1,
     class: _normalizeClass(_ctx.classes(_ctx.n('line'), [_ctx.formDisabled || _ctx.disabled, _ctx.n('--line-disabled')], [_ctx.errorMessage, _ctx.n('--line-error')])),
@@ -106,8 +107,8 @@ function __render__(_ctx, _cache) {
   /* CLASS, STYLE */
   ))], 2112
   /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-  )) : _createCommentVNode("v-if", true)], 6
-  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 2
+  /* CLASS */
   );
 }
 
@@ -119,71 +120,55 @@ var __sfc__ = defineComponent({
   props,
 
   setup(props) {
-    var fieldsetEl = ref(null);
     var controllerEl = ref(null);
+    var middleEl = ref(null);
     var placeholderTextEl = ref(null);
-    var prependIconEl = ref(null);
-    var legendMaxWidth = ref('');
     var legendWidth = ref('');
-    var controllerWidth = ref('');
     var placeholderTransform = ref('');
+    var placeholderMaxWidth = ref('');
     var color = computed(() => !props.errorMessage ? props.isFocus ? props.focusColor : props.blurColor : undefined);
+    var isFloating = computed(() => props.hint && (!isEmpty(props.value) || props.isFocus));
 
     var computePlaceholderState = () => {
       var {
         hint,
         value,
-        isFocus,
         composing
       } = props;
 
       if (!hint && (!isEmpty(value) || composing)) {
         return n('--placeholder-hidden');
       }
-
-      if (hint && (!isEmpty(value) || isFocus)) {
-        return n('--placeholder-hint');
-      }
-    };
-
-    var resetSize = () => {
-      legendWidth.value = '';
-      legendMaxWidth.value = '';
-      placeholderTransform.value = '';
-      controllerWidth.value = '';
     };
 
-    var isFloating = () => props.hint && (!isEmpty(props.value) || props.isFocus);
-
     var resize = () => {
-      var _window$getComputedSt, _window$getComputedSt2;
-
       var {
         size,
+        hint,
         placeholder,
         variant
       } = props;
 
-      if (!isFloating() || !placeholder) {
-        resetSize();
+      if (!isFloating.value || !placeholder) {
+        var controllerRect = getRect(controllerEl.value);
+        var middleRect = getRect(middleEl.value);
+        var translateX = middleRect.left - controllerRect.left + "px";
+        placeholderTransform.value = hint ? "translate(" + translateX + ", calc(var(--field-decorator-" + variant + "-" + size + "-placeholder-translate-y) + var(--field-decorator-middle-offset-y))) scale(1)" : "translate(" + translateX + ", -50%)";
+        placeholderMaxWidth.value = middleRect.width + "px";
         return;
       }
 
-      var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
-      var placeholderTextWidth = (_window$getComputedSt = window.getComputedStyle(placeholderTextEl.value)) == null ? void 0 : _window$getComputedSt.width;
-      var prependIconWidth = (_window$getComputedSt2 = window.getComputedStyle(prependIconEl.value)) == null ? void 0 : _window$getComputedSt2.width;
+      var controllerStyle = getStyle(controllerEl.value);
       var translateY = variant === 'outlined' ? '-50%' : '0';
-      placeholderTransform.value = "translate(-" + prependIconWidth + ", " + translateY + ") scale(0.75)";
-      controllerWidth.value = window.getComputedStyle(controllerEl.value).width;
+      placeholderTransform.value = "translate(" + controllerStyle.paddingLeft + ", " + translateY + ") scale(0.75)";
 
       if (variant === 'outlined') {
-        var {
-          width,
-          paddingLeft,
-          paddingRight
-        } = window.getComputedStyle(fieldsetEl.value);
-        legendWidth.value = "calc(" + placeholderTextWidth + " * 0.75 + 2 * " + placeholderSpace + ")";
-        legendMaxWidth.value = "calc(" + width + " - " + paddingLeft + " - " + paddingRight + ")";
+        var placeholderTextStyle = getStyle(placeholderTextEl.value);
+        var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
+        legendWidth.value = "calc(" + placeholderTextStyle.width + " * 0.75 + " + placeholderSpace + " * 2)";
+        placeholderMaxWidth.value = "calc((100% - var(--field-decorator-outlined-" + size + "-padding-left) - var(--field-decorator-outlined-" + size + "-padding-right)) * 1.33)";
+      } else {
+        placeholderMaxWidth.value = '133%';
       }
     };
 
@@ -195,19 +180,17 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    watch(() => [props.size, props.placeholder, props.hint, props.value, props.isFocus, props.variant], resize);
+    onUpdated(resize);
     useMounted(resize);
     useEventListener(() => window, 'resize', resize);
     return {
-      fieldsetEl,
       controllerEl,
+      middleEl,
       placeholderTextEl,
-      prependIconEl,
       placeholderTransform,
+      placeholderMaxWidth,
       color,
       legendWidth,
-      legendMaxWidth,
-      controllerWidth,
       isFloating,
       computePlaceholderState,
       n,

package/es/field-decorator/fieldDecorator.css

@@ -1 +1 @@
-:root { --field-decorator-middle-offset-y: 0.01px; --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { width: 100%; position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform: translate(0, 0) scale(1); transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s;}.var-field-decorator__placeholder-text { position: absolute; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hint { width: calc(1.33 * var(--field-decorator-legend-max-width, var(--filed-decorator-controller-width)));}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-normal-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--placeholder-non-hint { transform: translate(0, -50%); top: 50%;}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined .var-field-decorator__line { width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-small-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}
+:root { --field-decorator-middle-offset-y: 0.01px; --field-decorator-text-color: #555; --field-decorator-error-color: var(--color-danger); --field-decorator-blur-color: #888; --field-decorator-focus-color: var(--color-primary); --field-decorator-placeholder-size: 16px; --field-decorator-icon-size: 20px; --field-decorator-line-size: 1px; --field-decorator-line-focus-size: 2px; --field-decorator-disabled-color: var(--color-text-disabled); --field-decorator-standard-normal-padding-top: 22px; --field-decorator-standard-normal-padding-bottom: 4px; --field-decorator-standard-normal-icon-padding: 22px 0 4px; --field-decorator-standard-normal-non-hint-padding-top: 4px; --field-decorator-standard-normal-placeholder-translate-y: var(--field-decorator-standard-normal-padding-top); --field-decorator-standard-small-padding-top: 18px; --field-decorator-standard-small-padding-bottom: 4px; --field-decorator-standard-small-icon-padding: 18px 0 4px; --field-decorator-standard-small-non-hint-padding-top: 2px; --field-decorator-standard-small-placeholder-translate-y: var(--field-decorator-standard-small-padding-top); --field-decorator-outlined-normal-padding-top: 16px; --field-decorator-outlined-normal-padding-bottom: 16px; --field-decorator-outlined-normal-padding-left: 16px; --field-decorator-outlined-normal-padding-right: 16px; --field-decorator-outlined-normal-placeholder-space: 4px; --field-decorator-outlined-normal-icon-padding: 16px 0 16px; --field-decorator-outlined-normal-placeholder-translate-y: var(--field-decorator-outlined-normal-padding-top); --field-decorator-outlined-small-padding-top: 8px; --field-decorator-outlined-small-padding-bottom: 8px; --field-decorator-outlined-small-padding-left: 12px; --field-decorator-outlined-small-padding-right: 12px; --field-decorator-outlined-small-placeholder-space: 2px; --field-decorator-outlined-small-icon-padding: 8px 0 8px; --field-decorator-outlined-small-placeholder-translate-y: var(--field-decorator-outlined-small-padding-top);}.var-field-decorator { position: relative; width: 100%; color: var(--field-decorator-text-color);}.var-field-decorator__controller { width: 100%; display: flex; align-items: stretch; position: relative;}.var-field-decorator__middle { position: relative; flex-grow: 1; display: flex;}.var-field-decorator__icon { display: flex; align-items: center; font-size: var(--field-decorator-icon-size);}.var-field-decorator__icon .var-icon { font-size: var(--field-decorator-icon-size);}.var-field-decorator__placeholder { position: absolute; top: 0; left: 0; font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit; transform: translate(0, 0) scale(1); transform-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;}.var-field-decorator--placeholder-non-hint { top: 50%;}.var-field-decorator__clear-icon[var-field-decorator-cover] { font-size: var(--field-decorator-icon-size); margin-left: 6px; cursor: pointer;}.var-field-decorator--placeholder-hidden { visibility: hidden;}.var-field-decorator--focus { color: var(--field-decorator-focus-color);}.var-field-decorator--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-field-decorator--error { color: var(--field-decorator-error-color);}.var-field-decorator--standard .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-normal-padding-bottom);}.var-field-decorator--standard .var-field-decorator__icon { padding: var(--field-decorator-standard-normal-icon-padding);}.var-field-decorator--standard .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard .var-field-decorator__line { width: 100%; height: var(--field-decorator-line-size); background: var(--field-decorator-blur-color); transition: background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--line-disabled { background: var(--field-decorator-disabled-color);}.var-field-decorator--standard .var-field-decorator__dot { width: 100%; height: var(--field-decorator-line-focus-size); background: var(--field-decorator-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier), background-color 0.25s;}.var-field-decorator--standard .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-normal-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-normal-non-hint-padding-top);}.var-field-decorator--standard .var-field-decorator--line-focus { transform: scaleX(1);}.var-field-decorator--standard .var-field-decorator--line-error { background: var(--field-decorator-error-color);}.var-field-decorator--outlined .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-normal-padding-right) 0 var(--field-decorator-outlined-normal-padding-left);}.var-field-decorator--outlined .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-normal-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-normal-padding-bottom) 0;}.var-field-decorator--outlined .var-field-decorator__icon { padding: var(--field-decorator-outlined-normal-icon-padding);}.var-field-decorator--outlined .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-normal-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined .var-field-decorator__placeholder-text { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); position: absolute; left: 0; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator--outlined .var-field-decorator__line { min-width: 0; width: 100%; height: calc(100% + (var(--field-decorator-placeholder-size) * 0.75 / 2)); position: absolute; top: calc(var(--field-decorator-placeholder-size) * 0.75 / 2 * -1); left: 0; pointer-events: none; border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-blur-color); overflow: hidden; padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-size)); margin: 0;}.var-field-decorator--outlined .var-field-decorator__line-legend { max-width: 0; height: calc(var(--field-decorator-placeholder-size) * 0.75); visibility: hidden; padding: 0; overflow: hidden; display: block; white-space: nowrap;}.var-field-decorator--outlined .var-field-decorator__line-legend--hint { max-width: 100%;}.var-field-decorator--outlined .var-field-decorator--line-focus { border-width: var(--field-decorator-line-focus-size); border-color: var(--field-decorator-focus-color); padding: 0 calc(var(--field-decorator-outlined-normal-padding-right) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-placeholder-space) - var(--field-decorator-line-focus-size));}.var-field-decorator--outlined .var-field-decorator--line-disabled { border-radius: 4px; border: var(--field-decorator-line-size) solid var(--field-decorator-disabled-color);}.var-field-decorator--outlined .var-field-decorator--line-error { border-color: var(--field-decorator-error-color) !important;}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-standard-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-standard-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { padding-top: calc(var(--field-decorator-standard-small-non-hint-padding-top) + var(--field-decorator-middle-offset-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--icon-non-hint { padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__controller { padding: 0 var(--field-decorator-outlined-small-padding-right) 0 var(--field-decorator-outlined-small-padding-left);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__middle { padding: calc(var(--field-decorator-outlined-small-padding-top) + var(--field-decorator-middle-offset-y)) 0 var(--field-decorator-outlined-small-padding-bottom) 0;}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__icon { padding: var(--field-decorator-outlined-small-icon-padding);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, calc(var(--field-decorator-outlined-small-placeholder-translate-y) + var(--field-decorator-middle-offset-y)));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__placeholder-text { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator__line { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-size));}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--line-focus { padding: 0 calc(var(--field-decorator-outlined-small-padding-right) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size)) 0 calc(var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-placeholder-space) - var(--field-decorator-line-focus-size));}

package/es/image-preview/imagePreview.css

@@ -1 +1 @@
-:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: transparent;}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s; background: var(--image-preview-zoom-container-background);}
+:root { --image-preview-swipe-indicators-text-color: #ddd; --image-preview-swipe-indicators-padding: 16px 0; --image-preview-zoom-container-background: #000; --image-preview-close-icon-top: 14px; --image-preview-close-icon-right: 14px; --image-preview-extra-top: 14px; --image-preview-extra-left: 14px; --image-preview-close-icon-size: 22px; --image-preview-close-icon-color: #fff;}.var-image-preview__popup[var-image-preview-cover] { height: 100%; background: var(--image-preview-zoom-container-background);}.var-image-preview__swipe[var-image-preview-cover] { width: 100vw; height: 100%;}.var-image-preview__swipe-item[var-image-preview-cover] { overflow: hidden;}.var-image-preview__close-icon[var-image-preview-cover] { position: absolute; top: var(--image-preview-close-icon-top); right: var(--image-preview-close-icon-right); color: var(--image-preview-close-icon-color); font-size: var(--image-preview-close-icon-size);}.var-image-preview__extra { position: absolute; top: var(--image-preview-extra-top); left: var(--image-preview-extra-left);}.var-image-preview__indicators { position: absolute; top: 0; width: 100%; padding: var(--image-preview-swipe-indicators-padding); color: var(--image-preview-swipe-indicators-text-color); text-align: center;}.var-image-preview__image { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none;}.var-image-preview__zoom-container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100%; transition: transform 0.2s;}

package/es/index.bundle.mjs

@@ -241,7 +241,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.10.2'
+const version = '2.10.3-alpha.1683717781836'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -160,7 +160,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.10.2'
+const version = '2.10.3-alpha.1683717781836'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/lazy/index.mjs

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { getAllParentScroller, inViewport } from '../utils/elements.mjs';
+import { doubleRaf, getAllParentScroller, inViewport } from '../utils/elements.mjs';
 import { removeItem, throttle } from '@varlet/shared';
 import { createCache } from '../utils/shared.mjs';
 import { call } from '../utils/components.mjs';
@@ -140,8 +140,11 @@ function check(_x) {
 
 function _check() {
   _check = _asyncToGenerator(function* (el) {
-    ;
-    (yield inViewport(el)) && attemptLoad(el);
+    yield doubleRaf();
+
+    if (inViewport(el)) {
+      attemptLoad(el);
+    }
   });
   return _check.apply(this, arguments);
 }

package/es/list/List.mjs

@@ -5,7 +5,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import VarLoading from '../loading/index.mjs';
 import Ripple from '../ripple/index.mjs';
 import { defineComponent, onUnmounted, ref, nextTick, onDeactivated } from 'vue';
-import { getParentScroller, toPxNum } from '../utils/elements.mjs';
+import { getParentScroller, getRect, toPxNum } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isNumber } from '@varlet/shared';
 import { dt } from '../utils/shared.mjs';
@@ -88,10 +88,12 @@ var __sfc__ = defineComponent({
     };
 
     var isReachBottom = () => {
-      var containerBottom = scroller === window ? window.innerHeight : scroller.getBoundingClientRect().bottom;
+      var {
+        bottom: containerBottom
+      } = getRect(scroller);
       var {
         bottom: detectorBottom
-      } = detectorEl.value.getBoundingClientRect(); // The fractional part of the detectorBottom when bottoming out overflows
+      } = getRect(detectorEl.value); // 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;

package/es/snackbar/style/index.mjs

@@ -1,8 +1,8 @@
 import '../../styles/common.css'
+import '../SnackbarSfc.css'
 import '../../styles/elevation.css'
 import '../../loading/loading.css'
 import '../../button/button.css'
 import '../../icon/icon.css'
 import '../snackbar.css'
 import '../coreSfc.css'
-import '../SnackbarSfc.css'