diff --git a/CHANGELOG.md b/CHANGELOG.md index 5ef69729..b645583a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [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** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index d646340f..a61e7263 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -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 | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | checked | let | Yes | boolean | false | Specify whether the checkbox is checked | +| value | let | No | string | "" | Specify the value of the checkbox | | indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | readonly | let | No | boolean | false | 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 | let | Yes | TreeNodeId[] | [] | Set the node ids to be expanded | -| selectedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be selected | -| activeId | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | let | No | Array | [] | Provide an array of children nodes to render | -| size | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :-------------------- | :------- | :------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | +| expandedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be expanded | +| selectedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be selected | +| activeId | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| children | let | No | Array | [] | Provide an array of children nodes to render | +| size | let | No | "default" | "compact" | "default" | Specify the TreeView size | +| labelText | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | +| collapseAll | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | +| expandNodes | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | ### Slots diff --git a/README.md b/README.md index 04edd37b..90854b14 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index ea62c0b5..0d746ed7 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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": [ diff --git a/docs/src/pages/components/PasswordInput.svx b/docs/src/pages/components/PasswordInput.svx index c22dd16e..7d90631a 100644 --- a/docs/src/pages/components/PasswordInput.svx +++ b/docs/src/pages/components/PasswordInput.svx @@ -1,3 +1,7 @@ +--- +source: TextInput/PasswordInput.svelte +--- + + +
+ +
+ + + + diff --git a/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte new file mode 100644 index 00000000..69bda008 --- /dev/null +++ b/docs/src/pages/framed/TreeView/TreeViewCollapseNodes.svelte @@ -0,0 +1,71 @@ + + +
+ +
+ + + + diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte new file mode 100644 index 00000000..ea10f4ac --- /dev/null +++ b/docs/src/pages/framed/TreeView/TreeViewExpandAll.svelte @@ -0,0 +1,61 @@ + + +
+ +
+ + + + diff --git a/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte new file mode 100644 index 00000000..0c1efeb3 --- /dev/null +++ b/docs/src/pages/framed/TreeView/TreeViewExpandNodes.svelte @@ -0,0 +1,67 @@ + + +
+ +
+ + + + diff --git a/package.json b/package.json index f65231b1..8411860e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/preprocess/api.json b/preprocess/api.json index b997622a..d92c09df 100644 --- a/preprocess/api.json +++ b/preprocess/api.json @@ -1,5 +1,5 @@ { - "version": "0.44.5", + "version": "0.45.0", "components": { "Accordion": { "path": "carbon-components-svelte/src/Accordion/Accordion.svelte" diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte index 41af3a8a..bf2a00a1 100644 --- a/src/Checkbox/Checkbox.svelte +++ b/src/Checkbox/Checkbox.svelte @@ -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 @@ !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 }); diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index 699a4898..7e36da2e 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -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} 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); diff --git a/tests/TreeView.test.svelte b/tests/TreeView.test.svelte index 67308296..69e8e60a 100644 --- a/tests/TreeView.test.svelte +++ b/tests/TreeView.test.svelte @@ -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; + }); + } {} +> { + /** + * 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; +}