@varlet/ui 2.11.1 → 2.11.2-alpha.1684942134064

package/es/image-preview/ImagePreview.mjs

@@ -5,6 +5,7 @@ import VarPopup from '../popup/index.mjs';
 import { defineComponent, ref, computed, watch } from 'vue';
 import { props } from './props.mjs';
 import { toNumber } from '@varlet/shared';
+import { useEventListener } from '@varlet/use';
 import { call, createNamespace } from '../utils/components.mjs';
 var {
   n,
@@ -14,11 +15,13 @@ var DISTANCE_OFFSET = 12;
 var EVENT_DELAY = 200;
 var TAP_DELAY = 350;
 var ANIMATION_DURATION = 200;
+var LONG_PRESS_DELAY = 500;
 import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps, createVNode as _createVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
-var _hoisted_1 = ["src", "alt"];
+var _hoisted_1 = ["onTouchstart"];
+var _hoisted_2 = ["src", "alt"];
 
 function __render__(_ctx, _cache) {
   var _component_var_swipe_item = _resolveComponent("var-swipe-item");
@@ -53,7 +56,7 @@ function __render__(_ctx, _cache) {
       loop: _ctx.loop,
       onChange: _ctx.onChange
     }, _ctx.$attrs), {
-      default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.images, image => {
+      default: _withCtx(() => [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.images, (image, idx) => {
         return _openBlock(), _createBlock(_component_var_swipe_item, {
           class: _normalizeClass(_ctx.n('swipe-item')),
           "var-image-preview-cover": "",
@@ -66,24 +69,25 @@ function __render__(_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);
             })
           }, [_createElementVNode("img", {
-            class: _normalizeClass(_ctx.n('image')),
+            class: _normalizeClass(_ctx.classes(_ctx.n('image'), [_ctx.isPreventDefault, _ctx.n('--prevent')])),
             src: image,
             alt: image
           }, null, 10
           /* CLASS, PROPS */
-          , _hoisted_1)], 38
-          /* CLASS, STYLE, HYDRATE_EVENTS */
-          )]),
+          , _hoisted_2)], 46
+          /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
+          , _hoisted_1)]),
           _: 2
           /* DYNAMIC */
 
@@ -164,6 +168,15 @@ var __sfc__ = defineComponent({
     var startTouch = null;
     var prevTouch = null;
     var closeRunner = null;
+    var longPressRunner = null;
+    var isLongPress = false;
+    var isPreventDefault = computed(() => {
+      var {
+        imagePreventDefault,
+        show
+      } = props;
+      return show && imagePreventDefault;
+    });
 
     var getDistance = (touch, target) => {
       var {
@@ -220,7 +233,20 @@ var __sfc__ = 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); // avoid triggering tap event sometimes
+
+      if (isLongPress) {
+        isLongPress = false;
+        return;
+      }
+
       var isTap = isTapTouch(event.target);
       closeRunner = window.setTimeout(() => {
         isTap && close();
@@ -228,10 +254,18 @@ var __sfc__ = defineComponent({
       }, 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
+        } = props;
+        isLongPress = true;
+        call(onLongPress, idx);
+      }, LONG_PRESS_DELAY);
 
       if (isDoubleTouch(currentTouch)) {
         scale.value > 1 ? zoomOut() : zoomIn();
@@ -313,6 +347,10 @@ var __sfc__ = 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;
@@ -335,14 +373,20 @@ var __sfc__ = defineComponent({
       call(props['onUpdate:show'], false);
     };
 
-    watch(() => props.show, newValue => {
-      popupShow.value = newValue;
+    var preventImageDefault = event => {
+      props.imagePreventDefault && props.show && event.preventDefault();
+    };
+
+    useEventListener(() => document, 'contextmenu', preventImageDefault);
+    watch(() => props.show, newShow => {
+      popupShow.value = newShow;
     }, {
       immediate: true
     });
     return {
       n,
       classes,
+      isPreventDefault,
       initialIndex,
       popupShow,
       scale,
@@ -354,6 +398,7 @@ var __sfc__ = defineComponent({
       handleTouchstart,
       handleTouchmove,
       handleTouchend,
+      handleTouchcancel,
       close
     };
   }

package/es/image-preview/imagePreview.css

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

package/es/image-preview/props.mjs

@@ -8,6 +8,10 @@ export var props = _extends({
     type: Boolean,
     default: false
   },
+  imagePreventDefault: {
+    type: Boolean,
+    default: false
+  },
   images: {
     type: Array,
     default: () => []
@@ -23,6 +27,7 @@ export var props = _extends({
     type: Boolean,
     default: false
   },
-  'onUpdate:show': defineListenerProp()
+  'onUpdate:show': defineListenerProp(),
+  onLongPress: defineListenerProp()
 }, pickProps(swipeProps, ['loop', 'indicator', 'onChange']), pickProps(popupProps, ['lockScroll', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', // internal for function call closes the dialog
 'onRouteChange']));

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

package/es/progress/Progress.mjs

@@ -7,6 +7,7 @@ var {
   n,
   classes
 } = createNamespace('progress');
+var ONE_HUNDRED = 100;
 import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
@@ -116,8 +117,8 @@ var __sfc__ = defineComponent({
   setup(props) {
     var linearProps = computed(() => {
       var value = toNumber(props.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 + "%"
@@ -130,10 +131,10 @@ var __sfc__ = defineComponent({
         value
       } = props;
       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,

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'