framework7-svelte 8.3.3 → 9.0.0-beta.1

package/components/messages.d.ts

@@ -1,27 +1,27 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Messages } from 'framework7/types';
 
 
-interface MessagesProps {
-  autoLayout ?: boolean;
-  messages ?: Array<any>;
-  newMessagesFirst ?: boolean;
-  scrollMessages ?: boolean;
-  scrollMessagesOnEdge ?: boolean;
+interface Props {
+  autoLayout?: boolean;
+  messages?: Array<any>;
+  newMessagesFirst?: boolean;
+  scrollMessages?: boolean;
+  scrollMessagesOnEdge?: boolean;
   typing?: boolean;
-  firstMessageRule ?: Function;
-  lastMessageRule ?: Function;
-  tailMessageRule ?: Function;
-  sameNameMessageRule ?: Function;
-  sameHeaderMessageRule ?: Function;
-  sameFooterMessageRule ?: Function;
-  sameAvatarMessageRule ?: Function;
-  customClassMessageRule ?: Function;
-  renderMessage ?: Function;
-  init ?: boolean;
+  firstMessageRule?: Function;
+  lastMessageRule?: Function;
+  tailMessageRule?: Function;
+  sameNameMessageRule?: Function;
+  sameHeaderMessageRule?: Function;
+  sameFooterMessageRule?: Function;
+  sameAvatarMessageRule?: Function;
+  customClassMessageRule?: Function;
+  renderMessage?: Function;
+  init?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -29,14 +29,20 @@ interface MessagesProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface MessagesProps {}
+interface MessagesProps extends Props {}
+
+interface MessagesEvents extends Record<'',{}>{}
+
 
 
 declare class Messages extends SvelteComponent<
-  MessagesProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof MessagesProps>,
-  {  },
-  {  'default' : {}; }
+  MessagesProps,
+  MessagesEvents,
+  {  }
 > {}
 
 export { MessagesProps };

package/components/messages.svelte

@@ -1,40 +1,40 @@
 <script>
-  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames, noUndefinedProps } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
   import { app, f7ready } from '../shared/f7.js';
 
-  let className = undefined;
-  export { className as class };
-
-  export let autoLayout = false;
-  export let messages = [];
-  export let newMessagesFirst = false;
-  export let scrollMessages = true;
-  export let scrollMessagesOnEdge = true;
-  export let firstMessageRule = undefined;
-  export let lastMessageRule = undefined;
-  export let tailMessageRule = undefined;
-  export let sameNameMessageRule = undefined;
-  export let sameHeaderMessageRule = undefined;
-  export let sameFooterMessageRule = undefined;
-  export let sameAvatarMessageRule = undefined;
-  export let customClassMessageRule = undefined;
-  export let renderMessage = undefined;
-  export let typing = false;
-
-  export let init = true;
-
-  let el;
-  let f7Messages;
-  let childrenBeforeUpdated = null;
+  let {
+    class: className,
+    autoLayout = false,
+    messages = [],
+    newMessagesFirst = false,
+    scrollMessages = true,
+    scrollMessagesOnEdge = true,
+    firstMessageRule = undefined,
+    lastMessageRule = undefined,
+    tailMessageRule = undefined,
+    sameNameMessageRule = undefined,
+    sameHeaderMessageRule = undefined,
+    sameFooterMessageRule = undefined,
+    sameAvatarMessageRule = undefined,
+    customClassMessageRule = undefined,
+    renderMessage = undefined,
+    typing = false,
+    init = true,
+    children,
+    ...restProps
+  } = $props();
+
+  let el = $state(undefined);
+  let f7Messages = $state(undefined);
+  let childrenBeforeUpdated = $state(null);
 
   export function instance() {
     return f7Messages;
   }
 
-  $: classes = classNames(className, 'messages', colorClasses($$props));
+  const classes = $derived(classNames(className, 'messages', colorClasses(restProps)));
 
   onMount(() => {
     if (!init) return;
@@ -62,7 +62,7 @@
     });
   });
 
-  beforeUpdate(() => {
+  $effect.pre(() => {
     if (!init || !el) return;
     const children = el.children;
     if (!children) return;
@@ -73,7 +73,7 @@
     }
   });
 
-  afterUpdate(() => {
+  $effect(() => {
     if (!init) return;
     if (!el) return;
 
@@ -118,9 +118,9 @@
     else f7Messages.hideTyping();
   }
 
-  $: watchTyping(typing);
+  $effect(() => watchTyping(typing));
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
-  <slot messages={f7Messages} />
+<div bind:this={el} class={classes} {...restProps}>
+  {@render children?.(f7Messages)}
 </div>

package/components/nav-left.d.ts

@@ -1,14 +1,13 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface NavLeftProps {
-  backLink ?: boolean | string;
-  backLinkUrl ?: string;
-  backLinkForce ?: boolean;
-  backLinkShowText ?: boolean;
-  sliding ?: boolean;
+interface Props {
+  backLink?: boolean | string;
+  backLinkUrl?: string;
+  backLinkForce?: boolean;
+  backLinkShowText?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -16,16 +15,24 @@ interface NavLeftProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onBackClick ?: (event?: any) => void;
-  onClickBack ?: (event?: any) => void;
+  onBackClick?: (event?: any) => void;
+  onClickBack?: (event?: any) => void;
+  children?: Snippet;
+  onclickback?: () => void;
+  onbackclick?: () => void;
 }
 
+interface NavLeftProps {}
+interface NavLeftProps extends Props {}
+
+interface NavLeftEvents extends Record<'',{}>{}
+
 
 
 declare class NavLeft extends SvelteComponent<
-  NavLeftProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof NavLeftProps>,
-  { clickBack: CustomEvent<void>; backClick: CustomEvent<void>; },
-  {  'default' : {}; }
+  NavLeftProps,
+  NavLeftEvents,
+  {  }
 > {}
 
 export { NavLeftProps };

package/components/nav-left.svelte

@@ -1,48 +1,32 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
-  import { useTheme } from '../shared/use-theme.js';
+  import { classNames } from '../shared/utils.js';
 
   import Link from './link.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let backLink = undefined;
-  export let backLinkUrl = undefined;
-  export let backLinkForce = undefined;
-  export let backLinkShowText = undefined;
-  export let sliding = undefined;
-
-  let theme = useTheme((t) => {
-    theme = t;
-  });
-
-  $: classes = classNames(
-    className,
-    'left',
-    {
-      sliding,
-    },
-    colorClasses($$props),
-  );
-
-  $: needBackLinkText = backLinkShowText;
-  $: if (typeof needBackLinkText === 'undefined') needBackLinkText = theme && !theme.md;
-
-  $: backLinkText = backLink !== true && needBackLinkText ? backLink : undefined;
-
-  function onBackClick() {
-    emit('clickBack');
-    emit('backClick');
+  let {
+    class: className,
+    children,
+    backLink,
+    backLinkUrl,
+    backLinkForce,
+    backLinkShowText,
+    ...restProps
+  } = $props();
+
+  const classes = $derived(classNames(className, 'left', {}, colorClasses(restProps)));
+
+  const backLinkText = $derived(backLink !== true && backLinkShowText ? backLink : undefined);
+
+  function onBackClick(event) {
+    restProps.onClickBack?.(event);
+    restProps.onclickback?.(event);
+    restProps.onBackClick?.(event);
+    restProps.onbackclick?.(event);
   }
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
+<div class={classes} {...restProps}>
   {#if backLink}
     <Link
       href={backLinkUrl || '#'}
@@ -51,8 +35,8 @@
       force={backLinkForce || undefined}
       class={!backLinkText ? 'icon-only' : undefined}
       text={backLinkText}
-      onClick={onBackClick}
+      onclick={onBackClick}
     />
   {/if}
-  <slot />
+  {@render children?.()}
 </div>

package/components/nav-right.d.ts

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

package/components/nav-right.svelte

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

package/components/nav-title-large.d.ts

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

package/components/nav-title-large.svelte

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

package/components/nav-title.d.ts

@@ -1,12 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface NavTitleProps {
-  title ?: string;
-  subtitle ?: string;
-  sliding ?: boolean;
+interface Props {
+  title?: string | Snippet;
+  subtitle?: string | Snippet;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -14,14 +13,20 @@ interface NavTitleProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface NavTitleProps {}
+interface NavTitleProps extends Props {}
+
+interface NavTitleEvents extends Record<'',{}>{}
+
 
 
 declare class NavTitle extends SvelteComponent<
-  NavTitleProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof NavTitleProps>,
-  {  },
-  {  'default' : {}; }
+  NavTitleProps,
+  NavTitleEvents,
+  {  }
 > {}
 
 export { NavTitleProps };

package/components/nav-title.svelte

@@ -1,27 +1,32 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, plainText } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    title = undefined,
+    subtitle = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  export let title = undefined;
-  export let subtitle = undefined;
-  export let sliding = undefined;
-
-  $: classes = classNames(
-    className,
-    'title',
-    {
-      sliding,
-    },
-    colorClasses($$props),
-  );
+  const classes = $derived(classNames(className, 'title', {}, colorClasses(restProps)));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  {#if typeof title !== 'undefined'}{plainText(title)}{/if}
-  {#if typeof subtitle !== 'undefined'}<span class="subtitle">{plainText(subtitle)}</span>{/if}
-  <slot />
+<div class={classes} {...restProps}>
+  {#if typeof title === 'function'}
+    {@render title?.()}
+  {:else}
+    {title}
+  {/if}
+  {#if typeof subtitle !== 'undefined'}
+    <span class="subtitle">
+      {#if typeof subtitle === 'function'}
+        {@render subtitle?.()}
+      {:else}
+        {subtitle}
+      {/if}
+    </span>
+  {/if}
+  {@render children?.()}
 </div>

package/components/navbar.d.ts

@@ -1,24 +1,23 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface NavbarProps {
-  backLink ?: boolean | string;
-  backLinkUrl ?: string;
-  backLinkForce ?: boolean;
-  backLinkShowText ?: boolean;
-  sliding ?: boolean;
-  title ?: string;
-  subtitle ?: string;
-  hidden ?: boolean;
-  outline ?: boolean;
-  innerClass ?: string;
-  innerClassName ?: string;
-  large ?: boolean;
-  largeTransparent ?: boolean;
-  transparent ?: boolean;
-  titleLarge ?: string;
+interface Props {
+  backLink?: boolean | string;
+  backLinkUrl?: string;
+  backLinkForce?: boolean;
+  backLinkShowText?: boolean;
+  title?: string | Snippet;
+  subtitle?: string | Snippet;
+  hidden?: boolean;
+  outline?: boolean;
+  innerClass?: string;
+  innerClassName?: string;
+  large?: boolean;
+  largeTransparent?: boolean;
+  transparent?: boolean;
+  titleLarge?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -26,22 +25,42 @@ interface NavbarProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onNavbarHide ?: (...args: any[]) => void;
-  onNavbarShow ?: (...args: any[]) => void;
-  onNavbarExpand ?: (...args: any[]) => void;
-  onNavbarCollapse ?: (...args: any[]) => void;
-  onNavbarTransparentShow ?: (...args: any[]) => void;
-  onNavbarTransparentHide ?: (...args: any[]) => void;
-  onBackClick ?: (event?: any) => void;
-  onClickBack ?: (event?: any) => void;
+  onNavbarHide?: (...args: any[]) => void;
+  onNavbarShow?: (...args: any[]) => void;
+  onNavbarExpand?: (...args: any[]) => void;
+  onNavbarCollapse?: (...args: any[]) => void;
+  onNavbarTransparentShow?: (...args: any[]) => void;
+  onNavbarTransparentHide?: (...args: any[]) => void;
+  onBackClick?: (event?: any) => void;
+  onClickBack?: (event?: any) => void;
+  beforeInner?: Snippet;
+  navLeft?: Snippet;
+  left?: Snippet;
+  navRight?: Snippet;
+  right?: Snippet;
+  largeTitle?: Snippet;
+  children?: Snippet;
+  afterInner?: Snippet;
+  onnavbarhide?: () => void;
+  onnavbarshow?: () => void;
+  onnavbartransparentshow?: () => void;
+  onnavbartransparenthide?: () => void;
+  onnavbarexpand?: () => void;
+  onnavbarcollapse?: () => void;
+  onclickback?: () => void;
 }
 
+interface NavbarProps {}
+interface NavbarProps extends Props {}
+
+interface NavbarEvents extends Record<'',{}>{}
+
 
 
 declare class Navbar extends SvelteComponent<
-  NavbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof NavbarProps>,
-  { navbarHide: CustomEvent<void>; navbarShow: CustomEvent<void>; navbarTransparentShow: CustomEvent<void>; navbarTransparentHide: CustomEvent<void>; navbarExpand: CustomEvent<void>; navbarCollapse: CustomEvent<void>; clickBack: CustomEvent<void>; },
-  {  'before-inner' : {};  'nav-left' : {};  'left' : {};  'title' : {};  'nav-right' : {};  'right' : {};  'title-large' : {};  'default' : {};  'after-inner' : {}; }
+  NavbarProps,
+  NavbarEvents,
+  {  }
 > {}
 
 export { NavbarProps };