@varlet/ui 2.11.0 → 2.11.1-alpha.1684493331817

package/es/image-preview/ImagePreview.mjs

@@ -163,7 +163,7 @@ var __sfc__ = defineComponent({
     var canSwipe = ref(true);
     var startTouch = null;
     var prevTouch = null;
-    var checker = null;
+    var closeRunner = null;
 
     var getDistance = (touch, target) => {
       var {
@@ -180,7 +180,7 @@ var __sfc__ = defineComponent({
     var createVarTouch = (touches, target) => ({
       clientX: touches.clientX,
       clientY: touches.clientY,
-      timestamp: Date.now(),
+      timestamp: performance.now(),
       target
     });
 
@@ -217,22 +217,20 @@ var __sfc__ = defineComponent({
         return false;
       }
 
-      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && Date.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
+      return getDistance(startTouch, prevTouch) <= DISTANCE_OFFSET && performance.now() - prevTouch.timestamp < TAP_DELAY && (target === startTouch.target || target.parentNode === startTouch.target);
     };
 
     var handleTouchend = event => {
-      checker = window.setTimeout(() => {
-        isTapTouch(event.target) && close();
+      var isTap = isTapTouch(event.target);
+      closeRunner = window.setTimeout(() => {
+        isTap && close();
         startTouch = null;
       }, EVENT_DELAY);
     };
 
     var handleTouchstart = event => {
-      checker && window.clearTimeout(checker);
-      var {
-        touches
-      } = event;
-      var currentTouch = createVarTouch(touches[0], event.currentTarget);
+      closeRunner && window.clearTimeout(closeRunner);
+      var currentTouch = createVarTouch(event.touches[0], event.currentTarget);
       startTouch = currentTouch;
 
       if (isDoubleTouch(currentTouch)) {
@@ -313,10 +311,7 @@ var __sfc__ = defineComponent({
       }
 
       var target = event.currentTarget;
-      var {
-        touches
-      } = event;
-      var currentTouch = createVarTouch(touches[0], target);
+      var currentTouch = createVarTouch(event.touches[0], target);
 
       if (scale.value > 1) {
         var moveX = currentTouch.clientX - prevTouch.clientX;

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

package/es/picker/Picker.mjs

@@ -4,7 +4,7 @@ import { defineComponent, watch, ref, computed, Transition, toRaw } from 'vue';
 import { props } from './props.mjs';
 import { isArray } from '@varlet/shared';
 import { dt } from '../utils/shared.mjs';
-import { toPxNum, getTranslate } from '../utils/elements.mjs';
+import { toPxNum, getTranslateY, requestAnimationFrame } from '../utils/elements.mjs';
 import { pack } from '../locale/index.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 var {
@@ -13,6 +13,8 @@ var {
 } = createNamespace('picker');
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
+var TRANSITION_DURATION = 200;
+var MOMENTUM_TRANSITION_DURATION = 1000;
 var sid = 0;
 import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, renderList as _renderList, Fragment as _Fragment, normalizeStyle as _normalizeStyle, withModifiers as _withModifiers, mergeProps as _mergeProps, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
@@ -20,6 +22,7 @@ var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["onTouchstart", "onTouchmove", "onTouchend"];
 var _hoisted_2 = ["onTransitionend"];
+var _hoisted_3 = ["onClick"];
 
 function __render__(_ctx, _cache) {
   var _component_var_button = _resolveComponent("var-button");
@@ -97,27 +100,28 @@ function __render__(_ctx, _cache) {
       }, [_createElementVNode("div", {
         class: _normalizeClass(_ctx.n('scroller')),
         ref_for: true,
-        ref: el => _ctx.getScrollEl(el, c),
+        ref: el => _ctx.setScrollEl(el, c),
         style: _normalizeStyle({
           transform: "translateY(" + c.translate + "px)",
           transitionDuration: c.duration + "ms",
           transitionProperty: c.duration ? 'transform' : 'none'
         }),
         onTransitionend: $event => _ctx.handleTransitionend(c)
-      }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(c.column.texts, t => {
+      }, [(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(c.column.texts, (t, i) => {
         return _openBlock(), _createElementBlock("div", {
           class: _normalizeClass(_ctx.n('option')),
           style: _normalizeStyle({
             height: _ctx.optionHeight + "px"
           }),
-          key: t
+          key: t,
+          onClick: $event => _ctx.handleClick(c, i)
         }, [_createElementVNode("div", {
           class: _normalizeClass(_ctx.n('text'))
         }, _toDisplayString(_ctx.textFormatter(t, c.columnIndex)), 3
         /* TEXT, CLASS */
-        )], 6
-        /* CLASS, STYLE */
-        );
+        )], 14
+        /* CLASS, STYLE, PROPS */
+        , _hoisted_3);
       }), 128
       /* KEYED_FRAGMENT */
       ))], 46
@@ -171,8 +175,9 @@ var __sfc__ = defineComponent({
     var center = computed(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
     var columnHeight = computed(() => optionCount.value * optionHeight.value);
     var prevIndexes = [];
+    var dragging = false;
 
-    var getScrollEl = (el, scrollColumn) => {
+    var setScrollEl = (el, scrollColumn) => {
       scrollColumn.scrollEl = el;
     };
 
@@ -180,16 +185,16 @@ var __sfc__ = defineComponent({
       call(props['onUpdate:show'], value);
     };
 
-    var limitTranslate = scrollColumn => {
-      var START_LIMIT = optionHeight.value + center.value;
-      var END_LIMIT = center.value - scrollColumn.column.texts.length * optionHeight.value;
+    var boundaryTranslate = scrollColumn => {
+      var startTranslate = optionHeight.value + center.value;
+      var endTranslate = center.value - scrollColumn.column.texts.length * optionHeight.value;
 
-      if (scrollColumn.translate >= START_LIMIT) {
-        scrollColumn.translate = START_LIMIT;
+      if (scrollColumn.translate >= startTranslate) {
+        scrollColumn.translate = startTranslate;
       }
 
-      if (scrollColumn.translate <= END_LIMIT) {
-        scrollColumn.translate = END_LIMIT;
+      if (scrollColumn.translate <= endTranslate) {
+        scrollColumn.translate = endTranslate;
       }
     };
 
@@ -202,11 +207,16 @@ var __sfc__ = defineComponent({
       return index;
     };
 
-    var getIndex = scrollColumn => {
-      var index = Math.round((center.value - scrollColumn.translate) / optionHeight.value);
+    var getTargetIndex = (scrollColumn, viewTranslate) => {
+      var index = Math.round((center.value - viewTranslate) / optionHeight.value);
       return boundaryIndex(scrollColumn, index);
     };
 
+    var updateTranslate = scrollColumn => {
+      scrollColumn.translate = center.value - scrollColumn.index * optionHeight.value;
+      return scrollColumn.translate;
+    };
+
     var getPicked = () => {
       var texts = scrollColumns.value.map(scrollColumn => scrollColumn.column.texts[scrollColumn.index]);
       var indexes = scrollColumns.value.map(scrollColumn => scrollColumn.index);
@@ -216,19 +226,12 @@ var __sfc__ = defineComponent({
       };
     };
 
-    var scrollTo = function (scrollColumn, index, duration, noEmit) {
-      if (noEmit === void 0) {
-        noEmit = false;
-      }
-
-      var translate = center.value - boundaryIndex(scrollColumn, index) * optionHeight.value;
-
-      if (translate === scrollColumn.translate) {
-        scrollColumn.scrolling = false;
-        !noEmit && change(scrollColumn);
+    var scrollTo = function (scrollColumn, duration) {
+      if (duration === void 0) {
+        duration = 0;
       }
 
-      scrollColumn.translate = translate;
+      updateTranslate(scrollColumn);
       scrollColumn.duration = duration;
     };
 
@@ -236,11 +239,21 @@ var __sfc__ = defineComponent({
       scrollColumn.translate += Math.abs(distance / duration) / 0.003 * (distance < 0 ? -1 : 1);
     };
 
+    var handleClick = (scrollColumn, index) => {
+      if (dragging) {
+        return;
+      }
+
+      scrollColumn.index = index;
+      scrollColumn.scrolling = true;
+      scrollTo(scrollColumn, TRANSITION_DURATION);
+    };
+
     var handleTouchstart = (event, scrollColumn) => {
       scrollColumn.touching = true;
       scrollColumn.scrolling = false;
       scrollColumn.duration = 0;
-      scrollColumn.translate = getTranslate(scrollColumn.scrollEl);
+      scrollColumn.translate = getTranslateY(scrollColumn.scrollEl);
     };
 
     var handleTouchmove = (event, scrollColumn) => {
@@ -248,13 +261,14 @@ var __sfc__ = defineComponent({
         return;
       }
 
+      dragging = true;
       var {
         clientY
       } = event.touches[0];
-      var moveY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0;
+      var deltaY = scrollColumn.prevY !== undefined ? clientY - scrollColumn.prevY : 0;
       scrollColumn.prevY = clientY;
-      scrollColumn.translate += moveY;
-      limitTranslate(scrollColumn);
+      scrollColumn.translate += deltaY;
+      boundaryTranslate(scrollColumn);
       var now = performance.now();
 
       if (now - scrollColumn.momentumTime > MOMENTUM_RECORD_TIME) {
@@ -265,14 +279,28 @@ var __sfc__ = defineComponent({
 
     var handleTouchend = (event, scrollColumn) => {
       scrollColumn.touching = false;
-      scrollColumn.scrolling = true;
       scrollColumn.prevY = undefined;
       var distance = scrollColumn.translate - scrollColumn.momentumPrevY;
       var duration = performance.now() - scrollColumn.momentumTime;
       var shouldMomentum = Math.abs(distance) >= MOMENTUM_ALLOW_DISTANCE && duration <= MOMENTUM_RECORD_TIME;
-      shouldMomentum && momentum(scrollColumn, distance, duration);
-      scrollColumn.index = getIndex(scrollColumn);
-      scrollTo(scrollColumn, scrollColumn.index, shouldMomentum ? 1000 : 200);
+
+      if (shouldMomentum) {
+        momentum(scrollColumn, distance, duration);
+      }
+
+      scrollColumn.index = getTargetIndex(scrollColumn, scrollColumn.translate);
+      var oldTranslate = scrollColumn.translate;
+      var newTranslate = updateTranslate(scrollColumn);
+      scrollColumn.scrolling = newTranslate !== oldTranslate;
+      scrollTo(scrollColumn, shouldMomentum ? MOMENTUM_TRANSITION_DURATION : TRANSITION_DURATION); // Can't trigger transition end when not scrolling, change needs to be triggered manually.
+
+      if (!scrollColumn.scrolling) {
+        change(scrollColumn);
+      }
+
+      requestAnimationFrame(() => {
+        dragging = false;
+      });
     };
 
     var handleTransitionend = scrollColumn => {
@@ -301,7 +329,7 @@ var __sfc__ = defineComponent({
           scrollEl: null,
           scrolling: false
         };
-        scrollTo(scrollColumn, scrollColumn.index, 0, true);
+        scrollTo(scrollColumn);
         return scrollColumn;
       });
     };
@@ -339,7 +367,7 @@ var __sfc__ = defineComponent({
           scrolling: false
         };
         scrollColumns.push(scrollColumn);
-        scrollTo(scrollColumn, scrollColumn.index, 0, true);
+        scrollTo(scrollColumn);
         createChildren(scrollColumns, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
@@ -354,7 +382,11 @@ var __sfc__ = defineComponent({
         cascade,
         onChange
       } = props;
-      cascade && rebuildChildren(scrollColumn);
+
+      if (cascade) {
+        rebuildChildren(scrollColumn);
+      }
+
       var hasScrolling = scrollColumns.value.some(scrollColumn => scrollColumn.scrolling);
 
       if (hasScrolling) {
@@ -380,17 +412,15 @@ var __sfc__ = defineComponent({
         var currentScrollColumn = scrollColumns.value.find(scrollColumn => scrollColumn.scrolling);
 
         if (currentScrollColumn) {
-          currentScrollColumn.translate = getTranslate(currentScrollColumn.scrollEl);
-          currentScrollColumn.index = getIndex(currentScrollColumn);
-          scrollTo(currentScrollColumn, currentScrollColumn.index, 0, true);
+          currentScrollColumn.index = getTargetIndex(currentScrollColumn, getTranslateY(currentScrollColumn.scrollEl));
           currentScrollColumn.scrolling = false;
+          scrollTo(currentScrollColumn);
           rebuildChildren(currentScrollColumn);
         }
       } else {
         scrollColumns.value.forEach(scrollColumn => {
-          scrollColumn.translate = getTranslate(scrollColumn.scrollEl);
-          scrollColumn.index = getIndex(scrollColumn);
-          scrollTo(scrollColumn, scrollColumn.index, 0);
+          scrollColumn.index = getTargetIndex(scrollColumn, getTranslateY(scrollColumn.scrollEl));
+          scrollTo(scrollColumn);
         });
       }
     }; // expose
@@ -437,7 +467,7 @@ var __sfc__ = defineComponent({
       columnHeight,
       center,
       Transition,
-      getScrollEl,
+      setScrollEl,
       handlePopupUpdateShow,
       handleTouchstart,
       handleTouchmove,
@@ -445,7 +475,8 @@ var __sfc__ = defineComponent({
       handleTransitionend,
       confirm,
       cancel,
-      dt
+      dt,
+      handleClick
     };
   }
 

package/es/utils/elements.mjs

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { isNumber, isObject, isString, kebabCase, toNumber, isWindow } from '@varlet/shared';
+import { isNumber, isObject, isString, kebabCase, toNumber, isWindow, inBrowser } from '@varlet/shared';
 import { getGlobalThis } from './shared.mjs';
 import { error } from './logger.mjs';
 // shorthand only
@@ -64,7 +64,7 @@ export function inViewport(element) {
   var yInViewport = top <= height && bottom >= 0;
   return xInViewport && yInViewport;
 }
-export function getTranslate(el) {
+export function getTranslateY(el) {
   var {
     transform
   } = getStyle(el);
@@ -136,7 +136,9 @@ export function getViewportSize() {
   };
 } // example 1rem
 
-export var isRem = value => isString(value) && value.endsWith('rem'); // e.g. 1 || 1px
+export var isRem = value => isString(value) && value.endsWith('rem'); // example 1em
+
+export var isEm = value => isString(value) && value.endsWith('em') && !value.endsWith('rem'); // e.g. 1 || 1px
 
 export var isPx = value => isString(value) && value.endsWith('px') || isNumber(value); // e.g. 1%
 
@@ -163,6 +165,10 @@ export var toPxNum = value => {
     return +value.replace('px', '');
   }
 
+  if (!inBrowser()) {
+    return 0;
+  }
+
   var {
     width,
     height
@@ -203,7 +209,7 @@ export var toSizeUnit = value => {
     return undefined;
   }
 
-  if (isPercent(value) || isVw(value) || isVh(value) || isRem(value) || isCalc(value) || isVar(value) || isVMin(value) || isVMax(value)) {
+  if (isPercent(value) || isVw(value) || isVh(value) || isEm(value) || isRem(value) || isCalc(value) || isVar(value) || isVMin(value) || isVMax(value)) {
     return value;
   }