@varlet/ui 2.11.2 → 2.11.3-alpha.1685462737961

package/lib/varlet.cjs.js

@@ -13913,7 +13913,7 @@ var {
   n: n$H,
   classes: classes$A
 } = createNamespace("image");
-var _hoisted_1$j = ["alt", "title", "lazy-error", "lazy-loading"];
+var _hoisted_1$j = ["alt", "title", "lazy-loading", "lazy-error"];
 var _hoisted_2$b = ["alt", "title", "src"];
 function __render__$I(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
@@ -13925,35 +13925,32 @@ function __render__$I(_ctx, _cache) {
       style: vue.normalizeStyle({
         width: _ctx.toSizeUnit(_ctx.width),
         height: _ctx.toSizeUnit(_ctx.height),
-        "border-radius": _ctx.toSizeUnit(_ctx.radius)
+        borderRadius: _ctx.toSizeUnit(_ctx.radius)
       })
     },
-    [_ctx.lazy ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+    [_ctx.lazy && !_ctx.showErrorSlot ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
       "img",
       {
         key: 0,
         class: vue.normalizeClass(_ctx.n("image")),
         alt: _ctx.alt,
         title: _ctx.title,
-        "lazy-error": _ctx.error,
         "lazy-loading": _ctx.loading,
+        "lazy-error": _ctx.error,
         style: vue.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,
       _hoisted_1$j
-    )), [[_directive_lazy, _ctx.src]]) : (vue.openBlock(), vue.createElementBlock(
+    )), [[_directive_lazy, _ctx.src]]) : vue.createCommentVNode("v-if", true), !_ctx.lazy && !_ctx.showErrorSlot ? (vue.openBlock(), vue.createElementBlock(
       "img",
       {
         key: 1,
@@ -13964,20 +13961,22 @@ function __render__$I(_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,
       _hoisted_2$b
-    ))],
+    )) : vue.createCommentVNode("v-if", true), _ctx.showErrorSlot ? vue.renderSlot(_ctx.$slots, "error", {
+      key: 2
+    }) : vue.createCommentVNode("v-if", true)],
     6
     /* CLASS, STYLE */
   )), [[_directive_ripple, {
@@ -13991,34 +13990,39 @@ var __sfc__$J = vue.defineComponent({
     Ripple: Ripple$1
   },
   props: props$E,
-  setup(props2) {
+  setup(props2, _ref) {
+    var {
+      slots
+    } = _ref;
+    var showErrorSlot = vue.ref(false);
+    var handleError = (e) => {
+      showErrorSlot.value = !!slots.error;
+      call(props2.onError, e);
+    };
     var handleLoad = (e) => {
       var el = e.currentTarget;
-      var {
-        lazy,
-        onLoad,
-        onError
-      } = props2;
-      if (lazy) {
-        el._lazy.state === "success" && call(onLoad, e);
-        el._lazy.state === "error" && call(onError, e);
+      if (props2.lazy) {
+        if (el._lazy.state === "success") {
+          call(props2.onLoad, e);
+          return;
+        }
+        if (el._lazy.state === "error") {
+          handleError(e);
+        }
       } else {
-        call(onLoad, e);
+        call(props2.onLoad, e);
       }
     };
-    var handleError = (e) => {
-      var {
-        lazy,
-        onError
-      } = props2;
-      !lazy && call(onError, e);
-    };
     var handleClick = (e) => {
       call(props2.onClick, e);
     };
+    vue.watch(() => props2.src, () => {
+      showErrorSlot.value = false;
+    });
     return {
       n: n$H,
       classes: classes$A,
+      showErrorSlot,
       toSizeUnit,
       handleLoad,
       handleError,
@@ -15203,7 +15207,7 @@ var __sfc__$F = vue.defineComponent({
       if (scroller !== window) {
         var {
           top: top2
-        } = scroller.getBoundingClientRect();
+        } = getRect(scroller);
         scrollerTop = top2;
       }
       var wrapper3 = wrapperEl.value;
@@ -15211,7 +15215,7 @@ var __sfc__$F = vue.defineComponent({
       var {
         top: stickyTop,
         left: stickyLeft
-      } = sticky2.getBoundingClientRect();
+      } = getRect(sticky2);
       var currentOffsetTop = stickyTop - scrollerTop;
       if (currentOffsetTop <= offsetTop.value) {
         if (!cssMode) {
@@ -15793,10 +15797,6 @@ var props$y = {
     type: Boolean,
     default: false
   },
-  alwaysCustomPlaceholder: {
-    type: Boolean,
-    default: true
-  },
   onClick: defineListenerProp(),
   onClear: defineListenerProp()
 };
@@ -15819,7 +15819,6 @@ function __render__$B(_ctx, _cache) {
       "div",
       {
         class: vue.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: vue.normalizeStyle({
           color: _ctx.color,
           cursor: _ctx.cursor,
@@ -15837,21 +15836,18 @@ function __render__$B(_ctx, _cache) {
       ), vue.createElementVNode(
         "div",
         {
-          ref: "middleEl",
           class: vue.normalizeClass(_ctx.classes(_ctx.n("middle"), [!_ctx.hint, _ctx.n("--middle-non-hint")]))
         },
         [vue.renderSlot(_ctx.$slots, "default")],
         2
         /* CLASS */
-      ), (_ctx.hint || _ctx.alwaysCustomPlaceholder) && _ctx.placeholderTransform ? (vue.openBlock(), vue.createElementBlock(
+      ), _ctx.hint ? (vue.openBlock(), vue.createElementBlock(
         "label",
         {
           key: 0,
-          class: vue.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: vue.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: vue.normalizeStyle({
-            color: _ctx.color,
-            transform: _ctx.placeholderTransform,
-            maxWidth: _ctx.placeholderMaxWidth
+            color: _ctx.color
           }),
           for: _ctx.id
         },
@@ -15864,16 +15860,6 @@ function __render__$B(_ctx, _cache) {
         )],
         14,
         _hoisted_1$f
-      )) : vue.createCommentVNode("v-if", true), _ctx.variant === "outlined" ? (vue.openBlock(), vue.createElementBlock(
-        "span",
-        {
-          key: 1,
-          ref: "placeholderTextEl",
-          class: vue.normalizeClass([_ctx.n("placeholder-text"), _ctx.n("$--ellipsis")])
-        },
-        vue.toDisplayString(_ctx.placeholder),
-        3
-        /* TEXT, CLASS */
       )) : vue.createCommentVNode("v-if", true), vue.createElementVNode(
         "div",
         {
@@ -15919,7 +15905,19 @@ function __render__$B(_ctx, _cache) {
               width: _ctx.legendWidth
             })
           },
-          null,
+          [_ctx.hint ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+            key: 0,
+            to: "body"
+          }, [vue.createElementVNode(
+            "span",
+            {
+              ref: "placeholderTextEl",
+              class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder-text"), _ctx.n("$--ellipsis"), [_ctx.size === "small", _ctx.n("placeholder-text--small")]))
+            },
+            vue.toDisplayString(_ctx.placeholder),
+            3
+            /* TEXT, CLASS */
+          )])) : vue.createCommentVNode("v-if", true)],
           6
           /* CLASS, STYLE */
         )],
@@ -15962,15 +15960,14 @@ var __sfc__$C = vue.defineComponent({
     VarIcon: Icon
   },
   props: props$y,
-  setup(props2) {
-    var controllerEl = vue.ref(null);
-    var middleEl = vue.ref(null);
+  setup(props2, _ref) {
+    var {
+      slots
+    } = _ref;
     var placeholderTextEl = vue.ref(null);
     var legendWidth = vue.ref("");
-    var placeholderTransform = vue.ref("");
-    var placeholderMaxWidth = vue.ref("");
     var color = vue.computed(() => !props2.errorMessage ? props2.isFocus ? props2.focusColor : props2.blurColor : void 0);
-    var isFloating = vue.computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus));
+    var isFloating = vue.computed(() => props2.hint && (!isEmpty(props2.value) || props2.isFocus || slots["prepend-icon"]));
     var computePlaceholderState = () => {
       var {
         hint,
@@ -15980,33 +15977,23 @@ var __sfc__$C = vue.defineComponent({
       if (!hint && (!isEmpty(value) || composing)) {
         return n$A("--placeholder-hidden");
       }
+      if (isFloating.value) {
+        return n$A("--placeholder-hint");
+      }
     };
     var resize = () => {
       var {
         size,
         hint,
-        placeholder,
         variant
       } = props2;
-      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$1(controllerEl.value);
-      var translateY = variant === "outlined" ? "-50%" : "0";
-      placeholderTransform.value = "translate(" + controllerStyle.paddingLeft + ", " + translateY + ") scale(0.75)";
-      if (variant === "outlined") {
-        var placeholderTextStyle = getStyle$1(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$1(placeholderTextEl.value);
+      var placeholderSpace = "var(--field-decorator-outlined-" + size + "-placeholder-space)";
+      legendWidth.value = "calc(" + placeholderTextStyle.width + " * 0.75 + " + placeholderSpace + " * 2)";
     };
     var handleClear = (e) => {
       call(props2.onClear, e);
@@ -16014,15 +16001,11 @@ var __sfc__$C = vue.defineComponent({
     var handleClick = (e) => {
       call(props2.onClick, e);
     };
-    vue.onUpdated(resize);
     useMounted(resize);
+    vue.watch(() => [props2.size, props2.hint, props2.variant], resize);
     useEventListener(() => window, "resize", resize);
     return {
-      controllerEl,
-      middleEl,
       placeholderTextEl,
-      placeholderTransform,
-      placeholderMaxWidth,
       color,
       legendWidth,
       isFloating,
@@ -16145,12 +16128,10 @@ function __render__$A(_ctx, _cache) {
         clearable: _ctx.clearable,
         cursor: _ctx.cursor,
         composing: _ctx.isComposing,
-        alwaysCustomPlaceholder: false,
         onClick: _ctx.handleClick,
         onClear: _ctx.handleClear
       })),
-      {
-        "prepend-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+      vue.createSlots({
         "append-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "append-icon")]),
         default: vue.withCtx(() => [_ctx.normalizedType === "password" ? (vue.openBlock(), vue.createElementBlock(
           "input",
@@ -16259,11 +16240,15 @@ function __render__$A(_ctx, _cache) {
           46,
           _hoisted_3$8
         ))]),
-        _: 3
-        /* FORWARDED */
-      },
-      16
-      /* FULL_PROPS */
+        _: 2
+        /* DYNAMIC */
+      }, [_ctx.$slots["prepend-icon"] ? {
+        name: "prepend-icon",
+        fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+        key: "0"
+      } : void 0]),
+      1040
+      /* FULL_PROPS, DYNAMIC_SLOTS */
     ), vue.createVNode(
       _component_var_form_details,
       {
@@ -19048,7 +19033,7 @@ var __sfc__$s = vue.defineComponent({
       if (controlPosition.value === 0) {
         var {
           width
-        } = controlNode.value.getBoundingClientRect();
+        } = getRect(controlNode.value);
         controlPosition.value = -(width + width * 0.25);
       }
       startY = event.touches[0].clientY;
@@ -20438,8 +20423,7 @@ function __render__$f(_ctx, _cache) {
             onClick: _ctx.handleClick,
             onClear: _ctx.handleClear
           })),
-          {
-            "prepend-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+          vue.createSlots({
             "append-icon": vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "append-icon")]),
             default: vue.withCtx(() => [vue.createElementVNode(
               "div",
@@ -20524,7 +20508,19 @@ function __render__$f(_ctx, _cache) {
                 ))]) : vue.createCommentVNode("v-if", true)],
                 2
                 /* CLASS */
-              ), vue.renderSlot(_ctx.$slots, "arrow-icon", {
+              ), _ctx.useCustomPlaceholder ? (vue.openBlock(), vue.createElementBlock(
+                "span",
+                {
+                  key: 0,
+                  class: vue.normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
+                  style: vue.normalizeStyle({
+                    color: _ctx.placeholderColor
+                  })
+                },
+                vue.toDisplayString(_ctx.placeholder),
+                7
+                /* TEXT, CLASS, STYLE */
+              )) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "arrow-icon", {
                 focus: _ctx.isFocus
               }, () => [vue.createVNode(
                 _component_var_icon,
@@ -20541,11 +20537,15 @@ function __render__$f(_ctx, _cache) {
               6
               /* CLASS, STYLE */
             )]),
-            _: 3
-            /* FORWARDED */
-          },
-          16
-          /* FULL_PROPS */
+            _: 2
+            /* DYNAMIC */
+          }, [_ctx.$slots["prepend-icon"] ? {
+            name: "prepend-icon",
+            fn: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "prepend-icon")]),
+            key: "0"
+          } : void 0]),
+          1040
+          /* FULL_PROPS, DYNAMIC_SLOTS */
         )]),
         _: 3
         /* FORWARDED */
@@ -20604,6 +20604,24 @@ var __sfc__$g = vue.defineComponent({
     } = useValidation();
     var menuEl = vue.ref(null);
     var placement = vue.computed(() => props2.variant === "outlined" ? "bottom-start" : "cover-top-start");
+    var placeholderColor = vue.computed(() => {
+      var {
+        hint,
+        blurColor,
+        focusColor: focusColor2
+      } = props2;
+      if (hint) {
+        return void 0;
+      }
+      if (errorMessage.value) {
+        return "var(--field-decorator-error-color)";
+      }
+      if (isFocus.value) {
+        return focusColor2 || "var(--field-decorator-focus-color)";
+      }
+      return blurColor || "var(--field-decorator-blur-color)";
+    });
+    var useCustomPlaceholder = vue.computed(() => !props2.hint && isEmpty(props2.modelValue) && !isFocus.value);
     var computeLabel = () => {
       var {
         multiple: multiple2,
@@ -20818,6 +20836,8 @@ var __sfc__$g = vue.defineComponent({
       menuEl,
       placement,
       cursor,
+      placeholderColor,
+      useCustomPlaceholder,
       n: n$h,
       classes: classes$d,
       handleFocus,
@@ -21389,7 +21409,7 @@ var __sfc__$e = vue.defineComponent({
       if (!isVertical.value) {
         return e.clientX - getLeft(currentTarget);
       }
-      return maxDistance.value - (e.clientY - currentTarget.getBoundingClientRect().top);
+      return maxDistance.value - (e.clientY - getRect(currentTarget).top);
     };
     var thumbStyle = (thumb) => {
       var key = isVertical.value ? "bottom" : "left";
@@ -24244,7 +24264,7 @@ var __sfc__$2 = vue.defineComponent({
       var {
         width,
         height
-      } = inner.value.getBoundingClientRect();
+      } = getRect(inner.value);
       return {
         width,
         height
@@ -24698,7 +24718,7 @@ var __sfc__$1 = vue.defineComponent({
         top: top2,
         width,
         height
-      } = container.value.getBoundingClientRect();
+      } = getRect(container.value);
       center.x = left2 + width / 2;
       center.y = top2 + height / 2;
       if (type.value === "hour" && props2.format === "24hr") {
@@ -25521,9 +25541,9 @@ const skeleton = "";
 const SkeletonSfc = "";
 const slider = "";
 const SliderSfc = "";
-const SnackbarSfc = "";
 const snackbar = "";
 const coreSfc = "";
+const SnackbarSfc = "";
 const space = "";
 const step = "";
 const StepSfc = "";
@@ -25548,7 +25568,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.2";
+const version = "2.11.3-alpha.1685462737961";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.11.2",
+  "version": "2.11.3-alpha.1685462737961",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -46,9 +46,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.11.2",
-    "@varlet/shared": "2.11.2",
-    "@varlet/use": "2.11.2"
+    "@varlet/icons": "2.11.3-alpha.1685462737961",
+    "@varlet/shared": "2.11.3-alpha.1685462737961",
+    "@varlet/use": "2.11.3-alpha.1685462737961"
   },
   "devDependencies": {
     "@vue/runtime-core": "3.3.1",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.3.2",
     "vue-router": "4.2.0",
-    "@varlet/cli": "2.11.2",
-    "@varlet/touch-emulator": "2.11.2"
+    "@varlet/cli": "2.11.3-alpha.1685462737961",
+    "@varlet/touch-emulator": "2.11.3-alpha.1685462737961"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/image.d.ts

@@ -1,4 +1,5 @@
 import { VarComponent, BasicAttributes, ListenerProp } from './varComponent'
+import { VNode } from 'vue'
 
 export declare const imageProps: Record<string, any>
 
@@ -24,6 +25,10 @@ export interface ImageProps extends BasicAttributes {
 
 export class Image extends VarComponent {
   $props: ImageProps
+
+  $slots: {
+    error(): VNode[]
+  }
 }
 
 export class _ImageComponent extends Image {}