framework7 6.3.4 → 7.0.0-beta.3

package/esm/modules/component/component-class.js

@@ -1,402 +0,0 @@
-/* eslint no-underscore-dangle: "off" */
-import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import $h from './$h';
-import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils';
-import vdom from './vdom';
-import patch from './patch';
-
-var Component = /*#__PURE__*/function () {
-  function Component(app, component, props, _temp) {
-    var _this = this;
-
-    if (props === void 0) {
-      props = {};
-    }
-
-    var _ref = _temp === void 0 ? {} : _temp,
-        el = _ref.el,
-        context = _ref.context,
-        children = _ref.children;
-
-    var document = getDocument();
-    merge(this, {
-      f7: app,
-      props: props || {},
-      context: context || {},
-      id: component.id || generateId(),
-      children: children || [],
-      theme: {
-        ios: app.theme === 'ios',
-        md: app.theme === 'md',
-        aurora: app.theme === 'aurora'
-      },
-      style: component.style,
-      __updateQueue: [],
-      __eventHandlers: [],
-      __onceEventHandlers: [],
-      __onBeforeMount: [],
-      __onMounted: [],
-      __onBeforeUpdate: [],
-      __onUpdated: [],
-      __onBeforeUnmount: [],
-      __onUnmounted: []
-    });
-
-    var createComponent = function createComponent() {
-      return component(_this.props, _this.getComponentContext(true));
-    };
-
-    var getRenderFuncion = function getRenderFuncion(componentResult) {
-      return new Promise(function (resolve, reject) {
-        if (typeof componentResult === 'function') {
-          resolve(componentResult);
-        } else if (componentResult instanceof Promise) {
-          componentResult.then(function (render) {
-            resolve(render);
-          }).catch(function (err) {
-            reject(err);
-          });
-        } else {
-          reject(new Error('Framework7: Component render function is not a "function" type. Didn\'t you forget to "return $render"?'));
-        }
-      });
-    };
-
-    return new Promise(function (resolve, reject) {
-      var componentResult = createComponent();
-      getRenderFuncion(componentResult).then(function (render) {
-        _this.renderFunction = render;
-
-        var tree = _this.render();
-
-        if (el) {
-          _this.vnode = vdom(tree, _this, true);
-
-          if (_this.style) {
-            _this.styleEl = document.createElement('style');
-            _this.styleEl.innerHTML = _this.style;
-          }
-
-          _this.el = el;
-          patch(_this.el, _this.vnode);
-          _this.el = _this.vnode.elm;
-          _this.$el = $(_this.el);
-
-          _this.attachEvents();
-
-          _this.el.f7Component = _this;
-
-          _this.mount();
-
-          resolve(_this);
-          return;
-        } // Make Dom
-
-
-        if (tree) {
-          _this.vnode = vdom(tree, _this, true);
-          _this.el = document.createElement(_this.vnode.sel || 'div');
-          patch(_this.el, _this.vnode);
-          _this.$el = $(_this.el);
-        }
-
-        if (_this.style) {
-          _this.styleEl = document.createElement('style');
-          _this.styleEl.innerHTML = _this.style;
-        }
-
-        _this.attachEvents();
-
-        if (_this.el) {
-          _this.el.f7Component = _this;
-        }
-
-        resolve(_this);
-      }).catch(function (err) {
-        reject(err);
-      });
-    });
-  }
-
-  var _proto = Component.prototype;
-
-  _proto.on = function on(eventName, handler) {
-    if (!this.__eventHandlers) return;
-
-    this.__eventHandlers.push({
-      eventName: eventName,
-      handler: handler
-    });
-  };
-
-  _proto.once = function once(eventName, handler) {
-    if (!this.__eventHandlers) return;
-
-    this.__onceEventHandlers.push({
-      eventName: eventName,
-      handler: handler
-    });
-  };
-
-  _proto.getComponentStore = function getComponentStore() {
-    var _this2 = this;
-
-    var _this$f7$store = this.f7.store,
-        state = _this$f7$store.state,
-        _gettersPlain = _this$f7$store._gettersPlain,
-        dispatch = _this$f7$store.dispatch;
-    var $store = {
-      state: state,
-      dispatch: dispatch
-    };
-    $store.getters = new Proxy(_gettersPlain, {
-      get: function get(target, prop) {
-        var obj = target[prop];
-
-        var callback = function callback(v) {
-          obj.value = v;
-
-          _this2.update();
-        };
-
-        obj.onUpdated(callback);
-        return obj;
-      }
-    });
-    return $store;
-  };
-
-  _proto.getComponentContext = function getComponentContext(includeHooks) {
-    var _this3 = this;
-
-    var ctx = {
-      $f7route: this.context.f7route,
-      $f7router: this.context.f7router,
-      $h: $h,
-      $: $,
-      $id: this.id,
-      $f7: this.f7,
-      $f7ready: this.f7ready.bind(this),
-      $theme: this.theme,
-      $tick: this.tick.bind(this),
-      $update: this.update.bind(this),
-      $emit: this.emit.bind(this),
-      $store: this.getComponentStore(),
-      $el: {}
-    };
-    Object.defineProperty(ctx.$el, 'value', {
-      get: function get() {
-        return _this3.$el;
-      }
-    });
-    if (includeHooks) Object.assign(ctx, {
-      $on: this.on.bind(this),
-      $once: this.once.bind(this),
-      $onBeforeMount: function $onBeforeMount(handler) {
-        return _this3.__onBeforeMount.push(handler);
-      },
-      $onMounted: function $onMounted(handler) {
-        return _this3.__onMounted.push(handler);
-      },
-      $onBeforeUpdate: function $onBeforeUpdate(handler) {
-        return _this3.__onBeforeUpdate.push(handler);
-      },
-      $onUpdated: function $onUpdated(handler) {
-        return _this3.__onUpdated.push(handler);
-      },
-      $onBeforeUnmount: function $onBeforeUnmount(handler) {
-        return _this3.__onBeforeUnmount.push(handler);
-      },
-      $onUnmounted: function $onUnmounted(handler) {
-        return _this3.__onUnmounted.push(handler);
-      }
-    });
-    return ctx;
-  };
-
-  _proto.render = function render() {
-    return this.renderFunction(this.getComponentContext());
-  };
-
-  _proto.emit = function emit(name, data) {
-    if (!this.el) return;
-    this.$el.trigger(name, data);
-  };
-
-  _proto.attachEvents = function attachEvents() {
-    var $el = this.$el;
-    if (!this.__eventHandlers) return;
-
-    this.__eventHandlers.forEach(function (_ref2) {
-      var eventName = _ref2.eventName,
-          handler = _ref2.handler;
-      $el.on(eventNameToColonCase(eventName), handler);
-    });
-
-    this.__onceEventHandlers.forEach(function (_ref3) {
-      var eventName = _ref3.eventName,
-          handler = _ref3.handler;
-      $el.once(eventNameToColonCase(eventName), handler);
-    });
-  };
-
-  _proto.detachEvents = function detachEvents() {
-    var $el = this.$el;
-    if (!this.__eventHandlers) return;
-
-    this.__eventHandlers.forEach(function (_ref4) {
-      var eventName = _ref4.eventName,
-          handler = _ref4.handler;
-      $el.on(eventNameToColonCase(eventName), handler);
-    });
-
-    this.__onceEventHandlers.forEach(function (_ref5) {
-      var eventName = _ref5.eventName,
-          handler = _ref5.handler;
-      $el.once(eventNameToColonCase(eventName), handler);
-    });
-  };
-
-  _proto.startUpdateQueue = function startUpdateQueue() {
-    var _this4 = this;
-
-    var window = getWindow();
-    if (this.__requestAnimationFrameId) return;
-
-    var update = function update() {
-      _this4.hook('onBeforeUpdate');
-
-      var tree = _this4.render(); // Make Dom
-
-
-      if (tree) {
-        var newVNode = vdom(tree, _this4, false);
-        _this4.vnode = patch(_this4.vnode, newVNode);
-      }
-    };
-
-    this.__requestAnimationFrameId = window.requestAnimationFrame(function () {
-      if (_this4.__updateIsPending) update();
-      var resolvers = [].concat(_this4.__updateQueue);
-      _this4.__updateQueue = [];
-      _this4.__updateIsPending = false;
-      window.cancelAnimationFrame(_this4.__requestAnimationFrameId);
-      delete _this4.__requestAnimationFrameId;
-      delete _this4.__updateIsPending;
-      resolvers.forEach(function (resolver) {
-        return resolver();
-      });
-      resolvers = [];
-    });
-  };
-
-  _proto.tick = function tick(callback) {
-    var _this5 = this;
-
-    return new Promise(function (resolve) {
-      function resolver() {
-        resolve();
-        if (callback) callback();
-      }
-
-      _this5.__updateQueue.push(resolver);
-
-      _this5.startUpdateQueue();
-    });
-  };
-
-  _proto.update = function update(callback) {
-    var _this6 = this;
-
-    if (this.__destroyed) return new Promise(function () {});
-    return new Promise(function (resolve) {
-      var resolver = function resolver() {
-        resolve();
-        if (callback) callback();
-      };
-
-      _this6.__updateIsPending = true;
-
-      _this6.__updateQueue.push(resolver);
-
-      _this6.startUpdateQueue();
-    });
-  };
-
-  _proto.setState = function setState(callback) {
-    return this.update(callback);
-  };
-
-  _proto.f7ready = function f7ready(callback) {
-    var _this7 = this;
-
-    if (this.f7.initialized) {
-      callback(this.f7);
-      return;
-    }
-
-    this.f7.once('init', function () {
-      callback(_this7.f7);
-    });
-  };
-
-  _proto.mount = function mount(mountMethod) {
-    this.hook('onBeforeMount', this.$el);
-    if (this.styleEl) $('head').append(this.styleEl);
-    if (mountMethod) mountMethod(this.el);
-    this.hook('onMounted', this.$el);
-  };
-
-  _proto.destroy = function destroy() {
-    if (this.__destroyed) return;
-    var window = getWindow();
-    this.hook('onBeforeUnmount');
-    if (this.styleEl) $(this.styleEl).remove();
-    this.detachEvents();
-    this.hook('onUnmounted'); // Delete component instance
-
-    if (this.el && this.el.f7Component) {
-      this.el.f7Component = null;
-      delete this.el.f7Component;
-    } // Patch with empty node
-
-
-    if (this.vnode) {
-      this.vnode = patch(this.vnode, {
-        sel: this.vnode.sel,
-        data: {}
-      });
-    } // Clear update queue
-
-
-    window.cancelAnimationFrame(this.__requestAnimationFrameId);
-    this.__updateQueue = [];
-    this.__eventHandlers = [];
-    this.__onceEventHandlers = [];
-    this.__onBeforeMount = [];
-    this.__onMounted = [];
-    this.__onBeforeUpdate = [];
-    this.__onUpdated = [];
-    this.__onBeforeUnmount = [];
-    this.__onUnmounted = []; // Delete all props
-
-    deleteProps(this);
-    this.__destroyed = true;
-  };
-
-  _proto.hook = function hook(name) {
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-
-    if (this.__destroyed) return;
-    this["__" + name].forEach(function (handler) {
-      handler.apply(void 0, args);
-    });
-  };
-
-  return Component;
-}();
-
-export default Component;

package/esm/modules/component/parse-component.js

@@ -1,70 +0,0 @@
-import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { id } from '../../shared/utils';
-
-function parseComponent(componentString) {
-  var window = getWindow();
-  var document = getDocument();
-  var componentId = id();
-  var callbackCreateName = "f7_component_create_callback_" + componentId; // Template
-
-  var template;
-  var hasTemplate = componentString.match(/<template([ ]?)([a-z0-9-]*)>/);
-
-  if (hasTemplate) {
-    template = componentString.split(/<template[ ]?[a-z0-9-]*>/).filter(function (item, index) {
-      return index > 0;
-    }).join('<template>').split('</template>').filter(function (item, index, arr) {
-      return index < arr.length - 1;
-    }).join('</template>').replace(/{{#raw}}([ \n]*)<template/g, '{{#raw}}<template').replace(/\/template>([ \n]*){{\/raw}}/g, '/template>{{/raw}}').replace(/([ \n])<template/g, '$1{{#raw}}<template').replace(/\/template>([ \n])/g, '/template>{{/raw}}$1');
-  } // Parse Styles
-
-
-  var style = null;
-
-  if (componentString.indexOf('<style>') >= 0) {
-    style = componentString.split('<style>')[1].split('</style>')[0];
-  }
-
-  if (componentString.indexOf('<style scoped>') >= 0) {
-    style = componentString.split('<style scoped>')[1].split('</style>')[0];
-  } // Parse Script
-
-
-  var scriptContent;
-
-  if (componentString.indexOf('<script>') >= 0) {
-    var scripts = componentString.split('<script>');
-    scriptContent = scripts[scripts.length - 1].split('</script>')[0].trim();
-  } else {
-    scriptContent = 'return () => {return $render}';
-  }
-
-  if (!scriptContent || !scriptContent.trim()) scriptContent = 'return () => {return $render}'; // Parse Template
-
-  if (template) {
-    scriptContent = scriptContent.replace('$render', "function ($$ctx) {\n          var $ = $$ctx.$$;\n          var $h = $$ctx.$h;\n          var $root = $$ctx.$root;\n          var $f7 = $$ctx.$f7;\n          var $f7route = $$ctx.$f7route;\n          var $f7router = $$ctx.$f7router;\n          var $theme = $$ctx.$theme;\n          var $update = $$ctx.$update;\n          var $store = $$ctx.$store;\n\n          return $h`" + template + "`\n        }\n        ").replace(/export default/g, 'return');
-  } // Execute Script
-
-
-  scriptContent = "window." + callbackCreateName + " = function () {" + scriptContent + "}"; // Insert Script El
-
-  var scriptEl = document.createElement('script');
-  scriptEl.innerHTML = scriptContent;
-  $('head').append(scriptEl);
-  var component = window[callbackCreateName](); // Remove Script El
-
-  $(scriptEl).remove();
-  window[callbackCreateName] = null;
-  delete window[callbackCreateName]; // Assign Style
-
-  if (style) {
-    component.style = style;
-  } // Component ID
-
-
-  component.id = componentId;
-  return component;
-}
-
-export default parseComponent;

package/esm/modules/resize/resize.js

@@ -1,64 +0,0 @@
-import { getWindow, getDocument } from 'ssr-window';
-import { getDevice } from '../../shared/get-device';
-export default {
-  name: 'resize',
-  create: function create() {
-    var app = this;
-
-    app.getSize = function () {
-      if (!app.el) return {
-        width: 0,
-        height: 0,
-        left: 0,
-        top: 0
-      };
-      var offset = app.$el.offset();
-      var _ref = [app.el.offsetWidth, app.el.offsetHeight, offset.left, offset.top],
-          width = _ref[0],
-          height = _ref[1],
-          left = _ref[2],
-          top = _ref[3];
-      app.width = width;
-      app.height = height;
-      app.left = left;
-      app.top = top;
-      return {
-        width: width,
-        height: height,
-        left: left,
-        top: top
-      };
-    };
-  },
-  on: {
-    init: function init() {
-      var app = this;
-      var window = getWindow(); // Get Size
-
-      app.getSize(); // Emit resize
-
-      window.addEventListener('resize', function () {
-        app.emit('resize');
-      }, false); // Emit orientationchange
-
-      window.addEventListener('orientationchange', function () {
-        app.emit('orientationchange');
-      });
-    },
-    orientationchange: function orientationchange() {
-      var document = getDocument();
-      var device = getDevice(); // Fix iPad weird body scroll
-
-      if (device.ipad) {
-        document.body.scrollLeft = 0;
-        setTimeout(function () {
-          document.body.scrollLeft = 0;
-        }, 0);
-      }
-    },
-    resize: function resize() {
-      var app = this;
-      app.getSize();
-    }
-  }
-};

package/esm/modules/router/component-loader.js

@@ -1,133 +0,0 @@
-import { merge } from '../../shared/utils';
-export default {
-  name: 'routerComponentLoader',
-  proto: {
-    componentLoader: function componentLoader(component, componentUrl, options, resolve, reject) {
-      if (options === void 0) {
-        options = {};
-      }
-
-      var router = this;
-      var app = router.app;
-      var url = typeof component === 'string' ? component : componentUrl;
-      var compiledUrl = router.replaceRequestUrlParams(url, options);
-
-      function compile(componentFunction) {
-        var context = options.context || {};
-        if (typeof context === 'function') context = context.call(router);else if (typeof context === 'string') {
-          try {
-            context = JSON.parse(context);
-          } catch (err) {
-            reject(err);
-            throw err;
-          }
-        }
-        var componentContext = merge({}, context, {
-          f7route: options.route,
-          f7router: router
-        });
-        var componentProps = merge(options.route ? options.route.params || {} : {}, options.props || {}, options.routeProps || {});
-        var componentEl;
-        var componentRoot;
-
-        if (options.componentOptions && options.componentOptions.el) {
-          componentEl = options.componentOptions.el;
-        }
-
-        if (options.componentOptions && options.componentOptions.root) {
-          componentRoot = options.componentOptions.root;
-        }
-
-        app.component.create(componentFunction, componentProps, {
-          context: componentContext,
-          el: componentEl,
-          root: componentRoot
-        }).then(function (createdComponent) {
-          resolve(createdComponent.el);
-        }).catch(function (err) {
-          reject(err);
-          throw new Error(err);
-        });
-      }
-
-      var cachedComponent;
-
-      if (compiledUrl && router.params.componentCache) {
-        router.cache.components.forEach(function (cached) {
-          if (cached.url === compiledUrl) cachedComponent = cached.component;
-        });
-      }
-
-      if (compiledUrl && cachedComponent) {
-        compile(cachedComponent);
-      } else if (compiledUrl && !cachedComponent) {
-        // Load via XHR
-        if (router.xhrAbortController) {
-          router.xhrAbortController.abort();
-          router.xhrAbortController = false;
-        }
-
-        router.xhrRequest(url, options).then(function (loadedComponent) {
-          var parsedComponent = app.component.parse(loadedComponent);
-
-          if (router.params.componentCache) {
-            router.cache.components.push({
-              url: compiledUrl,
-              component: parsedComponent
-            });
-          }
-
-          compile(parsedComponent);
-        }).catch(function (err) {
-          reject();
-          throw err;
-        });
-      } else {
-        compile(component);
-      }
-    },
-    modalComponentLoader: function modalComponentLoader(_temp) {
-      var _ref = _temp === void 0 ? {} : _temp,
-          component = _ref.component,
-          componentUrl = _ref.componentUrl,
-          options = _ref.options,
-          resolve = _ref.resolve,
-          reject = _ref.reject;
-
-      var router = this;
-      router.componentLoader(component, componentUrl, options, function (el) {
-        resolve(el);
-      }, reject);
-    },
-    tabComponentLoader: function tabComponentLoader(_temp2) {
-      var _ref2 = _temp2 === void 0 ? {} : _temp2,
-          component = _ref2.component,
-          componentUrl = _ref2.componentUrl,
-          options = _ref2.options,
-          resolve = _ref2.resolve,
-          reject = _ref2.reject;
-
-      var router = this;
-      router.componentLoader(component, componentUrl, options, function (el) {
-        resolve(el);
-      }, reject);
-    },
-    pageComponentLoader: function pageComponentLoader(_temp3) {
-      var _ref3 = _temp3 === void 0 ? {} : _temp3,
-          component = _ref3.component,
-          componentUrl = _ref3.componentUrl,
-          options = _ref3.options,
-          resolve = _ref3.resolve,
-          reject = _ref3.reject;
-
-      var router = this;
-      router.componentLoader(component, componentUrl, options, function (el, newOptions) {
-        if (newOptions === void 0) {
-          newOptions = {};
-        }
-
-        resolve(el, newOptions);
-      }, reject);
-    }
-  }
-};