framework7-svelte 8.3.3 → 9.0.0-beta.1

package/components/accordion-content.d.ts

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

package/components/accordion-content.svelte

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

package/components/accordion-item.d.ts

@@ -1,16 +1,16 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface AccordionItemProps {
+interface Props {
   opened?: boolean;
-  onAccordionBeforeOpen ?: (prevent?: any) => void;
-  onAccordionOpen ?: (...args: any[]) => void;
-  onAccordionOpened ?: (...args: any[]) => void;
-  onAccordionBeforeClose ?: (prevent?: any) => void;
-  onAccordionClose ?: (...args: any[]) => void;
-  onAccordionClosed ?: (...args: any[]) => void;
+  onAccordionBeforeOpen?: (prevent?: any) => void;
+  onAccordionOpen?: (...args: any[]) => void;
+  onAccordionOpened?: (...args: any[]) => void;
+  onAccordionBeforeClose?: (prevent?: any) => void;
+  onAccordionClose?: (...args: any[]) => void;
+  onAccordionClosed?: (...args: any[]) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -18,14 +18,26 @@ interface AccordionItemProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
+  onaccordionbeforeopen?: () => void;
+  onaccordionopen?: () => void;
+  onaccordionopened?: () => void;
+  onaccordionbeforeclose?: () => void;
+  onaccordionclose?: () => void;
+  onaccordionclosed?: () => void;
 }
 
+interface AccordionItemProps {}
+interface AccordionItemProps extends Props {}
+
+interface AccordionItemEvents extends Record<'',{}>{}
+
 
 
 declare class AccordionItem extends SvelteComponent<
-  AccordionItemProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof AccordionItemProps>,
-  { accordionBeforeOpen: CustomEvent<void>; accordionOpen: CustomEvent<void>; accordionOpened: CustomEvent<void>; accordionBeforeClose: CustomEvent<void>; accordionClose: CustomEvent<void>; accordionClosed: CustomEvent<void>; },
-  {  'default' : {}; }
+  AccordionItemProps,
+  AccordionItemEvents,
+  {  }
 > {}
 
 export { AccordionItemProps };

package/components/accordion-item.svelte

@@ -1,51 +1,53 @@
 <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';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let { class: className, opened = false, children, ...restProps } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
 
-  export let opened = undefined;
-
-  let el;
-
-  $: classes = classNames(
-    className,
-    'accordion-item',
-    {
-      'accordion-item-opened': opened,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'accordion-item',
+      {
+        'accordion-item-opened': opened,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function onBeforeOpen(accEl, prevent) {
     if (accEl !== el) return;
-    emit('accordionBeforeOpen', [prevent]);
+    restProps.onaccordionbeforeopen?.(prevent);
+    restProps.onAccordionBeforeOpen?.(prevent);
   }
   function onOpen(accEl) {
     if (accEl !== el) return;
-    emit('accordionOpen');
+    restProps.onaccordionopen?.();
+    restProps.onAccordionOpen?.();
   }
   function onOpened(accEl) {
     if (accEl !== el) return;
-    emit('accordionOpened');
+    restProps.onaccordionopened?.();
+    restProps.onAccordionOpened?.();
   }
   function onBeforeClose(accEl, prevent) {
     if (accEl !== el) return;
-    emit('accordionBeforeClose', [prevent]);
+    restProps.onaccordionbeforeclose?.(prevent);
+    restProps.onAccordionBeforeClose?.(prevent);
   }
   function onClose(accEl) {
     if (accEl !== el) return;
-    emit('accordionClose');
+    restProps.onaccordionclose?.();
+    restProps.onAccordionClose?.();
   }
   function onClosed(accEl) {
     if (accEl !== el) return;
-    emit('accordionClosed');
+    restProps.onaccordionclosed?.();
+    restProps.onAccordionClosed?.();
   }
 
   onMount(() => {
@@ -70,6 +72,6 @@
   });
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
-  <slot />
+<div bind:this={el} class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/accordion-toggle.d.ts

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

package/components/accordion-toggle.svelte

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

package/components/accordion.d.ts

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

package/components/accordion.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 className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    accordionOpposite = false,
+    children,
+    ...restProps
+  } = $props();
 
-  export let accordionOpposite = undefined;
-
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     'accordion-list',
     accordionOpposite && 'accordion-opposite',
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/actions-button.d.ts

@@ -1,12 +1,12 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ActionsButtonProps {
+interface Props {
   strong?: boolean;
   close?: boolean;
-  onClick ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -14,14 +14,22 @@ interface ActionsButtonProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  media?: Snippet;
+  children?: Snippet;
+  onclick?: () => void;
 }
 
+interface ActionsButtonProps {}
+interface ActionsButtonProps extends Props {}
+
+interface ActionsButtonEvents extends Record<'',{}>{}
+
 
 
 declare class ActionsButton extends SvelteComponent<
-  ActionsButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ActionsButtonProps>,
-  { click: CustomEvent<void>; },
-  {  'media' : {};  'default' : {}; }
+  ActionsButtonProps,
+  ActionsButtonEvents,
+  {  }
 > {}
 
 export { ActionsButtonProps };

package/components/actions-button.svelte

@@ -1,49 +1,51 @@
 <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';
   import { app } from '../shared/f7.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
 
-  let className = undefined;
-  export { className as class };
-
-  export let strong = false;
-  export let close = true;
+  let {
+    class: className,
+    strong = false,
+    close = true,
+    children,
+    media,
+    ...restProps
+  } = $props();
 
   let el;
 
-  // eslint-disable-next-line
-  $: hasMediaSlots = $$slots.media;
 
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     {
       'actions-button': true,
       'actions-button-strong': strong,
     },
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 
   function onClick() {
     if (close && app.f7) {
       const dom7 = app.f7.$;
       app.f7.actions.close(dom7(el).parents('.actions-modal'));
     }
-    emit('click');
+    restProps.onclick?.();
   }
 </script>
 
-<div class={classes} on:click={onClick} bind:this={el} {...restProps($$restProps)}>
-  {#if hasMediaSlots}
+<div class={classes} onclick={onClick} bind:this={el} {...restProps}>
+  {#if typeof media !== 'undefined'}
     <div class="actions-button-media">
-      <slot name="media" />
+      {#if typeof media === 'function'}
+        {@render media?.()}
+      {:else}
+        {media}
+      {/if}
     </div>
   {/if}
   <div class="actions-button-text">
-    <slot />
+    {@render children?.()}
   </div>
 </div>

package/components/actions-group.d.ts

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

package/components/actions-group.svelte

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

package/components/actions-label.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ActionsLabelProps {
+interface Props {
   strong?: boolean;
   onClick?: (event?: any) => void;
   color?: string;
@@ -13,14 +13,20 @@ interface ActionsLabelProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface ActionsLabelProps {}
+interface ActionsLabelProps extends Props {}
+
+interface ActionsLabelEvents extends Record<'',{}>{}
+
 
 
 declare class ActionsLabel extends SvelteComponent<
-  ActionsLabelProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ActionsLabelProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  ActionsLabelProps,
+  ActionsLabelEvents,
+  {  }
 > {}
 
 export { ActionsLabelProps };

package/components/actions-label.svelte

@@ -1,31 +1,21 @@
 <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';
-
-  const emit = createEmitter(createEventDispatcher, $$props);
+  import { classNames } from '../shared/utils.js';
 
-  let className = undefined;
-  export { className as class };
+  let { class: className, strong = false, children, ...restProps } = $props();
 
-  export let strong = false;
-
-  $: classes = classNames(
-    className,
-    'actions-label',
-    {
-      'actions-button-strong': strong,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'actions-label',
+      {
+        'actions-button-strong': strong,
+      },
+      colorClasses(restProps),
+    ),
   );
-
-  function onClick() {
-    emit('click');
-  }
 </script>
 
-<div class={classes} on:click={onClick} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/actions.d.ts

@@ -1,27 +1,27 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Actions } from 'framework7/types';
 
 
-interface ActionsProps {
-  opened ?: boolean;
-  animate ?: boolean;
-  grid ?: boolean;
-  convertToPopover ?: boolean;
-  forceToPopover ?: boolean;
-  target ?: string | object;
-  backdrop ?: boolean;
-  backdropEl ?: string | object;
-  closeByBackdropClick ?: boolean;
-  closeByOutsideClick ?: boolean;
-  closeOnEscape ?: boolean;
-  onActionsOpen ?: (instance?: Actions.Actions) => void;
-  onActionsOpened ?: (instance?: Actions.Actions) => void;
-  onActionsClose ?: (instance?: Actions.Actions) => void;
-  onActionsClosed ?: (instance?: Actions.Actions) => void;
-  containerEl ?: string | object;
+interface Props {
+  opened?: boolean;
+  animate?: boolean;
+  grid?: boolean;
+  convertToPopover?: boolean;
+  forceToPopover?: boolean;
+  target?: string | object;
+  backdrop?: boolean;
+  backdropEl?: string | object;
+  closeByBackdropClick?: boolean;
+  closeByOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  onActionsOpen?: (instance?: Actions.Actions) => void;
+  onActionsOpened?: (instance?: Actions.Actions) => void;
+  onActionsClose?: (instance?: Actions.Actions) => void;
+  onActionsClosed?: (instance?: Actions.Actions) => void;
+  containerEl?: string | object;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -29,14 +29,24 @@ interface ActionsProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
+  onactionsopen?: () => void;
+  onactionsopened?: () => void;
+  onactionsclose?: () => void;
+  onactionsclosed?: () => void;
 }
 
+interface ActionsProps {}
+interface ActionsProps extends Props {}
+
+interface ActionsEvents extends Record<'',{}>{}
+
 
 
 declare class Actions extends SvelteComponent<
-  ActionsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ActionsProps>,
-  { actionsOpen: CustomEvent<void>; actionsOpened: CustomEvent<void>; actionsClose: CustomEvent<void>; actionsClosed: CustomEvent<void>; },
-  {  'default' : {}; }
+  ActionsProps,
+  ActionsEvents,
+  {  }
 > {}
 
 export { ActionsProps };