@varlet/ui 2.11.2 → 2.11.3-alpha.1685462737961

package/es/field-decorator/FieldDecorator.mjs

@@ -1,15 +1,15 @@
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, ref, computed, onUpdated } from 'vue';
+import { defineComponent, ref, computed, watch } 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';
+import { getStyle } from '../utils/elements.mjs';
 var {
   n,
   classes
 } = createNamespace('field-decorator');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createBlock as _createBlock, Teleport as _Teleport, Fragment as _Fragment, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -25,7 +25,6 @@ function __render__(_ctx, _cache) {
     })
   }, [_createElementVNode("div", {
     class: _normalizeClass(_ctx.classes(_ctx.n('controller'), [_ctx.isFocus, _ctx.n('--focus')], [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
-    ref: "controllerEl",
     style: _normalizeStyle({
       color: _ctx.color,
       cursor: _ctx.cursor,
@@ -36,30 +35,21 @@ function __render__(_ctx, _cache) {
   }, [_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")], 2
   /* CLASS */
-  ), (_ctx.hint || _ctx.alwaysCustomPlaceholder) && _ctx.placeholderTransform ? (_openBlock(), _createElementBlock("label", {
+  ), _ctx.hint ? (_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())),
+    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.computePlaceholderState())),
     style: _normalizeStyle({
-      color: _ctx.color,
-      transform: _ctx.placeholderTransform,
-      maxWidth: _ctx.placeholderMaxWidth
+      color: _ctx.color
     }),
     for: _ctx.id
   }, [_createElementVNode("span", null, _toDisplayString(_ctx.placeholder), 1
   /* TEXT */
   )], 14
   /* CLASS, STYLE, PROPS */
-  , _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", {
+  , _hoisted_1)) : _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,
@@ -86,7 +76,15 @@ function __render__(_ctx, _cache) {
     style: _normalizeStyle({
       width: _ctx.legendWidth
     })
-  }, null, 6
+  }, [_ctx.hint ? (_openBlock(), _createBlock(_Teleport, {
+    key: 0,
+    to: "body"
+  }, [_createElementVNode("span", {
+    ref: "placeholderTextEl",
+    class: _normalizeClass(_ctx.classes(_ctx.n('placeholder-text'), _ctx.n('$--ellipsis'), [_ctx.size === 'small', _ctx.n('placeholder-text--small')]))
+  }, _toDisplayString(_ctx.placeholder), 3
+  /* TEXT, CLASS */
+  )])) : _createCommentVNode("v-if", true)], 6
   /* CLASS, STYLE */
   )], 6
   /* CLASS, STYLE */
@@ -119,15 +117,14 @@ var __sfc__ = defineComponent({
   },
   props,
 
-  setup(props) {
-    var controllerEl = ref(null);
-    var middleEl = ref(null);
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
     var placeholderTextEl = ref(null);
     var legendWidth = 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 isFloating = computed(() => props.hint && (!isEmpty(props.value) || props.isFocus || slots['prepend-icon']));
 
     var computePlaceholderState = () => {
       var {
@@ -139,37 +136,27 @@ var __sfc__ = defineComponent({
       if (!hint && (!isEmpty(value) || composing)) {
         return n('--placeholder-hidden');
       }
+
+      if (isFloating.value) {
+        return n('--placeholder-hint');
+      }
     };
 
     var resize = () => {
       var {
         size,
         hint,
-        placeholder,
         variant
       } = props;
 
-      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";
+      if (!hint || variant !== 'outlined') {
+        legendWidth.value = '';
         return;
       }
 
-      var controllerStyle = getStyle(controllerEl.value);
-      var translateY = variant === 'outlined' ? '-50%' : '0';
-      placeholderTransform.value = "translate(" + controllerStyle.paddingLeft + ", " + translateY + ") scale(0.75)";
-
-      if (variant === 'outlined') {
-        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%';
-      }
+      var placeholderTextStyle = getStyle(placeholderTextEl.value);
+      var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
+      legendWidth.value = "calc(" + placeholderTextStyle.width + " * 0.75 + " + placeholderSpace + " * 2)";
     };
 
     var handleClear = e => {
@@ -180,15 +167,11 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    onUpdated(resize);
     useMounted(resize);
+    watch(() => [props.size, props.hint, props.variant], resize);
     useEventListener(() => window, 'resize', resize);
     return {
-      controllerEl,
-      middleEl,
       placeholderTextEl,
-      placeholderTransform,
-      placeholderMaxWidth,
       color,
       legendWidth,
       isFloating,

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 { 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));}
+:root { --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; justify-content: center; align-items: center;}.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-origin: left; transition: transform 0.28s var(--cubic-bezier), color 0.25s, max-width 0.2s;}.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: var(--field-decorator-standard-normal-padding-top) 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 { max-width: 100%; transform: translate(0, var(--field-decorator-standard-normal-placeholder-translate-y));}.var-field-decorator--standard .var-field-decorator--placeholder-hint { max-width: 133%; transform: translate(0, 0) scale(0.75) !important;}.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: var(--field-decorator-standard-normal-non-hint-padding-top);}.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: var(--field-decorator-outlined-normal-padding-top) 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 { max-width: calc(100% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(var(--field-decorator-outlined-normal-padding-left), var(--field-decorator-outlined-normal-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined .var-field-decorator--placeholder-hint { max-width: calc(133% - var(--field-decorator-outlined-normal-padding-left) - var(--field-decorator-outlined-normal-padding-right)); transform: translate(calc(var(--field-decorator-outlined-normal-padding-left)), -50%) scale(0.75);}.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: var(--field-decorator-standard-small-padding-top) 0 var(--field-decorator-standard-small-padding-bottom);}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator__placeholder { transform: translate(0, var(--field-decorator-standard-small-placeholder-translate-y));}.var-field-decorator--standard.var-field-decorator--small .var-field-decorator--middle-non-hint { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); padding-top: var(--field-decorator-standard-small-non-hint-padding-top);}.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: var(--field-decorator-outlined-small-padding-top) 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 { max-width: calc(100% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right)); transform: translate(var(--field-decorator-outlined-small-padding-left), var(--field-decorator-outlined-small-placeholder-translate-y)) scale(1);}.var-field-decorator--outlined.var-field-decorator--small .var-field-decorator--placeholder-hint { transform: translate(calc(var(--field-decorator-outlined-small-padding-left)), -50%) scale(0.75);}.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));}.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; z-index: -1; display: inline-block; pointer-events: none; opacity: 0;}.var-field-decorator__placeholder-text--small { max-width: calc(133% - var(--field-decorator-outlined-small-padding-left) - var(--field-decorator-outlined-small-padding-right));}

package/es/field-decorator/props.mjs

@@ -68,10 +68,6 @@ export var props = {
     type: Boolean,
     default: false
   },
-  alwaysCustomPlaceholder: {
-    type: Boolean,
-    default: true
-  },
   onClick: defineListenerProp(),
   onClear: defineListenerProp()
 };

package/es/image/Image.mjs

@@ -1,6 +1,6 @@
 import Ripple from '../ripple/index.mjs';
 import Lazy from '../lazy/index.mjs';
-import { defineComponent } from 'vue';
+import { watch, defineComponent, ref } from 'vue';
 import { props } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
@@ -8,11 +8,11 @@ var {
   n,
   classes
 } = createNamespace('image');
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, withDirectives as _withDirectives, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = ["alt", "title", "lazy-error", "lazy-loading"];
+var _hoisted_1 = ["alt", "title", "lazy-loading", "lazy-error"];
 var _hoisted_2 = ["alt", "title", "src"];
 
 function __render__(_ctx, _cache) {
@@ -25,30 +25,27 @@ function __render__(_ctx, _cache) {
     style: _normalizeStyle({
       width: _ctx.toSizeUnit(_ctx.width),
       height: _ctx.toSizeUnit(_ctx.height),
-      'border-radius': _ctx.toSizeUnit(_ctx.radius)
+      borderRadius: _ctx.toSizeUnit(_ctx.radius)
     })
-  }, [_ctx.lazy ? _withDirectives((_openBlock(), _createElementBlock("img", {
+  }, [_ctx.lazy && !_ctx.showErrorSlot ? _withDirectives((_openBlock(), _createElementBlock("img", {
     key: 0,
     class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
     title: _ctx.title,
-    "lazy-error": _ctx.error,
     "lazy-loading": _ctx.loading,
+    "lazy-error": _ctx.error,
     style: _normalizeStyle({
       objectFit: _ctx.fit
     }),
     onLoad: _cache[0] || (_cache[0] = function () {
       return _ctx.handleLoad && _ctx.handleLoad(...arguments);
     }),
-    onError: _cache[1] || (_cache[1] = function () {
-      return _ctx.handleError && _ctx.handleError(...arguments);
-    }),
-    onClick: _cache[2] || (_cache[2] = function () {
+    onClick: _cache[1] || (_cache[1] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : (_openBlock(), _createElementBlock("img", {
+  , _hoisted_1)), [[_directive_lazy, _ctx.src]]) : _createCommentVNode("v-if", true), !_ctx.lazy && !_ctx.showErrorSlot ? (_openBlock(), _createElementBlock("img", {
     key: 1,
     class: _normalizeClass(_ctx.n('image')),
     alt: _ctx.alt,
@@ -57,18 +54,20 @@ function __render__(_ctx, _cache) {
       objectFit: _ctx.fit
     }),
     src: _ctx.src,
-    onLoad: _cache[3] || (_cache[3] = function () {
+    onLoad: _cache[2] || (_cache[2] = function () {
       return _ctx.handleLoad && _ctx.handleLoad(...arguments);
     }),
-    onError: _cache[4] || (_cache[4] = function () {
+    onError: _cache[3] || (_cache[3] = function () {
       return _ctx.handleError && _ctx.handleError(...arguments);
     }),
-    onClick: _cache[5] || (_cache[5] = function () {
+    onClick: _cache[4] || (_cache[4] = function () {
       return _ctx.handleClick && _ctx.handleClick(...arguments);
     })
   }, null, 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_2))], 6
+  , _hoisted_2)) : _createCommentVNode("v-if", true), _ctx.showErrorSlot ? _renderSlot(_ctx.$slots, "error", {
+    key: 2
+  }) : _createCommentVNode("v-if", true)], 6
   /* CLASS, STYLE */
   )), [[_directive_ripple, {
     disabled: !_ctx.ripple
@@ -83,38 +82,46 @@ var __sfc__ = defineComponent({
   },
   props,
 
-  setup(props) {
+  setup(props, _ref) {
+    var {
+      slots
+    } = _ref;
+    var showErrorSlot = ref(false);
+
+    var handleError = e => {
+      // the value of showErrorSlot depends on whether there is an error slot
+      showErrorSlot.value = !!slots.error;
+      call(props.onError, e);
+    };
+
     var handleLoad = e => {
       var el = e.currentTarget;
-      var {
-        lazy,
-        onLoad,
-        onError
-      } = props;
 
-      if (lazy) {
-        el._lazy.state === 'success' && call(onLoad, e);
-        el._lazy.state === 'error' && call(onError, e);
+      if (props.lazy) {
+        if (el._lazy.state === 'success') {
+          call(props.onLoad, e);
+          return;
+        }
+
+        if (el._lazy.state === 'error') {
+          handleError(e);
+        }
       } else {
-        call(onLoad, e);
+        call(props.onLoad, e);
       }
     };
 
-    var handleError = e => {
-      var {
-        lazy,
-        onError
-      } = props;
-      !lazy && call(onError, e);
-    };
-
     var handleClick = e => {
       call(props.onClick, e);
     };
 
+    watch(() => props.src, () => {
+      showErrorSlot.value = false;
+    });
     return {
       n,
       classes,
+      showErrorSlot,
       toSizeUnit,
       handleLoad,
       handleError,

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.11.2'
+const version = '2.11.3-alpha.1685462737961'
 
 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.11.2'
+const version = '2.11.3-alpha.1685462737961'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -10,7 +10,7 @@ var {
   n,
   classes
 } = createNamespace('input');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createVNode as _createVNode, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, withModifiers as _withModifiers, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -46,11 +46,9 @@ function __render__(_ctx, _cache) {
     clearable: _ctx.clearable,
     cursor: _ctx.cursor,
     composing: _ctx.isComposing,
-    alwaysCustomPlaceholder: false,
     onClick: _ctx.handleClick,
     onClear: _ctx.handleClear
-  })), {
-    "prepend-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+  })), _createSlots({
     "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
     default: _withCtx(() => [_ctx.normalizedType === 'password' ? (_openBlock(), _createElementBlock("input", {
       key: 0,
@@ -147,11 +145,15 @@ function __render__(_ctx, _cache) {
     }, null, 46
     /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
     , _hoisted_3))]),
-    _: 3
-    /* FORWARDED */
-
-  }, 16
-  /* FULL_PROPS */
+    _: 2
+    /* DYNAMIC */
+
+  }, [_ctx.$slots['prepend-icon'] ? {
+    name: "prepend-icon",
+    fn: _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+    key: "0"
+  } : undefined]), 1040
+  /* FULL_PROPS, DYNAMIC_SLOTS */
   ), _createVNode(_component_var_form_details, {
     "error-message": _ctx.errorMessage,
     "extra-message": _ctx.maxlengthText,

package/es/pull-refresh/PullRefresh.mjs

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import VarIcon from '../icon/index.mjs';
 import { defineComponent, ref, computed, watch, nextTick } from 'vue';
-import { getParentScroller, getScrollTop, getTarget } from '../utils/elements.mjs';
+import { getParentScroller, getScrollTop, getTarget, getRect } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isString, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
@@ -106,7 +106,7 @@ var __sfc__ = defineComponent({
       if (controlPosition.value === 0) {
         var {
           width
-        } = controlNode.value.getBoundingClientRect();
+        } = getRect(controlNode.value);
         controlPosition.value = -(width + width * 0.25);
       }
 

package/es/select/Select.mjs

@@ -15,7 +15,7 @@ var {
   n,
   classes
 } = createNamespace('select');
-import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, createVNode as _createVNode, normalizeStyle as _normalizeStyle, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
@@ -75,8 +75,7 @@ function __render__(_ctx, _cache) {
       cursor: _ctx.cursor,
       onClick: _ctx.handleClick,
       onClear: _ctx.handleClear
-    })), {
-      "prepend-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+    })), _createSlots({
       "append-icon": _withCtx(() => [_renderSlot(_ctx.$slots, "append-icon")]),
       default: _withCtx(() => [_createElementVNode("div", {
         class: _normalizeClass(_ctx.classes(_ctx.n('select'), [_ctx.errorMessage, _ctx.n('--error')], [_ctx.formDisabled || _ctx.disabled, _ctx.n('--disabled')])),
@@ -128,7 +127,15 @@ function __render__(_ctx, _cache) {
       /* TEXT */
       ))]) : _createCommentVNode("v-if", true)], 2
       /* CLASS */
-      ), _renderSlot(_ctx.$slots, "arrow-icon", {
+      ), _ctx.useCustomPlaceholder ? (_openBlock(), _createElementBlock("span", {
+        key: 0,
+        class: _normalizeClass(_ctx.classes(_ctx.n('placeholder'), _ctx.n('$--ellipsis'))),
+        style: _normalizeStyle({
+          color: _ctx.placeholderColor
+        })
+      }, _toDisplayString(_ctx.placeholder), 7
+      /* TEXT, CLASS, STYLE */
+      )) : _createCommentVNode("v-if", true), _renderSlot(_ctx.$slots, "arrow-icon", {
         focus: _ctx.isFocus
       }, () => [_createVNode(_component_var_icon, {
         class: _normalizeClass(_ctx.classes(_ctx.n('arrow'), [_ctx.isFocus, _ctx.n('--arrow-rotate')])),
@@ -140,11 +147,15 @@ function __render__(_ctx, _cache) {
       , ["class"])])], 6
       /* CLASS, STYLE */
       )]),
-      _: 3
-      /* FORWARDED */
-
-    }, 16
-    /* FULL_PROPS */
+      _: 2
+      /* DYNAMIC */
+
+    }, [_ctx.$slots['prepend-icon'] ? {
+      name: "prepend-icon",
+      fn: _withCtx(() => [_renderSlot(_ctx.$slots, "prepend-icon")]),
+      key: "0"
+    } : undefined]), 1040
+    /* FULL_PROPS, DYNAMIC_SLOTS */
     )]),
     _: 3
     /* FORWARDED */
@@ -199,6 +210,28 @@ var __sfc__ = defineComponent({
     } = useValidation();
     var menuEl = ref(null);
     var placement = computed(() => props.variant === 'outlined' ? 'bottom-start' : 'cover-top-start');
+    var placeholderColor = computed(() => {
+      var {
+        hint,
+        blurColor,
+        focusColor
+      } = props;
+
+      if (hint) {
+        return undefined;
+      }
+
+      if (errorMessage.value) {
+        return 'var(--field-decorator-error-color)';
+      }
+
+      if (isFocus.value) {
+        return focusColor || 'var(--field-decorator-focus-color)';
+      }
+
+      return blurColor || 'var(--field-decorator-blur-color)';
+    });
+    var useCustomPlaceholder = computed(() => !props.hint && isEmpty(props.modelValue) && !isFocus.value);
 
     var computeLabel = () => {
       var {
@@ -457,6 +490,8 @@ var __sfc__ = defineComponent({
       menuEl,
       placement,
       cursor,
+      placeholderColor,
+      useCustomPlaceholder,
       n,
       classes,
       handleFocus,

package/es/select/select.css

@@ -1 +1 @@
-:root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-scroller-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-outlined-scroller-margin: 0;}.var-select__menu[var-select-cover] { width: 100%; 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; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s; transform: translateY(calc(-1 * var(--field-decorator-middle-offset-y) / 2));}.var-select__label { display: flex; align-items: center;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--scroller-standard { margin: var(--select-standard-scroller-margin);}.var-select--scroller-outlined { margin: 0;}.var-select--scroller-non-hint { margin: 0;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}
+:root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-scroller-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-outlined-scroller-margin: 0;}.var-select__menu[var-select-cover] { width: 100%; 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; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow-x: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center;}.var-select__placeholder { max-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;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--scroller-standard { margin: var(--select-standard-scroller-margin);}.var-select--scroller-outlined { margin: 0;}.var-select--scroller-non-hint { margin: 0;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/es/slider/Slider.mjs

@@ -4,7 +4,7 @@ import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
 import VarHoverOverlay, { useHoverOverlay } from '../hover-overlay/index.mjs';
 import Hover from '../hover/index.mjs';
-import { getLeft, multiplySizeUnit } from '../utils/elements.mjs';
+import { getLeft, multiplySizeUnit, getRect } from '../utils/elements.mjs';
 import { warn } from '../utils/logger.mjs';
 import { isArray, isNumber, toNumber } from '@varlet/shared';
 import { props, Thumbs } from './props.mjs';
@@ -225,7 +225,7 @@ var __sfc__ = defineComponent({
         return e.clientX - getLeft(currentTarget);
       }
 
-      return maxDistance.value - (e.clientY - currentTarget.getBoundingClientRect().top);
+      return maxDistance.value - (e.clientY - getRect(currentTarget).top);
     };
 
     var thumbStyle = thumb => {

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'

package/es/sticky/Sticky.mjs

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import { defineComponent, ref, onUnmounted, onDeactivated, computed, watch } from 'vue';
 import { props } from './props.mjs';
-import { doubleRaf, getParentScroller, raf, toPxNum } from '../utils/elements.mjs';
+import { doubleRaf, getParentScroller, raf, toPxNum, getRect } from '../utils/elements.mjs';
 import { toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
 import { useEventListener, useMounted } from '@varlet/use';
@@ -76,7 +76,7 @@ var __sfc__ = defineComponent({
       if (scroller !== window) {
         var {
           top
-        } = scroller.getBoundingClientRect();
+        } = getRect(scroller);
         scrollerTop = top;
       }
 
@@ -85,7 +85,7 @@ var __sfc__ = defineComponent({
       var {
         top: stickyTop,
         left: stickyLeft
-      } = sticky.getBoundingClientRect();
+      } = getRect(sticky);
       var currentOffsetTop = stickyTop - scrollerTop;
 
       if (currentOffsetTop <= offsetTop.value) {