framework7 7.0.8 → 8.0.0-beta.1

package/less/mixins.less

@@ -20,11 +20,6 @@
     @ruleset();
   }
 }
-.if-aurora-theme(@ruleset) {
-  & when (@includeAuroraTheme) {
-    @ruleset();
-  }
-}
 .if-dark-theme(@ruleset) {
   & when(@includeDarkTheme) {
     @ruleset();
@@ -44,9 +39,11 @@
     }
   }
 }
-.aurora-vars(@ruleset) {
-  & when (@includeAuroraTheme) {
-    .aurora {
+.md-color-vars(@ruleset) {
+  & when (@includeMdTheme) {
+    .md,
+    .md .dark,
+    .md [class*='color-'] {
       @ruleset();
     }
   }
@@ -100,59 +97,7 @@
     opacity: 1;
   }
 }
-// No Hairlines
-.no-hairlines() {
-  &.no-hairlines,
-  &.no-hairlines ul,
-  .md &.no-hairlines-md,
-  .md &.no-hairlines-md ul,
-  .ios &.no-hairlines-ios,
-  .ios &.no-hairlines-ios ul,
-  .aurora &.no-hairlines-aurora,
-  .aurora &.no-hairlines-aurora ul {
-    .hairline-remove-top-bottom();
-  }
-  &.no-hairline-top,
-  &.no-hairline-top ul,
-  .md &.no-hairline-top-md,
-  .md &.no-hairline-top-md ul,
-  .ios &.no-hairline-top-ios,
-  .ios &.no-hairline-top-ios ul,
-  .aurora &.no-hairline-top-aurora,
-  .aurora &.no-hairline-top-aurora ul {
-    .hairline-remove(top);
-  }
-  &.no-hairline-bottom,
-  &.no-hairline-bottom ul,
-  .md &.no-hairline-bottom-md,
-  .md &.no-hairline-bottom-md ul,
-  .ios &.no-hairline-bottom-ios,
-  .ios &.no-hairline-bottom-ios ul,
-  .aurora &.no-hairline-bottom-aurora,
-  .aurora &.no-hairline-bottom-aurora ul {
-    .hairline-remove(bottom);
-  }
-}
-.no-hairlines-between() {
-  &.no-hairlines-between,
-  .md &.no-hairlines-between-md,
-  .ios &.no-hairlines-between-ios,
-  .aurora &.no-hairlines-between-aurora {
-    .item-inner,
-    .list-button,
-    .item-divider,
-    .list-group-title,
-    .list-group-title {
-      .hairline-remove(bottom);
-    }
-    &.simple-list li {
-      .hairline-remove(bottom);
-    }
-    &.links-list a {
-      .hairline-remove(bottom);
-    }
-  }
-}
+
 // Hairlines
 .hairline-pseudo(@color, @top, @right, @bottom, @left) {
   content: '';
@@ -274,33 +219,7 @@
   }
 }
 // MD Bars Shadow
-.bar-shadow-bottom(@image) {
-  &:before {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    top: 100%;
-    bottom: auto;
-    height: 8px;
-    pointer-events: none;
-    background: @image;
-  }
-}
-.bar-shadow-top(@image) {
-  &:after {
-    content: '';
-    position: absolute;
-    right: 0;
-    width: 100%;
-    bottom: 100%;
-    height: 8px;
-    top: auto;
-    pointer-events: none;
-    background: @image;
-    transform: translate3d(0, 0, 0);
-  }
-}
+
 .core-icons-font() {
   font-family: 'framework7-core-icons';
   font-weight: normal;

package/less/plugin.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+function base64Encode(file) {
+  // read binary data
+  const bitmap = fs.readFileSync(file);
+  // convert binary data to base64 encoded string
+  return Buffer.from(bitmap).toString('base64');
+}
+module.exports = {
+  install(less, pluginManager, functions) {
+    functions.add('framework7_coreIconsFont', () => {
+      const iconsFontBase64 = base64Encode('./src/core/icons/font/framework7-core-icons.woff');
+      return iconsFontBase64;
+    });
+  }
+};

package/modules/clicks/clicks.js

@@ -1,20 +1,20 @@
 import { getWindow } from 'ssr-window';
 import $ from '../../shared/dom7.js';
 import ViewClass from '../../components/view/view-class.js';
-
 function initClicks(app) {
   function handleClicks(e) {
     const window = getWindow();
     const $clickedEl = $(e.target);
     const $clickedLinkEl = $clickedEl.closest('a');
     const isLink = $clickedLinkEl.length > 0;
-    const url = isLink && $clickedLinkEl.attr('href'); // Check if link is external
+    const url = isLink && $clickedLinkEl.attr('href');
 
+    // Check if link is external
     if (isLink) {
-      if ($clickedLinkEl.is(app.params.clicks.externalLinks) || // eslint-disable-next-line
+      if ($clickedLinkEl.is(app.params.clicks.externalLinks) ||
+      // eslint-disable-next-line
       url && url.indexOf('javascript:') >= 0) {
         const target = $clickedLinkEl.attr('target');
-
         if (url && window.cordova && window.cordova.InAppBrowser && (target === '_system' || target === '_blank')) {
           e.preventDefault();
           window.cordova.InAppBrowser.open(url, target);
@@ -24,70 +24,59 @@ function initClicks(app) {
             url
           });
         }
-
         return;
       }
-    } // Modules Clicks
-
+    }
 
+    // Modules Clicks
     Object.keys(app.modules).forEach(moduleName => {
       const moduleClicks = app.modules[moduleName].clicks;
       if (!moduleClicks) return;
       if (e.preventF7Router) return;
       Object.keys(moduleClicks).forEach(clickSelector => {
         const matchingClickedElement = $clickedEl.closest(clickSelector).eq(0);
-
         if (matchingClickedElement.length > 0) {
           moduleClicks[clickSelector].call(app, matchingClickedElement, matchingClickedElement.dataset(), e);
         }
       });
-    }); // Load Page
+    });
 
+    // Load Page
     let clickedLinkData = {};
-
     if (isLink) {
       e.preventDefault();
       clickedLinkData = $clickedLinkEl.dataset();
     }
+    clickedLinkData.clickedEl = $clickedLinkEl[0];
 
-    clickedLinkData.clickedEl = $clickedLinkEl[0]; // Prevent Router
-
+    // Prevent Router
     if (e.preventF7Router) return;
     if ($clickedLinkEl.hasClass('prevent-router') || $clickedLinkEl.hasClass('router-prevent')) return;
     const validUrl = url && url.length > 0 && url[0] !== '#';
-
     if (validUrl || $clickedLinkEl.hasClass('back')) {
       let view;
-
       if (clickedLinkData.view && clickedLinkData.view === 'current') {
         view = app.views.current;
       } else if (clickedLinkData.view) {
         view = $(clickedLinkData.view)[0].f7View;
       } else {
         view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View;
-
         if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) {
           if (typeof view.params.linksView === 'string') view = $(view.params.linksView)[0].f7View;else if (view.params.linksView instanceof ViewClass) view = view.params.linksView;
         }
       }
-
       if (!view) {
         if (app.views.main) view = app.views.main;
       }
-
       if (!view || !view.router) return;
-
       if ($clickedLinkEl[0].f7RouteProps) {
         clickedLinkData.props = $clickedLinkEl[0].f7RouteProps;
       }
-
       if ($clickedLinkEl.hasClass('back')) view.router.back(url, clickedLinkData);else view.router.navigate(url, clickedLinkData);
     }
   }
-
   app.on('click', handleClicks);
 }
-
 export default {
   name: 'clicks',
   params: {
@@ -101,6 +90,5 @@ export default {
       const app = this;
       initClicks(app);
     }
-
   }
 };

package/modules/component/$h.js

@@ -1,18 +1,15 @@
 import htm from 'htm';
 import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
-
 const h = function (type, props) {
   for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     children[_key - 2] = arguments[_key];
   }
-
   return {
     type,
     props: props || {},
     children: flattenArray(children.filter(child => ignoreChildren.indexOf(child) < 0))
   };
 };
-
 const $h = htm.bind(h);
 export default $h;

package/modules/component/$jsx.js

@@ -1,22 +1,17 @@
 import { flattenArray } from '../../shared/utils.js';
 const ignoreChildren = [false, null, '', undefined];
-
 const $jsx = function (type, props) {
   for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     children[_key - 2] = arguments[_key];
   }
-
   const flatChildren = flattenArray((children || []).filter(child => ignoreChildren.indexOf(child) < 0));
-
   if (type === 'Fragment') {
     return flatChildren;
   }
-
   return {
     type,
     props: props || {},
     children: flatChildren
   };
 };
-
 export default $jsx;

package/modules/component/component-class.js

@@ -6,13 +6,11 @@ import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../.
 import vdom from './vdom.js';
 import patch from './patch.js';
 import $jsx from './$jsx.js';
-
 class Component {
   constructor(app, component, props, _temp) {
     if (props === void 0) {
       props = {};
     }
-
     let {
       el,
       context,
@@ -27,8 +25,7 @@ class Component {
       children: children || [],
       theme: {
         ios: app.theme === 'ios',
-        md: app.theme === 'md',
-        aurora: app.theme === 'aurora'
+        md: app.theme === 'md'
       },
       style: component.style,
       __updateQueue: [],
@@ -41,11 +38,9 @@ class Component {
       __onBeforeUnmount: [],
       __onUnmounted: []
     });
-
     const createComponent = () => {
       return component(this.props, this.getComponentContext(true));
     };
-
     const getRenderFuncion = componentResult => new Promise((resolve, reject) => {
       if (typeof componentResult === 'function') {
         resolve(componentResult);
@@ -59,21 +54,17 @@ class Component {
         reject(new Error('Framework7: Component render function is not a "function" type. Didn\'t you forget to "return $render"?'));
       }
     });
-
     return new Promise((resolve, reject) => {
       const componentResult = createComponent();
       getRenderFuncion(componentResult).then(render => {
         this.renderFunction = render;
         const 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;
@@ -83,52 +74,42 @@ class Component {
           this.mount();
           resolve(this);
           return;
-        } // Make Dom
-
-
+        }
+        // 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(err => {
         reject(err);
       });
     });
   }
-
   on(eventName, handler) {
     if (!this.__eventHandlers) return;
-
     this.__eventHandlers.push({
       eventName,
       handler
     });
   }
-
   once(eventName, handler) {
     if (!this.__eventHandlers) return;
-
     this.__onceEventHandlers.push({
       eventName,
       handler
     });
   }
-
   getComponentRef() {
     const self = this;
     return initialValue => {
@@ -138,17 +119,14 @@ class Component {
         get() {
           return value;
         },
-
         set(v) {
           value = v;
           self.update();
         }
-
       });
       return obj;
     };
   }
-
   getComponentStore() {
     const {
       state,
@@ -162,19 +140,16 @@ class Component {
     $store.getters = new Proxy(_gettersPlain, {
       get: (target, prop) => {
         const obj = target[prop];
-
         const callback = v => {
           obj.value = v;
           this.update();
         };
-
         obj.onUpdated(callback);
         return obj;
       }
     });
     return $store;
   }
-
   getComponentContext(includeHooks) {
     const ctx = {
       $f7route: this.context.f7route,
@@ -209,22 +184,18 @@ class Component {
     });
     return ctx;
   }
-
   render() {
     return this.renderFunction(this.getComponentContext());
   }
-
   emit(name, data) {
     if (!this.el) return;
     this.$el.trigger(name, data);
   }
-
   attachEvents() {
     const {
       $el
     } = this;
     if (!this.__eventHandlers) return;
-
     this.__eventHandlers.forEach(_ref => {
       let {
         eventName,
@@ -232,7 +203,6 @@ class Component {
       } = _ref;
       $el.on(eventNameToColonCase(eventName), handler);
     });
-
     this.__onceEventHandlers.forEach(_ref2 => {
       let {
         eventName,
@@ -241,13 +211,11 @@ class Component {
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
-
   detachEvents() {
     const {
       $el
     } = this;
     if (!this.__eventHandlers) return;
-
     this.__eventHandlers.forEach(_ref3 => {
       let {
         eventName,
@@ -255,7 +223,6 @@ class Component {
       } = _ref3;
       $el.on(eventNameToColonCase(eventName), handler);
     });
-
     this.__onceEventHandlers.forEach(_ref4 => {
       let {
         eventName,
@@ -264,21 +231,19 @@ class Component {
       $el.once(eventNameToColonCase(eventName), handler);
     });
   }
-
   startUpdateQueue() {
     const window = getWindow();
     if (this.__requestAnimationFrameId) return;
-
     const update = () => {
       this.hook('onBeforeUpdate');
-      const tree = this.render(); // Make Dom
+      const tree = this.render();
 
+      // Make Dom
       if (tree) {
         const newVNode = vdom(tree, this, false);
         this.vnode = patch(this.vnode, newVNode);
       }
     };
-
     this.__requestAnimationFrameId = window.requestAnimationFrame(() => {
       if (this.__updateIsPending) update();
       let resolvers = [...this.__updateQueue];
@@ -291,20 +256,16 @@ class Component {
       resolvers = [];
     });
   }
-
   tick(callback) {
     return new Promise(resolve => {
       function resolver() {
         resolve();
         if (callback) callback();
       }
-
       this.__updateQueue.push(resolver);
-
       this.startUpdateQueue();
     });
   }
-
   update(callback) {
     if (this.__destroyed) return new Promise(() => {});
     return new Promise(resolve => {
@@ -312,59 +273,49 @@ class Component {
         resolve();
         if (callback) callback();
       };
-
       this.__updateIsPending = true;
-
       this.__updateQueue.push(resolver);
-
       this.startUpdateQueue();
     });
   }
-
   setState(callback) {
     return this.update(callback);
   }
-
   f7ready(callback) {
     if (this.f7.initialized) {
       callback(this.f7);
       return;
     }
-
     this.f7.once('init', () => {
       callback(this.f7);
     });
   }
-
   mount(mountMethod) {
     this.hook('onBeforeMount', this.$el);
     if (this.styleEl) $('head').append(this.styleEl);
     if (mountMethod) mountMethod(this.el);
     this.hook('onMounted', this.$el);
   }
-
   destroy() {
     if (this.__destroyed) return;
     const window = getWindow();
     this.hook('onBeforeUnmount');
     if (this.styleEl) $(this.styleEl).remove();
     this.detachEvents();
-    this.hook('onUnmounted'); // Delete component instance
-
+    this.hook('onUnmounted');
+    // Delete component instance
     if (this.el && this.el.f7Component) {
       this.el.f7Component = null;
       delete this.el.f7Component;
-    } // Patch with empty node
-
-
+    }
+    // Patch with empty node
     if (this.vnode) {
       this.vnode = patch(this.vnode, {
         sel: this.vnode.sel,
         data: {}
       });
-    } // Clear update queue
-
-
+    }
+    // Clear update queue
     window.cancelAnimationFrame(this.__requestAnimationFrameId);
     this.__updateQueue = [];
     this.__eventHandlers = [];
@@ -374,24 +325,20 @@ class Component {
     this.__onBeforeUpdate = [];
     this.__onUpdated = [];
     this.__onBeforeUnmount = [];
-    this.__onUnmounted = []; // Delete all props
-
+    this.__onUnmounted = [];
+    // Delete all props
     deleteProps(this);
     this.__destroyed = true;
   }
-
   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(handler => {
       handler(...args);
     });
   }
-
 }
-
 Component.$jsx = $jsx;
 export default Component;

package/modules/component/component.d.ts

@@ -20,11 +20,10 @@ export interface ComponentContext {
   $f7router: Router.Router;
   /** Framework7 app instance */
   $f7: Framework7;
-  /** Object with md, ios and aurora boolean properties which indicating current theme.  */
+  /** Object with `md` and `ios` boolean properties which indicating current theme.  */
   $theme: {
     ios: boolean;
     md: boolean;
-    aurora: boolean;
   };
   /** Main app store */
   $store: Store;

package/modules/component/component.js

@@ -2,15 +2,12 @@ import Component from './component-class.js';
 import parseComponent from './parse-component.js';
 import customComponents from './custom-components.js';
 import $jsx from './$jsx.js';
-
 function registerComponent(tagName, component) {
   customComponents[tagName] = component;
 }
-
 function unregisterComponent(tagName) {
   delete customComponents[tagName];
 }
-
 export { Component, $jsx };
 export default {
   name: 'component',
@@ -20,17 +17,14 @@ export default {
     registerComponent,
     unregisterComponent
   },
-
   create() {
     const app = this;
     app.component = {
       registerComponent,
       unregisterComponent,
-
       parse(componentString) {
         return parseComponent(componentString);
       },
-
       create(component, props, _ref) {
         let {
           root,
@@ -45,8 +39,6 @@ export default {
           children
         });
       }
-
     };
   }
-
 };