framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/button.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
   import {
     colorClasses,
     routerAttrs,
@@ -7,8 +6,7 @@
     actionsAttrs,
     actionsClasses,
   } from '../shared/mixins.js';
-  import { classNames, extend, isStringProp, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, extend, isStringProp, plainText } from '../shared/utils.js';
   import { useTooltip } from '../shared/use-tooltip.js';
   import { useRouteProps } from '../shared/use-route-props.js';
   import { useIcon } from '../shared/use-icon.js';
@@ -16,121 +14,127 @@
   import UseIcon from './use-icon.svelte';
   import Preloader from './preloader.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    text = undefined,
+    tabLink = undefined,
+    tabLinkActive = false,
+    type = undefined,
+    href = '#',
+    target = undefined,
+    round = false,
+    roundMd = false,
+    roundIos = false,
+    fill = false,
+    fillMd = false,
+    fillIos = false,
+    tonal = false,
+    tonalMd = false,
+    tonalIos = false,
+    large = false,
+    largeMd = false,
+    largeIos = false,
+    small = false,
+    smallMd = false,
+    smallIos = false,
+    raised = false,
+    raisedMd = false,
+    raisedIos = false,
+    outline = false,
+    outlineMd = false,
+    outlineIos = false,
+    active = false,
+    disabled = false,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    routeProps = undefined,
+    preloader = false,
+    preloaderSize = undefined,
+    preloaderColor = undefined,
+    loading = false,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
 
-  export let text = undefined;
-  export let tabLink = undefined;
-  export let tabLinkActive = false;
-  export let type = undefined;
-  export let href = '#';
-  export let target = 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 tonal = false;
-  export let tonalMd = false;
-  export let tonalIos = 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;
-  export let outline = false;
-  export let outlineMd = false;
-  export let outlineIos = false;
-  export let active = false;
-  export let disabled = false;
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-  export let routeProps = undefined;
-  export let preloader = false;
-  export let preloaderSize = undefined;
-  export let preloaderColor = undefined;
-  export let loading = false;
+  const hrefComputed = $derived(href === true ? '#' : href || undefined);
 
-  let el;
-
-  $: hrefComputed = href === true ? '#' : href || undefined;
-
-  $: attrs = extend(
-    {
-      href: hrefComputed,
-      target,
-      type,
-      'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
-      ...restProps($$restProps),
-    },
-    routerAttrs($$props),
-    actionsAttrs($$props),
+  const attrs = $derived(
+    extend(
+      {
+        href: hrefComputed,
+        target,
+        type,
+        'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
+        ...restProps,
+      },
+      routerAttrs(restProps),
+      actionsAttrs(restProps),
+    ),
   );
 
-  $: classes = classNames(
-    className,
-    'button',
-    {
-      'tab-link': tabLink || tabLink === '',
-      'tab-link-active': tabLinkActive,
+  const classes = $derived(
+    classNames(
+      className,
+      'button',
+      {
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
 
-      'button-round': round,
-      'button-round-ios': roundIos,
-      'button-round-md': roundMd,
-      'button-fill': fill,
-      'button-fill-ios': fillIos,
-      'button-fill-md': fillMd,
-      'button-tonal': tonal,
-      'button-tonal-ios': tonalIos,
-      'button-tonal-md': tonalMd,
-      'button-large': large,
-      'button-large-ios': largeIos,
-      'button-large-md': largeMd,
-      'button-small': small,
-      'button-small-ios': smallIos,
-      'button-small-md': smallMd,
-      'button-raised': raised,
-      'button-raised-ios': raisedIos,
-      'button-raised-md': raisedMd,
-      'button-active': active,
-      'button-outline': outline,
-      'button-outline-ios': outlineIos,
-      'button-outline-md': outlineMd,
-      'button-preloader': preloader,
-      'button-loading': loading,
+        'button-round': round,
+        'button-round-ios': roundIos,
+        'button-round-md': roundMd,
+        'button-fill': fill,
+        'button-fill-ios': fillIos,
+        'button-fill-md': fillMd,
+        'button-tonal': tonal,
+        'button-tonal-ios': tonalIos,
+        'button-tonal-md': tonalMd,
+        'button-large': large,
+        'button-large-ios': largeIos,
+        'button-large-md': largeMd,
+        'button-small': small,
+        'button-small-ios': smallIos,
+        'button-small-md': smallMd,
+        'button-raised': raised,
+        'button-raised-ios': raisedIos,
+        'button-raised-md': raisedMd,
+        'button-active': active,
+        'button-outline': outline,
+        'button-outline-ios': outlineIos,
+        'button-outline-md': outlineMd,
+        'button-preloader': preloader,
+        'button-loading': loading,
 
-      disabled,
-    },
-    colorClasses($$props),
-    routerClasses($$props),
-    actionsClasses($$props),
+        disabled,
+      },
+      colorClasses(restProps),
+      routerClasses(restProps),
+      actionsClasses(restProps),
+    ),
   );
 
-  $: tagName = type === 'submit' || type === 'reset' || type === 'button' ? 'button' : 'a';
-
-  $: icon = useIcon($$props);
+  const tagName = $derived(
+    type === 'submit' || type === 'reset' || type === 'button' ? 'button' : 'a',
+  );
 
-  function onClick() {
-    emit('click');
+  const icon = $derived(useIcon(restProps));
+  function onClick(e) {
+    restProps.onClick?.(e);
+    restProps.onclick?.(e);
   }
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
+<!-- svelte-ignore a11y_missing_attribute -->
 {#if tagName === 'button'}
   <button
     bind:this={el}
     use:useRouteProps={routeProps}
     class={classes}
-    on:click={onClick}
     use:useTooltip={{ tooltip, tooltipTrigger }}
     {...attrs}
+    onclick={onClick}
   >
     {#if preloader}
       <Preloader size={preloaderSize} color={preloaderColor} />
@@ -141,7 +145,7 @@
         {#if typeof text !== 'undefined'}
           <span>{plainText(text)}</span>
         {/if}
-        <slot />
+        {@render children?.()}
       </span>
     {:else}
       {#if icon}
@@ -150,7 +154,7 @@
       {#if typeof text !== 'undefined'}
         <span>{plainText(text)}</span>
       {/if}
-      <slot />
+      {@render children?.()}
     {/if}
   </button>
 {:else}
@@ -158,9 +162,9 @@
     bind:this={el}
     use:useRouteProps={routeProps}
     class={classes}
-    on:click={onClick}
     use:useTooltip={{ tooltip, tooltipTrigger }}
     {...attrs}
+    onclick={onClick}
   >
     {#if preloader}
       <Preloader size={preloaderSize} color={preloaderColor} />
@@ -171,7 +175,7 @@
         {#if typeof text !== 'undefined'}
           <span>{plainText(text)}</span>
         {/if}
-        <slot />
+        {@render children?.()}
       </span>
     {:else}
       {#if icon}
@@ -180,7 +184,7 @@
       {#if typeof text !== 'undefined'}
         <span>{plainText(text)}</span>
       {/if}
-      <slot />
+      {@render children?.()}
     {/if}
   </a>
 {/if}

package/components/card-content.d.ts

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

package/components/card-content.svelte

@@ -1,23 +1,24 @@
 <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,
+    padding = true,
+    children,
+    ...restProps
+  } = $props();
 
-  export let padding = true;
-
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     'card-content',
     {
       'card-content-padding': padding,
     },
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/card-footer.d.ts

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

package/components/card-footer.svelte

@@ -1,14 +1,16 @@
 <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,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'card-footer', colorClasses($$props));
+  const classes = $derived(classNames(className, 'card-footer', colorClasses(restProps)));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/card-header.d.ts

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

package/components/card-header.svelte

@@ -1,14 +1,16 @@
 <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,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'card-header', colorClasses($$props));
+  const classes = $derived(classNames(className, 'card-header', colorClasses(restProps)));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/card.d.ts

@@ -1,36 +1,36 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface CardProps {
-  title ?: string | number;
-  content ?: string | number;
-  footer ?: string | number;
+interface Props {
+  title?: string | number;
+  content?: string | number | Snippet;
+  footer?: string | number | Snippet;
   raised?: boolean;
-  outline ?: boolean;
-  outlineIos ?: boolean;
-  outlineMd ?: boolean;
-  headerDivider ?: boolean;
-  footerDivider ?: boolean;
-  expandable ?: boolean;
-  expandableAnimateWidth ?: boolean;
-  expandableOpened ?: boolean;
-  animate ?: boolean;
-  hideNavbarOnOpen ?: boolean;
-  hideToolbarOnOpen ?: boolean;
-  hideStatusbarOnOpen ?: boolean;
-  scrollableEl ?: string;
-  swipeToClose ?: boolean;
-  closeByBackdropClick ?: boolean;
-  backdrop ?: boolean;
-  backdropEl ?: string;
-  padding ?: boolean;
-  onCardBeforeOpen ?: (el?: HTMLElement, prevent?: any) => void;
-  onCardOpen ?: (el?: HTMLElement) => void;
-  onCardOpened ?: (el?: HTMLElement, pageEl?: HTMLElement) => void;
-  onCardClose ?: (el?: HTMLElement) => void;
-  onCardClosed ?: (el?: HTMLElement, pageEl?: HTMLElement) => void;
+  outline?: boolean;
+  outlineIos?: boolean;
+  outlineMd?: boolean;
+  headerDivider?: boolean;
+  footerDivider?: boolean;
+  expandable?: boolean;
+  expandableAnimateWidth?: boolean;
+  expandableOpened?: boolean;
+  animate?: boolean;
+  hideNavbarOnOpen?: boolean;
+  hideToolbarOnOpen?: boolean;
+  hideStatusbarOnOpen?: boolean;
+  scrollableEl?: string;
+  swipeToClose?: boolean;
+  closeByBackdropClick?: boolean;
+  backdrop?: boolean;
+  backdropEl?: string;
+  padding?: boolean;
+  onCardBeforeOpen?: (el?: HTMLElement, prevent?: any) => void;
+  onCardOpen?: (el?: HTMLElement) => void;
+  onCardOpened?: (el?: HTMLElement, pageEl?: HTMLElement) => void;
+  onCardClose?: (el?: HTMLElement) => void;
+  onCardClosed?: (el?: HTMLElement, pageEl?: HTMLElement) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -38,14 +38,26 @@ interface CardProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  header?: Snippet;
+  children?: Snippet;
+  oncardbeforeopen?: () => void;
+  oncardopen?: () => void;
+  oncardopened?: () => void;
+  oncardclose?: () => void;
+  oncardclosed?: () => void;
 }
 
+interface CardProps {}
+interface CardProps extends Props {}
+
+interface CardEvents extends Record<'',{}>{}
+
 
 
 declare class Card extends SvelteComponent<
-  CardProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof CardProps>,
-  { cardBeforeOpen: CustomEvent<void>; cardOpen: CustomEvent<void>; cardOpened: CustomEvent<void>; cardClose: CustomEvent<void>; cardClosed: CustomEvent<void>; },
-  {  'header' : {};  'content' : {};  'footer' : {};  'default' : {}; }
+  CardProps,
+  CardEvents,
+  {  }
 > {}
 
 export { CardProps };