mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 09:51:36 +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
| 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 |
| type | No | <code>let</code> | No | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code> | <code>"unordered"</code> | Specify the type of list to render |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
| 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 |
### Slots

6
docs/src/COMPONENT_API.json
View file

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

10
src/RecursiveList/RecursiveList.svelte
View file

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

10
tests/RecursiveList.test.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts">
import { RecursiveList } from "carbon-components-svelte";
const children = [
const nodes = [
{
text: "Item 1",
children: [
nodes: [
{
text: "Item 1a",
children: [{ html: "<h5>HTML content</h5>" }],
nodes: [{ html: "<h5>HTML content</h5>" }],
},
],
},
{
text: "Item 2",
children: [
nodes: [
{
href: "https://svelte.dev/",
},
@ -29,4 +29,4 @@
];
</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 = {
/**
* Specify the children to render
* Specify the nodes to render
* @default []
*/
children?: Array<RecursiveListNode & { children?: RecursiveListNode[] }>;
nodes?: Array<RecursiveListNode & { nodes?: RecursiveListNode[] }>;
/**
* Specify the type of list to render