framework7-svelte 6.3.5 → 7.0.0-beta.4

package/framework7-svelte.js

@@ -0,0 +1,116 @@
+/**
+ * Framework7 Svelte 7.0.0-beta.4
+ * Build full featured iOS & Android apps using Framework7 & Svelte
+ * https://framework7.io/svelte/
+ *
+ * Copyright 2014-2021 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: October 5, 2021
+ */
+import Framework7Svelte from './shared/plugin';
+import { f7, f7ready, theme, app } from './shared/f7';
+import { useStore } from './shared/use-store';
+
+import AccordionContent from './components/accordion-content.svelte';
+import AccordionItem from './components/accordion-item.svelte';
+import AccordionToggle from './components/accordion-toggle.svelte';
+import Accordion from './components/accordion.svelte';
+import ActionsButton from './components/actions-button.svelte';
+import ActionsGroup from './components/actions-group.svelte';
+import ActionsLabel from './components/actions-label.svelte';
+import Actions from './components/actions.svelte';
+import App from './components/app.svelte';
+import Appbar from './components/appbar.svelte';
+import AreaChart from './components/area-chart.svelte';
+import Badge from './components/badge.svelte';
+import BlockFooter from './components/block-footer.svelte';
+import BlockHeader from './components/block-header.svelte';
+import BlockTitle from './components/block-title.svelte';
+import Block from './components/block.svelte';
+import Button from './components/button.svelte';
+import CardContent from './components/card-content.svelte';
+import CardFooter from './components/card-footer.svelte';
+import CardHeader from './components/card-header.svelte';
+import Card from './components/card.svelte';
+import Checkbox from './components/checkbox.svelte';
+import Chip from './components/chip.svelte';
+import Col from './components/col.svelte';
+import FabBackdrop from './components/fab-backdrop.svelte';
+import FabButton from './components/fab-button.svelte';
+import FabButtons from './components/fab-buttons.svelte';
+import Fab from './components/fab.svelte';
+import Gauge from './components/gauge.svelte';
+import Icon from './components/icon.svelte';
+import Input from './components/input.svelte';
+import Link from './components/link.svelte';
+import ListButton from './components/list-button.svelte';
+import ListGroup from './components/list-group.svelte';
+import ListIndex from './components/list-index.svelte';
+import ListInput from './components/list-input.svelte';
+import ListItemCell from './components/list-item-cell.svelte';
+import ListItemRow from './components/list-item-row.svelte';
+import ListItem from './components/list-item.svelte';
+import List from './components/list.svelte';
+import LoginScreenTitle from './components/login-screen-title.svelte';
+import LoginScreen from './components/login-screen.svelte';
+import MenuDropdownItem from './components/menu-dropdown-item.svelte';
+import MenuDropdown from './components/menu-dropdown.svelte';
+import MenuItem from './components/menu-item.svelte';
+import Menu from './components/menu.svelte';
+import Message from './components/message.svelte';
+import MessagebarAttachment from './components/messagebar-attachment.svelte';
+import MessagebarAttachments from './components/messagebar-attachments.svelte';
+import MessagebarSheetImage from './components/messagebar-sheet-image.svelte';
+import MessagebarSheetItem from './components/messagebar-sheet-item.svelte';
+import MessagebarSheet from './components/messagebar-sheet.svelte';
+import Messagebar from './components/messagebar.svelte';
+import MessagesTitle from './components/messages-title.svelte';
+import Messages from './components/messages.svelte';
+import NavLeft from './components/nav-left.svelte';
+import NavRight from './components/nav-right.svelte';
+import NavTitleLarge from './components/nav-title-large.svelte';
+import NavTitle from './components/nav-title.svelte';
+import Navbar from './components/navbar.svelte';
+import PageContent from './components/page-content.svelte';
+import Page from './components/page.svelte';
+import Panel from './components/panel.svelte';
+import PhotoBrowser from './components/photo-browser.svelte';
+import PieChart from './components/pie-chart.svelte';
+import Popover from './components/popover.svelte';
+import Popup from './components/popup.svelte';
+import Preloader from './components/preloader.svelte';
+import Progressbar from './components/progressbar.svelte';
+import Radio from './components/radio.svelte';
+import Range from './components/range.svelte';
+import RoutableModals from './components/routable-modals.svelte';
+import RouterContextProvider from './components/router-context-provider.svelte';
+import Row from './components/row.svelte';
+import Searchbar from './components/searchbar.svelte';
+import Segmented from './components/segmented.svelte';
+import Sheet from './components/sheet.svelte';
+import SkeletonAvatar from './components/skeleton-avatar.js';
+import SkeletonBlock from './components/skeleton-block.js';
+import SkeletonImage from './components/skeleton-image.js';
+import SkeletonText from './components/skeleton-text.js';
+import Stepper from './components/stepper.svelte';
+import Subnavbar from './components/subnavbar.svelte';
+import SwipeoutActions from './components/swipeout-actions.svelte';
+import SwipeoutButton from './components/swipeout-button.svelte';
+import SwiperSlide from './components/swiper-slide.js';
+import Swiper from './components/swiper.js';
+import Tab from './components/tab.svelte';
+import Tabs from './components/tabs.svelte';
+import TextEditor from './components/text-editor.svelte';
+import Toggle from './components/toggle.svelte';
+import Toolbar from './components/toolbar.svelte';
+import TreeviewItem from './components/treeview-item.svelte';
+import Treeview from './components/treeview.svelte';
+import UseIcon from './components/use-icon.svelte';
+import View from './components/view.svelte';
+import Views from './components/views.svelte';
+
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, Appbar, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, Col, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItemCell, ListItemRow, ListItem, List, LoginScreenTitle, LoginScreen, MenuDropdownItem, MenuDropdown, MenuItem, Menu, Message, MessagebarAttachment, MessagebarAttachments, MessagebarSheetImage, MessagebarSheetItem, MessagebarSheet, Messagebar, MessagesTitle, Messages, NavLeft, NavRight, NavTitleLarge, NavTitle, Navbar, PageContent, Page, Panel, PhotoBrowser, PieChart, Popover, Popup, Preloader, Progressbar, Radio, Range, RoutableModals, RouterContextProvider, Row, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, SwiperSlide, Swiper, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
+export { f7, f7ready, theme, useStore, app };
+export default Framework7Svelte;

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "framework7-svelte",
-  "version": "6.3.5",
+  "version": "7.0.0-beta.4",
   "description": "Build full featured iOS & Android apps using Framework7 & Svelte",
-  "main": "cjs/framework7-svelte.js",
-  "module": "esm/framework7-svelte.js",
-  "jsnext:main": "esm/framework7-svelte.js",
-  "svelte": "esm/framework7-svelte-src.js",
+  "type": "module",
+  "exports": {
+    ".": "./framework7-svelte.js",
+    "./components/*": "./components/*"
+  },
   "typings": "framework7-svelte.d.ts",
   "repository": {
     "type": "git",

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

@@ -1,37 +1,43 @@
 /* eslint no-underscore-dangle: "off" */
 import { app } from './f7';
 import { extend, getComponentId } from './utils';
+import { routerOpenIn } from './router-open-in';
 
-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;
-      app.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;
+      app.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;
         app.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;
-      app.f7routers.views.forEach(function (data) {
+      let viewRouter;
+      app.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;
-      app.f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      app.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;
         app.f7events.off('tabRouterDidUpdate', onDidUpdate);
-        var tabContentEl = tabEl.children[0];
+        const tabContentEl = tabEl.children[0];
         resolve(tabContentEl);
         resolved = true;
       }
@@ -153,10 +160,11 @@ export default {
       app.f7events.on('tabRouterDidUpdate', onDidUpdate);
       tabRouter.setTabContent(tabContent);
     },
-    removeTabContent: function removeTabContent(tabEl) {
+
+    removeTabContent(tabEl) {
       if (!tabEl) return;
-      var tabRouter;
-      app.f7routers.tabs.forEach(function (tabData) {
+      let tabRouter;
+      app.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 = app.f7routers.modals;
+    modalComponentLoader({
+      component,
+      options,
+      resolve,
+      reject
+    } = {}) {
+      const router = this;
+      const modalsRouter = app.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;
         app.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 = app.f7routers.modals;
+
+    removeModal(modalEl) {
+      const modalsRouter = app.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

@@ -2,8 +2,8 @@
 // eslint-disable-next-line
 import Framework7 from 'framework7/lite';
 import { extend, unsetRouterIds } from './utils';
-var f7;
-var theme = {}; // eslint-disable-next-line
+let f7;
+const theme = {}; // eslint-disable-next-line
 
 if (!Framework7.__app__) {
   // eslint-disable-next-line
@@ -19,13 +19,15 @@ if (!Framework7.__app__) {
   };
 }
 
-var app = Framework7.__app__;
+const {
+  __app__: app
+} = Framework7;
 
-app.setInstance = function (instance) {
+app.setInstance = instance => {
   f7 = instance;
 };
 
-var setTheme = function setTheme() {
+const setTheme = () => {
   if (!app.f7) return;
   app.theme.ios = app.f7.theme === 'ios';
   theme.ios = app.f7.theme === 'ios';
@@ -35,7 +37,7 @@ var setTheme = function setTheme() {
   theme.aurora = app.f7.theme === 'aurora';
 };
 
-var cleanup = function cleanup() {
+const cleanup = () => {
   unsetRouterIds();
   delete app.theme.ios;
   delete theme.ios;
@@ -48,28 +50,20 @@ var cleanup = function cleanup() {
   app.f7routers.modals = null;
 };
 
-var f7initEvents = function f7initEvents() {
+const f7initEvents = () => {
   app.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);
     app.theme.ios = !!device.ios;
@@ -81,7 +75,7 @@ var f7init = function f7init(rootEl, params, init) {
   if (app.f7 && typeof window !== 'undefined') return; // eslint-disable-next-line
 
   if (typeof window === 'undefined') cleanup();
-  var instance = new Framework7(f7Params);
+  const instance = new Framework7(f7Params);
   app.f7 = instance;
   f7 = instance;
   app.setInstance(instance);
@@ -93,7 +87,7 @@ var f7init = function f7init(rootEl, params, init) {
     app.setInstance(instance);
     app.f7events.emit('ready', app.f7);
   } else {
-    instance.on('init', function () {
+    instance.on('init', () => {
       app.f7 = instance;
       f7 = instance;
       app.setInstance(instance);
@@ -102,7 +96,7 @@ var f7init = function f7init(rootEl, params, init) {
   }
 };
 
-var f7ready = function f7ready(callback) {
+const f7ready = callback => {
   if (!callback) return;
   if (app.f7 && app.f7.initialized) callback(app.f7);else {
     app.f7events.once('ready', callback);

package/shared/get-reactive-context.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line
+import { getContext, onDestroy } from 'svelte';
+export const getReactiveContext = (name, setValue) => {
+  const ctx = getContext(name);
+  if (!ctx) return undefined;
+  const {
+    value,
+    subscribe,
+    unsubscribe
+  } = ctx;
+  subscribe(setValue);
+  onDestroy(() => {
+    unsubscribe(setValue);
+  });
+  return value;
+};

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

@@ -0,0 +1,39 @@
+import { getComponentId } from './utils';
+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,
+        ...initialRoute.params,
+        ...routeProps
+      }
+    };
+  }
+
+  return {
+    initialPage: initialComponentData,
+    initialRoute
+  };
+};