framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/actions.svelte

@@ -1,75 +1,71 @@
 <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,
+    grid = undefined,
+    convertToPopover = undefined,
+    forceToPopover = undefined,
+    target = undefined,
+    backdrop = undefined,
+    backdropEl = undefined,
+    closeByBackdropClick = undefined,
+    closeByOutsideClick = undefined,
+    closeOnEscape = 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 grid = undefined;
-  export let convertToPopover = undefined;
-  export let forceToPopover = undefined;
-  export let target = undefined;
-  export let backdrop = undefined;
-  export let backdropEl = undefined;
-  export let closeByBackdropClick = undefined;
-  export let closeByOutsideClick = undefined;
-  export let closeOnEscape = undefined;
-  export let containerEl = undefined;
-
-  let el;
-  let f7Actions;
-
-  const state = {
-    isOpened: opened,
-    isClosing: false,
-  };
+  let el = $state(null);
+  let f7Actions = $state(null);
+  let isOpened = $state(opened);
+  let isClosing = $state(false);
 
   export function instance() {
     return f7Actions;
   }
 
-  $: classes = classNames(
-    className,
-    'actions-modal',
-    {
-      'actions-grid': grid,
-    },
-    modalStateClasses(state),
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'actions-modal',
+      {
+        'actions-grid': grid,
+      },
+      modalStateClasses({ isOpened, isClosing }),
+      colorClasses(restProps),
+    ),
   );
 
   function onOpen(instance) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-    emit('actionsOpen', [instance]);
+    isOpened = true;
+    isClosing = false;
+    restProps.onactionsopen?.(instance);
+    restProps.onActionsOpen?.(instance);
     opened = true;
   }
   function onOpened(instance) {
-    emit('actionsOpened', [instance]);
+    restProps.onactionsopened?.(instance);
+    restProps.onActionsOpened?.(instance);
   }
   function onClose(instance) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('actionsClose', [instance]);
+    isOpened = false;
+    isClosing = true;
+    restProps.onactionsclose?.(instance);
+    restProps.onActionsClose?.(instance);
   }
   function onClosed(instance) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('actionsClosed', [instance]);
+    isClosing = false;
+    restProps.onactionsclosed?.(instance);
+    restProps.onActionsClosed?.(instance);
     opened = false;
   }
 
@@ -84,7 +80,7 @@
     else f7Actions.close();
   }
 
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   onMount(() => {
     const params = {
@@ -124,6 +120,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <slot actions={f7Actions} />
+<div class={classes} bind:this={el} {style} {...restProps}>
+  {@render children?.(f7Actions)}
 </div>

package/components/app.d.ts

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

package/components/app.svelte

@@ -6,15 +6,14 @@
 
   import RoutableModals from './routable-modals.svelte';
 
-  let className = undefined;
-  export { className as class };
+  let { class: className, children, ...restProps } = $props();
 
-  let el;
+  let el = $state(null);
 
-  $: classes = classNames(className, 'framework7-root', colorClasses($$props));
+  const classes = $derived(classNames(className, 'framework7-root', colorClasses(restProps)));
 
   if (!app.f7 || typeof window === 'undefined') {
-    f7init(el, noUndefinedProps($$props), false);
+    f7init(el, noUndefinedProps(restProps), false);
   }
 
   onMount(() => {
@@ -26,11 +25,11 @@
       app.f7.init(el);
       return;
     }
-    f7init(el, noUndefinedProps($$props), true);
+    f7init(el, noUndefinedProps(restProps), true);
   });
 </script>
 
 <div bind:this={el} class={classes}>
-  <slot />
+  {@render children?.()}
   <RoutableModals />
 </div>

package/components/area-chart.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface AreaChartProps {
+interface Props {
   lineChart?: boolean;
   datasets?: {values: number[]; color?: string; label?: any}[];
   axis?: boolean;
@@ -20,15 +20,22 @@ interface AreaChartProps {
   formatTooltipAxisLabel?: (label: any) => string;
   formatTooltipTotal?: (total: number) => string;
   formatTooltipDataset?: (label: any, value: number, color: string) => string;
-  onSelect ?: (index: number | null) => void;
+  onSelect?: (index: number | null) => void;
+  children?: Snippet;
+  onselect?: () => void;
 }
 
+interface AreaChartProps {}
+interface AreaChartProps extends Props {}
+
+interface AreaChartEvents extends Record<'',{}>{}
+
 
 
 declare class AreaChart extends SvelteComponent<
-  AreaChartProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof AreaChartProps>,
-  { select: CustomEvent<void>; },
-  {  'default' : {}; }
+  AreaChartProps,
+  AreaChartEvents,
+  {  }
 > {}
 
 export { AreaChartProps };

package/components/area-chart.svelte

@@ -1,42 +1,37 @@
 <script>
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { onDestroy, onMount } from 'svelte';
+  import { classNames } from '../shared/utils.js';
   import { app } from '../shared/f7.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    lineChart = false,
+    datasets = [],
+    axis = false,
+    axisLabels = [],
+    tooltip = false,
+    legend = false,
+    toggleDatasets = false,
+    width = 640,
+    height = 320,
+    maxAxisLabels = 8,
+    formatAxisLabel: formatAxisLabelProp,
+    formatLegendLabel: formatLegendLabelProp,
+    formatTooltip: formatTooltipProp,
+    formatTooltipAxisLabel,
+    formatTooltipTotal,
+    formatTooltipDataset,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let lineChart = false;
-  export let datasets = [];
-  export let axis = false;
-  export let axisLabels = [];
-  export let tooltip = false;
-  export let legend = false;
-  export let toggleDatasets = false;
-  export let width = 640;
-  export let height = 320;
-  export let maxAxisLabels = 8;
-
-  let formatAxisLabelProp = undefined;
-  export { formatAxisLabelProp as formatAxisLabel };
-  let formatLegendLabelProp = undefined;
-  export { formatLegendLabelProp as formatLegendLabel };
-  let formatTooltipProp = undefined;
-  export { formatTooltipProp as formatTooltip };
-  export let formatTooltipAxisLabel = undefined;
-  export let formatTooltipTotal = undefined;
-  export let formatTooltipDataset = undefined;
-
-  let el;
-  let svgEl = null;
-  let currentIndex = null;
-  let previousIndex = null;
-  let hiddenDatasets = [];
-  let f7Tooltip = null;
-  let linesOffsets = null;
+  let el = $state(null);
+  let svgEl = $state(null);
+  let currentIndex = $state(null);
+  let previousIndex = $state(null);
+  let hiddenDatasets = $state([]);
+  let f7Tooltip = $state(null);
+  let linesOffsets = $state(null);
 
   const setCurrentIndex = (value) => {
     previousIndex = currentIndex;
@@ -278,19 +273,20 @@
 
   const watchCurrentIndex = () => {
     if (currentIndex === previousIndex) return;
-    emit('select', [currentIndex]);
+    restProps.onSelect?.(currentIndex);
+    restProps.onselect?.(currentIndex);
     setTooltip();
   };
 
-  $: watchCurrentIndex(currentIndex);
-  $: classes = classNames('area-chart', className);
+  $effect(() => watchCurrentIndex(currentIndex));
+  const classes = $derived(classNames('area-chart', className));
 
-  $: chartData = getChartData(datasets, hiddenDatasets);
-  $: verticalLines = getVerticalLines(datasets);
-  $: visibleLegends = getVisibleLegends(maxAxisLabels, axisLabels);
+  const chartData = $derived(getChartData(datasets, hiddenDatasets));
+  const verticalLines = $derived(getVerticalLines(datasets));
+  const visibleLegends = $derived(getVisibleLegends(maxAxisLabels, axisLabels));
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
+<div bind:this={el} class={classes} {...restProps}>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     {width}
@@ -338,19 +334,19 @@
               'area-chart-legend-button': toggleDatasets,
             })}
             type="button"
-            on:click={() => toggleDataset(index)}
+            onclick={() => toggleDataset(index)}
           >
-            <span style={`background-color: ${dataset.color}`} />
+            <span style={`background-color: ${dataset.color}`}></span>
             {formatLegendLabel(dataset.label)}
           </button>
         {:else}
           <span class="area-chart-legend-item">
-            <span style={`background-color: ${dataset.color}`} />
+            <span style={`background-color: ${dataset.color}`}></span>
             {formatLegendLabel(dataset.label)}
           </span>
         {/if}
       {/each}
     </div>
   {/if}
-  <slot />
+  {@render children?.()}
 </div>

package/components/badge.d.ts

@@ -1,11 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Tooltip } from 'framework7/types';
 
 
-interface BadgeProps {
+interface Props {
   tooltip?: string;
   tooltipTrigger?: string;
   color?: string;
@@ -15,14 +15,20 @@ interface BadgeProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface BadgeProps {}
+interface BadgeProps extends Props {}
+
+interface BadgeEvents extends Record<'',{}>{}
+
 
 
 declare class Badge extends SvelteComponent<
-  BadgeProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof BadgeProps>,
-  {  },
-  {  'default' : {}; }
+  BadgeProps,
+  BadgeEvents,
+  {  }
 > {}
 
 export { BadgeProps };

package/components/badge.svelte

@@ -1,18 +1,19 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
   import { useTooltip } from '../shared/use-tooltip.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    tooltip,
+    tooltipTrigger,
+    children,
+    ...restProps
+  } = $props();
 
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-
-  $: classes = classNames(className, 'badge', colorClasses($$props));
+  const classes = $derived(classNames(className, 'badge', colorClasses(restProps)));
 </script>
 
-<span class={classes} {...restProps($$restProps)} use:useTooltip={{ tooltip, tooltipTrigger }}>
-  <slot />
+<span class={classes} {...restProps} use:useTooltip={{ tooltip, tooltipTrigger }}>
+  {@render children?.()}
 </span>

package/components/block-footer.d.ts

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

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

package/components/block-header.d.ts

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

package/components/block-header.svelte

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

package/components/block-title.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface BlockTitleProps {
+interface Props {
   large?: boolean;
   medium?: boolean;
   color?: string;
@@ -13,14 +13,20 @@ interface BlockTitleProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface BlockTitleProps {}
+interface BlockTitleProps extends Props {}
+
+interface BlockTitleEvents extends Record<'',{}>{}
+
 
 
 declare class BlockTitle extends SvelteComponent<
-  BlockTitleProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof BlockTitleProps>,
-  {  },
-  {  'default' : {}; }
+  BlockTitleProps,
+  BlockTitleEvents,
+  {  }
 > {}
 
 export { BlockTitleProps };

package/components/block-title.svelte

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

package/components/block.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface BlockProps {
+interface Props {
   inset?: boolean;
   insetIos?: boolean;
   insetMd?: boolean;
@@ -42,14 +42,20 @@ interface BlockProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface BlockProps {}
+interface BlockProps extends Props {}
+
+interface BlockEvents extends Record<'',{}>{}
+
 
 
 declare class Block extends SvelteComponent<
-  BlockProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof BlockProps>,
-  {  },
-  {  'default' : {}; }
+  BlockProps,
+  BlockEvents,
+  {  }
 > {}
 
 export { BlockProps };