framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/login-screen.svelte

@@ -1,63 +1,60 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
   import { modalStateClasses } from '../shared/modal-state-classes.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    style = '',
+    opened = undefined,
+    animate = undefined,
+    containerEl = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let style = '';
-  export let opened = undefined;
-  export let animate = undefined;
-  export let containerEl = undefined;
-
-  let el;
-  let f7LoginScreen;
-
-  const state = {
-    isOpened: opened,
-    isClosing: false,
-  };
+  let el = $state(null);
+  let f7LoginScreen = $state(null);
+  let isOpened = $state(opened);
+  let isClosing = $state(false);
 
   export function instance() {
     return f7LoginScreen;
   }
 
-  $: classes = classNames(
-    className,
-    'login-screen',
-    modalStateClasses(state),
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'login-screen',
+      modalStateClasses({ isOpened, isClosing }),
+      colorClasses(restProps),
+    ),
   );
 
   function onOpen(instance) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-    emit('loginscreenOpen loginScreenOpen', [instance]);
+    isOpened = true;
+    isClosing = false;
+    restProps.onLoginScreenOpen?.(instance);
+    restProps.onloginscreenopen?.();
     opened = true;
   }
   function onOpened(instance) {
-    emit('loginscreenOpened loginScreenOpened', [instance]);
+    restProps.onLoginScreenOpened?.(instance);
+    restProps.onloginscreenopened?.();
   }
   function onClose(instance) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('loginscreenClose loginScreenClose', [instance]);
+    isOpened = false;
+    isClosing = true;
+    restProps.onLoginScreenClose?.(instance);
+    restProps.onloginscreenclose?.();
+    opened = false;
   }
   function onClosed(instance) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('loginscreenClosed loginScreenClosed', [instance]);
+    isClosing = false;
+    restProps.onLoginScreenClosed?.(instance);
+    restProps.onloginscreenclosed?.();
     opened = false;
   }
 
@@ -72,7 +69,7 @@
     else f7LoginScreen.close();
   }
 
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   onMount(() => {
     const params = {
@@ -100,6 +97,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <slot loginScreen={f7LoginScreen} />
+<div class={classes} bind:this={el} {style} {...restProps}>
+  {@render children?.(f7LoginScreen)}
 </div>

package/components/message.d.ts

@@ -1,26 +1,26 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface MessageProps {
-  text ?: string;
-  name ?: string;
-  avatar ?: string;
-  type ?: string;
-  image ?: string;
-  header ?: string;
-  footer ?: string;
-  textHeader ?: string;
-  textFooter ?: string;
-  first ?: boolean;
-  last ?: boolean;
-  tail ?: boolean;
-  sameName ?: boolean;
-  sameHeader ?: boolean;
-  sameFooter ?: boolean;
-  sameAvatar ?: boolean;
-  typing ?: boolean;
+interface Props {
+  text?: string | Snippet;
+  name?: string | Snippet;
+  avatar?: string | Snippet;
+  type?: string;
+  image?: string | Snippet;
+  header?: string | Snippet;
+  footer?: string | Snippet;
+  textHeader?: string | Snippet;
+  textFooter?: string | Snippet;
+  first?: boolean;
+  last?: boolean;
+  tail?: boolean;
+  sameName?: boolean;
+  sameHeader?: boolean;
+  sameFooter?: boolean;
+  sameAvatar?: boolean;
+  typing?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -28,21 +28,40 @@ interface MessageProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onClick ?: (event?: any) => void;
-  onClickName ?: (event?: any) => void;
-  onClickText ?: (event?: any) => void;
-  onClickAvatar ?: (event?: any) => void;
-  onClickHeader ?: (event?: any) => void;
-  onClickFooter ?: (event?: any) => void;
-  onClickBubble ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
+  onClickName?: (event?: any) => void;
+  onClickText?: (event?: any) => void;
+  onClickAvatar?: (event?: any) => void;
+  onClickHeader?: (event?: any) => void;
+  onClickFooter?: (event?: any) => void;
+  onClickBubble?: (event?: any) => void;
+  start?: Snippet;
+  contentStart?: Snippet;
+  bubbleStart?: Snippet;
+  bubbleEnd?: Snippet;
+  children?: Snippet;
+  contentEnd?: Snippet;
+  end?: Snippet;
+  onclick?: () => void;
+  onclickname?: () => void;
+  onclicktext?: () => void;
+  onclickavatar?: () => void;
+  onclickheader?: () => void;
+  onclickfooter?: () => void;
+  onclickbubble?: () => void;
 }
 
+interface MessageProps {}
+interface MessageProps extends Props {}
+
+interface MessageEvents extends Record<'',{}>{}
+
 
 
 declare class Message extends SvelteComponent<
-  MessageProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof MessageProps>,
-  { click: CustomEvent<void>; clickName: CustomEvent<void>; clickText: CustomEvent<void>; clickAvatar: CustomEvent<void>; clickHeader: CustomEvent<void>; clickFooter: CustomEvent<void>; clickBubble: CustomEvent<void>; },
-  {  'start' : {};  'avatar' : {};  'content-start' : {};  'name' : {};  'header' : {};  'bubble-start' : {};  'image' : {};  'text-header' : {};  'text' : {};  'text-footer' : {};  'bubble-end' : {};  'default' : {};  'footer' : {};  'content-end' : {};  'end' : {}; }
+  MessageProps,
+  MessageEvents,
+  {  }
 > {}
 
 export { MessageProps };

package/components/message.svelte

@@ -1,137 +1,166 @@
 <script>
   /* eslint-disable no-undef */
-  import { createEventDispatcher } 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, plainText } from '../shared/utils.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    text = undefined,
+    htmlText = undefined,
+    name = undefined,
+    avatar = undefined,
+    type = 'sent',
+    image = undefined,
+    header = undefined,
+    footer = undefined,
+    textHeader = undefined,
+    textFooter = undefined,
+    first = undefined,
+    last = undefined,
+    tail = undefined,
+    sameName = undefined,
+    sameHeader = undefined,
+    sameFooter = undefined,
+    sameAvatar = undefined,
+    typing = undefined,
+    start = undefined,
+    contentStart = undefined,
+    contentEnd = undefined,
+    end = undefined,
+    bubbleStart = undefined,
+    bubbleEnd = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let text = undefined;
-  export let htmlText = undefined;
-  export let name = undefined;
-  export let avatar = undefined;
-  export let type = 'sent';
-  export let image = undefined;
-  export let header = undefined;
-  export let footer = undefined;
-  export let textHeader = undefined;
-  export let textFooter = undefined;
-  export let first = undefined;
-  export let last = undefined;
-  export let tail = undefined;
-  export let sameName = undefined;
-  export let sameHeader = undefined;
-  export let sameFooter = undefined;
-  export let sameAvatar = undefined;
-  export let typing = undefined;
-
-  $: classes = classNames(
-    className,
-    'message',
-    {
-      'message-sent': type === 'sent' || !type,
-      'message-received': type === 'received',
-      'message-typing': typing,
-      'message-first': first,
-      'message-last': last,
-      'message-tail': tail,
-      'message-same-name': sameName,
-      'message-same-header': sameHeader,
-      'message-same-footer': sameFooter,
-      'message-same-avatar': sameAvatar,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'message',
+      {
+        'message-sent': type === 'sent' || !type,
+        'message-received': type === 'received',
+        'message-typing': typing,
+        'message-first': first,
+        'message-last': last,
+        'message-tail': tail,
+        'message-same-name': sameName,
+        'message-same-header': sameHeader,
+        'message-same-footer': sameFooter,
+        'message-same-avatar': sameAvatar,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  $: hasAvatarSlots = $$slots.avatar;
-  $: hasNameSlots = $$slots.name;
-  $: hasHeaderSlots = $$slots.header;
-  $: hasImageSlots = $$slots.image;
-  $: hasTextHeaderSlots = $$slots['text-header'];
-  $: hasTextFooterSlots = $$slots['text-footer'];
-  $: hasTextSlots = $$slots.text;
-  $: hasFooterSlots = $$slots.footer;
+  const hasAvatarSlots = $derived(avatar);
+  const hasNameSlots = $derived(name);
+  const hasHeaderSlots = $derived(header);
+  const hasImageSlots = $derived(image);
+  const hasTextHeaderSlots = $derived(textHeader);
+  const hasTextFooterSlots = $derived(textFooter);
+  const hasTextSlots = $derived(text);
+  const hasFooterSlots = $derived(footer);
 
   function onClick() {
-    emit('click');
+    restProps.onclick?.();
   }
 
   function onNameClick() {
-    emit('clickName');
+    restProps.onclickname?.();
+    restProps.onClickName?.();
   }
 
   function onTextClick() {
-    emit('clickText');
+    restProps.onclicktext?.();
+    restProps.onClickText?.();
   }
 
   function onAvatarClick() {
-    emit('clickAvatar');
+    restProps.onclickavatar?.();
+    restProps.onClickAvatar?.();
   }
 
   function onHeaderClick() {
-    emit('clickHeader');
+    restProps.onclickheader?.();
+    restProps.onClickHeader?.();
   }
 
   function onFooterClick() {
-    emit('clickFooter');
+    restProps.onclickfooter?.();
+    restProps.onClickFooter?.();
   }
 
   function onBubbleClick() {
-    emit('clickBubble');
+    restProps.onclickbubble?.();
+    restProps.onClickBubble?.();
   }
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
-<div class={classes} on:click={onClick} {...restProps($$restProps)}>
-  <slot name="start" />
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={classes} onclick={onClick} {...restProps}>
+  {@render start?.()}
   {#if avatar || hasAvatarSlots}
     <div
-      on:click={onAvatarClick}
+      onclick={onAvatarClick}
       class="message-avatar"
-      style={avatar ? `background-image: url(${avatar})` : undefined}
+      style={avatar && typeof avatar === 'string' ? `background-image: url(${avatar})` : undefined}
     >
-      <slot name="avatar" />
+      {#if typeof avatar === 'function'}
+        {@render avatar?.()}
+      {/if}
     </div>
   {/if}
   <div class="message-content">
-    <slot name="content-start" />
+    {@render contentStart?.()}
     {#if hasNameSlots || name}
-      <div class="message-name" on:click={onNameClick}>
-        {plainText(name)}
-        <slot name="name" />
+      <div class="message-name" onclick={onNameClick}>
+        {#if typeof name === 'function'}
+          {@render name?.()}
+        {:else}
+          {name}
+        {/if}
       </div>
     {/if}
     {#if hasHeaderSlots || header}
-      <div class="message-header" on:click={onHeaderClick}>
-        {plainText(header)}
-        <slot name="header" />
+      <div class="message-header" onclick={onHeaderClick}>
+        {#if typeof header === 'function'}
+          {@render header?.()}
+        {:else}
+          {header}
+        {/if}
       </div>
     {/if}
-    <div class="message-bubble" on:click={onBubbleClick}>
-      <slot name="bubble-start" />
+    <div class="message-bubble" onclick={onBubbleClick}>
+      {@render bubbleStart?.()}
       {#if hasImageSlots || image}
         <div class="message-image">
-          {#if image}
+          {#if typeof image === 'function'}
+            {@render image?.()}
+          {:else if typeof image === 'string' && image}
             <img src={image} />
           {/if}
-          <slot name="image" />
         </div>
       {/if}
       {#if hasTextHeaderSlots || textHeader}
         <div class="message-text-header">
-          {plainText(textHeader)}
-          <slot name="text-header" />
+          {#if typeof textHeader === 'function'}
+            {@render textHeader?.()}
+          {:else}
+            {textHeader}
+          {/if}
         </div>
       {/if}
       {#if hasTextSlots || text || htmlText || typing}
-        <div class="message-text" on:click={onTextClick}>
-          {plainText(text)}
+        <div class="message-text" onclick={onTextClick}>
+          {#if typeof text === 'function'}
+            {@render text?.()}
+          {:else}
+            {text}
+          {/if}
           {#if htmlText}{@html htmlText}{/if}
-          <slot name="text" />
+
           {#if typing}
             <div class="message-typing-indicator">
               <div />
@@ -143,20 +172,26 @@
       {/if}
       {#if hasTextFooterSlots || textFooter}
         <div class="message-text-footer">
-          {plainText(textFooter)}
-          <slot name="text-footer" />
+          {#if typeof textFooter === 'function'}
+            {@render textFooter?.()}
+          {:else}
+            {textFooter}
+          {/if}
         </div>
       {/if}
-      <slot name="bubble-end" />
-      <slot />
+      {@render bubbleEnd?.()}
+      {@render children?.()}
     </div>
     {#if hasFooterSlots || footer}
-      <div class="message-footer" on:click={onFooterClick}>
-        {plainText(footer)}
-        <slot name="footer" />
+      <div class="message-footer" onclick={onFooterClick}>
+        {#if typeof footer === 'function'}
+          {@render footer?.()}
+        {:else}
+          {footer}
+        {/if}
       </div>
     {/if}
-    <slot name="content-end" />
+    {@render contentEnd?.()}
   </div>
-  <slot name="end" />
+  {@render end?.()}
 </div>

package/components/messagebar-attachment.d.ts

@@ -1,11 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface MessagebarAttachmentProps {
-  image ?: string;
-  deletable ?: boolean;
+interface Props {
+  image?: string | Snippet;
+  deletable?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -13,16 +13,24 @@ interface MessagebarAttachmentProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onAttachmentClick ?: (event?: any) => void;
-  onAttachmentDelete ?: (event?: any) => void;
+  onAttachmentClick?: (event?: any) => void;
+  onAttachmentDelete?: (event?: any) => void;
+  children?: Snippet;
+  onattachmentclick?: () => void;
+  onattachmentdelete?: () => void;
 }
 
+interface MessagebarAttachmentProps {}
+interface MessagebarAttachmentProps extends Props {}
+
+interface MessagebarAttachmentEvents extends Record<'',{}>{}
+
 
 
 declare class MessagebarAttachment extends SvelteComponent<
-  MessagebarAttachmentProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof MessagebarAttachmentProps>,
-  { attachmentClick: CustomEvent<void>; attachmentDelete: CustomEvent<void>; },
-  {  'default' : {}; }
+  MessagebarAttachmentProps,
+  MessagebarAttachmentEvents,
+  {  }
 > {}
 
 export { MessagebarAttachmentProps };

package/components/messagebar-attachment.svelte

@@ -1,35 +1,33 @@
 <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 { classNames } from '../shared/utils.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let { class: className, image = undefined, deletable = true, children, ...restProps } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let image = undefined;
-  export let deletable = true;
-
-  $: classes = classNames(className, 'messagebar-attachment', colorClasses($$props));
+  const classes = $derived(classNames(className, 'messagebar-attachment', colorClasses(restProps)));
 
   function onClick(event) {
-    emit('attachmentClick', [event]);
+    restProps.onAttachmentClick?.();
+    restProps.onattachmentclick?.();
   }
 
   function onDeleteClick(event) {
-    emit('attachmentDelete', [event]);
+    restProps.onAttachmentDelete?.();
+    restProps.onattachmentdelete?.();
   }
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
-<div on:click={onClick} class={classes} {...restProps($$restProps)}>
-  {#if image}
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={onClick} class={classes} {...restProps}>
+  {#if image && typeof image === 'string'}
     <img src={image} />
   {/if}
+  {#if typeof image === 'function'}
+    {@render image?.()}
+  {/if}
   {#if deletable}
-    <span on:click={onDeleteClick} class="messagebar-attachment-delete" />
+    <span onclick={onDeleteClick} class="messagebar-attachment-delete"></span>
   {/if}
-  <slot />
+  {@render children?.()}
 </div>

package/components/messagebar-attachments.d.ts

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

package/components/messagebar-attachments.svelte

@@ -1,14 +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, 'messagebar-attachments', colorClasses($$props));
+  const classes = $derived(
+    classNames(className, 'messagebar-attachments', colorClasses(restProps)),
+  );
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>