Listgroup (#1143)

* docs: fixed listgroup with icons

* no restProps in listgroupitem

* attrs passed to a and button

* code formatting

src/lib/list-group/Listgroup.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { setContext, type ComponentProps, createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, setContext, type ComponentProps } from 'svelte';
   import { twMerge } from 'tailwind-merge';
   import type { ListGroupItemType } from '../types';
-  import ListgroupItem from './ListgroupItem.svelte';
   import Frame from '../utils/Frame.svelte';
+  import ListgroupItem from './ListgroupItem.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -25,13 +25,14 @@
 
 <Frame tag={active ? 'div' : 'ul'} {...$$restProps} rounded border class={groupClass}>
   {#each items as item, index}
-    {#if typeof item === 'object'}
-      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
-    {:else}
+    {#if typeof item === 'string'}
       <ListgroupItem {active} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
+    {:else}
+      <ListgroupItem {active} {...item} {index} on:click={() => dispatch('click', item)}><slot {item} {index} /></ListgroupItem>
     {/if}
   {:else}
-    <slot item={items[0]} />
+    {@const item = items[0]}
+    <slot {item} />
   {/each}
 </Frame>
 

src/lib/list-group/ListgroupItem.svelte

@@ -12,6 +12,7 @@
   export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
   export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
   export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+  export let attrs: any = undefined;
 
   const states = {
     current: currentClass,
@@ -31,11 +32,11 @@
     <slot item={$$props} />
   </li>
 {:else if href}
-  <a {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
+  <a {...attrs} {href} class="block {itemClass}" aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </a>
 {:else}
-  <button type="button" class="flex items-center text-left {itemClass}" {disabled} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover aria-current={current}>
+  <button type="button" {...attrs} class="flex items-center text-left {itemClass}" {disabled} aria-current={current} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseenter on:mouseleave on:mouseover>
     <slot item={$$props} />
   </button>
 {/if}
@@ -54,4 +55,5 @@
 @prop export let focusClass: string = 'focus:z-40 focus:outline-none focus:ring-2 focus:ring-primary-700 focus:text-primary-700 dark:focus:ring-gray-500 dark:focus:text-white';
 @prop export let hoverClass: string = 'hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-gray-600 dark:hover:text-white';
 @prop export let itemDefaultClass: string = 'py-2 px-4 w-full text-sm font-medium list-none first:rounded-t-lg last:rounded-b-lg';
+@prop export let attrs: any = undefined;
 -->

src/lib/types.ts

@@ -1,4 +1,5 @@
 import type { SvelteComponent } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 export type BlockQuoteType = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
 
@@ -99,6 +100,7 @@ export interface ListGroupItemType {
   current?: boolean;
   disabled?: boolean;
   href?: string;
+  attrs?: HTMLAnchorAttributes|HTMLButtonAttributes;
   [propName: string]: any;
 }
 

src/routes/docs/components/list-group.md

@@ -47,14 +47,16 @@ You need to set the list to `active` mode to enable hovering, focus and links.
 
 If list is active and data items contain `href` field entries are presented as `<a>` elements.
 
+You can pass extra properties to the `<a>` element by setting the `attrs` atrribute in the items list.
+
 ```svelte example class="flex justify-center"
 <script>
   import { Listgroup } from 'flowbite-svelte';
   let links = [
-    { name: 'Accordions', href: '/accordion', current: true },
-    { name: 'Alerts', href: '/alerts' },
-    { name: 'Badges', href: '/badges' },
-    { name: 'Breadcrumbs', href: '/breadcrumbs' }
+    { name: 'Accordions', href: '/docs/components/accordion', current: true },
+    { name: 'Alerts', href: '/docs/components/alerts' },
+    { name: 'Badges', href: '/docs/components/badges' },
+    { name: 'Breadcrumbs', href: '/docs/components/breadcrumbs', attrs: {target: '_blank'} }
   ];
 </script>
 
@@ -71,14 +73,16 @@ You need to set the list to `active` mode to enable hovering, focus and `on:clic
 
 If list is active and data items do not contain `href` field entries are presented as `<button>` elements triggering `on:click` events.
 
+You can pass extra properties to the `<button>` element by setting the `attrs` atrribute in the items list.
+
 ```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
   import { Listgroup } from 'flowbite-svelte';
   let buttons = [
     { name: 'Profile', mycustomfield: 'data1', current: true },
     { name: 'Settings', mycustomfield: 'data2' },
     { name: 'Messages', mycustomfield: 'data3' },
-    { name: 'Download', mycustomfield: 'data4', disabled: true }
+    { name: 'Download', mycustomfield: 'data4', disabled: true, attrs: {type: 'submit'} }
   ];
 </script>
 
@@ -93,22 +97,23 @@ Use the following example to create a list of buttons as a menu together with SV
 
 ```svelte example class="flex justify-center" hideResponsiveButtons
 <script>
-  import { Listgroup } from 'flowbite-svelte';
-  import { IconSolid } from 'flowbite-svelte-icons';
+  import Listgroup from "$lib/list-group/Listgroup.svelte";
+  import { AdjustmentsHorizontalSolid, DownloadSolid, MessagesSolid, UserCircleSolid } from 'flowbite-svelte-icons';
   let icons = [
-    { name: 'Profile', icon: 'user-circle-solid' },
-    { name: 'Settings', icon: 'adjustments-horizontal-outline' },
-    { name: 'Messages', icon: 'messages-solid' },
-    { name: 'Download', icon: 'download-solid' }
+    { name: 'Profile', icon: UserCircleSolid },
+    { name: 'Settings', icon: AdjustmentsHorizontalSolid },
+    { name: 'Messages', icon: MessagesSolid },
+    { name: 'Download', icon: DownloadSolid }
   ];
+  // <svelte:component this={IconSolid} icon={item.icon} class="w-3 h-3 mr-2.5" />
 </script>
 
+
 <Listgroup active items={icons} let:item class="w-48" on:click={console.log}>
-  <svelte:component this={IconSolid} name={item.icon} class="w-3 h-3 mr-2.5" />
+  <svelte:component this={item.icon} class="w-3 h-3 mr-2.5"/>
   {item.name}
 </Listgroup>
 ```
-
 ## Advanced
 
 When non standard usage is needed you can omit the `items` props and add elements directly to the list. Usage of hidden so far `ListgroupItem` helps you with proper layout.