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

package/framework7-vue.d.ts

@@ -17,6 +17,10 @@ import f7BlockFooter from './components/block-footer';
 import f7BlockHeader from './components/block-header';
 import f7BlockTitle from './components/block-title';
 import f7Block from './components/block';
+import f7BreadcrumbsCollapsed from './components/breadcrumbs-collapsed';
+import f7BreadcrumbsItem from './components/breadcrumbs-item';
+import f7BreadcrumbsSeparator from './components/breadcrumbs-separator';
+import f7Breadcrumbs from './components/breadcrumbs';
 import f7Button from './components/button';
 import f7CardContent from './components/card-content';
 import f7CardFooter from './components/card-footer';
@@ -124,6 +128,6 @@ interface useStore {
 
 declare const useStore: useStore;
 
-export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, 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, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, 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, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
 export { f7, f7ready, theme, registerComponents, useStore };
 export default Framework7Vue;

package/framework7-vue.js

@@ -1,115 +1,119 @@
 /**
- * Framework7 Vue 7.0.0-beta.2
+ * Framework7 Vue 7.0.0-beta.20
  * Build full featured iOS & Android apps using Framework7 & Vue
  * https://framework7.io/vue/
  *
- * 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 Framework7Vue from './shared/plugin';
-import { f7, f7ready, theme } from './shared/f7';
-import { useStore } from './shared/use-store';
+import Framework7Vue from './shared/plugin.js';
+import { f7, f7ready, theme } from './shared/f7.js';
+import { useStore } from './shared/use-store.js';
 
-import f7AccordionContent from './components/accordion-content';
-import f7AccordionItem from './components/accordion-item';
-import f7AccordionToggle from './components/accordion-toggle';
-import f7Accordion from './components/accordion';
-import f7ActionsButton from './components/actions-button';
-import f7ActionsGroup from './components/actions-group';
-import f7ActionsLabel from './components/actions-label';
-import f7Actions from './components/actions';
-import f7App from './components/app';
-import f7Appbar from './components/appbar';
-import f7AreaChart from './components/area-chart';
-import f7Badge from './components/badge';
-import f7BlockFooter from './components/block-footer';
-import f7BlockHeader from './components/block-header';
-import f7BlockTitle from './components/block-title';
-import f7Block from './components/block';
-import f7Button from './components/button';
-import f7CardContent from './components/card-content';
-import f7CardFooter from './components/card-footer';
-import f7CardHeader from './components/card-header';
-import f7Card from './components/card';
-import f7Checkbox from './components/checkbox';
-import f7Chip from './components/chip';
-import f7Col from './components/col';
-import f7FabBackdrop from './components/fab-backdrop';
-import f7FabButton from './components/fab-button';
-import f7FabButtons from './components/fab-buttons';
-import f7Fab from './components/fab';
-import f7Gauge from './components/gauge';
-import f7Icon from './components/icon';
-import f7Input from './components/input';
-import f7Link from './components/link';
-import f7ListButton from './components/list-button';
-import f7ListGroup from './components/list-group';
-import f7ListIndex from './components/list-index';
-import f7ListInput from './components/list-input';
-import f7ListItemCell from './components/list-item-cell';
-import f7ListItemRow from './components/list-item-row';
-import f7ListItem from './components/list-item';
-import f7List from './components/list';
-import f7LoginScreenTitle from './components/login-screen-title';
-import f7LoginScreen from './components/login-screen';
-import f7MenuDropdownItem from './components/menu-dropdown-item';
-import f7MenuDropdown from './components/menu-dropdown';
-import f7MenuItem from './components/menu-item';
-import f7Menu from './components/menu';
-import f7Message from './components/message';
-import f7MessagebarAttachment from './components/messagebar-attachment';
-import f7MessagebarAttachments from './components/messagebar-attachments';
-import f7MessagebarSheetImage from './components/messagebar-sheet-image';
-import f7MessagebarSheetItem from './components/messagebar-sheet-item';
-import f7MessagebarSheet from './components/messagebar-sheet';
-import f7Messagebar from './components/messagebar';
-import f7MessagesTitle from './components/messages-title';
-import f7Messages from './components/messages';
-import f7NavLeft from './components/nav-left';
-import f7NavRight from './components/nav-right';
-import f7NavTitleLarge from './components/nav-title-large';
-import f7NavTitle from './components/nav-title';
-import f7Navbar from './components/navbar';
-import f7PageContent from './components/page-content';
-import f7Page from './components/page';
-import f7Panel from './components/panel';
-import f7PhotoBrowser from './components/photo-browser';
-import f7PieChart from './components/pie-chart';
-import f7Popover from './components/popover';
-import f7Popup from './components/popup';
-import f7Preloader from './components/preloader';
-import f7Progressbar from './components/progressbar';
-import f7Radio from './components/radio';
-import f7Range from './components/range';
-import f7RoutableModals from './components/routable-modals';
-import f7Row from './components/row';
-import f7Searchbar from './components/searchbar';
-import f7Segmented from './components/segmented';
-import f7Sheet from './components/sheet';
-import f7SkeletonAvatar from './components/skeleton-avatar';
-import f7SkeletonBlock from './components/skeleton-block';
-import f7SkeletonImage from './components/skeleton-image';
-import f7SkeletonText from './components/skeleton-text';
-import f7Stepper from './components/stepper';
-import f7Subnavbar from './components/subnavbar';
-import f7SwipeoutActions from './components/swipeout-actions';
-import f7SwipeoutButton from './components/swipeout-button';
-import f7SwiperSlide from './components/swiper-slide';
-import f7Swiper from './components/swiper';
-import f7Tab from './components/tab';
-import f7Tabs from './components/tabs';
-import f7TextEditor from './components/text-editor';
-import f7Toggle from './components/toggle';
-import f7Toolbar from './components/toolbar';
-import f7TreeviewItem from './components/treeview-item';
-import f7Treeview from './components/treeview';
-import f7UseIcon from './components/use-icon';
-import f7View from './components/view';
-import f7Views from './components/views';
+import f7AccordionContent from './components/accordion-content.js';
+import f7AccordionItem from './components/accordion-item.js';
+import f7AccordionToggle from './components/accordion-toggle.js';
+import f7Accordion from './components/accordion.js';
+import f7ActionsButton from './components/actions-button.js';
+import f7ActionsGroup from './components/actions-group.js';
+import f7ActionsLabel from './components/actions-label.js';
+import f7Actions from './components/actions.js';
+import f7App from './components/app.js';
+import f7Appbar from './components/appbar.js';
+import f7AreaChart from './components/area-chart.js';
+import f7Badge from './components/badge.js';
+import f7BlockFooter from './components/block-footer.js';
+import f7BlockHeader from './components/block-header.js';
+import f7BlockTitle from './components/block-title.js';
+import f7Block from './components/block.js';
+import f7BreadcrumbsCollapsed from './components/breadcrumbs-collapsed.js';
+import f7BreadcrumbsItem from './components/breadcrumbs-item.js';
+import f7BreadcrumbsSeparator from './components/breadcrumbs-separator.js';
+import f7Breadcrumbs from './components/breadcrumbs.js';
+import f7Button from './components/button.js';
+import f7CardContent from './components/card-content.js';
+import f7CardFooter from './components/card-footer.js';
+import f7CardHeader from './components/card-header.js';
+import f7Card from './components/card.js';
+import f7Checkbox from './components/checkbox.js';
+import f7Chip from './components/chip.js';
+import f7Col from './components/col.js';
+import f7FabBackdrop from './components/fab-backdrop.js';
+import f7FabButton from './components/fab-button.js';
+import f7FabButtons from './components/fab-buttons.js';
+import f7Fab from './components/fab.js';
+import f7Gauge from './components/gauge.js';
+import f7Icon from './components/icon.js';
+import f7Input from './components/input.js';
+import f7Link from './components/link.js';
+import f7ListButton from './components/list-button.js';
+import f7ListGroup from './components/list-group.js';
+import f7ListIndex from './components/list-index.js';
+import f7ListInput from './components/list-input.js';
+import f7ListItemCell from './components/list-item-cell.js';
+import f7ListItemRow from './components/list-item-row.js';
+import f7ListItem from './components/list-item.js';
+import f7List from './components/list.js';
+import f7LoginScreenTitle from './components/login-screen-title.js';
+import f7LoginScreen from './components/login-screen.js';
+import f7MenuDropdownItem from './components/menu-dropdown-item.js';
+import f7MenuDropdown from './components/menu-dropdown.js';
+import f7MenuItem from './components/menu-item.js';
+import f7Menu from './components/menu.js';
+import f7Message from './components/message.js';
+import f7MessagebarAttachment from './components/messagebar-attachment.js';
+import f7MessagebarAttachments from './components/messagebar-attachments.js';
+import f7MessagebarSheetImage from './components/messagebar-sheet-image.js';
+import f7MessagebarSheetItem from './components/messagebar-sheet-item.js';
+import f7MessagebarSheet from './components/messagebar-sheet.js';
+import f7Messagebar from './components/messagebar.js';
+import f7MessagesTitle from './components/messages-title.js';
+import f7Messages from './components/messages.js';
+import f7NavLeft from './components/nav-left.js';
+import f7NavRight from './components/nav-right.js';
+import f7NavTitleLarge from './components/nav-title-large.js';
+import f7NavTitle from './components/nav-title.js';
+import f7Navbar from './components/navbar.js';
+import f7PageContent from './components/page-content.js';
+import f7Page from './components/page.js';
+import f7Panel from './components/panel.js';
+import f7PhotoBrowser from './components/photo-browser.js';
+import f7PieChart from './components/pie-chart.js';
+import f7Popover from './components/popover.js';
+import f7Popup from './components/popup.js';
+import f7Preloader from './components/preloader.js';
+import f7Progressbar from './components/progressbar.js';
+import f7Radio from './components/radio.js';
+import f7Range from './components/range.js';
+import f7RoutableModals from './components/routable-modals.js';
+import f7Row from './components/row.js';
+import f7Searchbar from './components/searchbar.js';
+import f7Segmented from './components/segmented.js';
+import f7Sheet from './components/sheet.js';
+import f7SkeletonAvatar from './components/skeleton-avatar.js';
+import f7SkeletonBlock from './components/skeleton-block.js';
+import f7SkeletonImage from './components/skeleton-image.js';
+import f7SkeletonText from './components/skeleton-text.js';
+import f7Stepper from './components/stepper.js';
+import f7Subnavbar from './components/subnavbar.js';
+import f7SwipeoutActions from './components/swipeout-actions.js';
+import f7SwipeoutButton from './components/swipeout-button.js';
+import f7SwiperSlide from './components/swiper-slide.js';
+import f7Swiper from './components/swiper.js';
+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 f7Toolbar from './components/toolbar.js';
+import f7TreeviewItem from './components/treeview-item.js';
+import f7Treeview from './components/treeview.js';
+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, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, 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, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, f7Toolbar, f7TreeviewItem, f7Treeview, f7UseIcon, f7View, f7Views }
+export { f7AccordionContent, f7AccordionItem, f7AccordionToggle, f7Accordion, f7ActionsButton, f7ActionsGroup, f7ActionsLabel, f7Actions, f7App, f7Appbar, f7AreaChart, f7Badge, f7BlockFooter, f7BlockHeader, f7BlockTitle, f7Block, f7BreadcrumbsCollapsed, f7BreadcrumbsItem, f7BreadcrumbsSeparator, f7Breadcrumbs, f7Button, f7CardContent, f7CardFooter, f7CardHeader, f7Card, f7Checkbox, f7Chip, f7Col, f7FabBackdrop, f7FabButton, f7FabButtons, f7Fab, f7Gauge, f7Icon, f7Input, f7Link, f7ListButton, f7ListGroup, f7ListIndex, f7ListInput, f7ListItemCell, f7ListItemRow, f7ListItem, f7List, f7LoginScreenTitle, f7LoginScreen, f7MenuDropdownItem, f7MenuDropdown, f7MenuItem, f7Menu, 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, f7Row, f7Searchbar, f7Segmented, f7Sheet, f7SkeletonAvatar, f7SkeletonBlock, f7SkeletonImage, f7SkeletonText, f7Stepper, f7Subnavbar, f7SwipeoutActions, f7SwipeoutButton, f7SwiperSlide, f7Swiper, f7Tab, f7Tabs, f7TextEditor, f7Toggle, 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": "7.0.0-beta.2",
+  "version": "7.0.0-beta.20",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
   "type": "module",
   "exports": {
@@ -9,6 +9,7 @@
     "./components/*": "./components/*"
   },
   "typings": "framework7-vue.d.ts",
+  "web-types": "framework7-vue-web-types.json",
   "repository": {
     "type": "git",
     "url": "https://github.com/framework7io/framework7.git"
@@ -25,6 +26,7 @@
     "ipad",
     "apple",
     "phonegap",
+    "capacitor",
     "native",
     "touch",
     "appstore",

package/shared/components-router.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
-import { f7events, f7routers } from './f7';
-import { extend, getComponentId } from './utils';
+import { f7events, f7routers } from './f7.js';
+import { extend, getComponentId } from './utils.js';
+import { routerOpenIn } from './router-open-in.js';
 
 const getChildrenArray = el => {
   const arr = [];
@@ -21,13 +22,18 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
-    pageComponentLoader({
-      routerEl,
-      component,
-      options,
-      resolve,
-      reject
-    }) {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
+    pageComponentLoader(_ref) {
+      let {
+        routerEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _ref;
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -112,13 +118,14 @@ export default {
       }
     },
 
-    tabComponentLoader({
-      tabEl,
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    tabComponentLoader(_temp) {
+      let {
+        tabEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
       const router = this;
       if (!tabEl) reject();
       let tabRouter;
@@ -174,12 +181,13 @@ export default {
       tabRouter.setTabContent(null);
     },
 
-    modalComponentLoader({
-      component,
-      options,
-      resolve,
-      reject
-    } = {}) {
+    modalComponentLoader(_temp2) {
+      let {
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
       const router = this;
       const modalsRouter = f7routers.modals;
 

package/shared/f7.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
-import { extend, unsetRouterIds } from './utils';
+import { extend, unsetRouterIds } from './utils.js';
 let f7;
 let f7events;
 const theme = {};
@@ -31,7 +31,15 @@ const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
 
-const f7init = (rootEl, params = {}, init = true) => {
+const f7init = function (rootEl, params, init) {
+  if (params === void 0) {
+    params = {};
+  }
+
+  if (init === void 0) {
+    init = true;
+  }
+
   const f7Params = extend({}, params, {
     el: rootEl,
     init

package/shared/get-router-initial-component.js

@@ -1,4 +1,4 @@
-import { getComponentId } from './utils';
+import { getComponentId } from './utils.js';
 export const getRouterInitialComponent = (router, initialComponent) => {
   let initialComponentData;
   const {

package/shared/mixins.js

@@ -1,4 +1,4 @@
-import { isStringProp } from './utils';
+import { isStringProp } from './utils.js';
 export function colorClasses(props) {
   const {
     color,
@@ -7,10 +7,10 @@ export function colorClasses(props) {
     bgColor,
     borderColor,
     rippleColor,
-    themeDark
+    dark
   } = props;
   return {
-    'theme-dark': themeDark,
+    dark,
     [`color-${color}`]: color,
     [`color-theme-${colorTheme}`]: colorTheme,
     [`text-color-${textColor}`]: textColor,
@@ -26,7 +26,7 @@ export const colorProps = {
   bgColor: String,
   borderColor: String,
   rippleColor: String,
-  themeDark: Boolean
+  dark: Boolean
 };
 export const iconProps = {
   icon: String,

package/shared/modal-state-classes.js

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

package/shared/plugin.js

@@ -1,11 +1,15 @@
 import Framework7 from 'framework7/lite';
-import componentsRouter from './components-router';
-import { f7, f7ready, theme, f7initEvents, setTheme } from './f7';
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7Vue = {
   name: 'vuePlugin',
   installed: false,
 
-  install(params = {}) {
+  install(params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     if (Framework7Vue.installed) return;
     Framework7Vue.installed = true;
     f7initEvents();

package/shared/router-open-in.js

@@ -0,0 +1,114 @@
+import { h } from 'vue';
+import Popup from '../components/popup.js';
+import View from '../components/view.js';
+import LoginScreen from '../components/login-screen.js';
+import Sheet from '../components/sheet.js';
+import Popover from '../components/popover.js';
+import Panel from '../components/panel.js';
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: { ...options,
+        openIn: undefined
+      }
+    }
+  };
+  const params = { ...options
+  };
+
+  if (options.openIn === 'popup') {
+    params.component = {
+      setup() {
+        return () => h(Popup, {
+          class: 'popup-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.popup = params;
+  }
+
+  if (options.openIn === 'loginScreen') {
+    params.component = {
+      setup() {
+        return () => h(LoginScreen, {
+          class: 'login-screen-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.loginScreen = params;
+  }
+
+  if (options.openIn === 'sheet') {
+    params.component = {
+      setup() {
+        return () => h(Sheet, {
+          class: 'sheet-modal-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.sheet = params;
+  }
+
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    params.component = {
+      setup() {
+        return () => h(Popover, {
+          class: 'popover-router-open-in',
+          'data-url': url,
+          targetEl: options.clickedEl || options.targetEl
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.popover = params;
+  }
+
+  if (options.openIn.indexOf('panel') >= 0) {
+    const parts = options.openIn.split(':');
+    const side = parts[1] || 'left';
+    const effect = parts[2] || 'cover';
+    params.component = {
+      setup() {
+        return () => h(Panel, {
+          class: 'panel-router-open-in',
+          'data-url': url,
+          side,
+          effect
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+
+    };
+    navigateOptions.route.panel = params;
+  }
+
+  return router.navigate(navigateOptions);
+};

package/shared/use-icon.js

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

package/shared/use-route-props.js

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

package/shared/use-smart-select.js

@@ -1,6 +1,6 @@
 import { onMounted, onBeforeUnmount } from 'vue';
-import { f7ready, f7 } from './f7';
-import { extend } from './utils';
+import { f7ready, f7 } from './f7.js';
+import { extend } from './utils.js';
 export const useSmartSelect = (props, setInstance, getEl) => {
   let f7SmartSelect;
   onMounted(() => {

package/shared/use-store.js

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

package/shared/use-tab.js

@@ -1,5 +1,5 @@
 import { onMounted, onBeforeUnmount } from 'vue';
-import { f7, f7ready } from './f7';
+import { f7, f7ready } from './f7.js';
 export const useTab = (elRef, emit) => {
   const onTabShow = el => {
     if (elRef.value !== el) return;

package/shared/use-theme.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { f7, f7ready, theme } from './f7';
+import { f7, f7ready, theme } from './f7.js';
 export const useTheme = () => {
   const t = ref(f7 ? theme : null);
 

package/shared/use-tooltip.js

@@ -1,5 +1,5 @@
 import { watch, onMounted, onBeforeUnmount } from 'vue';
-import { f7, f7ready } from './f7';
+import { f7, f7ready } from './f7.js';
 export const useTooltip = (elRef, props) => {
   let f7Tooltip = null;
   const {