framework7 7.1.5 → 8.0.0-beta.2

package/components/actions/actions.d.ts

@@ -35,8 +35,8 @@ export namespace Actions {
     text: string;
     /** HTML string of icon */
     icon?: string;
-    /** Enables bold button text */
-    bold?: boolean;
+    /** Enables strong button text */
+    strong?: boolean;
     /** Button color, one of default colors */
     color?: string;
     /** Button background color, one of default colors */

package/components/actions/actions.js

@@ -20,7 +20,6 @@ export default {
   static: {
     Actions
   },
-
   create() {
     const app = this;
     app.actions = ModalMethods({
@@ -29,13 +28,11 @@ export default {
       defaultSelector: '.actions-modal.modal-in'
     });
   },
-
   clicks: {
     '.actions-open': function openActions($clickedEl, data) {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.actions.open(data.actions, data.animate, $clickedEl);
     },
@@ -43,7 +40,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.actions.close(data.actions, data.animate, $clickedEl);
     }

package/components/actions/actions.less

@@ -40,11 +40,14 @@
     --f7-actions-button-height: var(--f7-actions-button-height-landscape);
   }
 }
+.actions-backdrop,
+.actions-modal {
+  transition-timing-function: var(--f7-actions-transition-timing-function);
+}
 .actions-group {
   overflow: hidden;
   position: relative;
   margin: var(--f7-actions-group-margin);
-  border-radius: var(--f7-actions-border-radius);
   .hairline(bottom, var(--f7-actions-group-border-color));
   transform: translate3d(0, 0, 0);
   &:last-child {
@@ -61,28 +64,12 @@
   position: relative;
   overflow: hidden;
   text-align: var(--f7-actions-button-text-align);
-  background: var(--f7-actions-bg-color);
-  .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
   .hairline(bottom, var(--f7-actions-button-border-color));
-  &:first-child {
-    border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
-  }
-  &:last-child {
-    .hairline-remove(bottom);
-    border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
-  }
-  &:first-child:last-child {
-    border-radius: var(--f7-actions-border-radius);
-  }
   a {
     text-decoration: none;
     color: inherit;
     display: block;
   }
-  b,
-  &.actions-button-bold {
-    font-weight: 600;
-  }
 }
 .actions-button {
   cursor: pointer;
@@ -132,6 +119,7 @@
   display: flex;
   align-items: center;
   font-size: var(--f7-actions-label-font-size);
+  font-weight: var(--f7-actions-label-font-weight);
   color: var(--f7-actions-label-text-color);
   padding: var(--f7-actions-label-padding);
   justify-content: var(--f7-actions-label-justify-content);
@@ -145,25 +133,13 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
-    border-radius: 0;
-    background: var(--f7-actions-bg-color);
     margin-top: 0;
-    &:first-child {
-      border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
-    }
-    &:last-child {
-      border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
-    }
-    &:first-child:last-child {
-      border-radius: var(--f7-actions-border-radius);
-    }
     &:not(:last-child) {
       margin-bottom: 0;
     }
   }
   .actions-button,
   .actions-label {
-    border-radius: 0 !important;
     background: none;
   }
   .actions-button {
@@ -195,15 +171,9 @@
     font-size: var(--f7-actions-grid-button-font-size);
   }
 }
-.actions-grid .actions-group {
-  .ios-translucent-modals(var(--f7-actions-bg-color-rgb));
-}
 .if-ios-theme({
   @import './actions-ios.less';
 });
 .if-md-theme({
   @import './actions-md.less';
 });
-.if-aurora-theme({
-  @import './actions-aurora.less';
-});

package/components/app/app-class.d.ts

@@ -2,7 +2,6 @@ import { Dom7, Dom7Array } from 'dom7';
 import { Router } from '../../modules/router/router.js';
 import { DeviceParams, Device } from '../../shared/get-device.js';
 import { Support } from '../../shared/get-support.js';
-import { Request } from '../../shared/request.js';
 import { Utils } from '../../shared/utils.js';
 import {
   ComponentClass,
@@ -50,14 +49,14 @@ export interface Framework7Parameters {
   name?: string;
   /** App version. Can be used by other components.. (default 1.0.0) */
   version?: string;
-  /** App theme. Can be ios, md, aurora or auto. In case of auto it will use iOS theme for iOS devices, Aurora theme for desktop device running in Electron environment, and MD theme for all other devices.. (default auto) */
+  /** App theme. Can be ios, md or auto. In case of auto it will use iOS theme for iOS devices and MD theme for all other devices.. (default 'auto') */
   theme?: string;
   /** App language. Can be used by other components. By default equal to the current browser/webview language (i.e. navigator.language).. */
   language?: string;
   /** Array with default routes to all views.. (default []) */
   routes?: Router.RouteParameters[];
-  /** Enables auto dark mode */
-  autoDarkMode?: boolean;
+  /** Enables dark mode, can be `false` (disabled), `true` (enabled) or `auto` (based on system preferences) */
+  darkMode?: boolean | string;
   /** Lazy modules path */
   lazyModulesPath?: string;
   /** By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with init() when you need it.. (default true) */
@@ -68,6 +67,8 @@ export interface Framework7Parameters {
   iosTranslucentBars?: boolean;
   /** Enable translucent effect (blur background) on modals (Dialog, Popover, Actions) for iOS theme (on iOS devices) (by default enabled) */
   iosTranslucentModals?: boolean;
+  /** Object with app colors where `primary` color (key) defines main app color theme */
+  colors?: object;
   /** userAgent string. Required for browser/device detection when rendered on server-side */
   userAgent?: string;
   /** Required for current route detection when rendered on server-side */
@@ -119,7 +120,7 @@ export interface Framework7Plugin {
 export interface Framework7Events {
   /** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
   init: () => void;
-  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkMode` enabled */
+  /** Event will be fired on device preferred color scheme change. It has effect only when `darkMode` is set to `auto` */
   darkModeChange: (isDark: boolean) => void;
   /** Event will be fired when app goes online */
   online: () => void;
@@ -146,9 +147,9 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   $el: Dom7Array;
   /** Boolean property indicating app is in RTL layout or not */
   rtl: boolean;
-  /** Current app theme. Can be md, ios or aurora */
+  /** Current app theme. Can be 'md' or 'ios' */
   theme: string;
-  /** Indicates whether the dark mode active or not. This property has effect only when `autoDarkMode` enabled */
+  /** Indicates whether the dark mode active or not */
   darkMode: boolean;
   /** Object with app root data passed on intialization */
   data: any;
@@ -162,10 +163,12 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   $: Dom7;
   /** App parameters */
   params: Framework7Parameters;
-  /** Enables auto dark mode detection */
-  enableAutoDarkMode(): void;
-  /** Disables auto dark mode detection */
-  disableAutoDarkMode(): void;
+  /** Object with colors you have passed in params.colors */
+  colors: any;
+  /** Sets primary color theme */
+  setColorTheme(hexColor: string): void;
+  /** Enable/disable dark mode, accepts `false`, `true` or `auto` */
+  setDarkMode(mode: boolean | string): void;
   /** Initialize app. In case you disabled auto initialization with init: false parameter */
   init(): void;
   /** Load module */
@@ -184,7 +187,6 @@ declare class Framework7 implements Framework7 {
   static getSupport: () => Support;
   static device: Device;
   static support: Support;
-  static request: Request;
   static utils: Utils;
   static Events: Events;
   static Component: ComponentClass;

package/components/app/app-class.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-underscore-dangle */
+
 import { getWindow, getDocument } from 'ssr-window';
 import { extend, nextFrame } from '../../shared/utils.js';
 import { getDevice } from '../../shared/get-device.js';
@@ -10,32 +11,31 @@ import ModalMethods from '../../shared/modal-methods.js';
 import $ from '../../shared/dom7.js';
 import loadModule from './load-module.js';
 import $jsx from '../../shared/$jsx.js';
-
 class Framework7 extends Framework7Class {
   constructor(params) {
     if (params === void 0) {
       params = {};
     }
-
-    super(params); // eslint-disable-next-line
-
+    super(params);
+    // eslint-disable-next-line
     if (Framework7.instance && typeof window !== 'undefined') {
       throw new Error("Framework7 is already initialized and can't be initialized more than once");
     }
-
     const device = getDevice({
       userAgent: params.userAgent || undefined
     });
     const support = getSupport();
-    const passedParams = extend({}, params); // App Instance
+    const passedParams = extend({}, params);
 
+    // App Instance
     const app = this;
     app.device = device;
     app.support = support;
     const w = getWindow();
     const d = getDocument();
-    Framework7.instance = app; // Default
+    Framework7.instance = app;
 
+    // Default
     const defaults = {
       version: '1.0.0',
       id: 'io.framework7.myapp',
@@ -47,17 +47,36 @@ class Framework7 extends Framework7Class {
       lazyModulesPath: null,
       initOnDeviceReady: true,
       init: true,
-      autoDarkMode: false,
+      darkMode: false,
       iosTranslucentBars: true,
       iosTranslucentModals: true,
       component: undefined,
       componentUrl: undefined,
       userAgent: null,
-      url: null
-    }; // Extend defaults with modules params
+      url: null,
+      colors: {
+        primary: '#007aff',
+        red: '#ff3b30',
+        green: '#4cd964',
+        blue: '#2196f3',
+        pink: '#ff2d55',
+        yellow: '#ffcc00',
+        orange: '#ff9500',
+        purple: '#9c27b0',
+        deeppurple: '#673ab7',
+        lightblue: '#5ac8fa',
+        teal: '#009688',
+        lime: '#cddc39',
+        deeporange: '#ff6b22',
+        white: '#ffffff',
+        black: '#000000'
+      }
+    };
 
-    app.useModulesParams(defaults); // Extend defaults with passed params
+    // Extend defaults with modules params
+    app.useModulesParams(defaults);
 
+    // Extend defaults with passed params
     app.params = extend(defaults, params);
     extend(app, {
       // App Id
@@ -74,27 +93,30 @@ class Framework7 extends Framework7Class {
       theme: function getTheme() {
         if (app.params.theme === 'auto') {
           if (device.ios) return 'ios';
-          if (device.desktop && device.electron) return 'aurora';
           return 'md';
         }
-
         return app.params.theme;
       }(),
       // Initially passed parameters
       passedParams,
-      online: w.navigator.onLine
+      online: w.navigator.onLine,
+      colors: app.params.colors,
+      darkMode: app.params.darkMode
     });
-    if (params.store) app.params.store = params.store; // Save Root
+    if (params.store) app.params.store = params.store;
 
+    // Save Root
     if (app.$el && app.$el[0]) {
       app.$el[0].f7 = app;
-    } // Install Modules
-
+    }
 
-    app.useModules(); // Init Store
+    // Install Modules
+    app.useModules();
 
-    app.initStore(); // Init
+    // Init Store
+    app.initStore();
 
+    // Init
     if (app.params.init) {
       if (device.cordova && app.params.initOnDeviceReady) {
         $(d).on('deviceready', () => {
@@ -103,47 +125,55 @@ class Framework7 extends Framework7Class {
       } else {
         app.init();
       }
-    } // Return app instance
-
+    }
 
+    // Return app instance
     return app;
   }
-
+  setColorTheme(color) {
+    if (!color) return;
+    const app = this;
+    app.colors.primary = color;
+    app.setColors();
+  }
+  setColors() {
+    const app = this;
+    const document = getDocument();
+    if (!app.colorsStyleEl) {
+      app.colorsStyleEl = document.createElement('style');
+      document.head.appendChild(app.colorsStyleEl);
+    }
+    app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
+  }
   mount(rootEl) {
     const app = this;
     const window = getWindow();
     const document = getDocument();
     const $rootEl = $(rootEl || app.params.el).eq(0);
     app.$el = $rootEl;
-
     if (app.$el && app.$el[0]) {
       app.el = app.$el[0];
       app.el.f7 = app;
       app.rtl = $rootEl.css('direction') === 'rtl';
-    } // Auto Dark Mode
-
+    }
 
+    // Auto Dark Mode
     const DARK = '(prefers-color-scheme: dark)';
     const LIGHT = '(prefers-color-scheme: light)';
     app.mq = {};
-
     if (window.matchMedia) {
       app.mq.dark = window.matchMedia(DARK);
       app.mq.light = window.matchMedia(LIGHT);
     }
-
     app.colorSchemeListener = function colorSchemeListener(_ref) {
       let {
         matches,
         media
       } = _ref;
-
       if (!matches) {
         return;
       }
-
       const html = document.querySelector('html');
-
       if (media === DARK) {
         html.classList.add('dark');
         app.darkMode = true;
@@ -154,32 +184,26 @@ class Framework7 extends Framework7Class {
         app.emit('darkModeChange', false);
       }
     };
-
     app.emit('mount');
   }
-
   initStore() {
     const app = this;
-
     if (typeof app.params.store !== 'undefined' && app.params.store.__store) {
       app.store = app.params.store;
     } else {
       app.store = app.createStore(app.params.store);
     }
   }
-
   enableAutoDarkMode() {
     const window = getWindow();
     const document = getDocument();
     if (!window.matchMedia) return;
     const app = this;
     const html = document.querySelector('html');
-
     if (app.mq.dark && app.mq.light) {
       app.mq.dark.addListener(app.colorSchemeListener);
       app.mq.light.addListener(app.colorSchemeListener);
     }
-
     if (app.mq.dark && app.mq.dark.matches) {
       html.classList.add('dark');
       app.darkMode = true;
@@ -190,7 +214,6 @@ class Framework7 extends Framework7Class {
       app.emit('darkModeChange', false);
     }
   }
-
   disableAutoDarkMode() {
     const window = getWindow();
     if (!window.matchMedia) return;
@@ -198,7 +221,16 @@ class Framework7 extends Framework7Class {
     if (app.mq.dark) app.mq.dark.removeListener(app.colorSchemeListener);
     if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
   }
-
+  setDarkMode(mode) {
+    const app = this;
+    if (mode === 'auto') {
+      app.enableAutoDarkMode();
+    } else {
+      app.disableAutoDarkMode();
+      $('html')[mode ? 'addClass' : 'removeClass']('dark');
+      app.darkMode = mode;
+    }
+  }
   initAppComponent(callback) {
     const app = this;
     app.router.componentLoader(app.params.component, app.params.componentUrl, {
@@ -213,25 +245,23 @@ class Framework7 extends Framework7Class {
       if (callback) callback();
     }, () => {});
   }
-
   init(rootEl) {
     const app = this;
+    app.setColors();
     app.mount(rootEl);
-
     const init = () => {
       if (app.initialized) return;
-      app.$el.addClass('framework7-initializing'); // RTL attr
+      app.$el.addClass('framework7-initializing');
 
+      // RTL attr
       if (app.rtl) {
         $('html').attr('dir', 'rtl');
-      } // Auto Dark Mode
-
-
-      if (app.params.autoDarkMode) {
-        app.enableAutoDarkMode();
-      } // Watch for online/offline state
+      }
 
+      // Auto Dark Mode
+      app.setDarkMode(app.params.darkMode);
 
+      // Watch for online/offline state
       const window = getWindow();
       window.addEventListener('offline', () => {
         app.online = false;
@@ -242,31 +272,31 @@ class Framework7 extends Framework7Class {
         app.online = true;
         app.emit('online');
         app.emit('connection', true);
-      }); // Root class
+      });
 
-      app.$el.addClass('framework7-root'); // Theme class
+      // Root class
+      app.$el.addClass('framework7-root');
 
-      $('html').removeClass('ios md aurora').addClass(app.theme); // iOS Translucent
+      // Theme class
+      $('html').removeClass('ios md').addClass(app.theme);
 
+      // iOS Translucent
       const device = app.device;
-
       if (app.params.iosTranslucentBars && app.theme === 'ios' && device.ios) {
         $('html').addClass('ios-translucent-bars');
       }
-
       if (app.params.iosTranslucentModals && app.theme === 'ios' && device.ios) {
         $('html').addClass('ios-translucent-modals');
-      } // Init class
-
+      }
 
+      // Init class
       nextFrame(() => {
         app.$el.removeClass('framework7-initializing');
-      }); // Emit, init other modules
-
+      });
+      // Emit, init other modules
       app.initialized = true;
       app.emit('init');
     };
-
     if (app.params.component || app.params.componentUrl) {
       app.initAppComponent(() => {
         init();
@@ -274,64 +304,52 @@ class Framework7 extends Framework7Class {
     } else {
       init();
     }
-
     return app;
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   loadModule() {
     return Framework7.loadModule(...arguments);
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   loadModules() {
     return Framework7.loadModules(...arguments);
   }
-
   getVnodeHooks(hook, id) {
     const app = this;
     if (!app.vnodeHooks || !app.vnodeHooks[hook]) return [];
     return app.vnodeHooks[hook][id] || [];
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   get $() {
     return $;
   }
-
   static get Dom7() {
     return $;
   }
-
   static get $() {
     return $;
   }
-
   static get device() {
     return getDevice();
   }
-
   static get support() {
     return getSupport();
   }
-
   static get Class() {
     return Framework7Class;
   }
-
   static get Events() {
     return EventsClass;
   }
-
 }
-
 Framework7.$jsx = $jsx;
 Framework7.ModalMethods = ModalMethods;
 Framework7.ConstructorMethods = ConstructorMethods;
 Framework7.loadModule = loadModule;
-
 Framework7.loadModules = function loadModules(modules) {
   return Promise.all(modules.map(module => Framework7.loadModule(module)));
 };
-
 export default Framework7;

package/components/app/app-ios.less

@@ -1,8 +1,6 @@
 .ios {
   .md-only,
   .if-md,
-  .aurora-only,
-  .if-aurora,
   .if-not-ios,
   .not-ios {
     display: none !important;

package/components/app/app-md.less

@@ -1,8 +1,6 @@
 .md {
   .ios-only,
   .if-ios,
-  .aurora-only,
-  .if-aurora,
   .if-not-md,
   .not-md {
     display: none !important;