framework7-svelte 8.3.4 → 9.0.0

package/components/page.d.ts

@@ -1,33 +1,33 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface PageProps {
-  name ?: string;
-  withSubnavbar ?: boolean;
-  subnavbar ?: boolean;
-  withNavbarLarge ?: boolean;
-  navbarLarge ?: boolean;
-  noNavbar ?: boolean;
-  noToolbar ?: boolean;
-  tabs ?: boolean;
-  pageContent ?: boolean;
-  noSwipeback ?: boolean;
-  ptr ?: boolean;
-  ptrDistance ?: number;
-  ptrPreloader ?: boolean;
-  ptrBottom ?: boolean;
-  ptrMousewheel ?: boolean;
-  infinite ?: boolean;
-  infiniteTop ?: boolean;
-  infiniteDistance ?: number;
-  infinitePreloader ?: boolean;
-  hideBarsOnScroll ?: boolean;
-  hideNavbarOnScroll ?: boolean;
-  hideToolbarOnScroll ?: boolean;
-  messagesContent ?: boolean;
-  loginScreen ?: boolean;
+interface Props {
+  name?: string;
+  withSubnavbar?: boolean;
+  subnavbar?: boolean;
+  withNavbarLarge?: boolean;
+  navbarLarge?: boolean;
+  noNavbar?: boolean;
+  noToolbar?: boolean;
+  tabs?: boolean;
+  pageContent?: boolean;
+  noSwipeback?: boolean;
+  ptr?: boolean;
+  ptrDistance?: number;
+  ptrPreloader?: boolean;
+  ptrBottom?: boolean;
+  ptrMousewheel?: boolean;
+  infinite?: boolean;
+  infiniteTop?: boolean;
+  infiniteDistance?: number;
+  infinitePreloader?: boolean;
+  hideBarsOnScroll?: boolean;
+  hideNavbarOnScroll?: boolean;
+  hideToolbarOnScroll?: boolean;
+  messagesContent?: boolean;
+  loginScreen?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -35,31 +35,56 @@ interface PageProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onPtrPullStart ?: (...args: any[]) => void;
-  onPtrPullMove ?: (...args: any[]) => void;
-  onPtrPullEnd ?: (...args: any[]) => void;
-  onPtrRefresh ?: (...args: any[]) => void;
-  onPtrDone ?: (...args: any[]) => void;
-  onInfinite ?: (...args: any[]) => void;
-  onPageMounted ?: (page?: any) => void;
-  onPageInit ?: (page?: any) => void;
-  onPageReinit ?: (page?: any) => void;
-  onPageBeforeIn ?: (page?: any) => void;
-  onPageBeforeOut ?: (page?: any) => void;
-  onPageAfterOut ?: (page?: any) => void;
-  onPageAfterIn ?: (page?: any) => void;
-  onPageBeforeRemove ?: (page?: any) => void;
-  onPageBeforeUnmount ?: (page?: any) => void;
-  onPageTabShow ?: (...args: any[]) => void;
-  onPageTabHide ?: (...args: any[]) => void;
+  onPtrPullStart?: (...args: any[]) => void;
+  onPtrPullMove?: (...args: any[]) => void;
+  onPtrPullEnd?: (...args: any[]) => void;
+  onPtrRefresh?: (...args: any[]) => void;
+  onPtrDone?: (...args: any[]) => void;
+  onInfinite?: (...args: any[]) => void;
+  onPageMounted?: (page?: any) => void;
+  onPageInit?: (page?: any) => void;
+  onPageReinit?: (page?: any) => void;
+  onPageBeforeIn?: (page?: any) => void;
+  onPageBeforeOut?: (page?: any) => void;
+  onPageAfterOut?: (page?: any) => void;
+  onPageAfterIn?: (page?: any) => void;
+  onPageBeforeRemove?: (page?: any) => void;
+  onPageBeforeUnmount?: (page?: any) => void;
+  onPageTabShow?: (...args: any[]) => void;
+  onPageTabHide?: (...args: any[]) => void;
+  fixedContent?: Snippet;
+  staticContent?: Snippet;
+  children?: Snippet;
+  onptrpullstart?: () => void;
+  onptrpullmove?: () => void;
+  onptrpullend?: () => void;
+  onptrrefresh?: () => void;
+  onptrdone?: () => void;
+  oninfinite?: () => void;
+  onpagemounted?: () => void;
+  onpageinit?: () => void;
+  onpagereinit?: () => void;
+  onpagebeforein?: () => void;
+  onpagebeforeout?: () => void;
+  onpageafterout?: () => void;
+  onpageafterin?: () => void;
+  onpagebeforeremove?: () => void;
+  onpagebeforeunmount?: () => void;
+  ontabshow?: () => void;
+  ontabhide?: () => void;
 }
 
+interface PageProps {}
+interface PageProps extends Props {}
+
+interface PageEvents extends Record<'',{}>{}
+
 
 
 declare class Page extends SvelteComponent<
-  PageProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PageProps>,
-  { ptrPullStart: CustomEvent<void>; ptrPullMove: CustomEvent<void>; ptrPullEnd: CustomEvent<void>; ptrRefresh: CustomEvent<void>; ptrDone: CustomEvent<void>; infinite: CustomEvent<void>; pageMounted: CustomEvent<void>; pageInit: CustomEvent<void>; pageReinit: CustomEvent<void>; pageBeforeIn: CustomEvent<void>; pageBeforeOut: CustomEvent<void>; pageAfterOut: CustomEvent<void>; pageAfterIn: CustomEvent<void>; pageBeforeRemove: CustomEvent<void>; pageBeforeUnmount: CustomEvent<void>; pageTabShow: CustomEvent<void>; pageTabHide: CustomEvent<void>; },
-  {  'fixed' : {};  'static' : {};  'default' : {}; }
+  PageProps,
+  PageEvents,
+  {  }
 > {}
 
 export { PageProps };

package/components/page.svelte

@@ -1,43 +1,42 @@
 <script>
-  import { onMount, afterUpdate, onDestroy, createEventDispatcher } from 'svelte';
-  import { restProps } from '../shared/rest-props.js';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter } from '../shared/utils.js';
+  import { classNames } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
 
   import PageContent from './page-content.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  // Props
-  export let name = undefined;
-  export let withSubnavbar = undefined;
-  export let subnavbar = undefined;
-  export let withNavbarLarge = undefined;
-  export let navbarLarge = undefined;
-  export let noNavbar = undefined;
-  export let noToolbar = undefined;
-  export let tabs = undefined;
-  export let pageContent = true;
-  export let noSwipeback = undefined;
-  // Page Content Props
-  export let ptr = undefined;
-  export let ptrDistance = undefined;
-  export let ptrPreloader = true;
-  export let ptrBottom = undefined;
-  export let ptrMousewheel = undefined;
-  export let infinite = undefined;
-  export let infiniteTop = undefined;
-  export let infiniteDistance = undefined;
-  export let infinitePreloader = true;
-  export let hideBarsOnScroll = undefined;
-  export let hideNavbarOnScroll = undefined;
-  export let hideToolbarOnScroll = undefined;
-  export let messagesContent = undefined;
-  export let loginScreen = undefined;
-
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    name = undefined,
+    withSubnavbar = undefined,
+    subnavbar = undefined,
+    withNavbarLarge = undefined,
+    navbarLarge = undefined,
+    noNavbar = undefined,
+    noToolbar = undefined,
+    tabs = undefined,
+    pageContent = true,
+    noSwipeback = undefined,
+    ptr = undefined,
+    ptrDistance = undefined,
+    ptrPreloader = true,
+    ptrBottom = undefined,
+    ptrMousewheel = undefined,
+    infinite = undefined,
+    infiniteTop = undefined,
+    infiniteDistance = undefined,
+    infinitePreloader = true,
+    hideBarsOnScroll = undefined,
+    hideNavbarOnScroll = undefined,
+    hideToolbarOnScroll = undefined,
+    messagesContent = undefined,
+    loginScreen = undefined,
+    children,
+    fixedContent,
+    staticContent,
+    ...restProps
+  } = $props();
 
   // State
   let el;
@@ -50,59 +49,70 @@
   let routerPageRoleDetailRoot = false;
   let routerPageMasterStack = false;
 
-  $: forceSubnavbar =
-    typeof subnavbar === 'undefined' && typeof withSubnavbar === 'undefined' ? hasSubnavbar : false;
+  const forceSubnavbar = $derived(
+    typeof subnavbar === 'undefined' && typeof withSubnavbar === 'undefined' ? hasSubnavbar : false,
+  );
 
-  $: forceNavbarLarge =
+  const forceNavbarLarge = $derived(
     typeof navbarLarge === 'undefined' && typeof withNavbarLarge === 'undefined'
       ? hasNavbarLarge
-      : false;
+      : false,
+  );
 
-  $: classes = classNames(
-    className,
-    'page',
-    routerPositionClass,
-    {
-      tabs,
-      'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
-      'page-with-navbar-large': navbarLarge || withNavbarLarge || forceNavbarLarge,
-      'no-navbar': noNavbar,
-      'no-toolbar': noToolbar,
-      'no-swipeback': noSwipeback,
-      'page-master': routerPageRole === 'master',
-      'page-master-detail': routerPageRole === 'detail',
-      'page-master-detail-root': routerPageRoleDetailRoot === true,
-      'page-master-stacked': routerPageMasterStack === true,
-      'page-with-navbar-large-collapsed': hasNavbarLargeCollapsed === true,
-      'page-with-card-opened': hasCardExpandableOpened === true,
-      'login-screen-page': loginScreen,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'page',
+      routerPositionClass,
+      {
+        tabs,
+        'page-with-subnavbar': subnavbar || withSubnavbar || forceSubnavbar,
+        'page-with-navbar-large': navbarLarge || withNavbarLarge || forceNavbarLarge,
+        'no-navbar': noNavbar,
+        'no-toolbar': noToolbar,
+        'no-swipeback': noSwipeback,
+        'page-master': routerPageRole === 'master',
+        'page-master-detail': routerPageRole === 'detail',
+        'page-master-detail-root': routerPageRoleDetailRoot === true,
+        'page-master-stacked': routerPageMasterStack === true,
+        'page-with-navbar-large-collapsed': hasNavbarLargeCollapsed === true,
+        'page-with-card-opened': hasCardExpandableOpened === true,
+        'login-screen-page': loginScreen,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   // Handlers
   function onPtrPullStart() {
-    emit('ptrPullStart');
+    restProps.onPtrPullStart?.();
+    restProps.onptrpullstart?.();
   }
   function onPtrPullMove() {
-    emit('ptrPullMove');
+    restProps.onPtrPullMove?.();
+    restProps.onptrpullmove?.();
   }
   function onPtrPullEnd() {
-    emit('ptrPullEnd');
+    restProps.onPtrPullEnd?.();
+    restProps.onptrpullend?.();
   }
   function onPtrRefresh(done) {
-    emit('ptrRefresh', [done]);
+    restProps.onPtrRefresh?.(done);
+    restProps.onptrrefresh?.(done);
   }
   function onPtrDone() {
-    emit('ptrDone');
+    restProps.onPtrDone?.();
+    restProps.onptrdone?.();
   }
   function onInfinite() {
-    emit('infinite');
+    restProps.onInfinite?.();
+    restProps.oninfinite?.();
   }
   // Main Page Events
   function onPageMounted(page) {
     if (el !== page.el) return;
-    emit('pageMounted', [page]);
+    restProps.onPageMounted?.(page);
+    restProps.onpagemounted?.(page);
   }
   function onPageInit(page) {
     if (el !== page.el) return;
@@ -124,11 +134,13 @@
       }
     }
 
-    emit('pageInit', [page]);
+    restProps.onPageInit?.(page);
+    restProps.onpageinit?.(page);
   }
   function onPageReinit(page) {
     if (el !== page.el) return;
-    emit('pageReinit', [page]);
+    restProps.onPageReinit?.(page);
+    restProps.onpagereinit?.(page);
   }
   function onPageBeforeIn(page) {
     if (el !== page.el) return;
@@ -140,11 +152,13 @@
         routerPositionClass = 'page-previous';
       }
     }
-    emit('pageBeforeIn', [page]);
+    restProps.onPageBeforeIn?.(page);
+    restProps.onpagebeforein?.(page);
   }
   function onPageBeforeOut(page) {
     if (el !== page.el) return;
-    emit('pageBeforeOut', [page]);
+    restProps.onPageBeforeOut?.(page);
+    restProps.onpagebeforeout?.(page);
   }
   function onPageAfterOut(page) {
     if (el !== page.el) return;
@@ -154,12 +168,14 @@
     if (page.to === 'previous') {
       routerPositionClass = 'page-previous';
     }
-    emit('pageAfterOut', [page]);
+    restProps.onPageAfterOut?.(page);
+    restProps.onpageafterout?.(page);
   }
   function onPageAfterIn(page) {
     if (el !== page.el) return;
     routerPositionClass = 'page-current';
-    emit('pageAfterIn', [page]);
+    restProps.onPageAfterIn?.(page);
+    restProps.onpageafterin?.(page);
   }
   function onPageBeforeRemove(page) {
     if (el !== page.el) return;
@@ -171,11 +187,13 @@
     ) {
       page.$el.prepend(page.$navbarEl);
     }
-    emit('pageBeforeRemove', [page]);
+    restProps.onPageBeforeRemove?.(page);
+    restProps.onpagebeforeremove?.(page);
   }
   function onPageBeforeUnmount(page) {
     if (el !== page.el) return;
-    emit('pageBeforeUnmount', [page]);
+    restProps.onPageBeforeUnmount?.(page);
+    restProps.onpagebeforeunmount?.(page);
   }
 
   function onPagePosition(pageEl, position) {
@@ -214,11 +232,13 @@
 
   function onPageTabShow(pageEl) {
     if (el !== pageEl) return;
-    emit('pageTabShow');
+    restProps.onPageTabShow?.();
+    restProps.ontabshow?.();
   }
   function onPageTabHide(pageEl) {
     if (el !== pageEl) return;
-    emit('pageTabHide');
+    restProps.onPageTabHide?.();
+    restProps.ontabhide?.();
   }
 
   // Mount/destroy
@@ -279,7 +299,7 @@
       mountPage();
     });
   });
-  afterUpdate(() => {
+  $effect(() => {
     if (el && app.f7) {
       const dom7 = app.f7.$;
       const fixedEls = dom7(el).children('.page-content').children('[data-f7-slot="fixed"]');
@@ -296,8 +316,8 @@
   });
 </script>
 
-<div bind:this={el} class={classes} data-name={name} {...restProps($$restProps)}>
-  <slot name="fixed" />
+<div bind:this={el} class={classes} data-name={name} {...restProps}>
+  {@render fixedContent?.()}
   {#if pageContent}
     <PageContent
       {ptr}
@@ -321,11 +341,11 @@
       {onPtrDone}
       {onInfinite}
     >
-      <slot name="static" />
-      <slot />
+      {@render staticContent?.()}
+      {@render children?.()}
     </PageContent>
   {:else}
-    <slot name="static" />
-    <slot />
+    {@render staticContent?.()}
+    {@render children?.()}
   {/if}
 </div>

package/components/panel.d.ts

@@ -1,31 +1,31 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Panel } from 'framework7/types';
 
 
-interface PanelProps {
-  side ?: string;
-  effect ?: string;
-  cover ?: boolean;
-  reveal ?: boolean;
-  push ?: boolean;
-  floating ?: boolean;
-  left ?: boolean;
-  right ?: boolean;
-  opened ?: boolean;
-  resizable ?: boolean;
-  backdrop ?: boolean;
-  backdropEl ?: string;
-  visibleBreakpoint ?: number;
-  collapsedBreakpoint ?: number;
-  swipe ?: boolean;
-  swipeNoFollow ?: boolean;
-  swipeOnlyClose ?: boolean;
-  swipeActiveArea ?: number;
-  swipeThreshold ?: number;
-  containerEl ?: string | object;
+interface Props {
+  side?: string;
+  effect?: string;
+  cover?: boolean;
+  reveal?: boolean;
+  push?: boolean;
+  floating?: boolean;
+  left?: boolean;
+  right?: boolean;
+  opened?: boolean;
+  resizable?: boolean;
+  backdrop?: boolean;
+  backdropEl?: string;
+  visibleBreakpoint?: number;
+  collapsedBreakpoint?: number;
+  swipe?: boolean;
+  swipeNoFollow?: boolean;
+  swipeOnlyClose?: boolean;
+  swipeActiveArea?: number;
+  swipeThreshold?: number;
+  containerEl?: string | object;
   closeByBackdropClick?: boolean;
   color?: string;
   colorTheme?: string;
@@ -34,24 +34,40 @@ interface PanelProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onPanelOpen ?: (event?: any) => void;
-  onPanelOpened ?: (event?: any) => void;
-  onPanelClose ?: (event?: any) => void;
-  onPanelClosed ?: (event?: any) => void;
-  onPanelBackdropClick ?: (event?: any) => void;
-  onPanelSwipe ?: (event?: any) => void;
-  onPanelSwipeOpen ?: (event?: any) => void;
-  onPanelBreakpoint ?: (event?: any) => void;
-  onPanelCollapsedBreakpoint ?: (event?: any) => void;
-  onPanelResize ?: (...args: any[]) => void;
+  onPanelOpen?: (event?: any) => void;
+  onPanelOpened?: (event?: any) => void;
+  onPanelClose?: (event?: any) => void;
+  onPanelClosed?: (event?: any) => void;
+  onPanelBackdropClick?: (event?: any) => void;
+  onPanelSwipe?: (event?: any) => void;
+  onPanelSwipeOpen?: (event?: any) => void;
+  onPanelBreakpoint?: (event?: any) => void;
+  onPanelCollapsedBreakpoint?: (event?: any) => void;
+  onPanelResize?: (...args: any[]) => void;
+  children?: Snippet;
+  onpanelopen?: () => void;
+  onpanelopened?: () => void;
+  onpanelclose?: () => void;
+  onpanelclosed?: () => void;
+  onpanelbackdropclick?: () => void;
+  onpanelswipe?: () => void;
+  onpanelswipeopen?: () => void;
+  onpanelbreakpoint?: () => void;
+  onpanelcollapsedbreakpoint?: () => void;
+  onpanelresize?: () => void;
 }
 
+interface PanelProps {}
+interface PanelProps extends Props {}
+
+interface PanelEvents extends Record<'',{}>{}
+
 
 
 declare class Panel extends SvelteComponent<
-  PanelProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PanelProps>,
-  { panelOpen: CustomEvent<void>; panelOpened: CustomEvent<void>; panelClose: CustomEvent<void>; panelClosed: CustomEvent<void>; panelBackdropClick: CustomEvent<void>; panelSwipe: CustomEvent<void>; panelSwipeOpen: CustomEvent<void>; panelBreakpoint: CustomEvent<void>; panelCollapsedBreakpoint: CustomEvent<void>; panelResize: CustomEvent<void>; },
-  {  'default' : {}; }
+  PanelProps,
+  PanelEvents,
+  {  }
 > {}
 
 export { PanelProps };