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

feat(recursive-list): rename children prop to nodes for Svelte 5 compatibility

Browse source
This commit is contained in:
Eric Liu 2024-10-20 15:05:43 -07:00
commit 242e2fcbdf
5 changed files with 19 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -3061,10 +3061,10 @@ export interface RecursiveListNode {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- | | :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
| children | No | <code>let</code> | No | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the children to render | | nodes | No | <code>let</code> | No | <code>Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }></code> | <code>[]</code> | Specify the nodes to render |
| type | No | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render | | type | No | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
### Slots ### Slots

6
docs/src/COMPONENT_API.json
View file

@ -9881,10 +9881,10 @@
"filePath": "src/RecursiveList/RecursiveList.svelte", "filePath": "src/RecursiveList/RecursiveList.svelte",
"props": [ "props": [
{ {
"name": "children", "name": "nodes",
"kind": "let", "kind": "let",
"description": "Specify the children to render", "description": "Specify the nodes to render",
"type": "Array<RecursiveListNode & { children?: RecursiveListNode[]; }>", "type": "Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

10
src/RecursiveList/RecursiveList.svelte
View file

@ -5,10 +5,10 @@
*/ */
/** /**
* Specify the children to render * Specify the nodes to render
* @type {Array<RecursiveListNode & { children?: RecursiveListNode[]; }>} * @type {Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }>}
*/ */
export let children = []; export let nodes = [];
/** /**
* Specify the type of list to render * Specify the type of list to render
@ -26,8 +26,8 @@
native="{type === 'ordered-native'}" native="{type === 'ordered-native'}"
{...$$restProps} {...$$restProps}
> >
{#each children as child} {#each nodes as child}
{#if Array.isArray(child.children)} {#if Array.isArray(child.nodes)}
<RecursiveListItem {...child}> <RecursiveListItem {...child}>
<svelte:self {...child} type="{type}" nested /> <svelte:self {...child} type="{type}" nested />
</RecursiveListItem> </RecursiveListItem>

10
tests/RecursiveList.test.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { RecursiveList } from "carbon-components-svelte"; import { RecursiveList } from "carbon-components-svelte";
const children = [ const nodes = [
{ {
text: "Item 1", text: "Item 1",
children: [ nodes: [
{ {
text: "Item 1a", text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }], nodes: [{ html: "<h5>HTML content</h5>" }],
}, },
], ],
}, },
{ {
text: "Item 2", text: "Item 2",
children: [ nodes: [
{ {
href: "https://svelte.dev/", href: "https://svelte.dev/",
}, },
@ -29,4 +29,4 @@
]; ];
</script> </script>
<RecursiveList type="ordered" children="{children}" /> <RecursiveList type="ordered" nodes="{nodes}" />

4
types/RecursiveList/RecursiveList.svelte.d.ts vendored
View file

@ -11,10 +11,10 @@ type $RestProps = SvelteHTMLElements["ul"] & SvelteHTMLElements["ol"];
type $Props = { type $Props = {
/** /**
* Specify the children to render * Specify the nodes to render
* @default [] * @default []
*/ */
children?: Array<RecursiveListNode & { children?: RecursiveListNode[] }>; nodes?: Array<RecursiveListNode & { nodes?: RecursiveListNode[] }>;
/** /**
* Specify the type of list to render * Specify the type of list to render