framework7 7.0.0-beta.2 → 7.0.0-beta.20

package/framework7-types.d.ts

@@ -33,6 +33,7 @@ import { AreaChart } from './components/area-chart/area-chart';
 import { Autocomplete } from './components/autocomplete/autocomplete';
 import { Badge } from './components/badge/badge';
 import { Block } from './components/block/block';
+import { Breadcrumbs } from './components/breadcrumbs/breadcrumbs';
 import { Button } from './components/button/button';
 import { Calendar } from './components/calendar/calendar';
 import { Card } from './components/card/card';
@@ -151,6 +152,9 @@ declare module './components/app/app-class' {
   interface Framework7Class<Events> extends Block.AppMethods{}
   interface Framework7Parameters extends Block.AppParams{}
   interface Framework7Events extends Block.AppEvents{}
+  interface Framework7Class<Events> extends Breadcrumbs.AppMethods{}
+  interface Framework7Parameters extends Breadcrumbs.AppParams{}
+  interface Framework7Events extends Breadcrumbs.AppEvents{}
   interface Framework7Class<Events> extends Button.AppMethods{}
   interface Framework7Parameters extends Button.AppParams{}
   interface Framework7Events extends Button.AppEvents{}
@@ -359,5 +363,5 @@ export {
   StoreParameters,
   createStore,
 };
-export { Accordion, Actions, Appbar, AreaChart, Autocomplete, Badge, Block, Button, Calendar, Card, Checkbox, Chip, ColorPicker, ContactsList, DataTable, Dialog, Elevation, Fab, Form, Gauge, Grid, Icon, InfiniteScroll, Input, Lazy, Link, List, ListIndex, LoginScreen, Menu, Messagebar, Messages, Modal, Navbar, Notification, Page, Panel, PhotoBrowser, Picker, PieChart, Popover, Popup, Preloader, Progressbar, PullToRefresh, Radio, Range, Searchbar, Sheet, Skeleton, SmartSelect, Sortable, Statusbar, Stepper, Subnavbar, Swipeout, Swiper, Tabs, TextEditor, Timeline, Toast, Toggle, Toolbar, Tooltip, TouchRipple, Treeview, Typography, View, VirtualList }
+export { Accordion, Actions, Appbar, AreaChart, Autocomplete, Badge, Block, Breadcrumbs, Button, Calendar, Card, Checkbox, Chip, ColorPicker, ContactsList, DataTable, Dialog, Elevation, Fab, Form, Gauge, Grid, Icon, InfiniteScroll, Input, Lazy, Link, List, ListIndex, LoginScreen, Menu, Messagebar, Messages, Modal, Navbar, Notification, Page, Panel, PhotoBrowser, Picker, PieChart, Popover, Popup, Preloader, Progressbar, PullToRefresh, Radio, Range, Searchbar, Sheet, Skeleton, SmartSelect, Sortable, Statusbar, Stepper, Subnavbar, Swipeout, Swiper, Tabs, TextEditor, Timeline, Toast, Toggle, Toolbar, Tooltip, TouchRipple, Treeview, Typography, View, VirtualList }
 export default Framework7;

package/framework7.css

@@ -1,13 +1,13 @@
 /**
- * Framework7 7.0.0-beta.2
+ * Framework7 7.0.0-beta.20
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: April 15, 2022
  */
 
 /*====================
@@ -93,8 +93,8 @@
   --f7-bars-bg-color: #f7f7f8;
   --f7-bars-bg-color-rgb: 247, 247, 248;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-bars-text-color: #fff;
 }
 .ios {
@@ -103,8 +103,8 @@
   --f7-text-color: #000;
   --f7-bars-border-color: rgba(0, 0, 0, 0.25);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-text-color: #fff;
   --f7-bars-bg-color: #121212;
   --f7-bars-bg-color-rgb: 22, 22, 22;
@@ -116,8 +116,8 @@
   --f7-bars-border-color: transparent;
   --f7-text-color: #212121;
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-text-color: rgba(255, 255, 255, 0.87);
   --f7-bars-bg-color: #202020;
 }
@@ -127,8 +127,8 @@
   --f7-text-color: #000;
   --f7-bars-border-color: rgba(0, 0, 0, 0.2);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-text-color: #fff;
   --f7-bars-bg-color: #202020;
   --f7-bars-border-color: rgba(255, 255, 255, 0.1);
@@ -612,11 +612,11 @@ body {
   line-height: var(--f7-line-height);
   color: var(--f7-text-color);
 }
-.theme-dark body,
-body.theme-dark {
+.dark body,
+body.dark {
   background: #000;
 }
-.theme-dark {
+.dark {
   color: var(--f7-text-color);
 }
 .framework7-root {
@@ -774,8 +774,8 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 6px;
   --f7-page-bg-color: #efeff4;
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-page-bg-color: #000;
 }
 .md {
@@ -786,8 +786,8 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 8px;
   --f7-page-bg-color: #fff;
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-page-bg-color: #121212;
 }
 .aurora {
@@ -798,11 +798,11 @@ html.device-full-viewport body {
   --f7-page-title-padding-vertical: 7px;
   --f7-page-bg-color: #f3f4f6;
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-page-bg-color: #121212;
 }
-.theme-dark {
+.dark {
   --f7-page-master-border-color: rgba(255, 255, 255, 0.2);
 }
 .pages {
@@ -1695,8 +1695,8 @@ html.device-full-viewport body {
   */
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
 }
 .md {
@@ -1721,8 +1721,8 @@ html.device-full-viewport body {
   --f7-navbar-link-line-height: 48px;
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
 }
 .aurora {
@@ -1747,8 +1747,8 @@ html.device-full-viewport body {
   --f7-navbar-link-line-height: inherit;
   --f7-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
 }
 .navbars,
@@ -2800,8 +2800,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0.01;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
 }
 .md {
@@ -2830,8 +2830,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
 }
 .aurora {
@@ -2858,8 +2858,8 @@ html.device-full-viewport body {
   --f7-tabbar-label-letter-spacing: 0;
   --f7-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
 }
 .toolbar {
@@ -3116,6 +3116,14 @@ html.device-full-viewport body {
   height: var(--f7-tabbar-icon-size);
   line-height: var(--f7-tabbar-icon-size);
 }
+.tabbar .tab-link-highlight,
+.tabbar-labels .tab-link-highlight {
+  position: absolute;
+  height: 2px;
+  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
+  transition-duration: 300ms;
+  left: 0;
+}
 .tabbar-labels {
   --f7-toolbar-height: var(--f7-tabbar-labels-height);
 }
@@ -3376,14 +3384,6 @@ html.device-full-viewport body {
   overflow: hidden;
   position: relative;
 }
-.md .tabbar .tab-link-highlight,
-.md .tabbar-labels .tab-link-highlight {
-  position: absolute;
-  height: 2px;
-  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-  transition-duration: 300ms;
-  left: 0;
-}
 .md .tabbar-labels .tab-link,
 .md .tabbar-labels .link {
   padding-top: 7px;
@@ -3408,14 +3408,6 @@ html.device-full-viewport body {
   align-items: center;
   margin: 0;
 }
-.aurora .tabbar .tab-link-highlight,
-.aurora .tabbar-labels .tab-link-highlight {
-  position: absolute;
-  height: 2px;
-  background: var(--f7-tabbar-link-active-border-color, var(--f7-theme-color));
-  transition-duration: 300ms;
-  left: 0;
-}
 .aurora .tabbar .toolbar-inner,
 .aurora .tabbar-labels .toolbar-inner {
   padding-left: 0;
@@ -3763,8 +3755,8 @@ html.device-full-viewport body {
   --f7-block-title-large-text-color: #000;
   --f7-block-strong-bg-color: #fff;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-block-title-text-color: #fff;
   --f7-block-strong-border-color: rgba(255, 255, 255, 0.15);
   --f7-block-title-medium-text-color: #fff;
@@ -3790,8 +3782,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.45);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.45);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.55);
   --f7-block-strong-text-color: #fff;
@@ -3815,8 +3807,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.54);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
 }
@@ -3839,8 +3831,8 @@ html.device-full-viewport body {
   --f7-block-header-text-color: rgba(0, 0, 0, 0.6);
   --f7-block-footer-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-block-header-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-footer-text-color: rgba(255, 255, 255, 0.54);
   --f7-block-strong-text-color: #fff;
@@ -4209,8 +4201,8 @@ html.device-full-viewport body {
   --f7-menu-list-selected-text-color: var(--f7-theme-color);
   --f7-menu-list-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-list-button-border-color: rgba(255, 255, 255, 0.15);
   --f7-list-bg-color: #1c1c1d;
   --f7-list-border-color: rgba(255, 255, 255, 0.15);
@@ -4255,8 +4247,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.45);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.45);
 }
-.ios .theme-dark,
-.ios.theme-dark {
+.ios .dark,
+.ios.dark {
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-header-text-color: rgba(255, 255, 255, 0.55);
   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.55);
@@ -4301,8 +4293,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.54);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.54);
 }
-.md .theme-dark,
-.md.theme-dark {
+.md .dark,
+.md.dark {
   --f7-list-item-divider-text-color: #fff;
   --f7-list-group-title-text-color: #fff;
   --f7-list-link-pressed-bg-color: rgba(255, 255, 255, 0.05);
@@ -4346,8 +4338,8 @@ html.device-full-viewport body {
   --f7-list-item-divider-text-color: rgba(0, 0, 0, 0.6);
   --f7-list-group-title-text-color: rgba(0, 0, 0, 0.6);
 }
-.aurora .theme-dark,
-.aurora.theme-dark {
+.aurora .dark,
+.aurora.dark {
   --f7-list-item-text-text-color: rgba(255, 255, 255, 0.54);
   --f7-list-item-after-text-color: rgba(255, 255, 255, 0.54);
   --f7-list-item-footer-text-color: rgba(255, 255, 255, 0.54);
@@ -5302,8 +5294,8 @@ li.list-group-title,
   --f7-segmented-strong-button-active-text-color: #000;
   --f7-segmented-strong-button-active-bg-color: #fff;
 }
-:root .theme-dark,
-:root.theme-dark {
+:root .dark,
+:root.dark {
   --f7-segmented-strong-bg-color: rgba(255, 255, 255, 0.1);
   --f7-segmented-strong-button-pressed-bg-color: rgba(255, 255, 255, 0.04);
   --f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.02);
@@ -5785,7 +5777,7 @@ input[type='reset'].button {
   --f7-touch-ripple-white: rgba(255, 255, 255, 0.3);
   --f7-touch-ripple-color: var(--f7-touch-ripple-black);
 }
-.theme-dark {
+.dark {
   --f7-touch-ripple-color: var(--f7-touch-ripple-white);
 }
 .ripple,

package/framework7.d.ts

@@ -27,6 +27,7 @@ import { AreaChart } from './components/area-chart/area-chart';
 import { Autocomplete } from './components/autocomplete/autocomplete';
 import { Badge } from './components/badge/badge';
 import { Block } from './components/block/block';
+import { Breadcrumbs } from './components/breadcrumbs/breadcrumbs';
 import { Button } from './components/button/button';
 import { Calendar } from './components/calendar/calendar';
 import { Card } from './components/card/card';
@@ -145,6 +146,9 @@ declare module './types/components/app/app-class' {
   interface Framework7Class<Events> extends Block.AppMethods{}
   interface Framework7Parameters extends Block.AppParams{}
   interface Framework7Events extends Block.AppEvents{}
+  interface Framework7Class<Events> extends Breadcrumbs.AppMethods{}
+  interface Framework7Parameters extends Breadcrumbs.AppParams{}
+  interface Framework7Events extends Breadcrumbs.AppEvents{}
   interface Framework7Class<Events> extends Button.AppMethods{}
   interface Framework7Parameters extends Button.AppParams{}
   interface Framework7Events extends Button.AppEvents{}

package/framework7.esm.js

@@ -1,42 +1,42 @@
 /**
- * Framework7 7.0.0-beta.2
+ * Framework7 7.0.0-beta.20
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2021 Vladimir Kharlampidi
+ * Copyright 2014-2022 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: October 4, 2021
+ * Released on: April 15, 2022
  */
 
-import $ from './shared/dom7';
-import Framework7 from './components/app/app-class';
-import request from './shared/request';
-import * as utils from './shared/utils';
-import { getSupport } from './shared/get-support';
-import { getDevice } from './shared/get-device';
-import DeviceModule from './modules/device/device';
-import SupportModule from './modules/support/support';
-import UtilsModule from './modules/utils/utils';
-import ResizeModule from './modules/resize/resize';
-import RequestModule from './modules/request/request';
-import TouchModule from './modules/touch/touch';
-import ClicksModule from './modules/clicks/clicks';
-import RouterModule from './modules/router/router';
-import RouterComponentLoaderModule from './modules/router/component-loader';
-import ComponentModule, { Component, $jsx } from './modules/component/component';
-import HistoryModule from './modules/history/history';
-import ServiceWorkerModule from './modules/service-worker/service-worker';
-import StoreModule, { createStore } from './modules/store/store';
-import Statusbar from './components/statusbar/statusbar';
-import View from './components/view/view';
-import Navbar from './components/navbar/navbar';
-import Toolbar from './components/toolbar/toolbar';
-import Subnavbar from './components/subnavbar/subnavbar';
-import TouchRipple from './components/touch-ripple/touch-ripple';
-import Modal from './components/modal/modal';
-import Router from './modules/router/router-class';
+import $ from './shared/dom7.js';
+import Framework7 from './components/app/app-class.js';
+import request from './shared/request.js';
+import * as utils from './shared/utils.js';
+import { getSupport } from './shared/get-support.js';
+import { getDevice } from './shared/get-device.js';
+import DeviceModule from './modules/device/device.js';
+import SupportModule from './modules/support/support.js';
+import UtilsModule from './modules/utils/utils.js';
+import ResizeModule from './modules/resize/resize.js';
+import RequestModule from './modules/request/request.js';
+import TouchModule from './modules/touch/touch.js';
+import ClicksModule from './modules/clicks/clicks.js';
+import RouterModule from './modules/router/router.js';
+import RouterComponentLoaderModule from './modules/router/component-loader.js';
+import ComponentModule, { Component, $jsx } from './modules/component/component.js';
+import HistoryModule from './modules/history/history.js';
+import ServiceWorkerModule from './modules/service-worker/service-worker.js';
+import StoreModule, { createStore } from './modules/store/store.js';
+import Statusbar from './components/statusbar/statusbar.js';
+import View from './components/view/view.js';
+import Navbar from './components/navbar/navbar.js';
+import Toolbar from './components/toolbar/toolbar.js';
+import Subnavbar from './components/subnavbar/subnavbar.js';
+import TouchRipple from './components/touch-ripple/touch-ripple.js';
+import Modal from './components/modal/modal.js';
+import Router from './modules/router/router-class.js';
 Router.use([RouterComponentLoaderModule]);
 Framework7.use([DeviceModule, SupportModule, UtilsModule, ResizeModule, RequestModule, TouchModule, ClicksModule, RouterModule, HistoryModule, ComponentModule, ServiceWorkerModule, StoreModule, Statusbar, View, Navbar, Toolbar, Subnavbar, TouchRipple, Modal]);
 export { Component, $jsx, $ as Dom7, request, utils, getDevice, getSupport, createStore };