framework7-svelte 8.3.4 → 9.0.0

package/components/panel.svelte

@@ -1,76 +1,72 @@
 <script>
-  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-  import { restProps } from '../shared/rest-props.js';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, noUndefinedProps, createEmitter } from '../shared/utils.js';
+  import { classNames, noUndefinedProps } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let side = undefined;
-  export let effect = undefined;
-  // svelte-ignore unused-export-let
-  export let cover = false;
-  export let reveal = false;
-  export let push = false;
-  export let floating = false;
-  export let left = false;
-  export let right = false;
-  export let opened = false;
-  export let resizable = false;
-
-  export let backdrop = true;
-  export let backdropEl = undefined;
-  export let containerEl = undefined;
-  export let closeByBackdropClick = undefined;
-  export let visibleBreakpoint = undefined;
-  export let collapsedBreakpoint = undefined;
-  export let swipe = false;
-  export let swipeNoFollow = false;
-  export let swipeOnlyClose = false;
-  export let swipeActiveArea = 0;
-  export let swipeThreshold = 0;
-
-  export let f7Slot = 'fixed';
-
-  let el;
-  let f7Panel;
-
-  const state = {
-    isOpened: false,
-    isClosing: false,
-    isCollapsed: false,
-    isBreakpoint: false,
-  };
+  let {
+    class: className,
+    side = undefined,
+    effect: effectProp = undefined,
+    cover = false,
+    reveal = false,
+    push = false,
+    floating = false,
+    left = false,
+    right = false,
+    opened = false,
+    resizable = false,
+    backdrop = true,
+    backdropEl = undefined,
+    containerEl = undefined,
+    closeByBackdropClick = undefined,
+    visibleBreakpoint = undefined,
+    collapsedBreakpoint = undefined,
+    swipe = false,
+    swipeNoFollow = false,
+    swipeOnlyClose = false,
+    swipeActiveArea = 0,
+    swipeThreshold = 0,
+    f7Slot = 'fixed',
+    children,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
+  let f7Panel = $state(null);
+
+  let isOpened = $state(false);
+  let isClosing = $state(false);
+  let isCollapsed = $state(false);
+  let isBreakpoint = $state(false);
 
   export function instance() {
     return f7Panel;
   }
 
-  // eslint-disable-next-line
-  $: sideComputed = side || (left ? 'left' : right ? 'right' : 'left');
-  // eslint-disable-next-line
-  $: effectComputed =
-    effect || (reveal ? 'reveal' : push ? 'push' : floating ? 'floating' : 'cover');
-  $: classes = classNames(
-    className,
-    'panel',
-    {
-      'panel-in': state.isOpened && !state.isClosing && !state.isBreakpoint,
-      'panel-in-breakpoint': state.isBreakpoint,
-      'panel-in-collapsed': state.isCollapsed,
-      'panel-resizable': resizable,
-      [`panel-${sideComputed}`]: sideComputed,
-      [`panel-${effectComputed}`]: effectComputed,
-    },
-    colorClasses($$props),
+  const sideComputed = $derived(side || (left ? 'left' : right ? 'right' : 'left'));
+  const effectComputed = $derived(
+    effectProp || (reveal ? 'reveal' : push ? 'push' : floating ? 'floating' : 'cover'),
+  );
+  const classes = $derived(
+    classNames(
+      className,
+      'panel',
+      {
+        'panel-in': isOpened && !isClosing && !isBreakpoint,
+        'panel-out': isClosing,
+        'panel-in-breakpoint': isBreakpoint,
+        'panel-in-collapsed': isCollapsed,
+        'panel-resizable': resizable,
+        [`panel-${sideComputed}`]: sideComputed,
+        [`panel-${effectComputed}`]: effectComputed,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  let resizableOld = resizable;
-  let initialWatchedResizable = false;
+  let resizableOld = $state(resizable);
+  let initialWatchedResizable = $state(false);
   function watchResizable(r) {
     if (!initialWatchedResizable) {
       initialWatchedResizable = true;
@@ -83,10 +79,10 @@
     }
     resizableOld = r;
   }
-  $: watchResizable(resizable);
+  $effect(() => watchResizable(resizable));
 
-  let openedOld = opened;
-  let initialWatchedOpened = false;
+  let openedOld = $state(opened);
+  let initialWatchedOpened = $state(false);
   function watchOpened(o) {
     if (!initialWatchedOpened) {
       initialWatchedOpened = true;
@@ -99,59 +95,58 @@
     }
     openedOld = o;
   }
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   function onOpen(...args) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-
-    emit('panelOpen', args);
+    isOpened = true;
+    isClosing = false;
+    restProps.onPanelOpen?.(args);
+    restProps.onpanelopen?.(args);
     opened = true;
   }
   function onOpened(...args) {
-    emit('panelOpened', args);
+    restProps.onPanelOpened?.(args);
+    restProps.onpanelopened?.(args);
   }
   function onClose(...args) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('panelClose', args);
+    isOpened = false;
+    isClosing = true;
+    restProps.onPanelClose?.(args);
+    restProps.onpanelclose?.(args);
   }
   function onClosed(...args) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('panelClosed', args);
+    isClosing = false;
+    restProps.onPanelClosed?.(args);
+    restProps.onpanelclosed?.(args);
     opened = false;
   }
   function onBackdropClick(...args) {
-    emit('panelBackdropClick', args);
+    restProps.onPanelBackdropClick?.(args);
+    restProps.onpanelbackdropclick?.(args);
   }
   function onSwipe(...args) {
-    emit('panelSwipe', args);
+    restProps.onPanelSwipe?.(args);
+    restProps.onpanelswipe?.(args);
   }
   function onSwipeOpen(...args) {
-    emit('panelSwipeOpen', args);
+    restProps.onPanelSwipeOpen?.(args);
+    restProps.onpanelswipeopen?.(args);
   }
   function onBreakpoint(...args) {
-    Object.assign(state, {
-      isBreakpoint: true,
-      isCollapsed: false,
-    });
-    emit('panelBreakpoint', args);
+    isBreakpoint = true;
+    isCollapsed = false;
+    restProps.onPanelBreakpoint?.(args);
+    restProps.onpanelbreakpoint?.(args);
   }
   function onCollapsedBreakpoint(...args) {
-    Object.assign(state, {
-      isBreakpoint: false,
-      isCollapsed: true,
-    });
-    emit('panelCollapsedBreakpoint', args);
+    isBreakpoint = false;
+    isCollapsed = true;
+    restProps.onPanelCollapsedBreakpoint?.(args);
+    restProps.onpanelcollapsedbreakpoint?.(args);
   }
   function onResize(...args) {
-    emit('panelResize', args);
+    restProps.onPanelResize?.(args);
+    restProps.onpanelresize?.(args);
   }
 
   onMount(() => {
@@ -202,9 +197,9 @@
   });
 </script>
 
-<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)}>
-  <slot panel={f7Panel} />
+<div bind:this={el} class={classes} data-f7-slot={f7Slot} {...restProps}>
+  {@render children?.(f7Panel)}
   {#if resizable}
-    <div class="panel-resize-handler" />
+    <div class="panel-resize-handler"></div>
   {/if}
 </div>

package/components/photo-browser.d.ts

@@ -1,56 +1,65 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { PhotoBrowser } from 'framework7/types';
 
 
-interface PhotoBrowserProps {
-  init ?: boolean;
-  params ?: Object;
-  photos ?: Array<any>;
-  thumbs ?: Array<any>;
-  exposition ?: boolean;
-  expositionHideCaptions ?: boolean;
-  type ?: string;
-  navbar ?: boolean;
-  toolbar ?: boolean;
-  theme ?: string;
-  captionsTheme ?: string;
-  iconsColor ?: string;
-  swipeToClose ?: boolean;
-  pageBackLinkText ?: string;
-  popupCloseLinkIcon ?: boolean;
-  popupCloseLinkText ?: string;
-  navbarOfText ?: string;
-  navbarShowCount ?: boolean;
-  swiper ?: Object;
-  url ?: string;
-  routableModals ?: boolean;
-  virtualSlides ?: boolean;
-  view ?: string | object;
-  renderNavbar ?: Function;
-  renderToolbar ?: Function;
-  renderCaption ?: Function;
-  renderObject ?: Function;
-  renderLazyPhoto ?: Function;
-  renderPhoto ?: Function;
-  renderPage ?: Function;
-  renderPopup ?: Function;
-  renderStandalone ?: Function;
+interface Props {
+  init?: boolean;
+  params?: Object;
+  photos?: Array<any>;
+  thumbs?: Array<any>;
+  exposition?: boolean;
+  expositionHideCaptions?: boolean;
+  type?: string;
+  navbar?: boolean;
+  toolbar?: boolean;
+  theme?: string;
+  captionsTheme?: string;
+  iconsColor?: string;
+  swipeToClose?: boolean;
+  pageBackLinkText?: string;
+  popupCloseLinkText?: string;
+  navbarOfText?: string;
+  navbarShowCount?: boolean;
+  swiper?: Object;
+  url?: string;
+  routableModals?: boolean;
+  virtualSlides?: boolean;
+  view?: string | object;
+  renderNavbar?: Function;
+  renderToolbar?: Function;
+  renderCaption?: Function;
+  renderObject?: Function;
+  renderLazyPhoto?: Function;
+  renderPhoto?: Function;
+  renderPage?: Function;
+  renderPopup?: Function;
+  renderStandalone?: Function;
   renderThumb?: Function;
-  onPhotoBrowserOpen ?: (...args: any[]) => void;
-  onPhotoBrowserClose ?: (...args: any[]) => void;
-  onPhotoBrowserOpened ?: (...args: any[]) => void;
-  onPhotoBrowserClosed ?: (...args: any[]) => void;
-  onPhotoBrowserSwipeToClose ?: (...args: any[]) => void;
+  onPhotoBrowserOpen?: (...args: any[]) => void;
+  onPhotoBrowserClose?: (...args: any[]) => void;
+  onPhotoBrowserOpened?: (...args: any[]) => void;
+  onPhotoBrowserClosed?: (...args: any[]) => void;
+  onPhotoBrowserSwipeToClose?: (...args: any[]) => void;
+  onphotobrowseropen?: () => void;
+  onphotobrowserclose?: () => void;
+  onphotobrowseropened?: () => void;
+  onphotobrowserclosed?: () => void;
+  onphotobrowserswipetoclose?: () => void;
 }
 
+interface PhotoBrowserProps {}
+interface PhotoBrowserProps extends Props {}
+
+interface PhotoBrowserEvents extends Record<'',{}>{}
+
 
 
 declare class PhotoBrowser extends SvelteComponent<
-  PhotoBrowserProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PhotoBrowserProps>,
-  { photoBrowserOpen: CustomEvent<void>; photoBrowserClose: CustomEvent<void>; photoBrowserOpened: CustomEvent<void>; photoBrowserClosed: CustomEvent<void>; photoBrowserSwipeToClose: CustomEvent<void>; },
+  PhotoBrowserProps,
+  PhotoBrowserEvents,
   {  }
 > {}
 

package/components/photo-browser.svelte

@@ -1,44 +1,42 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  import { extend, createEmitter } from '../shared/utils.js';
+  import { extend } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  export let init = true;
-  export let params = undefined;
-  export let photos = undefined;
-  export let thumbs = undefined;
-  export let exposition = true;
-  export let expositionHideCaptions = false;
-  export let type = undefined;
-  export let navbar = true;
-  export let toolbar = true;
-  export let theme = undefined;
-  export let captionsTheme = undefined;
-  export let iconsColor = undefined;
-  export let swipeToClose = true;
-  export let pageBackLinkText = undefined;
-  export let popupCloseLinkIcon = undefined;
-  export let popupCloseLinkText = undefined;
-  export let navbarOfText = undefined;
-  export let navbarShowCount = undefined;
-  export let swiper = undefined;
-  export let url = undefined;
-  export let routableModals = false;
-  export let virtualSlides = true;
-  export let view = undefined;
-  export let renderNavbar = undefined;
-  export let renderToolbar = undefined;
-  export let renderCaption = undefined;
-  export let renderObject = undefined;
-  export let renderLazyPhoto = undefined;
-  export let renderPhoto = undefined;
-  export let renderPage = undefined;
-  export let renderPopup = undefined;
-  export let renderStandalone = undefined;
-  export let renderThumb = undefined;
+  let {
+    init = true,
+    params = undefined,
+    photos = undefined,
+    thumbs = undefined,
+    exposition = true,
+    expositionHideCaptions = false,
+    type = undefined,
+    navbar = true,
+    toolbar = true,
+    theme = undefined,
+    captionsTheme = undefined,
+    iconsColor = undefined,
+    swipeToClose = true,
+    pageBackLinkText = undefined,
+    navbarOfText = undefined,
+    navbarShowCount = undefined,
+    swiper = undefined,
+    url = undefined,
+    routableModals = false,
+    virtualSlides = true,
+    view = undefined,
+    renderNavbar = undefined,
+    renderToolbar = undefined,
+    renderCaption = undefined,
+    renderObject = undefined,
+    renderLazyPhoto = undefined,
+    renderPhoto = undefined,
+    renderPage = undefined,
+    renderPopup = undefined,
+    renderStandalone = undefined,
+    renderThumb = undefined,
+    ...restProps
+  } = $props();
 
   let f7PhotoBrowser;
 
@@ -62,7 +60,7 @@
     return f7PhotoBrowser.expositionDisable();
   }
 
-  let initialWatched = false;
+  let initialWatched = $state(false);
   function watchPhotos(newValue) {
     if (!initialWatched) {
       initialWatched = true;
@@ -75,7 +73,7 @@
     }
   }
 
-  $: watchPhotos(photos);
+  $effect(() => watchPhotos(photos));
 
   onMount(() => {
     if (!init) return;
@@ -97,8 +95,6 @@
           iconsColor,
           swipeToClose,
           pageBackLinkText,
-          popupCloseLinkIcon,
-          popupCloseLinkText,
           navbarOfText,
           navbarShowCount,
           swiper,
@@ -127,19 +123,24 @@
       pbParams = extend({}, pbParams, {
         on: {
           open() {
-            emit('photoBrowserOpen');
+            restProps.onPhotoBrowserOpen?.();
+            restProps.onphotobrowseropen?.();
           },
           close() {
-            emit('photoBrowserClose');
+            restProps.onPhotoBrowserClose?.();
+            restProps.onphotobrowserclose?.();
           },
           opened() {
-            emit('photoBrowserOpened');
+            restProps.onPhotoBrowserOpened?.();
+            restProps.onphotobrowseropened?.();
           },
           closed() {
-            emit('photoBrowserClosed');
+            restProps.onPhotoBrowserClosed?.();
+            restProps.onphotobrowserclosed?.();
           },
           swipeToClose() {
-            emit('photoBrowserSwipeToClose');
+            restProps.onPhotoBrowserSwipeToClose?.();
+            restProps.onphotobrowserswipetoclose?.();
           },
         },
       });

package/components/pie-chart.d.ts

@@ -1,22 +1,29 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface PieChartProps {
+interface Props {
   size?: number;
   tooltip?: boolean;
   datasets?: {value: number; color?: string; label?: string}[];
   formatTooltip?: (data: {index: number; value: number; label: string; color: string; percentage: number}) => void;
-  onSelect ?: (index: number | null, item: {value: number; label: string; color: string}) => void;
+  onSelect?: (index: number | null, item: {value: number; label: string; color: string}) => void;
+  children?: Snippet;
+  onselect?: () => void;
 }
 
+interface PieChartProps {}
+interface PieChartProps extends Props {}
+
+interface PieChartEvents extends Record<'',{}>{}
+
 
 
 declare class PieChart extends SvelteComponent<
-  PieChartProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PieChartProps>,
-  { select: CustomEvent<void>; },
-  {  'default' : {}; }
+  PieChartProps,
+  PieChartEvents,
+  {  }
 > {}
 
 export { PieChartProps };

package/components/pie-chart.svelte

@@ -1,24 +1,23 @@
 <script>
-  import { createEventDispatcher, onDestroy } from 'svelte';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { onDestroy } from 'svelte';
+  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 size = 320;
-  export let tooltip = false;
-  export let datasets = [];
-  export let formatTooltip = undefined;
-
-  let el;
-  let currentIndex = null;
-  let previousIndex = null;
+  let {
+    class: className,
+    size = 320,
+    tooltip = false,
+    datasets = [],
+    formatTooltip = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
+  let currentIndex = $state(null);
+  let previousIndex = $state(null);
   let f7Tooltip = null;
-  let timeout = null;
+  let timeout = $state(null);
 
   const setCurrentIndex = (index) => {
     if (index === null) {
@@ -132,14 +131,15 @@
 
   const watchCurrentIndex = () => {
     if (currentIndex === previousIndex) return;
-    emit('select', [currentIndex, datasets[currentIndex]]);
+    restProps.onSelect?.(currentIndex, datasets[currentIndex]);
+    restProps.onselect?.(currentIndex, datasets[currentIndex]);
     setTooltip();
   };
 
-  $: classes = classNames('pie-chart', className);
-  $: paths = getPaths(datasets);
+  const classes = $derived(classNames('pie-chart', className));
+  const paths = $derived(getPaths(datasets));
 
-  $: watchCurrentIndex(currentIndex);
+  $effect(() => watchCurrentIndex(currentIndex));
 
   onDestroy(() => {
     if (f7Tooltip && f7Tooltip.destroy) {
@@ -149,7 +149,7 @@
   });
 </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={size}
@@ -158,16 +158,18 @@
     style="transform: rotate(-90deg)"
   >
     {#each paths as path, index (index)}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
       <path
         d={path.points}
         fill={path.color}
         data-index={index}
         class={classNames({ 'pie-chart-hidden': currentIndex !== null && currentIndex !== index })}
-        on:click={() => setCurrentIndex(index)}
-        on:mouseenter={() => setCurrentIndex(index)}
-        on:mouseleave={() => setCurrentIndex(null)}
-      />
+        onclick={() => setCurrentIndex(index)}
+        onmouseenter={() => setCurrentIndex(index)}
+        onmouseleave={() => setCurrentIndex(null)}
+      ></path>
     {/each}
   </svg>
-  <slot />
+  {@render children?.()}
 </div>