From f0453e01b3e22fb3318338e8df7e892241351bed Mon Sep 17 00:00:00 2001
From: Shinichi Okada <147320+shinokada@users.noreply.github.com>
Date: Thu, 26 Sep 2024 07:45:13 +0200
Subject: [PATCH] feat: #1054 #933 #1440 add use:action to SidebarItem and A
 component

---
 src/lib/sidebar/SidebarItem.svelte    |  5 ++-
 src/lib/typography/A.svelte           |  5 ++-
 src/routes/docs/components/sidebar.md | 44 +++++++++++++++++++++++++++
 src/routes/docs/typography/link.md    | 15 +++++++++
 4 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/lib/sidebar/SidebarItem.svelte b/src/lib/sidebar/SidebarItem.svelte
index ab30411f0..8c858fbc0 100644
--- a/src/lib/sidebar/SidebarItem.svelte
+++ b/src/lib/sidebar/SidebarItem.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
+  import type { Action } from 'svelte/action';
   import { getContext } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { SidebarType } from './Sidebar.svelte';
 
+  export let action: Action<HTMLElement, any> = () => {};
+  export let params: any = {};
   export let href: string = '';
   export let label: string = '';
   export let spanClass: string = 'ms-3';
@@ -27,7 +30,7 @@
 </script>
 
 <li>
-  <a {...$$restProps} {href} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
+  <a {...$$restProps} {href} use:action={params} on:blur on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover class={aClass}>
     <slot name="icon" />
     <span class={spanClass}>{label}</span>
     {#if $$slots.subtext}
diff --git a/src/lib/typography/A.svelte b/src/lib/typography/A.svelte
index d8ad33718..0c60a1cb4 100644
--- a/src/lib/typography/A.svelte
+++ b/src/lib/typography/A.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
+  import type { Action } from 'svelte/action';
   import { twMerge } from 'tailwind-merge';
 
+  export let action: Action<HTMLElement, any> = () => {};
+  export let params: any = {};
   export let href: string = '#';
   export let color: string = 'text-primary-600 dark:text-primary-500';
   export let aClass: string = 'inline-flex items-center hover:underline';
 </script>
 
-<a {...$$restProps} {href} class={twMerge(aClass, color, $$props.class)} on:click>
+<a {...$$restProps} {href} use:action={params} class={twMerge(aClass, color, $$props.class)} on:click>
   <slot />
 </a>
 
diff --git a/src/routes/docs/components/sidebar.md b/src/routes/docs/components/sidebar.md
index 206ead3cc..4e1da45ce 100644
--- a/src/routes/docs/components/sidebar.md
+++ b/src/routes/docs/components/sidebar.md
@@ -524,6 +524,50 @@ You can add own transition by setting `transitionType` and `transitionParams`.
 </Sidebar>
 ```
 
+## use:action
+
+Svelte Actions are essentially element-level lifecycle functions. They're useful for things like:
+
+- interfacing with third-party libraries
+- lazy-loaded images
+- tooltips
+- adding custom event handlers
+
+The `SidebarItem` component has `use:action` directive you can use:
+
+```svelte example
+<script>
+  import { Sidebar, SidebarGroup, SidebarItem, SidebarWrapper } from 'flowbite-svelte';
+  const routes = [
+    {
+      label: 'Home',
+      href: '/'
+    },
+    {
+      label: 'Contact',
+      href: '/contact'
+    },
+    {
+      label: 'Profile',
+      href: '/profile'
+    }
+  ];
+  const myaction = (label) => {
+    console.log('Hello ', label);
+  };
+</script>
+
+<Sidebar >
+  <SidebarWrapper>
+    <SidebarGroup>
+      {#each routes as {label, href}}
+      <SidebarItem {label} {href} action={myaction(label)}/>
+      {/each}
+    </SidebarGroup>
+  </SidebarWrapper>
+</Sidebar>
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
diff --git a/src/routes/docs/typography/link.md b/src/routes/docs/typography/link.md
index 6dd0bf83d..23d5f1842 100644
--- a/src/routes/docs/typography/link.md
+++ b/src/routes/docs/typography/link.md
@@ -136,6 +136,21 @@ This example can be used to set a hyperlink on an image inside a card component.
 </Card>
 ```
 
+## use:action
+
+```svelte example
+<script>
+  import { A } from 'flowbite-svelte';
+
+  const myaction = () => {
+    console.log('Action triggered');
+  };
+</script>
+
+<A href="/" action={myaction}>Read more</A>
+
+```
+
 ## Component data
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.