framework7-svelte 8.3.4 → 9.0.0

package/components/view.svelte

@@ -1,39 +1,46 @@
 <script>
-  import { onMount, onDestroy, afterUpdate, createEventDispatcher, tick } from 'svelte';
+  import { onMount, onDestroy, tick } from 'svelte';
   import { app, f7ready } from '../shared/f7.js';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, noUndefinedProps, createEmitter, getRouterId } from '../shared/utils.js';
+  import { classNames, noUndefinedProps, getRouterId } from '../shared/utils.js';
   import { getRouterInitialComponent } from '../shared/get-router-initial-component.js';
   import { useTab } from '../shared/use-tab.js';
 
   import RouterContextProvider from './router-context-provider.svelte';
 
-  export let id = undefined;
-  export let style = undefined;
-
-  export let init = true;
-  export let url = undefined;
-  let className = undefined;
-  export { className as class };
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  const { main, tab, tabActive, browserHistoryInitialMatch = true, initRouterOnTabShow } = $$props;
-
-  const shouldInitRouter = !(initRouterOnTabShow && tab && !tabActive);
-
-  let initialPage;
-  let initialRoute;
-  let el;
-  let routerData;
-  let f7View;
+  let {
+    class: className,
+    id = undefined,
+    style = undefined,
+    init = true,
+    url = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  const {
+    main,
+    tab,
+    tabActive,
+    browserHistoryInitialMatch = true,
+    initRouterOnTabShow,
+  } = restProps;
+
+  const shouldInitRouter = $derived(!(initRouterOnTabShow && tab && !tabActive));
+
+  let initialPage = $state(null);
+  let initialRoute = $state(null);
+  let el = $state(null);
+  let routerData = $state(null);
+  let f7View = $state(null);
 
   export function instance() {
     return f7View;
   }
 
   function onViewInit(view) {
-    emit('viewInit', [view]);
+    restProps.onViewInit?.(view);
+    restProps.onviewinit?.(view);
     if (!init) {
       f7View = view;
       routerData.instance = view;
@@ -45,7 +52,7 @@
     f7View = app.f7.views.create(el, {
       routerId,
       init: false,
-      ...noUndefinedProps($$props),
+      ...noUndefinedProps({ url, ...restProps }),
       browserHistoryInitialMatch,
       on: {
         init: onViewInit,
@@ -67,39 +74,47 @@
     }
   }
 
-  let pages = initialPage ? [initialPage] : [];
+  let pages = $state(initialPage ? [initialPage] : []);
 
   function onResize(view, width) {
-    emit('viewResize', [width]);
+    restProps.onViewResize?.(width);
+    restProps.onviewresize?.(width);
   }
   function onSwipeBackMove(data) {
-    emit('swipeBackMove', [data]);
+    restProps.onSwipeBackMove?.(data);
+    restProps.onswipebackmove?.(data);
   }
   function onSwipeBackBeforeChange(data) {
-    emit('swipeBackBeforeChange', [data]);
+    restProps.onSwipeBackBeforeChange?.(data);
+    restProps.onswipebackbeforechange?.(data);
   }
   function onSwipeBackAfterChange(data) {
-    emit('swipeBackAfterChange', [data]);
+    restProps.onSwipeBackAfterChange?.(data);
+    restProps.onswipebackafterchange?.(data);
   }
   function onSwipeBackBeforeReset(data) {
-    emit('swipeBackBeforeReset', [data]);
+    restProps.onSwipeBackBeforeReset?.(data);
+    restProps.onswipebackbeforereset?.(data);
   }
   function onSwipeBackAfterReset(data) {
-    emit('swipeBackAfterReset', [data]);
+    restProps.onSwipeBackAfterReset?.(data);
+    restProps.onswipebackafterreset?.(data);
   }
 
-  $: classes = classNames(
-    className,
-    'view',
-    {
-      'view-main': main,
-      'tab-active': tabActive,
-      tab,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'view',
+      {
+        'view-main': main,
+        'tab-active': tabActive,
+        tab,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  useTab(() => el, emit);
+  useTab(() => el, restProps);
 
   onMount(() => {
     f7ready(() => {
@@ -108,7 +123,7 @@
         routerData.pages = pages;
         routerData.setPages = (newPages) => {
           tick().then(() => {
-            pages = newPages;
+            pages = [...newPages];
           });
         };
         if (initialPage && initialPage.isAsync && !initialPage.initialComponent) {
@@ -141,14 +156,14 @@
           instance: f7View,
           setPages(newPages) {
             tick().then(() => {
-              pages = newPages;
+              pages = [...newPages];
             });
           },
         };
         app.f7routers.views.push(routerData);
         routerData.instance = app.f7.views.create(el, {
           routerId,
-          ...noUndefinedProps($$props),
+          ...noUndefinedProps(restProps),
           browserHistoryInitialMatch,
           on: {
             init: onViewInit,
@@ -168,10 +183,13 @@
     });
   });
 
-  afterUpdate(() => {
-    if (!routerData) return;
+  const watchPagesAndRouterData = (pages, routerData) => {
+    if (!routerData || !pages) return;
+
     app.f7events.emit('viewRouterDidUpdate', routerData);
-  });
+  };
+
+  $effect(() => watchPagesAndRouterData(pages, routerData));
 
   onDestroy(() => {
     if (f7View) {
@@ -191,10 +209,10 @@
 </script>
 
 <div class={classes} {style} {id} bind:this={el}>
-  <slot view={f7View} />
+  {@render children?.(f7View)}
   {#each pages as page (page.id)}
     <RouterContextProvider route={page.props.f7route} router={page.props.f7router}>
-      <svelte:component this={page.component} {...page.props} />
+      <page.component {...page.props} />
     </RouterContextProvider>
   {/each}
 </div>

package/components/views.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ViewsProps {
+interface Props {
   tabs?: boolean;
   color?: string;
   colorTheme?: string;
@@ -12,14 +12,20 @@ interface ViewsProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface ViewsProps {}
+interface ViewsProps extends Props {}
+
+interface ViewsEvents extends Record<'',{}>{}
+
 
 
 declare class Views extends SvelteComponent<
-  ViewsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ViewsProps>,
-  {  },
-  {  'default' : {}; }
+  ViewsProps,
+  ViewsEvents,
+  {  }
 > {}
 
 export { ViewsProps };

package/components/views.svelte

@@ -1,23 +1,20 @@
 <script>
-  import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
+  let { class: className, tabs = false, children, ...restProps } = $props();
 
-  export let tabs = false;
-
-  let className = undefined;
-  export { className as class };
-
-  $: classes = classNames(
-    className,
-    'views',
-    {
-      tabs,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'views',
+      {
+        tabs,
+      },
+      colorClasses(restProps),
+    ),
   );
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/framework7-svelte.d.ts

@@ -77,6 +77,7 @@ 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 SnippetRender from './components/snippet-render.js';
 import Stepper from './components/stepper.js';
 import Subnavbar from './components/subnavbar.js';
 import SwipeoutActions from './components/swipeout-actions.js';
@@ -85,6 +86,7 @@ import Tab from './components/tab.js';
 import Tabs from './components/tabs.js';
 import TextEditor from './components/text-editor.js';
 import Toggle from './components/toggle.js';
+import ToolbarPane from './components/toolbar-pane.js';
 import Toolbar from './components/toolbar.js';
 import TreeviewItem from './components/treeview-item.js';
 import Treeview from './components/treeview.js';
@@ -122,6 +124,6 @@ interface app {
 
 declare const app: app;
 
-export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, SnippetRender, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, ToolbarPane, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
 export { f7, f7ready, theme, useStore, app };
 export default Framework7Svelte;

package/framework7-svelte.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 Svelte 8.3.4
+ * Framework7 Svelte 9.0.0
  * Build full featured iOS & Android apps using Framework7 & Svelte
  * https://framework7.io/svelte/
  *
- * Copyright 2014-2024 Vladimir Kharlampidi
+ * Copyright 2014-2025 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: September 18, 2024
+ * Released on: November 25, 2025
  */
 import Framework7Svelte from './shared/plugin.js';
 import { f7, f7ready, theme, app } from './shared/f7.js';
@@ -89,6 +89,7 @@ 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 SnippetRender from './components/snippet-render.svelte';
 import Stepper from './components/stepper.svelte';
 import Subnavbar from './components/subnavbar.svelte';
 import SwipeoutActions from './components/swipeout-actions.svelte';
@@ -97,6 +98,7 @@ 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 ToolbarPane from './components/toolbar-pane.svelte';
 import Toolbar from './components/toolbar.svelte';
 import TreeviewItem from './components/treeview-item.svelte';
 import Treeview from './components/treeview.svelte';
@@ -104,6 +106,6 @@ 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, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
+export { AccordionContent, AccordionItem, AccordionToggle, Accordion, ActionsButton, ActionsGroup, ActionsLabel, Actions, App, AreaChart, Badge, BlockFooter, BlockHeader, BlockTitle, Block, BreadcrumbsCollapsed, BreadcrumbsItem, BreadcrumbsSeparator, Breadcrumbs, Button, CardContent, CardFooter, CardHeader, Card, Checkbox, Chip, FabBackdrop, FabButton, FabButtons, Fab, Gauge, Icon, Input, Link, ListButton, ListGroup, ListIndex, ListInput, ListItem, List, LoginScreenTitle, LoginScreen, 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, Searchbar, Segmented, Sheet, SkeletonAvatar, SkeletonBlock, SkeletonImage, SkeletonText, SnippetRender, Stepper, Subnavbar, SwipeoutActions, SwipeoutButton, Tab, Tabs, TextEditor, Toggle, ToolbarPane, Toolbar, TreeviewItem, Treeview, UseIcon, View, Views }
 export { f7, f7ready, theme, useStore, app };
 export default Framework7Svelte;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framework7-svelte",
-  "version": "8.3.4",
+  "version": "9.0.0",
   "description": "Build full featured iOS & Android apps using Framework7 & Svelte",
   "type": "module",
   "svelte": "./framework7-svelte.js",
@@ -50,5 +50,5 @@
     "type": "patreon",
     "url": "https://www.patreon.com/framework7"
   },
-  "releaseDate": "September 18, 2024"
+  "releaseDate": "November 25, 2025"
 }

package/shared/components-router.js

@@ -20,14 +20,14 @@ 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,
+      direction
+    }) {
       const router = this;
       const routerId = router.id;
       const el = routerEl;
@@ -56,13 +56,18 @@ export default {
         const childrenAfter = getChildrenArray(el);
         if (hasSameChildren(childrenBefore, childrenAfter)) return;
         app.f7events.off('viewRouterDidUpdate', onDidUpdate);
-        const pageEl = el.children[el.children.length - 1];
+        const pageEl = el.children[direction === 'backward' ? 0 : el.children.length - 1];
         pageData.el = pageEl;
         resolve(pageEl);
+        viewRouter.setPages(viewRouter.pages);
         resolved = true;
       }
       app.f7events.on('viewRouterDidUpdate', onDidUpdate);
-      viewRouter.pages.push(pageData);
+      if (direction === 'backward') {
+        viewRouter.pages.unshift(pageData);
+      } else {
+        viewRouter.pages.push(pageData);
+      }
       viewRouter.setPages(viewRouter.pages);
     },
     removePage($pageEl) {
@@ -101,14 +106,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 +159,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 = app.f7routers.modals;
       if (!modalsRouter) {

package/shared/f7.js

@@ -44,13 +44,7 @@ const cleanup = () => {
 const f7initEvents = () => {
   app.f7events = new app.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/mixins.js

@@ -1,5 +1,5 @@
 import { isStringProp } from './utils.js';
-export function colorClasses(props) {
+export function colorClasses(props = {}) {
   const {
     color,
     textColor,
@@ -17,7 +17,7 @@ export function colorClasses(props) {
     [`ripple-color-${rippleColor}`]: rippleColor
   };
 }
-export function routerAttrs(props) {
+export function routerAttrs(props = {}) {
   const {
     force,
     reloadCurrent,
@@ -53,7 +53,7 @@ export function routerAttrs(props) {
     'data-open-in': isStringProp(openIn) ? openIn : undefined
   };
 }
-export function routerClasses(props) {
+export function routerClasses(props = {}) {
   const {
     back,
     linkBack,
@@ -66,7 +66,7 @@ export function routerClasses(props) {
     'prevent-router': preventRouter
   };
 }
-export function actionsAttrs(props) {
+export function actionsAttrs(props = {}) {
   const {
     searchbarEnable,
     searchbarDisable,
@@ -103,7 +103,7 @@ export function actionsAttrs(props) {
     'data-card': isStringProp(cardOpen) && cardOpen || isStringProp(cardClose) && cardClose || undefined
   };
 }
-export function actionsClasses(props) {
+export function actionsClasses(props = {}) {
   const {
     searchbarEnable,
     searchbarDisable,

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 { f7ready, theme, app, f7initEvents, setTheme } from './f7.js';
 const Framework7Svelte = {
   name: 'sveltePlugin',
   installed: false,
-  install(params) {
-    if (params === void 0) {
-      params = {};
-    }
+  install(params = {}) {
     const Framework7 = this;
     app.Framework7 = Framework7;
     if (Framework7Svelte.installed) return;

package/shared/rest-props.js

@@ -1,8 +1,5 @@
 const ignoreProps = ['color', 'colorTheme', 'textColor', 'bgColor', 'borderColor', 'rippleColor', 'dark', 'force', 'reloadCurrent', 'reloadPrevious', 'reloadAll', 'reloadDetail', 'animate', 'ignoreCache', 'routeTabId', 'view', 'transition', 'openIn', 'back', 'linkBack', 'external', 'preventRouter', 'searchbarEnable', 'searchbarDisable', 'searchbarClear', 'searchbarToggle', 'panelOpen', 'panelClose', 'panelToggle', 'popupOpen', 'popupClose', 'actionsOpen', 'actionsClose', 'popoverOpen', 'popoverClose', 'loginScreenOpen', 'loginScreenClose', 'sheetOpen', 'sheetClose', 'sortableEnable', 'sortableDisable', 'sortableToggle', 'cardOpen', 'cardClose'];
-export function restProps(rest) {
-  if (rest === void 0) {
-    rest = {};
-  }
+export function restProps(rest = {}) {
   const props = {};
   Object.keys(rest).filter(prop => !ignoreProps.includes(prop)).forEach(key => {
     if (key.indexOf('on') !== 0) {

package/shared/use-icon.js

@@ -1,7 +1,4 @@
-export const useIcon = function (props) {
-  if (props === void 0) {
-    props = {};
-  }
+export const useIcon = (restProps = {}) => {
   const {
     icon,
     iconMaterial,
@@ -13,7 +10,7 @@ export const useIcon = function (props) {
     iconBadge,
     badgeColor,
     iconBadgeColor
-  } = props;
+  } = restProps;
   if (icon || iconMaterial || iconF7 || iconMd || iconIos) {
     return {
       props: {

package/shared/use-store.js

@@ -1,20 +1,20 @@
 // eslint-disable-next-line
 import { onDestroy } from 'svelte';
 import { f7 } from './f7.js';
-export const useStore = function () {
+export const useStore = (...args) => {
   // (store, getter, callback)
-  let store = arguments.length <= 0 ? undefined : arguments[0];
-  let getter = arguments.length <= 1 ? undefined : arguments[1];
-  let callback = arguments.length <= 2 ? undefined : arguments[2];
-  if (arguments.length === 1) {
+  let store = args[0];
+  let getter = args[1];
+  let callback = args[2];
+  if (args.length === 1) {
     // (getter)
     store = f7.store;
-    getter = arguments.length <= 0 ? undefined : arguments[0];
-  } else if (arguments.length === 2 && typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'string') {
+    getter = args[0];
+  } else if (args.length === 2 && typeof args[0] === 'string') {
     // (getter, callback)
     store = f7.store;
-    getter = arguments.length <= 0 ? undefined : arguments[0];
-    callback = arguments.length <= 1 ? undefined : arguments[1];
+    getter = args[0];
+    callback = args[1];
   }
   // eslint-disable-next-line
   const obj = store._gettersPlain[getter];

package/shared/use-tab.js

@@ -1,14 +1,14 @@
 // eslint-disable-next-line
 import { onMount, onDestroy } from 'svelte';
 import { f7, f7ready } from './f7.js';
-export const useTab = (getEl, emit) => {
+export const useTab = (getEl, restProps = {}) => {
   const onTabShow = el => {
     if (getEl() !== el) return;
-    emit('tabShow', [el]);
+    restProps.onTabShow?.(el);
   };
   const onTabHide = el => {
     if (getEl() !== el) return;
-    emit('tabHide', [el]);
+    restProps.onTabHide?.(el);
   };
   const attachEvents = () => {
     if (!getEl()) return;

package/shared/use-tooltip.js

@@ -15,10 +15,9 @@ export const useTooltip = (el, props) => {
     });
   }
   return {
-    update(_temp) {
-      let {
-        tooltip: value
-      } = _temp === void 0 ? {} : _temp;
+    update({
+      tooltip: value
+    } = {}) {
       if (!value && f7Tooltip) {
         f7Tooltip.destroy();
         f7Tooltip = null;

package/shared/utils.js

@@ -14,13 +14,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);
@@ -54,11 +51,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 => {

package/shared/get-reactive-context.js

@@ -1,16 +0,0 @@
-// 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;
-};