framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/text-editor.svelte

@@ -1,38 +1,42 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } 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';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    mode = undefined,
+    value = undefined,
+    buttons = undefined,
+    customButtons = undefined,
+    dividers = undefined,
+    imageUrlText = undefined,
+    linkUrlText = undefined,
+    placeholder = undefined,
+    clearFormattingOnPaste = undefined,
+    resizable = false,
+    rootStart,
+    rootEnd,
+    root,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let mode = undefined;
-  export let value = undefined;
-  export let buttons = undefined;
-  export let customButtons = undefined;
-  export let dividers = undefined;
-  export let imageUrlText = undefined;
-  export let linkUrlText = undefined;
-  export let placeholder = undefined;
-  export let clearFormattingOnPaste = undefined;
-  export let resizable = false;
-
-  let el;
+  let el = $state(null);
   let f7TextEditor;
 
   export function instance() {
     return f7TextEditor;
   }
 
-  $: classes = classNames(
-    className,
-    'text-editor',
-    resizable && 'text-editor-resizable',
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'text-editor',
+      resizable && 'text-editor-resizable',
+      colorClasses(restProps),
+    ),
   );
 
   function watchValue(newValue) {
@@ -41,40 +45,51 @@
     }
   }
 
-  $: watchValue(value);
+  $effect(() => watchValue(value));
 
   function onChange(editor, editorValue) {
-    emit('textEditorChange', [editorValue]);
+    restProps.onTextEditorChange?.(editorValue);
+    restProps.ontexteditorchange?.(editorValue);
   }
   function onInput(editor, editorValue) {
-    emit('textEditorInput', [editorValue]);
+    restProps.onTextEditorInput?.(editorValue);
+    restProps.ontexteditorinput?.(editorValue);
   }
   function onFocus() {
-    emit('textEditorFocus');
+    restProps.onTextEditorFocus?.();
+    restProps.ontexteditorfocus?.();
   }
   function onBlur() {
-    emit('textEditorBlur');
+    restProps.onTextEditorBlur?.();
+    restProps.ontexteditorblur?.();
   }
   function onButtonClick(editor, button) {
-    emit('textEditorButtonClick', [button]);
+    restProps.onTextEditorButtonClick?.(button);
+    restProps.ontexteditorbuttonclick?.(button);
   }
   function onKeyboardOpen() {
-    emit('textEditorKeyboardOpen');
+    restProps.onTextEditorKeyboardOpen?.();
+    restProps.ontexteditorkeyboardopen?.();
   }
   function onKeyboardClose() {
-    emit('textEditorKeyboardClose');
+    restProps.onTextEditorKeyboardClose?.();
+    restProps.ontexteditorkeyboardclose?.();
   }
   function onPopoverOpen() {
-    emit('textEditorPopoverOpen');
+    restProps.onTextEditorPopoverOpen?.();
+    restProps.ontexteditorpopoveropen?.();
   }
   function onPopoverClose() {
-    emit('textEditorPopoverClose');
+    restProps.onTextEditorPopoverClose?.();
+    restProps.ontexteditorpopoverclose?.();
   }
   const onInsertLink = (editor, url) => {
-    emit('textEditorInsertLink', [url]);
+    restProps.onTextEditorInsertLink?.(url);
+    restProps.ontexteditorinsertlink?.(url);
   };
   const onInsertImage = (editor, url) => {
-    emit('textEditorInsertImage', [url]);
+    restProps.onTextEditorInsertImage?.(url);
+    restProps.ontexteditorinsertimage?.(url);
   };
 
   onMount(() => {
@@ -116,11 +131,11 @@
   });
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
-  <slot textEditor={f7TextEditor} name="root-start" />
+<div bind:this={el} class={classes} {...restProps}>
+  {@render rootStart?.(f7TextEditor)}
   <div class="text-editor-content" contenteditable>
-    <slot textEditor={f7TextEditor} />
+    {@render children?.(f7TextEditor)}
   </div>
-  <slot textEditor={f7TextEditor} name="root-end" />
-  <slot textEditor={f7TextEditor} name="root" />
+  {@render rootEnd?.(f7TextEditor)}
+  {@render root?.(f7TextEditor)}
 </div>

package/components/toggle.d.ts

@@ -1,20 +1,20 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Toggle } from 'framework7/types';
 
 
-interface ToggleProps {
-  init ?: boolean;
-  checked ?: boolean;
-  defaultChecked ?: boolean;
-  disabled ?: boolean;
-  readonly ?: boolean;
-  name ?: string;
-  value ?: string | number | Array<any>;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
+interface Props {
+  init?: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  name?: string;
+  value?: string | number | Array<any>;
+  tooltip?: string;
+  tooltipTrigger?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -22,15 +22,22 @@ interface ToggleProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onToggleChange ?: (...args: any[]) => void;
-  onChange ?: (event?: any) => void;
+  onToggleChange?: (...args: any[]) => void;
+  onChange?: (event?: any) => void;
+  onchange?: () => void;
+  ontogglechange?: () => void;
 }
 
+interface ToggleProps {}
+interface ToggleProps extends Props {}
+
+interface ToggleEvents extends Record<'',{}>{}
+
 
 
 declare class Toggle extends SvelteComponent<
-  ToggleProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ToggleProps>,
-  { change: CustomEvent<void>; toggleChange: CustomEvent<void>; },
+  ToggleProps,
+  ToggleEvents,
   {  }
 > {}
 

package/components/toggle.svelte

@@ -1,41 +1,40 @@
 <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 { useTooltip } from '../shared/use-tooltip.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    init = true,
+    checked = undefined,
+    disabled = undefined,
+    readonly = undefined,
+    name = undefined,
+    value = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let init = true;
-  export let checked = undefined;
-  export let disabled = undefined;
-  export let readonly = undefined;
-  export let name = undefined;
-  export let value = undefined;
-
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-
-  let el;
-  let inputEl;
+  let el = $state(null);
+  let inputEl = $state(null);
   let f7Toggle;
 
   export function instance() {
     return f7Toggle;
   }
 
-  $: classes = classNames(
-    'toggle',
-    className,
-    {
-      disabled,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      'toggle',
+      className,
+      {
+        disabled,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   let initialWatched = false;
@@ -48,10 +47,11 @@
     f7Toggle.checked = isChecked;
   }
 
-  $: watchChecked(checked);
+  $effect(() => watchChecked(checked));
 
   function onChange(event) {
-    emit('change', [event]);
+    restProps.onChange?.(event);
+    restProps.onchange?.(event);
   }
 
   onMount(() => {
@@ -61,7 +61,8 @@
         el,
         on: {
           change(toggle) {
-            emit('toggleChange', [toggle.checked]);
+            restProps.onToggleChange?.(toggle.checked);
+            restProps.ontogglechange?.(toggle.checked);
             checked = toggle.checked;
           },
         },
@@ -77,12 +78,7 @@
   });
 </script>
 
-<label
-  bind:this={el}
-  class={classes}
-  {...restProps($$restProps)}
-  use:useTooltip={{ tooltip, tooltipTrigger }}
->
+<label bind:this={el} class={classes} {...restProps} use:useTooltip={{ tooltip, tooltipTrigger }}>
   <input
     bind:this={inputEl}
     type="checkbox"
@@ -91,7 +87,7 @@
     {readonly}
     {checked}
     value={typeof value === 'undefined' ? '' : value}
-    on:change={onChange}
+    onchange={onChange}
   />
-  <span class="toggle-icon" />
+  <span class="toggle-icon"></span>
 </label>

package/components/toolbar-pane.d.ts

@@ -0,0 +1,24 @@
+
+import { SvelteComponent, Snippet } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
+
+
+interface Props {
+  children?: Snippet;
+}
+
+interface ToolbarPaneProps {}
+interface ToolbarPaneProps extends Props {}
+
+interface ToolbarPaneEvents extends Record<'',{}>{}
+
+
+
+declare class ToolbarPane extends SvelteComponent<
+  ToolbarPaneProps,
+  ToolbarPaneEvents,
+  {  }
+> {}
+
+export { ToolbarPaneProps };
+export default ToolbarPane;

package/components/toolbar-pane.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { colorClasses } from '../shared/mixins.js';
+  import { classNames } from '../shared/utils.js';
+
+  let { className, id, style, ref, children, ...restProps } = $props();
+
+  let el = $state(undefined);
+
+  const classes = $derived(classNames(className, 'toolbar-pane', colorClasses(restProps)));
+</script>
+
+<div bind:this={el} class={classes} {...restProps}>
+  {@render children?.()}
+</div>

package/components/toolbar.d.ts

@@ -1,22 +1,22 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ToolbarProps {
-  tabbar ?: boolean;
-  icons ?: boolean;
-  scrollable ?: boolean;
-  hidden ?: boolean;
-  outline ?: boolean;
-  position ?: string;
-  topMd ?: boolean;
-  topIos ?: boolean;
-  top ?: boolean;
-  bottomMd ?: boolean;
-  bottomIos ?: boolean;
-  bottom ?: boolean;
-  inner ?: boolean;
+interface Props {
+  tabbar?: boolean;
+  icons?: boolean;
+  scrollable?: boolean;
+  hidden?: boolean;
+  outline?: boolean;
+  position?: string;
+  topMd?: boolean;
+  topIos?: boolean;
+  top?: boolean;
+  bottomMd?: boolean;
+  bottomIos?: boolean;
+  bottom?: boolean;
+  inner?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -24,16 +24,26 @@ interface ToolbarProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onToolbarHide ?: (...args: any[]) => void;
-  onToolbarShow ?: (...args: any[]) => void;
+  onToolbarHide?: (...args: any[]) => void;
+  onToolbarShow?: (...args: any[]) => void;
+  beforeInner?: Snippet;
+  children?: Snippet;
+  afterInner?: Snippet;
+  ontoolbarshow?: () => void;
+  ontoolbarhide?: () => void;
 }
 
+interface ToolbarProps {}
+interface ToolbarProps extends Props {}
+
+interface ToolbarEvents extends Record<'',{}>{}
+
 
 
 declare class Toolbar extends SvelteComponent<
-  ToolbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ToolbarProps>,
-  { toolbarShow: CustomEvent<void>; toolbarHide: CustomEvent<void>; },
-  {  'before-inner' : {};  'default' : {};  'after-inner' : {}; }
+  ToolbarProps,
+  ToolbarEvents,
+  {  }
 > {}
 
 export { ToolbarProps };

package/components/toolbar.svelte

@@ -1,69 +1,77 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy, afterUpdate } from 'svelte';
+  import { setContext, 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 { useTheme } from '../shared/use-theme.js';
-  import { setReactiveContext } from '../shared/set-reactive-context.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    tabbar = false,
+    icons = false,
+    scrollable = false,
+    hidden = false,
+    outline = true,
+    position = undefined,
+    topMd = undefined,
+    topIos = undefined,
+    top = undefined,
+    bottomMd = undefined,
+    bottomIos = undefined,
+    bottom = undefined,
+    inner = true,
+    f7Slot = 'fixed',
+    beforeInner,
+    children,
+    afterInner,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let tabbar = false;
-  export let icons = false;
-  export let scrollable = false;
-  export let hidden = false;
-  export let outline = true;
-  export let position = undefined;
-  export let topMd = undefined;
-  export let topIos = undefined;
-  export let top = undefined;
-  export let bottomMd = undefined;
-  export let bottomIos = undefined;
-  export let bottom = undefined;
-  export let inner = true;
-
-  export let f7Slot = 'fixed';
-
-  let el;
+  let el = $state(undefined);
   let theme = useTheme((t) => {
     theme = t;
   });
 
-  setReactiveContext('TabbarContext', () => ({
-    tabbarHasIcons: icons,
+  setContext('TabbarContext', () => ({
+    value: {
+      tabbarHasIcons: icons,
+    },
   }));
 
-  $: classes = classNames(
-    className,
-    'toolbar',
-    {
-      tabbar,
-      'toolbar-bottom':
-        (theme && theme.md && bottomMd) ||
-        (theme && theme.ios && bottomIos) ||
-        bottom ||
-        position === 'bottom',
-      'toolbar-top':
-        (theme && theme.md && topMd) || (theme && theme.ios && topIos) || top || position === 'top',
-      'tabbar-icons': icons,
-      'tabbar-scrollable': scrollable,
-      'toolbar-hidden': hidden,
-      'no-outline': !outline,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'toolbar',
+      {
+        tabbar,
+        'toolbar-bottom':
+          (theme && theme.md && bottomMd) ||
+          (theme && theme.ios && bottomIos) ||
+          bottom ||
+          position === 'bottom',
+        'toolbar-top':
+          (theme && theme.md && topMd) ||
+          (theme && theme.ios && topIos) ||
+          top ||
+          position === 'top',
+        'tabbar-icons': icons,
+        'tabbar-scrollable': scrollable,
+        'toolbar-hidden': hidden,
+        'no-outline': !outline,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function onShow(toolbarEl) {
     if (el !== toolbarEl) return;
-    emit('toolbarShow');
+    restProps.onToolbarShow?.();
+    restProps.ontoolbarshow?.();
   }
   function onHide(toolbarEl) {
     if (el !== toolbarEl) return;
-    emit('toolbarHide');
+    restProps.onToolbarHide?.();
+    restProps.ontoolbarhide?.();
   }
 
   onMount(() => {
@@ -74,7 +82,7 @@
     });
   });
 
-  afterUpdate(() => {
+  $effect(() => {
     if (tabbar && app.f7 && el) {
       app.f7.toolbar.setHighlight(el);
     }
@@ -87,14 +95,14 @@
   });
 </script>
 
-<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)}>
-  <slot name="before-inner" />
+<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps}>
+  {@render beforeInner?.()}
   {#if inner}
     <div class="toolbar-inner">
-      <slot />
+      {@render children?.()}
     </div>
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
-  <slot name="after-inner" />
+  {@render afterInner?.()}
 </div>

package/components/treeview-item.d.ts

@@ -1,17 +1,17 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface TreeviewItemProps {
-  toggle ?: boolean;
-  itemToggle ?: boolean;
-  selectable ?: boolean;
-  selected ?: boolean;
-  opened ?: boolean;
-  label ?: string;
-  loadChildren ?: boolean;
-  link ?: boolean | string;
+interface Props {
+  toggle?: boolean;
+  itemToggle?: boolean;
+  selectable?: boolean;
+  selected?: boolean;
+  opened?: boolean;
+  label?: string | Snippet;
+  loadChildren?: boolean;
+  link?: boolean | string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -65,18 +65,37 @@ interface TreeviewItemProps {
   iconMd?: string;
   iconColor?: string;
   iconSize?: string | number;
-  onClick ?: (event?: any) => void;
-  onTreeviewOpen ?: (el?: HTMLElement) => void;
-  onTreeviewClose ?: (el?: HTMLElement) => void;
-  onTreeviewLoadChildren ?: (el?: HTMLElement, done?: any) => void;
+  onClick?: (event?: any) => void;
+  onTreeviewOpen?: (el?: HTMLElement) => void;
+  onTreeviewClose?: (el?: HTMLElement) => void;
+  onTreeviewLoadChildren?: (el?: HTMLElement, done?: any) => void;
+  rootStart?: Snippet;
+  contentStart?: Snippet;
+  media?: Snippet;
+  labelStart?: Snippet;
+  content?: Snippet;
+  contentEnd?: Snippet;
+  root?: Snippet;
+  rootEnd?: Snippet;
+  childrenStart?: Snippet;
+  children?: Snippet;
+  onclick?: () => void;
+  ontreeviewopen?: () => void;
+  ontreeviewclose?: () => void;
+  ontreeviewloadchildren?: () => void;
 }
 
+interface TreeviewItemProps {}
+interface TreeviewItemProps extends Props {}
+
+interface TreeviewItemEvents extends Record<'',{}>{}
+
 
 
 declare class TreeviewItem extends SvelteComponent<
-  TreeviewItemProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TreeviewItemProps>,
-  { click: CustomEvent<void>; treeviewOpen: CustomEvent<void>; treeviewClose: CustomEvent<void>; treeviewLoadChildren: CustomEvent<void>; },
-  {  'root-start' : {};  'content-start' : {};  'media' : {};  'label-start' : {};  'label' : {};  'content' : {};  'content-end' : {};  'root' : {};  'root-end' : {};  'children-start' : {};  'default' : {};  'children' : {}; }
+  TreeviewItemProps,
+  TreeviewItemEvents,
+  {  }
 > {}
 
 export { TreeviewItemProps };