@varlet/ui 2.11.1 → 2.11.2

package/lib/varlet.cjs.js

@@ -2405,7 +2405,7 @@ var {
   classes: classes$10
 } = createNamespace("avatar");
 var _hoisted_1$r = ["src", "lazy-loading", "lazy-error"];
-var _hoisted_2$d = ["src"];
+var _hoisted_2$e = ["src"];
 function __render__$1d(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   return vue.openBlock(), vue.createElementBlock(
@@ -2464,7 +2464,7 @@ function __render__$1d(_ctx, _cache) {
         },
         null,
         46,
-        _hoisted_2$d
+        _hoisted_2$e
       ))],
       64
       /* STABLE_FRAGMENT */
@@ -2653,7 +2653,7 @@ var _hoisted_1$q = /* @__PURE__ */ _withScopeId$6(() => /* @__PURE__ */ vue.crea
   -1
   /* HOISTED */
 ));
-var _hoisted_2$c = [_hoisted_1$q];
+var _hoisted_2$d = [_hoisted_1$q];
 function __render__$1b(_ctx, _cache) {
   return vue.openBlock(), vue.createElementBlock(
     "div",
@@ -2700,7 +2700,7 @@ function __render__$1b(_ctx, _cache) {
               color: _ctx.color
             })
           },
-          _hoisted_2$c,
+          _hoisted_2$d,
           6
           /* CLASS, STYLE */
         )],
@@ -4745,7 +4745,7 @@ var {
 var _hoisted_1$n = {
   key: 0
 };
-var _hoisted_2$b = {
+var _hoisted_2$c = {
   key: 0
 };
 function __render__$$(_ctx, _cache) {
@@ -4800,7 +4800,7 @@ function __render__$$(_ctx, _cache) {
             {
               default: vue.withCtx(() => [_ctx.extraMessage ? (vue.openBlock(), vue.createElementBlock(
                 "div",
-                _hoisted_2$b,
+                _hoisted_2$c,
                 vue.toDisplayString(_ctx.extraMessage),
                 1
                 /* TEXT */
@@ -13914,7 +13914,7 @@ var {
   classes: classes$A
 } = createNamespace("image");
 var _hoisted_1$j = ["alt", "title", "lazy-error", "lazy-loading"];
-var _hoisted_2$a = ["alt", "title", "src"];
+var _hoisted_2$b = ["alt", "title", "src"];
 function __render__$I(_ctx, _cache) {
   var _directive_lazy = vue.resolveDirective("lazy");
   var _directive_ripple = vue.resolveDirective("ripple");
@@ -13976,7 +13976,7 @@ function __render__$I(_ctx, _cache) {
       },
       null,
       46,
-      _hoisted_2$a
+      _hoisted_2$b
     ))],
     6
     /* CLASS, STYLE */
@@ -14587,6 +14587,10 @@ var props$C = _extends$7({
     type: Boolean,
     default: false
   },
+  imagePreventDefault: {
+    type: Boolean,
+    default: false
+  },
   images: {
     type: Array,
     default: () => []
@@ -14602,7 +14606,8 @@ var props$C = _extends$7({
     type: Boolean,
     default: false
   },
-  "onUpdate:show": defineListenerProp()
+  "onUpdate:show": defineListenerProp(),
+  onLongPress: defineListenerProp()
 }, pickProps(props$D, ["loop", "indicator", "onChange"]), pickProps(props$1a, [
   "lockScroll",
   "teleport",
@@ -14621,7 +14626,9 @@ var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
-var _hoisted_1$h = ["src", "alt"];
+var LONG_PRESS_DELAY = 500;
+var _hoisted_1$h = ["onTouchstart"];
+var _hoisted_2$a = ["src", "alt"];
 function __render__$F(_ctx, _cache) {
   var _component_var_swipe_item = vue.resolveComponent("var-swipe-item");
   var _component_var_swipe = vue.resolveComponent("var-swipe");
@@ -14660,7 +14667,7 @@ function __render__$F(_ctx, _cache) {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(
             vue.Fragment,
             null,
-            vue.renderList(_ctx.images, (image2) => {
+            vue.renderList(_ctx.images, (image2, idx) => {
               return vue.openBlock(), vue.createBlock(
                 _component_var_swipe_item,
                 {
@@ -14678,29 +14685,30 @@ function __render__$F(_ctx, _cache) {
                         transitionTimingFunction: _ctx.transitionTimingFunction,
                         transitionDuration: _ctx.transitionDuration
                       }),
-                      onTouchstart: _cache[0] || (_cache[0] = function() {
-                        return _ctx.handleTouchstart && _ctx.handleTouchstart(...arguments);
-                      }),
-                      onTouchmove: _cache[1] || (_cache[1] = function() {
+                      onTouchstart: ($event) => _ctx.handleTouchstart($event, idx),
+                      onTouchmove: _cache[0] || (_cache[0] = function() {
                         return _ctx.handleTouchmove && _ctx.handleTouchmove(...arguments);
                       }),
-                      onTouchend: _cache[2] || (_cache[2] = function() {
+                      onTouchend: _cache[1] || (_cache[1] = function() {
                         return _ctx.handleTouchend && _ctx.handleTouchend(...arguments);
+                      }),
+                      onTouchcancel: _cache[2] || (_cache[2] = function() {
+                        return _ctx.handleTouchcancel && _ctx.handleTouchcancel(...arguments);
                       })
                     },
                     [vue.createElementVNode(
                       "img",
                       {
-                        class: vue.normalizeClass(_ctx.n("image")),
+                        class: vue.normalizeClass(_ctx.classes(_ctx.n("image"), [_ctx.isPreventDefault, _ctx.n("--prevent")])),
                         src: image2,
                         alt: image2
                       },
                       null,
                       10,
-                      _hoisted_1$h
+                      _hoisted_2$a
                     )],
-                    38
-                    /* CLASS, STYLE, HYDRATE_EVENTS */
+                    46,
+                    _hoisted_1$h
                   )]),
                   _: 2
                   /* DYNAMIC */
@@ -14793,6 +14801,15 @@ var __sfc__$G = vue.defineComponent({
     var startTouch = null;
     var prevTouch = null;
     var closeRunner = null;
+    var longPressRunner = null;
+    var isLongPress = false;
+    var isPreventDefault = vue.computed(() => {
+      var {
+        imagePreventDefault,
+        show
+      } = props2;
+      return show && imagePreventDefault;
+    });
     var getDistance = (touch, target) => {
       var {
         clientX: touchX,
@@ -14840,17 +14857,35 @@ var __sfc__$G = vue.defineComponent({
       }
       return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && performance.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
+    var handleTouchcancel = () => {
+      window.clearTimeout(longPressRunner);
+      isLongPress = false;
+      startTouch = null;
+    };
     var handleTouchend = (event) => {
+      window.clearTimeout(longPressRunner);
+      if (isLongPress) {
+        isLongPress = false;
+        return;
+      }
       var isTap = isTapTouch(event.target);
       closeRunner = window.setTimeout(() => {
         isTap && close();
         startTouch = null;
       }, EVENT_DELAY);
     };
-    var handleTouchstart = (event) => {
-      closeRunner && window.clearTimeout(closeRunner);
+    var handleTouchstart = (event, idx) => {
+      window.clearTimeout(closeRunner);
+      window.clearTimeout(longPressRunner);
       var currentTouch = createVarTouch(event.touches[0], event.currentTarget);
       startTouch = currentTouch;
+      longPressRunner = window.setTimeout(() => {
+        var {
+          onLongPress
+        } = props2;
+        isLongPress = true;
+        call(onLongPress, idx);
+      }, LONG_PRESS_DELAY);
       if (isDoubleTouch(currentTouch)) {
         scale.value > 1 ? zoomOut() : zoomIn();
         return;
@@ -14917,6 +14952,9 @@ var __sfc__$G = vue.defineComponent({
       }
       var target = event.currentTarget;
       var currentTouch = createVarTouch(event.touches[0], target);
+      if (getDistance(currentTouch, prevTouch) > DISTANCE_OFFSET) {
+        window.clearTimeout(longPressRunner);
+      }
       if (scale.value > 1) {
         var moveX = currentTouch.clientX - prevTouch.clientX;
         var moveY = currentTouch.clientY - prevTouch.clientY;
@@ -14935,14 +14973,19 @@ var __sfc__$G = vue.defineComponent({
       }
       call(props2["onUpdate:show"], false);
     };
-    vue.watch(() => props2.show, (newValue) => {
-      popupShow.value = newValue;
+    var preventImageDefault = (event) => {
+      props2.imagePreventDefault && props2.show && event.preventDefault();
+    };
+    useEventListener(() => document, "contextmenu", preventImageDefault);
+    vue.watch(() => props2.show, (newShow) => {
+      popupShow.value = newShow;
     }, {
       immediate: true
     });
     return {
       n: n$E,
       classes: classes$y,
+      isPreventDefault,
       initialIndex,
       popupShow,
       scale,
@@ -14954,6 +14997,7 @@ var __sfc__$G = vue.defineComponent({
       handleTouchstart,
       handleTouchmove,
       handleTouchend,
+      handleTouchcancel,
       close
     };
   }
@@ -18643,6 +18687,7 @@ var {
   n: n$p,
   classes: classes$k
 } = createNamespace("progress");
+var ONE_HUNDRED = 100;
 var _hoisted_1$b = ["viewBox"];
 var _hoisted_2$7 = ["cx", "cy", "r", "stroke-width"];
 var _hoisted_3$6 = ["cx", "cy", "r", "stroke-width"];
@@ -18793,8 +18838,8 @@ var __sfc__$t = vue.defineComponent({
   setup(props2) {
     var linearProps = vue.computed(() => {
       var value = toNumber(props2.value);
-      var width = value > 100 ? 100 : value;
-      var roundValue = value > 100 ? 100 : Math.round(value);
+      var width = value > ONE_HUNDRED ? ONE_HUNDRED : value;
+      var roundValue = value > ONE_HUNDRED ? ONE_HUNDRED : Math.round(value);
       return {
         width: width + "%",
         roundValue: roundValue + "%"
@@ -18807,10 +18852,10 @@ var __sfc__$t = vue.defineComponent({
         value
       } = props2;
       var viewBox = "0 0 " + toPxNum(size) + " " + toPxNum(size);
-      var roundValue = toNumber(value) > 100 ? 100 : Math.round(toNumber(value));
+      var roundValue = toNumber(value) > ONE_HUNDRED ? ONE_HUNDRED : Math.round(toNumber(value));
       var radius = (toPxNum(size) - toPxNum(lineWidth)) / 2;
       var perimeter = 2 * Math.PI * radius;
-      var strokeDasharray = roundValue / 100 * perimeter + ", " + perimeter;
+      var strokeDasharray = roundValue / ONE_HUNDRED * perimeter + ", " + perimeter;
       return {
         viewBox,
         radius,
@@ -23043,20 +23088,23 @@ var __sfc__$6 = vue.defineComponent({
   },
   props: props$5,
   setup(props2) {
+    var current = vue.ref(false);
+    var name = vue.computed(() => props2.name);
     var {
       index,
-      tabsItems,
       bindTabsItems
     } = useTabsItems();
     var {
       bindLists
     } = useLists();
-    var name = vue.computed(() => props2.name);
-    var current = vue.computed(() => index.value === Number(tabsItems.active.value));
+    var setCurrent = (value) => {
+      current.value = value;
+    };
     var tabItemProvider = {
       index,
       name,
-      current
+      current: vue.computed(() => current.value),
+      setCurrent
     };
     bindTabsItems(tabItemProvider);
     bindLists(tabItemProvider);
@@ -23560,30 +23608,29 @@ var __sfc__$3 = vue.defineComponent({
   props: props$2,
   setup(props2) {
     var swipe2 = vue.ref(null);
-    var active = vue.computed(() => props2.active);
     var {
       tabItemList,
       bindTabItem,
       length
     } = useTabItem$1();
-    var matchName = (active2) => {
+    var matchName = (active) => {
       return tabItemList.find((_ref) => {
         var {
           name
         } = _ref;
-        return active2 === name.value;
+        return active === name.value;
       });
     };
-    var matchIndex = (active2) => {
+    var matchIndex = (active) => {
       return tabItemList.find((_ref2) => {
         var {
           index
         } = _ref2;
-        return active2 === index.value;
+        return active === index.value;
       });
     };
-    var matchActive = (active2) => {
-      return matchName(active2) || matchIndex(active2);
+    var matchActive = (active) => {
+      return matchName(active) || matchIndex(active);
     };
     var handleActiveChange = (newValue) => {
       var _swipe$value;
@@ -23591,26 +23638,30 @@ var __sfc__$3 = vue.defineComponent({
       if (!newActiveTabItemProvider) {
         return;
       }
+      tabItemList.forEach((_ref3) => {
+        var {
+          setCurrent
+        } = _ref3;
+        return setCurrent(false);
+      });
+      newActiveTabItemProvider.setCurrent(true);
       (_swipe$value = swipe2.value) == null ? void 0 : _swipe$value.to(newActiveTabItemProvider.index.value);
     };
     var handleSwipeChange = (currentIndex) => {
       var _tabItem$name$value;
-      var tabItem2 = tabItemList.find((_ref3) => {
+      var tabItem2 = tabItemList.find((_ref4) => {
         var {
           index
-        } = _ref3;
+        } = _ref4;
         return index.value === currentIndex;
       });
-      var active2 = (_tabItem$name$value = tabItem2.name.value) != null ? _tabItem$name$value : tabItem2.index.value;
-      call(props2["onUpdate:active"], active2);
+      var active = (_tabItem$name$value = tabItem2.name.value) != null ? _tabItem$name$value : tabItem2.index.value;
+      call(props2["onUpdate:active"], active);
     };
     var getSwipe = () => {
       return swipe2.value;
     };
-    var tabsItemsProvider = {
-      active
-    };
-    bindTabItem(tabsItemsProvider);
+    bindTabItem({});
     vue.watch(() => props2.active, handleActiveChange);
     vue.watch(() => length.value, /* @__PURE__ */ _asyncToGenerator$1(function* () {
       yield doubleRaf();
@@ -25497,7 +25548,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.1";
+const version = "2.11.2";
 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.1",
+  "version": "2.11.2",
   "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.1",
-    "@varlet/shared": "2.11.1",
-    "@varlet/use": "2.11.1"
+    "@varlet/icons": "2.11.2",
+    "@varlet/shared": "2.11.2",
+    "@varlet/use": "2.11.2"
   },
   "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.1",
-    "@varlet/touch-emulator": "2.11.1"
+    "@varlet/cli": "2.11.2",
+    "@varlet/touch-emulator": "2.11.2"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/imagePreview.d.ts

@@ -12,11 +12,13 @@ export interface ImagePreviewProps extends BasicAttributes {
   indicator?: boolean
   closeable?: boolean
   teleport?: TeleportProps['to']
+  imagePreventDefault?: boolean
   onOpen?: ListenerProp<() => void>
   onOpened?: ListenerProp<() => void>
   onClose?: ListenerProp<() => void>
   onClosed?: ListenerProp<() => void>
   onChange?: ListenerProp<(index: number) => void>
+  onLongPress?: ListenerProp<(index: number) => void>
   'onUpdate:show'?: ListenerProp<(show: boolean) => void>
 }
 
@@ -27,11 +29,13 @@ export interface ImagePreviewOptions {
   lockScroll?: boolean
   indicator?: boolean
   closeable?: boolean
+  imagePreventDefault?: boolean
   onOpen?: () => void
   onOpened?: () => void
   onClose?: () => void
   onClosed?: () => void
   onChange?: (index: number) => void
+  onLongPress?: (index: number) => void
 }
 
 export class ImagePreviewComponent extends VarComponent {