framework7-vue 8.3.4 → 9.0.0-beta.1

package/framework7-vue-bundle.js

@@ -85,6 +85,7 @@ import f7Tab from './components/tab.js';
 import f7Tabs from './components/tabs.js';
 import f7TextEditor from './components/text-editor.js';
 import f7Toggle from './components/toggle.js';
+import f7ToolbarPane from './components/toolbar-pane.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -92,7 +93,7 @@ import f7UseIcon from './components/use-icon.js';
 import f7View from './components/view.js';
 import f7Views from './components/views.js';
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarPane, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7Vue;
 
@@ -180,6 +181,7 @@ function registerComponents(app) {
   app.component('f7-tabs', f7Tabs);
   app.component('f7-text-editor', f7TextEditor);
   app.component('f7-toggle', f7Toggle);
+  app.component('f7-toolbar-pane', f7ToolbarPane);
   app.component('f7-toolbar', f7Toolbar);
   app.component('f7-treeview-item', f7TreeviewItem);
   app.component('f7-treeview', f7Treeview);

package/framework7-vue.d.ts

@@ -84,6 +84,7 @@ import f7Tab from './components/tab.js';
 import f7Tabs from './components/tabs.js';
 import f7TextEditor from './components/text-editor.js';
 import f7Toggle from './components/toggle.js';
+import f7ToolbarPane from './components/toolbar-pane.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -114,6 +115,6 @@ interface useStore {
 
 declare const useStore: useStore;
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarPane, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7Vue;

package/framework7-vue.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 Vue 8.3.4
+ * Framework7 Vue 9.0.0-beta.1
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
- * Copyright 2014-2024 Vladimir Kharlampidi
+ * Copyright 2014-2025 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: September 18, 2024
+ * Released on: November 10, 2025
  */
 import Framework7Vue from './shared/plugin.js';
 import { f7, f7ready, theme } from './shared/f7.js';
@@ -96,6 +96,7 @@ import f7Tab from './components/tab.js';
 import f7Tabs from './components/tabs.js';
 import f7TextEditor from './components/text-editor.js';
 import f7Toggle from './components/toggle.js';
+import f7ToolbarPane from './components/toolbar-pane.js';
 import f7Toolbar from './components/toolbar.js';
 import f7TreeviewItem from './components/treeview-item.js';
 import f7Treeview from './components/treeview.js';
@@ -103,6 +104,6 @@ import f7UseIcon from './components/use-icon.js';
 import f7View from './components/view.js';
 import f7Views from './components/views.js';
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7Message, f7MessagebarAttachment, f7MessagebarAttachments, f7MessagebarSheetImage, f7MessagebarSheetItem, f7MessagebarSheet, f7Messagebar, f7MessagesTitle, f7Messages, f7NavLeft, f7NavRight, f7NavTitleLarge, f7NavTitle, f7Navbar, f7PageContent, f7Page, f7Panel, f7PhotoBrowser, f7PieChart, f7Popover, f7Popup, f7Preloader, f7Progressbar, f7Radio, f7Range, f7RoutableModals, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7ToolbarPane, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, useStore };
 export default Framework7Vue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-vue",
-  "version": "8.3.4",
+  "version": "9.0.0-beta.1",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
   "type": "module",
   "exports": {
@@ -61,5 +61,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "September 18, 2024"
+  "releaseDate": "November 10, 2025"
 }

package/shared/components-router.js

@@ -20,14 +20,13 @@ export default {
     openIn(router, navigateUrl, options) {
       return routerOpenIn(router, navigateUrl, options);
     },
-    pageComponentLoader(_ref) {
-      let {
-        routerEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _ref;
+    pageComponentLoader({
+      routerEl,
+      component,
+      options,
+      resolve,
+      reject
+    }) {
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -101,14 +100,13 @@ export default {
         pageEl.parentNode.removeChild(pageEl);
       }
     },
-    tabComponentLoader(_temp) {
-      let {
-        tabEl,
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp === void 0 ? {} : _temp;
+    tabComponentLoader({
+      tabEl,
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
       if (!tabEl) reject();
       let tabRouter;
@@ -155,13 +153,12 @@ export default {
       }
       tabRouter.setTabContent(null);
     },
-    modalComponentLoader(_temp2) {
-      let {
-        component,
-        options,
-        resolve,
-        reject
-      } = _temp2 === void 0 ? {} : _temp2;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
       const router = this;
       const modalsRouter = f7routers.modals;
       if (!modalsRouter) {

package/shared/f7.js

@@ -25,13 +25,7 @@ const cleanup = () => {
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
-const f7init = function (rootEl, params, init) {
-  if (params === void 0) {
-    params = {};
-  }
-  if (init === void 0) {
-    init = true;
-  }
+const f7init = (rootEl, params = {}, init = true) => {
   const f7Params = extend({}, params, {
     el: rootEl,
     init

package/shared/modal-state-classes.js

@@ -1,8 +1,7 @@
-export const modalStateClasses = function (_temp) {
-  let {
-    isOpened,
-    isClosing
-  } = _temp === void 0 ? {} : _temp;
+export const modalStateClasses = ({
+  isOpened,
+  isClosing
+} = {}) => {
   return {
     'modal-in': isOpened && !isClosing,
     'modal-out': isClosing

package/shared/plugin.js

@@ -4,10 +4,7 @@ import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7Vue = {
   name: 'vuePlugin',
   installed: false,
-  install(params) {
-    if (params === void 0) {
-      params = {};
-    }
+  install(params = {}) {
     if (Framework7Vue.installed) return;
     Framework7Vue.installed = true;
     f7initEvents();

package/shared/use-icon.js

@@ -1,7 +1,4 @@
-export const useIcon = function (props) {
-  if (props === void 0) {
-    props = {};
-  }
+export const useIcon = (props = {}) => {
   const {
     icon,
     iconMaterial,

package/shared/use-route-props.js

@@ -1,8 +1,7 @@
 import { onMounted, onUpdated } from 'vue';
-export const useRouteProps = function (elRef, _temp) {
-  let {
-    routeProps
-  } = _temp === void 0 ? {} : _temp;
+export const useRouteProps = (elRef, {
+  routeProps
+} = {}) => {
   onMounted(() => {
     if (elRef.value && routeProps) {
       elRef.value.f7RouteProps = routeProps;

package/shared/use-store.js

@@ -1,13 +1,13 @@
 import { onBeforeUnmount, ref } from 'vue';
 import { f7 } from './f7.js';
-export const useStore = function () {
+export const useStore = (...args) => {
   // (store, getter)
-  let store = arguments.length <= 0 ? undefined : arguments[0];
-  let getter = arguments.length <= 1 ? undefined : arguments[1];
-  if (arguments.length === 1) {
+  let store = args[0];
+  let getter = args[1];
+  if (args.length === 1) {
     // (getter)
     store = f7.store;
-    getter = arguments.length <= 0 ? undefined : arguments[0];
+    getter = args[0];
   }
   // eslint-disable-next-line
   const obj = store._gettersPlain[getter];

package/shared/utils.js

@@ -15,13 +15,10 @@ export function isObject(o) {
 export function now() {
   return Date.now();
 }
-export function extend() {
+export function extend(...args) {
   let deep = true;
   let to;
   let from;
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
   if (typeof args[0] === 'boolean') {
     [deep, to] = args;
     args.splice(0, 2);
@@ -55,11 +52,8 @@ export function extend() {
   }
   return to;
 }
-export function classNames() {
+export function classNames(...args) {
   const classes = [];
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
-  }
   args.forEach(arg => {
     if (typeof arg === 'object' && arg.constructor === Object) {
       Object.keys(arg).forEach(key => {
@@ -87,10 +81,7 @@ export function getComponentId() {
   routerComponentIdCounter += 1;
   return `${now()}_${routerComponentIdCounter}`;
 }
-export function getChildren(slots, slotName) {
-  if (slotName === void 0) {
-    slotName = 'default';
-  }
+export function getChildren(slots, slotName = 'default') {
   const result = [];
   const getElementsChildren = els => {
     if (!Array.isArray(els)) {