@varlet/ui 2.11.0 → 2.11.1-alpha.1684493331817

package/highlight/web-types.en-US.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.11.0",
+  "version": "2.11.1-alpha.1684493331817",
   "name": "VARLET",
   "contributions": {
     "html": {

package/highlight/web-types.zh-CN.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
-  "version": "2.11.0",
+  "version": "2.11.1-alpha.1684493331817",
   "name": "VARLET",
   "contributions": {
     "html": {

package/lib/varlet.cjs.js

@@ -220,7 +220,7 @@ function inViewport(element) {
   var yInViewport = top2 <= height && bottom2 >= 0;
   return xInViewport && yInViewport;
 }
-function getTranslate(el) {
+function getTranslateY(el) {
   var {
     transform
   } = getStyle$1(el);
@@ -282,6 +282,7 @@ function getViewportSize() {
   };
 }
 var isRem = (value) => isString(value) && value.endsWith("rem");
+var isEm = (value) => isString(value) && value.endsWith("em") && !value.endsWith("rem");
 var isPx = (value) => isString(value) && value.endsWith("px") || isNumber(value);
 var isPercent = (value) => isString(value) && value.endsWith("%");
 var isVw = (value) => isString(value) && value.endsWith("vw");
@@ -297,6 +298,9 @@ var toPxNum = (value) => {
   if (isPx(value)) {
     return +value.replace("px", "");
   }
+  if (!inBrowser()) {
+    return 0;
+  }
   var {
     width,
     height
@@ -327,7 +331,7 @@ var toSizeUnit = (value) => {
   if (value == null) {
     return void 0;
   }
-  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;
   }
   return toPxNum(value) + "px";
@@ -14787,7 +14791,7 @@ var __sfc__$G = vue.defineComponent({
     var canSwipe = vue.ref(true);
     var startTouch = null;
     var prevTouch = null;
-    var checker = null;
+    var closeRunner = null;
     var getDistance = (touch, target) => {
       var {
         clientX: touchX,
@@ -14802,7 +14806,7 @@ var __sfc__$G = vue.defineComponent({
     var createVarTouch = (touches, target) => ({
       clientX: touches.clientX,
       clientY: touches.clientY,
-      timestamp: Date.now(),
+      timestamp: performance.now(),
       target
     });
     var zoomIn = () => {
@@ -14833,20 +14837,18 @@ var __sfc__$G = vue.defineComponent({
       if (!target || !startTouch || !prevTouch) {
         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)) {
         scale.value > 1 ? zoomOut() : zoomIn();
@@ -14913,10 +14915,7 @@ var __sfc__$G = vue.defineComponent({
         return;
       }
       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;
         var moveY = currentTouch.clientY - prevTouch.clientY;
@@ -16069,7 +16068,7 @@ var {
 } = createNamespace("input");
 var _hoisted_1$e = ["placeholder", "enterkeyhint"];
 var _hoisted_2$9 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-var _hoisted_3$7 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
+var _hoisted_3$8 = ["id", "disabled", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__$A(_ctx, _cache) {
   var _component_var_field_decorator = vue.resolveComponent("var-field-decorator");
   var _component_var_form_details = vue.resolveComponent("var-form-details");
@@ -16213,7 +16212,7 @@ function __render__$A(_ctx, _cache) {
           },
           null,
           46,
-          _hoisted_3$7
+          _hoisted_3$8
         ))]),
         _: 3
         /* FORWARDED */
@@ -18036,9 +18035,12 @@ var {
 } = createNamespace("picker");
 var MOMENTUM_RECORD_TIME = 300;
 var MOMENTUM_ALLOW_DISTANCE = 15;
+var TRANSITION_DURATION = 200;
+var MOMENTUM_TRANSITION_DURATION = 1e3;
 var sid$1 = 0;
 var _hoisted_1$c = ["onTouchstart", "onTouchmove", "onTouchend"];
 var _hoisted_2$8 = ["onTransitionend"];
+var _hoisted_3$7 = ["onClick"];
 function __render__$t(_ctx, _cache) {
   var _component_var_button = vue.resolveComponent("var-button");
   return vue.openBlock(), vue.createBlock(
@@ -18149,7 +18151,7 @@ function __render__$t(_ctx, _cache) {
                   {
                     class: vue.normalizeClass(_ctx.n("scroller")),
                     ref_for: true,
-                    ref: (el) => _ctx.getScrollEl(el, c),
+                    ref: (el) => _ctx.setScrollEl(el, c),
                     style: vue.normalizeStyle({
                       transform: "translateY(" + c.translate + "px)",
                       transitionDuration: c.duration + "ms",
@@ -18160,7 +18162,7 @@ function __render__$t(_ctx, _cache) {
                   [(vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
-                    vue.renderList(c.column.texts, (t) => {
+                    vue.renderList(c.column.texts, (t, i) => {
                       return vue.openBlock(), vue.createElementBlock(
                         "div",
                         {
@@ -18168,7 +18170,8 @@ function __render__$t(_ctx, _cache) {
                           style: vue.normalizeStyle({
                             height: _ctx.optionHeight + "px"
                           }),
-                          key: t
+                          key: t,
+                          onClick: ($event) => _ctx.handleClick(c, i)
                         },
                         [vue.createElementVNode(
                           "div",
@@ -18179,8 +18182,8 @@ function __render__$t(_ctx, _cache) {
                           3
                           /* TEXT, CLASS */
                         )],
-                        6
-                        /* CLASS, STYLE */
+                        14,
+                        _hoisted_3$7
                       );
                     }),
                     128
@@ -18247,20 +18250,21 @@ var __sfc__$u = vue.defineComponent({
     var center = vue.computed(() => optionCount.value * optionHeight.value / 2 - optionHeight.value / 2);
     var columnHeight = vue.computed(() => optionCount.value * optionHeight.value);
     var prevIndexes = [];
-    var getScrollEl = (el, scrollColumn) => {
+    var dragging = false;
+    var setScrollEl = (el, scrollColumn) => {
       scrollColumn.scrollEl = el;
     };
     var handlePopupUpdateShow = (value) => {
       call(props2["onUpdate:show"], value);
     };
-    var limitTranslate = (scrollColumn) => {
-      var START_LIMIT = optionHeight.value + center.value;
-      var END_LIMIT = center.value - scrollColumn.column.texts.length * optionHeight.value;
-      if (scrollColumn.translate >= START_LIMIT) {
-        scrollColumn.translate = START_LIMIT;
+    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 <= END_LIMIT) {
-        scrollColumn.translate = END_LIMIT;
+      if (scrollColumn.translate <= endTranslate) {
+        scrollColumn.translate = endTranslate;
       }
     };
     var boundaryIndex = (scrollColumn, index) => {
@@ -18271,10 +18275,14 @@ var __sfc__$u = vue.defineComponent({
       index = index <= 0 ? 0 : index;
       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);
@@ -18283,38 +18291,42 @@ var __sfc__$u = vue.defineComponent({
         indexes
       };
     };
-    var scrollTo2 = 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 scrollTo2 = function(scrollColumn, duration) {
+      if (duration === void 0) {
+        duration = 0;
       }
-      scrollColumn.translate = translate;
+      updateTranslate(scrollColumn);
       scrollColumn.duration = duration;
     };
     var momentum = (scrollColumn, distance, duration) => {
       scrollColumn.translate += Math.abs(distance / duration) / 3e-3 * (distance < 0 ? -1 : 1);
     };
+    var handleClick = (scrollColumn, index) => {
+      if (dragging) {
+        return;
+      }
+      scrollColumn.index = index;
+      scrollColumn.scrolling = true;
+      scrollTo2(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) => {
       if (!scrollColumn.touching) {
         return;
       }
+      dragging = true;
       var {
         clientY
       } = event.touches[0];
-      var moveY = scrollColumn.prevY !== void 0 ? clientY - scrollColumn.prevY : 0;
+      var deltaY = scrollColumn.prevY !== void 0 ? 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) {
         scrollColumn.momentumTime = now;
@@ -18323,14 +18335,24 @@ var __sfc__$u = vue.defineComponent({
     };
     var handleTouchend = (event, scrollColumn) => {
       scrollColumn.touching = false;
-      scrollColumn.scrolling = true;
       scrollColumn.prevY = void 0;
       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);
-      scrollTo2(scrollColumn, scrollColumn.index, shouldMomentum ? 1e3 : 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;
+      scrollTo2(scrollColumn, shouldMomentum ? MOMENTUM_TRANSITION_DURATION : TRANSITION_DURATION);
+      if (!scrollColumn.scrolling) {
+        change(scrollColumn);
+      }
+      requestAnimationFrame(() => {
+        dragging = false;
+      });
     };
     var handleTransitionend = (scrollColumn) => {
       scrollColumn.scrolling = false;
@@ -18356,7 +18378,7 @@ var __sfc__$u = vue.defineComponent({
           scrollEl: null,
           scrolling: false
         };
-        scrollTo2(scrollColumn, scrollColumn.index, 0, true);
+        scrollTo2(scrollColumn);
         return scrollColumn;
       });
     };
@@ -18390,7 +18412,7 @@ var __sfc__$u = vue.defineComponent({
           scrolling: false
         };
         scrollColumns2.push(scrollColumn);
-        scrollTo2(scrollColumn, scrollColumn.index, 0, true);
+        scrollTo2(scrollColumn);
         createChildren(scrollColumns2, scrollColumn.columns[scrollColumn.index].children, columnIndex + 1, initial);
       }
     };
@@ -18403,7 +18425,9 @@ var __sfc__$u = vue.defineComponent({
         cascade,
         onChange
       } = props2;
-      cascade && rebuildChildren(scrollColumn);
+      if (cascade) {
+        rebuildChildren(scrollColumn);
+      }
       var hasScrolling = scrollColumns.value.some((scrollColumn2) => scrollColumn2.scrolling);
       if (hasScrolling) {
         return;
@@ -18423,17 +18447,15 @@ var __sfc__$u = vue.defineComponent({
       if (props2.cascade) {
         var currentScrollColumn = scrollColumns.value.find((scrollColumn) => scrollColumn.scrolling);
         if (currentScrollColumn) {
-          currentScrollColumn.translate = getTranslate(currentScrollColumn.scrollEl);
-          currentScrollColumn.index = getIndex(currentScrollColumn);
-          scrollTo2(currentScrollColumn, currentScrollColumn.index, 0, true);
+          currentScrollColumn.index = getTargetIndex(currentScrollColumn, getTranslateY(currentScrollColumn.scrollEl));
           currentScrollColumn.scrolling = false;
+          scrollTo2(currentScrollColumn);
           rebuildChildren(currentScrollColumn);
         }
       } else {
         scrollColumns.value.forEach((scrollColumn) => {
-          scrollColumn.translate = getTranslate(scrollColumn.scrollEl);
-          scrollColumn.index = getIndex(scrollColumn);
-          scrollTo2(scrollColumn, scrollColumn.index, 0);
+          scrollColumn.index = getTargetIndex(scrollColumn, getTranslateY(scrollColumn.scrollEl));
+          scrollTo2(scrollColumn);
         });
       }
     };
@@ -18475,7 +18497,7 @@ var __sfc__$u = vue.defineComponent({
       columnHeight,
       center,
       Transition: vue.Transition,
-      getScrollEl,
+      setScrollEl,
       handlePopupUpdateShow,
       handleTouchstart,
       handleTouchmove,
@@ -18483,7 +18505,8 @@ var __sfc__$u = vue.defineComponent({
       handleTransitionend,
       confirm,
       cancel,
-      dt
+      dt,
+      handleClick
     };
   }
 });
@@ -25468,7 +25491,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.11.0";
+const version = "2.11.1-alpha.1684493331817";
 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.0",
+  "version": "2.11.1-alpha.1684493331817",
   "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.0",
-    "@varlet/shared": "2.11.0",
-    "@varlet/use": "2.11.0"
+    "@varlet/icons": "2.11.1-alpha.1684493331817",
+    "@varlet/shared": "2.11.1-alpha.1684493331817",
+    "@varlet/use": "2.11.1-alpha.1684493331817"
   },
   "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.0",
-    "@varlet/touch-emulator": "2.11.0"
+    "@varlet/touch-emulator": "2.11.1-alpha.1684493331817",
+    "@varlet/cli": "2.11.1-alpha.1684493331817"
   },
   "browserslist": [
     "Chrome >= 54",