3.0.0-beta.14 release

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 # Change Log
 
+# [v3.0.0-beta.14](https://github.com/framework7io/framework7/compare/v3.0.0-beta.12...v3.0.0-beta.14) - June 24, 2018
+  * Core
+    * Elevation
+      * Elevation moved to separate component
+      * Added support for `elevation-hover-$n` class to add elevation on hover
+      * Added support for `elevation-pressed-$n` class to add elevation on press
+      * Added support for `elevation-transiton` class to add transition between elevation states
+  * Phenome
+    * Icon
+      * Added support for tooltip with `tooltip` prop
+
 # [v3.0.0-beta.12](https://github.com/framework7io/framework7/compare/v3.0.0-beta.11...v3.0.0-beta.12) - June 22, 2018
   * Core
     * Tooltip

packages/core/components/elevation/elevation-ios.less

@@ -0,0 +1,3 @@
+.ios {
+  @import (multiple) '../../less/colors-ios.less';
+}

packages/core/components/elevation/elevation-md.less

@@ -0,0 +1,5 @@
+.md {
+  @import (multiple) '../../less/colors-md.less';
+}
+
+

packages/core/components/elevation/elevation.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'elevation',
+};

packages/core/components/elevation/elevation.less

@@ -0,0 +1,58 @@
+/* === Elevation === */
+@elevations: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24;
+.elevation-loop(@array, @i: 1) when (@i =< length(@array)) {
+  @value: extract(@array, @i);
+  .elevation-@{value} {
+    .elevation(@value) !important;
+  }
+  .elevation-loop(@array, (@i + 1));
+}
+.elevation-loop(@elevations);
+
+.elevation-hover-loop(@array, @i: 1) when (@i =< length(@array)) {
+  @value: extract(@array, @i);
+  .device-desktop .elevation-hover-@{value}:hover {
+    .elevation(@value) !important;
+  }
+  .elevation-hover-loop(@array, (@i + 1));
+}
+.elevation-hover-loop(@elevations);
+
+.elevation-pressed-loop(@array, @i: 1) when (@i =< length(@array)) {
+  @value: extract(@array, @i);
+  .active-state.elevation-pressed-@{value},
+  .device-desktop .active-state.elevation-pressed-@{value} {
+    .elevation(@value) !important;
+  }
+  .elevation-pressed-loop(@array, (@i + 1));
+}
+.elevation-pressed-loop(@elevations);
+
+.elevation-transition-100 {
+  transition-duration: 100ms;
+  transition-property: box-shadow;
+}
+.elevation-transition,
+.elevation-transition-200 {
+  transition-duration: 200ms;
+  transition-property: box-shadow;
+}
+.elevation-transition-300 {
+  transition-duration: 300ms;
+  transition-property: box-shadow;
+}
+.elevation-transition-400 {
+  transition-duration: 400ms;
+  transition-property: box-shadow;
+}
+.elevation-transition-500 {
+  transition-duration: 500ms;
+  transition-property: box-shadow;
+}
+
+& when (@includeIosTheme) {
+  @import url('./elevation-ios.less');
+}
+& when (@includeMdTheme) {
+  @import url('./elevation-md.less');
+}

packages/core/components/typography/typography.less

@@ -87,81 +87,6 @@
   width: 100% !important;
 }
 
-// Elevation
-.elevation-1 {
-  .elevation(1) !important;
-}
-.elevation-2 {
-  .elevation(2) !important;
-}
-.elevation-3 {
-  .elevation(3) !important;
-}
-.elevation-4 {
-  .elevation(4) !important;
-}
-.elevation-5 {
-  .elevation(5) !important;
-}
-.elevation-6 {
-  .elevation(6) !important;
-}
-.elevation-7 {
-  .elevation(7) !important;
-}
-.elevation-8 {
-  .elevation(8) !important;
-}
-.elevation-9 {
-  .elevation(9) !important;
-}
-.elevation-10 {
-  .elevation(10) !important;
-}
-.elevation-11 {
-  .elevation(11) !important;
-}
-.elevation-12 {
-  .elevation(12) !important;
-}
-.elevation-13 {
-  .elevation(13) !important;
-}
-.elevation-14 {
-  .elevation(14) !important;
-}
-.elevation-15 {
-  .elevation(15) !important;
-}
-.elevation-16 {
-  .elevation(16) !important;
-}
-.elevation-17 {
-  .elevation(17) !important;
-}
-.elevation-18 {
-  .elevation(18) !important;
-}
-.elevation-19 {
-  .elevation(19) !important;
-}
-.elevation-20 {
-  .elevation(20) !important;
-}
-.elevation-21 {
-  .elevation(21) !important;
-}
-.elevation-22 {
-  .elevation(22) !important;
-}
-.elevation-23 {
-  .elevation(23) !important;
-}
-.elevation-24 {
-  .elevation(24) !important;
-}
-
-
 & when (@includeIosTheme) {
   @import url('./typography-ios.less');
 }

packages/core/framework7.esm.bundle.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 3.0.0-beta.12
+ * Framework7 3.0.0-beta.14
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 22, 2018
+ * Released on: June 24, 2018
  */
 
 import Template7 from 'template7';
@@ -88,6 +88,7 @@ import Autocomplete from './components/autocomplete/autocomplete';
 import Tooltip from './components/tooltip/tooltip';
 import Gauge from './components/gauge/gauge';
 import Vi from './components/vi/vi';
+import Elevation from './components/elevation/elevation';
 import Typography from './components/typography/typography';
 if ("es" !== 'es') {
   if (typeof window !== 'undefined') {
@@ -163,6 +164,7 @@ Framework7.use([
   Tooltip,
   Gauge,
   Vi,
+  Elevation,
   Typography]);
 
 export { Template7, $ as Dom7, Request, Utils, Device, Support };

packages/core/framework7.esm.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 3.0.0-beta.12
+ * Framework7 3.0.0-beta.14
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 22, 2018
+ * Released on: June 24, 2018
  */
 
 import Template7 from 'template7';

packages/core/framework7.less

@@ -1,13 +1,13 @@
 /**
- * Framework7 3.0.0-beta.12
+ * Framework7 3.0.0-beta.14
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 22, 2018
+ * Released on: June 24, 2018
  */
 
 @import (reference) './less/mixins.less';

packages/core/js/framework7.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 3.0.0-beta.12
+ * Framework7 3.0.0-beta.14
  * Full featured mobile HTML framework for building iOS & Android apps
  * http://framework7.io/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 22, 2018
+ * Released on: June 24, 2018
  */
 
 (function (global, factory) {
@@ -31163,6 +31163,10 @@
     },
   };
 
+  var Elevation = {
+    name: 'elevation',
+  };
+
   var Typography = {
     name: 'typography',
   };
@@ -31241,6 +31245,7 @@
     Tooltip$1,
     Gauge$1,
     Vi,
+    Elevation,
     Typography
   ]);
 

packages/core/less/mixins.less

@@ -384,6 +384,9 @@
   }
 }
 .elevation(@level:1) {
+  & when (@level = 0) {
+    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
+  }
   & when (@level = 1) {
     box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
   }

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.14",
   "description": "Full featured mobile HTML framework for building iOS & Android apps",
   "main": "js/framework7.js",
   "jsnext:main": "framework7.esm.js",

packages/react/components/icon.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import Utils from '../utils/utils';
 import Mixins from '../utils/mixins';
+import __reactComponentWatch from '../runtime-helpers/react-component-watch.js';
 import __reactComponentSlots from '../runtime-helpers/react-component-slots.js';
 import __reactComponentSetProps from '../runtime-helpers/react-component-set-props.js';
 
 class F7Icon extends React.Component {
   constructor(props, context) {
     super(props, context);
+    this.__reactRefs = {};
   }
 
   get sizeComputed() {
@@ -105,6 +107,9 @@ class F7Icon extends React.Component {
       style
     } = props;
     return React.createElement('i', {
+      ref: __reactNode => {
+        this.__reactRefs['el'] = __reactNode;
+      },
       id: id,
       style: Utils.extend({
         fontSize: self.sizeComputed
@@ -113,10 +118,50 @@ class F7Icon extends React.Component {
     }, self.iconTextComputed, this.slots['default']);
   }
 
+  componentWillUnmount() {
+    const self = this;
+
+    if (self.f7Tooltip && self.f7Tooltip.destroy) {
+      self.f7Tooltip.destroy();
+      self.f7Tooltip = null;
+      delete self.f7Tooltip;
+    }
+  }
+
+  componentDidMount() {
+    const self = this;
+    const el = self.refs.el;
+    if (!el) return;
+    const {
+      tooltip
+    } = self.props;
+    if (!tooltip) return;
+    self.$f7ready(f7 => {
+      self.f7Tooltip = f7.tooltip.create({
+        targetEl: el,
+        text: tooltip
+      });
+    });
+  }
+
   get slots() {
     return __reactComponentSlots(this.props);
   }
 
+  get refs() {
+    return this.__reactRefs;
+  }
+
+  set refs(refs) {}
+
+  componentDidUpdate(prevProps, prevState) {
+    __reactComponentWatch(this, 'props.tooltip', prevProps, prevState, newText => {
+      const self = this;
+      if (!newText || !self.f7Tooltip) return;
+      self.f7Tooltip.setText(newText);
+    });
+  }
+
 }
 
 __reactComponentSetProps(F7Icon, Object.assign({
@@ -130,6 +175,7 @@ __reactComponentSetProps(F7Icon, Object.assign({
   ifIos: String,
   ios: String,
   md: String,
+  tooltip: String,
   size: [String, Number]
 }, Mixins.colorProps));
 

packages/react/components/link.js

@@ -191,7 +191,7 @@ class F7Link extends React.Component {
 
       if (tooltip) {
         self.f7Tooltip = f7.tooltip.create({
-          targetEl: self.refs.el,
+          targetEl: el,
           text: tooltip
         });
       }

packages/react/framework7-react.esm.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 React 3.0.0-beta.12
+ * Framework7 React 3.0.0-beta.14
  * Build full featured iOS & Android apps using Framework7 & React
  * http://framework7.io/react/
  *
  * Copyright 2014-2018 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: June 22, 2018
+ * Released on: June 24, 2018
  */
 
 import F7AccordionContent from './components/accordion-content';