framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/messagebar-sheet-image.d.ts

@@ -1,11 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface MessagebarSheetImageProps {
-  image ?: string;
-  checked ?: boolean;
+interface Props {
+  image?: string | Snippet;
+  checked?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -13,17 +13,26 @@ interface MessagebarSheetImageProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onChecked ?: (event?: any) => void;
-  onUnchecked ?: (event?: any) => void;
-  onChange ?: (event?: any) => void;
+  onChecked?: (event?: any) => void;
+  onUnchecked?: (event?: any) => void;
+  onChange?: (event?: any) => void;
+  children?: Snippet;
+  onchecked?: () => void;
+  onunchecked?: () => void;
+  onchange?: () => void;
 }
 
+interface MessagebarSheetImageProps {}
+interface MessagebarSheetImageProps extends Props {}
+
+interface MessagebarSheetImageEvents extends Record<'',{}>{}
+
 
 
 declare class MessagebarSheetImage extends SvelteComponent<
-  MessagebarSheetImageProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof MessagebarSheetImageProps>,
-  { checked: CustomEvent<void>; unchecked: CustomEvent<void>; change: CustomEvent<void>; },
-  {  'default' : {}; }
+  MessagebarSheetImageProps,
+  MessagebarSheetImageEvents,
+  {  }
 > {}
 
 export { MessagebarSheetImageProps };

package/components/messagebar-sheet-image.svelte

@@ -1,36 +1,44 @@
 <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 {
+    style = undefined,
+    class: className,
+    image = undefined,
+    checked = false,
+    children,
+    ...restProps
+  } = $props();
 
-  export let style = undefined;
+  const classes = $derived(
+    classNames(className, 'messagebar-sheet-image', 'checkbox', colorClasses(restProps)),
+  );
 
-  let className = undefined;
-  export { className as class };
-
-  export let image = undefined;
-  export let checked = false;
-
-  $: classes = classNames(className, 'messagebar-sheet-image', 'checkbox', colorClasses($$props));
-
-  $: styles = `${style || ''}`;
+  const styles = $derived(`${style || ''}`);
 
   function onChange(event) {
-    if (event.target.checked) emit('checked', [event]);
-    else emit('unchecked', [event]);
-    emit('change', [event]);
+    if (event.target.checked) {
+      restProps.onChecked?.(event);
+      restProps.onchecked?.(event);
+    } else {
+      restProps.onUnchecked?.(event);
+      restProps.onunchecked?.(event);
+    }
+    restProps.onChange?.(event);
+    restProps.onchange?.(event);
     checked = event.target.checked;
   }
 </script>
 
-<label class={classes} style={styles} {...restProps($$restProps)}>
-  <input type="checkbox" {checked} on:change={onChange} />
-  <i class="icon icon-checkbox" />
-  {#if image}
+<label class={classes} style={styles} {...restProps}>
+  <input type="checkbox" {checked} onchange={onChange} />
+  <i class="icon icon-checkbox"></i>
+  {#if image && typeof image === 'string'}
     <img src={image} alt="" />
   {/if}
-  <slot />
+  {#if typeof image === 'function'}
+    {@render image?.()}
+  {/if}
+  {@render children?.()}
 </label>

package/components/messagebar-sheet-item.d.ts

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

package/components/messagebar-sheet-item.svelte

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

package/components/messagebar-sheet.d.ts

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

package/components/messagebar-sheet.svelte

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

package/components/messagebar.d.ts

@@ -1,27 +1,27 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Messagebar } from 'framework7/types';
 
 
-interface MessagebarProps {
-  sheetVisible ?: boolean;
-  attachmentsVisible ?: boolean;
-  top ?: boolean;
-  resizable ?: boolean;
-  bottomOffset ?: number;
-  topOffset ?: number;
-  maxHeight ?: number;
-  resizePage ?: boolean;
-  sendLink ?: string;
-  value ?: string | number | Array<any>;
-  disabled ?: boolean;
-  readonly ?: boolean;
-  textareaId ?: number | string;
-  name ?: string;
-  placeholder ?: string;
-  init ?: boolean;
+interface Props {
+  sheetVisible?: boolean;
+  attachmentsVisible?: boolean;
+  top?: boolean;
+  resizable?: boolean;
+  bottomOffset?: number;
+  topOffset?: number;
+  maxHeight?: number;
+  resizePage?: boolean;
+  sendLink?: string | Snippet;
+  value?: string | number | Array<any>;
+  disabled?: boolean;
+  readonly?: boolean;
+  textareaId?: number | string;
+  name?: string;
+  placeholder?: string;
+  init?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -29,24 +29,46 @@ interface MessagebarProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onChange ?: (event?: any) => void;
-  onInput ?: (event?: any) => void;
-  onFocus ?: (event?: any) => void;
-  onBlur ?: (event?: any) => void;
-  onSubmit ?: (value?: any, clear?: any) => void;
-  onSend ?: (value?: any, clear?: any) => void;
-  onClick ?: (event?: any) => void;
-  onMessagebarAttachmentDelete ?: (instance?: Messagebar.Messagebar, attachmentEl?: HTMLElement, attachmentElIndex?: number) => void;
-  onMessagebarAttachmentClick ?: (instance?: Messagebar.Messagebar, attachmentEl?: HTMLElement, attachmentElIndex?: number) => void;
-  onMessagebarResizePage ?: (instance?: Messagebar.Messagebar) => void;
+  onChange?: (event?: any) => void;
+  onInput?: (event?: any) => void;
+  onFocus?: (event?: any) => void;
+  onBlur?: (event?: any) => void;
+  onSubmit?: (value?: any, clear?: any) => void;
+  onSend?: (value?: any, clear?: any) => void;
+  onClick?: (event?: any) => void;
+  onMessagebarAttachmentDelete?: (instance?: Messagebar.Messagebar, attachmentEl?: HTMLElement, attachmentElIndex?: number) => void;
+  onMessagebarAttachmentClick?: (instance?: Messagebar.Messagebar, attachmentEl?: HTMLElement, attachmentElIndex?: number) => void;
+  onMessagebarResizePage?: (instance?: Messagebar.Messagebar) => void;
+  beforeInner?: Snippet;
+  innerStart?: Snippet;
+  beforeArea?: Snippet;
+  afterArea?: Snippet;
+  innerEnd?: Snippet;
+  children?: Snippet;
+  afterInner?: Snippet;
+  onchange?: () => void;
+  oninput?: () => void;
+  onfocus?: () => void;
+  onblur?: () => void;
+  onsubmit?: () => void;
+  onsend?: () => void;
+  onclick?: () => void;
+  onmessagebarattachmentdelete?: () => void;
+  onmessagebarattachmentclick?: () => void;
+  onmessagebarresizepage?: () => void;
 }
 
+interface MessagebarProps {}
+interface MessagebarProps extends Props {}
+
+interface MessagebarEvents extends Record<'',{}>{}
+
 
 
 declare class Messagebar extends SvelteComponent<
-  MessagebarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof MessagebarProps>,
-  { change: CustomEvent<void>; input: CustomEvent<void>; focus: CustomEvent<void>; blur: CustomEvent<void>; submit: CustomEvent<void>; send: CustomEvent<void>; click: CustomEvent<void>; messagebarAttachmentDelete: CustomEvent<void>; messagebarAttachmentClick: CustomEvent<void>; messagebarResizePage: CustomEvent<void>; },
-  {  'before-inner' : {};  'inner-start' : {};  'before-area' : {};  'after-inner' : {};  'send-link' : {};  'inner-end' : {};  'default' : {}; }
+  MessagebarProps,
+  MessagebarEvents,
+  {  }
 > {}
 
 export { MessagebarProps };

package/components/messagebar.svelte

@@ -1,61 +1,65 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy, afterUpdate } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, noUndefinedProps, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, noUndefinedProps } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
 
   import Link from './link.svelte';
   import Input from './input.svelte';
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let sheetVisible = false;
-  export let attachmentsVisible = false;
-  export let top = false;
-  export let resizable = true;
-  export let bottomOffset = 0;
-  export let topOffset = 0;
-  export let maxHeight = undefined;
-  export let resizePage = true;
-  export let sendLink = undefined;
-  export let value = undefined;
-  export let disabled = false;
-  export let readonly = false;
-  export let textareaId = undefined;
-  export let name = undefined;
-  export let placeholder = 'Message';
-
-  export let init = true;
-
-  export let f7Slot = 'fixed';
-
-  let el;
-  let f7Messagebar;
-  let updateSheetVisible;
-  let updateAttachmentsVisible;
+  import ToolbarPane from './toolbar-pane.svelte';
+
+  let {
+    class: className,
+    sheetVisible = false,
+    attachmentsVisible = false,
+    top = false,
+    resizable = true,
+    bottomOffset = 0,
+    topOffset = 0,
+    maxHeight = undefined,
+    resizePage = true,
+    sendLink = undefined,
+    value = undefined,
+    disabled = false,
+    readonly = false,
+    textareaId = undefined,
+    name = undefined,
+    placeholder = 'Message',
+    init = true,
+    f7Slot = 'fixed',
+    children,
+    beforeInner,
+    innerStart,
+    beforeArea,
+    afterArea,
+    innerEnd,
+    afterInner,
+    ...restProps
+  } = $props();
+
+  let el = $state(undefined);
+  let f7Messagebar = $state(undefined);
+  let updateSheetVisible = $state(false);
+  let updateAttachmentsVisible = $state(false);
 
   export function instance() {
     return f7Messagebar;
   }
 
-  $: classes = classNames(
-    className,
-    'toolbar',
-    'messagebar',
-    {
-      'messagebar-attachments-visible': attachmentsVisible,
-      'messagebar-sheet-visible': sheetVisible,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'toolbar',
+      'messagebar',
+      {
+        'messagebar-attachments-visible': attachmentsVisible,
+        'messagebar-sheet-visible': sheetVisible,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  $: hasSendLinkSlots = $$slots['send-link'];
-
-  let initialWatchedSheet = false;
+  let initialWatchedSheet = $state(false);
   function watchSheetVisible() {
     if (!initialWatchedSheet) {
       initialWatchedSheet = true;
@@ -64,7 +68,7 @@
     if (!resizable || !f7Messagebar) return;
     updateSheetVisible = true;
   }
-  let initialWatchedAttachments;
+  let initialWatchedAttachments = $state(false);
   function watchAttachmentsVisible() {
     if (!initialWatchedAttachments) {
       initialWatchedAttachments = true;
@@ -74,24 +78,28 @@
     updateAttachmentsVisible = true;
   }
 
-  $: watchSheetVisible(sheetVisible);
-  $: watchAttachmentsVisible(attachmentsVisible);
+  $effect(() => watchSheetVisible(sheetVisible));
+  $effect(() => watchAttachmentsVisible(attachmentsVisible));
 
   function onChange(event) {
-    emit('change', [...event.detail]);
+    restProps.onChange?.(event);
+    restProps.onchange?.(event);
   }
 
   function onInput(event) {
-    emit('input', [...event.detail]);
+    restProps.onInput?.(event);
+    restProps.oninput?.(event);
     value = event.detail[0].target.value;
   }
 
   function onFocus(event) {
-    emit('focus', [...event.detail]);
+    restProps.onFocus?.(event);
+    restProps.onfocus?.(event);
   }
 
   function onBlur(event) {
-    emit('blur', [...event.detail]);
+    restProps.onBlur?.(event);
+    restProps.onblur?.(event);
   }
 
   function onClick(event) {
@@ -101,22 +109,27 @@
           f7Messagebar.clear();
         }
       : () => {};
-
-    emit('submit', [inputValue, clear]);
-    emit('send', [inputValue, clear]);
-    emit('click', [event]);
+    restProps.onSubmit?.(inputValue, clear);
+    restProps.onsubmit?.(inputValue, clear);
+    restProps.onSend?.(inputValue, clear);
+    restProps.onsend?.(inputValue, clear);
+    restProps.onClick?.(event);
+    restProps.onclick?.(event);
   }
 
   function onAttachmentDelete(inst, attachmentEl, attachmentElIndex) {
-    emit('messagebarAttachmentDelete', [inst, attachmentEl, attachmentElIndex]);
+    restProps.onMessagebarAttachmentDelete?.(inst, attachmentEl, attachmentElIndex);
+    restProps.onmessagebarattachmentdelete?.(inst, attachmentEl, attachmentElIndex);
   }
 
   function onAttachmentClick(inst, attachmentEl, attachmentElIndex) {
-    emit('messagebarAttachmentClick', [inst, attachmentEl, attachmentElIndex]);
+    restProps.onMessagebarAttachmentClick?.(inst, attachmentEl, attachmentElIndex);
+    restProps.onmessagebarattachmentclick?.(inst, attachmentEl, attachmentElIndex);
   }
 
   function onResizePage(inst) {
-    emit('messagebarResizePage', [inst]);
+    restProps.onMessagebarResizePage?.(inst);
+    restProps.onmessagebarresizepage?.(inst);
   }
 
   onMount(() => {
@@ -148,7 +161,7 @@
     });
   });
 
-  afterUpdate(() => {
+  $effect(() => {
     if (!f7Messagebar) return;
     if (el && app.f7) {
       const dom7 = app.f7.$;
@@ -178,12 +191,17 @@
   });
 </script>
 
-<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)}>
-  <slot messagebar={f7Messagebar} name="before-inner" />
+<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps}>
+  {@render beforeInner?.(f7Messagebar)}
+
   <div class="toolbar-inner">
-    <slot messagebar={f7Messagebar} name="inner-start" />
+    {#if innerStart}
+      <ToolbarPane>
+        {@render innerStart?.(f7Messagebar)}
+      </ToolbarPane>
+    {/if}
     <div class="messagebar-area">
-      <slot messagebar={f7Messagebar} name="before-area" />
+      {@render beforeArea?.(f7Messagebar)}
       <Input
         inputId={textareaId}
         type="textarea"
@@ -194,21 +212,26 @@
         {readonly}
         {resizable}
         value={typeof value === 'undefined' ? '' : value}
-        on:input={onInput}
-        on:change={onChange}
-        on:focus={onFocus}
-        on:blur={onBlur}
+        oninput={onInput}
+        onchange={onChange}
+        onfocus={onFocus}
+        onblur={onBlur}
       />
-      <slot messagebar={f7Messagebar} name="after-inner" />
+      {@render afterArea?.(f7Messagebar)}
     </div>
-    {#if (sendLink && sendLink.length > 0) || hasSendLinkSlots}
-      <Link {onClick}>
-        <slot messagebar={f7Messagebar} name="send-link" />
-        {sendLink}
-      </Link>
+    {#if sendLink || innerEnd}
+      <ToolbarPane>
+        {#if sendLink}
+          <Link onclick={onClick}>
+            {@render sendLink?.(f7Messagebar)}
+            {sendLink}
+          </Link>
+        {/if}
+        {@render innerEnd?.(f7Messagebar)}
+      </ToolbarPane>
     {/if}
-    <slot messagebar={f7Messagebar} name="inner-end" />
-    <slot messagebar={f7Messagebar} />
+
+    {@render children?.(f7Messagebar)}
   </div>
-  <slot messagebar={f7Messagebar} name="after-inner" />
+  {@render afterInner?.(f7Messagebar)}
 </div>

package/components/messages-title.d.ts

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

package/components/messages-title.svelte

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