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

Merge branch 'master' into patch-1

Browse source
This commit is contained in:
Daniel Miedzik 2021-10-14 10:41:14 +02:00
commit a2494ad128
20 changed files with 506 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
CHANGELOG.md
View file

@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
<!-- ## Unreleased -->
## [0.45.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.45.0) - 2021-10-13
**Features**
- add `TreeView` component accessors to programmatically expand/collapse nodes
## [0.44.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.7) - 2021-10-13
**Fixes**
- add missing `value` prop to `Checkbox`
## [0.44.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.6) - 2021-10-11
**Fixes**
- fix `DataTable` sorting to tolerate `null`, `undefined` values
## [0.44.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.44.5) - 2021-10-04
**Fixes**

25
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 172 components exported from carbon-components-svelte@0.44.5.
> 172 components exported from carbon-components-svelte@0.45.0.
## Components
@ -463,6 +463,7 @@ None.
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the checkbox |
| indeterminate | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the checkbox to be read-only |
@ -4752,15 +4753,19 @@ export interface TreeNode {
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
| expandedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be expanded |
| 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" &#124; "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 |
| :------------ | :-------------------- | :------- | :------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| expandedIds | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be expanded |
| 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" &#124; "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 |
| expandAll | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = [...nodeIds]; }</code> | Programmatically expand all nodes |
| collapseAll | <code>function</code> | No | <code>() => void</code> | <code>() => { expandedIds = []; }</code> | Programmatically collapse all nodes |
| expandNodes | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }</code> | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided |
| collapseNodes | <code>function</code> | No | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }</code> | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided |
### Slots

6
README.md
View file

@ -43,6 +43,12 @@ yarn add -D carbon-components-svelte
npm i -D carbon-components-svelte
```
**pnpm**
```sh
pnpm i -D carbon-components-svelte
```
## Usage
### Styling

55
docs/src/COMPONENT_API.json
View file

@ -708,6 +708,17 @@
"moduleName": "Checkbox",
"filePath": "src/Checkbox/Checkbox.svelte",
"props": [
{
"name": "value",
"kind": "let",
"description": "Specify the value of the checkbox",
"type": "string",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "checked",
"kind": "let",
@ -13152,6 +13163,50 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": false
},
{
"name": "expandAll",
"kind": "function",
"description": "Programmatically expand all nodes",
"type": "() => void",
"value": "() => { expandedIds = [...nodeIds]; }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
"reactive": false
},
{
"name": "collapseAll",
"kind": "function",
"description": "Programmatically collapse all nodes",
"type": "() => void",
"value": "() => { expandedIds = []; }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
"reactive": false
},
{
"name": "expandNodes",
"kind": "function",
"description": "Programmatically expand a subset of nodes.\nExpands all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
"reactive": false
},
{
"name": "collapseNodes",
"kind": "function",
"description": "Programmatically collapse a subset of nodes.\nCollapses all nodes if no argument is provided",
"type": "(filterId?: (node: TreeNode) => boolean) => void",
"value": "() => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }",
"isFunction": true,
"isFunctionDeclaration": true,
"constant": false,
"reactive": false
}
],
"slots": [

4
docs/src/pages/components/PasswordInput.svx
View file

@ -1,3 +1,7 @@
---
source: TextInput/PasswordInput.svelte
---
<script>
import { PasswordInput } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";

1
docs/src/pages/components/RadioTile.svx
View file

@ -1,5 +1,6 @@
---
components: ["TileGroup", "RadioTile"]
source: Tile/RadioTile.svelte
---
<script>

1
docs/src/pages/components/SelectableTile.svx
View file

@ -1,5 +1,6 @@
---
components: ["SelectableTile"]
source: Tile/SelectableTile.svelte
---
<script>

32
docs/src/pages/components/TreeView.svx
View file

@ -45,4 +45,34 @@ Expanded nodes can be set using `expandedIds`.
Initial multiple selected nodes can be set using `selectedIds`.
<FileSource src="/framed/TreeView/TreeViewMultiselect" />
<FileSource src="/framed/TreeView/TreeViewMultiselect" />
### Expand all nodes
To programmatically expand all nodes, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `TreeView.expandAll()` method to expand all nodes.
<FileSource src="/framed/TreeView/TreeViewExpandAll" />
### Collapse all nodes
Similarly, invoke `TreeView.collapseAll()` to collapse all nodes.
<FileSource src="/framed/TreeView/TreeViewCollapseAll" />
### Expand a subset of nodes
Use the `TreeView.expandNodes` method to expand only a subset of nodes.
The method accepts an argument that takes a node and returns a boolean.
If no argument is provided, all nodes will be expanded.
<FileSource src="/framed/TreeView/TreeViewExpandNodes" />
### Collapse a subset of nodes
Use the `TreeView.collapseNodes` method to collapse a subset of nodes.
If no argument is provided, all nodes will be collapsed.
<FileSource src="/framed/TreeView/TreeViewCollapseNodes" />

63
docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte Normal file
View file

@ -0,0 +1,63 @@
<script>
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
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>
<div>
<Button on:click="{treeview?.collapseAll}">Collapse all</Button>
</div>
<TreeView
bind:this="{treeview}"
bind:expandedIds
labelText="Cloud Products"
children="{children}"
/>
<style>
div {
margin-bottom: var(--cds-spacing-05);
}
</style>

71
docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte Normal file
View file

@ -0,0 +1,71 @@
<script>
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let expandedIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 14];
let children = [
{ id: 0, text: "AI / Machine learning" },
{
id: 1,
text: "Analytics",
disabled: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
disabled: true,
children: [
{ id: 3, text: "Apache Spark", disabled: true },
{ id: 4, text: "Hadoop", disabled: true },
],
},
{ id: 5, text: "IBM Cloud SQL Query", disabled: true },
{ id: 6, text: "IBM Db2 Warehouse on Cloud", disabled: true },
],
},
{
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>
<div>
<Button
on:click="{() => {
treeview?.collapseNodes((node) => node.disabled);
}}"
>
Collapse disabled nodes
</Button>
</div>
<TreeView
bind:this="{treeview}"
bind:expandedIds
labelText="Cloud Products"
children="{children}"
/>
<style>
div {
margin-bottom: var(--cds-spacing-05);
}
</style>

61
docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte Normal file
View file

@ -0,0 +1,61 @@
<script>
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let children = [
{ id: 0, text: "AI / Machine learning" },
{
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>
<div>
<Button on:click="{treeview?.expandAll}">Expand all</Button>
</div>
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
/>
<style>
div {
margin-bottom: var(--cds-spacing-05);
}
</style>

67
docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte Normal file
View file

@ -0,0 +1,67 @@
<script>
import { TreeView, Button } from "carbon-components-svelte";
let treeview = null;
let children = [
{ id: 0, text: "AI / Machine learning" },
{
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>
<div>
<Button
on:click="{() => {
treeview?.expandNodes((node) => /^IBM/.test(node.text));
}}"
>
Expand nodes starting with "IBM"
</Button>
</div>
<TreeView
bind:this="{treeview}"
labelText="Cloud Products"
children="{children}"
/>
<style>
div {
margin-bottom: var(--cds-spacing-05);
}
</style>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "carbon-components-svelte",
"version": "0.44.5",
"version": "0.45.0",
"license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System",
"svelte": "./src/index.js",

2
preprocess/api.json
View file

@ -1,5 +1,5 @@
{
"version": "0.44.5",
"version": "0.45.0",
"components": {
"Accordion": {
"path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

4
src/Checkbox/Checkbox.svelte
View file

@ -3,6 +3,9 @@
* @event {boolean} check
*/
/** Specify the value of the checkbox */
export let value = "";
/** Specify whether the checkbox is checked */
export let checked = false;
@ -69,6 +72,7 @@
<input
bind:this="{ref}"
type="checkbox"
value="{value}"
checked="{checked}"
disabled="{disabled}"
id="{id}"

4
src/DataTable/DataTable.svelte
View file

@ -194,6 +194,10 @@
if (typeof itemA === "number" && typeof itemB === "number")
return itemA - itemB;
if ([itemA, itemB].every((item) => !item && item !== 0)) return 0;
if (!itemA && itemA !== 0) return ascending ? 1 : -1;
if (!itemB && itemB !== 0) return ascending ? -1 : 1;
return itemA
.toString()
.localeCompare(itemB.toString(), "en", { numeric: true });

57
src/TreeView/TreeView.svelte
View file

@ -44,6 +44,44 @@
/** Set to `true` to visually hide the label text */
export let hideLabel = false;
/**
* Programmatically expand all nodes
* @type {() => void}
*/
export function expandAll() {
expandedIds = [...nodeIds];
}
/**
* Programmatically collapse all nodes
* @type {() => void}
*/
export function collapseAll() {
expandedIds = [];
}
/**
* Programmatically expand a subset of nodes.
* Expands all nodes if no argument is provided
* @type {(filterId?: (node: TreeNode) => boolean) => void}
*/
export function expandNodes(filterNode = (node) => false) {
expandedIds = nodes
.filter((node) => !filterNode(node))
.map((node) => node.id);
}
/**
* Programmatically collapse a subset of nodes.
* Collapses all nodes if no argument is provided
* @type {(filterId?: (node: TreeNode) => boolean) => void}
*/
export function collapseNodes(filterNode = (node) => true) {
expandedIds = nodes
.filter((node) => !filterNode(node))
.map((node) => node.id);
}
import { createEventDispatcher, setContext, onMount } from "svelte";
import { writable } from "svelte/store";
import TreeViewNodeList from "./TreeViewNodeList.svelte";
@ -105,6 +143,25 @@
}
});
/**
* @param {Array<TreeNode & { children?: TreeNode[] }>} children
*/
function traverse(children) {
let nodes = [];
children.forEach((node) => {
nodes.push(node);
if (Array.isArray(node.children)) {
nodes = [...nodes, ...traverse(node.children)];
}
});
return nodes;
}
$: nodes = traverse(children);
$: nodeIds = nodes.map((node) => node.id);
$: activeNodeId.set(activeId);
$: selectedNodeIds.set(selectedIds);
$: expandedNodeIds.set(expandedIds);

13
tests/TreeView.test.svelte
View file

@ -3,6 +3,7 @@
import type { TreeNodeId } from "../types/TreeView/TreeView";
import Analytics16 from "carbon-icons-svelte/lib/Analytics16";
let treeview: TreeView;
let activeId: TreeNodeId = "";
let selectedIds = [];
let expandedIds = [1];
@ -46,9 +47,21 @@
children: [{ id: 15, text: "IBM API Connect", disabled: true }],
},
];
$: if (treeview) {
treeview.expandAll();
treeview.expandNodes((node) => {
return node.id > 0;
});
treeview.collapseAll();
treeview.collapseNodes((node) => {
return node.disabled;
});
}
</script>
<TreeView
bind:this="{treeview}"
size="compact"
labelText="Cloud Products"
children="{children}"

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

@ -2,6 +2,12 @@
import { SvelteComponentTyped } from "svelte";
export interface CheckboxProps {
/**
* Specify the value of the checkbox
* @default ""
*/
value?: string;
/**
* Specify whether the checkbox is checked
* @default false

28
types/TreeView/TreeView.d.ts vendored
View file

@ -66,4 +66,30 @@ export default class TreeView extends SvelteComponentTyped<
keydown: WindowEventMap["keydown"];
},
{ labelText: {} }
> {}
> {
/**
* Programmatically expand all nodes
* @default () => { expandedIds = [...nodeIds]; }
*/
expandAll: () => void;
/**
* Programmatically collapse all nodes
* @default () => { expandedIds = []; }
*/
collapseAll: () => void;
/**
* Programmatically expand a subset of nodes.
* Expands all nodes if no argument is provided
* @default () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }
*/
expandNodes: (filterId?: (node: TreeNode) => boolean) => void;
/**
* Programmatically collapse a subset of nodes.
* Collapses all nodes if no argument is provided
* @default () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); }
*/
collapseNodes: (filterId?: (node: TreeNode) => boolean) => void;
}