framework7 8.3.3 → 9.0.0-beta.1

package/shared/material-colors.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line
-import { argbFromHex, hexFromArgb, themeFromSourceColor } from './material-color-utils.js';
+import { argbFromHex, hexFromArgb, Hct, SchemeTonalSpot, SchemeVibrant, SchemeMonochrome } from './material-color-utils.js';
 
 /* eslint-disable */
 // prettier-ignore
@@ -24,10 +24,7 @@ function toRGBA(d) {
 }
 
 // prettier-ignore
-function blend(from, to, p) {
-  if (p === void 0) {
-    p = 0.5;
-  }
+function blend(from, to, p = 0.5) {
   const r = Math.round;
   from = from.trim();
   to = to.trim();
@@ -42,34 +39,108 @@ function blend(from, to, p) {
 }
 /* eslint-enable */
 
-export const materialColors = function (hexColor) {
-  if (hexColor === void 0) {
-    hexColor = '';
+let monochromeCached = null;
+const cachedColors = {};
+export const materialColors = (hexColor = '', colorScheme = 'default') => {
+  const cacheKey = `${hexColor}-${colorScheme}`;
+  if (cachedColors[cacheKey]) {
+    return cachedColors[cacheKey];
+  }
+  if (monochromeCached && colorScheme.includes('monochrome')) {
+    const defaultColors = materialColors(hexColor, colorScheme === 'monochrome' ? 'default' : 'vibrant');
+    cachedColors[cacheKey] = {
+      light: {
+        ...defaultColors.light,
+        ...monochromeCached.light
+      },
+      dark: {
+        ...defaultColors.dark,
+        ...monochromeCached.dark
+      }
+    };
+    return cachedColors[cacheKey];
+  }
+  const sourceColor = argbFromHex(`#${hexColor.replace('#', '')}`);
+  let lightScheme;
+  let darkScheme;
+  const hctColor = Hct.fromInt(sourceColor);
+  if (colorScheme === 'default') {
+    lightScheme = new SchemeTonalSpot(hctColor, false, 0, '2025');
+    darkScheme = new SchemeTonalSpot(hctColor, true, 0, '2025');
+  }
+  if (colorScheme === 'vibrant') {
+    lightScheme = new SchemeVibrant(hctColor, false, 0, '2025');
+    darkScheme = new SchemeVibrant(hctColor, true, 0, '2025');
+  }
+  if (colorScheme.includes('monochrome')) {
+    lightScheme = new SchemeMonochrome(hctColor, false, 0, '2025');
+    darkScheme = new SchemeMonochrome(hctColor, true, 0, '2025');
   }
-  const theme = themeFromSourceColor(argbFromHex(`#${hexColor.replace('#', '')}`));
-  [0.05, 0.08, 0.11, 0.12, 0.14].forEach((amount, index) => {
-    theme.schemes.light.props[`surface${index + 1}`] = argbFromHex(blend(hexFromArgb(theme.schemes.light.props.surface), hexFromArgb(theme.schemes.light.props.primary), amount));
-    theme.schemes.dark.props[`surface${index + 1}`] = argbFromHex(blend(hexFromArgb(theme.schemes.dark.props.surface), hexFromArgb(theme.schemes.dark.props.primary), amount));
+  const getColorName = name => {
+    let newName = name;
+    if (name === 'surface_dim') newName = 'surface_variant';
+    if (name === 'surface_container_low') newName = 'surface_1';
+    if (name === 'surface_container') newName = 'surface_2';
+    if (name === 'surface_container_high') newName = 'surface_3';
+    if (name === 'surface_container_highest') newName = 'surface_4';
+    return newName;
+  };
+  const theme = {
+    light: {},
+    dark: {}
+  };
+  lightScheme.colors.allColors.forEach(color => {
+    const name = getColorName(color.name);
+    const argb = color.getArgb(lightScheme);
+    theme.light[name] = argb;
   });
+  darkScheme.colors.allColors.forEach(color => {
+    const name = getColorName(color.name);
+    const argb = color.getArgb(darkScheme);
+    theme.dark[name] = argb;
+  });
+  theme.light.surface_5 = argbFromHex(blend(hexFromArgb(theme.light.surface_4), hexFromArgb(theme.light.primary), 0.05));
+  theme.dark.surface_5 = argbFromHex(blend(hexFromArgb(theme.dark.surface_4), hexFromArgb(theme.dark.primary), 0.05));
   const name = n => {
-    return n.split('').map(char => char.toUpperCase() === char && char !== '-' && char !== '7' ? `-${char.toLowerCase()}` : char).join('');
+    return n.replace(/_/g, '-');
   };
-  const shouldSkip = prop => {
-    const skip = ['tertiary', 'shadow', 'scrim', 'error', 'background'];
-    return skip.filter(v => prop.toLowerCase().includes(v)).length > 0;
+  const shouldKeep = prop => {
+    const foreground = ['inverse_primary', 'primary', 'on_primary', 'primary_container', 'on_primary_container', 'secondary', 'on_secondary', 'secondary_container', 'on_secondary_container', 'outline', 'outline_variant'];
+    const background = ['on_surface', 'on_surface_variant', 'inverse_on_surface', 'inverse_surface', 'surface', 'surface_variant', 'surface_1', 'surface_2', 'surface_3', 'surface_4', 'surface_5'];
+    const keep = colorScheme === 'default' ? [...foreground, ...background] : colorScheme === 'vibrant' ? [...foreground, ...background] : background;
+    return keep.includes(prop);
   };
   const light = {};
   const dark = {};
-  Object.keys(theme.schemes.light.props).forEach(prop => {
-    if (shouldSkip(prop)) return;
-    light[name(`--f7-md-${prop}`)] = hexFromArgb(theme.schemes.light.props[prop]);
+  Object.keys(theme.light).forEach(prop => {
+    if (!shouldKeep(prop)) return;
+    light[name(`--f7-md-${prop}`)] = hexFromArgb(theme.light[prop]);
   });
-  Object.keys(theme.schemes.dark.props).forEach(prop => {
-    if (shouldSkip(prop)) return;
-    dark[name(`--f7-md-${prop}`)] = hexFromArgb(theme.schemes.dark.props[prop]);
+  Object.keys(theme.dark).forEach(prop => {
+    if (!shouldKeep(prop)) return;
+    dark[name(`--f7-md-${prop}`)] = hexFromArgb(theme.dark[prop]);
   });
-  return {
+  if (colorScheme.includes('monochrome')) {
+    monochromeCached = {
+      light,
+      dark
+    };
+    const defaultColors = materialColors(hexColor, colorScheme === 'monochrome' ? 'default' : 'vibrant');
+    cachedColors[cacheKey] = {
+      light: {
+        ...defaultColors.light,
+        ...light
+      },
+      dark: {
+        ...defaultColors.dark,
+        ...dark
+      }
+    };
+    return cachedColors[cacheKey];
+  }
+  cachedColors[cacheKey] = {
     light,
     dark
   };
+  return cachedColors[cacheKey];
 };

package/shared/modal-methods.js

@@ -1,10 +1,7 @@
 import $ from './dom7.js';
 import { extend } from './utils.js';
 import ConstructorMethods from './constructor-methods.js';
-export default function ModalMethods(parameters) {
-  if (parameters === void 0) {
-    parameters = {};
-  }
+export default function ModalMethods(parameters = {}) {
   const {
     defaultSelector,
     constructor: Constructor,
@@ -44,10 +41,7 @@ export default function ModalMethods(parameters) {
       }
       return instance.open(animate);
     },
-    close(el, animate, targetEl) {
-      if (el === void 0) {
-        el = defaultSelector;
-      }
+    close(el = defaultSelector, animate, targetEl) {
       let $el = $(el);
       if (!$el.length) return undefined;
       if ($el.length > 1) {

package/shared/utils.js

@@ -5,13 +5,7 @@ export function uniqueNumber() {
   uniqueNum += 1;
   return uniqueNum;
 }
-export function id(mask, map) {
-  if (mask === void 0) {
-    mask = 'xxxxxxxxxx';
-  }
-  if (map === void 0) {
-    map = '0123456789abcdef';
-  }
+export function id(mask = 'xxxxxxxxxx', map = '0123456789abcdef') {
   const length = map.length;
   return mask.replace(/x/g, () => map[Math.floor(Math.random() * length)]);
 }
@@ -60,10 +54,7 @@ export function cancelAnimationFrame(frameId) {
   const window = getWindow();
   return window.cancelAnimationFrame(frameId);
 }
-export function nextTick(callback, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
+export function nextTick(callback, delay = 0) {
   return setTimeout(callback, delay);
 }
 export function nextFrame(callback) {
@@ -93,10 +84,7 @@ export function parseUrlQuery(url) {
   }
   return query;
 }
-export function getTranslate(el, axis) {
-  if (axis === void 0) {
-    axis = 'x';
-  }
+export function getTranslate(el, axis = 'x') {
   const window = getWindow();
   let matrix;
   let curTransform;
@@ -132,10 +120,7 @@ export function getTranslate(el, axis) {
   }
   return curTransform || 0;
 }
-export function serializeObject(obj, parents) {
-  if (parents === void 0) {
-    parents = [];
-  }
+export function serializeObject(obj, parents = []) {
   if (typeof obj === 'string') return obj;
   const resultArray = [];
   const separator = '&';
@@ -181,16 +166,12 @@ export function serializeObject(obj, parents) {
       resultArray.push(`${varName(prop)}=${varValue(obj[prop])}`);
     } else if (obj[prop] === '') resultArray.push(varName(prop)); // eslint-disable-line
   });
-
   return resultArray.join(separator);
 }
 export function isObject(o) {
   return typeof o === 'object' && o !== null && o.constructor && o.constructor === Object;
 }
-export function merge() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
+export function merge(...args) {
   const to = args[0];
   args.splice(0, 1);
   const from = args;
@@ -209,13 +190,10 @@ export function merge() {
   }
   return to;
 }
-export function extend() {
+export function extend(...args) {
   let deep = true;
   let to;
   let from;
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
   if (typeof args[0] === 'boolean') {
     deep = args[0];
     to = args[1];
@@ -329,34 +307,40 @@ const getShadeTintColors = rgb => {
     tint
   };
 };
-export function colorThemeCSSProperties() {
+export function colorThemeCSSProperties(...args) {
   let hex;
   let rgb;
-  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    args[_key3] = arguments[_key3];
-  }
+  let mdColorScheme;
   if (args.length === 1) {
     hex = args[0];
     rgb = colorHexToRgb(hex);
+  } else if (args.length === 2) {
+    hex = args[0];
+    rgb = colorHexToRgb(hex);
+    mdColorScheme = args[1] || 'default';
   } else if (args.length === 3) {
     rgb = args;
     hex = colorRgbToHex(...rgb);
+  } else if (args.length === 4) {
+    rgb = args.slice(0, 3);
+    hex = colorRgbToHex(...rgb);
+    mdColorScheme = args[3] || 'default';
   }
   if (!rgb) return {};
   const {
     light,
     dark
-  } = materialColors(hex);
+  } = materialColors(hex, mdColorScheme);
   const shadeTintIos = getShadeTintColors(rgb);
   const shadeTintMdLight = getShadeTintColors(colorHexToRgb(light['--f7-md-primary']));
   const shadeTintMdDark = getShadeTintColors(colorHexToRgb(dark['--f7-md-primary']));
   Object.keys(light).forEach(key => {
-    if (key.includes('surface-')) {
+    if (key.includes('surface-') && !key.includes('-rgb')) {
       light[`${key}-rgb`] = colorHexToRgb(light[key]);
     }
   });
   Object.keys(dark).forEach(key => {
-    if (key.includes('surface-')) {
+    if (key.includes('surface-') && !key.includes('-rgb')) {
       dark[`${key}-rgb`] = colorHexToRgb(dark[key]);
     }
   });
@@ -403,20 +387,14 @@ export function bindMethods(instance, obj) {
     instance[key] = obj[key];
   });
 }
-export function flattenArray() {
+export function flattenArray(...args) {
   const arr = [];
-  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    args[_key4] = arguments[_key4];
-  }
   args.forEach(arg => {
     if (Array.isArray(arg)) arr.push(...flattenArray(...arg));else arr.push(arg);
   });
   return arr;
 }
-export function colorThemeCSSStyles(colors) {
-  if (colors === void 0) {
-    colors = {};
-  }
+export function colorThemeCSSStyles(colors = {}, mdColorScheme = 'default') {
   const stringifyObject = obj => {
     let res = '';
     Object.keys(obj).forEach(key => {
@@ -424,12 +402,12 @@ export function colorThemeCSSStyles(colors) {
     });
     return res;
   };
-  const colorVars = colorThemeCSSProperties(colors.primary);
+  const colorVars = colorThemeCSSProperties(colors.primary, mdColorScheme);
   const primary = [`:root{`, stringifyObject(colorVars.light), `--swiper-theme-color:var(--f7-theme-color);`, ...Object.keys(colors).map(colorName => `--f7-color-${colorName}: ${colors[colorName]};`), `}`, `.dark{`, stringifyObject(colorVars.dark), `}`, `.ios, .ios .dark{`, stringifyObject(colorVars.ios), '}', `.md, .md .dark{`, stringifyObject(colorVars.md), '}'].join('');
   const restVars = {};
   Object.keys(colors).forEach(colorName => {
     const colorValue = colors[colorName];
-    restVars[colorName] = colorThemeCSSProperties(colorValue);
+    restVars[colorName] = colorThemeCSSProperties(colorValue, mdColorScheme);
   });
 
   // rest