framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/subnavbar.svelte

@@ -1,35 +1,27 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  let {
+    class: className,
+    title = undefined,
+    inner = true,
+    f7Slot = 'fixed',
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let sliding = undefined;
-  export let title = undefined;
-  export let inner = true;
-  export let f7Slot = 'fixed';
-
-  $: classes = classNames(
-    className,
-    'subnavbar',
-    {
-      sliding,
-    },
-    colorClasses($$props),
-  );
+  const classes = $derived(classNames(className, 'subnavbar', {}, colorClasses(restProps)));
 </script>
 
-<div class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)}>
+<div class={classes} data-f7-slot={f7Slot} {...restProps}>
   {#if inner}
     <div class="subnavbar-inner">
       {#if title}
         <div class="subnavbar-title">{title}</div>
       {/if}
-      <slot />
+      {@render children?.()}
     </div>
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </div>

package/components/swipeout-actions.d.ts

@@ -1,12 +1,12 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface SwipeoutActionsProps {
-  left ?: boolean;
-  right ?: boolean;
-  side ?: string;
+interface Props {
+  left?: boolean;
+  right?: boolean;
+  side?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -14,14 +14,20 @@ interface SwipeoutActionsProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface SwipeoutActionsProps {}
+interface SwipeoutActionsProps extends Props {}
+
+interface SwipeoutActionsEvents extends Record<'',{}>{}
+
 
 
 declare class SwipeoutActions extends SvelteComponent<
-  SwipeoutActionsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SwipeoutActionsProps>,
-  {  },
-  {  'default' : {}; }
+  SwipeoutActionsProps,
+  SwipeoutActionsEvents,
+  {  }
 > {}
 
 export { SwipeoutActionsProps };

package/components/swipeout-actions.svelte

@@ -1,21 +1,22 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  let {
+    class: className,
+    left = false,
+    right = false,
+    side = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  const sideComputed = $derived(side || (left ? 'left' : right ? 'right' : 'left'));
 
-  export let left = undefined;
-  export let right = undefined;
-  export let side = undefined;
-
-  // eslint-disable-next-line
-  $: sideComputed = side || (left ? 'left' : right ? 'right' : 'left');
-
-  $: classes = classNames(className, `swipeout-actions-${sideComputed}`, colorClasses($$props));
+  const classes = $derived(
+    classNames(className, `swipeout-actions-${sideComputed}`, colorClasses(restProps)),
+  );
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/swipeout-button.d.ts

@@ -1,16 +1,16 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface SwipeoutButtonProps {
-  text ?: string;
-  confirmTitle ?: string;
-  confirmText ?: string;
-  overswipe ?: boolean;
-  close ?: boolean;
-  delete ?: boolean;
-  href ?: string;
+interface Props {
+  text?: string;
+  confirmTitle?: string;
+  confirmText?: string;
+  overswipe?: boolean;
+  close?: boolean;
+  delete?: boolean;
+  href?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -18,15 +18,22 @@ interface SwipeoutButtonProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onClick ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
+  children?: Snippet;
+  onclick?: () => void;
 }
 
+interface SwipeoutButtonProps {}
+interface SwipeoutButtonProps extends Props {}
+
+interface SwipeoutButtonEvents extends Record<'',{}>{}
+
 
 
 declare class SwipeoutButton extends SvelteComponent<
-  SwipeoutButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SwipeoutButtonProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  SwipeoutButtonProps,
+  SwipeoutButtonEvents,
+  {  }
 > {}
 
 export { SwipeoutButtonProps };

package/components/swipeout-button.svelte

@@ -1,36 +1,34 @@
 <script>
-  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';
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let text = undefined;
-  export let confirmTitle = undefined;
-  export let confirmText = undefined;
-  export let overswipe = undefined;
-  export let close = undefined;
-  let deleteProp = undefined;
-  export { deleteProp as delete };
-  export let href = undefined;
+  import { classNames } from '../shared/utils.js';
+  let {
+    class: className,
+    delete: deleteProp,
+    text = undefined,
+    confirmTitle = undefined,
+    confirmText = undefined,
+    overswipe = undefined,
+    close = undefined,
+    href = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(
-    className,
-    {
-      'swipeout-overswipe': overswipe,
-      'swipeout-delete': deleteProp,
-      'swipeout-close': close,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      {
+        'swipeout-overswipe': overswipe,
+        'swipeout-delete': deleteProp,
+        'swipeout-close': close,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function onClick() {
-    emit('click');
+    restProps.onClick?.();
+    restProps.onclick?.();
   }
 </script>
 
@@ -39,9 +37,11 @@
   data-confirm={confirmText || undefined}
   data-confirm-title={confirmTitle || undefined}
   class={classes}
-  on:click={onClick}
-  {...restProps($$restProps)}
+  onclick={onClick}
+  {...restProps}
 >
-  {plainText(text)}
-  <slot />
+  {#if text}
+    {text}
+  {/if}
+  {@render children?.()}
 </a>

package/components/tab.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface TabProps {
+interface Props {
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -11,17 +11,23 @@ interface TabProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  tabActive ?: boolean;
-  onTabShow ?: (el?: HTMLElement) => void;
-  onTabHide ?: (el?: HTMLElement) => void;
+  tabActive?: boolean;
+  onTabShow?: (el?: HTMLElement) => void;
+  onTabHide?: (el?: HTMLElement) => void;
+  children?: Snippet;
 }
 
+interface TabProps {}
+interface TabProps extends Props {}
+
+interface TabEvents extends Record<'',{}>{}
+
 
 
 declare class Tab extends SvelteComponent<
-  TabProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TabProps>,
-  { tabRouterDidUpdate: CustomEvent<void>; },
-  {  'default' : {}; }
+  TabProps,
+  TabEvents,
+  {  }
 > {}
 
 export { TabProps };

package/components/tab.svelte

@@ -1,32 +1,22 @@
 <script>
-  import { onMount, onDestroy, afterUpdate, createEventDispatcher, tick, getContext } from 'svelte';
+  import { onMount, onDestroy, tick, getContext } from 'svelte';
 
-  import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter, getComponentId } from '../shared/utils.js';
+  import { classNames, getComponentId } from '../shared/utils.js';
   import { f7ready, app } from '../shared/f7.js';
   import { useTab } from '../shared/use-tab.js';
-  import { getReactiveContext } from '../shared/get-reactive-context.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-  export let tabActive = false;
-  export let id = undefined;
+  let { class: className, tabActive = false, id = undefined, children, ...restProps } = $props();
 
   const RouterContext = getContext('RouterContext') || {};
 
-  let TabsSwipeableContext =
-    getReactiveContext('TabsSwipeableContext', (newValue) => {
-      TabsSwipeableContext = newValue || false;
-    }) || {};
+  let TabsSwipeableContext = getContext('TabsSwipeableContext') || (() => ({ value: false }));
 
-  let el;
-  let routerData = null;
-  let initialTabContent = null;
+  let el = $state(null);
+  let routerData = $state(null);
+  let initialTabContent = $state(null);
 
-  $: isSwiper = TabsSwipeableContext;
+  const isSwiper = $derived(TabsSwipeableContext().value);
 
   if (
     !routerData &&
@@ -54,11 +44,13 @@
       };
     }
   }
-  let tabContent = initialTabContent || null;
+  let tabContent = $state(initialTabContent || null);
 
-  $: classes = classNames(className, 'tab', tabActive && 'tab-active', colorClasses($$props));
+  const classes = $derived(
+    classNames(className, 'tab', tabActive && 'tab-active', colorClasses(restProps)),
+  );
 
-  useTab(() => el, emit);
+  useTab(() => el, restProps);
 
   onMount(() => {
     if (el && initialTabContent) {
@@ -80,7 +72,7 @@
       }
     });
   });
-  afterUpdate(() => {
+  $effect(() => {
     if (!routerData) return;
     app.f7events.emit('tabRouterDidUpdate', routerData);
   });
@@ -92,17 +84,17 @@
 </script>
 
 {#if isSwiper || TabsSwipeableContext}
-  <swiper-slide {id} class={classes} bind:this={el} {...restProps($$restProps)}>
+  <swiper-slide {id} class={classes} bind:this={el} {...restProps}>
     {#if tabContent}
-      <svelte:component this={tabContent.component} {...tabContent.props} />
+      <tabContent.component {...tabContent.props} />
     {/if}
-    <slot />
+    {@render children?.()}
   </swiper-slide>
 {:else}
-  <div {id} class={classes} bind:this={el} {...restProps($$restProps)}>
+  <div {id} class={classes} bind:this={el} {...restProps}>
     {#if tabContent}
-      <svelte:component this={tabContent.component} {...tabContent.props} />
+      <tabContent.component {...tabContent.props} />
     {/if}
-    <slot />
+    {@render children?.()}
   </div>
 {/if}

package/components/tabs.d.ts

@@ -1,15 +1,15 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { SwiperOptions } from 'swiper';
 
 
-interface TabsProps {
-  animated ?: boolean;
-  swipeable ?: boolean;
-  routable ?: boolean;
-  swiperParams ?: SwiperOptions;
+interface Props {
+  animated?: boolean;
+  swipeable?: boolean;
+  routable?: boolean;
+  swiperParams?: SwiperOptions;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -17,14 +17,20 @@ interface TabsProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface TabsProps {}
+interface TabsProps extends Props {}
+
+interface TabsEvents extends Record<'',{}>{}
+
 
 
 declare class Tabs extends SvelteComponent<
-  TabsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TabsProps>,
-  {  },
-  {  'default' : {}; }
+  TabsProps,
+  TabsEvents,
+  {  }
 > {}
 
 export { TabsProps };

package/components/tabs.svelte

@@ -1,28 +1,33 @@
 <script>
-  import { onMount, tick } from 'svelte';
+  import { onMount, setContext, tick } from 'svelte';
 
-  import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { setReactiveContext } from '../shared/set-reactive-context.js';
 
-  let className = undefined;
-  export { className as class };
-  export let animated = false;
-  export let swipeable = false;
-  export let routable = false;
-  export let swiperParams = undefined;
+  let {
+    class: className,
+    animated = false,
+    swipeable = false,
+    routable = false,
+    swiperParams = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let wrapEl;
+  let wrapEl = $state(null);
 
-  $: classes = classNames(className, colorClasses($$props));
+  const classes = $derived(classNames(className, colorClasses(restProps)));
 
-  $: tabsClasses = classNames({
-    tabs: true,
-    'tabs-routable': routable,
-  });
+  const tabsClasses = $derived(
+    classNames({
+      tabs: true,
+      'tabs-routable': routable,
+    }),
+  );
 
-  setReactiveContext('TabsSwipeableContext', () => true);
+  setContext('TabsSwipeableContext', () => ({
+    value: true,
+  }));
 
   onMount(() => {
     if (swipeable && swiperParams && wrapEl) {
@@ -38,26 +43,22 @@
 </script>
 
 {#if animated}
-  <div
-    class={classNames('tabs-animated-wrap', classes)}
-    bind:this={wrapEl}
-    {...restProps($$restProps)}
-  >
+  <div class={classNames('tabs-animated-wrap', classes)} bind:this={wrapEl} {...restProps}>
     <div class={tabsClasses}>
-      <slot />
+      {@render children?.()}
     </div>
   </div>
 {:else if swipeable}
   <swiper-container
     bind:this={wrapEl}
     class={classNames(tabsClasses, classes)}
-    {...restProps($$restProps)}
+    {...restProps}
     init={swiperParams ? 'false' : 'true'}
   >
-    <slot />
+    {@render children?.()}
   </swiper-container>
 {:else}
-  <div class={classNames(tabsClasses, classes)} {...restProps($$restProps)}>
-    <slot />
+  <div class={classNames(tabsClasses, classes)} {...restProps}>
+    {@render children?.()}
   </div>
 {/if}

package/components/text-editor.d.ts

@@ -1,11 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { TextEditor } from 'framework7/types';
 
 
-interface TextEditorProps {
+interface Props {
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -13,35 +13,55 @@ interface TextEditorProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  mode ?: string;
-  value ?: string;
-  buttons ?: Array<any>;
-  customButtons ?: Object;
-  dividers ?: boolean;
-  imageUrlText ?: string;
-  linkUrlText ?: string;
-  placeholder ?: string;
-  clearFormattingOnPaste ?: boolean;
-  resizable ?: boolean;
-  onTextEditorChange ?: (value?: any) => void;
-  onTextEditorInput ?: (value?: any) => void;
-  onTextEditorFocus ?: (...args: any[]) => void;
-  onTextEditorBlur ?: (...args: any[]) => void;
-  onTextEditorButtonClick ?: (button?: any) => void;
-  onTextEditorKeyboardOpen ?: (...args: any[]) => void;
-  onTextEditorKeyboardClose ?: (...args: any[]) => void;
-  onTextEditorPopoverOpen ?: (...args: any[]) => void;
-  onTextEditorPopoverClose ?: (...args: any[]) => void;
+  mode?: string;
+  value?: string;
+  buttons?: Array<any>;
+  customButtons?: Object;
+  dividers?: boolean;
+  imageUrlText?: string;
+  linkUrlText?: string;
+  placeholder?: string;
+  clearFormattingOnPaste?: boolean;
+  resizable?: boolean;
+  onTextEditorChange?: (value?: any) => void;
+  onTextEditorInput?: (value?: any) => void;
+  onTextEditorFocus?: (...args: any[]) => void;
+  onTextEditorBlur?: (...args: any[]) => void;
+  onTextEditorButtonClick?: (button?: any) => void;
+  onTextEditorKeyboardOpen?: (...args: any[]) => void;
+  onTextEditorKeyboardClose?: (...args: any[]) => void;
+  onTextEditorPopoverOpen?: (...args: any[]) => void;
+  onTextEditorPopoverClose?: (...args: any[]) => void;
   onTextEditorInsertLink?: (...args: any[]) => void;
   onTextEditorInsertImage?: (...args: any[]) => void;
+  rootStart?: Snippet;
+  children?: Snippet;
+  rootEnd?: Snippet;
+  root?: Snippet;
+  ontexteditorchange?: () => void;
+  ontexteditorinput?: () => void;
+  ontexteditorfocus?: () => void;
+  ontexteditorblur?: () => void;
+  ontexteditorbuttonclick?: () => void;
+  ontexteditorkeyboardopen?: () => void;
+  ontexteditorkeyboardclose?: () => void;
+  ontexteditorpopoveropen?: () => void;
+  ontexteditorpopoverclose?: () => void;
+  ontexteditorinsertlink?: () => void;
+  ontexteditorinsertimage?: () => void;
 }
 
+interface TextEditorProps {}
+interface TextEditorProps extends Props {}
+
+interface TextEditorEvents extends Record<'',{}>{}
+
 
 
 declare class TextEditor extends SvelteComponent<
-  TextEditorProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof TextEditorProps>,
-  { textEditorChange: CustomEvent<void>; textEditorInput: CustomEvent<void>; textEditorFocus: CustomEvent<void>; textEditorBlur: CustomEvent<void>; textEditorButtonClick: CustomEvent<void>; textEditorKeyboardOpen: CustomEvent<void>; textEditorKeyboardClose: CustomEvent<void>; textEditorPopoverOpen: CustomEvent<void>; textEditorPopoverClose: CustomEvent<void>; textEditorInsertLink: CustomEvent<void>; textEditorInsertImage: CustomEvent<void>; },
-  {  'root-start' : {};  'default' : {};  'root-end' : {};  'root' : {}; }
+  TextEditorProps,
+  TextEditorEvents,
+  {  }
 > {}
 
 export { TextEditorProps };