@varlet/ui 2.11.3-alpha.1685455534947 → 2.11.3

package/lib/varlet.cjs.js

@@ -84,6 +84,8 @@ const find = (arr, callback, from = "start") => {
   return [null, -1];
 };
 const normalizeToArray = (value) => isArray(value) ? value : [value];
+const clamp$1 = (num, min2, max2) => Math.min(max2, Math.max(min2, num));
+const clampArrayRange = (index, arr) => clamp$1(index, 0, arr.length - 1);
 var isHTMLSupportImage = (val) => {
   if (val == null) {
     return false;
@@ -13913,7 +13915,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 +13927,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 +13963,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 +13992,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,
@@ -14252,17 +14258,17 @@ var __sfc__$I = vue.defineComponent({
       }
       return swipeIndex;
     };
-    var boundaryIndex = (index2) => {
-      var {
-        loop
-      } = props2;
-      if (index2 < 0) {
-        return loop ? length.value - 1 : 0;
-      }
-      if (index2 > length.value - 1) {
-        return loop ? 0 : length.value - 1;
+    var clampIndex = (index2) => {
+      if (props2.loop) {
+        if (index2 < 0) {
+          return length.value + index2;
+        }
+        if (index2 >= length.value) {
+          return index2 - length.value;
+        }
+        return index2;
       }
-      return index2;
+      return clamp$1(index2, 0, length.value - 1);
     };
     var fixPosition = (fn2) => {
       var overLeft = translate.value >= size.value;
@@ -14285,7 +14291,7 @@ var __sfc__$I = vue.defineComponent({
       if (initializedIndex) {
         return;
       }
-      index.value = boundaryIndex(toNumber(props2.initialIndex));
+      index.value = clampIndex(toNumber(props2.initialIndex));
       initializedIndex = true;
     };
     var startAutoplay = () => {
@@ -14403,7 +14409,7 @@ var __sfc__$I = vue.defineComponent({
         onChange
       } = props2;
       var currentIndex = index.value;
-      index.value = boundaryIndex(currentIndex + 1);
+      index.value = clampIndex(currentIndex + 1);
       if ((options == null ? void 0 : options.event) !== false) {
         call(onChange, index.value);
       }
@@ -14428,7 +14434,7 @@ var __sfc__$I = vue.defineComponent({
         onChange
       } = props2;
       var currentIndex = index.value;
-      index.value = boundaryIndex(currentIndex - 1);
+      index.value = clampIndex(currentIndex - 1);
       if ((options == null ? void 0 : options.event) !== false) {
         call(onChange, index.value);
       }
@@ -15837,7 +15843,7 @@ function __render__$B(_ctx, _cache) {
         [vue.renderSlot(_ctx.$slots, "default")],
         2
         /* CLASS */
-      ), _ctx.hint ? (vue.openBlock(), vue.createElementBlock(
+      ), _ctx.placeholder && _ctx.hint ? (vue.openBlock(), vue.createElementBlock(
         "label",
         {
           key: 0,
@@ -15901,7 +15907,7 @@ function __render__$B(_ctx, _cache) {
               width: _ctx.legendWidth
             })
           },
-          [_ctx.hint ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+          [_ctx.placeholder && _ctx.hint ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
             key: 0,
             to: "body"
           }, [vue.createElementVNode(
@@ -15981,9 +15987,10 @@ var __sfc__$C = vue.defineComponent({
       var {
         size,
         hint,
-        variant
+        variant,
+        placeholder
       } = props2;
-      if (!hint || variant !== "outlined") {
+      if (!placeholder || !hint || variant !== "outlined") {
         legendWidth.value = "";
         return;
       }
@@ -15998,7 +16005,7 @@ var __sfc__$C = vue.defineComponent({
       call(props2.onClick, e);
     };
     useMounted(resize);
-    vue.watch(() => [props2.size, props2.hint, props2.variant], resize);
+    vue.onUpdated(resize);
     useEventListener(() => window, "resize", resize);
     return {
       placeholderTextEl,
@@ -18283,27 +18290,14 @@ var __sfc__$u = vue.defineComponent({
     var handlePopupUpdateShow = (value) => {
       call(props2["onUpdate:show"], value);
     };
-    var boundaryTranslate = (scrollColumn) => {
-      var startTranslate = optionHeight.value + center.value;
-      var endTranslate = center.value - scrollColumn.column.texts.length * optionHeight.value;
-      if (scrollColumn.translate >= startTranslate) {
-        scrollColumn.translate = startTranslate;
-      }
-      if (scrollColumn.translate <= endTranslate) {
-        scrollColumn.translate = endTranslate;
-      }
-    };
-    var boundaryIndex = (scrollColumn, index) => {
-      var {
-        length
-      } = scrollColumn.column.texts;
-      index = index >= length ? length - 1 : index;
-      index = index <= 0 ? 0 : index;
-      return index;
+    var clampTranslate = (scrollColumn) => {
+      var minTranslate = center.value - scrollColumn.column.texts.length * optionHeight.value;
+      var maxTranslate = optionHeight.value + center.value;
+      scrollColumn.translate = clamp$1(scrollColumn.translate, minTranslate, maxTranslate);
     };
     var getTargetIndex = (scrollColumn, viewTranslate) => {
       var index = Math.round((center.value - viewTranslate) / optionHeight.value);
-      return boundaryIndex(scrollColumn, index);
+      return clampArrayRange(index, scrollColumn.column.texts);
     };
     var updateTranslate = (scrollColumn) => {
       scrollColumn.translate = center.value - scrollColumn.index * optionHeight.value;
@@ -18352,7 +18346,7 @@ var __sfc__$u = vue.defineComponent({
       var deltaY = scrollColumn.prevY !== void 0 ? clientY - scrollColumn.prevY : 0;
       scrollColumn.prevY = clientY;
       scrollColumn.translate += deltaY;
-      boundaryTranslate(scrollColumn);
+      clampTranslate(scrollColumn);
       var now = performance.now();
       if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
         scrollColumn.momentumTime = now;
@@ -21814,14 +21808,6 @@ function __render__$c(_ctx, _cache) {
         {
           class: vue.normalizeClass([_ctx.n("icon")])
         },
-        [vue.renderSlot(_ctx.$slots, "icon")],
-        2
-        /* CLASS */
-      ), vue.createElementVNode(
-        "div",
-        {
-          class: vue.normalizeClass(_ctx.n("action"))
-        },
         [_ctx.iconName ? (vue.openBlock(), vue.createBlock(
           _component_var_icon,
           {
@@ -21843,7 +21829,15 @@ function __render__$c(_ctx, _cache) {
           null,
           8,
           ["type", "size", "color", "radius"]
-        )) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "action")],
+        )) : vue.createCommentVNode("v-if", true), vue.renderSlot(_ctx.$slots, "icon")],
+        2
+        /* CLASS */
+      ), vue.createElementVNode(
+        "div",
+        {
+          class: vue.normalizeClass(_ctx.n("action"))
+        },
+        [vue.renderSlot(_ctx.$slots, "action")],
         2
         /* CLASS */
       )],
@@ -23440,7 +23434,7 @@ var __sfc__$4 = vue.defineComponent({
         active: active2
       } = props2;
       if (isNumber(active2)) {
-        var activeIndex = active2 > length.value - 1 ? length.value - 1 : 0;
+        var activeIndex = clamp$1(active2, 0, length.value - 1);
         call(props2["onUpdate:active"], activeIndex);
         return matchIndex(activeIndex);
       }
@@ -23757,6 +23751,8 @@ const pagination$1 = {
 const picker$1 = {
   "--picker-background": "#1e1e1e",
   "--picker-cancel-button-text-color": "#aaa",
+  "--picker-title-text-color": "#fff",
+  "--picker-option-text-color": "#fff",
   "--picker-picked-border": "1px solid rgba(255, 255, 255, 0.12)",
   "--picker-mask-background-image": "linear-gradient(180deg, hsla(0, 0%, 12%, 0.9), hsla(0, 0%, 12%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 12%, 0.9), hsla(0, 0%, 12%, 0.4))"
 };
@@ -25564,7 +25560,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.3-alpha.1685455534947";
+const version = "2.11.3";
 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.3-alpha.1685455534947",
+  "version": "2.11.3",
   "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.3-alpha.1685455534947",
-    "@varlet/shared": "2.11.3-alpha.1685455534947",
-    "@varlet/use": "2.11.3-alpha.1685455534947"
+    "@varlet/icons": "2.11.3",
+    "@varlet/use": "2.11.3",
+    "@varlet/shared": "2.11.3"
   },
   "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.3-alpha.1685455534947",
-    "@varlet/touch-emulator": "2.11.3-alpha.1685455534947"
+    "@varlet/cli": "2.11.3",
+    "@varlet/touch-emulator": "2.11.3"
   },
   "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 {}