@ni/nimble-components 18.12.1 → 18.12.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +99 -116
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +279 -279
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/tree-item/index.d.ts +2 -9
- package/dist/esm/tree-item/index.js +10 -46
- package/dist/esm/tree-item/index.js.map +1 -1
- package/dist/esm/tree-view/index.d.ts +5 -0
- package/dist/esm/tree-view/index.js +26 -2
- package/dist/esm/tree-view/index.js.map +1 -1
- package/dist/esm/tree-view/template.d.ts +2 -0
- package/dist/esm/tree-view/template.js +17 -0
- package/dist/esm/tree-view/template.js.map +1 -0
- package/package.json +2 -2
|
@@ -15,16 +15,9 @@ declare global {
|
|
|
15
15
|
*
|
|
16
16
|
*/
|
|
17
17
|
export declare class TreeItem extends FoundationTreeItem {
|
|
18
|
-
private treeView;
|
|
19
|
-
connectedCallback(): void;
|
|
20
|
-
disconnectedCallback(): void;
|
|
21
|
-
private readonly handleSelectedChange;
|
|
22
|
-
private clearTreeGroupSelection;
|
|
23
|
-
private setGroupSelectionOnRootParentTreeItem;
|
|
24
18
|
/**
|
|
25
|
-
*
|
|
26
|
-
* @returns the root tree view
|
|
19
|
+
* @internal
|
|
27
20
|
*/
|
|
28
|
-
|
|
21
|
+
groupSelected: boolean;
|
|
29
22
|
}
|
|
30
23
|
export declare const treeItemTag: string;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { attr } from '@microsoft/fast-element';
|
|
3
|
+
import { TreeItem as FoundationTreeItem, DesignSystem, treeItemTemplate as template } from '@microsoft/fast-foundation';
|
|
2
4
|
import { arrowExpanderUp16X16 } from '@ni/nimble-tokens/dist/icons/js';
|
|
3
|
-
import { groupSelectedAttribute } from '../tree-view/types';
|
|
4
5
|
import { styles } from './styles';
|
|
5
6
|
/**
|
|
6
7
|
* A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
|
|
@@ -15,52 +16,15 @@ import { styles } from './styles';
|
|
|
15
16
|
export class TreeItem extends FoundationTreeItem {
|
|
16
17
|
constructor() {
|
|
17
18
|
super(...arguments);
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
this.
|
|
22
|
-
// only process selection
|
|
23
|
-
if (event.target === this && this.selected) {
|
|
24
|
-
this.setGroupSelectionOnRootParentTreeItem(this);
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
connectedCallback() {
|
|
29
|
-
super.connectedCallback();
|
|
30
|
-
this.addEventListener('selected-change', this.handleSelectedChange);
|
|
31
|
-
this.treeView = this.getParentTreeView();
|
|
32
|
-
if (this.treeView && this.selected) {
|
|
33
|
-
this.setGroupSelectionOnRootParentTreeItem(this);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
disconnectedCallback() {
|
|
37
|
-
super.disconnectedCallback();
|
|
38
|
-
this.removeEventListener('selected-change', this.handleSelectedChange);
|
|
39
|
-
this.treeView = null;
|
|
40
|
-
}
|
|
41
|
-
clearTreeGroupSelection() {
|
|
42
|
-
const currentGroupSelection = this.treeView?.querySelectorAll(`[${groupSelectedAttribute}]`);
|
|
43
|
-
currentGroupSelection?.forEach(treeItem => treeItem.removeAttribute(groupSelectedAttribute));
|
|
44
|
-
}
|
|
45
|
-
setGroupSelectionOnRootParentTreeItem(treeItem) {
|
|
46
|
-
this.clearTreeGroupSelection();
|
|
47
|
-
let currentItem = treeItem;
|
|
48
|
-
while (currentItem?.parentElement !== this.treeView) {
|
|
49
|
-
currentItem = currentItem?.parentElement;
|
|
50
|
-
}
|
|
51
|
-
if (currentItem) {
|
|
52
|
-
currentItem.setAttribute(groupSelectedAttribute, 'true');
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
/**
|
|
56
|
-
* This was copied directly from the FAST TreeItem implementation
|
|
57
|
-
* @returns the root tree view
|
|
58
|
-
*/
|
|
59
|
-
getParentTreeView() {
|
|
60
|
-
const parentNode = this.parentElement.closest("[role='tree']");
|
|
61
|
-
return parentNode;
|
|
19
|
+
/**
|
|
20
|
+
* @internal
|
|
21
|
+
*/
|
|
22
|
+
this.groupSelected = false;
|
|
62
23
|
}
|
|
63
24
|
}
|
|
25
|
+
__decorate([
|
|
26
|
+
attr({ attribute: 'group-selected', mode: 'boolean' })
|
|
27
|
+
], TreeItem.prototype, "groupSelected", void 0);
|
|
64
28
|
const nimbleTreeItem = TreeItem.compose({
|
|
65
29
|
baseName: 'tree-item',
|
|
66
30
|
baseClass: FoundationTreeItem,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-item/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,QAAQ,IAAI,kBAAkB,EAE9B,YAAY,EACZ,gBAAgB,IAAI,QAAQ,EAC/B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAAhD;;QACI;;WAEG;QAEI,kBAAa,GAAG,KAAK,CAAC;IACjC,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAGjC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,WAAW;IACrB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,mBAAmB,EAAE,oBAAoB,CAAC,IAAI;CACjD,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC"}
|
|
@@ -17,8 +17,13 @@ declare global {
|
|
|
17
17
|
*/
|
|
18
18
|
export declare class TreeView extends FoundationTreeView {
|
|
19
19
|
selectionMode: TreeViewSelectionMode;
|
|
20
|
+
/**
|
|
21
|
+
* @internal
|
|
22
|
+
*/
|
|
23
|
+
selectedItems: Element[];
|
|
20
24
|
handleClick(e: Event): boolean;
|
|
21
25
|
private canSelect;
|
|
22
26
|
private itemHasChildren;
|
|
27
|
+
private selectedItemsChanged;
|
|
23
28
|
}
|
|
24
29
|
export declare const treeViewTag: string;
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { attr } from '@microsoft/fast-element';
|
|
3
|
-
import {
|
|
2
|
+
import { attr, observable } from '@microsoft/fast-element';
|
|
3
|
+
import { TreeView as FoundationTreeView, DesignSystem, isTreeItemElement } from '@microsoft/fast-foundation';
|
|
4
|
+
import { TreeItem } from '../tree-item';
|
|
4
5
|
import { styles } from './styles';
|
|
6
|
+
import { template } from './template';
|
|
5
7
|
import { TreeViewSelectionMode } from './types';
|
|
6
8
|
/**
|
|
7
9
|
* A function that returns a nimble-tree-view registration for configuring the component with a DesignSystem.
|
|
@@ -17,6 +19,10 @@ export class TreeView extends FoundationTreeView {
|
|
|
17
19
|
constructor() {
|
|
18
20
|
super(...arguments);
|
|
19
21
|
this.selectionMode = TreeViewSelectionMode.all;
|
|
22
|
+
/**
|
|
23
|
+
* @internal
|
|
24
|
+
*/
|
|
25
|
+
this.selectedItems = [];
|
|
20
26
|
}
|
|
21
27
|
handleClick(e) {
|
|
22
28
|
if (e.defaultPrevented) {
|
|
@@ -55,10 +61,28 @@ export class TreeView extends FoundationTreeView {
|
|
|
55
61
|
const treeItemChild = item.querySelector('[role="treeitem"]');
|
|
56
62
|
return treeItemChild !== null;
|
|
57
63
|
}
|
|
64
|
+
selectedItemsChanged() {
|
|
65
|
+
for (const item of Array.from(this.children)) {
|
|
66
|
+
if (item instanceof TreeItem) {
|
|
67
|
+
item.groupSelected = false;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
for (let item of this.selectedItems) {
|
|
71
|
+
while (item.parentElement !== null && item.parentElement !== this) {
|
|
72
|
+
item = item.parentElement;
|
|
73
|
+
}
|
|
74
|
+
if (item instanceof TreeItem) {
|
|
75
|
+
item.groupSelected = true;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
58
79
|
}
|
|
59
80
|
__decorate([
|
|
60
81
|
attr({ attribute: 'selection-mode' })
|
|
61
82
|
], TreeView.prototype, "selectionMode", void 0);
|
|
83
|
+
__decorate([
|
|
84
|
+
observable
|
|
85
|
+
], TreeView.prototype, "selectedItems", void 0);
|
|
62
86
|
const nimbleTreeView = TreeView.compose({
|
|
63
87
|
baseName: 'tree-view',
|
|
64
88
|
baseClass: FoundationTreeView,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tree-view/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { children, html, ref, slotted } from '@microsoft/fast-element';
|
|
2
|
+
// prettier-ignore
|
|
3
|
+
export const template = html `
|
|
4
|
+
<template
|
|
5
|
+
role="tree"
|
|
6
|
+
${ref('treeView')}
|
|
7
|
+
${children({ property: 'selectedItems', subtree: true, selector: '[role="treeitem"][selected]', attributeFilter: ['role', 'selected'] })}
|
|
8
|
+
@keydown="${(x, c) => x.handleKeyDown(c.event)}"
|
|
9
|
+
@focusin="${(x, c) => x.handleFocus(c.event)}"
|
|
10
|
+
@focusout="${(x, c) => x.handleBlur(c.event)}"
|
|
11
|
+
@click="${(x, c) => x.handleClick(c.event)}"
|
|
12
|
+
@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
|
|
13
|
+
>
|
|
14
|
+
<slot ${slotted('slottedTreeItems')}></slot>
|
|
15
|
+
</template>
|
|
16
|
+
`;
|
|
17
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/tree-view/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAGvE,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAU;;;UAG5B,GAAG,CAAC,UAAU,CAAC;UACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,6BAA6B,EAAE,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,EAAE,CAAC;oBAC5H,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAsB,CAAC;oBACnD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;qBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAmB,CAAC;kBAChD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;4BACpC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;;gBAErD,OAAO,CAAC,kBAAkB,CAAC;;CAE1C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "18.12.
|
|
3
|
+
"version": "18.12.3",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@microsoft/fast-element": "^1.10.1",
|
|
62
62
|
"@microsoft/fast-foundation": "^2.47.1-0",
|
|
63
63
|
"@microsoft/fast-web-utilities": "^6.0.0",
|
|
64
|
-
"@ni/nimble-tokens": "^
|
|
64
|
+
"@ni/nimble-tokens": "^5.0.0",
|
|
65
65
|
"@tanstack/table-core": "^8.7.0",
|
|
66
66
|
"@tanstack/virtual-core": "^3.0.0-beta.44",
|
|
67
67
|
"@types/d3-array": "^3.0.4",
|