framework7-svelte 8.3.3 → 9.0.0-beta.1

package/components/radio.d.ts

@@ -1,15 +1,15 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface RadioProps {
-  checked ?: boolean;
-  name ?: number | string;
-  value ?: number | string | boolean;
-  disabled ?: boolean;
-  readonly ?: boolean;
-  defaultChecked ?: boolean;
+interface Props {
+  checked?: boolean;
+  name?: number | string;
+  value?: number | string | boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  defaultChecked?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -17,15 +17,22 @@ interface RadioProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onChange ?: (event?: any) => void;
+  onChange?: (event?: any) => void;
+  children?: Snippet;
+  onchange?: () => void;
 }
 
+interface RadioProps {}
+interface RadioProps extends Props {}
+
+interface RadioEvents extends Record<'',{}>{}
+
 
 
 declare class Radio extends SvelteComponent<
-  RadioProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof RadioProps>,
-  { change: CustomEvent<void>; },
-  {  'default' : {}; }
+  RadioProps,
+  RadioEvents,
+  {  }
 > {}
 
 export { RadioProps };

package/components/radio.svelte

@@ -1,48 +1,44 @@
 <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';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    checked = undefined,
+    name = undefined,
+    value = undefined,
+    disabled = undefined,
+    readonly = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
 
-  export let checked = undefined;
-  export let name = undefined;
-  export let value = undefined;
-  export let disabled = undefined;
-  export let readonly = undefined;
-
-  let inputEl;
-
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     'radio',
     {
       disabled,
     },
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 
   function onChange(event) {
-    emit('change', [event]);
     checked = event.target.checked;
+    restProps.onchange?.(event);
   }
 </script>
 
-<label class={classes} {...restProps($$restProps)}>
+<label class={classes} {...restProps}>
   <input
-    bind:this={inputEl}
     type="radio"
     {name}
     value={typeof value === 'undefined' ? '' : value}
     {disabled}
     {readonly}
     {checked}
-    on:change={onChange}
+    onchange={onChange}
   />
-  <i class="icon-radio" />
-  <slot />
+  <i class="icon-radio"></i>
+  {@render children?.()}
 </label>

package/components/range.d.ts

@@ -1,31 +1,31 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Range } from 'framework7/types';
 
 
-interface RangeProps {
-  init ?: boolean;
-  value ?: number | Array<any> | string;
-  min ?: number | string;
-  max ?: number | string;
-  step ?: number | string;
-  label ?: boolean;
-  dual ?: boolean;
-  vertical ?: boolean;
-  verticalReversed ?: boolean;
-  draggableBar ?: boolean;
-  formatLabel ?: Function;
-  scale ?: boolean;
-  scaleSteps ?: number;
-  scaleSubSteps ?: number;
-  formatScaleLabel ?: Function;
-  limitKnobPosition ?: boolean;
-  name ?: string;
-  input ?: boolean;
-  inputId ?: string;
-  disabled ?: boolean;
+interface Props {
+  init?: boolean;
+  value?: number | Array<any> | string;
+  min?: number | string;
+  max?: number | string;
+  step?: number | string;
+  label?: boolean;
+  dual?: boolean;
+  vertical?: boolean;
+  verticalReversed?: boolean;
+  draggableBar?: boolean;
+  formatLabel?: Function;
+  scale?: boolean;
+  scaleSteps?: number;
+  scaleSubSteps?: number;
+  formatScaleLabel?: Function;
+  limitKnobPosition?: boolean;
+  name?: string;
+  input?: boolean;
+  inputId?: string;
+  disabled?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -33,16 +33,24 @@ interface RangeProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onRangeChange ?: (val?: any) => void;
-  onRangeChanged ?: (val?: any) => void;
+  onRangeChange?: (val?: any) => void;
+  onRangeChanged?: (val?: any) => void;
+  children?: Snippet;
+  onrangechange?: () => void;
+  onrangechanged?: () => void;
 }
 
+interface RangeProps {}
+interface RangeProps extends Props {}
+
+interface RangeEvents extends Record<'',{}>{}
+
 
 
 declare class Range extends SvelteComponent<
-  RangeProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof RangeProps>,
-  { rangeChange: CustomEvent<void>; rangeChanged: CustomEvent<void>; },
-  {  'default' : {}; }
+  RangeProps,
+  RangeEvents,
+  {  }
 > {}
 
 export { RangeProps };

package/components/range.svelte

@@ -1,53 +1,54 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, noUndefinedProps, 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 {
+    class: className,
+    init = true,
+    value = 0,
+    min = 0,
+    max = 100,
+    step = 1,
+    label = false,
+    dual = false,
+    vertical = false,
+    verticalReversed = false,
+    draggableBar = true,
+    formatLabel = undefined,
+    scale = false,
+    scaleSteps = 5,
+    scaleSubSteps = 0,
+    formatScaleLabel = undefined,
+    limitKnobPosition = undefined,
+    name = undefined,
+    input = false,
+    inputId = undefined,
+    disabled = false,
+    children,
+    ...restProps
+  } = $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 label = false;
-  export let dual = false;
-  export let vertical = false;
-  export let verticalReversed = false;
-  export let draggableBar = true;
-  export let formatLabel = undefined;
-  export let scale = false;
-  export let scaleSteps = 5;
-  export let scaleSubSteps = 0;
-  export let formatScaleLabel = undefined;
-  export let limitKnobPosition = undefined;
-  export let name = undefined;
-  export let input = false;
-  export let inputId = undefined;
-  export let disabled = false;
-
-  let el;
+  let el = $state(null);
   let f7Range;
 
   export function instance() {
     return f7Range;
   }
 
-  $: classes = classNames(
-    className,
-    'range-slider',
-    {
-      'range-slider-horizontal': !vertical,
-      'range-slider-vertical': vertical,
-      'range-slider-vertical-reversed': vertical && verticalReversed,
-      disabled,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'range-slider',
+      {
+        'range-slider-horizontal': !vertical,
+        'range-slider-vertical': vertical,
+        'range-slider-vertical-reversed': vertical && verticalReversed,
+        disabled,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function watchValue(newValue) {
@@ -55,7 +56,7 @@
     f7Range.setValue(newValue);
   }
 
-  $: watchValue(value);
+  $effect(() => watchValue(value));
 
   onMount(() => {
     if (!init) return;
@@ -80,10 +81,12 @@
           limitKnobPosition,
           on: {
             change(range, val) {
-              emit('rangeChange', [val]);
+              restProps.onRangeChange?.(val);
+              restProps.onrangechange?.(val);
             },
             changed(range, val) {
-              emit('rangeChanged', [val]);
+              restProps.onRangeChanged?.(val);
+              restProps.onrangechanged?.(val);
               value = val;
             },
           },
@@ -100,7 +103,7 @@
   });
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
+<div bind:this={el} class={classes} {...restProps}>
   {#if input}<input type="range" {name} id={inputId} />{/if}
-  <slot range={f7Range} />
+  {@render children?.(f7Range)}
 </div>

package/components/routable-modals.d.ts

@@ -1,17 +1,22 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface RoutableModalsProps {
+interface Props {
   
 }
 
+interface RoutableModalsProps {}
+interface RoutableModalsProps extends Props {}
+
+interface RoutableModalsEvents extends Record<'',{}>{}
+
 
 
 declare class RoutableModals extends SvelteComponent<
-  RoutableModalsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof RoutableModalsProps>,
-  { modalsRouterDidUpdate: CustomEvent<void>; },
+  RoutableModalsProps,
+  RoutableModalsEvents,
   {  }
 > {}
 

package/components/routable-modals.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { onMount, onDestroy, afterUpdate, tick } from 'svelte'; // eslint-disable-line
+  import { onMount, onDestroy, tick } from 'svelte'; // eslint-disable-line
   import { app } from '../shared/f7.js';
 
-  let modals = [];
-  let el;
-  let routerData;
+  let modals = $state([]);
+  let el = $state(null);
+  let routerData = $state(null);
 
   onMount(() => {
     routerData = {
@@ -12,15 +12,16 @@
       modals,
       setModals(m) {
         tick().then(() => {
-          modals = m;
+          modals = [...m];
         });
       },
     };
     app.f7routers.modals = routerData;
   });
-  afterUpdate(() => {
+  $effect(() => {
     if (!routerData) return;
     app.f7events.emit('modalsRouterDidUpdate', routerData);
+    return modals;
   });
   onDestroy(() => {
     if (!routerData) return;
@@ -30,7 +31,7 @@
 </script>
 
 <div class="framework7-modals" bind:this={el}>
-  {#each modals as modal (modal.id)}
-    <svelte:component this={modal.component} {...modal.props} />
+  {#each modals as Modal (Modal.id)}
+    <Modal.component {...Modal.props} />
   {/each}
 </div>

package/components/router-context-provider.d.ts

@@ -1,18 +1,23 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface RouterContextProviderProps {
-  
+interface Props {
+  children?: Snippet;
 }
 
+interface RouterContextProviderProps {}
+interface RouterContextProviderProps extends Props {}
+
+interface RouterContextProviderEvents extends Record<'',{}>{}
+
 
 
 declare class RouterContextProvider extends SvelteComponent<
-  RouterContextProviderProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof RouterContextProviderProps>,
-  {  },
-  {  'default' : {}; }
+  RouterContextProviderProps,
+  RouterContextProviderEvents,
+  {  }
 > {}
 
 export { RouterContextProviderProps };

package/components/router-context-provider.svelte

@@ -1,8 +1,6 @@
 <script>
   import { setContext } from 'svelte';
-
-  export let route = undefined;
-  export let router = undefined;
+  let { route, router, children } = $props();
 
   setContext('RouterContext', {
     route,
@@ -10,4 +8,4 @@
   });
 </script>
 
-<slot />
+{@render children?.()}

package/components/searchbar.d.ts

@@ -1,38 +1,38 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { Searchbar } from 'framework7/types';
 
 
-interface SearchbarProps {
-  outline ?: boolean;
-  form ?: boolean;
-  placeholder ?: string;
-  disableButton ?: boolean;
-  disableButtonText ?: string;
-  clearButton ?: boolean;
-  value ?: string | number | Array<any>;
-  inputEvents ?: string;
-  expandable ?: boolean;
-  inline ?: boolean;
-  searchContainer ?: string | object;
-  searchIn ?: string;
-  searchItem ?: string;
-  searchGroup ?: string;
-  searchGroupTitle ?: string;
-  foundEl ?: string | object;
-  notFoundEl ?: string | object;
-  backdrop ?: boolean;
-  backdropEl ?: string | object;
-  hideOnEnableEl ?: string | object;
-  hideOnSearchEl ?: string | object;
-  ignore ?: string;
-  customSearch ?: boolean;
-  removeDiacritics ?: boolean;
-  hideGroupTitles ?: boolean;
-  hideGroups ?: boolean;
-  init ?: boolean;
+interface Props {
+  outline?: boolean;
+  form?: boolean;
+  placeholder?: string;
+  disableButton?: boolean;
+  disableButtonText?: string;
+  clearButton?: boolean;
+  value?: string | number | Array<any>;
+  inputEvents?: string;
+  expandable?: boolean;
+  inline?: boolean;
+  searchContainer?: string | object;
+  searchIn?: string;
+  searchItem?: string;
+  searchGroup?: string;
+  searchGroupTitle?: string;
+  foundEl?: string | object;
+  notFoundEl?: string | object;
+  backdrop?: boolean;
+  backdropEl?: string | object;
+  hideOnEnableEl?: string | object;
+  hideOnSearchEl?: string | object;
+  ignore?: string;
+  customSearch?: boolean;
+  removeDiacritics?: boolean;
+  hideGroupTitles?: boolean;
+  hideGroups?: boolean;
+  init?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -40,25 +40,42 @@ interface SearchbarProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onSearchbarSearch ?: (searchbar?: Searchbar.Searchbar, query?: any, previousQuery?: any) => void;
-  onSearchbarClear ?: (searchbar?: Searchbar.Searchbar, previousQuery?: any) => void;
-  onSearchbarEnable ?: (searchbar?: Searchbar.Searchbar) => void;
-  onSearchbarDisable ?: (searchbar?: Searchbar.Searchbar) => void;
-  onChange ?: (event?: any) => void;
-  onInput ?: (event?: any) => void;
-  onFocus ?: (event?: any) => void;
-  onBlur ?: (event?: any) => void;
-  onSubmit ?: (event?: any) => void;
-  onClickClear ?: (event?: any) => void;
-  onClickDisable ?: (event?: any) => void;
+  onSearchbarSearch?: (searchbar?: Searchbar.Searchbar, query?: any, previousQuery?: any) => void;
+  onSearchbarClear?: (searchbar?: Searchbar.Searchbar, previousQuery?: any) => void;
+  onSearchbarEnable?: (searchbar?: Searchbar.Searchbar) => void;
+  onSearchbarDisable?: (searchbar?: Searchbar.Searchbar) => void;
+  onChange?: (event?: any) => void;
+  onInput?: (event?: any) => void;
+  onFocus?: (event?: any) => void;
+  onBlur?: (event?: any) => void;
+  onSubmit?: (event?: any) => void;
+  onClickClear?: (event?: any) => void;
+  onClickDisable?: (event?: any) => void;
+  restProps?: Snippet;
+  onchange?: () => void;
+  oninput?: () => void;
+  onfocus?: () => void;
+  onblur?: () => void;
+  onsubmit?: () => void;
+  onclickclear?: () => void;
+  onclickdisable?: () => void;
+  onsearchbarsearch?: () => void;
+  onsearchbarclear?: () => void;
+  onsearchbarenable?: () => void;
+  onsearchbardisable?: () => void;
 }
 
+interface SearchbarProps {}
+interface SearchbarProps extends Props {}
+
+interface SearchbarEvents extends Record<'',{}>{}
+
 
 
 declare class Searchbar extends SvelteComponent<
-  SearchbarProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof SearchbarProps>,
-  { change: CustomEvent<void>; input: CustomEvent<void>; focus: CustomEvent<void>; blur: CustomEvent<void>; submit: CustomEvent<void>; searchbarSearch: CustomEvent<void>; searchbarClear: CustomEvent<void>; searchbarEnable: CustomEvent<void>; searchbarDisable: CustomEvent<void>; },
-  {  'before-inner' : {};  'inner-start' : {};  'input-wrap-start' : {};  'input-wrap-end' : {};  'inner-end' : {};  'default' : {};  'after-inner' : {}; }
+  SearchbarProps,
+  SearchbarEvents,
+  {  }
 > {}
 
 export { SearchbarProps };