mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
ae27bedf4c* feat(recursive-list): add RecursiveList * feat(recursive-list): rename items prop to children * docs(recursive-list): add full examples * test(recursive-list): add types test * refactor(recursive-list): remove superfluous nested prop * docs(recursive-list): update docs * fix(recursive-list): remove nested prop from type test * fix(recursive-list): explicitly type restProps
38 lines
1 KiB
Svelte
38 lines
1 KiB
Svelte
<script>
|
|
/**
|
|
* @typedef {{ text?: string; href?: string; html?: string; }} RecursiveListNode
|
|
* @restProps {ul | ol}
|
|
*/
|
|
|
|
/**
|
|
* Specify the children to render
|
|
* @type {Array<RecursiveListNode & { children?: RecursiveListNode[]; }>}
|
|
*/
|
|
export let children = [];
|
|
|
|
/**
|
|
* Specify the type of list to render
|
|
* @type {"unordered" | "ordered" | "ordered-native"}
|
|
*/
|
|
export let type = "unordered";
|
|
|
|
import UnorderedList from "../UnorderedList/UnorderedList.svelte";
|
|
import OrderedList from "../OrderedList/OrderedList.svelte";
|
|
import RecursiveListItem from "./RecursiveListItem.svelte";
|
|
</script>
|
|
|
|
<svelte:component
|
|
this="{type === 'unordered' ? UnorderedList : OrderedList}"
|
|
native="{type === 'ordered-native'}"
|
|
{...$$restProps}
|
|
>
|
|
{#each children as child}
|
|
{#if Array.isArray(child.children)}
|
|
<RecursiveListItem {...child}>
|
|
<svelte:self {...child} type="{type}" nested />
|
|
</RecursiveListItem>
|
|
{:else}
|
|
<RecursiveListItem {...child} />
|
|
{/if}
|
|
{/each}
|
|
</svelte:component>
|