framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/fab-button.svelte

@@ -1,47 +1,38 @@
 <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, plainText } from '../shared/utils.js';
   import { useTooltip } from '../shared/use-tooltip.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    fabClose = false,
+    label = undefined,
+    target = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
 
-  export let fabClose = false;
-  export let label = undefined;
-  export let target = undefined;
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-
-  let el;
-
-  $: classes = classNames(
-    className,
-    {
-      'fab-close': fabClose,
-      'fab-label-button': label,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      { 'fab-close': fabClose, 'fab-label-button': label },
+      colorClasses(restProps),
+    ),
   );
-
-  function onClick() {
-    emit('click');
-  }
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
 <a
   bind:this={el}
   {target}
   class={classes}
-  on:click={onClick}
-  {...restProps($$restProps)}
+  {...restProps}
   use:useTooltip={{ tooltip, tooltipTrigger }}
 >
-  <slot />
+  {@render children?.()}
   {#if typeof label !== 'undefined'}
     <span class="fab-label">{plainText(label)}</span>
   {/if}

package/components/fab-buttons.d.ts

@@ -1,9 +1,9 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface FabButtonsProps {
+interface Props {
   position?: string;
   color?: string;
   colorTheme?: string;
@@ -12,14 +12,20 @@ interface FabButtonsProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface FabButtonsProps {}
+interface FabButtonsProps extends Props {}
+
+interface FabButtonsEvents extends Record<'',{}>{}
+
 
 
 declare class FabButtons extends SvelteComponent<
-  FabButtonsProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof FabButtonsProps>,
-  {  },
-  {  'default' : {}; }
+  FabButtonsProps,
+  FabButtonsEvents,
+  {  }
 > {}
 
 export { FabButtonsProps };

package/components/fab-buttons.svelte

@@ -1,21 +1,14 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  let className = undefined;
-  export { className as class };
+  let { class: className, position = 'top', children, ...restProps } = $props();
 
-  export let position = 'top';
-
-  $: classes = classNames(
-    className,
-    'fab-buttons',
-    `fab-buttons-${position}`,
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(className, 'fab-buttons', `fab-buttons-${position}`, colorClasses(restProps)),
   );
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/fab.d.ts

@@ -1,17 +1,17 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface FabProps {
-  morphTo ?: string;
-  href ?: boolean | string;
-  target ?: string;
-  text ?: string;
-  position ?: string;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  onClick ?: (event?: any) => void;
+interface Props {
+  morphTo?: string;
+  href?: boolean | string;
+  target?: string;
+  text?: string | Snippet;
+  position?: string;
+  tooltip?: string;
+  tooltipTrigger?: string;
+  onClick?: (event?: any) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -19,14 +19,23 @@ interface FabProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
+  link?: Snippet;
+  root?: Snippet;
+  onclick?: () => void;
 }
 
+interface FabProps {}
+interface FabProps extends Props {}
+
+interface FabEvents extends Record<'',{}>{}
+
 
 
 declare class Fab extends SvelteComponent<
-  FabProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof FabProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {};  'text' : {};  'link' : {};  'root' : {}; }
+  FabProps,
+  FabEvents,
+  {  }
 > {}
 
 export { FabProps };

package/components/fab.svelte

@@ -1,49 +1,45 @@
 <script>
-  import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
+  import { onMount } 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 { app, f7ready } from '../shared/f7.js';
   import { useTooltip } from '../shared/use-tooltip.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    morphTo = undefined,
+    href = undefined,
+    target = undefined,
+    text = undefined,
+    link = undefined,
+    root = undefined,
+    position = 'right-bottom',
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    f7Slot = 'fixed',
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
+  let linkEl = $state(null);
+  let textEl = $state(null);
 
-  export let morphTo = undefined;
-  export let href = undefined;
-  export let target = undefined;
-  export let text = undefined;
-  export let position = 'right-bottom';
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-  export let f7Slot = 'fixed';
+  const hrefComputed = $derived(href === true ? '#' : href || undefined);
 
-  let el;
-  let linkEl;
-  let textEl;
-
-  $: hrefComputed = href === true ? '#' : href || undefined;
-
-  // eslint-disable-next-line
-  $: hasTextSlots = $$slots.text;
-
-  $: classes = classNames(
-    className,
-    'fab',
-    `fab-${position}`,
-    {
-      'fab-morph': morphTo,
-      'fab-extended': text || hasTextSlots || typeof textEl !== 'undefined',
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'fab',
+      `fab-${position}`,
+      {
+        'fab-morph': morphTo,
+        'fab-extended': text || textEl !== null,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  function onClick() {
-    emit('click');
-  }
-
   onMount(() => {
     f7ready(() => {
       const dom7 = app.f7.$;
@@ -53,7 +49,7 @@
       }
     });
   });
-  afterUpdate(() => {
+  $effect(() => {
     if (!app.f7) return;
     const dom7 = app.f7.$;
     const rootEls = dom7(linkEl).children('.fab-buttons');
@@ -63,28 +59,36 @@
   });
 </script>
 
-<div
-  class={classes}
-  data-morph-to={morphTo}
-  bind:this={el}
-  data-f7-slot={f7Slot}
-  {...restProps($$restProps)}
->
+<div class={classes} data-morph-to={morphTo} bind:this={el} data-f7-slot={f7Slot} {...restProps}>
   <a
     bind:this={linkEl}
-    on:click={onClick}
+    onclick={(e) => {
+      restProps.onclick?.(e);
+      restProps.onclick?.(e);
+    }}
     {target}
     href={hrefComputed}
     use:useTooltip={{ tooltip, tooltipTrigger }}
   >
-    <slot />
-    {#if typeof text !== 'undefined' || hasTextSlots}
+    {@render children?.()}
+    {#if typeof text !== 'undefined'}
       <div class="fab-text" bind:this={textEl}>
-        {plainText(text)}
-        <slot name="text" />
+        {#if typeof text === 'function'}
+          {@render text?.()}
+        {:else if typeof text !== 'undefined'}
+          {text}
+        {/if}
       </div>
     {/if}
-    <slot name="link" />
+    {#if typeof link === 'function'}
+      {@render link?.()}
+    {:else if typeof link !== 'undefined'}
+      {link}
+    {/if}
   </a>
-  <slot name="root" />
+  {#if typeof root === 'function'}
+    {@render root?.()}
+  {:else if typeof root !== 'undefined'}
+    {root}
+  {/if}
 </div>

package/components/gauge.d.ts

@@ -1,31 +1,36 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface GaugeProps {
-  type ?: string;
-  value ?: number | string;
-  size ?: number | string;
-  bgColor ?: string;
-  borderBgColor ?: string;
-  borderColor ?: string;
-  borderWidth ?: number | string;
-  valueText ?: number | string;
-  valueTextColor ?: string;
-  valueFontSize ?: number | string;
-  valueFontWeight ?: number | string;
-  labelText ?: string;
-  labelTextColor ?: string;
-  labelFontSize ?: number | string;
-  labelFontWeight ?: number | string;
+interface Props {
+  type?: string;
+  value?: number | string;
+  size?: number | string;
+  bgColor?: string;
+  borderBgColor?: string;
+  borderColor?: string;
+  borderWidth?: number | string;
+  valueText?: number | string;
+  valueTextColor?: string;
+  valueFontSize?: number | string;
+  valueFontWeight?: number | string;
+  labelText?: string;
+  labelTextColor?: string;
+  labelFontSize?: number | string;
+  labelFontWeight?: number | string;
 }
 
+interface GaugeProps {}
+interface GaugeProps extends Props {}
+
+interface GaugeEvents extends Record<'',{}>{}
+
 
 
 declare class Gauge extends SvelteComponent<
-  GaugeProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof GaugeProps>,
-  {  },
+  GaugeProps,
+  GaugeEvents,
   {  }
 > {}
 

package/components/gauge.svelte

@@ -1,35 +1,35 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    type = 'circle',
+    value = 0,
+    size = 200,
+    bgColor = 'transparent',
+    borderBgColor = '#eeeeee',
+    borderColor = '#000000',
+    borderWidth = 10,
+    valueText = undefined,
+    valueTextColor = '#000000',
+    valueFontSize = 31,
+    valueFontWeight = 500,
+    labelText = undefined,
+    labelTextColor = '#888888',
+    labelFontSize = 14,
+    labelFontWeight = 400,
+    ...restProps
+  } = $props();
 
-  export let type = 'circle';
-  export let value = 0;
-  export let size = 200;
-  export let bgColor = 'transparent';
-  export let borderBgColor = '#eeeeee';
-  export let borderColor = '#000000';
-  export let borderWidth = 10;
-  export let valueText = undefined;
-  export let valueTextColor = '#000000';
-  export let valueFontSize = 31;
-  export let valueFontWeight = 500;
-  export let labelText = undefined;
-  export let labelTextColor = '#888888';
-  export let labelFontSize = 14;
-  export let labelFontWeight = 400;
+  const classes = $derived(classNames(className, 'gauge'));
 
-  $: classes = classNames(className, 'gauge');
-
-  $: semiCircle = type === 'semicircle';
-  $: radius = size / 2 - borderWidth / 2;
-  $: length = 2 * Math.PI * radius;
-  $: progress = Math.max(Math.min(value, 1), 0);
+  const semiCircle = $derived(type === 'semicircle');
+  const radius = $derived(size / 2 - borderWidth / 2);
+  const length = $derived(2 * Math.PI * radius);
+  const progress = $derived(Math.max(Math.min(value, 1), 0));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
+<div class={classes} {...restProps}>
   <svg
     class="gauge-svg"
     width={`${size}px`}

package/components/icon.d.ts

@@ -1,17 +1,17 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface IconProps {
-  material ?: string;
-  f7 ?: string;
-  icon ?: string;
-  ios ?: string;
-  md ?: string;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  size ?: string | number;
+interface Props {
+  material?: string;
+  f7?: string;
+  icon?: string;
+  ios?: string;
+  md?: string;
+  tooltip?: string;
+  tooltipTrigger?: string;
+  size?: string | number;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -19,14 +19,20 @@ interface IconProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface IconProps {}
+interface IconProps extends Props {}
+
+interface IconEvents extends Record<'',{}>{}
+
 
 
 declare class Icon extends SvelteComponent<
-  IconProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof IconProps>,
-  {  },
-  {  'default' : {}; }
+  IconProps,
+  IconEvents,
+  {  }
 > {}
 
 export { IconProps };

package/components/icon.svelte

@@ -1,73 +1,72 @@
 <script>
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
   import { useTooltip } from '../shared/use-tooltip.js';
   import { useTheme } from '../shared/use-theme.js';
+  let {
+    class: className,
+    style = undefined,
+    material = undefined,
+    f7 = undefined,
+    icon = undefined,
+    ios = undefined,
+    md = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    size = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  export let style = undefined;
-
-  let className = undefined;
-  export { className as class };
-
-  export let material = undefined;
-  export let f7 = undefined;
-  export let icon = undefined;
-  export let ios = undefined;
-  export let md = undefined;
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-  export let size = undefined;
-
-  let el;
+  let el = $state(null);
   let theme = useTheme((t) => {
     theme = t;
   });
 
-  let classes = {
-    icon: true,
-  };
-
-  let themeIcon;
-
-  $: if (theme) {
-    if (theme.ios) themeIcon = ios;
-    if (theme.md) themeIcon = md;
-  }
+  let themeIcon = $derived.by(() => {
+    if (theme) {
+      if (theme.ios) return ios;
+      if (theme.md) return md;
+    }
+  });
 
-  $: if (themeIcon) {
-    classes = {
-      icon: true,
-    };
-    const parts = themeIcon.split(':');
-    const prop = parts[0];
-    const value = parts[1];
-    if (prop === 'material' || prop === 'f7') {
-      classes['material-icons'] = prop === 'material';
-      classes['f7-icons'] = prop === 'f7';
-      if (prop === 'icon') {
-        classes[value] = true;
+  const classes = $derived.by(() => {
+    let res;
+    if (themeIcon) {
+      res = {
+        icon: true,
+      };
+      const parts = themeIcon.split(':');
+      const prop = parts[0];
+      const value = parts[1];
+      if (prop === 'material' || prop === 'f7') {
+        res['material-icons'] = prop === 'material';
+        res['f7-icons'] = prop === 'f7';
+        if (prop === 'icon') {
+          res[value] = true;
+        }
+      } else {
+        if (themeIcon.includes(':')) {
+          themeIcon = themeIcon
+            .split(' ')
+            .map((el) => el.replace('icon:', ''))
+            .join(' ');
+        }
+        res[themeIcon] = true;
       }
+      if (icon) res[icon] = true;
     } else {
-      if (themeIcon.includes(':')) {
-        themeIcon = themeIcon
-          .split(' ')
-          .map((el) => el.replace('icon:', ''))
-          .join(' ');
-      }
-      classes[themeIcon] = true;
+      res = {
+        icon: true,
+        'material-icons': material,
+        'f7-icons': f7,
+      };
+      if (icon) res[icon] = true;
     }
-    if (icon) classes[icon] = true;
-  } else {
-    classes = {
-      icon: true,
-      'material-icons': material,
-      'f7-icons': f7,
-    };
-    if (icon) classes[icon] = true;
-  }
+    return res;
+  });
 
-  $: iconClasses = classNames(className, classes, colorClasses($$props));
+  const iconClasses = $derived(classNames(className, classes, colorClasses(restProps)));
 
   function iconTextComputed(t) {
     let textComputed = material || f7;
@@ -78,24 +77,27 @@
     }
     return textComputed;
   }
-  $: iconText = iconTextComputed(theme);
+  const iconText = $derived(iconTextComputed(theme));
 
-  $: iconSize = typeof size === 'number' || parseFloat(size) === size * 1 ? `${size}px` : size;
+  const iconSize = $derived(
+    typeof size === 'number' || parseFloat(size) === size * 1 ? `${size}px` : size,
+  );
 
-  $: iconStyle =
+  const iconStyle = $derived(
     (style || '') +
-    (iconSize
-      ? `;font-size: ${iconSize}; width: ${iconSize}; height: ${iconSize}`.replace(';;', '')
-      : '');
+      (iconSize
+        ? `;font-size: ${iconSize}; width: ${iconSize}; height: ${iconSize}`.replace(';;', '')
+        : ''),
+  );
 </script>
 
 <i
   style={iconStyle}
   class={iconClasses}
   bind:this={el}
-  {...restProps($$restProps)}
+  {...restProps}
   use:useTooltip={{ tooltip, tooltipTrigger }}
 >
   {iconText || ''}
-  <slot />
+  {@render children?.()}
 </i>