framework7 7.0.0-beta.10 → 7.0.0-beta.15

package/components/picker/picker-column.js

@@ -1,9 +1,7 @@
 import $ from '../../shared/dom7.js';
-import { requestAnimationFrame, getTranslate } from '../../shared/utils.js';
-import { getSupport } from '../../shared/get-support.js';
 export default function pickerColumn(colEl, updateItems) {
-  const picker = this;
-  const app = picker.app;
+  const picker = this; // const app = picker.app;
+
   const $colEl = $(colEl);
   const colIndex = $colEl.index();
   const col = picker.cols[colIndex];
@@ -13,17 +11,7 @@ export default function pickerColumn(colEl, updateItems) {
   col.$itemsEl = col.$el.find('.picker-items');
   col.items = col.$itemsEl.find('.picker-item');
   let itemHeight;
-  let itemsHeight;
-  let minTranslate;
-  let maxTranslate;
-  let animationFrameId;
-
-  function updateDuringScroll() {
-    animationFrameId = requestAnimationFrame(() => {
-      col.updateItems(undefined, undefined, 0);
-      updateDuringScroll();
-    });
-  }
+  let colHeight;
 
   col.replaceValues = function replaceColValues(values, displayValues) {
     col.detachEvents();
@@ -32,99 +20,63 @@ export default function pickerColumn(colEl, updateItems) {
     col.$itemsEl.html(picker.renderColumn(col, true));
     col.items = col.$itemsEl.find('.picker-item');
     col.calcSize();
-    col.setValue(col.values[0], 0, true);
+    col.setValue(col.values[0], true);
     col.attachEvents();
   };
 
   col.calcSize = function calcColSize() {
-    if (picker.params.rotateEffect) {
-      col.$el.removeClass('picker-column-absolute');
-      if (!col.width) col.$el.css({
-        width: ''
-      });
-    }
-
-    let colWidth = 0;
-    const colHeight = col.$el[0].offsetHeight;
+    colHeight = col.$el[0].offsetHeight;
     itemHeight = col.items[0].offsetHeight;
-    itemsHeight = itemHeight * col.items.length;
-    minTranslate = colHeight / 2 - itemsHeight + itemHeight / 2;
-    maxTranslate = colHeight / 2 - itemHeight / 2;
-
-    if (col.width) {
-      colWidth = col.width;
-      if (parseInt(colWidth, 10) === colWidth) colWidth += 'px';
-      col.$el.css({
-        width: colWidth
-      });
-    }
+    const hadPadding = col.el.style.getPropertyValue('--f7-picker-scroll-padding');
+    col.el.style.setProperty('--f7-picker-scroll-padding', `${(colHeight - itemHeight) / 2}px`);
 
-    if (picker.params.rotateEffect) {
-      if (!col.width) {
-        col.items.each(itemEl => {
-          const item = $(itemEl).children('span');
-          colWidth = Math.max(colWidth, item[0].offsetWidth);
-        });
-        col.$el.css({
-          width: `${colWidth + 2}px`
-        });
-      }
-
-      col.$el.addClass('picker-column-absolute');
+    if (!hadPadding) {
+      col.$itemsEl[0].scrollTop = 0;
     }
   };
 
-  col.setValue = function setColValue(newValue, transition = '', valueCallbacks) {
+  col.setValue = function setColValue(newValue, valueCallbacks) {
     const newActiveIndex = col.$itemsEl.find(`.picker-item[data-picker-value="${newValue}"]`).index();
 
     if (typeof newActiveIndex === 'undefined' || newActiveIndex === -1) {
       return;
     }
 
-    const newTranslate = -newActiveIndex * itemHeight + maxTranslate; // Update wrapper
-
-    col.$itemsEl.transition(transition);
-    col.$itemsEl.transform(`translate3d(0,${newTranslate}px,0)`); // Watch items
-
-    if (picker.params.updateValuesOnMomentum && col.activeIndex && col.activeIndex !== newActiveIndex) {
-      cancelAnimationFrame(animationFrameId);
-      col.$itemsEl.transitionEnd(() => {
-        cancelAnimationFrame(animationFrameId);
-      });
-      updateDuringScroll();
-    } // Update items
-
+    const newScrollTop = newActiveIndex * itemHeight;
+    col.$itemsEl[0].scrollTop = newScrollTop; // Update items
 
-    col.updateItems(newActiveIndex, newTranslate, transition, valueCallbacks);
+    col.updateItems(newActiveIndex, newScrollTop, valueCallbacks);
   };
 
-  col.updateItems = function updateColItems(activeIndex, translate, transition, valueCallbacks) {
-    if (typeof translate === 'undefined') {
+  col.updateItems = function updateColItems(activeIndex, scrollTop, valueCallbacks) {
+    if (typeof scrollTop === 'undefined') {
       // eslint-disable-next-line
-      translate = getTranslate(col.$itemsEl[0], 'y');
+      scrollTop = col.$itemsEl[0].scrollTop;
     }
+    /* eslint-disable no-param-reassign */
 
-    if (typeof activeIndex === 'undefined') // eslint-disable-next-line
-      activeIndex = -Math.round((translate - maxTranslate) / itemHeight); // eslint-disable-next-line
 
-    if (activeIndex < 0) activeIndex = 0; // eslint-disable-next-line
+    if (typeof activeIndex === 'undefined') {
+      activeIndex = Math.round(scrollTop / itemHeight);
+    }
 
+    if (activeIndex < 0) activeIndex = 0;
     if (activeIndex >= col.items.length) activeIndex = col.items.length - 1;
+    /* eslint-enable no-param-reassign */
+
     const previousActiveIndex = col.activeIndex;
     col.activeIndex = activeIndex;
     col.$itemsEl.find('.picker-item-selected').removeClass('picker-item-selected');
-    col.items.transition(transition);
-    const selectedItem = col.items.eq(activeIndex).addClass('picker-item-selected').transform(''); // Set 3D rotate effect
+    const selectedItem = col.items.eq(activeIndex);
+    selectedItem.addClass('picker-item-selected').children().transform(''); // Set 3D rotate effect
 
     if (picker.params.rotateEffect) {
       col.items.each(itemEl => {
         const $itemEl = $(itemEl);
-        const itemOffsetTop = $itemEl.index() * itemHeight;
-        const translateOffset = maxTranslate - translate;
-        const itemOffset = itemOffsetTop - translateOffset;
+        const itemOffset = itemEl.offsetTop - (colHeight - itemHeight) / 2 - scrollTop;
         const percentage = itemOffset / itemHeight;
         const itemsFit = Math.ceil(col.height / itemHeight / 2) + 1;
-        let angle = -18 * percentage;
+        let angle = -24 * percentage;
         if (angle > 180) angle = 180;
         if (angle < -180) angle = -180;
 
@@ -134,7 +86,7 @@ export default function pickerColumn(colEl, updateItems) {
           $itemEl.removeClass('picker-item-far');
         }
 
-        $itemEl.transform(`translate3d(0, ${-translate + maxTranslate}px, ${picker.needsOriginFix ? -110 : 0}px) rotateX(${angle}deg)`);
+        $itemEl.children('span').transform(`translate3d(0, ${-percentage * itemHeight}px, -100px) rotateX(${angle}deg)`);
       });
     }
 
@@ -153,219 +105,31 @@ export default function pickerColumn(colEl, updateItems) {
     }
   };
 
-  let allowItemClick = true;
-  let isTouched;
-  let isMoved;
-  let touchStartY;
-  let touchCurrentY;
-  let touchStartTime;
-  let touchEndTime;
-  let startTranslate;
-  let returnTo;
-  let currentTranslate;
-  let prevTranslate;
-  let velocityTranslate;
-
-  function handleTouchStart(e) {
-    if (isMoved || isTouched) return;
-    e.preventDefault();
-    isTouched = true;
-    touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
-    touchCurrentY = touchStartY;
-    touchStartTime = new Date().getTime();
-    allowItemClick = true;
-    startTranslate = getTranslate(col.$itemsEl[0], 'y');
-    currentTranslate = startTranslate;
-  }
-
-  function handleTouchMove(e) {
-    if (!isTouched) return;
-    e.preventDefault();
-    allowItemClick = false;
-    touchCurrentY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
-
-    if (!isMoved) {
-      // First move
-      cancelAnimationFrame(animationFrameId);
-      isMoved = true;
-      startTranslate = getTranslate(col.$itemsEl[0], 'y');
-      currentTranslate = startTranslate;
-      col.$itemsEl.transition(0);
-    }
-
-    const diff = touchCurrentY - touchStartY;
-    currentTranslate = startTranslate + diff;
-    returnTo = undefined; // Normalize translate
-
-    if (currentTranslate < minTranslate) {
-      currentTranslate = minTranslate - (minTranslate - currentTranslate) ** 0.8;
-      returnTo = 'min';
-    }
-
-    if (currentTranslate > maxTranslate) {
-      currentTranslate = maxTranslate + (currentTranslate - maxTranslate) ** 0.8;
-      returnTo = 'max';
-    } // Transform wrapper
-
-
-    col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-    col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnTouchmove); // Calc velocity
-
-    velocityTranslate = currentTranslate - prevTranslate || currentTranslate;
-    prevTranslate = currentTranslate;
-  }
-
-  function handleTouchEnd() {
-    if (!isTouched || !isMoved) {
-      isTouched = false;
-      isMoved = false;
-      return;
-    }
-
-    isTouched = false;
-    isMoved = false;
-    col.$itemsEl.transition('');
-
-    if (returnTo) {
-      if (returnTo === 'min') {
-        col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-      } else {
-        col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-      }
-    }
-
-    touchEndTime = new Date().getTime();
-    let newTranslate;
-
-    if (touchEndTime - touchStartTime > 300) {
-      newTranslate = currentTranslate;
-    } else {
-      newTranslate = currentTranslate + velocityTranslate * picker.params.momentumRatio;
-    }
-
-    newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-    const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-    if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-    col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-    col.updateItems(activeIndex, newTranslate, '', true); // Watch items
-
-    if (picker.params.updateValuesOnMomentum) {
-      updateDuringScroll();
-      col.$itemsEl.transitionEnd(() => {
-        cancelAnimationFrame(animationFrameId);
-      });
-    } // Allow click
-
-
-    setTimeout(() => {
-      allowItemClick = true;
-    }, 100);
-  }
-
-  let mousewheelTimeout;
-
-  function handleMouseWheel(e) {
-    const {
-      deltaX,
-      deltaY
-    } = e;
-    if (Math.abs(deltaX) > Math.abs(deltaY)) return;
-    clearTimeout(mousewheelTimeout);
-    e.preventDefault();
-    cancelAnimationFrame(animationFrameId);
-    startTranslate = getTranslate(col.$itemsEl[0], 'y');
-    col.$itemsEl.transition(0);
-    currentTranslate = startTranslate - deltaY;
-    returnTo = undefined; // Normalize translate
-
-    if (currentTranslate < minTranslate) {
-      currentTranslate = minTranslate;
-      returnTo = 'min';
-    }
-
-    if (currentTranslate > maxTranslate) {
-      currentTranslate = maxTranslate;
-      returnTo = 'max';
-    } // Transform wrapper
-
-
-    col.$itemsEl.transform(`translate3d(0,${currentTranslate}px,0)`); // Update items
-
-    col.updateItems(undefined, currentTranslate, 0, picker.params.updateValuesOnMousewheel); // On end
-
-    mousewheelTimeout = setTimeout(() => {
-      col.$itemsEl.transition('');
-
-      if (returnTo) {
-        if (returnTo === 'min') {
-          col.$itemsEl.transform(`translate3d(0,${minTranslate}px,0)`);
-        } else {
-          col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`);
-        }
-      }
-
-      touchEndTime = new Date().getTime();
-      let newTranslate = currentTranslate;
-      newTranslate = Math.max(Math.min(newTranslate, maxTranslate), minTranslate); // Active Index
-
-      const activeIndex = Math.round(Math.abs((newTranslate - maxTranslate) / itemHeight)); // Normalize translate
-
-      if (!picker.params.freeMode) newTranslate = -activeIndex * itemHeight + maxTranslate; // Transform wrapper
-
-      col.$itemsEl.transform(`translate3d(0,${parseInt(newTranslate, 10)}px,0)`); // Update items
-
-      col.updateItems(activeIndex, newTranslate, '', true);
-    }, 200);
+  function handleScroll() {
+    col.updateItems();
   }
 
   function handleClick() {
-    if (!allowItemClick) return;
-    cancelAnimationFrame(animationFrameId);
     const value = $(this).attr('data-picker-value');
     col.setValue(value);
   }
 
-  const activeListener = getSupport().passiveListener ? {
-    passive: false,
-    capture: false
-  } : false;
-
   col.attachEvents = function attachColEvents() {
-    col.$el.on(app.touchEvents.start, handleTouchStart, activeListener);
-    app.on('touchmove:active', handleTouchMove);
-    app.on('touchend:passive', handleTouchEnd);
-
-    if (picker.params.mousewheel) {
-      col.$el.on('wheel', handleMouseWheel);
-    }
-
+    col.$itemsEl.on('scroll', handleScroll);
     col.items.on('click', handleClick);
   };
 
   col.detachEvents = function detachColEvents() {
-    col.$el.off(app.touchEvents.start, handleTouchStart, activeListener);
-    app.off('touchmove:active', handleTouchMove);
-    app.off('touchend:passive', handleTouchEnd);
-
-    if (picker.params.mousewheel) {
-      col.$el.off('wheel', handleMouseWheel);
-    }
-
     col.items.off('click', handleClick);
   };
 
   col.init = function initCol() {
     col.calcSize();
-    col.$itemsEl.transform(`translate3d(0,${maxTranslate}px,0)`).transition(0);
     if (colIndex === 0) col.$el.addClass('picker-column-first');
-    if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last'); // Update items on init
+    if (colIndex === picker.cols.length - 1) col.$el.addClass('picker-column-last');
+    if (picker.params.freeMode) col.$el.addClass('picker-column-free-mode'); // Update items on init
 
-    if (updateItems) col.updateItems(0, maxTranslate, 0);
+    if (updateItems) col.updateItems(0);
     col.attachEvents();
   };
 

package/components/picker/picker-rtl.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{left:100%}.picker-column.picker-column-last:after{right:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{transition:.3s;transition-timing-function:ease-out}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;transition:.3s;color:var(--f7-picker-item-text-color);cursor:pointer}.picker-item span{padding:0 10px}.picker-column-absolute .picker-item{position:absolute}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden;perspective:1200px}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{transform-origin:center center -110px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-timing-function:ease-out}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{left:100%}.picker-column.picker-column-last:after{right:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scrollbar-width:none;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px}.picker-items::-webkit-scrollbar{display:none;opacity:0}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}

package/components/picker/picker.css

@@ -1 +1 @@
-:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{right:100%}.picker-column.picker-column-last:after{left:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{transition:.3s;transition-timing-function:ease-out}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;transition:.3s;color:var(--f7-picker-item-text-color);cursor:pointer}.picker-item span{padding:0 10px}.picker-column-absolute .picker-item{position:absolute}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden;perspective:1200px}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{transform-origin:center center -110px;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition-timing-function:ease-out}
+:root{--f7-picker-height:260px;--f7-picker-inline-height:200px;--f7-picker-popover-height:260px;--f7-picker-popover-width:280px;--f7-picker-landscape-height:200px;--f7-picker-item-height:36px;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-item-selected-text-color:#000}:root .dark,:root.dark{--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-item-selected-text-color:#fff}.ios{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px;--f7-picker-divider-text-color:rgba(0, 0, 0, 0.87);--f7-picker-item-text-color:rgba(0, 0, 0, 0.54)}.md .dark,.md.dark{--f7-picker-item-text-color:rgba(255, 255, 255, 0.54);--f7-picker-divider-text-color:rgba(255, 255, 255, 0.87)}.aurora{--f7-picker-column-font-size:20px;--f7-picker-item-text-color:#888;--f7-picker-divider-text-color:#000}.aurora .dark,.aurora.dark{--f7-picker-divider-text-color:#fff}.picker{width:100%;height:var(--f7-picker-height)}.picker.picker-inline{height:var(--f7-picker-inline-height)}.popover .picker{height:var(--f7-picker-popover-height)}@media (orientation:landscape) and (max-height:415px){.picker:not(.picker-inline){height:var(--f7-picker-landscape-height)}}.picker.sheet-modal{background:var(--f7-picker-sheet-bg-color,var(--f7-sheet-bg-color))}.picker-popover{width:var(--f7-picker-popover-width)}.picker-popover .toolbar{background:0 0;border-radius:var(--f7-popover-border-radius) var(--f7-popover-border-radius) 0 0}.picker-popover .toolbar:before{display:none!important}.picker-popover .toolbar+.picker-columns{height:calc(100% - var(--f7-toolbar-height))}.picker-columns{display:flex;overflow:hidden;justify-content:center;padding:0;text-align:right;height:100%;position:relative;-webkit-mask-box-image:linear-gradient(to top,transparent,transparent 5%,white 20%,white 80%,transparent 95%,transparent);font-size:var(--f7-picker-column-font-size)}.picker-column{position:relative;max-height:100%}.picker-column.picker-column-first:before,.picker-column.picker-column-last:after{height:100%;width:100vw;position:absolute;content:'';top:0}.picker-column.picker-column-first:before{right:100%}.picker-column.picker-column-last:after{left:100%}.picker-column.picker-column-left{text-align:left}.picker-column.picker-column-center{text-align:center}.picker-column.picker-column-right{text-align:right}.picker-column.picker-column-divider{display:flex;align-items:center;color:var(--f7-picker-divider-text-color)}.picker-items{overflow:auto;scrollbar-width:none;scroll-snap-type:y mandatory;height:100%;box-sizing:border-box;padding:var(--f7-picker-scroll-padding,0px) 0px}.picker-items::-webkit-scrollbar{display:none;opacity:0}.picker-item{height:var(--f7-picker-item-height);line-height:var(--f7-picker-item-height);white-space:nowrap;position:relative;overflow:hidden;text-overflow:ellipsis;left:0;top:0;width:100%;box-sizing:border-box;color:var(--f7-picker-item-text-color);cursor:pointer;scroll-snap-align:center}.picker-item span{padding:0 10px}.picker-item.picker-item-far{pointer-events:none}.picker-item.picker-item-selected{color:var(--f7-picker-item-selected-text-color);transform:translate3d(0,0,0) rotateX(0deg)}.picker-column-free-mode .picker-item{scroll-snap-align:none}.picker-center-highlight{height:var(--f7-picker-item-height);box-sizing:border-box;position:absolute;left:16px;right:16px;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .picker-center-highlight{left:8px;right:8px}.picker-3d .picker-columns{overflow:hidden}.picker-3d .picker-column,.picker-3d .picker-item,.picker-3d .picker-items{transform-style:preserve-3d}.picker-3d .picker-column{overflow:visible}.picker-3d .picker-item{perspective:1200px;overflow:visible}.picker-3d .picker-item>span{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:block;transform-style:preserve-3d;position:relative;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;max-width:100%;transform-origin:center center -100px}

package/components/picker/picker.d.ts

@@ -32,9 +32,8 @@ export namespace Picker {
     view: View.View;
     /** Object with initialization parameters */
     params: Parameters;
-
     /** Set new picker value. values is array where each item represents value for each column. duration - transition duration in ms */
-    setValue(values: unknown[], duration?: number): void;
+    setValue(values: unknown[]): void;
     /** Returns current picker value */
     getValue(): unknown;
     /** Open Picker */
@@ -60,7 +59,7 @@ export namespace Picker {
     activeIndex: number;
 
     /** Set new value for current column. value is a new value, duration - transition duration in ms */
-    setValue(value: unknown, duration?: number): void;
+    setValue(value: unknown): void;
     /** Replace column values and displayValues with new ones */
     replaceValues(values: unknown[], displayValues: unknown[]): void;
   }
@@ -87,16 +86,6 @@ export namespace Picker {
   interface Parameters {
     /** Enables 3D rotate effect. (default false) */
     rotateEffect?: boolean;
-    /** Larger values produces more momentum when you release picker after fast touch and move. (default 7) */
-    momentumRatio?: number;
-    /** Updates picker and input values during momentum. (default false) */
-    updateValuesOnMomentum?: boolean;
-    /** Updates picker and input values during touch move. (default true) */
-    updateValuesOnTouchmove?: boolean;
-    /** Updates picker and input values during mousewheel scrolling. (default true) */
-    updateValuesOnMousewheel?: boolean;
-    /** Allow to scroll through picker with mousewheel (default true) */
-    mousewheel?: boolean;
     /** Disables snapping on values. (default false) */
     freeMode?: boolean;
     /** Array with initial values. Each array item represents value of related column. */

package/components/picker/picker.js

@@ -28,12 +28,7 @@ export default {
   params: {
     picker: {
       // Picker settings
-      updateValuesOnMomentum: false,
-      updateValuesOnTouchmove: true,
-      updateValuesOnMousewheel: true,
-      mousewheel: true,
       rotateEffect: false,
-      momentumRatio: 7,
       freeMode: false,
       cols: [],
       // Common opener settings

package/components/picker/picker.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var s=e.$,n=e.utils,i=e.getDevice,a=e.getSupport,l=e.Class,o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,n.requestAnimationFrame),c=n.getTranslate,p=n.extend,d=n.nextTick,u=n.deleteProps;function m(e,t){const n=this,i=n.app,l=s(e),o=l.index(),p=n.cols[o];if(p.divider)return;let d,u,m,h,v;function f(){v=r((()=>{p.updateItems(void 0,void 0,0),f()}))}p.$el=l,p.el=l[0],p.$itemsEl=p.$el.find(".picker-items"),p.items=p.$itemsEl.find(".picker-item"),p.replaceValues=function(e,t){p.detachEvents(),p.values=e,p.displayValues=t,p.$itemsEl.html(n.renderColumn(p,!0)),p.items=p.$itemsEl.find(".picker-item"),p.calcSize(),p.setValue(p.values[0],0,!0),p.attachEvents()},p.calcSize=function(){n.params.rotateEffect&&(p.$el.removeClass("picker-column-absolute"),p.width||p.$el.css({width:""}));let e=0;const t=p.$el[0].offsetHeight;d=p.items[0].offsetHeight,u=d*p.items.length,m=t/2-u+d/2,h=t/2-d/2,p.width&&(e=p.width,parseInt(e,10)===e&&(e+="px"),p.$el.css({width:e})),n.params.rotateEffect&&(p.width||(p.items.each((t=>{const n=s(t).children("span");e=Math.max(e,n[0].offsetWidth)})),p.$el.css({width:`${e+2}px`})),p.$el.addClass("picker-column-absolute"))},p.setValue=function(e,t="",s){const i=p.$itemsEl.find(`.picker-item[data-picker-value="${e}"]`).index();if(void 0===i||-1===i)return;const a=-i*d+h;p.$itemsEl.transition(t),p.$itemsEl.transform(`translate3d(0,${a}px,0)`),n.params.updateValuesOnMomentum&&p.activeIndex&&p.activeIndex!==i&&(cancelAnimationFrame(v),p.$itemsEl.transitionEnd((()=>{cancelAnimationFrame(v)})),f()),p.updateItems(i,a,t,s)},p.updateItems=function(e,t,i,a){void 0===t&&(t=c(p.$itemsEl[0],"y")),void 0===e&&(e=-Math.round((t-h)/d)),e<0&&(e=0),e>=p.items.length&&(e=p.items.length-1);const l=p.activeIndex;p.activeIndex=e,p.$itemsEl.find(".picker-item-selected").removeClass("picker-item-selected"),p.items.transition(i);const o=p.items.eq(e).addClass("picker-item-selected").transform("");n.params.rotateEffect&&p.items.each((e=>{const i=s(e),a=(i.index()*d-(h-t))/d,l=Math.ceil(p.height/d/2)+1;let o=-18*a;o>180&&(o=180),o<-180&&(o=-180),Math.abs(a)>l?i.addClass("picker-item-far"):i.removeClass("picker-item-far"),i.transform(`translate3d(0, ${-t+h}px, ${n.needsOriginFix?-110:0}px) rotateX(${o}deg)`)})),(a||void 0===a)&&(p.value=o.attr("data-picker-value"),p.displayValue=p.displayValues?p.displayValues[e]:p.value,l!==e&&(p.onChange&&p.onChange(n,p.value,p.displayValue),n.updateValue()))};let $,E,g,k,x,y,C,V,w,b,M,T,I=!0;function O(e){E||$||(e.preventDefault(),$=!0,g="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY,k=g,x=(new Date).getTime(),I=!0,C=c(p.$itemsEl[0],"y"),w=C)}function j(e){if(!$)return;e.preventDefault(),I=!1,k="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,E||(cancelAnimationFrame(v),E=!0,C=c(p.$itemsEl[0],"y"),w=C,p.$itemsEl.transition(0));w=C+(k-g),V=void 0,w<m&&(w=m-(m-w)**.8,V="min"),w>h&&(w=h+(w-h)**.8,V="max"),p.$itemsEl.transform(`translate3d(0,${w}px,0)`),p.updateItems(void 0,w,0,n.params.updateValuesOnTouchmove),M=w-b||w,b=w}function P(){if(!$||!E)return $=!1,void(E=!1);let e;$=!1,E=!1,p.$itemsEl.transition(""),V&&("min"===V?p.$itemsEl.transform(`translate3d(0,${m}px,0)`):p.$itemsEl.transform(`translate3d(0,${h}px,0)`)),y=(new Date).getTime(),e=y-x>300?w:w+M*n.params.momentumRatio,e=Math.max(Math.min(e,h),m);const t=Math.round(Math.abs((e-h)/d));n.params.freeMode||(e=-t*d+h),p.$itemsEl.transform(`translate3d(0,${parseInt(e,10)}px,0)`),p.updateItems(t,e,"",!0),n.params.updateValuesOnMomentum&&(f(),p.$itemsEl.transitionEnd((()=>{cancelAnimationFrame(v)}))),setTimeout((()=>{I=!0}),100)}function z(e){const{deltaX:t,deltaY:s}=e;Math.abs(t)>Math.abs(s)||(clearTimeout(T),e.preventDefault(),cancelAnimationFrame(v),C=c(p.$itemsEl[0],"y"),p.$itemsEl.transition(0),w=C-s,V=void 0,w<m&&(w=m,V="min"),w>h&&(w=h,V="max"),p.$itemsEl.transform(`translate3d(0,${w}px,0)`),p.updateItems(void 0,w,0,n.params.updateValuesOnMousewheel),T=setTimeout((()=>{p.$itemsEl.transition(""),V&&("min"===V?p.$itemsEl.transform(`translate3d(0,${m}px,0)`):p.$itemsEl.transform(`translate3d(0,${h}px,0)`)),y=(new Date).getTime();let e=w;e=Math.max(Math.min(e,h),m);const t=Math.round(Math.abs((e-h)/d));n.params.freeMode||(e=-t*d+h),p.$itemsEl.transform(`translate3d(0,${parseInt(e,10)}px,0)`),p.updateItems(t,e,"",!0)}),200))}function R(){if(!I)return;cancelAnimationFrame(v);const e=s(this).attr("data-picker-value");p.setValue(e)}const A=!!a().passiveListener&&{passive:!1,capture:!1};p.attachEvents=function(){p.$el.on(i.touchEvents.start,O,A),i.on("touchmove:active",j),i.on("touchend:passive",P),n.params.mousewheel&&p.$el.on("wheel",z),p.items.on("click",R)},p.detachEvents=function(){p.$el.off(i.touchEvents.start,O,A),i.off("touchmove:active",j),i.off("touchend:passive",P),n.params.mousewheel&&p.$el.off("wheel",z),p.items.off("click",R)},p.init=function(){p.calcSize(),p.$itemsEl.transform(`translate3d(0,${h}px,0)`).transition(0),0===o&&p.$el.addClass("picker-column-first"),o===n.cols.length-1&&p.$el.addClass("picker-column-last"),t&&p.updateItems(0,h,0),p.attachEvents()},p.destroy=function(){p.detachEvents()},p.init()}class h extends l{constructor(e,t={}){super(t,[e]);const n=this,a=i(),l=getWindow();let o,r;if(n.params=p({},e.params.picker,t),n.params.containerEl&&(o=s(n.params.containerEl),0===o.length))return n;n.params.inputEl&&(r=s(n.params.inputEl));let c=n.params.scrollToInput?r:void 0;if(n.params.scrollToEl){const e=s(n.params.scrollToEl);e.length>0&&(c=e)}function d(){n.resizeCols()}function u(){n.open()}function m(e){e.preventDefault()}p(n,{app:e,$containerEl:o,containerEl:o&&o[0],inline:o&&o.length>0,needsOriginFix:a.ios||l.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&l.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!a.android,cols:[],$inputEl:r,inputEl:r&&r[0],$scrollToEl:c,initialized:!1,opened:!1,url:n.params.url});let h=null;function v(e){h=e.target}function f(e){if(n.destroyed||!n.params)return;const t=s(e.target);n.isPopover()||n.opened&&!n.closing&&(t.closest('[class*="backdrop"]').length||(r&&r.length>0?h===e.target&&t[0]!==r[0]&&0===t.closest(".sheet-modal").length&&n.close():0===s(e.target).closest(".sheet-modal").length&&n.close()))}return p(n,{attachResizeEvent(){e.on("resize",d)},detachResizeEvent(){e.off("resize",d)},attachInputEvents(){n.$inputEl.on("click",u),n.params.inputReadOnly&&(n.$inputEl.on("focus mousedown",m),n.$inputEl[0]&&(n.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){n.$inputEl.off("click",u),n.params.inputReadOnly&&(n.$inputEl.off("focus mousedown",m),n.$inputEl[0]&&delete n.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",f),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",f),e.off("touchstart",v)}}),n.init(),n}get view(){const{app:e,params:t,$inputEl:s}=this;let n;return t.view?n=t.view:s&&(n=s.parents(".view").length&&s.parents(".view")[0].f7View),n||(n=e.views.main),n}initInput(){const e=this;e.$inputEl&&e.params.inputReadOnly&&e.$inputEl.prop("readOnly",!0)}resizeCols(){const e=this;if(e.opened)for(let t=0;t<e.cols.length;t+=1)e.cols[t].divider||(e.cols[t].calcSize(),e.cols[t].setValue(e.cols[t].value,0,!1))}isPopover(){const e=this,{app:t,modal:s,params:n}=e,a=i();if("sheet"===n.openIn)return!1;if(s&&"popover"!==s.type)return!1;if(!e.inline&&e.inputEl){if("popover"===n.openIn)return!0;if(a.ios)return!!a.ipad;if(t.width>=768)return!0;if(a.desktop&&"aurora"===t.theme)return!0}return!1}formatValue(){const e=this,{value:t,displayValue:s}=e;return e.params.formatValue?e.params.formatValue.call(e,t,s):t.join(" ")}setValue(e,t){const s=this;let n=0;if(0===s.cols.length)return s.value=e,void s.updateValue(e);for(let i=0;i<s.cols.length;i+=1)s.cols[i]&&!s.cols[i].divider&&(s.cols[i].setValue(e[n],t),n+=1)}getValue(){return this.value}updateValue(e){const t=this,s=e||[],n=[];let i;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)i=e[t],void 0!==i.displayValues&&void 0!==i.values&&-1!==i.values.indexOf(s[t])?n.push(i.displayValues[i.values.indexOf(s[t])]):n.push(s[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(s.push(t.cols[e].value),n.push(t.cols[e].displayValue));s.indexOf(void 0)>=0||(t.value=s,t.displayValue=n,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){m.call(this,e,t)}destroyColumn(e){const t=this,n=s(e).index();t.cols[n]&&t.cols[n].destroy&&t.cols[n].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):$jsx("div",{class:"toolbar toolbar-top no-shadow"},$jsx("div",{class:"toolbar-inner"},$jsx("div",{class:"left"}),$jsx("div",{class:"right"},$jsx("a",{class:"link sheet-close popover-close"},e.params.toolbarCloseText))))}renderColumn(e,t){const s=`picker-column ${e.textAlign?`picker-column-${e.textAlign}`:""} ${e.cssClass||""}`;let n,i;return e.divider?n=`\n          <div class="${s} picker-column-divider">${e.content}</div>\n        `:(i=e.values.map(((t,s)=>`\n          <div class="picker-item" data-picker-value="${t}">\n            <span>${e.displayValues?e.displayValues[s]:t}</span>\n          </div>\n        `)).join(""),n=`\n          <div class="${s}">\n            <div class="picker-items">${i}</div>\n          </div>\n        `),t?i.trim():n.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:`picker picker-inline ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:s,toolbar:n}=e.params;return $jsx("div",{class:"popover picker-popover"},$jsx("div",{class:"popover-inner"},$jsx("div",{class:`picker ${t?"picker-3d":""} ${s||""}`},n&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))))}render(){const e=this;return e.params.render?e.params.render.call(e):e.inline?e.renderInline():e.isPopover()?e.renderPopover():e.renderSheet()}onOpen(){const e=this,{initialized:t,$el:s,app:n,$inputEl:i,inline:a,value:l,params:o}=e;e.opened=!0,e.closing=!1,e.opening=!0,e.attachResizeEvent(),s.find(".picker-column").each((s=>{let n=!0;(!t&&o.value||t&&l)&&(n=!1),e.initColumn(s,n)})),t?l&&e.setValue(l,0):l?e.setValue(l,0):o.value&&e.setValue(o.value,0),!a&&i&&i.length&&"md"===n.theme&&i.trigger("focus"),e.initialized=!0,s&&s.trigger("picker:open"),i&&i.trigger("picker:open"),e.emit("local::open pickerOpen",e)}onOpened(){const e=this;e.opening=!1,e.$el&&e.$el.trigger("picker:opened"),e.$inputEl&&e.$inputEl.trigger("picker:opened"),e.emit("local::opened pickerOpened",e)}onClose(){const e=this,t=e.app;if(e.opening=!1,e.closing=!0,e.detachResizeEvent(),e.cols.forEach((e=>{e.destroy&&e.destroy()})),e.$inputEl)if("md"===t.theme)e.$inputEl.trigger("blur");else{const s=e.$inputEl.attr("validate"),n=e.$inputEl.attr("required");s&&n&&t.input.validate(e.$inputEl)}e.$el&&e.$el.trigger("picker:close"),e.$inputEl&&e.$inputEl.trigger("picker:close"),e.emit("local::close pickerClose",e)}onClosed(){const e=this;e.opened=!1,e.closing=!1,e.inline||d((()=>{e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal})),e.$el&&e.$el.trigger("picker:closed"),e.$inputEl&&e.$inputEl.trigger("picker:closed"),e.emit("local::closed pickerClosed",e)}open(){const e=this,{app:t,opened:n,inline:i,$inputEl:a,$scrollToEl:l,params:o}=e;if(n)return;if(0===e.cols.length&&o.cols.length&&o.cols.forEach((t=>{e.cols.push(t)})),i)return e.$el=s(e.render()),e.$el[0].f7Picker=e,e.$containerEl.append(e.$el),e.onOpen(),void e.onOpened();const r=e.isPopover(),c=r?"popover":"sheet",p={targetEl:a,scrollToEl:l,content:e.render(),backdrop:void 0!==o.backdrop?o.backdrop:r,on:{open(){const t=this;e.modal=t,e.$el=r?t.$el.find(".picker"):t.$el,e.$el[0].f7Picker=e,e.onOpen()},opened(){e.onOpened()},close(){e.onClose()},closed(){e.onClosed()}}};"sheet"===c&&(p.push=o.sheetPush,p.swipeToClose=o.sheetSwipeToClose),o.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,[c]:p}}):(e.modal=t[c].create(p),e.modal.open())}close(){const e=this,{opened:t,inline:s}=e;if(t)return s?(e.onClose(),void e.onClosed()):void(e.params.routableModals&&e.view?e.view.router.back():e.modal.close())}init(){const e=this;if(e.initInput(),e.inline)return e.open(),void e.emit("local::init pickerInit",e);!e.initialized&&e.params.value&&e.setValue(e.params.value),e.$inputEl&&e.attachInputEvents(),e.params.closeByOutsideClick&&e.attachHtmlEvents(),e.emit("local::init pickerInit",e)}destroy(){const e=this;if(e.destroyed)return;const{$el:t}=e;e.emit("local::beforeDestroy pickerBeforeDestroy",e),t&&t.trigger("picker:beforedestroy"),e.close(),e.$inputEl&&e.detachInputEvents(),e.params.closeByOutsideClick&&e.detachHtmlEvents(),t&&t.length&&delete e.$el[0].f7Picker,u(e),e.destroyed=!0}}var v={name:"picker",static:{Picker:h},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:h,app:e,domProp:"f7Picker"}),e.picker.close=function(e=".picker"){const t=s(e);if(0===t.length)return;const n=t[0].f7Picker;!n||n&&!n.opened||n.close()}},params:{picker:{updateValuesOnMomentum:!1,updateValuesOnTouchmove:!0,updateValuesOnMousewheel:!0,mousewheel:!0,rotateEffect:!1,momentumRatio:7,freeMode:!1,cols:[],containerEl:null,openIn:"auto",sheetPush:!1,sheetSwipeToClose:void 0,backdrop:void 0,formatValue:null,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,scrollToEl:void 0,toolbar:!0,toolbarCloseText:"Done",cssClass:null,routableModals:!1,view:null,url:"select/",renderToolbar:null,render:null}}};if(t){if(e.prototype.modules&&e.prototype.modules[v.name])return;e.use(v),e.instance&&(e.instance.useModuleParams(v,e.instance.params),e.instance.useModule(v))}return v}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var l=e.$,s=e.utils,i=e.getDevice,n=(e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,s.extend),a=s.nextTick,c=s.deleteProps;function p(e,t){const s=this,i=l(e),n=i.index(),o=s.cols[n];if(o.divider)return;let r,a;function c(){o.updateItems()}function p(){const e=l(this).attr("data-picker-value");o.setValue(e)}o.$el=i,o.el=i[0],o.$itemsEl=o.$el.find(".picker-items"),o.items=o.$itemsEl.find(".picker-item"),o.replaceValues=function(e,t){o.detachEvents(),o.values=e,o.displayValues=t,o.$itemsEl.html(s.renderColumn(o,!0)),o.items=o.$itemsEl.find(".picker-item"),o.calcSize(),o.setValue(o.values[0],!0),o.attachEvents()},o.calcSize=function(){a=o.$el[0].offsetHeight,r=o.items[0].offsetHeight;const e=o.el.style.getPropertyValue("--f7-picker-scroll-padding");o.el.style.setProperty("--f7-picker-scroll-padding",(a-r)/2+"px"),e||(o.$itemsEl[0].scrollTop=0)},o.setValue=function(e,t){const l=o.$itemsEl.find(`.picker-item[data-picker-value="${e}"]`).index();if(void 0===l||-1===l)return;const s=l*r;o.$itemsEl[0].scrollTop=s,o.updateItems(l,s,t)},o.updateItems=function(e,t,i){void 0===t&&(t=o.$itemsEl[0].scrollTop),void 0===e&&(e=Math.round(t/r)),e<0&&(e=0),e>=o.items.length&&(e=o.items.length-1);const n=o.activeIndex;o.activeIndex=e,o.$itemsEl.find(".picker-item-selected").removeClass("picker-item-selected");const c=o.items.eq(e);c.addClass("picker-item-selected").children().transform(""),s.params.rotateEffect&&o.items.each((e=>{const s=l(e),i=(e.offsetTop-(a-r)/2-t)/r,n=Math.ceil(o.height/r/2)+1;let c=-24*i;c>180&&(c=180),c<-180&&(c=-180),Math.abs(i)>n?s.addClass("picker-item-far"):s.removeClass("picker-item-far"),s.children("span").transform(`translate3d(0, ${-i*r}px, -100px) rotateX(${c}deg)`)})),(i||void 0===i)&&(o.value=c.attr("data-picker-value"),o.displayValue=o.displayValues?o.displayValues[e]:o.value,n!==e&&(o.onChange&&o.onChange(s,o.value,o.displayValue),s.updateValue()))},o.attachEvents=function(){o.$itemsEl.on("scroll",c),o.items.on("click",p)},o.detachEvents=function(){o.items.off("click",p)},o.init=function(){o.calcSize(),0===n&&o.$el.addClass("picker-column-first"),n===s.cols.length-1&&o.$el.addClass("picker-column-last"),s.params.freeMode&&o.$el.addClass("picker-column-free-mode"),t&&o.updateItems(0),o.attachEvents()},o.destroy=function(){o.detachEvents()},o.init()}class d extends n{constructor(e,t={}){super(t,[e]);const s=this,n=i(),o=getWindow();let a,c;if(s.params=r({},e.params.picker,t),s.params.containerEl&&(a=l(s.params.containerEl),0===a.length))return s;s.params.inputEl&&(c=l(s.params.inputEl));let p=s.params.scrollToInput?c:void 0;if(s.params.scrollToEl){const e=l(s.params.scrollToEl);e.length>0&&(p=e)}function d(){s.resizeCols()}function u(){s.open()}function m(e){e.preventDefault()}r(s,{app:e,$containerEl:a,containerEl:a&&a[0],inline:a&&a.length>0,needsOriginFix:n.ios||o.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&o.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!n.android,cols:[],$inputEl:c,inputEl:c&&c[0],$scrollToEl:p,initialized:!1,opened:!1,url:s.params.url});let h=null;function v(e){h=e.target}function f(e){if(s.destroyed||!s.params)return;const t=l(e.target);s.isPopover()||s.opened&&!s.closing&&(t.closest('[class*="backdrop"]').length||(c&&c.length>0?h===e.target&&t[0]!==c[0]&&0===t.closest(".sheet-modal").length&&s.close():0===l(e.target).closest(".sheet-modal").length&&s.close()))}return r(s,{attachResizeEvent(){e.on("resize",d)},detachResizeEvent(){e.off("resize",d)},attachInputEvents(){s.$inputEl.on("click",u),s.params.inputReadOnly&&(s.$inputEl.on("focus mousedown",m),s.$inputEl[0]&&(s.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){s.$inputEl.off("click",u),s.params.inputReadOnly&&(s.$inputEl.off("focus mousedown",m),s.$inputEl[0]&&delete s.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",f),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",f),e.off("touchstart",v)}}),s.init(),s}get view(){const{app:e,params:t,$inputEl:l}=this;let s;return t.view?s=t.view:l&&(s=l.parents(".view").length&&l.parents(".view")[0].f7View),s||(s=e.views.main),s}initInput(){const e=this;e.$inputEl&&e.params.inputReadOnly&&e.$inputEl.prop("readOnly",!0)}resizeCols(){const e=this;if(e.opened)for(let t=0;t<e.cols.length;t+=1)e.cols[t].divider||(e.cols[t].calcSize(),e.cols[t].setValue(e.cols[t].value,!1))}isPopover(){const e=this,{app:t,modal:l,params:s}=e,n=i();if("sheet"===s.openIn)return!1;if(l&&"popover"!==l.type)return!1;if(!e.inline&&e.inputEl){if("popover"===s.openIn)return!0;if(n.ios)return!!n.ipad;if(t.width>=768)return!0;if(n.desktop&&"aurora"===t.theme)return!0}return!1}formatValue(){const e=this,{value:t,displayValue:l}=e;return e.params.formatValue?e.params.formatValue.call(e,t,l):t.join(" ")}setValue(e){const t=this;let l=0;if(0===t.cols.length)return t.value=e,void t.updateValue(e);for(let s=0;s<t.cols.length;s+=1)t.cols[s]&&!t.cols[s].divider&&(t.cols[s].setValue(e[l]),l+=1)}getValue(){return this.value}updateValue(e){const t=this,l=e||[],s=[];let i;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)i=e[t],void 0!==i.displayValues&&void 0!==i.values&&-1!==i.values.indexOf(l[t])?s.push(i.displayValues[i.values.indexOf(l[t])]):s.push(l[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(l.push(t.cols[e].value),s.push(t.cols[e].displayValue));l.indexOf(void 0)>=0||(t.value=l,t.displayValue=s,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){p.call(this,e,t)}destroyColumn(e){const t=this,s=l(e).index();t.cols[s]&&t.cols[s].destroy&&t.cols[s].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):$jsx("div",{class:"toolbar toolbar-top no-shadow"},$jsx("div",{class:"toolbar-inner"},$jsx("div",{class:"left"}),$jsx("div",{class:"right"},$jsx("a",{class:"link sheet-close popover-close"},e.params.toolbarCloseText))))}renderColumn(e,t){const l=`picker-column ${e.textAlign?`picker-column-${e.textAlign}`:""} ${e.cssClass||""}`;let s,i;return e.divider?s=`\n          <div class="${l} picker-column-divider">${e.content}</div>\n        `:(i=e.values.map(((t,l)=>`\n          <div class="picker-item" data-picker-value="${t}">\n            <span>${e.displayValues?e.displayValues[l]:t}</span>\n          </div>\n        `)).join(""),s=`\n          <div class="${l}">\n            <div class="picker-items">${i}</div>\n          </div>\n        `),t?i.trim():s.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:`picker picker-inline ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:l,toolbar:s}=e.params;return $jsx("div",{class:"popover picker-popover"},$jsx("div",{class:"popover-inner"},$jsx("div",{class:`picker ${t?"picker-3d":""} ${l||""}`},s&&e.renderToolbar(),$jsx("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),$jsx("div",{class:"picker-center-highlight"})))))}render(){const e=this;return e.params.render?e.params.render.call(e):e.inline?e.renderInline():e.isPopover()?e.renderPopover():e.renderSheet()}onOpen(){const e=this,{initialized:t,$el:l,app:s,$inputEl:i,inline:n,value:o,params:r}=e;e.opened=!0,e.closing=!1,e.opening=!0,e.attachResizeEvent(),l.find(".picker-column").each((l=>{let s=!0;(!t&&r.value||t&&o)&&(s=!1),e.initColumn(l,s)})),t?o&&e.setValue(o):o?e.setValue(o):r.value&&e.setValue(r.value),!n&&i&&i.length&&"md"===s.theme&&i.trigger("focus"),e.initialized=!0,l&&l.trigger("picker:open"),i&&i.trigger("picker:open"),e.emit("local::open pickerOpen",e)}onOpened(){const e=this;e.opening=!1,e.$el&&e.$el.trigger("picker:opened"),e.$inputEl&&e.$inputEl.trigger("picker:opened"),e.emit("local::opened pickerOpened",e)}onClose(){const e=this,t=e.app;if(e.opening=!1,e.closing=!0,e.detachResizeEvent(),e.cols.forEach((e=>{e.destroy&&e.destroy()})),e.$inputEl)if("md"===t.theme)e.$inputEl.trigger("blur");else{const l=e.$inputEl.attr("validate"),s=e.$inputEl.attr("required");l&&s&&t.input.validate(e.$inputEl)}e.$el&&e.$el.trigger("picker:close"),e.$inputEl&&e.$inputEl.trigger("picker:close"),e.emit("local::close pickerClose",e)}onClosed(){const e=this;e.opened=!1,e.closing=!1,e.inline||a((()=>{e.modal&&e.modal.el&&e.modal.destroy&&(e.params.routableModals||e.modal.destroy()),delete e.modal})),e.$el&&e.$el.trigger("picker:closed"),e.$inputEl&&e.$inputEl.trigger("picker:closed"),e.emit("local::closed pickerClosed",e)}open(){const e=this,{app:t,opened:s,inline:i,$inputEl:n,$scrollToEl:o,params:r}=e;if(s)return;if(0===e.cols.length&&r.cols.length&&r.cols.forEach((t=>{e.cols.push(t)})),i)return e.$el=l(e.render()),e.$el[0].f7Picker=e,e.$containerEl.append(e.$el),e.onOpen(),void e.onOpened();const a=e.isPopover(),c=a?"popover":"sheet",p={targetEl:n,scrollToEl:o,content:e.render(),backdrop:void 0!==r.backdrop?r.backdrop:a,on:{open(){const t=this;e.modal=t,e.$el=a?t.$el.find(".picker"):t.$el,e.$el[0].f7Picker=e,e.onOpen()},opened(){e.onOpened()},close(){e.onClose()},closed(){e.onClosed()}}};"sheet"===c&&(p.push=r.sheetPush,p.swipeToClose=r.sheetSwipeToClose),r.routableModals&&e.view?e.view.router.navigate({url:e.url,route:{path:e.url,[c]:p}}):(e.modal=t[c].create(p),e.modal.open())}close(){const e=this,{opened:t,inline:l}=e;if(t)return l?(e.onClose(),void e.onClosed()):void(e.params.routableModals&&e.view?e.view.router.back():e.modal.close())}init(){const e=this;if(e.initInput(),e.inline)return e.open(),void e.emit("local::init pickerInit",e);!e.initialized&&e.params.value&&e.setValue(e.params.value),e.$inputEl&&e.attachInputEvents(),e.params.closeByOutsideClick&&e.attachHtmlEvents(),e.emit("local::init pickerInit",e)}destroy(){const e=this;if(e.destroyed)return;const{$el:t}=e;e.emit("local::beforeDestroy pickerBeforeDestroy",e),t&&t.trigger("picker:beforedestroy"),e.close(),e.$inputEl&&e.detachInputEvents(),e.params.closeByOutsideClick&&e.detachHtmlEvents(),t&&t.length&&delete e.$el[0].f7Picker,c(e),e.destroyed=!0}}var u={name:"picker",static:{Picker:d},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:d,app:e,domProp:"f7Picker"}),e.picker.close=function(e=".picker"){const t=l(e);if(0===t.length)return;const s=t[0].f7Picker;!s||s&&!s.opened||s.close()}},params:{picker:{rotateEffect:!1,freeMode:!1,cols:[],containerEl:null,openIn:"auto",sheetPush:!1,sheetSwipeToClose:void 0,backdrop:void 0,formatValue:null,inputEl:null,inputReadOnly:!0,closeByOutsideClick:!0,scrollToInput:!0,scrollToEl:void 0,toolbar:!0,toolbarCloseText:"Done",cssClass:null,routableModals:!1,view:null,url:"select/",renderToolbar:null,render:null}}};if(t){if(e.prototype.modules&&e.prototype.modules[u.name])return;e.use(u),e.instance&&(e.instance.useModuleParams(u,e.instance.params),e.instance.useModule(u))}return u}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/picker/picker.less

@@ -92,8 +92,16 @@
   }
 }
 .picker-items {
-  transition: 300ms;
-  transition-timing-function: ease-out;
+  overflow: auto;
+  scrollbar-width: none;
+  scroll-snap-type: y mandatory;
+  height: 100%;
+  box-sizing: border-box;
+  padding: var(--f7-picker-scroll-padding, 0px) 0px;
+  &::-webkit-scrollbar {
+    display: none;
+    opacity: 0;
+  }
 }
 .picker-item {
   height: var(--f7-picker-item-height);
@@ -106,15 +114,12 @@
   top: 0;
   width: 100%;
   box-sizing: border-box;
-  transition: 300ms;
   color: var(--f7-picker-item-text-color);
   cursor: pointer;
+  scroll-snap-align: center;
   span {
     padding: 0 10px;
   }
-  .picker-column-absolute & {
-    position: absolute;
-  }
   &.picker-item-far {
     pointer-events: none;
   }
@@ -122,6 +127,9 @@
     color: var(--f7-picker-item-selected-text-color);
     transform: translate3d(0, 0, 0) rotateX(0deg);
   }
+  .picker-column-free-mode & {
+    scroll-snap-align: none;
+  }
 }
 .picker-center-highlight {
   height: var(--f7-picker-item-height);
@@ -142,7 +150,6 @@
 .picker-3d {
   .picker-columns {
     overflow: hidden;
-    perspective: 1200px;
   }
   .picker-column,
   .picker-items,
@@ -153,9 +160,20 @@
     overflow: visible;
   }
   .picker-item {
-    transform-origin: center center -110px;
-    backface-visibility: hidden;
-    transition-timing-function: ease-out;
+    perspective: 1200px;
+    overflow: visible;
+
+    > span {
+      backface-visibility: hidden;
+      display: block;
+      transform-style: preserve-3d;
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+      max-width: 100%;
+      transform-origin: center center -100px;
+    }
   }
 }