framework7-svelte 8.3.4 → 9.0.0-beta.1

package/components/block.svelte

@@ -1,87 +1,87 @@
 <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';
   import { useTab } from '../shared/use-tab.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    inset = false,
+    insetIos = false,
+    insetMd = false,
+    xsmallInset = false,
+    xsmallInsetIos = false,
+    xsmallInsetMd = false,
+    smallInset = false,
+    smallInsetIos = false,
+    smallInsetMd = false,
+    mediumInset = false,
+    mediumInsetIos = false,
+    mediumInsetMd = false,
+    largeInset = false,
+    largeInsetIos = false,
+    largeInsetMd = false,
+    xlargeInset = false,
+    xlargeInsetIos = false,
+    xlargeInsetMd = false,
+    strong = false,
+    strongIos = false,
+    strongMd = false,
+    tabs = false,
+    tab = false,
+    tabActive = false,
+    accordionList = false,
+    accordionOpposite = false,
+    outline = false,
+    outlineMd = false,
+    outlineIos = false,
+    children,
+    ...restProps
+  } = $props();
 
-  export let inset = false;
-  export let insetIos = false;
-  export let insetMd = false;
-  export let xsmallInset = false;
-  export let xsmallInsetIos = false;
-  export let xsmallInsetMd = false;
-  export let smallInset = false;
-  export let smallInsetIos = false;
-  export let smallInsetMd = false;
-  export let mediumInset = false;
-  export let mediumInsetIos = false;
-  export let mediumInsetMd = false;
-  export let largeInset = false;
-  export let largeInsetIos = false;
-  export let largeInsetMd = false;
-  export let xlargeInset = false;
-  export let xlargeInsetIos = false;
-  export let xlargeInsetMd = false;
-  export let strong = false;
-  export let strongIos = false;
-  export let strongMd = false;
-  export let tabs = false;
-  export let tab = false;
-  export let tabActive = false;
-  export let accordionList = false;
-  export let accordionOpposite = false;
-  export let outline = false;
-  export let outlineMd = false;
-  export let outlineIos = false;
+  let el = $state(null);
 
-  let className = undefined;
-  export { className as class };
-
-  let el;
-
-  $: classes = classNames(
-    className,
-    'block',
-    {
-      inset,
-      'inset-ios': insetIos,
-      'inset-md': insetMd,
-      'xsmall-inset': xsmallInset,
-      'xsmall-inset-ios': xsmallInsetIos,
-      'xsmall-inset-md': xsmallInsetMd,
-      'small-inset': smallInset,
-      'small-inset-ios': smallInsetIos,
-      'small-inset-md': smallInsetMd,
-      'medium-inset': mediumInset,
-      'medium-inset-ios': mediumInsetIos,
-      'medium-inset-md': mediumInsetMd,
-      'large-inset': largeInset,
-      'large-inset-ios': largeInsetIos,
-      'large-inset-md': largeInsetMd,
-      'xlarge-inset': xlargeInset,
-      'xlarge-inset-ios': xlargeInsetIos,
-      'xlarge-inset-md': xlargeInsetMd,
-      'block-strong': strong,
-      'block-strong-ios': strongIos,
-      'block-strong-md': strongMd,
-      'accordion-list': accordionList,
-      'accordion-opposite': accordionOpposite,
-      tabs,
-      tab,
-      'tab-active': tabActive,
-      'block-outline': outline,
-      'block-outline-md': outlineMd,
-      'block-outline-ios': outlineIos,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'block',
+      {
+        inset,
+        'inset-ios': insetIos,
+        'inset-md': insetMd,
+        'xsmall-inset': xsmallInset,
+        'xsmall-inset-ios': xsmallInsetIos,
+        'xsmall-inset-md': xsmallInsetMd,
+        'small-inset': smallInset,
+        'small-inset-ios': smallInsetIos,
+        'small-inset-md': smallInsetMd,
+        'medium-inset': mediumInset,
+        'medium-inset-ios': mediumInsetIos,
+        'medium-inset-md': mediumInsetMd,
+        'large-inset': largeInset,
+        'large-inset-ios': largeInsetIos,
+        'large-inset-md': largeInsetMd,
+        'xlarge-inset': xlargeInset,
+        'xlarge-inset-ios': xlargeInsetIos,
+        'xlarge-inset-md': xlargeInsetMd,
+        'block-strong': strong,
+        'block-strong-ios': strongIos,
+        'block-strong-md': strongMd,
+        'accordion-list': accordionList,
+        'accordion-opposite': accordionOpposite,
+        tabs,
+        tab,
+        'tab-active': tabActive,
+        'block-outline': outline,
+        'block-outline-md': outlineMd,
+        'block-outline-ios': outlineIos,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  useTab(() => el, emit);
+  useTab(() => el, restProps);
 </script>
 
-<div class={classes} bind:this={el} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} bind:this={el} {...restProps}>
+  {@render children?.()}
 </div>

package/components/breadcrumbs-collapsed.d.ts

@@ -1,18 +1,24 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface BreadcrumbsCollapsedProps {
-  onClick ?: (event?: any) => void;
+interface Props {
+  onClick?: (event?: any) => void;
+  children?: Snippet;
 }
 
+interface BreadcrumbsCollapsedProps {}
+interface BreadcrumbsCollapsedProps extends Props {}
+
+interface BreadcrumbsCollapsedEvents extends Record<'',{}>{}
+
 
 
 declare class BreadcrumbsCollapsed extends SvelteComponent<
-  BreadcrumbsCollapsedProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof BreadcrumbsCollapsedProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  BreadcrumbsCollapsedProps,
+  BreadcrumbsCollapsedEvents,
+  {  }
 > {}
 
 export { BreadcrumbsCollapsedProps };

package/components/breadcrumbs-collapsed.svelte

@@ -1,21 +1,16 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
-  import { classNames, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames } from '../shared/utils.js';
 
-  let className = undefined;
-  export { className as class };
+  let {
+    class: className,
+    children,
+    ...restProps
+  } = $props();
 
-  $: classes = classNames(className, 'breadcrumbs-collapsed');
-
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  function onClick() {
-    emit('click');
-  }
+  const classes = $derived(classNames(className, 'breadcrumbs-collapsed'));
 </script>
 
-<div class={classes} {...restProps($$restProps)} on:click={onClick}>
-  <span />
-  <slot />
+<div class={classes} {...restProps}>
+  <span></span>
+  {@render children?.()}
 </div>

package/components/breadcrumbs-item.d.ts

@@ -1,19 +1,25 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface BreadcrumbsItemProps {
-  onClick ?: (event?: any) => void;
+interface Props {
+  onClick?: (event?: any) => void;
   active?: boolean;
+  children?: Snippet;
 }
 
+interface BreadcrumbsItemProps {}
+interface BreadcrumbsItemProps extends Props {}
+
+interface BreadcrumbsItemEvents extends Record<'',{}>{}
+
 
 
 declare class BreadcrumbsItem extends SvelteComponent<
-  BreadcrumbsItemProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof BreadcrumbsItemProps>,
-  {  },
-  {  'default' : {}; }
+  BreadcrumbsItemProps,
+  BreadcrumbsItemEvents,
+  {  }
 > {}
 
 export { BreadcrumbsItemProps };

package/components/breadcrumbs-item.svelte

@@ -1,15 +1,16 @@
 <script>
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
 
-  export let active = false;
+  let {
+    class: className,
+    active = false,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
-
-  $: classes = classNames(className, 'breadcrumbs-item', active && 'breadcrumbs-item-active');
+  const classes = $derived(classNames(className, 'breadcrumbs-item', active && 'breadcrumbs-item-active'));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/breadcrumbs-separator.d.ts

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

package/components/breadcrumbs-separator.svelte

@@ -1,11 +1,15 @@
 <script>
   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, 'breadcrumbs-separator');
+  const classes = $derived(classNames(className, 'breadcrumbs-separator'));
 </script>
 
-<div class={classes} {...restProps($$restProps)} />
+<div class={classes} {...restProps}>
+  {@render children?.()}
+</div>

package/components/breadcrumbs.d.ts

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

package/components/breadcrumbs.svelte

@@ -1,13 +1,15 @@
 <script>
   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, 'breadcrumbs');
+  const classes = $derived(classNames(className, 'breadcrumbs'));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

package/components/button.d.ts

@@ -1,45 +1,45 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ButtonProps {
-  text ?: string;
-  tabLink ?: boolean | string;
-  tabLinkActive ?: boolean;
-  type ?: string;
-  href ?: string | boolean;
-  target ?: string;
-  round ?: boolean;
-  roundMd ?: boolean;
-  roundIos ?: boolean;
-  fill ?: boolean;
-  fillMd ?: boolean;
-  fillIos ?: boolean;
-  tonal ?: boolean;
-  tonalMd ?: boolean;
-  tonalIos ?: boolean;
-  large ?: boolean;
-  largeMd ?: boolean;
-  largeIos ?: boolean;
-  small ?: boolean;
-  smallMd ?: boolean;
-  smallIos ?: boolean;
-  raised ?: boolean;
-  raisedMd ?: boolean;
-  raisedIos ?: boolean;
-  outline ?: boolean;
-  outlineMd ?: boolean;
-  outlineIos ?: boolean;
-  active ?: boolean;
-  disabled ?: boolean;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
+interface Props {
+  text?: string;
+  tabLink?: boolean | string;
+  tabLinkActive?: boolean;
+  type?: string;
+  href?: string | boolean;
+  target?: string;
+  round?: boolean;
+  roundMd?: boolean;
+  roundIos?: boolean;
+  fill?: boolean;
+  fillMd?: boolean;
+  fillIos?: boolean;
+  tonal?: boolean;
+  tonalMd?: boolean;
+  tonalIos?: boolean;
+  large?: boolean;
+  largeMd?: boolean;
+  largeIos?: boolean;
+  small?: boolean;
+  smallMd?: boolean;
+  smallIos?: boolean;
+  raised?: boolean;
+  raisedMd?: boolean;
+  raisedIos?: boolean;
+  outline?: boolean;
+  outlineMd?: boolean;
+  outlineIos?: boolean;
+  active?: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+  tooltipTrigger?: string;
   preloader?: boolean;
   preloaderSize?: number | string;
   preloaderColor?: string;
   loading?: boolean;
-  onClick ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -93,14 +93,21 @@ interface ButtonProps {
   cardPreventOpen?: boolean | string;
   cardClose?: boolean | string;
   menuClose?: boolean | string;
+  children?: Snippet;
+  onclick?: () => void;
 }
 
+interface ButtonProps {}
+interface ButtonProps extends Props {}
+
+interface ButtonEvents extends Record<'',{}>{}
+
 
 
 declare class Button extends SvelteComponent<
-  ButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ButtonProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  ButtonProps,
+  ButtonEvents,
+  {  }
 > {}
 
 export { ButtonProps };