framework7 6.3.4 → 7.0.0-beta.3

package/{esm/components → components}/picker/picker-class.js

@@ -1,13 +1,3 @@
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
 import { getWindow } from 'ssr-window';
 import $ from '../../shared/dom7';
 import { extend, nextTick, deleteProps } from '../../shared/utils';
@@ -18,40 +8,30 @@ import pickerColumn from './picker-column';
 
 import $jsx from '../../shared/$jsx';
 
-var Picker = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Picker, _Framework7Class);
-
-  function Picker(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var picker = _assertThisInitialized(_this);
-
-    var device = getDevice();
-    var window = getWindow();
+class Picker extends Framework7Class {
+  constructor(app, params = {}) {
+    super(params, [app]);
+    const picker = this;
+    const device = getDevice();
+    const window = getWindow();
     picker.params = extend({}, app.params.picker, params);
-    var $containerEl;
+    let $containerEl;
 
     if (picker.params.containerEl) {
       $containerEl = $(picker.params.containerEl);
-      if ($containerEl.length === 0) return picker || _assertThisInitialized(_this);
+      if ($containerEl.length === 0) return picker;
     }
 
-    var $inputEl;
+    let $inputEl;
 
     if (picker.params.inputEl) {
       $inputEl = $(picker.params.inputEl);
     }
 
-    var $scrollToEl = picker.params.scrollToInput ? $inputEl : undefined;
+    let $scrollToEl = picker.params.scrollToInput ? $inputEl : undefined;
 
     if (picker.params.scrollToEl) {
-      var scrollToEl = $(picker.params.scrollToEl);
+      const scrollToEl = $(picker.params.scrollToEl);
 
       if (scrollToEl.length > 0) {
         $scrollToEl = scrollToEl;
@@ -59,15 +39,15 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     extend(picker, {
-      app: app,
-      $containerEl: $containerEl,
+      app,
+      $containerEl,
       containerEl: $containerEl && $containerEl[0],
       inline: $containerEl && $containerEl.length > 0,
       needsOriginFix: device.ios || window.navigator.userAgent.toLowerCase().indexOf('safari') >= 0 && window.navigator.userAgent.toLowerCase().indexOf('chrome') < 0 && !device.android,
       cols: [],
-      $inputEl: $inputEl,
+      $inputEl,
       inputEl: $inputEl && $inputEl[0],
-      $scrollToEl: $scrollToEl,
+      $scrollToEl,
       initialized: false,
       opened: false,
       url: picker.params.url
@@ -85,7 +65,7 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       e.preventDefault();
     }
 
-    var htmlTouchStartTarget = null;
+    let htmlTouchStartTarget = null;
 
     function onHtmlTouchStart(e) {
       htmlTouchStartTarget = e.target;
@@ -93,7 +73,7 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
 
     function onHtmlClick(e) {
       if (picker.destroyed || !picker.params) return;
-      var $targetEl = $(e.target);
+      const $targetEl = $(e.target);
       if (picker.isPopover()) return;
       if (!picker.opened || picker.closing) return;
       if ($targetEl.closest('[class*="backdrop"]').length) return;
@@ -109,13 +89,15 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
 
 
     extend(picker, {
-      attachResizeEvent: function attachResizeEvent() {
+      attachResizeEvent() {
         app.on('resize', onResize);
       },
-      detachResizeEvent: function detachResizeEvent() {
+
+      detachResizeEvent() {
         app.off('resize', onResize);
       },
-      attachInputEvents: function attachInputEvents() {
+
+      attachInputEvents() {
         picker.$inputEl.on('click', onInputClick);
 
         if (picker.params.inputReadOnly) {
@@ -126,7 +108,8 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      detachInputEvents: function detachInputEvents() {
+
+      detachInputEvents() {
         picker.$inputEl.off('click', onInputClick);
 
         if (picker.params.inputReadOnly) {
@@ -137,45 +120,66 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
           }
         }
       },
-      attachHtmlEvents: function attachHtmlEvents() {
+
+      attachHtmlEvents() {
         app.on('click', onHtmlClick);
         app.on('touchstart', onHtmlTouchStart);
       },
-      detachHtmlEvents: function detachHtmlEvents() {
+
+      detachHtmlEvents() {
         app.off('click', onHtmlClick);
         app.off('touchstart', onHtmlTouchStart);
       }
+
     });
     picker.init();
-    return picker || _assertThisInitialized(_this);
+    return picker;
   }
 
-  var _proto = Picker.prototype;
+  get view() {
+    const {
+      app,
+      params,
+      $inputEl
+    } = this;
+    let view;
+
+    if (params.view) {
+      view = params.view;
+    } else if ($inputEl) {
+      view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
+    }
+
+    if (!view) view = app.views.main;
+    return view;
+  }
 
-  _proto.initInput = function initInput() {
-    var picker = this;
+  initInput() {
+    const picker = this;
     if (!picker.$inputEl) return;
     if (picker.params.inputReadOnly) picker.$inputEl.prop('readOnly', true);
-  };
+  }
 
-  _proto.resizeCols = function resizeCols() {
-    var picker = this;
+  resizeCols() {
+    const picker = this;
     if (!picker.opened) return;
 
-    for (var i = 0; i < picker.cols.length; i += 1) {
+    for (let i = 0; i < picker.cols.length; i += 1) {
       if (!picker.cols[i].divider) {
         picker.cols[i].calcSize();
         picker.cols[i].setValue(picker.cols[i].value, 0, false);
       }
     }
-  };
+  }
 
-  _proto.isPopover = function isPopover() {
-    var picker = this;
-    var app = picker.app,
-        modal = picker.modal,
-        params = picker.params;
-    var device = getDevice();
+  isPopover() {
+    const picker = this;
+    const {
+      app,
+      modal,
+      params
+    } = picker;
+    const device = getDevice();
     if (params.openIn === 'sheet') return false;
     if (modal && modal.type !== 'popover') return false;
 
@@ -196,23 +200,25 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return false;
-  };
+  }
 
-  _proto.formatValue = function formatValue() {
-    var picker = this;
-    var value = picker.value,
-        displayValue = picker.displayValue;
+  formatValue() {
+    const picker = this;
+    const {
+      value,
+      displayValue
+    } = picker;
 
     if (picker.params.formatValue) {
       return picker.params.formatValue.call(picker, value, displayValue);
     }
 
     return value.join(' ');
-  };
+  }
 
-  _proto.setValue = function setValue(values, transition) {
-    var picker = this;
-    var valueIndex = 0;
+  setValue(values, transition) {
+    const picker = this;
+    let valueIndex = 0;
 
     if (picker.cols.length === 0) {
       picker.value = values;
@@ -220,31 +226,29 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       return;
     }
 
-    for (var i = 0; i < picker.cols.length; i += 1) {
+    for (let i = 0; i < picker.cols.length; i += 1) {
       if (picker.cols[i] && !picker.cols[i].divider) {
         picker.cols[i].setValue(values[valueIndex], transition);
         valueIndex += 1;
       }
     }
-  };
+  }
 
-  _proto.getValue = function getValue() {
-    var picker = this;
+  getValue() {
+    const picker = this;
     return picker.value;
-  };
+  }
 
-  _proto.updateValue = function updateValue(forceValues) {
-    var picker = this;
-    var newValue = forceValues || [];
-    var newDisplayValue = [];
-    var column;
+  updateValue(forceValues) {
+    const picker = this;
+    const newValue = forceValues || [];
+    const newDisplayValue = [];
+    let column;
 
     if (picker.cols.length === 0) {
-      var noDividerColumns = picker.params.cols.filter(function (c) {
-        return !c.divider;
-      });
+      const noDividerColumns = picker.params.cols.filter(c => !c.divider);
 
-      for (var i = 0; i < noDividerColumns.length; i += 1) {
+      for (let i = 0; i < noDividerColumns.length; i += 1) {
         column = noDividerColumns[i];
 
         if (column.displayValues !== undefined && column.values !== undefined && column.values.indexOf(newValue[i]) !== -1) {
@@ -254,10 +258,10 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
         }
       }
     } else {
-      for (var _i = 0; _i < picker.cols.length; _i += 1) {
-        if (!picker.cols[_i].divider) {
-          newValue.push(picker.cols[_i].value);
-          newDisplayValue.push(picker.cols[_i].displayValue);
+      for (let i = 0; i < picker.cols.length; i += 1) {
+        if (!picker.cols[i].divider) {
+          newValue.push(picker.cols[i].value);
+          newDisplayValue.push(picker.cols[i].displayValue);
         }
       }
     }
@@ -274,26 +278,26 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       picker.$inputEl.val(picker.formatValue());
       picker.$inputEl.trigger('change');
     }
-  };
+  }
 
-  _proto.initColumn = function initColumn(colEl, updateItems) {
-    var picker = this;
+  initColumn(colEl, updateItems) {
+    const picker = this;
     pickerColumn.call(picker, colEl, updateItems);
   } // eslint-disable-next-line
-  ;
 
-  _proto.destroyColumn = function destroyColumn(colEl) {
-    var picker = this;
-    var $colEl = $(colEl);
-    var index = $colEl.index();
+
+  destroyColumn(colEl) {
+    const picker = this;
+    const $colEl = $(colEl);
+    const index = $colEl.index();
 
     if (picker.cols[index] && picker.cols[index].destroy) {
       picker.cols[index].destroy();
     }
-  };
+  }
 
-  _proto.renderToolbar = function renderToolbar() {
-    var picker = this;
+  renderToolbar() {
+    const picker = this;
     if (picker.params.renderToolbar) return picker.params.renderToolbar.call(picker, picker);
     return $jsx("div", {
       class: "toolbar toolbar-top no-shadow"
@@ -307,88 +311,93 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       class: "link sheet-close popover-close"
     }, picker.params.toolbarCloseText))));
   } // eslint-disable-next-line
-  ;
 
-  _proto.renderColumn = function renderColumn(col, onlyItems) {
-    var colClasses = "picker-column " + (col.textAlign ? "picker-column-" + col.textAlign : '') + " " + (col.cssClass || '');
-    var columnHtml;
-    var columnItemsHtml;
+
+  renderColumn(col, onlyItems) {
+    const colClasses = `picker-column ${col.textAlign ? `picker-column-${col.textAlign}` : ''} ${col.cssClass || ''}`;
+    let columnHtml;
+    let columnItemsHtml;
 
     if (col.divider) {
       // prettier-ignore
-      columnHtml = "\n        <div class=\"" + colClasses + " picker-column-divider\">" + col.content + "</div>\n      ";
+      columnHtml = `
+        <div class="${colClasses} picker-column-divider">${col.content}</div>
+      `;
     } else {
       // prettier-ignore
-      columnItemsHtml = col.values.map(function (value, index) {
-        return "\n        <div class=\"picker-item\" data-picker-value=\"" + value + "\">\n          <span>" + (col.displayValues ? col.displayValues[index] : value) + "</span>\n        </div>\n      ";
-      }).join(''); // prettier-ignore
+      columnItemsHtml = col.values.map((value, index) => `
+        <div class="picker-item" data-picker-value="${value}">
+          <span>${col.displayValues ? col.displayValues[index] : value}</span>
+        </div>
+      `).join(''); // prettier-ignore
 
-      columnHtml = "\n        <div class=\"" + colClasses + "\">\n          <div class=\"picker-items\">" + columnItemsHtml + "</div>\n        </div>\n      ";
+      columnHtml = `
+        <div class="${colClasses}">
+          <div class="picker-items">${columnItemsHtml}</div>
+        </div>
+      `;
     }
 
     return onlyItems ? columnItemsHtml.trim() : columnHtml.trim();
-  };
-
-  _proto.renderInline = function renderInline() {
-    var picker = this;
-    var _picker$params = picker.params,
-        rotateEffect = _picker$params.rotateEffect,
-        cssClass = _picker$params.cssClass,
-        toolbar = _picker$params.toolbar;
-    var inlineHtml = $jsx("div", {
-      class: "picker picker-inline " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '')
+  }
+
+  renderInline() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const inlineHtml = $jsx("div", {
+      class: `picker picker-inline ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
     }, toolbar && picker.renderToolbar(), $jsx("div", {
       class: "picker-columns"
-    }, picker.cols.map(function (col) {
-      return picker.renderColumn(col);
-    }), $jsx("div", {
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
       class: "picker-center-highlight"
     })));
     return inlineHtml;
-  };
-
-  _proto.renderSheet = function renderSheet() {
-    var picker = this;
-    var _picker$params2 = picker.params,
-        rotateEffect = _picker$params2.rotateEffect,
-        cssClass = _picker$params2.cssClass,
-        toolbar = _picker$params2.toolbar;
-    var sheetHtml = $jsx("div", {
-      class: "sheet-modal picker picker-sheet " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '')
+  }
+
+  renderSheet() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const sheetHtml = $jsx("div", {
+      class: `sheet-modal picker picker-sheet ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
     }, toolbar && picker.renderToolbar(), $jsx("div", {
       class: "sheet-modal-inner picker-columns"
-    }, picker.cols.map(function (col) {
-      return picker.renderColumn(col);
-    }), $jsx("div", {
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
       class: "picker-center-highlight"
     })));
     return sheetHtml;
-  };
-
-  _proto.renderPopover = function renderPopover() {
-    var picker = this;
-    var _picker$params3 = picker.params,
-        rotateEffect = _picker$params3.rotateEffect,
-        cssClass = _picker$params3.cssClass,
-        toolbar = _picker$params3.toolbar;
-    var popoverHtml = $jsx("div", {
+  }
+
+  renderPopover() {
+    const picker = this;
+    const {
+      rotateEffect,
+      cssClass,
+      toolbar
+    } = picker.params;
+    const popoverHtml = $jsx("div", {
       class: "popover picker-popover"
     }, $jsx("div", {
       class: "popover-inner"
     }, $jsx("div", {
-      class: "picker " + (rotateEffect ? 'picker-3d' : '') + " " + (cssClass || '')
+      class: `picker ${rotateEffect ? 'picker-3d' : ''} ${cssClass || ''}`
     }, toolbar && picker.renderToolbar(), $jsx("div", {
       class: "picker-columns"
-    }, picker.cols.map(function (col) {
-      return picker.renderColumn(col);
-    }), $jsx("div", {
+    }, picker.cols.map(col => picker.renderColumn(col)), $jsx("div", {
       class: "picker-center-highlight"
     })))));
     return popoverHtml;
-  };
+  }
 
-  _proto.render = function render() {
-    var picker = this;
+  render() {
+    const picker = this;
     if (picker.params.render) return picker.params.render.call(picker);
 
     if (!picker.inline) {
@@ -397,25 +406,27 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     return picker.renderInline();
-  };
-
-  _proto.onOpen = function onOpen() {
-    var picker = this;
-    var initialized = picker.initialized,
-        $el = picker.$el,
-        app = picker.app,
-        $inputEl = picker.$inputEl,
-        inline = picker.inline,
-        value = picker.value,
-        params = picker.params;
+  }
+
+  onOpen() {
+    const picker = this;
+    const {
+      initialized,
+      $el,
+      app,
+      $inputEl,
+      inline,
+      value,
+      params
+    } = picker;
     picker.opened = true;
     picker.closing = false;
     picker.opening = true; // Init main events
 
     picker.attachResizeEvent(); // Init cols
 
-    $el.find('.picker-column').each(function (colEl) {
-      var updateItems = true;
+    $el.find('.picker-column').each(colEl => {
+      let updateItems = true;
 
       if (!initialized && params.value || initialized && value) {
         updateItems = false;
@@ -448,10 +459,10 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     picker.emit('local::open pickerOpen', picker);
-  };
+  }
 
-  _proto.onOpened = function onOpened() {
-    var picker = this;
+  onOpened() {
+    const picker = this;
     picker.opening = false;
 
     if (picker.$el) {
@@ -463,16 +474,16 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     picker.emit('local::opened pickerOpened', picker);
-  };
+  }
 
-  _proto.onClose = function onClose() {
-    var picker = this;
-    var app = picker.app;
+  onClose() {
+    const picker = this;
+    const app = picker.app;
     picker.opening = false;
     picker.closing = true; // Detach events
 
     picker.detachResizeEvent();
-    picker.cols.forEach(function (col) {
+    picker.cols.forEach(col => {
       if (col.destroy) col.destroy();
     });
 
@@ -480,8 +491,8 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       if (app.theme === 'md') {
         picker.$inputEl.trigger('blur');
       } else {
-        var validate = picker.$inputEl.attr('validate');
-        var required = picker.$inputEl.attr('required');
+        const validate = picker.$inputEl.attr('validate');
+        const required = picker.$inputEl.attr('required');
 
         if (validate && required) {
           app.input.validate(picker.$inputEl);
@@ -498,15 +509,15 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     picker.emit('local::close pickerClose', picker);
-  };
+  }
 
-  _proto.onClosed = function onClosed() {
-    var picker = this;
+  onClosed() {
+    const picker = this;
     picker.opened = false;
     picker.closing = false;
 
     if (!picker.inline) {
-      nextTick(function () {
+      nextTick(() => {
         if (picker.modal && picker.modal.el && picker.modal.destroy) {
           if (!picker.params.routableModals) {
             picker.modal.destroy();
@@ -526,20 +537,22 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     picker.emit('local::closed pickerClosed', picker);
-  };
-
-  _proto.open = function open() {
-    var picker = this;
-    var app = picker.app,
-        opened = picker.opened,
-        inline = picker.inline,
-        $inputEl = picker.$inputEl,
-        $scrollToEl = picker.$scrollToEl,
-        params = picker.params;
+  }
+
+  open() {
+    const picker = this;
+    const {
+      app,
+      opened,
+      inline,
+      $inputEl,
+      $scrollToEl,
+      params
+    } = picker;
     if (opened) return;
 
     if (picker.cols.length === 0 && params.cols.length) {
-      params.cols.forEach(function (col) {
+      params.cols.forEach(col => {
         picker.cols.push(col);
       });
     }
@@ -553,30 +566,34 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
       return;
     }
 
-    var isPopover = picker.isPopover();
-    var modalType = isPopover ? 'popover' : 'sheet';
-    var modalParams = {
+    const isPopover = picker.isPopover();
+    const modalType = isPopover ? 'popover' : 'sheet';
+    const modalParams = {
       targetEl: $inputEl,
       scrollToEl: $scrollToEl,
       content: picker.render(),
       backdrop: typeof params.backdrop !== 'undefined' ? params.backdrop : isPopover,
       on: {
-        open: function open() {
-          var modal = this;
+        open() {
+          const modal = this;
           picker.modal = modal;
           picker.$el = isPopover ? modal.$el.find('.picker') : modal.$el;
           picker.$el[0].f7Picker = picker;
           picker.onOpen();
         },
-        opened: function opened() {
+
+        opened() {
           picker.onOpened();
         },
-        close: function close() {
+
+        close() {
           picker.onClose();
         },
-        closed: function closed() {
+
+        closed() {
           picker.onClosed();
         }
+
       }
     };
 
@@ -586,24 +603,25 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     if (params.routableModals && picker.view) {
-      var _route;
-
       picker.view.router.navigate({
         url: picker.url,
-        route: (_route = {
-          path: picker.url
-        }, _route[modalType] = modalParams, _route)
+        route: {
+          path: picker.url,
+          [modalType]: modalParams
+        }
       });
     } else {
       picker.modal = app[modalType].create(modalParams);
       picker.modal.open();
     }
-  };
+  }
 
-  _proto.close = function close() {
-    var picker = this;
-    var opened = picker.opened,
-        inline = picker.inline;
+  close() {
+    const picker = this;
+    const {
+      opened,
+      inline
+    } = picker;
     if (!opened) return;
 
     if (inline) {
@@ -617,10 +635,10 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     } else {
       picker.modal.close();
     }
-  };
+  }
 
-  _proto.init = function init() {
-    var picker = this;
+  init() {
+    const picker = this;
     picker.initInput();
 
     if (picker.inline) {
@@ -643,12 +661,14 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     }
 
     picker.emit('local::init pickerInit', picker);
-  };
+  }
 
-  _proto.destroy = function destroy() {
-    var picker = this;
+  destroy() {
+    const picker = this;
     if (picker.destroyed) return;
-    var $el = picker.$el;
+    const {
+      $el
+    } = picker;
     picker.emit('local::beforeDestroy pickerBeforeDestroy', picker);
     if ($el) $el.trigger('picker:beforedestroy');
     picker.close(); // Detach Events
@@ -664,28 +684,8 @@ var Picker = /*#__PURE__*/function (_Framework7Class) {
     if ($el && $el.length) delete picker.$el[0].f7Picker;
     deleteProps(picker);
     picker.destroyed = true;
-  };
-
-  _createClass(Picker, [{
-    key: "view",
-    get: function get() {
-      var app = this.app,
-          params = this.params,
-          $inputEl = this.$inputEl;
-      var view;
-
-      if (params.view) {
-        view = params.view;
-      } else if ($inputEl) {
-        view = $inputEl.parents('.view').length && $inputEl.parents('.view')[0].f7View;
-      }
-
-      if (!view) view = app.views.main;
-      return view;
-    }
-  }]);
+  }
 
-  return Picker;
-}(Framework7Class);
+}
 
 export default Picker;