framework7-svelte 8.3.4 → 9.0.0

package/components/treeview-item.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
   import {
     colorClasses,
     routerAttrs,
@@ -7,82 +7,98 @@
     actionsClasses,
     actionsAttrs,
   } from '../shared/mixins.js';
-  import { classNames, extend, plainText, createEmitter } from '../shared/utils.js';
-  import { restProps } from '../shared/rest-props.js';
+  import { classNames, extend } from '../shared/utils.js';
   import { app, f7ready } from '../shared/f7.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 toggle = undefined;
-  export let itemToggle = false;
-  export let selectable = false;
-  export let selected = false;
-  export let opened = false;
-  export let label = undefined;
-  export let loadChildren = false;
-  export let link = undefined;
-
-  let el;
-
-  $: classes = classNames(
-    className,
-    'treeview-item',
-    {
-      'treeview-item-opened': opened,
-      'treeview-load-children': loadChildren,
-    },
-    colorClasses($$props),
+  let {
+    class: className,
+    toggle = undefined,
+    itemToggle = false,
+    selectable = false,
+    selected = false,
+    opened = false,
+    label = undefined,
+    loadChildren = false,
+    link = undefined,
+    childrenStart,
+    children,
+    rootStart,
+    root,
+    rootEnd,
+    contentStart,
+    content,
+    contentEnd,
+    labelStart,
+    media,
+    ...restProps
+  } = $props();
+
+  let el = $state(null);
+
+  const classes = $derived(
+    classNames(
+      className,
+      'treeview-item',
+      {
+        'treeview-item-opened': opened,
+        'treeview-load-children': loadChildren,
+      },
+      colorClasses(restProps),
+    ),
   );
 
-  $: itemRootClasses = classNames(
-    'treeview-item-root',
-    {
-      'treeview-item-selectable': selectable,
-      'treeview-item-selected': selected,
-      'treeview-item-toggle': itemToggle,
-    },
-    routerClasses($$props),
-    actionsClasses($$props),
+  const itemRootClasses = $derived(
+    classNames(
+      'treeview-item-root',
+      {
+        'treeview-item-selectable': selectable,
+        'treeview-item-selected': selected,
+        'treeview-item-toggle': itemToggle,
+      },
+      routerClasses(restProps),
+      actionsClasses(restProps),
+    ),
   );
 
-  $: itemRootAttrs = extend(
-    {
-      href: link === true ? '#' : link || undefined,
-    },
-    routerAttrs($$props),
-    actionsAttrs($$props),
+  const itemRootAttrs = $derived(
+    extend(
+      {
+        href: link === true ? '#' : link || undefined,
+      },
+      routerAttrs(restProps),
+      actionsAttrs(restProps),
+    ),
   );
 
-  /* eslint-disable no-undef */
-  $: hasChildren = $$slots.default || $$slots.children || $$slots['children-start'];
-  /* eslint-enable no-undef */
+  const hasChildren = $derived(children || childrenStart);
 
-  $: needToggle = typeof toggle === 'undefined' ? hasChildren : toggle;
+  const needToggle = $derived(typeof toggle === 'undefined' ? hasChildren : toggle);
 
-  $: icon = useIcon($$props);
+  const icon = $derived(useIcon(restProps));
 
-  $: treeviewRootTag = link || link === '' ? 'a' : 'div';
+  const treeviewRootTag = $derived(link || link === '' ? 'a' : 'div');
 
   function onClick(e) {
-    emit('click', [e]);
+    restProps.onClick?.(e);
+    restProps.onclick?.(e);
   }
   function onOpen(itemEl) {
     if (itemEl !== el) return;
-    emit('treeviewOpen', [el]);
+    restProps.onTreeviewOpen?.(el);
+    restProps.ontreeviewopen?.(el);
   }
   function onClose(itemEl) {
     if (itemEl !== el) return;
-    emit('treeviewClose', [el]);
+    restProps.onTreeviewClose?.(el);
+    restProps.ontreeviewclose?.(el);
   }
   function onLoadChildren(itemEl, done) {
     if (itemEl !== el) return;
-    emit('treeviewLoadChildren', [el, done]);
+    restProps.onTreeviewLoadChildren?.(el, done);
+    restProps.ontreeviewloadchildren?.(el, done);
   }
 
   onMount(() => {
@@ -102,60 +118,64 @@
   });
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
+<div bind:this={el} class={classes} {...restProps}>
   {#if treeviewRootTag === 'div'}
-    <div on:click={onClick} class={itemRootClasses} {...itemRootAttrs}>
-      <slot name="root-start" />
+    <div onclick={onClick} class={itemRootClasses} {...itemRootAttrs}>
+      {@render rootStart?.()}
       {#if needToggle}
-        <div class="treeview-toggle" />
+        <div class="treeview-toggle"></div>
       {/if}
       <div class="treeview-item-content">
-        <slot name="content-start" />
+        {@render contentStart?.()}
         {#if icon}
           <UseIcon {icon} />
         {/if}
-        <slot name="media" />
+        {@render media?.()}
         <div class="treeview-item-label">
-          <slot name="label-start" />
-          {plainText(label)}
-          <slot name="label" />
+          {@render labelStart?.()}
+          {#if typeof label === 'function'}
+            {@render label?.()}
+          {:else if typeof label !== 'undefined'}
+            {label}
+          {/if}
         </div>
-        <slot name="content" />
-        <slot name="content-end" />
+        {@render content?.()}
+        {@render contentEnd?.()}
       </div>
-      <slot name="root" />
-      <slot name="root-end" />
+      {@render root?.()}
+      {@render rootEnd?.()}
     </div>
   {:else}
-    <a on:click={onClick} class={itemRootClasses} {...itemRootAttrs}>
-      <slot name="root-start" />
+    <a onclick={onClick} class={itemRootClasses} {...itemRootAttrs}>
+      {@render rootStart?.()}
       {#if needToggle}
-        <div class="treeview-toggle" />
+        <div class="treeview-toggle"></div>
       {/if}
       <div class="treeview-item-content">
-        <slot name="content-start" />
+        {@render contentStart?.()}
         {#if icon}
           <UseIcon {icon} />
         {/if}
-        <slot name="media" />
+        {@render media?.()}
         <div class="treeview-item-label">
-          <slot name="label-start" />
-          {plainText(label)}
-          <slot name="label" />
+          {@render labelStart?.()}
+          {#if typeof label === 'function'}
+            {@render label?.()}
+          {:else if typeof label !== 'undefined'}
+            {label}
+          {/if}
         </div>
-        <slot name="content" />
-        <slot name="content-end" />
+        {@render content?.()}
+        {@render contentEnd?.()}
       </div>
-      <slot name="root" />
-      <slot name="root-end" />
+      {@render root?.()}
+      {@render rootEnd?.()}
     </a>
   {/if}
   {#if hasChildren}
     <div class="treeview-item-children">
-      <slot name="children-start" />
-      <slot />
-      <slot name="children" />
+      {@render childrenStart?.()}
+      {@render children?.()}
     </div>
   {/if}
 </div>

package/components/treeview.d.ts

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

package/components/treeview.svelte

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

package/components/use-icon.d.ts

@@ -1,17 +1,22 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
 
-interface UseIconProps {
+interface Props {
   
 }
 
+interface UseIconProps {}
+interface UseIconProps extends Props {}
+
+interface UseIconEvents extends Record<'',{}>{}
+
 
 
 declare class UseIcon extends SvelteComponent<
-  UseIconProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof UseIconProps>,
-  {  },
+  UseIconProps,
+  UseIconEvents,
   {  }
 > {}
 

package/components/use-icon.svelte

@@ -2,7 +2,7 @@
   import Icon from './icon.svelte';
   import Badge from './badge.svelte';
 
-  export let icon = undefined;
+  let { icon } = $props();
 </script>
 
 <Icon {...icon.props}>

package/components/view.d.ts

@@ -1,65 +1,63 @@
 
-import { SvelteComponent } from 'svelte';
+import { SvelteComponent, Snippet } from 'svelte';
 import { HTMLAttributes } from 'svelte/elements';
 
   import { View, Router } from 'framework7/types';
 
 
-interface ViewProps {
+interface Props {
   initRouterOnTabShow?: boolean;
-  tab ?: boolean;
-  tabActive ?: boolean;
-  name ?: string;
-  router ?: boolean;
-  linksView ?: Object | string;
-  url ?: string;
-  main ?: boolean;
-  xhrCache ?: boolean;
-  xhrCacheIgnore ?: Array<any>;
-  xhrCacheIgnoreGetParameters ?: boolean;
-  xhrCacheDuration ?: number;
-  preloadPreviousPage ?: boolean;
-  allowDuplicateUrls ?: boolean;
-  reloadPages ?: boolean;
-  reloadDetail ?: boolean;
-  masterDetailResizable ?: boolean;
-  masterDetailBreakpoint ?: number;
-  removeElements ?: boolean;
-  removeElementsWithTimeout ?: boolean;
-  removeElementsTimeout ?: number;
-  restoreScrollTopOnBack ?: boolean;
-  unloadTabContent ?: boolean;
-  loadInitialPage ?: boolean;
-  iosSwipeBack ?: boolean;
-  iosSwipeBackAnimateShadow ?: boolean;
-  iosSwipeBackAnimateOpacity ?: boolean;
-  iosSwipeBackActiveArea ?: number;
-  iosSwipeBackThreshold ?: number;
-  mdSwipeBack ?: boolean;
-  mdSwipeBackAnimateShadow ?: boolean;
-  mdSwipeBackAnimateOpacity ?: boolean;
-  mdSwipeBackActiveArea ?: number;
-  mdSwipeBackThreshold ?: number;
-  browserHistory ?: boolean;
-  browserHistoryRoot ?: string;
-  browserHistoryAnimate ?: boolean;
-  browserHistoryAnimateOnLoad ?: boolean;
-  browserHistorySeparator ?: string;
-  browserHistoryOnLoad ?: boolean;
+  tab?: boolean;
+  tabActive?: boolean;
+  name?: string;
+  router?: boolean;
+  linksView?: Object | string;
+  url?: string;
+  main?: boolean;
+  xhrCache?: boolean;
+  xhrCacheIgnore?: Array<any>;
+  xhrCacheIgnoreGetParameters?: boolean;
+  xhrCacheDuration?: number;
+  preloadPreviousPage?: boolean;
+  allowDuplicateUrls?: boolean;
+  reloadPages?: boolean;
+  reloadDetail?: boolean;
+  masterDetailResizable?: boolean;
+  masterDetailBreakpoint?: number;
+  removeElements?: boolean;
+  removeElementsWithTimeout?: boolean;
+  removeElementsTimeout?: number;
+  restoreScrollTopOnBack?: boolean;
+  unloadTabContent?: boolean;
+  loadInitialPage?: boolean;
+  iosSwipeBack?: boolean;
+  iosSwipeBackAnimateShadow?: boolean;
+  iosSwipeBackAnimateOpacity?: boolean;
+  iosSwipeBackActiveArea?: number;
+  iosSwipeBackThreshold?: number;
+  mdSwipeBack?: boolean;
+  mdSwipeBackAnimateShadow?: boolean;
+  mdSwipeBackAnimateOpacity?: boolean;
+  mdSwipeBackActiveArea?: number;
+  mdSwipeBackThreshold?: number;
+  browserHistory?: boolean;
+  browserHistoryRoot?: string;
+  browserHistoryAnimate?: boolean;
+  browserHistoryAnimateOnLoad?: boolean;
+  browserHistorySeparator?: string;
+  browserHistoryOnLoad?: boolean;
   browserHistoryInitialMatch?: boolean;
   browserHistoryStoreHistory?: boolean;
-  animate ?: boolean;
-  transition ?: string;
-  iosDynamicNavbar ?: boolean;
-  iosAnimateNavbarBackIcon ?: boolean;
-  materialPageLoadDelay ?: number;
-  passRouteQueryToRequest ?: boolean;
-  passRouteParamsToRequest ?: boolean;
-  routes ?: Array<any>;
-  routesAdd ?: Array<any>;
-  routesBeforeEnter ?: Function | Array<any>;
-  routesBeforeLeave ?: Function | Array<any>;
-  init ?: boolean;
+  animate?: boolean;
+  transition?: string;
+  materialPageLoadDelay?: number;
+  passRouteQueryToRequest?: boolean;
+  passRouteParamsToRequest?: boolean;
+  routes?: Array<any>;
+  routesAdd?: Array<any>;
+  routesBeforeEnter?: Function | Array<any>;
+  routesBeforeLeave?: Function | Array<any>;
+  init?: boolean;
   color?: string;
   colorTheme?: string;
   textColor?: string;
@@ -67,23 +65,36 @@ interface ViewProps {
   borderColor?: string;
   rippleColor?: string;
   dark?: boolean;
-  onViewInit ?: (view?: View.View) => void;
-  onViewResize ?: (width?: number) => void;
-  onSwipeBackMove ?: (swipeBackData?: Router.SwipeBackData) => void;
-  onSwipeBackBeforeChange ?: (swipeBackData?: Router.SwipeBackData) => void;
-  onSwipeBackAfterChange ?: (swipeBackData?: Router.SwipeBackData) => void;
-  onSwipeBackBeforeReset ?: (swipeBackData?: Router.SwipeBackData) => void;
-  onSwipeBackAfterReset ?: (swipeBackData?: Router.SwipeBackData) => void;
-  onTabShow ?: (el?: HTMLElement) => void;
-  onTabHide ?: (el?: HTMLElement) => void;
+  onViewInit?: (view?: View.View) => void;
+  onViewResize?: (width?: number) => void;
+  onSwipeBackMove?: (swipeBackData?: Router.SwipeBackData) => void;
+  onSwipeBackBeforeChange?: (swipeBackData?: Router.SwipeBackData) => void;
+  onSwipeBackAfterChange?: (swipeBackData?: Router.SwipeBackData) => void;
+  onSwipeBackBeforeReset?: (swipeBackData?: Router.SwipeBackData) => void;
+  onSwipeBackAfterReset?: (swipeBackData?: Router.SwipeBackData) => void;
+  onTabShow?: (el?: HTMLElement) => void;
+  onTabHide?: (el?: HTMLElement) => void;
+  children?: Snippet;
+  onviewinit?: () => void;
+  onviewresize?: () => void;
+  onswipebackmove?: () => void;
+  onswipebackbeforechange?: () => void;
+  onswipebackafterchange?: () => void;
+  onswipebackbeforereset?: () => void;
+  onswipebackafterreset?: () => void;
 }
 
+interface ViewProps {}
+interface ViewProps extends Props {}
+
+interface ViewEvents extends Record<'',{}>{}
+
 
 
 declare class View extends SvelteComponent<
-  ViewProps & Omit<HTMLAttributes<HTMLElementTagNameMap['div']>, keyof ViewProps>,
-  { viewInit: CustomEvent<void>; viewResize: CustomEvent<void>; swipeBackMove: CustomEvent<void>; swipeBackBeforeChange: CustomEvent<void>; swipeBackAfterChange: CustomEvent<void>; swipeBackBeforeReset: CustomEvent<void>; swipeBackAfterReset: CustomEvent<void>; viewRouterDidUpdate: CustomEvent<void>; },
-  {  'default' : {}; }
+  ViewProps,
+  ViewEvents,
+  {  }
 > {}
 
 export { ViewProps };