framework7 7.0.8 → 8.0.0-beta.1

package/components/picker/picker-column.js

@@ -1,7 +1,7 @@
 import $ from '../../shared/dom7.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];
@@ -12,7 +12,6 @@ export default function pickerColumn(colEl, updateItems) {
   col.items = col.$itemsEl.find('.picker-item');
   let itemHeight;
   let colHeight;
-
   col.replaceValues = function replaceColValues(values, displayValues) {
     col.detachEvents();
     col.values = values;
@@ -23,53 +22,45 @@ export default function pickerColumn(colEl, updateItems) {
     col.setValue(col.values[0], true);
     col.attachEvents();
   };
-
   col.calcSize = function calcColSize() {
     colHeight = col.$el[0].offsetHeight;
     itemHeight = col.items[0].offsetHeight;
     const hadPadding = col.el.style.getPropertyValue('--f7-picker-scroll-padding');
     col.el.style.setProperty('--f7-picker-scroll-padding', `${(colHeight - itemHeight) / 2}px`);
-
     if (!hadPadding) {
       col.$itemsEl[0].scrollTop = 0;
     }
   };
-
   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 newScrollTop = newActiveIndex * itemHeight;
-    col.$itemsEl[0].scrollTop = newScrollTop; // Update items
+    col.$itemsEl[0].scrollTop = newScrollTop;
 
+    // Update items
     col.updateItems(newActiveIndex, newScrollTop, valueCallbacks);
   };
-
   col.updateItems = function updateColItems(activeIndex, scrollTop, valueCallbacks) {
     if (typeof scrollTop === 'undefined') {
       // eslint-disable-next-line
       scrollTop = col.$itemsEl[0].scrollTop;
     }
-    /* eslint-disable no-param-reassign */
-
 
+    /* eslint-disable no-param-reassign */
     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');
     const selectedItem = col.items.eq(activeIndex);
-    selectedItem.addClass('picker-item-selected').children().transform(''); // Set 3D rotate effect
-
+    selectedItem.addClass('picker-item-selected').children().transform('');
+    // Set 3D rotate effect
     if (picker.params.rotateEffect) {
       col.items.each(itemEl => {
         const $itemEl = $(itemEl);
@@ -79,63 +70,52 @@ export default function pickerColumn(colEl, updateItems) {
         let angle = -24 * percentage;
         if (angle > 180) angle = 180;
         if (angle < -180) angle = -180;
-
         if (Math.abs(percentage) > itemsFit) {
           $itemEl.addClass('picker-item-far');
         } else {
           $itemEl.removeClass('picker-item-far');
         }
-
         $itemEl.children('span').transform(`translate3d(0, ${-percentage * itemHeight}px, -100px) rotateX(${angle}deg)`);
       });
     }
-
     if (valueCallbacks || typeof valueCallbacks === 'undefined') {
       // Update values
       col.value = selectedItem.attr('data-picker-value');
-      col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value; // On change callback
-
+      col.displayValue = col.displayValues ? col.displayValues[activeIndex] : col.value;
+      // On change callback
       if (previousActiveIndex !== activeIndex) {
         if (col.onChange) {
           col.onChange(picker, col.value, col.displayValue);
         }
-
         picker.updateValue();
       }
     }
   };
-
   function handleScroll() {
     col.updateItems();
   }
-
   function handleClick() {
     const value = $(this).attr('data-picker-value');
     col.setValue(value);
   }
-
   col.attachEvents = function attachColEvents() {
     col.$itemsEl.on('scroll', handleScroll);
     col.items.on('click', handleClick);
   };
-
   col.detachEvents = function detachColEvents() {
     col.items.off('click', handleClick);
   };
-
   col.init = function initCol() {
     col.calcSize();
     if (colIndex === 0) col.$el.addClass('picker-column-first');
     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 (picker.params.freeMode) col.$el.addClass('picker-column-free-mode');
+    // Update items on init
     if (updateItems) col.updateItems(0);
     col.attachEvents();
   };
-
   col.destroy = function destroyCol() {
     col.detachEvents();
   };
-
   col.init();
 }

package/components/picker/picker-ios.less

@@ -1,2 +1,12 @@
 .ios {
+  .picker-center-highlight {
+    left: 16px;
+    right: 16px;
+    background-color: var(--f7-picker-item-selected-bg-color);
+    border-radius: 8px;
+    .popover & {
+      left: 8px;
+      right: 8px;
+    }
+  }
 }

package/components/picker/picker-md.less

@@ -1,2 +1,8 @@
 .md {
+  .picker-center-highlight {
+    left: 0;
+    right: 0;
+    border-top: 1px solid var(--f7-md-outline);
+    border-bottom: 1px solid var(--f7-md-outline);
+  }
 }

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{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}
+: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}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.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;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.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}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}

package/components/picker/picker-vars.less

@@ -8,44 +8,28 @@
   /*
   --f7-picker-sheet-bg-color: var(--f7-sheet-bg-color);
   */
-  .light-vars({
-    --f7-picker-item-selected-bg-color: rgba(0,0,0,0.12);
-    --f7-picker-item-selected-text-color: #000;
-  });
-  .dark-vars({
-    --f7-picker-item-selected-bg-color: rgba(255,255,255,0.1);
-    --f7-picker-item-selected-text-color: #fff;
-  });
 }
 .ios-vars({
   --f7-picker-column-font-size: 20px;
   .light-vars({
+    --f7-picker-item-selected-text-color: #000;
+    --f7-picker-item-selected-bg-color: rgba(0,0,0,0.12);
     --f7-picker-divider-text-color: #000;
     --f7-picker-item-text-color: rgba(0,0,0,0.45);
   });
   .dark-vars({
+    --f7-picker-item-selected-text-color: #fff;
+    --f7-picker-item-selected-bg-color: rgba(255,255,255,0.1);
     --f7-picker-divider-text-color: #fff;
     --f7-picker-item-text-color: rgba(255,255,255,0.55);
   });
 });
 .md-vars({
   --f7-picker-column-font-size: 20px;
-  .light-vars({
-    --f7-picker-divider-text-color: rgba(0,0,0,0.87);
-    --f7-picker-item-text-color: rgba(0,0,0,0.54);
-  });
-  .dark-vars({
-    --f7-picker-item-text-color: rgba(255,255,255,0.54);
-    --f7-picker-divider-text-color: rgba(255,255,255,0.87);
-  });
 });
-.aurora-vars({
-  --f7-picker-column-font-size: 20px;
-  --f7-picker-item-text-color: #888;
-  .light-vars({
-    --f7-picker-divider-text-color: #000;
-  });
-  .dark-vars({
-    --f7-picker-divider-text-color: #fff;
-  });
+.md-color-vars({
+  --f7-picker-item-selected-text-color: var(--f7-md-on-surface);
+  --f7-picker-item-text-color: var(--f7-md-on-surface-variant);
+  --f7-picker-divider-text-color: var(--f7-md-on-surface);
+  --f7-picker-item-selected-border-color: var(--f7-md-outline);
 });

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{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}
+: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}.ios{--f7-picker-column-font-size:20px;--f7-picker-item-selected-text-color:#000;--f7-picker-item-selected-bg-color:rgba(0, 0, 0, 0.12);--f7-picker-divider-text-color:#000;--f7-picker-item-text-color:rgba(0, 0, 0, 0.45)}.ios .dark,.ios.dark{--f7-picker-item-selected-text-color:#fff;--f7-picker-item-selected-bg-color:rgba(255, 255, 255, 0.1);--f7-picker-divider-text-color:#fff;--f7-picker-item-text-color:rgba(255, 255, 255, 0.55)}.md{--f7-picker-column-font-size:20px}.md,.md .dark,.md [class*=color-]{--f7-picker-item-selected-text-color:var(--f7-md-on-surface);--f7-picker-item-text-color:var(--f7-md-on-surface-variant);--f7-picker-divider-text-color:var(--f7-md-on-surface);--f7-picker-item-selected-border-color:var(--f7-md-outline)}.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;top:50%;margin-top:calc(-1 * var(--f7-picker-item-height)/ 2);pointer-events:none}.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}.ios .picker-center-highlight{left:16px;right:16px;background-color:var(--f7-picker-item-selected-bg-color);border-radius:8px}.popover .ios .picker-center-highlight{left:8px;right:8px}.md .picker-center-highlight{left:0;right:0;border-top:1px solid var(--f7-md-outline);border-bottom:1px solid var(--f7-md-outline)}

package/components/picker/picker.js

@@ -6,7 +6,6 @@ export default {
   static: {
     Picker
   },
-
   create() {
     const app = this;
     app.picker = ConstructorMethods({
@@ -15,12 +14,10 @@ export default {
       app,
       domProp: 'f7Picker'
     });
-
     app.picker.close = function close(el) {
       if (el === void 0) {
         el = '.picker';
       }
-
       const $el = $(el);
       if ($el.length === 0) return;
       const picker = $el[0].f7Picker;
@@ -28,7 +25,6 @@ export default {
       picker.close();
     };
   },
-
   params: {
     picker: {
       // Picker settings

package/components/picker/picker.lazy.js

@@ -1 +1 @@
-(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var l=e.$,i=e.utils,s=e.getDevice,n=(e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,e.$jsx),a=i.extend,c=i.nextTick,p=i.deleteProps;function d(e,t){const i=this,s=l(e),n=s.index(),o=i.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=s,o.el=s[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(i.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 i=l*r;o.$itemsEl[0].scrollTop=i,o.updateItems(l,i,t)},o.updateItems=function(e,t,s){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(""),i.params.rotateEffect&&o.items.each((e=>{const i=l(e),s=(e.offsetTop-(a-r)/2-t)/r,n=Math.ceil(o.height/r/2)+1;let c=-24*s;c>180&&(c=180),c<-180&&(c=-180),Math.abs(s)>n?i.addClass("picker-item-far"):i.removeClass("picker-item-far"),i.children("span").transform(`translate3d(0, ${-s*r}px, -100px) rotateX(${c}deg)`)})),(s||void 0===s)&&(o.value=c.attr("data-picker-value"),o.displayValue=o.displayValues?o.displayValues[e]:o.value,n!==e&&(o.onChange&&o.onChange(i,o.value,o.displayValue),i.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===i.cols.length-1&&o.$el.addClass("picker-column-last"),i.params.freeMode&&o.$el.addClass("picker-column-free-mode"),t&&o.updateItems(0),o.attachEvents()},o.destroy=function(){o.detachEvents()},o.init()}class u extends n{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const i=this,n=s();let o,r;if(i.params=a({},e.params.picker,t),i.params.containerEl&&(o=l(i.params.containerEl),0===o.length))return i;i.params.inputEl&&(r=l(i.params.inputEl));let c=i.params.scrollToInput?r:void 0;if(i.params.scrollToEl){const e=l(i.params.scrollToEl);e.length>0&&(c=e)}function p(){i.resizeCols()}function d(){i.open()}function u(e){e.preventDefault()}a(i,{app:e,$containerEl:o,containerEl:o&&o[0],inline:o&&o.length>0,needsOriginFix:n.ios||window.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&window.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!n.android,cols:[],$inputEl:r,inputEl:r&&r[0],$scrollToEl:c,initialized:!1,opened:!1,url:i.params.url});let m=null;function v(e){m=e.target}function h(e){if(i.destroyed||!i.params)return;const t=l(e.target);i.isPopover()||i.opened&&!i.closing&&(t.closest('[class*="backdrop"]').length||(r&&r.length>0?m===e.target&&t[0]!==r[0]&&0===t.closest(".sheet-modal").length&&i.close():0===l(e.target).closest(".sheet-modal").length&&i.close()))}return a(i,{attachResizeEvent(){e.on("resize",p)},detachResizeEvent(){e.off("resize",p)},attachInputEvents(){i.$inputEl.on("click",d),i.params.inputReadOnly&&(i.$inputEl.on("focus mousedown",u),i.$inputEl[0]&&(i.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){i.$inputEl.off("click",d),i.params.inputReadOnly&&(i.$inputEl.off("focus mousedown",u),i.$inputEl[0]&&delete i.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",h),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",h),e.off("touchstart",v)}}),i.init(),i}get view(){const{app:e,params:t,$inputEl:l}=this;let i;return t.view?i=t.view:l&&(i=l.parents(".view").length&&l.parents(".view")[0].f7View),i||(i=e.views.main),i}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:i}=e,n=s();if("sheet"===i.openIn)return!1;if(l&&"popover"!==l.type)return!1;if(!e.inline&&e.inputEl){if("popover"===i.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 i=0;i<t.cols.length;i+=1)t.cols[i]&&!t.cols[i].divider&&(t.cols[i].setValue(e[l]),l+=1)}getValue(){return this.value}updateValue(e){const t=this,l=e||[],i=[];let s;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)s=e[t],void 0!==s.displayValues&&void 0!==s.values&&-1!==s.values.indexOf(l[t])?i.push(s.displayValues[s.values.indexOf(l[t])]):i.push(l[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(l.push(t.cols[e].value),i.push(t.cols[e].displayValue));l.indexOf(void 0)>=0||(t.value=l,t.displayValue=i,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){d.call(this,e,t)}destroyColumn(e){const t=this,i=l(e).index();t.cols[i]&&t.cols[i].destroy&&t.cols[i].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):r("div",{class:"toolbar toolbar-top no-shadow"},r("div",{class:"toolbar-inner"},r("div",{class:"left"}),r("div",{class:"right"},r("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 i,s;return e.divider?i=`\n          <div class="${l} picker-column-divider">${e.content}</div>\n        `:(s=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(""),i=`\n          <div class="${l}">\n            <div class="picker-items">${s}</div>\n          </div>\n        `),t?s.trim():i.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`picker picker-inline ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:"popover picker-popover"},r("div",{class:"popover-inner"},r("div",{class:`picker ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("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:i,$inputEl:s,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 i=!0;(!t&&r.value||t&&o)&&(i=!1),e.initColumn(l,i)})),t?o&&e.setValue(o):o?e.setValue(o):r.value&&e.setValue(r.value),!n&&s&&s.length&&"md"===i.theme&&s.trigger("focus"),e.initialized=!0,l&&l.trigger("picker:open"),s&&s.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"),i=e.$inputEl.attr("required");l&&i&&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||c((()=>{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:i,inline:s,$inputEl:n,$scrollToEl:o,params:r}=e;if(i)return;if(0===e.cols.length&&r.cols.length&&r.cols.forEach((t=>{e.cols.push(t)})),s)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,p(e),e.destroyed=!0}}var m={name:"picker",static:{Picker:u},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:u,app:e,domProp:"f7Picker"}),e.picker.close=function(e){void 0===e&&(e=".picker");const t=l(e);if(0===t.length)return;const i=t[0].f7Picker;!i||i&&!i.opened||i.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[m.name])return;e.use(m),e.instance&&(e.instance.useModuleParams(m,e.instance.params),e.instance.useModule(m))}return m}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))
+(function framework7ComponentLoader(e,t){void 0===t&&(t=!0);var l=e.$,i=e.utils,s=e.getDevice,n=(e.getSupport,e.Class),o=(e.Modal,e.ConstructorMethods),r=(e.ModalMethods,e.$jsx),a=i.extend,c=i.nextTick,p=i.deleteProps;function d(e,t){const i=this,s=l(e),n=s.index(),o=i.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=s,o.el=s[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(i.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 i=l*r;o.$itemsEl[0].scrollTop=i,o.updateItems(l,i,t)},o.updateItems=function(e,t,s){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(""),i.params.rotateEffect&&o.items.each((e=>{const i=l(e),s=(e.offsetTop-(a-r)/2-t)/r,n=Math.ceil(o.height/r/2)+1;let c=-24*s;c>180&&(c=180),c<-180&&(c=-180),Math.abs(s)>n?i.addClass("picker-item-far"):i.removeClass("picker-item-far"),i.children("span").transform(`translate3d(0, ${-s*r}px, -100px) rotateX(${c}deg)`)})),(s||void 0===s)&&(o.value=c.attr("data-picker-value"),o.displayValue=o.displayValues?o.displayValues[e]:o.value,n!==e&&(o.onChange&&o.onChange(i,o.value,o.displayValue),i.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===i.cols.length-1&&o.$el.addClass("picker-column-last"),i.params.freeMode&&o.$el.addClass("picker-column-free-mode"),t&&o.updateItems(0),o.attachEvents()},o.destroy=function(){o.detachEvents()},o.init()}class u extends n{constructor(e,t){void 0===t&&(t={}),super(t,[e]);const i=this,n=s();let o,r;if(i.params=a({},e.params.picker,t),i.params.containerEl&&(o=l(i.params.containerEl),0===o.length))return i;i.params.inputEl&&(r=l(i.params.inputEl));let c=i.params.scrollToInput?r:void 0;if(i.params.scrollToEl){const e=l(i.params.scrollToEl);e.length>0&&(c=e)}function p(){i.resizeCols()}function d(){i.open()}function u(e){e.preventDefault()}a(i,{app:e,$containerEl:o,containerEl:o&&o[0],inline:o&&o.length>0,needsOriginFix:n.ios||window.navigator.userAgent.toLowerCase().indexOf("safari")>=0&&window.navigator.userAgent.toLowerCase().indexOf("chrome")<0&&!n.android,cols:[],$inputEl:r,inputEl:r&&r[0],$scrollToEl:c,initialized:!1,opened:!1,url:i.params.url});let m=null;function v(e){m=e.target}function h(e){if(i.destroyed||!i.params)return;const t=l(e.target);i.isPopover()||i.opened&&!i.closing&&(t.closest('[class*="backdrop"]').length||(r&&r.length>0?m===e.target&&t[0]!==r[0]&&0===t.closest(".sheet-modal").length&&i.close():0===l(e.target).closest(".sheet-modal").length&&i.close()))}return a(i,{attachResizeEvent(){e.on("resize",p)},detachResizeEvent(){e.off("resize",p)},attachInputEvents(){i.$inputEl.on("click",d),i.params.inputReadOnly&&(i.$inputEl.on("focus mousedown",u),i.$inputEl[0]&&(i.$inputEl[0].f7ValidateReadonly=!0))},detachInputEvents(){i.$inputEl.off("click",d),i.params.inputReadOnly&&(i.$inputEl.off("focus mousedown",u),i.$inputEl[0]&&delete i.$inputEl[0].f7ValidateReadonly)},attachHtmlEvents(){e.on("click",h),e.on("touchstart",v)},detachHtmlEvents(){e.off("click",h),e.off("touchstart",v)}}),i.init(),i}get view(){const{app:e,params:t,$inputEl:l}=this;let i;return t.view?i=t.view:l&&(i=l.parents(".view").length&&l.parents(".view")[0].f7View),i||(i=e.views.main),i}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:i}=e,n=s();if("sheet"===i.openIn)return!1;if(l&&"popover"!==l.type)return!1;if(!e.inline&&e.inputEl){if("popover"===i.openIn)return!0;if(n.ios)return!!n.ipad;if(t.width>=768)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 i=0;i<t.cols.length;i+=1)t.cols[i]&&!t.cols[i].divider&&(t.cols[i].setValue(e[l]),l+=1)}getValue(){return this.value}updateValue(e){const t=this,l=e||[],i=[];let s;if(0===t.cols.length){const e=t.params.cols.filter((e=>!e.divider));for(let t=0;t<e.length;t+=1)s=e[t],void 0!==s.displayValues&&void 0!==s.values&&-1!==s.values.indexOf(l[t])?i.push(s.displayValues[s.values.indexOf(l[t])]):i.push(l[t])}else for(let e=0;e<t.cols.length;e+=1)t.cols[e].divider||(l.push(t.cols[e].value),i.push(t.cols[e].displayValue));l.indexOf(void 0)>=0||(t.value=l,t.displayValue=i,t.emit("local::change pickerChange",t,t.value,t.displayValue),t.inputEl&&(t.$inputEl.val(t.formatValue()),t.$inputEl.trigger("change")))}initColumn(e,t){d.call(this,e,t)}destroyColumn(e){const t=this,i=l(e).index();t.cols[i]&&t.cols[i].destroy&&t.cols[i].destroy()}renderToolbar(){const e=this;return e.params.renderToolbar?e.params.renderToolbar.call(e,e):r("div",{class:"toolbar toolbar-top"},r("div",{class:"toolbar-inner"},r("div",{class:"left"}),r("div",{class:"right"},r("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 i,s;return e.divider?i=`\n          <div class="${l} picker-column-divider">${e.content}</div>\n        `:(s=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(""),i=`\n          <div class="${l}">\n            <div class="picker-items">${s}</div>\n          </div>\n        `),t?s.trim():i.trim()}renderInline(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`picker picker-inline ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderSheet(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:`sheet-modal picker picker-sheet ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"sheet-modal-inner picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("div",{class:"picker-center-highlight"})))}renderPopover(){const e=this,{rotateEffect:t,cssClass:l,toolbar:i}=e.params;return r("div",{class:"popover picker-popover"},r("div",{class:"popover-inner"},r("div",{class:`picker ${t?"picker-3d":""} ${l||""}`},i&&e.renderToolbar(),r("div",{class:"picker-columns"},e.cols.map((t=>e.renderColumn(t))),r("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:i,$inputEl:s,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 i=!0;(!t&&r.value||t&&o)&&(i=!1),e.initColumn(l,i)})),t?o&&e.setValue(o):o?e.setValue(o):r.value&&e.setValue(r.value),!n&&s&&s.length&&"md"===i.theme&&s.trigger("focus"),e.initialized=!0,l&&l.trigger("picker:open"),s&&s.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"),i=e.$inputEl.attr("required");l&&i&&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||c((()=>{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:i,inline:s,$inputEl:n,$scrollToEl:o,params:r}=e;if(i)return;if(0===e.cols.length&&r.cols.length&&r.cols.forEach((t=>{e.cols.push(t)})),s)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,p(e),e.destroyed=!0}}var m={name:"picker",static:{Picker:u},create(){const e=this;e.picker=o({defaultSelector:".picker",constructor:u,app:e,domProp:"f7Picker"}),e.picker.close=function(e){void 0===e&&(e=".picker");const t=l(e);if(0===t.length)return;const i=t[0].f7Picker;!i||i&&!i.opened||i.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[m.name])return;e.use(m),e.instance&&(e.instance.useModuleParams(m,e.instance.params),e.instance.useModule(m))}return m}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))

package/components/picker/picker.less

@@ -135,17 +135,9 @@
   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 & {
-    left: 8px;
-    right: 8px;
-  }
 }
 .picker-3d {
   .picker-columns {
@@ -183,6 +175,3 @@
 .if-md-theme({
   @import './picker-md.less';
 });
-.if-aurora-theme({
-  @import './picker-aurora.less';
-});

package/components/pie-chart/pie-chart-class.js

@@ -2,19 +2,17 @@ import $ from '../../shared/dom7.js';
 import { extend, deleteProps } from '../../shared/utils.js';
 import Framework7Class from '../../shared/class.js';
 /** @jsx $jsx */
-
 import $jsx from '../../shared/$jsx.js';
-
 class PieChart extends Framework7Class {
   constructor(app, params) {
     if (params === void 0) {
       params = {};
     }
-
     super(params, [app]);
     const self = this;
-    const defaults = extend({}, app.params.pieChart); // Extend defaults with modules params
+    const defaults = extend({}, app.params.pieChart);
 
+    // Extend defaults with modules params
     self.useModulesParams(defaults);
     self.params = extend(defaults, params);
     const {
@@ -31,15 +29,15 @@ class PieChart extends Framework7Class {
       currentIndex: null,
       f7Tooltip: null
     });
-    $el[0].f7PieChart = self; // Install Modules
+    $el[0].f7PieChart = self;
 
+    // Install Modules
     self.useModules();
     self.showTooltip = self.showTooltip.bind(this);
     self.hideTooltip = self.hideTooltip.bind(this);
     self.init();
     return self;
   }
-
   getSummValue() {
     const {
       datasets
@@ -50,7 +48,6 @@ class PieChart extends Framework7Class {
     });
     return summ;
   }
-
   getPaths() {
     const {
       datasets,
@@ -58,13 +55,11 @@ class PieChart extends Framework7Class {
     } = this.params;
     const paths = [];
     let cumulativePercentage = 0;
-
     function getCoordinatesForPercentage(percentage) {
       const x = Math.cos(2 * Math.PI * percentage) * (size / 3);
       const y = Math.sin(2 * Math.PI * percentage) * (size / 3);
       return [x, y];
     }
-
     datasets.forEach(_ref => {
       let {
         value,
@@ -76,8 +71,10 @@ class PieChart extends Framework7Class {
       cumulativePercentage += percentage;
       const [endX, endY] = getCoordinatesForPercentage(cumulativePercentage);
       const largeArcFlag = percentage > 0.5 ? 1 : 0;
-      const points = [`M ${startX} ${startY}`, // Move
-      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+      const points = [`M ${startX} ${startY}`,
+      // Move
+      `A ${size / 3} ${size / 3} 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+      // Arc
       'L 0 0' // Line
       ].join(' ');
       paths.push({
@@ -88,7 +85,6 @@ class PieChart extends Framework7Class {
     });
     return paths;
   }
-
   formatTooltipText() {
     const {
       datasets
@@ -103,12 +99,10 @@ class PieChart extends Framework7Class {
       color
     } = datasets[currentIndex];
     const percentage = value / this.getSummValue() * 100;
-
     const round = v => {
       if (parseInt(v, 10) === v) return v;
       return Math.round(v * 100) / 100;
     };
-
     if (this.params.formatTooltip) {
       return this.params.formatTooltip.call(this, {
         index: currentIndex,
@@ -118,7 +112,6 @@ class PieChart extends Framework7Class {
         percentage
       });
     }
-
     const tooltipText = `${label ? `${label}: ` : ''}${round(value)} (${round(percentage)}%)`;
     return `
       <div class="pie-chart-tooltip-label">
@@ -126,7 +119,6 @@ class PieChart extends Framework7Class {
       </div>
     `;
   }
-
   setTooltip() {
     const self = this;
     const {
@@ -140,7 +132,6 @@ class PieChart extends Framework7Class {
     } = params;
     if (currentIndex === null && !self.f7Tooltip) return;
     if (!tooltip || !el) return;
-
     if (currentIndex !== null && !self.f7Tooltip) {
       self.f7Tooltip = app.tooltip.create({
         trigger: 'manual',
@@ -152,9 +143,7 @@ class PieChart extends Framework7Class {
       self.f7Tooltip.show();
       return;
     }
-
     if (!self.f7Tooltip) return;
-
     if (currentIndex !== null) {
       self.f7Tooltip.setText(self.formatTooltipText());
       self.f7Tooltip.setTargetEl(el.querySelector(`path[data-index="${currentIndex}"]`));
@@ -163,7 +152,6 @@ class PieChart extends Framework7Class {
       self.f7Tooltip.hide();
     }
   }
-
   render() {
     const self = this;
     const size = self.params.size;
@@ -179,12 +167,10 @@ class PieChart extends Framework7Class {
       "data-index": index
     })));
   }
-
   update(newParams) {
     if (newParams === void 0) {
       newParams = {};
     }
-
     const self = this;
     const {
       params
@@ -206,7 +192,6 @@ class PieChart extends Framework7Class {
     self.$el.append($svgEl);
     return self;
   }
-
   setCurrentIndex(index) {
     const self = this;
     if (index === self.currentIndex) return;
@@ -220,7 +205,6 @@ class PieChart extends Framework7Class {
     });
     self.emit('local::select pieChartSelect', self, index, datasets[index]);
   }
-
   showTooltip(e) {
     const newIndex = parseInt(e.target.getAttribute('data-index'), 10);
     this.setCurrentIndex(newIndex);
@@ -229,13 +213,11 @@ class PieChart extends Framework7Class {
     });
     this.setTooltip();
   }
-
   hideTooltip() {
     this.setCurrentIndex(null);
     this.$svgEl.find('path').removeClass('pie-chart-hidden');
     this.setTooltip();
   }
-
   init() {
     const self = this;
     const $svgEl = $(self.render()).eq(0);
@@ -249,7 +231,6 @@ class PieChart extends Framework7Class {
     self.$el.on('mouseleave', 'path', self.hideTooltip, true);
     return self;
   }
-
   destroy() {
     const self = this;
     if (!self.$el || self.destroyed) return;
@@ -258,16 +239,12 @@ class PieChart extends Framework7Class {
     self.$el.off('click mouseenter', 'path', self.showTooltip, true);
     self.$el.off('mouseleave', 'path', self.hideTooltip, true);
     self.$svgEl.remove();
-
     if (self.f7Tooltip && self.f7Tooltip.destroy) {
       self.f7Tooltip.destroy();
     }
-
     delete self.$el[0].f7PieChart;
     deleteProps(self);
     self.destroyed = true;
   }
-
 }
-
 export default PieChart;

package/components/pie-chart/pie-chart.js

@@ -12,7 +12,6 @@ export default {
       formatTooltip: null
     }
   },
-
   create() {
     const app = this;
     app.pieChart = ConstructorMethods({
@@ -21,7 +20,6 @@ export default {
       app,
       domProp: 'f7PieChart'
     });
-
     app.pieChart.update = function update(el, newParams) {
       const $el = $(el);
       if ($el.length === 0) return undefined;
@@ -31,5 +29,4 @@ export default {
       return pieChart;
     };
   }
-
 };

package/components/pie-chart/pie-chart.less

@@ -41,6 +41,3 @@
 .if-md-theme({
   @import './pie-chart-md.less';
 });
-.if-aurora-theme({
-  @import './pie-chart-aurora.less';
-});