5.6.0 release

framework7io · Apr 18, 2020 · 29cafb7 · 29cafb7
1 parent 8ce6a81
commit 29cafb7
Show file tree

Hide file tree

Showing 82 changed files with 1,069 additions and 193 deletions.
diff --git a/BACKERS.md b/BACKERS.md
@@ -50,7 +50,7 @@
       </a>
     </td>
     <td align="center" valign="middle">
-      <a href="https://cooltechzone.com/roku-vpn" target="_blank">
+      <a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
       </a>
     </td>

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,32 @@
 
 # Change Log
 
+# [v5.6.0](https://github.com/framework7io/framework7/compare/v5.5.5...v5.6.0) - April 18, 2020
+  * Core
+    * App
+      * Added new app instance boolean property `app.darkTheme`. This property has effect only when `autoDarkTheme` enabled and indicates whether the dark theme active or not
+      * Added new app instance event `darkThemeChange`. It has effect only when `autoDarkTheme` enabled and fires on device preferred color scheme change
+    * Checkbox
+      * Fixed styles in RTL mode
+    * Device
+      * Added `nwjs` property that is true when app running under NW.js environment
+    * Router
+      * New `pageTabShow`/`page:tabshow` and `pageTabHide`/`page:tabhide` page events. These events fires on page's parent View-Tab show/hide
+    * Segmented
+      * Added animation for "strong" segmented active button
+      * **BREAKING CHANGE** - now "strong" segmented requires new `<span class="segmented-highlight">` element
+  * React/Vue/Svelte
+    * Input
+      * Added support for `inpumode` input attribute
+    * ListInput
+      * Added support for `inpumode` input attribute
+      * Fixed issue with `errorMessage` in Svelte
+    * ListItem
+      * Added `tabLink` and `tabLinkActive` props to make list item as a tab link
+    * Page
+      * * New `pageTabShow`/`page:tabshow` and `pageTabHide`/`page:tabhide` page events. These events fires on page's parent View-Tab show/hide
+  * Minor fixes
+
 # [v5.5.5](https://github.com/framework7io/framework7/compare/v5.5.4...v5.5.5) - April 10, 2020
   * Core
     * Modals (Popup, Actions, Popover, Login Screen, etc.)

diff --git a/README.md b/README.md
@@ -66,7 +66,7 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
       </a>
     </td>
     <td align="center" valign="middle">
-      <a href="https://cooltechzone.com/roku-vpn" target="_blank">
+      <a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
       </a>
     </td>

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -10,6 +10,11 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
 
 <table>
   <tr>
+    <td align="center" valign="middle">
+      <a href="https://www.wfmbuddy.com/" target="_blank">
+        <img width="160" src="https://framework7.io/i/sponsors/wfmbuddy.png">
+      </a>
+    </td>
     <td align="center" valign="middle">
       <a href="https://privicy.com/" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/privicy.png">
@@ -25,6 +30,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/sparheld.jpg">
       </a>
     </td>
+    <td align="center" valign="middle">
+      <a href="https://infatica.io" target="_blank">
+        <img width="160" src="https://framework7.io/i/sponsors/infatica.svg">
+      </a>
+    </td>
+  </tr>
+  <tr>
     <td align="center" valign="middle">
       <a href="https://www.thoriumbuilder.com/" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/thorium.png">
@@ -35,8 +47,6 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/appvalley.jpg">
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" valign="middle">
       <a href="http://mytommy.com" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/tommy.png">
@@ -47,6 +57,18 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/securcom.png">
       </a>
     </td>
+    <td align="center" valign="middle">
+      <a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
+        <img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td align="center" valign="middle">
+      <a href="https://www.bonus.com.de/" target="_blank">
+        <img width="160" src="https://framework7.io/i/sponsors/bonusfinder.png">
+      </a>
+    </td>
     <td align="center" valign="middle">
       <a href="http://ananyamultitech.com/" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/ananya.png">
@@ -62,13 +84,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/writersperhour.jpg">
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" valign="middle">
       <a href="https://monovm.com/linux-vps/" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/monovm.jpg">
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" valign="middle">
       <a href="https://unicorn.io" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/unicorn.svg">
@@ -89,13 +111,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/usave.png">
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" valign="middle">
       <a href="https://bid4papers.com/write-my-essay.html" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/bid4papers.png">
       </a>
     </td>
+  </tr>
+  <tr>
     <td align="center" valign="middle">
       <a href="https://kidoverse.app" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/kidoverse.png">
@@ -116,16 +138,11 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
         <img width="160" src="https://framework7.io/i/sponsors/blokt.png">
       </a>
     </td>
-  </tr>
-  <tr>
     <td align="center" valign="middle">
       <a href="https://wappler.io/" target="_blank">
         <img width="160" src="https://framework7.io/i/sponsors/wappler.png">
       </a>
     </td>
-    <td></td>
-    <td></td>
-    <td></td>
   </tr>
 </table>
 

diff --git a/packages/core/components/app/app-class.d.ts b/packages/core/components/app/app-class.d.ts
@@ -116,7 +116,15 @@ 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
+  init: () => void
+  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkTheme` enabled */
+  darkThemeChange: (isDark: boolean) => void
+  /** Event will be fired when app goes online */
+  online: () => void
+  /** Event will be fired when app goes offline */
+  offline: () => void
+  /** Event will be fired on network state change */
+  connection: (isOnline: boolean) => void
 }
 
 interface Framework7 extends Framework7Class<Framework7Events> {
@@ -136,6 +144,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
   rtl : boolean
   /** Current app theme. Can be md or ios */
   theme : string
+  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
+  darkTheme : boolean
   /** Object with app root data passed on intialization */
   data : any
   /** Object with app root methods */

diff --git a/packages/core/components/app/app-class.js b/packages/core/components/app/app-class.js
@@ -105,8 +105,12 @@ class Framework7 extends Framework7Class {
       const html = document.querySelector('html');
       if (media === DARK) {
         html.classList.add('theme-dark');
+        app.darkTheme = true;
+        app.emit('darkThemeChange', true);
       } else if (media === LIGHT) {
         html.classList.remove('theme-dark');
+        app.darkTheme = false;
+        app.emit('darkThemeChange', false);
       }
     };
 
@@ -158,8 +162,12 @@ class Framework7 extends Framework7Class {
     }
     if (app.mq.dark && app.mq.dark.matches) {
       html.classList.add('theme-dark');
+      app.darkTheme = true;
+      app.emit('darkThemeChange', true);
     } else if (app.mq.light && app.mq.light.matches) {
       html.classList.remove('theme-dark');
+      app.darkTheme = false;
+      app.emit('darkThemeChange', false);
     }
   }
 

diff --git a/packages/core/components/button/button.less b/packages/core/components/button/button.less
@@ -225,12 +225,16 @@ button {
   --f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
   --f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
   --f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
+  position: relative;
   background: var(--f7-segmented-strong-bg-color);
   border-radius: calc(var(--f7-button-border-radius) + 2px);
   box-shadow: none;
   padding: var(--f7-segmented-strong-padding);
   overflow: hidden;
 
+  .button {
+    z-index: 1;
+  }
   .button,
   .button:first-child,
   .button:last-child {
@@ -246,19 +250,109 @@ button {
   }
   .button.button-active,
   .button.tab-link-active {
-    --f7-button-hover-bg-color: var(--f7-segmented-strong-button-active-bg-color);
-    --f7-button-bg-color: var(--f7-segmented-strong-button-active-bg-color);
+    --f7-button-hover-bg-color: transparent;
+    --f7-button-bg-color: transparent;
     --f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
     --f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
-    --f7-button-box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
+  }
+
+  .segmented-highlight {
+    --f7-segmented-highlight-num: 1;
+    --f7-segmented-highlight-active: 0;
+    --f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
+    --f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
+    --f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
+
+    position: absolute;
+    background-color: var(--f7-segmented-strong-button-active-bg-color);
+    border-radius: var(--f7-button-border-radius);
+    box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
+    left: var(--f7-segmented-strong-padding);
+    top: var(--f7-segmented-strong-padding);
+    height: calc(100% - var(--f7-segmented-strong-padding) * 2);
+    width: var(--f7-segmented-highlight-width);
+    z-index: 0;
+    transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
+    transition: 200ms;
+  }
+}
+
+.segmented-highlight {
+  .button:nth-child(2) ~ & {
+    --f7-segmented-highlight-num: 2;
+  }
+  .button:nth-child(3) ~ & {
+    --f7-segmented-highlight-num: 3;
+  }
+  .button:nth-child(4) ~ & {
+    --f7-segmented-highlight-num: 4;
+  }
+  .button:nth-child(5) ~ & {
+    --f7-segmented-highlight-num: 5;
+  }
+  .button:nth-child(6) ~ & {
+    --f7-segmented-highlight-num: 6;
+  }
+  .button:nth-child(7) ~ & {
+    --f7-segmented-highlight-num: 7;
+  }
+  .button:nth-child(8) ~ & {
+    --f7-segmented-highlight-num: 8;
+  }
+  .button:nth-child(9) ~ & {
+    --f7-segmented-highlight-num: 9;
+  }
+  .button:nth-child(10) ~ & {
+    --f7-segmented-highlight-num: 10;
+  }
+
+  .button-active:nth-child(2) ~ &,
+  .tab-link-active:nth-child(2) ~ & {
+    --f7-segmented-highlight-active: 1;
+  }
+  .button-active:nth-child(3) ~ &,
+  .tab-link-active:nth-child(3) ~ & {
+    --f7-segmented-highlight-active: 2;
+  }
+  .button-active:nth-child(4) ~ &,
+  .tab-link-active:nth-child(4) ~ & {
+    --f7-segmented-highlight-active: 3;
+  }
+  .button-active:nth-child(5) ~ &,
+  .tab-link-active:nth-child(5) ~ & {
+    --f7-segmented-highlight-active: 4;
+  }
+  .button-active:nth-child(6) ~ &,
+  .tab-link-active:nth-child(6) ~ & {
+    --f7-segmented-highlight-active: 5;
+  }
+  .button-active:nth-child(7) ~ &,
+  .tab-link-active:nth-child(7) ~ & {
+    --f7-segmented-highlight-active: 6;
+  }
+  .button-active:nth-child(8) ~ &,
+  .tab-link-active:nth-child(8) ~ & {
+    --f7-segmented-highlight-active: 7;
+  }
+  .button-active:nth-child(9) ~ &,
+  .tab-link-active:nth-child(9) ~ & {
+    --f7-segmented-highlight-active: 8;
+  }
+  .button-active:nth-child(10) ~ &,
+  .tab-link-active:nth-child(10) ~ & {
+    --f7-segmented-highlight-active: 9;
   }
 }
 
+// Round
 .segmented-round,
 .ios .segmented-round-ios,
 .md .segmented-round-md,
-.aurora .segmented-round-aurora{
+.aurora .segmented-round-aurora {
   border-radius: var(--f7-button-height);
+  .segmented-highlight {
+    border-radius: var(--f7-button-height);
+  }
 }
 
 .subnavbar .segmented {