framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/sheet.svelte

@@ -1,108 +1,120 @@
 <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 className = undefined;
-  export { className as class };
-
-  export let style = '';
-  export let opened = undefined;
-  export let animate = undefined;
-  export let top = undefined;
-  export let bottom = undefined;
-  export let position = undefined;
-  export let backdrop = undefined;
-  export let backdropEl = undefined;
-  export let closeByBackdropClick = undefined;
-  export let closeByOutsideClick = undefined;
-  export let closeOnEscape = undefined;
-  export let push = undefined;
-  export let swipeToClose = undefined;
-  export let swipeToStep = undefined;
-  export let swipeHandler = undefined;
-  export let containerEl = undefined;
-  export let breakpoints = undefined;
-  export let backdropBreakpoint = undefined;
-  export let pushBreakpoint = undefined;
-
-  let el;
-  let innerEl;
+  let {
+    class: className,
+    style = '',
+    opened = undefined,
+    animate = undefined,
+    top = undefined,
+    bottom = undefined,
+    position = undefined,
+    backdrop = undefined,
+    backdropEl = undefined,
+    closeByBackdropClick = undefined,
+    closeByOutsideClick = undefined,
+    closeOnEscape = undefined,
+    push = undefined,
+    swipeToClose = undefined,
+    swipeToStep = undefined,
+    swipeHandler = undefined,
+    containerEl = undefined,
+    breakpoints = undefined,
+    backdropBreakpoint = undefined,
+    pushBreakpoint = undefined,
+    children,
+    fixedContent,
+    staticContent,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
+  let innerEl = $state(null);
   let f7Sheet;
 
-  const state = {
-    isOpened: opened,
-    isClosing: false,
-    swipeStep: false,
-    breakpoint: false,
-  };
+  let isOpened = $state(false);
+  let isClosing = $state(false);
+  let swipeStep = $state(false);
+  let breakpoint = $state(false);
+  let isPushIn = $state(false);
+  let isPushClosing = $state(false);
 
   export function instance() {
     return f7Sheet;
   }
 
-  $: positionComputed = (() => {
+  const positionComputed = $derived.by(() => {
     if (position) return position;
     if (top) return 'top';
     if (bottom) return 'bottom';
     return 'bottom';
-  })();
+  });
 
-  $: classes = classNames(
-    className,
-    'sheet-modal',
-    `sheet-modal-${positionComputed}`,
-    {
-      'sheet-modal-push': push,
-      'modal-in-swipe-step': state.swipeStep,
-      'modal-in-breakpoint': state.breakpoint,
-    },
+  const classes = $derived(
+    classNames(
+      className,
+      'sheet-modal',
+      `sheet-modal-${positionComputed}`,
+      {
+        'sheet-modal-push': push,
+        'modal-in-swipe-step': swipeStep,
+        'modal-in-breakpoint': breakpoint,
+        'sheet-modal-push-in': !isClosing && push && isPushIn,
+        'sheet-modal-push-closing': isClosing && push && isPushClosing,
+      },
 
-    modalStateClasses(state),
-    colorClasses($$props),
+      modalStateClasses({
+        isOpened,
+        isClosing,
+        swipeStep,
+        breakpoint,
+      }),
+      colorClasses(restProps),
+    ),
   );
 
   function onOpen(instance) {
-    Object.assign(state, {
-      isOpened: true,
-      isClosing: false,
-    });
-    emit('sheetOpen', [instance]);
+    isOpened = true;
+    isClosing = false;
+    restProps.onSheetOpen?.(instance);
+    restProps.onsheetopen?.(instance);
     opened = true;
   }
   function onOpened(instance) {
-    emit('sheetOpened', [instance]);
+    restProps.onSheetOpened?.(instance);
+    restProps.onsheetopened?.(instance);
   }
   function onClose(instance) {
-    Object.assign(state, {
-      isOpened: false,
-      isClosing: true,
-    });
-    emit('sheetClose', [instance]);
+    isOpened = false;
+    isClosing = true;
+    restProps.onSheetClose?.(instance);
+    restProps.onsheetclose?.(instance);
   }
   function onClosed(instance) {
-    Object.assign(state, {
-      isClosing: false,
-    });
-    emit('sheetClosed', [instance]);
+    isClosing = false;
+    restProps.onSheetClosed?.(instance);
+    restProps.onsheetclosed?.(instance);
     opened = false;
   }
   function onBreakpoint(instance, breakpoint) {
-    emit('sheetBreakpoint', [instance, breakpoint]);
+    restProps.onSheetBreakpoint?.(instance, breakpoint);
+    restProps.onsheetbreakpoint?.(instance, breakpoint);
   }
   function onStepProgress(instance, progress) {
-    emit('sheetStepProgress', [instance, progress]);
+    restProps.onSheetStepProgress?.(instance, progress);
+    restProps.onsheetstepprogress?.(instance, progress);
   }
   function onStepOpen(instance) {
-    emit('sheetStepOpen', [instance]);
+    restProps.onSheetStepOpen?.(instance);
+    restProps.onsheetstepopen?.(instance);
   }
   function onStepClose(instance) {
-    emit('sheetStepClose', [instance]);
+    restProps.onSheetStepClose?.(instance);
+    restProps.onsheetstepclose?.(instance);
   }
 
   let initialWatched = false;
@@ -116,7 +128,7 @@
     else f7Sheet.close();
   }
 
-  $: watchOpened(opened);
+  $effect(() => watchOpened(opened));
 
   onMount(() => {
     const params = {
@@ -131,15 +143,21 @@
         stepProgress: onStepProgress,
         breakpoint: (s, value) => {
           if (value > 0 && value < 1) {
-            state.breakpoint = true;
+            breakpoint = true;
           } else {
-            state.breakpoint = false;
+            breakpoint = false;
           }
           onBreakpoint(s, value);
         },
         // eslint-disable-next-line
         _swipeStep(isSwipeStep) {
-          state.swipeStep = isSwipeStep;
+          swipeStep = isSwipeStep;
+        },
+        pushIn(s, v) {
+          isPushIn = v;
+        },
+        pushClosing(s, v) {
+          isPushClosing = v;
         },
       },
     };
@@ -180,10 +198,10 @@
   });
 </script>
 
-<div class={classes} bind:this={el} {style} {...restProps($$restProps)}>
-  <slot sheet={f7Sheet} name="fixed" />
+<div class={classes} bind:this={el} {style} {...restProps}>
+  {@render fixedContent?.(f7Sheet)}
   <div class="sheet-modal-inner" bind:this={innerEl}>
-    <slot sheet={f7Sheet} />
-    <slot sheet={f7Sheet} name="static" />
+    {@render children?.(f7Sheet)}
+    {@render staticContent?.(f7Sheet)}
   </div>
 </div>

package/components/snippet-render.d.ts

@@ -0,0 +1,24 @@
+
+import { SvelteComponent, Snippet } from 'svelte';
+import { HTMLAttributes } from 'svelte/elements';
+
+
+interface Props {
+  content?: Snippet;
+}
+
+interface SnippetRenderProps {}
+interface SnippetRenderProps extends Props {}
+
+interface SnippetRenderEvents extends Record<'',{}>{}
+
+
+
+declare class SnippetRender extends SvelteComponent<
+  SnippetRenderProps,
+  SnippetRenderEvents,
+  {  }
+> {}
+
+export { SnippetRenderProps };
+export default SnippetRender;

package/components/snippet-render.svelte

@@ -0,0 +1,9 @@
+<script>
+  let { content } = $props();
+</script>
+
+{#if typeof content === 'function'}
+  {@render content?.()}
+{:else if typeof content !== 'undefined'}
+  {content}
+{/if}

package/components/stepper.d.ts

@@ -1,45 +1,45 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Stepper } from 'framework7/types';
 
 
-interface StepperProps {
-  init ?: boolean;
-  value ?: number;
-  min ?: number;
-  max ?: number;
-  step ?: number;
-  formatValue ?: Function;
-  name ?: string;
-  inputId ?: string;
-  input ?: boolean;
-  inputType ?: string;
-  inputReadonly ?: boolean;
-  autorepeat ?: boolean;
-  autorepeatDynamic ?: boolean;
-  wraps ?: boolean;
-  manualInputMode ?: boolean;
-  decimalPoint ?: number;
-  buttonsEndInputMode ?: boolean;
-  disabled ?: boolean;
-  buttonsOnly ?: boolean;
-  round ?: boolean;
-  roundMd ?: boolean;
-  roundIos ?: boolean;
-  fill ?: boolean;
-  fillMd ?: boolean;
-  fillIos ?: boolean;
-  large ?: boolean;
-  largeMd ?: boolean;
-  largeIos ?: boolean;
-  small ?: boolean;
-  smallMd ?: boolean;
-  smallIos ?: boolean;
-  raised ?: boolean;
-  raisedMd ?: boolean;
-  raisedIos ?: boolean;
+interface Props {
+  init?: boolean;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatValue?: Function;
+  name?: string;
+  inputId?: string;
+  input?: boolean;
+  inputType?: string;
+  inputReadonly?: boolean;
+  autorepeat?: boolean;
+  autorepeatDynamic?: boolean;
+  wraps?: boolean;
+  manualInputMode?: boolean;
+  decimalPoint?: number;
+  buttonsEndInputMode?: boolean;
+  disabled?: boolean;
+  buttonsOnly?: boolean;
+  round?: boolean;
+  roundMd?: boolean;
+  roundIos?: boolean;
+  fill?: boolean;
+  fillMd?: boolean;
+  fillIos?: boolean;
+  large?: boolean;
+  largeMd?: boolean;
+  largeIos?: boolean;
+  small?: boolean;
+  smallMd?: boolean;
+  smallIos?: boolean;
+  raised?: boolean;
+  raisedMd?: boolean;
+  raisedIos?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -47,18 +47,28 @@ interface StepperProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onStepperChange ?: (newValue?: any) => void;
-  onInput ?: (event?: any, stepper?: Stepper.Stepper) => void;
-  onChange ?: (event?: any, stepper?: Stepper.Stepper) => void;
-  onStepperMinusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
-  onStepperPlusClick ?: (event?: any, stepper?: Stepper.Stepper) => void;
+  onStepperChange?: (newValue?: any) => void;
+  onInput?: (event?: any, stepper?: Stepper.Stepper) => void;
+  onChange?: (event?: any, stepper?: Stepper.Stepper) => void;
+  onStepperMinusClick?: (event?: any, stepper?: Stepper.Stepper) => void;
+  onStepperPlusClick?: (event?: any, stepper?: Stepper.Stepper) => void;
+  oninput?: () => void;
+  onchange?: () => void;
+  onstepperminusclick?: () => void;
+  onstepperplusclick?: () => void;
+  onstepperchange?: () => void;
 }
 
+interface StepperProps {}
+interface StepperProps extends Props {}
+
+interface StepperEvents extends Record<'',{}>{}
+
 
 
 declare class Stepper extends SvelteComponent<
-  StepperProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof StepperProps>,
-  { input: CustomEvent<void>; change: CustomEvent<void>; stepperMinusClick: CustomEvent<void>; stepperPlusClick: CustomEvent<void>; stepperChange: CustomEvent<void>; },
+  StepperProps,
+  StepperEvents,
   {  }
 > {}
 

package/components/stepper.svelte

@@ -1,80 +1,79 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, noUndefinedProps, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.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 init = true;
-  export let value = 0;
-  export let min = 0;
-  export let max = 100;
-  export let step = 1;
-  export let formatValue = undefined;
-  export let name = undefined;
-  export let inputId = undefined;
-  export let input = true;
-  export let inputType = 'text';
-  export let inputReadonly = false;
-  export let autorepeat = false;
-  export let autorepeatDynamic = false;
-  export let wraps = false;
-  export let manualInputMode = false;
-  export let decimalPoint = 4;
-  export let buttonsEndInputMode = true;
-  export let disabled = undefined;
-  export let buttonsOnly = undefined;
-
-  export let round = false;
-  export let roundMd = false;
-  export let roundIos = false;
-  export let fill = false;
-  export let fillMd = false;
-  export let fillIos = false;
-  export let large = false;
-  export let largeMd = false;
-  export let largeIos = false;
-  export let small = false;
-  export let smallMd = false;
-  export let smallIos = false;
-  export let raised = false;
-  export let raisedMd = false;
-  export let raisedIos = false;
-
-  let el;
+  let {
+    class: className,
+    init = true,
+    value = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    formatValue = undefined,
+    name = undefined,
+    inputId = undefined,
+    input = true,
+    inputType = 'text',
+    inputReadonly = false,
+    autorepeat = false,
+    autorepeatDynamic = false,
+    wraps = false,
+    manualInputMode = false,
+    decimalPoint = 4,
+    buttonsEndInputMode = true,
+    disabled = undefined,
+    buttonsOnly = undefined,
+    round = false,
+    roundMd = false,
+    roundIos = false,
+    fill = false,
+    fillMd = false,
+    fillIos = false,
+    large = false,
+    largeMd = false,
+    largeIos = false,
+    small = false,
+    smallMd = false,
+    smallIos = false,
+    raised = false,
+    raisedMd = false,
+    raisedIos = false,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
   let f7Stepper;
 
   export function instance() {
     return f7Stepper;
   }
 
-  $: classes = classNames(
-    className,
-    'stepper',
-    {
-      disabled,
-      'stepper-round': round,
-      'stepper-round-ios': roundIos,
-      'stepper-round-md': roundMd,
-      'stepper-fill': fill,
-      'stepper-fill-ios': fillIos,
-      'stepper-fill-md': fillMd,
-      'stepper-large': large,
-      'stepper-large-ios': largeIos,
-      'stepper-large-md': largeMd,
-      'stepper-small': small,
-      'stepper-small-ios': smallIos,
-      'stepper-small-md': smallMd,
-      'stepper-raised': raised,
-      'stepper-raised-ios': raisedIos,
-      'stepper-raised-md': raisedMd,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'stepper',
+      {
+        disabled,
+        'stepper-round': round,
+        'stepper-round-ios': roundIos,
+        'stepper-round-md': roundMd,
+        'stepper-fill': fill,
+        'stepper-fill-ios': fillIos,
+        'stepper-fill-md': fillMd,
+        'stepper-large': large,
+        'stepper-large-ios': largeIos,
+        'stepper-large-md': largeMd,
+        'stepper-small': small,
+        'stepper-small-ios': smallIos,
+        'stepper-small-md': smallMd,
+        'stepper-raised': raised,
+        'stepper-raised-ios': raisedIos,
+        'stepper-raised-md': raisedMd,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function watchValue(newValue) {
@@ -82,22 +81,26 @@
     f7Stepper.setValue(newValue);
   }
 
-  $: watchValue(value);
+  $effect(() => watchValue(value));
 
   function onInput(event) {
-    emit('input', [event, f7Stepper]);
+    restProps.onInput?.(event, f7Stepper);
+    restProps.oninput?.(event, f7Stepper);
   }
 
   function onChange(event) {
-    emit('change', [event, f7Stepper]);
+    restProps.onChange?.(event, f7Stepper);
+    restProps.onchange?.(event, f7Stepper);
   }
 
   function onMinusClick(event) {
-    emit('stepperMinusClick', [event, f7Stepper]);
+    restProps.onStepperMinusClick?.(event, f7Stepper);
+    restProps.onstepperminusclick?.(event, f7Stepper);
   }
 
   function onPlusClick(event) {
-    emit('stepperPlusClick', [event, f7Stepper]);
+    restProps.onStepperPlusClick?.(event, f7Stepper);
+    restProps.onstepperplusclick?.(event, f7Stepper);
   }
 
   onMount(() => {
@@ -119,7 +122,8 @@
           buttonsEndInputMode,
           on: {
             change(stepper, newValue) {
-              emit('stepperChange', [newValue]);
+              restProps.onStepperChange?.(newValue);
+              restProps.onstepperchange?.(newValue);
               value = newValue;
             },
           },
@@ -136,8 +140,8 @@
   });
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
-  <div on:click={onMinusClick} class="stepper-button-minus" />
+<div bind:this={el} class={classes} {...restProps}>
+  <div onclick={onMinusClick} class="stepper-button-minus" />
   {#if input && !buttonsOnly}
     <div class="stepper-input-wrap">
       <input
@@ -147,15 +151,15 @@
         min={inputType === 'number' ? min : undefined}
         max={inputType === 'number' ? max : undefined}
         step={inputType === 'number' ? step : undefined}
-        on:input={onInput}
-        on:change={onChange}
+        oninput={onInput}
+        onchange={onChange}
         value={typeof value === 'undefined' ? '' : value}
         readonly={inputReadonly}
       />
     </div>
   {/if}
   {#if !input && !buttonsOnly}
-    <div class="stepper-value">{plainText(value)}</div>
+    <div class="stepper-value">{value}</div>
   {/if}
-  <div on:click={onPlusClick} class="stepper-button-plus" />
+  <div onclick={onPlusClick} class="stepper-button-plus" />
 </div>

package/components/subnavbar.d.ts

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