feat(svelte): updated Accordion components

Author: nolimits4web

src/svelte/components/accordion-content.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, 'accordion-item-content', colorClasses($$props));
+  const classes = $derived(classNames(className, 'accordion-item-content', colorClasses(restProps)));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

src/svelte/components/accordion-item.svelte

@@ -1,51 +1,51 @@
 <script>
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } 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 { app, f7ready } from '../shared/f7.js';
 
-  const emit = createEmitter(createEventDispatcher, $$props);
 
-  let className = undefined;
-  export { className as class };
-
-  export let opened = undefined;
+  let {
+    class: className,
+    opened = false,
+    children,
+    ...restProps
+  } = $props();
 
   let el;
 
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     'accordion-item',
     {
       'accordion-item-opened': opened,
     },
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 
   function onBeforeOpen(accEl, prevent) {
     if (accEl !== el) return;
-    emit('accordionBeforeOpen', [prevent]);
+    restProps.accordionBeforeOpen?.(prevent);
   }
   function onOpen(accEl) {
     if (accEl !== el) return;
-    emit('accordionOpen');
+    restProps.accordionOpen?.();
   }
   function onOpened(accEl) {
     if (accEl !== el) return;
-    emit('accordionOpened');
+    restProps.accordionOpened?.();
   }
   function onBeforeClose(accEl, prevent) {
     if (accEl !== el) return;
-    emit('accordionBeforeClose', [prevent]);
+    restProps.accordionBeforeClose?.(prevent);
   }
   function onClose(accEl) {
     if (accEl !== el) return;
-    emit('accordionClose');
+    restProps.accordionClose?.();
   }
   function onClosed(accEl) {
     if (accEl !== el) return;
-    emit('accordionClosed');
+    restProps.accordionClosed?.();
   }
 
   onMount(() => {
@@ -70,6 +70,6 @@
   });
 </script>
 
-<div bind:this={el} class={classes} {...restProps($$restProps)}>
-  <slot />
+<div bind:this={el} class={classes} {...restProps}>
+  {@render children?.()}
 </div>

src/svelte/components/accordion-toggle.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, 'accordion-item-toggle', colorClasses($$props));
+  const classes = $derived(classNames(className, 'accordion-item-toggle', colorClasses(restProps)));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>

src/svelte/components/accordion.svelte

@@ -1,21 +1,22 @@
 <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,
+    accordionOpposite = false,
+    children,
+    ...restProps
+  } = $props();
 
-  export let accordionOpposite = undefined;
-
-  $: classes = classNames(
+  const classes = $derived(classNames(
     className,
     'accordion-list',
     accordionOpposite && 'accordion-opposite',
-    colorClasses($$props),
-  );
+    colorClasses(restProps),
+  ));
 </script>
 
-<div class={classes} {...restProps($$restProps)}>
-  <slot />
+<div class={classes} {...restProps}>
+  {@render children?.()}
 </div>