framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/card.svelte

@@ -1,66 +1,62 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, plainText } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.js';
 
   import CardHeader from './card-header.svelte';
   import CardContent from './card-content.svelte';
   import CardFooter from './card-footer.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    title = undefined,
+    raised = false,
+    outline = false,
+    outlineIos = false,
+    outlineMd = false,
+    headerDivider = false,
+    footerDivider = false,
+    expandable = false,
+    expandableAnimateWidth = false,
+    expandableOpened = false,
+    animate = undefined,
+    hideNavbarOnOpen = undefined,
+    hideToolbarOnOpen = undefined,
+    hideStatusbarOnOpen = undefined,
+    scrollableEl = undefined,
+    swipeToClose = undefined,
+    closeByBackdropClick = undefined,
+    backdrop = undefined,
+    backdropEl = undefined,
+    padding = true,
+    children,
+    header,
+    content,
+    footer,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
 
-  export let title = undefined;
-  export let content = undefined;
-  export let footer = undefined;
-  export let raised = false;
-  export let outline = false;
-  export let outlineIos = false;
-  export let outlineMd = false;
-  export let headerDivider = false;
-  export let footerDivider = false;
-  export let expandable = false;
-  export let expandableAnimateWidth = false;
-  export let expandableOpened = false;
-  export let animate = undefined;
-  export let hideNavbarOnOpen = undefined;
-  export let hideToolbarOnOpen = undefined;
-  export let hideStatusbarOnOpen = undefined;
-  export let scrollableEl = undefined;
-  export let swipeToClose = undefined;
-  export let closeByBackdropClick = undefined;
-  export let backdrop = undefined;
-  export let backdropEl = undefined;
-  export let padding = true;
-
-  let el;
-
-  $: classes = classNames(
-    className,
-    'card',
-    {
-      'card-outline': outline,
-      'card-outline-ios': outlineIos,
-      'card-outline-md': outlineMd,
-      'card-raised': raised,
-      'card-header-divider': headerDivider,
-      'card-footer-divider': footerDivider,
-      'card-expandable': expandable,
-      'card-expandable-animate-width': expandableAnimateWidth,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'card',
+      {
+        'card-outline': outline,
+        'card-outline-ios': outlineIos,
+        'card-outline-md': outlineMd,
+        'card-raised': raised,
+        'card-header-divider': headerDivider,
+        'card-footer-divider': footerDivider,
+        'card-expandable': expandable,
+        'card-expandable-animate-width': expandableAnimateWidth,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  /* eslint-disable no-undef */
-  $: hasHeaderSlots = $$slots.header;
-  $: hasContentSlots = $$slots.content;
-  $: hasFooterSlots = $$slots.footer;
-  /* eslint-enable no-undef */
-
   function open() {
     app.f7.card.open(el);
   }
@@ -82,28 +78,33 @@
     }
   }
 
-  $: watchOpened(expandableOpened);
+  $effect(() => watchOpened(expandableOpened));
 
   function onBeforeOpen(cardEl, prevent) {
     if (cardEl !== el) return;
-    emit('cardBeforeOpen', [el, prevent]);
+    restProps.oncardbeforeopen?.(el, prevent);
+    restProps.onCardBeforeOpen?.(el, prevent);
   }
   function onOpen(cardEl) {
     if (cardEl !== el) return;
-    emit('cardOpen', [el]);
+    restProps.oncardopen?.(el);
+    restProps.onCardOpen?.(el);
     expandableOpened = true;
   }
   function onOpened(cardEl, pageEl) {
     if (cardEl !== el) return;
-    emit('cardOpened', [el, pageEl]);
+    restProps.oncardopened?.(el, pageEl);
+    restProps.onCardOpened?.(el, pageEl);
   }
   function onClose(cardEl) {
     if (cardEl !== el) return;
-    emit('cardClose', [el]);
+    restProps.oncardclose?.(el);
+    restProps.onCardClose?.(el);
   }
   function onClosed(cardEl, pageEl) {
     if (cardEl !== el) return;
-    emit('cardClosed', [el, pageEl]);
+    restProps.oncardclosed?.(el, pageEl);
+    restProps.onCardClosed?.(el, pageEl);
     expandableOpened = false;
   }
 
@@ -152,25 +153,35 @@
     : closeByBackdropClick.toString()}
   data-backdrop={typeof backdrop === 'undefined' ? backdrop : backdrop.toString()}
   data-backdrop-el={backdropEl}
-  {...restProps($$restProps)}
+  {...restProps}
 >
-  {#if typeof title !== 'undefined' || hasHeaderSlots}
+  {#if typeof title !== 'undefined' || typeof header !== 'undefined'}
     <CardHeader>
       {plainText(title)}
-      <slot name="header" />
+      {#if typeof header === 'function'}
+        {@render header?.()}
+      {:else if typeof header !== 'undefined'}
+        {header}
+      {/if}
     </CardHeader>
   {/if}
-  {#if typeof content !== 'undefined' || hasContentSlots}
+  {#if typeof content !== 'undefined' || typeof content !== 'undefined'}
     <CardContent {padding}>
-      {plainText(content)}
-      <slot name="content" />
+      {#if typeof content === 'function'}
+        {@render content?.()}
+      {:else if typeof content !== 'undefined'}
+        {content}
+      {/if}
     </CardContent>
   {/if}
-  {#if typeof footer !== 'undefined' || hasFooterSlots}
+  {#if typeof footer !== 'undefined' || typeof footer !== 'undefined'}
     <CardFooter>
-      {plainText(footer)}
-      <slot name="footer" />
+      {#if typeof footer === 'function'}
+        {@render footer?.()}
+      {:else if typeof footer !== 'undefined'}
+        {footer}
+      {/if}
     </CardFooter>
   {/if}
-  <slot />
+  {@render children?.()}
 </div>

package/components/checkbox.d.ts

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

package/components/checkbox.svelte

@@ -1,35 +1,37 @@
 <script>
-  import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
+  import { onMount } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let checked = undefined;
-  export let indeterminate = undefined;
-  export let name = undefined;
-  export let value = undefined;
-  export let disabled = undefined;
-  export let readonly = undefined;
-
-  let inputEl;
-
-  $: classes = classNames(
-    className,
-    {
-      checkbox: true,
-      disabled,
-    },
-    colorClasses($$props),
+  import { classNames } from '../shared/utils.js';
+
+  let {
+    class: className,
+    checked = undefined,
+    indeterminate = undefined,
+    name = undefined,
+    value = undefined,
+    disabled = undefined,
+    readonly = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  let inputEl = $state(null);
+
+  const classes = $derived(
+    classNames(
+      className,
+      {
+        checkbox: true,
+        disabled,
+      },
+      colorClasses(restProps),
+    ),
   );
 
   function onChange(event) {
-    emit('change', [event]);
     checked = event.target.checked;
+    restProps.onchange?.(event);
+    restProps.onChange?.(event);
   }
 
   onMount(() => {
@@ -38,14 +40,14 @@
     }
   });
 
-  afterUpdate(() => {
+  $effect(() => {
     if (inputEl) {
       inputEl.indeterminate = indeterminate;
     }
   });
 </script>
 
-<label class={classes} {...restProps($$restProps)}>
+<label class={classes} {...restProps}>
   <input
     bind:this={inputEl}
     type="checkbox"
@@ -54,8 +56,8 @@
     {disabled}
     {readonly}
     {checked}
-    on:change={onChange}
+    onchange={onChange}
   />
   <i class="icon-checkbox" />
-  <slot />
+  {@render children?.()}
 </label>

package/components/chip.d.ts

@@ -1,19 +1,19 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ChipProps {
-  media ?: string;
-  text ?: string | number;
-  deleteable ?: boolean;
-  mediaBgColor ?: string;
-  mediaTextColor ?: string;
-  outline ?: boolean;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  onClick ?: (event?: any) => void;
-  onDelete ?: (event?: any) => void;
+interface Props {
+  media?: string | Snippet;
+  text?: string | number | Snippet;
+  deleteable?: boolean;
+  mediaBgColor?: string;
+  mediaTextColor?: string;
+  outline?: boolean;
+  tooltip?: string;
+  tooltipTrigger?: string;
+  onClick?: (event?: any) => void;
+  onDelete?: (event?: any) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -28,14 +28,21 @@ interface ChipProps {
   iconMd?: string;
   iconColor?: string;
   iconSize?: string | number;
+  children?: Snippet;
+  ondelete?: () => void;
 }
 
+interface ChipProps {}
+interface ChipProps extends Props {}
+
+interface ChipEvents extends Record<'',{}>{}
+
 
 
 declare class Chip extends SvelteComponent<
-  ChipProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ChipProps>,
-  { click: CustomEvent<void>; delete: CustomEvent<void>; },
-  {  'media' : {};  'text' : {};  'default' : {}; }
+  ChipProps,
+  ChipEvents,
+  {  }
 > {}
 
 export { ChipProps };

package/components/chip.svelte

@@ -1,87 +1,81 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-
   import { colorClasses } from '../shared/mixins.js';
-  import { classNames, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
   import { useTooltip } from '../shared/use-tooltip.js';
   import { useIcon } from '../shared/use-icon.js';
 
   import UseIcon from './use-icon.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let media = undefined;
-  export let text = undefined;
-  export let deleteable = undefined;
-  export let mediaBgColor = undefined;
-  export let mediaTextColor = undefined;
-  export let outline = undefined;
+  let {
+    class: className,
+    media = undefined,
+    text = undefined,
+    deleteable = undefined,
+    mediaBgColor = undefined,
+    mediaTextColor = undefined,
+    outline = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
+  let el = $state(null);
 
-  let el;
-
-  $: classes = classNames(
-    className,
-    'chip',
-    {
-      'chip-outline': outline,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'chip',
+      {
+        'chip-outline': outline,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  $: mediaClasses = classNames(
-    'chip-media',
-    mediaTextColor && `text-color-${mediaTextColor}`,
-    mediaBgColor && `bg-color-${mediaBgColor}`,
+  const mediaClasses = $derived(
+    classNames(
+      'chip-media',
+      mediaTextColor && `text-color-${mediaTextColor}`,
+      mediaBgColor && `bg-color-${mediaBgColor}`,
+    ),
   );
 
-  // eslint-disable-next-line
-  $: hasMediaSlots = $$slots.media;
-  // eslint-disable-next-line
-  $: hasTextSlots = $$slots.text;
-  // eslint-disable-next-line
-  $: hasDefaultSlots = $$slots.default;
-
-  $: icon = useIcon($$props);
+  const icon = $derived(useIcon(restProps));
 
-  function onClick(e) {
-    emit('click', [e]);
-  }
   function onDeleteClick(e) {
-    emit('delete', [e]);
+    restProps.onDelete?.(e);
+    restProps.ondelete?.(e);
   }
 </script>
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <!-- svelte-ignore a11y-missing-content -->
-<div
-  bind:this={el}
-  class={classes}
-  on:click={onClick}
-  {...restProps($$restProps)}
-  use:useTooltip={{ tooltip, tooltipTrigger }}
->
-  {#if media || hasMediaSlots || icon}
+<div bind:this={el} class={classes} {...restProps} use:useTooltip={{ tooltip, tooltipTrigger }}>
+  {#if media || icon}
     <div class={mediaClasses}>
       {#if icon}
         <UseIcon {icon} />
       {/if}
-      {plainText(media)}
-      <slot name="media" />
-    </div>
-  {/if}
-  {#if text || hasTextSlots || hasDefaultSlots}
-    <div class="chip-label">
-      {plainText(text)}
-      <slot name="text" />
-      <slot />
+      {#if media}
+        {#if typeof media === 'function'}
+          {@render media?.()}
+        {:else}
+          {media}
+        {/if}
+      {/if}
     </div>
   {/if}
-  {#if deleteable}<a class="chip-delete" on:click={onDeleteClick} />{/if}
+  <div class="chip-label">
+    {#if text}
+      {#if typeof text === 'function'}
+        {@render text?.()}
+      {:else}
+        {text}
+      {/if}
+    {/if}
+
+    {@render children?.()}
+  </div>
+  {#if deleteable}<a class="chip-delete" onclick={onDeleteClick} />{/if}
 </div>

package/components/fab-backdrop.d.ts

@@ -1,17 +1,22 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface FabBackdropProps {
-  
+interface Props {
+  children?: Snippet;
 }
 
+interface FabBackdropProps {}
+interface FabBackdropProps extends Props {}
+
+interface FabBackdropEvents extends Record<'',{}>{}
+
 
 
 declare class FabBackdrop extends SvelteComponent<
-  FabBackdropProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof FabBackdropProps>,
-  {  },
+  FabBackdropProps,
+  FabBackdropEvents,
   {  }
 > {}
 

package/components/fab-backdrop.svelte

@@ -1,13 +1,11 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  let className = undefined;
-  export { className as class };
+  let { class: className, f7Slot = 'fixed', children, ...restProps } = $props();
 
-  export let f7Slot = 'fixed';
-
-  $: classes = classNames(className, 'fab-backdrop');
+  const classes = $derived(classNames(className, 'fab-backdrop'));
 </script>
 
-<div class={classes} data-f7-slot={f7Slot} {...restProps($$restProps)} />
+<div class={classes} data-f7-slot={f7Slot} {...restProps}>
+  {@render children?.()}
+</div>

package/components/fab-button.d.ts

@@ -1,15 +1,15 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface FabButtonProps {
-  fabClose ?: boolean;
-  label ?: string;
-  target ?: string;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  onClick ?: (event?: any) => void;
+interface Props {
+  fabClose?: boolean;
+  label?: string;
+  target?: string;
+  tooltip?: string;
+  tooltipTrigger?: string;
+  onClick?: (event?: any) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -17,14 +17,20 @@ interface FabButtonProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface FabButtonProps {}
+interface FabButtonProps extends Props {}
+
+interface FabButtonEvents extends Record<'',{}>{}
+
 
 
 declare class FabButton extends SvelteComponent<
-  FabButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof FabButtonProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  FabButtonProps,
+  FabButtonEvents,
+  {  }
 > {}
 
 export { FabButtonProps };