mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(recursive-list): rename items prop to children

Browse source
This commit is contained in:
Eric Y Liu 2021-07-03 04:05:58 -07:00
commit 38d14562bb
4 changed files with 25 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

12
COMPONENT_INDEX.md
View file

@ -3036,7 +3036,7 @@ None.
### Types
```ts
export interface Item {
export interface RecursiveListNode {
text?: string;
href?: string;
html?: string;
@ -3045,11 +3045,11 @@ export interface Item {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------ | --------------------------------------- |
| items | <code>let</code> | No | <code>Array<Item & { items?: Item[]; }></code> | <code>[]</code> | Specify the items to render |
| type | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | --------------------------------------- |
| children | <code>let</code> | No | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the children to render |
| type | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
| nested | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant |
### Slots

10
docs/src/COMPONENT_API.json
View file

@ -7869,10 +7869,10 @@
"filePath": "src/RecursiveList/RecursiveList.svelte",
"props": [
{
"name": "items",
"name": "children",
"kind": "let",
"description": "Specify the items to render",
"type": "Array<Item & { items?: Item[]; }>",
"description": "Specify the children to render",
"type": "Array<RecursiveListNode & { children?: RecursiveListNode[]; }>",
"value": "[]",
"isFunction": false,
"constant": false,
@ -7904,8 +7904,8 @@
"typedefs": [
{
"type": "{ text?: string; href?: string; html?: string; }",
"name": "Item",
"ts": "interface Item { text?: string; href?: string; html?: string; }"
"name": "RecursiveListNode",
"ts": "interface RecursiveListNode { text?: string; href?: string; html?: string; }"
}
],
"rest_props": { "type": "InlineComponent", "name": "svelte:component" }

23
src/RecursiveList/RecursiveList.svelte
View file

@ -1,14 +1,13 @@
<script>
/**
* @typedef {{ text?: string; href?: string; html?: string; }} Item
* @type {Array<Item & { items?: Item[]; }>}
* @typedef {{ text?: string; href?: string; html?: string; }} RecursiveListNode
*/
/**
* Specify the items to render
* @type {Array<Item & { items?: Item[]; }>}
* Specify the children to render
* @type {Array<RecursiveListNode & { children?: RecursiveListNode[]; }>}
*/
export let items = [];
export let children = [];
/**
* Specify the type of list to render
@ -21,7 +20,7 @@
import UnorderedList from "../UnorderedList/UnorderedList.svelte";
import OrderedList from "../OrderedList/OrderedList.svelte";
import ListItem from "./RecursiveListItem.svelte";
import RecursiveListItem from "./RecursiveListItem.svelte";
</script>
<svelte:component
@ -30,13 +29,13 @@
nested="{nested}"
{...$$restProps}
>
{#each items as item}
{#if Array.isArray(item.items)}
<ListItem {...item}>
<svelte:self {...item} type="{type}" nested />
</ListItem>
{#each children as child}
{#if Array.isArray(child.children)}
<RecursiveListItem {...child}>
<svelte:self {...child} type="{type}" nested />
</RecursiveListItem>
{:else}
<ListItem {...item} />
<RecursiveListItem {...child} />
{/if}
{/each}
</svelte:component>

6
types/RecursiveList/RecursiveList.d.ts vendored
View file

@ -1,7 +1,7 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
export interface Item {
export interface RecursiveListNode {
text?: string;
href?: string;
html?: string;
@ -9,10 +9,10 @@ export interface Item {
export interface RecursiveListProps {
/**
* Specify the items to render
* Specify the children to render
* @default []
*/
items?: Array<Item & { items?: Item[] }>;
children?: Array<RecursiveListNode & { children?: RecursiveListNode[] }>;
/**
* Specify the type of list to render