framework7 6.3.4 → 7.0.0-beta.3

package/framework7.css

@@ -1,5 +1,5 @@
 /**
- * Framework7 6.3.4
+ * Framework7 7.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 16, 2021
+ * Released on: October 5, 2021
  */
 
 /*====================
@@ -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 {
@@ -3763,8 +3763,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 +3790,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 +3815,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 +3839,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 +4209,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 +4255,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 +4301,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 +4346,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);
@@ -4938,7 +4938,6 @@ li.item-divider:before,
 li.list-group-title,
 .list li.list-group-title {
   position: relative;
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
   margin-top: 0;
@@ -5303,8 +5302,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);
@@ -5373,7 +5372,6 @@ li.list-group-title,
 }
 button {
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   width: 100%;
 }
@@ -5383,7 +5381,6 @@ button {
   text-align: center;
   display: flex;
   -webkit-appearance: none;
-     -moz-appearance: none;
           appearance: none;
   background: none;
   margin: 0;
@@ -5788,7 +5785,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,
@@ -5804,8 +5801,7 @@ input[type='reset'].button {
 .actions-button,
 .speed-dial-buttons a {
   -webkit-user-select: none;
-  -moz-user-select: none;
-       user-select: none;
+  user-select: none;
 }
 .ripple-wave {
   left: 0;

package/framework7.d.ts

@@ -1,94 +1,94 @@
 import Dom7 from 'dom7';
-import Framework7 from './types/components/app/app-class'
+import Framework7 from './components/app/app-class'
 
 import request from './types/shared/request';
 import { getSupport } from './types/shared/get-support';
 import { getDevice } from './types/shared/get-device';
 import { Utils } from './types/shared/utils';
 
-import { Clicks as ClicksModule } from './types/modules/clicks/clicks';
-import { Component as ComponentModule } from './types/modules/component/component';
-import { Device as DeviceModule } from './types/modules/device/device';
-import { Request as RequestModule } from './types/modules/request/request';
-import { Resize as ResizeModule } from './types/modules/resize/resize';
-import { Router as RouterModule } from './types/modules/router/router';
-import { ServiceWorker as ServiceWorkerModule } from './types/modules/service-worker/service-worker';
-import { Store as StoreModule } from './types/modules/store/store';
-import { Support as SupportModule } from './types/modules/support/support';
-import { Touch as TouchModule } from './types/modules/touch/touch';
-import { Utils as UtilsModule } from './types/modules/utils/utils';
+import { Clicks as ClicksModule } from './modules/clicks/clicks';
+import { Component as ComponentModule } from './modules/component/component';
+import { Device as DeviceModule } from './modules/device/device';
+import { Request as RequestModule } from './modules/request/request';
+import { Resize as ResizeModule } from './modules/resize/resize';
+import { Router as RouterModule } from './modules/router/router';
+import { ServiceWorker as ServiceWorkerModule } from './modules/service-worker/service-worker';
+import { Store as StoreModule } from './modules/store/store';
+import { Support as SupportModule } from './modules/support/support';
+import { Touch as TouchModule } from './modules/touch/touch';
+import { Utils as UtilsModule } from './modules/utils/utils';
 import { ComponentFunction as Component } from './types/modules/component/component';
 import { StoreObject as Store, StoreParameters, createStore } from './types/modules/store/store';
 
-import { Accordion } from './types/components/accordion/accordion';
-import { Actions } from './types/components/actions/actions';
-import { Appbar } from './types/components/appbar/appbar';
-import { AreaChart } from './types/components/area-chart/area-chart';
-import { Autocomplete } from './types/components/autocomplete/autocomplete';
-import { Badge } from './types/components/badge/badge';
-import { Block } from './types/components/block/block';
-import { Button } from './types/components/button/button';
-import { Calendar } from './types/components/calendar/calendar';
-import { Card } from './types/components/card/card';
-import { Checkbox } from './types/components/checkbox/checkbox';
-import { Chip } from './types/components/chip/chip';
-import { ColorPicker } from './types/components/color-picker/color-picker';
-import { ContactsList } from './types/components/contacts-list/contacts-list';
-import { DataTable } from './types/components/data-table/data-table';
-import { Dialog } from './types/components/dialog/dialog';
-import { Elevation } from './types/components/elevation/elevation';
-import { Fab } from './types/components/fab/fab';
-import { Form } from './types/components/form/form';
-import { Gauge } from './types/components/gauge/gauge';
-import { Grid } from './types/components/grid/grid';
-import { Icon } from './types/components/icon/icon';
-import { InfiniteScroll } from './types/components/infinite-scroll/infinite-scroll';
-import { Input } from './types/components/input/input';
-import { Lazy } from './types/components/lazy/lazy';
-import { Link } from './types/components/link/link';
-import { List } from './types/components/list/list';
-import { ListIndex } from './types/components/list-index/list-index';
-import { LoginScreen } from './types/components/login-screen/login-screen';
-import { Menu } from './types/components/menu/menu';
-import { Messagebar } from './types/components/messagebar/messagebar';
-import { Messages } from './types/components/messages/messages';
-import { Modal } from './types/components/modal/modal';
-import { Navbar } from './types/components/navbar/navbar';
-import { Notification } from './types/components/notification/notification';
-import { Page } from './types/components/page/page';
-import { Panel } from './types/components/panel/panel';
-import { PhotoBrowser } from './types/components/photo-browser/photo-browser';
-import { Picker } from './types/components/picker/picker';
-import { PieChart } from './types/components/pie-chart/pie-chart';
-import { Popover } from './types/components/popover/popover';
-import { Popup } from './types/components/popup/popup';
-import { Preloader } from './types/components/preloader/preloader';
-import { Progressbar } from './types/components/progressbar/progressbar';
-import { PullToRefresh } from './types/components/pull-to-refresh/pull-to-refresh';
-import { Radio } from './types/components/radio/radio';
-import { Range } from './types/components/range/range';
-import { Searchbar } from './types/components/searchbar/searchbar';
-import { Sheet } from './types/components/sheet/sheet';
-import { Skeleton } from './types/components/skeleton/skeleton';
-import { SmartSelect } from './types/components/smart-select/smart-select';
-import { Sortable } from './types/components/sortable/sortable';
-import { Statusbar } from './types/components/statusbar/statusbar';
-import { Stepper } from './types/components/stepper/stepper';
-import { Subnavbar } from './types/components/subnavbar/subnavbar';
-import { Swipeout } from './types/components/swipeout/swipeout';
-import { Swiper } from './types/components/swiper/swiper';
-import { Tabs } from './types/components/tabs/tabs';
-import { TextEditor } from './types/components/text-editor/text-editor';
-import { Timeline } from './types/components/timeline/timeline';
-import { Toast } from './types/components/toast/toast';
-import { Toggle } from './types/components/toggle/toggle';
-import { Toolbar } from './types/components/toolbar/toolbar';
-import { Tooltip } from './types/components/tooltip/tooltip';
-import { TouchRipple } from './types/components/touch-ripple/touch-ripple';
-import { Treeview } from './types/components/treeview/treeview';
-import { Typography } from './types/components/typography/typography';
-import { View } from './types/components/view/view';
-import { VirtualList } from './types/components/virtual-list/virtual-list';
+import { Accordion } from './components/accordion/accordion';
+import { Actions } from './components/actions/actions';
+import { Appbar } from './components/appbar/appbar';
+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 { Button } from './components/button/button';
+import { Calendar } from './components/calendar/calendar';
+import { Card } from './components/card/card';
+import { Checkbox } from './components/checkbox/checkbox';
+import { Chip } from './components/chip/chip';
+import { ColorPicker } from './components/color-picker/color-picker';
+import { ContactsList } from './components/contacts-list/contacts-list';
+import { DataTable } from './components/data-table/data-table';
+import { Dialog } from './components/dialog/dialog';
+import { Elevation } from './components/elevation/elevation';
+import { Fab } from './components/fab/fab';
+import { Form } from './components/form/form';
+import { Gauge } from './components/gauge/gauge';
+import { Grid } from './components/grid/grid';
+import { Icon } from './components/icon/icon';
+import { InfiniteScroll } from './components/infinite-scroll/infinite-scroll';
+import { Input } from './components/input/input';
+import { Lazy } from './components/lazy/lazy';
+import { Link } from './components/link/link';
+import { List } from './components/list/list';
+import { ListIndex } from './components/list-index/list-index';
+import { LoginScreen } from './components/login-screen/login-screen';
+import { Menu } from './components/menu/menu';
+import { Messagebar } from './components/messagebar/messagebar';
+import { Messages } from './components/messages/messages';
+import { Modal } from './components/modal/modal';
+import { Navbar } from './components/navbar/navbar';
+import { Notification } from './components/notification/notification';
+import { Page } from './components/page/page';
+import { Panel } from './components/panel/panel';
+import { PhotoBrowser } from './components/photo-browser/photo-browser';
+import { Picker } from './components/picker/picker';
+import { PieChart } from './components/pie-chart/pie-chart';
+import { Popover } from './components/popover/popover';
+import { Popup } from './components/popup/popup';
+import { Preloader } from './components/preloader/preloader';
+import { Progressbar } from './components/progressbar/progressbar';
+import { PullToRefresh } from './components/pull-to-refresh/pull-to-refresh';
+import { Radio } from './components/radio/radio';
+import { Range } from './components/range/range';
+import { Searchbar } from './components/searchbar/searchbar';
+import { Sheet } from './components/sheet/sheet';
+import { Skeleton } from './components/skeleton/skeleton';
+import { SmartSelect } from './components/smart-select/smart-select';
+import { Sortable } from './components/sortable/sortable';
+import { Statusbar } from './components/statusbar/statusbar';
+import { Stepper } from './components/stepper/stepper';
+import { Subnavbar } from './components/subnavbar/subnavbar';
+import { Swipeout } from './components/swipeout/swipeout';
+import { Swiper } from './components/swiper/swiper';
+import { Tabs } from './components/tabs/tabs';
+import { TextEditor } from './components/text-editor/text-editor';
+import { Timeline } from './components/timeline/timeline';
+import { Toast } from './components/toast/toast';
+import { Toggle } from './components/toggle/toggle';
+import { Toolbar } from './components/toolbar/toolbar';
+import { Tooltip } from './components/tooltip/tooltip';
+import { TouchRipple } from './components/touch-ripple/touch-ripple';
+import { Treeview } from './components/treeview/treeview';
+import { Typography } from './components/typography/typography';
+import { View } from './components/view/view';
+import { VirtualList } from './components/virtual-list/virtual-list';
 
 declare module './types/components/app/app-class' {
   interface Framework7Class<Events> extends ClicksModule.AppMethods{}

package/{esm/framework7.js → framework7.esm.js}

@@ -1,5 +1,5 @@
 /**
- * Framework7 6.3.4
+ * Framework7 7.0.0-beta.3
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
@@ -7,7 +7,7 @@
  *
  * Released under the MIT License
  *
- * Released on: September 16, 2021
+ * Released on: October 5, 2021
  */
 
 import $ from './shared/dom7';