framework7-svelte 8.3.4 → 9.0.0

package/components/link.d.ts

@@ -1,26 +1,26 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 import { SmartSelect } from 'framework7/types';
 
 
-interface LinkProps {
-  noLinkClass ?: boolean;
-  text ?: string;
-  tabLink ?: boolean | string;
-  tabLinkActive ?: boolean;
-  tabbarLabel ?: boolean;
-  iconOnly ?: boolean;
-  badge ?: string | number;
-  badgeColor ?: string;
-  iconBadge ?: string | number;
-  href ?: string | boolean;
-  target ?: string;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
-  smartSelect ?: boolean;
-  smartSelectParams ?: SmartSelect.Parameters;
+interface Props {
+  noLinkClass?: boolean;
+  text?: string | Snippet;
+  tabLink?: boolean | string;
+  tabLinkActive?: boolean;
+  tabbarLabel?: boolean;
+  iconOnly?: boolean;
+  badge?: string | number;
+  badgeColor?: string;
+  iconBadge?: string | number;
+  href?: string | boolean;
+  target?: string;
+  tooltip?: string;
+  tooltipTrigger?: string;
+  smartSelect?: boolean;
+  smartSelectParams?: SmartSelect.Parameters;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -74,15 +74,22 @@ interface LinkProps {
   preventRouter?: boolean;
   transition?: string;
   openIn?: string;
-  onClick ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
+  children?: Snippet;
+  onclick?: () => void;
 }
 
+interface LinkProps {}
+interface LinkProps extends Props {}
+
+interface LinkEvents extends Record<'',{}>{}
+
 
 
 declare class Link extends SvelteComponent<
-  LinkProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof LinkProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  LinkProps,
+  LinkEvents,
+  {  }
 > {}
 
 export { LinkProps };

package/components/link.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
+  import { getContext } from 'svelte';
   import {
     colorClasses,
     routerAttrs,
@@ -7,90 +7,88 @@
     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 } from '../shared/utils.js';
   import { useTooltip } from '../shared/use-tooltip.js';
   import { useSmartSelect } from '../shared/use-smart-select.js';
   import { useRouteProps } from '../shared/use-route-props.js';
   import { useIcon } from '../shared/use-icon.js';
-  import { getReactiveContext } from '../shared/get-reactive-context.js';
 
   import UseIcon from './use-icon.svelte';
   import Badge from './badge.svelte';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
-
-  let className = undefined;
-  export { className as class };
-
-  export let noLinkClass = false;
-  export let text = undefined;
-  export let tabLink = undefined;
-  export let tabLinkActive = false;
-  export let tabbarLabel = false;
-  export let iconOnly = false;
-  export let badge = undefined;
-  export let badgeColor = undefined;
-  export let href = '#';
-  export let target = undefined;
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-  export let routeProps = undefined;
-
-  // Smart Select
-  export let smartSelect = false;
-  export let smartSelectParams = undefined;
-
-  let el;
+  let {
+    class: className,
+    noLinkClass = false,
+    text = undefined,
+    tabLink = undefined,
+    tabLinkActive = false,
+    tabbarLabel = false,
+    iconOnly = false,
+    badge = undefined,
+    badgeColor = undefined,
+    href = '#',
+    target = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    routeProps = undefined,
+    smartSelect = false,
+    smartSelectParams = undefined,
+    children,
+    ...restProps
+  } = $props();
+
+  let el = $state(undefined);
   let f7SmartSelect;
 
   export function smartSelectInstance() {
     return f7SmartSelect;
   }
 
-  let TabbarContext =
-    getReactiveContext('TabbarContext', (newValue) => {
-      TabbarContext = newValue;
-    }) || {};
+  const TabbarContext = getContext('TabbarContext') || (() => ({ value: {} }));
 
-  $: isTabbarIcons = tabbarLabel || TabbarContext.tabbarHasIcons;
+  const isTabbarIcons = $derived(tabbarLabel || TabbarContext().value.tabbarHasIcons);
 
-  $: hrefComputed = href === true ? '#' : href || undefined;
+  const hrefComputed = $derived(href === true ? '#' : href || undefined);
 
-  $: attrs = extend(
-    {
-      href: hrefComputed,
-      target,
-      'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
-      ...restProps($$restProps),
-    },
-    routerAttrs($$props),
-    actionsAttrs($$props),
+  const attrs = $derived(
+    extend(
+      {
+        href: hrefComputed,
+        target,
+        'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
+        ...restProps,
+      },
+      routerAttrs(restProps),
+      actionsAttrs(restProps),
+    ),
   );
 
   // eslint-disable-next-line
-  $: hasDefaultSlots = $$slots.default;
-
-  $: iconOnlyComputed = iconOnly || (!text && !hasDefaultSlots);
-
-  $: classes = classNames(
-    className,
-    {
-      link: !(noLinkClass || isTabbarIcons),
-      'icon-only': iconOnlyComputed,
-      'tab-link': tabLink || tabLink === '',
-      'tab-link-active': tabLinkActive,
-      'smart-select': smartSelect,
-    },
-    colorClasses($$props),
-    routerClasses($$props),
-    actionsClasses($$props),
+  const hasDefaultSlots = $derived(children);
+
+  const iconOnlyComputed = $derived(iconOnly || (!text && !hasDefaultSlots));
+
+  const classes = $derived(
+    classNames(
+      className,
+      {
+        link: !(noLinkClass || isTabbarIcons),
+        'icon-only': iconOnlyComputed,
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
+        'smart-select': smartSelect,
+      },
+      colorClasses(restProps),
+      routerClasses(restProps),
+      actionsClasses(restProps),
+    ),
   );
 
-  $: icon = useIcon($$props);
+  const icon = $derived(useIcon(restProps));
 
   function onClick() {
-    emit('click');
+    restProps.onClick?.();
+    restProps.onclick?.();
   }
 
   useSmartSelect(
@@ -106,7 +104,7 @@
 <a
   bind:this={el}
   class={classes}
-  on:click={onClick}
+  onclick={onClick}
   {...attrs}
   use:useTooltip={{ tooltip, tooltipTrigger }}
   use:useRouteProps={routeProps}
@@ -114,11 +112,15 @@
   {#if icon}
     <UseIcon {icon} />
   {/if}
-  <slot />
+  {@render children?.()}
   {#if typeof text !== 'undefined' || typeof badge !== 'undefined'}
     <span class:tabbar-label={isTabbarIcons}>
-      {plainText(text)}
-      {#if typeof badge !== 'undefined'}<Badge color={badgeColor}>{plainText(badge)}</Badge>{/if}
+      {#if typeof text === 'function'}
+        {@render text?.()}
+      {:else if typeof text !== 'undefined'}
+        {text}
+      {/if}
+      {#if typeof badge !== 'undefined'}<Badge color={badgeColor}>{badge}</Badge>{/if}
     </span>
   {/if}
 </a>

package/components/list-button.d.ts

@@ -1,18 +1,18 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ListButtonProps {
-  title ?: string | number;
-  text ?: string | number;
-  tabLink ?: boolean | string;
-  tabLinkActive ?: boolean;
-  link ?: boolean | string;
-  href ?: boolean | string;
-  target ?: string;
-  tooltip ?: string;
-  tooltipTrigger ?: string;
+interface Props {
+  title?: string | number | Snippet;
+  text?: string | number | Snippet;
+  tabLink?: boolean | string;
+  tabLinkActive?: boolean;
+  link?: boolean | string;
+  href?: boolean | string;
+  target?: string;
+  tooltip?: string;
+  tooltipTrigger?: string;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -59,15 +59,22 @@ interface ListButtonProps {
   cardPreventOpen?: boolean | string;
   cardClose?: boolean | string;
   menuClose?: boolean | string;
-  onClick ?: (event?: any) => void;
+  onClick?: (event?: any) => void;
+  children?: Snippet;
+  onclick?: () => void;
 }
 
+interface ListButtonProps {}
+interface ListButtonProps extends Props {}
+
+interface ListButtonEvents extends Record<'',{}>{}
+
 
 
 declare class ListButton extends SvelteComponent<
-  ListButtonProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ListButtonProps>,
-  { click: CustomEvent<void>; },
-  {  'default' : {}; }
+  ListButtonProps,
+  ListButtonEvents,
+  {  }
 > {}
 
 export { ListButtonProps };

package/components/list-button.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
   import {
     colorClasses,
     routerAttrs,
@@ -7,68 +6,81 @@
     actionsAttrs,
     actionsClasses,
   } from '../shared/mixins.js';
-  import { classNames, extend, plainText, isStringProp, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, extend, isStringProp } from '../shared/utils.js';
   import { useTooltip } from '../shared/use-tooltip.js';
   import { useRouteProps } from '../shared/use-route-props.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
+  let {
+    class: className,
+    title = undefined,
+    text = undefined,
+    tabLink = undefined,
+    tabLinkActive = false,
+    link = undefined,
+    href = undefined,
+    target = undefined,
+    tooltip = undefined,
+    tooltipTrigger = undefined,
+    routeProps = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  let el = $state(null);
 
-  export let title = undefined;
-  export let text = undefined;
-  export let tabLink = undefined;
-  export let tabLinkActive = false;
-  export let link = undefined;
-  export let href = undefined;
-  export let target = undefined;
-  export let tooltip = undefined;
-  export let tooltipTrigger = undefined;
-  export let routeProps = undefined;
-
-  let el;
-
-  $: hrefComputed = typeof link === 'boolean' && typeof href === 'boolean' ? '#' : link || href;
+  const hrefComputed = $derived(
+    typeof link === 'boolean' && typeof href === 'boolean' ? '#' : link || href,
+  );
 
-  $: attrs = extend(
-    {
-      href: hrefComputed,
-      target,
-      'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
-    },
-    routerAttrs($$props),
-    actionsAttrs($$props),
+  const attrs = $derived(
+    extend(
+      {
+        href: hrefComputed,
+        target,
+        'data-tab': (isStringProp(tabLink) && tabLink) || undefined,
+      },
+      routerAttrs(restProps),
+      actionsAttrs(restProps),
+    ),
   );
 
-  $: classes = classNames(
-    {
-      'list-button': true,
-      'tab-link': tabLink || tabLink === '',
-      'tab-link-active': tabLinkActive,
-    },
-    colorClasses($$props),
-    routerClasses($$props),
-    actionsClasses($$props),
+  const classes = $derived(
+    classNames(
+      {
+        'list-button': true,
+        'tab-link': tabLink || tabLink === '',
+        'tab-link-active': tabLinkActive,
+      },
+      colorClasses(restProps),
+      routerClasses(restProps),
+      actionsClasses(restProps),
+    ),
   );
 
   function onClick() {
-    emit('click');
+    restProps.onClick?.();
+    restProps.onclick?.();
   }
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
 <li
   class={className}
-  {...restProps($$restProps)}
+  {...restProps}
   bind:this={el}
   use:useRouteProps={routeProps}
   use:useTooltip={{ tooltip, tooltipTrigger }}
 >
-  <a class={classes} {...attrs} on:click={onClick}>
-    {plainText(title)}
-    {plainText(text)}
-    <slot />
+  <a class={classes} {...attrs} onclick={onClick}>
+    {#if typeof title === 'function'}
+      {@render title?.()}
+    {:else if typeof title !== 'undefined'}
+      {title}
+    {/if}
+    {#if typeof text === 'function'}
+      {@render text?.()}
+    {:else if typeof text !== 'undefined'}
+      {text}
+    {/if}
+    {@render children?.()}
   </a>
 </li>

package/components/list-group.d.ts

@@ -1,14 +1,14 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ListGroupProps {
-  mediaList ?: boolean;
-  sortable ?: boolean;
-  sortableOpposite ?: boolean;
-  sortableTapHold ?: boolean;
-  sortableMoveElements ?: boolean;
+interface Props {
+  mediaList?: boolean;
+  sortable?: boolean;
+  sortableOpposite?: boolean;
+  sortableTapHold?: boolean;
+  sortableMoveElements?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -16,14 +16,20 @@ interface ListGroupProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
+  children?: Snippet;
 }
 
+interface ListGroupProps {}
+interface ListGroupProps extends Props {}
+
+interface ListGroupEvents extends Record<'',{}>{}
+
 
 
 declare class ListGroup extends SvelteComponent<
-  ListGroupProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ListGroupProps>,
-  {  },
-  {  'default' : {}; }
+  ListGroupProps,
+  ListGroupEvents,
+  {  }
 > {}
 
 export { ListGroupProps };

package/components/list-group.svelte

@@ -1,42 +1,46 @@
 <script>
+  import { setContext, getContext } from 'svelte';
   import { colorClasses } from '../shared/mixins.js';
   import { classNames } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
-  import { setReactiveContext } from '../shared/set-reactive-context.js';
-  import { getReactiveContext } from '../shared/get-reactive-context.js';
+  let {
+    class: className,
+    mediaList = undefined,
+    sortable = undefined,
+    sortableOpposite = undefined,
+    sortableTapHold = false,
+    sortableMoveElements = undefined,
+    simpleList = undefined,
+    children,
+    ...restProps
+  } = $props();
 
-  let className = undefined;
-  export { className as class };
+  const ListContext =
+    getContext('ListContext') ||
+    (() => ({
+      value: {},
+    }));
 
-  export let mediaList = undefined;
-  export let sortable = undefined;
-  export let sortableOpposite = undefined;
-  export let sortableTapHold = false;
-  export let sortableMoveElements = undefined;
-  export let simpleList = undefined;
-
-  let ListContext =
-    getReactiveContext('ListContext', (value) => {
-      ListContext = value || {};
-    }) || {};
-
-  setReactiveContext('ListContext', () => ({
-    listIsMedia: mediaList || ListContext.listIsMedia,
-    listIsSimple: simpleList || ListContext.listIsSimple,
-    listIsSortable: sortable || ListContext.listIsSortable,
-    listIsSortableOpposite: sortableOpposite || ListContext.listIsSortableOpposite,
+  setContext('ListContext', () => ({
+    value: {
+      listIsMedia: mediaList || ListContext().value.listIsMedia,
+      listIsSimple: simpleList || ListContext().value.listIsSimple,
+      listIsSortable: sortable || ListContext().value.listIsSortable,
+      listIsSortableOpposite: sortableOpposite || ListContext().value.listIsSortableOpposite,
+    },
   }));
 
-  $: classes = classNames(
-    className,
-    'list-group',
-    {
-      'media-list': mediaList,
-      sortable,
-      'sortable-tap-hold': sortableTapHold,
-      'sortable-opposite': sortableOpposite,
-    },
-    colorClasses($$props),
+  const classes = $derived(
+    classNames(
+      className,
+      'list-group',
+      {
+        'media-list': mediaList,
+        sortable,
+        'sortable-tap-hold': sortableTapHold,
+        'sortable-opposite': sortableOpposite,
+      },
+      colorClasses(restProps),
+    ),
   );
 </script>
 
@@ -45,9 +49,9 @@
   data-sortable-move-elements={typeof sortableMoveElements !== 'undefined'
     ? sortableMoveElements.toString()
     : undefined}
-  {...restProps($$restProps)}
+  {...restProps}
 >
   <ul>
-    <slot />
+    {@render children?.()}
   </ul>
 </div>

package/components/list-index.d.ts

@@ -1,16 +1,16 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface ListIndexProps {
-  init ?: boolean;
-  listEl ?: string | object;
-  indexes ?: string | Array<any>;
-  scrollList ?: boolean;
-  label ?: boolean;
-  iosItemHeight ?: number;
-  mdItemHeight ?: number;
+interface Props {
+  init?: boolean;
+  listEl?: string | object;
+  indexes?: string | Array<any>;
+  scrollList?: boolean;
+  label?: boolean;
+  iosItemHeight?: number;
+  mdItemHeight?: number;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -18,15 +18,22 @@ interface ListIndexProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onListIndexSelect ?: (itemContent?: any, itemIndex?: any) => void;
+  onListIndexSelect?: (itemContent?: any, itemIndex?: any) => void;
+  children?: Snippet;
+  onlistindexselect?: () => void;
 }
 
+interface ListIndexProps {}
+interface ListIndexProps extends Props {}
+
+interface ListIndexEvents extends Record<'',{}>{}
+
 
 
 declare class ListIndex extends SvelteComponent<
-  ListIndexProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ListIndexProps>,
-  { listIndexSelect: CustomEvent<void>; },
-  {  'default' : {}; }
+  ListIndexProps,
+  ListIndexEvents,
+  {  }
 > {}
 
 export { ListIndexProps };