mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
chore(tree-view): add test for types
This commit is contained in:
Eric Y Liu
parent
a06c8f810c
commit
775b80de3e
6 changed files with 80 additions and 34 deletions
|
|
@ -4660,21 +4660,22 @@ export type TreeNodeId = string | number;
|
|||
export interface TreeNode {
|
||||
id: TreeNodeId;
|
||||
text: string;
|
||||
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
|
||||
disabled?: boolean;
|
||||
expanded?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------------------ | ---------------------- | --------------------------------------------------------------- |
|
||||
| selectedIds | <code>let</code> | Yes | <code>TreeNodeIds</code> | <code>[]</code> | Set the node ids to be selected |
|
||||
| activeId | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
|
||||
| children | <code>let</code> | No | <code>TreeNode & { children?: TreeNode[] }</code> | <code>[]</code> | Provide an array of children nodes to render |
|
||||
| multiselect | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple selected nodes |
|
||||
| size | <code>let</code> | No | <code>"default" | "compact"</code> | <code>"default"</code> | Specify the TreeView size |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
|
||||
| selectedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be selected |
|
||||
| activeId | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
|
||||
| children | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render |
|
||||
| size | <code>let</code> | No | <code>"default" | "compact"</code> | <code>"default"</code> | Specify the TreeView size |
|
||||
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -11842,7 +11842,7 @@
|
|||
"name": "children",
|
||||
"kind": "let",
|
||||
"description": "Provide an array of children nodes to render",
|
||||
"type": "TreeNode & { children?: TreeNode[] }",
|
||||
"type": "Array<TreeNode & { children?: TreeNode[] }>",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -11858,21 +11858,11 @@
|
|||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "multiselect",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to allow multiple selected nodes",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "selectedIds",
|
||||
"kind": "let",
|
||||
"description": "Set the node ids to be selected",
|
||||
"type": "TreeNodeIds",
|
||||
"type": "TreeNodeId[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
|
|
@ -11942,9 +11932,9 @@
|
|||
"ts": "type TreeNodeId = string | number"
|
||||
},
|
||||
{
|
||||
"type": "{ id: TreeNodeId; text: string; disabled?: boolean; }",
|
||||
"type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }",
|
||||
"name": "TreeNode",
|
||||
"ts": "interface TreeNode { id: TreeNodeId; text: string; disabled?: boolean; }"
|
||||
"ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }"
|
||||
}
|
||||
],
|
||||
"rest_props": { "type": "Element", "name": "ul" }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
/**
|
||||
* Provide an array of children nodes to render
|
||||
* @type {TreeNode & { children?: TreeNode[] }}
|
||||
* @type {Array<TreeNode & { children?: TreeNode[] }>}
|
||||
*/
|
||||
export let children = [];
|
||||
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
/**
|
||||
* Set the node ids to be selected
|
||||
* @type {TreeNodeIds}
|
||||
* @type {TreeNodeId[]}
|
||||
*/
|
||||
export let selectedIds = [];
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* @typedef {{ id: TreeNodeId; text: string; disabled?: boolean; expanded?: boolean; }} TreeNode
|
||||
*/
|
||||
|
||||
/** @type {TreeNode & { children?: TreeNode[] }} */
|
||||
/** @type {Array<TreeNode & { children?: TreeNode[] }>} */
|
||||
export let children = [];
|
||||
export let expanded = false;
|
||||
export let root = false;
|
||||
|
|
|
|||
59
tests/TreeView.test.svelte
Normal file
59
tests/TreeView.test.svelte
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<script lang="ts">
|
||||
import { TreeView } from "../types";
|
||||
import type { TreeNodeId } from "../types/TreeView/TreeView";
|
||||
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
|
||||
|
||||
let activeId: TreeNodeId = "";
|
||||
let selectedIds = [];
|
||||
let children = [
|
||||
{ id: 0, text: "AI / Machine learning", icon: Analytics16 },
|
||||
{
|
||||
id: 1,
|
||||
text: "Analytics",
|
||||
children: [
|
||||
{
|
||||
id: 2,
|
||||
text: "IBM Analytics Engine",
|
||||
children: [
|
||||
{ id: 3, text: "Apache Spark" },
|
||||
{ id: 4, text: "Hadoop" },
|
||||
],
|
||||
},
|
||||
{ id: 5, text: "IBM Cloud SQL Query" },
|
||||
{ id: 6, text: "IBM Db2 Warehouse on Cloud" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
text: "Blockchain",
|
||||
children: [{ id: 8, text: "IBM Blockchain Platform" }],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
text: "Databases",
|
||||
children: [
|
||||
{ id: 10, text: "IBM Cloud Databases for Elasticsearch" },
|
||||
{ id: 11, text: "IBM Cloud Databases for Enterprise DB" },
|
||||
{ id: 12, text: "IBM Cloud Databases for MongoDB" },
|
||||
{ id: 13, text: "IBM Cloud Databases for PostgreSQL" },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
text: "Integration",
|
||||
disabled: true,
|
||||
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<TreeView
|
||||
size="compact"
|
||||
labelText="Cloud Products"
|
||||
children="{children}"
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
/>
|
||||
12
types/TreeView/TreeView.d.ts
vendored
12
types/TreeView/TreeView.d.ts
vendored
|
|
@ -6,7 +6,9 @@ export type TreeNodeId = string | number;
|
|||
export interface TreeNode {
|
||||
id: TreeNodeId;
|
||||
text: string;
|
||||
icon?: typeof import("carbon-icons-svelte").CarbonIcon;
|
||||
disabled?: boolean;
|
||||
expanded?: boolean;
|
||||
}
|
||||
|
||||
export interface TreeViewProps
|
||||
|
|
@ -15,7 +17,7 @@ export interface TreeViewProps
|
|||
* Provide an array of children nodes to render
|
||||
* @default []
|
||||
*/
|
||||
children?: TreeNode & { children?: TreeNode[] };
|
||||
children?: Array<TreeNode & { children?: TreeNode[] }>;
|
||||
|
||||
/**
|
||||
* Set the current active node id
|
||||
|
|
@ -24,17 +26,11 @@ export interface TreeViewProps
|
|||
*/
|
||||
activeId?: TreeNodeId;
|
||||
|
||||
/**
|
||||
* Set to `true` to allow multiple selected nodes
|
||||
* @default false
|
||||
*/
|
||||
multiselect?: boolean;
|
||||
|
||||
/**
|
||||
* Set the node ids to be selected
|
||||
* @default []
|
||||
*/
|
||||
selectedIds?: TreeNodeIds;
|
||||
selectedIds?: TreeNodeId[];
|
||||
|
||||
/**
|
||||
* Specify the TreeView size
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue