framework7-svelte 8.3.4 → 9.0.0

package/components/popover.d.ts

@@ -1,21 +1,20 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Popover } from 'framework7/types';
 
 
-interface PopoverProps {
-  opened ?: boolean;
-  animate ?: boolean;
-  targetEl ?: string | object;
-  arrow ?: boolean;
-  backdrop ?: boolean;
-  backdropEl ?: string | object;
-  closeByBackdropClick ?: boolean;
-  closeByOutsideClick ?: boolean;
-  closeOnEscape ?: boolean;
-  containerEl ?: string | object;
+interface Props {
+  opened?: boolean;
+  animate?: boolean;
+  targetEl?: string | object;
+  backdrop?: boolean;
+  backdropEl?: string | object;
+  closeByBackdropClick?: boolean;
+  closeByOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  containerEl?: string | object;
   verticalPosition?: string;
   color?: string;
   colorTheme?: string;
@@ -24,18 +23,28 @@ interface PopoverProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onPopoverOpen ?: (instance?: Popover.Popover) => void;
-  onPopoverOpened ?: (instance?: Popover.Popover) => void;
-  onPopoverClose ?: (instance?: Popover.Popover) => void;
-  onPopoverClosed ?: (instance?: Popover.Popover) => void;
+  onPopoverOpen?: (instance?: Popover.Popover) => void;
+  onPopoverOpened?: (instance?: Popover.Popover) => void;
+  onPopoverClose?: (instance?: Popover.Popover) => void;
+  onPopoverClosed?: (instance?: Popover.Popover) => void;
+  children?: Snippet;
+  onpopoveropen?: () => void;
+  onpopoveropened?: () => void;
+  onpopoverclose?: () => void;
+  onpopoverclosed?: () => void;
 }
 
+interface PopoverProps {}
+interface PopoverProps extends Props {}
+
+interface PopoverEvents extends Record<'',{}>{}
+
 
 
 declare class Popover extends SvelteComponent<
-  PopoverProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PopoverProps>,
-  { popoverOpen: CustomEvent<void>; popoverOpened: CustomEvent<void>; popoverClose: CustomEvent<void>; popoverClosed: CustomEvent<void>; },
-  {  'default' : {}; }
+  PopoverProps,
+  PopoverEvents,
+  {  }
 > {}
 
 export { PopoverProps };

package/components/popover.svelte

@@ -1,66 +1,67 @@
 <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,
+    targetEl = undefined,
+    backdrop = undefined,
+    backdropEl = undefined,
+    closeByBackdropClick = undefined,
+    closeByOutsideClick = undefined,
+    closeOnEscape = undefined,
+    containerEl = undefined,
+    verticalPosition = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let style = '';
-  export let opened = undefined;
-  export let animate = undefined;
-  export let targetEl = undefined;
-  export let arrow = 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;
-  export let verticalPosition = undefined;
-
-  let el;
+  let el = $state(null);
   let f7Popover;
 
-  const state = {
-    isOpened: opened,
-    isClosing: false,
-  };
+  let isOpened = $state(opened);
+  let isClosing = $state(false);
 
   export function instance() {
     return f7Popover;
   }
 
-  $: classes = classNames(className, 'popover', modalStateClasses(state), colorClasses($$props));
+  const classes = $derived(
+    classNames(
+      className,
+      'popover',
+      modalStateClasses({ isOpened, isClosing }),
+      colorClasses(restProps),
+    ),
+  );
 
   function onOpen(instance) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-    emit('popoverOpen', [instance]);
+    isOpened = true;
+    isClosing = false;
+    restProps.onPopoverOpen?.(instance);
+    restProps.onpopoveropen?.(instance);
     opened = true;
   }
   function onOpened(instance) {
-    emit('popoverOpened', [instance]);
+    restProps.onPopoverOpened?.(instance);
+    restProps.onpopoveropened?.(instance);
   }
   function onClose(instance) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('popoverClose', [instance]);
+    isOpened = false;
+    isClosing = true;
+    restProps.onPopoverClose?.(instance);
+    restProps.onpopoverclose?.(instance);
   }
   function onClosed(instance) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('popoverClosed', [instance]);
+    isClosing = false;
+    restProps.onPopoverClosed?.(instance);
+    restProps.onpopoverclosed?.(instance);
     opened = false;
   }
 
@@ -75,7 +76,7 @@
     else f7Popover.close();
   }
 
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   onMount(() => {
     const params = {
@@ -95,7 +96,6 @@
     if (typeof closeByOutsideClick !== 'undefined')
       params.closeByOutsideClick = closeByOutsideClick;
     if (typeof closeOnEscape !== 'undefined') params.closeOnEscape = closeOnEscape;
-    if (typeof arrow !== 'undefined') params.arrow = arrow;
     if (typeof backdrop !== 'undefined') params.backdrop = backdrop;
     if (typeof backdropEl !== 'undefined') params.backdropEl = backdropEl;
     if (typeof containerEl !== 'undefined') params.containerEl = containerEl;
@@ -115,11 +115,8 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  {#if arrow !== false}
-    <div class="popover-arrow" />
-  {/if}
+<div class={classes} bind:this={el} {style} {...restProps}>
   <div class="popover-inner">
-    <slot popover={f7Popover} />
+    {@render children?.(f7Popover)}
   </div>
 </div>

package/components/popup.d.ts

@@ -1,21 +1,21 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Popup } from 'framework7/types';
 
 
-interface PopupProps {
-  tabletFullscreen ?: boolean;
-  opened ?: boolean;
-  animate ?: boolean;
-  backdrop ?: boolean;
-  backdropEl ?: string | object;
-  closeByBackdropClick ?: boolean;
-  closeOnEscape ?: boolean;
-  swipeToClose ?: boolean | string;
-  swipeHandler ?: string | object;
-  push ?: boolean;
+interface Props {
+  tabletFullscreen?: boolean;
+  opened?: boolean;
+  animate?: boolean;
+  backdrop?: boolean;
+  backdropEl?: string | object;
+  closeByBackdropClick?: boolean;
+  closeOnEscape?: boolean;
+  swipeToClose?: boolean | string;
+  swipeHandler?: string | object;
+  push?: boolean;
   containerEl?: string | object;
   color?: string;
   colorTheme?: string;
@@ -24,22 +24,36 @@ interface PopupProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onPopupSwipeStart ?: (instance?: Popup.Popup) => void;
-  onPopupSwipeMove ?: (instance?: Popup.Popup) => void;
-  onPopupSwipeEnd ?: (instance?: Popup.Popup) => void;
-  onPopupSwipeClose ?: (instance?: Popup.Popup) => void;
-  onPopupOpen ?: (instance?: Popup.Popup) => void;
-  onPopupOpened ?: (instance?: Popup.Popup) => void;
-  onPopupClose ?: (instance?: Popup.Popup) => void;
-  onPopupClosed ?: (instance?: Popup.Popup) => void;
+  onPopupSwipeStart?: (instance?: Popup.Popup) => void;
+  onPopupSwipeMove?: (instance?: Popup.Popup) => void;
+  onPopupSwipeEnd?: (instance?: Popup.Popup) => void;
+  onPopupSwipeClose?: (instance?: Popup.Popup) => void;
+  onPopupOpen?: (instance?: Popup.Popup) => void;
+  onPopupOpened?: (instance?: Popup.Popup) => void;
+  onPopupClose?: (instance?: Popup.Popup) => void;
+  onPopupClosed?: (instance?: Popup.Popup) => void;
+  children?: Snippet;
+  onpopupswipestart?: () => void;
+  onpopupswipemove?: () => void;
+  onpopupswipeend?: () => void;
+  onpopupswipeclose?: () => void;
+  onpopupopen?: () => void;
+  onpopupopened?: () => void;
+  onpopupclose?: () => void;
+  onpopupclosed?: () => void;
 }
 
+interface PopupProps {}
+interface PopupProps extends Props {}
+
+interface PopupEvents extends Record<'',{}>{}
+
 
 
 declare class Popup extends SvelteComponent<
-  PopupProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PopupProps>,
-  { popupSwipeStart: CustomEvent<void>; popupSwipeMove: CustomEvent<void>; popupSwipeEnd: CustomEvent<void>; popupSwipeClose: CustomEvent<void>; popupOpen: CustomEvent<void>; popupOpened: CustomEvent<void>; popupClose: CustomEvent<void>; popupClosed: CustomEvent<void>; },
-  {  'default' : {}; }
+  PopupProps,
+  PopupEvents,
+  {  }
 > {}
 
 export { PopupProps };

package/components/popup.svelte

@@ -1,92 +1,97 @@
 <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 = '',
+    tabletFullscreen = undefined,
+    opened = undefined,
+    animate = undefined,
+    backdrop = undefined,
+    backdropEl = undefined,
+    closeByBackdropClick = undefined,
+    closeOnEscape = undefined,
+    swipeToClose = false,
+    swipeHandler = undefined,
+    push = undefined,
+    containerEl = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let style = '';
-  export let tabletFullscreen = undefined;
-  export let opened = undefined;
-  export let animate = undefined;
-  export let backdrop = undefined;
-  export let backdropEl = undefined;
-  export let closeByBackdropClick = undefined;
-  export let closeOnEscape = undefined;
-  export let swipeToClose = false;
-  export let swipeHandler = undefined;
-  export let push = undefined;
-  export let containerEl = undefined;
-
-  let el;
+  let el = $state(null);
   let f7Popup;
 
-  const state = {
-    isOpened: opened,
-    isClosing: false,
-  };
+  let isOpened = $state(opened);
+  let isClosing = $state(false);
+  let isPushIn = $state(false);
+  let isPushClosing = $state(false);
 
   export function instance() {
     return f7Popup;
   }
 
-  $: classes = classNames(
-    className,
-    'popup',
-    {
-      'popup-tablet-fullscreen': tabletFullscreen,
-      'popup-push': push,
-    },
-    modalStateClasses(state),
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'popup',
+      {
+        'popup-tablet-fullscreen': tabletFullscreen,
+        'popup-push': push,
+        'popup-push-in': !isClosing && push && isPushIn,
+        'popup-push-closing': isClosing && push && isPushClosing,
+      },
+      modalStateClasses({ isOpened, isClosing }),
+      colorClasses(restProps),
+    ),
   );
 
   function onSwipeStart(instance) {
-    emit('popupSwipeStart', [instance]);
+    restProps.onPopupSwipeStart?.(instance);
+    restProps.onpopupswipestart?.(instance);
   }
   function onSwipeMove(instance) {
-    emit('popupSwipeMove', [instance]);
+    restProps.onPopupSwipeMove?.(instance);
+    restProps.onpopupswipemove?.(instance);
   }
   function onSwipeEnd(instance) {
-    emit('popupSwipeEnd', [instance]);
+    restProps.onPopupSwipeEnd?.(instance);
+    restProps.onpopupswipeend?.(instance);
   }
   function onSwipeClose(instance) {
-    emit('popupSwipeClose', [instance]);
+    restProps.onPopupSwipeClose?.(instance);
+    restProps.onpopupswipeclose?.(instance);
   }
 
   function onOpen(instance) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-    emit('popupOpen', [instance]);
+    isOpened = true;
+    isClosing = false;
+    restProps.onPopupOpen?.(instance);
+    restProps.onpopupopen?.(instance);
     opened = true;
   }
   function onOpened(instance) {
-    emit('popupOpened', [instance]);
+    restProps.onPopupOpened?.(instance);
+    restProps.onpopupopened?.(instance);
   }
   function onClose(instance) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('popupClose', [instance]);
+    isOpened = false;
+    isClosing = true;
+    restProps.onPopupClose?.(instance);
+    restProps.onpopupclose?.(instance);
   }
   function onClosed(instance) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('popupClosed', [instance]);
+    isClosing = false;
+    restProps.onPopupClosed?.(instance);
+    restProps.onpopupclosed?.(instance);
     opened = false;
   }
 
-  let initialWatched = false;
+  let initialWatched = $state(false);
   function watchOpened(openedPassed) {
     if (!initialWatched) {
       initialWatched = true;
@@ -97,7 +102,7 @@
     else f7Popup.close();
   }
 
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   onMount(() => {
     const popupParams = {
@@ -111,6 +116,12 @@
         opened: onOpened,
         close: onClose,
         closed: onClosed,
+        pushIn(p, v) {
+          isPushIn = v;
+        },
+        pushClosing(p, v) {
+          isPushClosing = v;
+        },
       },
     };
     if (typeof closeByBackdropClick !== 'undefined')
@@ -136,6 +147,6 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <slot popup={f7Popup} />
+<div class={classes} bind:this={el} {style} {...restProps}>
+  {@render children?.(f7Popup)}
 </div>

package/components/preloader.d.ts

@@ -1,10 +1,10 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface PreloaderProps {
-  size ?: number | string;
+interface Props {
+  size?: number | string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -14,11 +14,16 @@ interface PreloaderProps {
   dark?: boolean;
 }
 
+interface PreloaderProps {}
+interface PreloaderProps extends Props {}
+
+interface PreloaderEvents extends Record<'',{}>{}
+
 
 
 declare class Preloader extends SvelteComponent<
-  PreloaderProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof PreloaderProps>,
-  {  },
+  PreloaderProps,
+  PreloaderEvents,
   {  }
 > {}
 

package/components/preloader.svelte

@@ -1,39 +1,38 @@
 <script>
-  import { restProps } from '../shared/rest-props.js';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
   import { useTheme } from '../shared/use-theme.js';
-
-  export let style = undefined;
-
-  let className = undefined;
-  export { className as class };
-  export let size = undefined;
+  let { class: className, size = undefined, style = undefined, children, ...restProps } = $props();
 
   let theme = useTheme((t) => {
     theme = t;
   });
 
-  $: sizeComputed =
-    size && typeof size === 'string' && size.indexOf('px') >= 0 ? size.replace('px', '') : size;
+  const sizeComputed = $derived(
+    size && typeof size === 'string' && size.indexOf('px') >= 0 ? size.replace('px', '') : size,
+  );
 
-  $: preloaderStyle = (
-    (style || '') +
-    (sizeComputed
-      ? `;width: ${sizeComputed}px; height: ${sizeComputed}px; --f7-preloader-size: ${sizeComputed}px`
-      : '')
-  ).replace(';;', ';');
+  const preloaderStyle = $derived(
+    (
+      (style || '') +
+      (sizeComputed
+        ? `;width: ${sizeComputed}px; height: ${sizeComputed}px; --f7-preloader-size: ${sizeComputed}px`
+        : '')
+    ).replace(';;', ';'),
+  );
 
-  $: classes = classNames(
-    className,
-    {
-      preloader: true,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      {
+        preloader: true,
+      },
+      colorClasses(restProps),
+    ),
   );
 </script>
 
-<span style={preloaderStyle} class={classes} {...restProps($$restProps)}>
+<span style={preloaderStyle} class={classes} {...restProps}>
   {#if theme && theme.md}
     <span class="preloader-inner">
       <svg viewBox="0 0 36 36">
@@ -42,14 +41,14 @@
     </span>
   {:else if theme && theme.ios}
     <span class="preloader-inner">
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
-      <span class="preloader-inner-line" />
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
+      <span class="preloader-inner-line"></span>
     </span>
-  {:else}<span class="preloader-inner" />{/if}
+  {:else}<span class="preloader-inner"></span>{/if}
 </span>

package/components/progressbar.d.ts

@@ -1,11 +1,11 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ProgressbarProps {
-  progress ?: number;
-  infinite ?: boolean;
+interface Props {
+  progress?: number;
+  infinite?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -15,11 +15,16 @@ interface ProgressbarProps {
   dark?: boolean;
 }
 
+interface ProgressbarProps {}
+interface ProgressbarProps extends Props {}
+
+interface ProgressbarEvents extends Record<'',{}>{}
+
 
 
 declare class Progressbar extends SvelteComponent<
-  ProgressbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ProgressbarProps>,
-  {  },
+  ProgressbarProps,
+  ProgressbarEvents,
   {  }
 > {}
 

package/components/progressbar.svelte

@@ -1,32 +1,28 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
   import { app } from '../shared/f7.js';
+  let { class: className, progress = 0, infinite = false, ...restProps } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  export let progress = 0;
-  export let infinite = false;
-
-  let el;
+  let el = $state(null);
 
   export function set(progress, speed) {
     if (!app.f7) return;
     app.f7.progressbar.set(el, progress, speed);
   }
 
-  $: classes = classNames(
-    className,
-    'progressbar',
-    {
-      'progressbar-infinite': infinite,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'progressbar',
+      {
+        'progressbar-infinite': infinite,
+      },
+      colorClasses(restProps),
+    ),
   );
 </script>
 
-<span bind:this={el} class={classes} data-progress={progress} {...restProps($$restProps)}>
-  <span style={`transform: ${progress ? `translate3d(${-100 + progress}%, 0, 0)` : ''}`} />
+<span bind:this={el} class={classes} data-progress={progress} {...restProps}>
+  <span style={`transform: ${progress ? `translate3d(${-100 + progress}%, 0, 0)` : ''}`}></span>
 </span>