framework7-vue 6.3.15 → 7.0.0-beta.11

package/framework7-vue.js

@@ -0,0 +1,119 @@
+/**
+ * Framework7 Vue 7.0.0-beta.11
+ * Build full featured iOS & Android apps using Framework7 & Vue
+ * https://framework7.io/vue/
+ *
+ * Copyright 2014-2022 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: February 17, 2022
+ */
+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.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, 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,10 +1,13 @@
 {
   "name": "framework7-vue",
-  "version": "6.3.15",
+  "version": "7.0.0-beta.11",
   "description": "Build full featured iOS & Android apps using Framework7 & Vue",
-  "main": "cjs/framework7-vue.js",
-  "module": "esm/framework7-vue.js",
-  "jsnext:main": "esm/framework7-vue.js",
+  "type": "module",
+  "exports": {
+    ".": "./framework7-vue.js",
+    "./bundle": "./framework7-vue-bundle.js",
+    "./components/*": "./components/*"
+  },
   "typings": "framework7-vue.d.ts",
   "web-types": "framework7-vue-web-types.json",
   "repository": {

package/{esm/shared → shared}/components-router.js

@@ -1,37 +1,43 @@
 /* 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';
 
-var getChildrenArray = function getChildrenArray(el) {
-  var arr = [];
+const getChildrenArray = el => {
+  const arr = [];
 
-  for (var i = 0; i < el.children.length; i += 1) {
+  for (let i = 0; i < el.children.length; i += 1) {
     arr.push(el.children[i]);
   }
 
   return arr;
 };
 
-var hasSameChildren = function hasSameChildren(childrenBefore, childrenAfter) {
+const hasSameChildren = (childrenBefore, childrenAfter) => {
   if (childrenBefore.length !== childrenAfter.length) return false;
-  var set = new Set([].concat(childrenBefore, childrenAfter));
+  const set = new Set([...childrenBefore, ...childrenAfter]);
   if (set.size === childrenBefore.length) return true;
   return false;
 };
 
 export default {
   proto: {
-    pageComponentLoader: function pageComponentLoader(_ref) {
-      var routerEl = _ref.routerEl,
-          component = _ref.component,
-          options = _ref.options,
-          resolve = _ref.resolve,
-          reject = _ref.reject;
-      var router = this;
-      var routerId = router.id;
-      var el = routerEl;
-      var viewRouter;
-      f7routers.views.forEach(function (data) {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+
+    pageComponentLoader({
+      routerEl,
+      component,
+      options,
+      resolve,
+      reject
+    }) {
+      const router = this;
+      const routerId = router.id;
+      const el = routerEl;
+      let viewRouter;
+      f7routers.views.forEach(data => {
         if (data.el && data.el === routerEl || data.routerId && data.routerId === routerId) {
           viewRouter = data;
         }
@@ -42,23 +48,23 @@ export default {
         return;
       }
 
-      var pageData = {
-        component: component,
+      const pageData = {
+        component,
         id: getComponentId(),
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.params, options.props || {})
       };
-      var resolved;
-      var childrenBefore = getChildrenArray(el);
+      let resolved;
+      const childrenBefore = getChildrenArray(el);
 
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== viewRouter || resolved) return;
-        var childrenAfter = getChildrenArray(el);
+        const childrenAfter = getChildrenArray(el);
         if (hasSameChildren(childrenBefore, childrenAfter)) return;
         f7events.off('viewRouterDidUpdate', onDidUpdate);
-        var pageEl = el.children[el.children.length - 1];
+        const pageEl = el.children[el.children.length - 1];
         pageData.el = pageEl;
         resolve(pageEl);
         resolved = true;
@@ -68,10 +74,11 @@ export default {
       viewRouter.pages.push(pageData);
       viewRouter.setPages(viewRouter.pages);
     },
-    removePage: function removePage($pageEl) {
+
+    removePage($pageEl) {
       if (!$pageEl) return;
-      var router = this;
-      var f7Page;
+      const router = this;
+      let f7Page;
       if ('length' in $pageEl && $pageEl[0]) f7Page = $pageEl[0].f7Page;else f7Page = $pageEl.f7Page;
 
       if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) {
@@ -79,13 +86,13 @@ export default {
         return;
       }
 
-      var viewRouter;
-      f7routers.views.forEach(function (data) {
+      let viewRouter;
+      f7routers.views.forEach(data => {
         if (data.el && data.el === router.el) {
           viewRouter = data;
         }
       });
-      var pageEl;
+      let pageEl;
 
       if ('length' in $pageEl) {
         // Dom7
@@ -96,8 +103,8 @@ export default {
       }
 
       if (!pageEl) return;
-      var pageComponentFound;
-      viewRouter.pages.forEach(function (page, index) {
+      let pageComponentFound;
+      viewRouter.pages.forEach((page, index) => {
         if (page.el === pageEl) {
           pageComponentFound = true;
           viewRouter.pages.splice(index, 1);
@@ -109,18 +116,18 @@ export default {
         pageEl.parentNode.removeChild(pageEl);
       }
     },
-    tabComponentLoader: function tabComponentLoader(_temp) {
-      var _ref2 = _temp === void 0 ? {} : _temp,
-          tabEl = _ref2.tabEl,
-          component = _ref2.component,
-          options = _ref2.options,
-          resolve = _ref2.resolve,
-          reject = _ref2.reject;
-
-      var router = this;
+
+    tabComponentLoader({
+      tabEl,
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
       if (!tabEl) reject();
-      var tabRouter;
-      f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
         if (tabData.el && tabData.el === tabEl) {
           tabRouter = tabData;
         }
@@ -131,21 +138,21 @@ export default {
         return;
       }
 
-      var id = getComponentId();
-      var tabContent = {
-        id: id,
-        component: component,
+      const id = getComponentId();
+      const tabContent = {
+        id,
+        component,
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.route && options.route.route.tab && options.route.route.tab.options && options.route.route.tab.options.props || {}, options.route.params, options.props || {})
       };
-      var resolved;
+      let resolved;
 
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== tabRouter || resolved) return;
         f7events.off('tabRouterDidUpdate', onDidUpdate);
-        var tabContentEl = tabEl.children[0];
+        const tabContentEl = tabEl.children[0];
         resolve(tabContentEl);
         resolved = true;
       }
@@ -153,10 +160,11 @@ export default {
       f7events.on('tabRouterDidUpdate', onDidUpdate);
       tabRouter.setTabContent(tabContent);
     },
-    removeTabContent: function removeTabContent(tabEl) {
+
+    removeTabContent(tabEl) {
       if (!tabEl) return;
-      var tabRouter;
-      f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
         if (tabData.el && tabData.el === tabEl) {
           tabRouter = tabData;
         }
@@ -170,35 +178,35 @@ export default {
 
       tabRouter.setTabContent(null);
     },
-    modalComponentLoader: function modalComponentLoader(_temp2) {
-      var _ref3 = _temp2 === void 0 ? {} : _temp2,
-          component = _ref3.component,
-          options = _ref3.options,
-          resolve = _ref3.resolve,
-          reject = _ref3.reject;
 
-      var router = this;
-      var modalsRouter = f7routers.modals;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      const modalsRouter = f7routers.modals;
 
       if (!modalsRouter) {
         reject();
         return;
       }
 
-      var modalData = {
-        component: component,
+      const modalData = {
+        component,
         id: getComponentId(),
         props: extend({
           f7route: options.route,
           f7router: router
         }, options.route.params, options.props || {})
       };
-      var resolved;
+      let resolved;
 
       function onDidUpdate() {
         if (resolved) return;
         f7events.off('modalsRouterDidUpdate', onDidUpdate);
-        var modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
+        const modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
         modalData.el = modalEl;
         resolve(modalEl);
         resolved = true;
@@ -208,15 +216,17 @@ export default {
       modalsRouter.modals.push(modalData);
       modalsRouter.setModals(modalsRouter.modals);
     },
-    removeModal: function removeModal(modalEl) {
-      var modalsRouter = f7routers.modals;
+
+    removeModal(modalEl) {
+      const modalsRouter = f7routers.modals;
       if (!modalsRouter) return;
-      var modalDataToRemove;
-      modalsRouter.modals.forEach(function (modalData) {
+      let modalDataToRemove;
+      modalsRouter.modals.forEach(modalData => {
         if (modalData.el === modalEl) modalDataToRemove = modalData;
       });
       modalsRouter.modals.splice(modalsRouter.modals.indexOf(modalDataToRemove), 1);
       modalsRouter.setModals(modalsRouter.modals);
     }
+
   }
 };

package/{esm/shared → shared}/f7.js

@@ -1,23 +1,23 @@
 /* eslint-disable import/no-mutable-exports */
 import Framework7 from 'framework7/lite';
-import { extend, unsetRouterIds } from './utils';
-var f7;
-var f7events;
-var theme = {};
-var f7routers = {
+import { extend, unsetRouterIds } from './utils.js';
+let f7;
+let f7events;
+const theme = {};
+const f7routers = {
   views: [],
   tabs: [],
   modals: null
 };
 
-var setTheme = function setTheme() {
+const setTheme = () => {
   if (!f7) return;
   theme.ios = f7.theme === 'ios';
   theme.md = f7.theme === 'md';
   theme.aurora = f7.theme === 'aurora';
 };
 
-var cleanup = function cleanup() {
+const cleanup = () => {
   unsetRouterIds();
   delete theme.ios;
   delete theme.md;
@@ -27,28 +27,20 @@ var cleanup = function cleanup() {
   f7routers.modals = null;
 };
 
-var f7initEvents = function f7initEvents() {
+const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
 
-var f7init = function f7init(rootEl, params, init) {
-  if (params === void 0) {
-    params = {};
-  }
-
-  if (init === void 0) {
-    init = true;
-  }
-
-  var f7Params = extend({}, params, {
+const f7init = (rootEl, params = {}, init = true) => {
+  const f7Params = extend({}, params, {
     el: rootEl,
-    init: init
+    init
   });
   if (typeof params.store !== 'undefined') f7Params.store = params.store;
   if (!f7Params.routes) f7Params.routes = [];
 
   if (f7Params.userAgent && (f7Params.theme === 'auto' || !f7Params.theme)) {
-    var device = Framework7.getDevice({
+    const device = Framework7.getDevice({
       userAgent: f7Params.userAgent
     }, true);
     theme.ios = !!device.ios;
@@ -60,7 +52,7 @@ var f7init = function f7init(rootEl, params, init) {
   if (f7 && typeof window !== 'undefined') return; // eslint-disable-next-line
 
   if (typeof window === 'undefined') cleanup();
-  var instance = new Framework7(f7Params);
+  const instance = new Framework7(f7Params);
   f7 = instance;
   setTheme();
 
@@ -68,14 +60,14 @@ var f7init = function f7init(rootEl, params, init) {
     f7 = instance;
     f7events.emit('ready', f7);
   } else {
-    instance.on('init', function () {
+    instance.on('init', () => {
       f7 = instance;
       f7events.emit('ready', f7);
     });
   }
 };
 
-var f7ready = function f7ready(callback) {
+const f7ready = callback => {
   if (!callback) return;
   if (f7 && f7.initialized) callback(f7);else {
     f7events.once('ready', callback);

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

@@ -0,0 +1,39 @@
+import { getComponentId } from './utils.js';
+export const getRouterInitialComponent = (router, initialComponent) => {
+  let initialComponentData;
+  const {
+    initialUrl
+  } = router.getInitialUrl();
+  const initialRoute = router.findMatchingRoute(initialUrl);
+  let routeProps = {};
+
+  if (initialRoute && initialRoute.route && initialRoute.route.options) {
+    routeProps = initialRoute.route.options.props;
+  }
+
+  const isMasterRoute = route => {
+    if (route.master === true) return true;
+    if (typeof route.master === 'function') return route.master(router.app);
+    return false;
+  };
+
+  if (initialRoute && initialRoute.route && (initialRoute.route.component || initialRoute.route.asyncComponent) && !isMasterRoute(initialRoute.route)) {
+    initialComponentData = {
+      component: initialRoute.route.component || initialRoute.route.asyncComponent,
+      initialComponent,
+      id: getComponentId(),
+      isAsync: !!initialRoute.route.asyncComponent,
+      props: {
+        f7route: initialRoute,
+        f7router: router,
+        ...routeProps,
+        ...initialRoute.params
+      }
+    };
+  }
+
+  return {
+    initialPage: initialComponentData,
+    initialRoute
+  };
+};