Last active
October 4, 2024 19:37
-
-
Save gustavomorinaga/54d4c68eff0d4cd1999d90ece367a288 to your computer and use it in GitHub Desktop.
A customizable list component using `shadcn-svelte`. The component allows specifying the list tag type (`ul` or `ol`) and supports additional class names for styling.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script lang="ts" context="module"> | |
| import * as Card from '$lib/components/ui/card'; | |
| import { List } from '$lib/components/ui/list'; | |
| import type { TUser } from '$lib/ts'; | |
| </script> | |
| <script lang="ts"> | |
| const data: Array<TUser> = [ | |
| { | |
| id: 1, | |
| display_name: "John Doe", | |
| email: "john.doe@example.com" | |
| }, | |
| { | |
| id: 2, | |
| display_name: "Jane Doe", | |
| email: "jane.doe@example.com" | |
| } | |
| ]; | |
| </script> | |
| <List {data} getKey={(item) => item.id} let:item> | |
| <Card.Root> | |
| <Card.Header> | |
| <Card.Title>{item.display_name}</Card.Title> | |
| <Card.Description>{item.email}</Card.Description> | |
| </Card.Header> | |
| </Card.Root> | |
| </List> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export { default as List } from './list.svelte'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script lang="ts" context="module"> | |
| import { cn } from '$lib/utils/ui'; | |
| import type { HTMLAttributes } from 'svelte/elements'; | |
| </script> | |
| <script lang="ts"> | |
| type T = $$Generic; | |
| type $$Props = (HTMLAttributes<HTMLUListElement> | HTMLAttributes<HTMLOListElement>) & { | |
| data: Array<T>; | |
| tag?: 'ul' | 'ol'; | |
| getKey?: (item: T, index: number) => string | number; | |
| }; | |
| type $$Slots = { default: { item: T; index: number } }; | |
| export let data: $$Props['data'] = []; | |
| export let tag: $$Props['tag'] = 'ul'; | |
| export let getKey: NonNullable<$$Props['getKey']> = (_data, index) => `_${index}`; | |
| let className: $$Props['class'] = undefined; | |
| export { className as class }; | |
| </script> | |
| {#if data.length} | |
| <svelte:element this={tag} class={cn('flex flex-col', className)} {...$$restProps}> | |
| {#each data as item, index (getKey(item, index))} | |
| <li class="contents"> | |
| <slot {item} {index} /> | |
| </li> | |
| {/each} | |
| </svelte:element> | |
| {/if} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment