framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/navbar.svelte

@@ -1,8 +1,7 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy, afterUpdate } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
   import { f7ready, app } from '../shared/f7.js';
   import { useTheme } from '../shared/use-theme.js';
 
@@ -10,39 +9,40 @@
   import NavTitle from './nav-title.svelte';
   import NavRight from './nav-right.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let backLink = undefined;
-  export let backLinkUrl = undefined;
-  export let backLinkForce = false;
-  export let backLinkShowText = undefined;
-  export let sliding = true;
-  export let title = undefined;
-  export let subtitle = undefined;
-  export let hidden = false;
-  export let outline = true;
-  export let innerClass = undefined;
-  export let innerClassName = undefined;
-  export let large = false;
-  export let largeTransparent = false;
-  export let transparent = false;
-  export let titleLarge = undefined;
-
-  export let f7Slot = 'fixed';
-
-  let el;
+  let {
+    class: className,
+    backLink = undefined,
+    backLinkUrl = undefined,
+    backLinkForce = false,
+    backLinkShowText = undefined,
+    title = undefined,
+    subtitle = undefined,
+    hidden = false,
+    outline = true,
+    innerClass = undefined,
+    innerClassName = undefined,
+    large = false,
+    largeTransparent = false,
+    transparent = false,
+    titleLarge = undefined,
+    f7Slot = 'fixed',
+    children,
+    navLeft = undefined,
+    left = undefined,
+    navRight = undefined,
+    right = undefined,
+    beforeInner = undefined,
+    afterInner = undefined,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
   let theme = useTheme((t) => {
     theme = t;
   });
-  let routerPositionClass = '';
-  let largeCollapsed = false;
-  let routerNavbarRole = null;
-  let routerNavbarRoleDetailRoot = false;
-  let routerNavbarMasterStack = false;
-  let transparentVisible = false;
+  let routerPositionClass = $state('');
+  let largeCollapsed = $state(false);
+  let transparentVisible = $state(false);
 
   export function hide(animate) {
     app.f7.navbar.hide(el, animate);
@@ -54,96 +54,90 @@
     app.f7.navbar.size(el);
   }
 
-  // eslint-disable-next-line
-  $: hasLeftSlots = $$slots['nav-left'] || $$slots['left'];
-  // eslint-disable-next-line
-  $: hasRightSlots = $$slots['nav-right'] || $$slots['right'];
-  // eslint-disable-next-line
-  $: hasTitleSlots = $$slots['title'];
+  const hasLeftSlots = $derived(navLeft || left);
+  const hasRightSlots = $derived(navRight || right);
+  const hasTitleSlots = $derived(title);
 
-  $: largeTitle = titleLarge || (large && title);
-  // eslint-disable-next-line
-  $: hasTitleLargeSlots = $$slots['title-large'];
+  const largeTitle = $derived(titleLarge || (large && title));
+  const hasTitleLargeSlots = $derived(titleLarge);
 
-  $: addLeftTitleClass = theme && theme.ios && app.f7 && !app.f7.params.navbar.iosCenterTitle;
-  $: addCenterTitleClass = theme && theme.md && app.f7 && app.f7.params.navbar.mdCenterTitle;
-
-  $: isLarge = large || largeTransparent;
-  $: isTransparent = transparent || (isLarge && largeTransparent);
-  $: isTransparentVisible = isTransparent && transparentVisible;
+  const addLeftTitleClass = $derived(
+    theme && theme.ios && app.f7 && !app.f7.params.navbar.iosCenterTitle,
+  );
+  const addCenterTitleClass = $derived(
+    theme && theme.md && app.f7 && app.f7.params.navbar.mdCenterTitle,
+  );
 
-  $: classes = classNames(
-    className,
-    'navbar',
-    routerPositionClass,
-    {
-      'navbar-hidden': hidden,
-      'navbar-large': isLarge,
-      'navbar-large-collapsed': isLarge && largeCollapsed,
-      'navbar-transparent': isTransparent,
-      'navbar-transparent-visible': isTransparentVisible,
-      'navbar-master': routerNavbarRole === 'master',
-      'navbar-master-detail': routerNavbarRole === 'detail',
-      'navbar-master-detail-root': routerNavbarRoleDetailRoot === true,
-      'navbar-master-stacked': routerNavbarMasterStack === true,
-      'no-outline': !outline,
-    },
-    colorClasses($$props),
+  const isLarge = $derived(large || largeTransparent);
+  const isTransparent = $derived(transparent || (isLarge && largeTransparent));
+  const isTransparentVisible = $derived(isTransparent && transparentVisible);
+
+  const classes = $derived(
+    classNames(
+      className,
+      'navbar',
+      routerPositionClass,
+      {
+        'navbar-hidden': hidden,
+        'navbar-large': isLarge,
+        'navbar-large-collapsed': isLarge && largeCollapsed,
+        'navbar-transparent': isTransparent,
+        'navbar-transparent-visible': isTransparentVisible,
+        'no-outline': !outline,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  $: innerClasses = classNames('navbar-inner', innerClass, innerClassName, {
-    sliding,
-    'navbar-inner-left-title': addLeftTitleClass,
-    'navbar-inner-centered-title': addCenterTitleClass,
-  });
+  const innerClasses = $derived(
+    classNames('navbar-inner', innerClass, innerClassName, {
+      'navbar-inner-left-title': addLeftTitleClass,
+      'navbar-inner-centered-title': addCenterTitleClass,
+    }),
+  );
 
   function onHide(navbarEl) {
     if (el !== navbarEl) return;
-    emit('navbarHide');
+    restProps.onNavbarHide?.();
+    restProps.onnavbarhide?.();
   }
   function onShow(navbarEl) {
     if (el !== navbarEl) return;
-    emit('navbarShow');
+    restProps.onNavbarShow?.();
+    restProps.onnavbarshow?.();
   }
   function onNavbarTransparentShow(navbarEl) {
     if (el !== navbarEl) return;
     transparentVisible = true;
-    emit('navbarTransparentShow');
+    restProps.onNavbarTransparentShow?.();
+    restProps.onnavbartransparentshow?.();
   }
   function onNavbarTransparentHide(navbarEl) {
     if (el !== navbarEl) return;
     transparentVisible = false;
-    emit('navbarTransparentHide');
+    restProps.onNavbarTransparentHide?.();
+    restProps.onnavbartransparenthide?.();
   }
   function onExpand(navbarEl) {
     if (el !== navbarEl) return;
     largeCollapsed = false;
-    emit('navbarExpand');
+    restProps.onNavbarExpand?.();
+    restProps.onnavbarexpand?.();
   }
   function onCollapse(navbarEl) {
     if (el !== navbarEl) return;
     largeCollapsed = true;
-    emit('navbarCollapse');
+    restProps.onNavbarCollapse?.();
+    restProps.onnavbarcollapse?.();
   }
   function onNavbarPosition(navbarEl, position) {
     if (el !== navbarEl) return;
     routerPositionClass = position ? `navbar-${position}` : position;
   }
-  function onNavbarRole(navbarEl, rolesData) {
-    if (el !== navbarEl) return;
-    routerNavbarRole = rolesData.role;
-    routerNavbarRoleDetailRoot = rolesData.detailRoot;
-  }
-  function onNavbarMasterStack(navbarEl) {
-    if (el !== navbarEl) return;
-    routerNavbarMasterStack = true;
-  }
-  function onNavbarMasterUnstack(navbarEl) {
-    if (el !== navbarEl) return;
-    routerNavbarMasterStack = false;
-  }
+
   function onBackClick() {
-    emit('clickBack');
+    restProps.onClickBack?.();
+    restProps.onclickback?.();
   }
 
   function mountNavbar() {
@@ -152,9 +146,6 @@
     app.f7.on('navbarCollapse', onCollapse);
     app.f7.on('navbarExpand', onExpand);
     app.f7.on('navbarPosition', onNavbarPosition);
-    app.f7.on('navbarRole', onNavbarRole);
-    app.f7.on('navbarMasterStack', onNavbarMasterStack);
-    app.f7.on('navbarMasterUnstack', onNavbarMasterUnstack);
     app.f7.on('navbarTransparentShow', onNavbarTransparentShow);
     app.f7.on('navbarTransparentHide', onNavbarTransparentHide);
   }
@@ -164,9 +155,6 @@
     app.f7.off('navbarCollapse', onCollapse);
     app.f7.off('navbarExpand', onExpand);
     app.f7.off('navbarPosition', onNavbarPosition);
-    app.f7.off('navbarRole', onNavbarRole);
-    app.f7.off('navbarMasterStack', onNavbarMasterStack);
-    app.f7.off('navbarMasterUnstack', onNavbarMasterUnstack);
     app.f7.off('navbarTransparentShow', onNavbarTransparentShow);
     app.f7.off('navbarTransparentHide', onNavbarTransparentHide);
   }
@@ -176,7 +164,7 @@
       mountNavbar();
     });
   });
-  afterUpdate(() => {
+  $effect(() => {
     if (!app.f7) return;
     app.f7.navbar.size(el);
   });
@@ -186,36 +174,37 @@
   });
 </script>
 
-<div class={classes} bind:this={el} data-f7-slot={f7Slot} {...restProps($$restProps)}>
-  <div class="navbar-bg" />
-  <slot name="before-inner" />
+<div class={classes} bind:this={el} data-f7-slot={f7Slot} {...restProps}>
+  <div class="navbar-bg"></div>
+  {@render beforeInner?.()}
   <div class={innerClasses}>
     {#if backLink || hasLeftSlots}
       <NavLeft {backLink} {backLinkUrl} {backLinkForce} {backLinkShowText} {onBackClick}>
-        <slot name="nav-left" />
-        <slot name="left" />
+        {@render navLeft?.()}
+        {@render left?.()}
       </NavLeft>
     {/if}
     {#if title || subtitle || hasTitleSlots}
-      <NavTitle {title} {subtitle}>
-        <slot name="title" />
-      </NavTitle>
+      <NavTitle {title} {subtitle} />
     {/if}
     {#if hasRightSlots}
       <NavRight>
-        <slot name="nav-right" />
-        <slot name="right" />
+        {@render navRight?.()}
+        {@render right?.()}
       </NavRight>
     {/if}
     {#if largeTitle || hasTitleLargeSlots}
       <div class="title-large">
         <div class="title-large-text">
-          {plainText(largeTitle)}
-          <slot name="title-large" />
+          {#if typeof largeTitle === 'function'}
+            {@render largeTitle?.()}
+          {:else}
+            {largeTitle}
+          {/if}
         </div>
       </div>
     {/if}
-    <slot />
+    {@render children?.()}
   </div>
-  <slot name="after-inner" />
+  {@render afterInner?.()}
 </div>

package/components/page-content.d.ts

@@ -1,25 +1,25 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface PageContentProps {
-  tab ?: boolean;
-  tabActive ?: 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 {
+  tab?: boolean;
+  tabActive?: 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;
@@ -27,22 +27,34 @@ interface PageContentProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onPtrPullStart ?: (...args: any[]) => void;
-  onPtrPullMove ?: (...args: any[]) => void;
-  onPtrPullEnd ?: (...args: any[]) => void;
-  onPtrRefresh ?: (done?: any) => void;
-  onPtrDone ?: (...args: any[]) => void;
-  onInfinite ?: (...args: any[]) => void;
-  onTabShow ?: (el?: HTMLElement) => void;
-  onTabHide ?: (el?: HTMLElement) => void;
+  onPtrPullStart?: (...args: any[]) => void;
+  onPtrPullMove?: (...args: any[]) => void;
+  onPtrPullEnd?: (...args: any[]) => void;
+  onPtrRefresh?: (done?: any) => void;
+  onPtrDone?: (...args: any[]) => void;
+  onInfinite?: (...args: any[]) => void;
+  onTabShow?: (el?: HTMLElement) => void;
+  onTabHide?: (el?: HTMLElement) => void;
+  children?: Snippet;
+  onptrpullstart?: () => void;
+  onptrpullmove?: () => void;
+  onptrpullend?: () => void;
+  onptrrefresh?: () => void;
+  onptrdone?: () => void;
+  oninfinite?: () => void;
 }
 
+interface PageContentProps {}
+interface PageContentProps extends Props {}
+
+interface PageContentEvents extends Record<'',{}>{}
+
 
 
 declare class PageContent extends SvelteComponent<
-  PageContentProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PageContentProps>,
-  { ptrPullStart: CustomEvent<void>; ptrPullMove: CustomEvent<void>; ptrPullEnd: CustomEvent<void>; ptrRefresh: CustomEvent<void>; ptrDone: CustomEvent<void>; infinite: CustomEvent<void>; },
-  {  'default' : {}; }
+  PageContentProps,
+  PageContentEvents,
+  {  }
 > {}
 
 export { PageContentProps };

package/components/page-content.svelte

@@ -1,79 +1,87 @@
 <script>
-  import { onMount, 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 { useTab } from '../shared/use-tab.js';
 
   import Preloader from './preloader.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-  export let tab = false;
-  export let tabActive = false;
-  export let ptr = false;
-  export let ptrDistance = undefined;
-  export let ptrPreloader = true;
-  export let ptrBottom = false;
-  export let ptrMousewheel = false;
-  export let infinite = false;
-  export let infiniteTop = false;
-  export let infiniteDistance = undefined;
-  export let infinitePreloader = true;
-  export let hideBarsOnScroll = false;
-  export let hideNavbarOnScroll = false;
-  export let hideToolbarOnScroll = false;
-  export let messagesContent = false;
-  export let loginScreen = false;
+  let {
+    class: className,
+    tab = false,
+    tabActive = false,
+    ptr = false,
+    ptrDistance = undefined,
+    ptrPreloader = true,
+    ptrBottom = false,
+    ptrMousewheel = false,
+    infinite = false,
+    infiniteTop = false,
+    infiniteDistance = undefined,
+    infinitePreloader = true,
+    hideBarsOnScroll = false,
+    hideNavbarOnScroll = false,
+    hideToolbarOnScroll = false,
+    messagesContent = false,
+    loginScreen = false,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let pageContentEl = $state(null);
 
-  let pageContentEl;
-
-  $: pageContentClasses = classNames(
-    className,
-    'page-content',
-    {
-      tab,
-      'tab-active': tabActive,
-      'ptr-content': ptr,
-      'ptr-bottom': ptrBottom,
-      'infinite-scroll-content': infinite,
-      'infinite-scroll-top': infiniteTop,
-      'hide-bars-on-scroll': hideBarsOnScroll,
-      'hide-navbar-on-scroll': hideNavbarOnScroll,
-      'hide-toolbar-on-scroll': hideToolbarOnScroll,
-      'messages-content': messagesContent,
-      'login-screen-content': loginScreen,
-    },
-    colorClasses($$props),
+  const pageContentClasses = $derived(
+    classNames(
+      className,
+      'page-content',
+      {
+        tab,
+        'tab-active': tabActive,
+        'ptr-content': ptr,
+        'ptr-bottom': ptrBottom,
+        'infinite-scroll-content': infinite,
+        'infinite-scroll-top': infiniteTop,
+        'hide-bars-on-scroll': hideBarsOnScroll,
+        'hide-navbar-on-scroll': hideNavbarOnScroll,
+        'hide-toolbar-on-scroll': hideToolbarOnScroll,
+        'messages-content': messagesContent,
+        'login-screen-content': loginScreen,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   // Event handlers
   function onPtrPullStart(ptrEl) {
     if (ptrEl !== pageContentEl) return;
-    emit('ptrPullStart');
+    restProps.onPtrPullStart?.();
+    restProps.onptrpullstart?.();
   }
   function onPtrPullMove(ptrEl) {
     if (ptrEl !== pageContentEl) return;
-    emit('ptrPullMove');
+    restProps.onPtrPullMove?.();
+    restProps.onptrpullmove?.();
   }
   function onPtrPullEnd(ptrEl) {
     if (ptrEl !== pageContentEl) return;
-    emit('ptrPullEnd');
+    restProps.onPtrPullEnd?.();
+    restProps.onptrpullend?.();
   }
   function onPtrRefresh(ptrEl, done) {
     if (ptrEl !== pageContentEl) return;
-    emit('ptrRefresh', [done]);
+    restProps.onPtrRefresh?.(done);
+    restProps.onptrrefresh?.(done);
   }
   function onPtrDone(ptrEl) {
     if (ptrEl !== pageContentEl) return;
-    emit('ptrDone');
+    restProps.onPtrDone?.();
+    restProps.onptrdone?.();
   }
   function onInfinite(infEl) {
     if (infEl !== pageContentEl) return;
-    emit('infinite');
+    restProps.onInfinite?.();
+    restProps.oninfinite?.();
   }
 
   function mountPageContent() {
@@ -101,7 +109,7 @@
     }
   }
 
-  useTab(() => pageContentEl, emit);
+  useTab(() => pageContentEl, restProps);
 
   onMount(() => {
     f7ready(() => {
@@ -120,7 +128,7 @@
   data-ptr-distance={ptrDistance}
   data-ptr-mousewheel={ptrMousewheel || undefined}
   data-infinite-distance={infiniteDistance || undefined}
-  {...restProps($$restProps)}
+  {...restProps}
 >
   {#if ptr && ptrPreloader && !ptrBottom}
     <div class="ptr-preloader">
@@ -131,7 +139,7 @@
   {#if infinite && infiniteTop && infinitePreloader}
     <Preloader class="infinite-scroll-preloader" />
   {/if}
-  <slot />
+  {@render children?.()}
   {#if infinite && !infiniteTop && infinitePreloader}
     <Preloader class="infinite-scroll-preloader" />
   {/if}