@digital-realty/ix-tree 2.0.6 → 3.0.1
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/IxTree.d.ts +0 -1
- package/dist/IxTree.js +8 -12
- package/dist/IxTree.js.map +1 -1
- package/dist/ix-tree.min.js +4 -0
- package/package.json +10 -6
package/dist/IxTree.d.ts
CHANGED
package/dist/IxTree.js
CHANGED
|
@@ -20,7 +20,6 @@ export class IxTree extends LitElement {
|
|
|
20
20
|
super.connectedCallback();
|
|
21
21
|
this._activeItemId = this.selectedNodeId; // store in state
|
|
22
22
|
this._selectedNodeId = this.selectedNodeId; // store in state
|
|
23
|
-
this._rootNode = this.rootNode;
|
|
24
23
|
}
|
|
25
24
|
onTreeNodeClick(e) {
|
|
26
25
|
this.dispatchEvent(new CustomEvent('on-tree-node-selected', {
|
|
@@ -38,21 +37,21 @@ export class IxTree extends LitElement {
|
|
|
38
37
|
}));
|
|
39
38
|
}
|
|
40
39
|
onTreeNodeToggle(e) {
|
|
41
|
-
const newRootNode = { ...this.
|
|
40
|
+
const newRootNode = { ...this.rootNode };
|
|
42
41
|
const { node } = e.detail.message;
|
|
43
42
|
node.expanded = !node.expanded;
|
|
44
|
-
this.
|
|
43
|
+
this.rootNode = newRootNode;
|
|
45
44
|
this._activeItemId = node.id;
|
|
46
45
|
this.dispatchTreeNodeExpandToggle(e);
|
|
47
46
|
this.requestUpdate();
|
|
48
47
|
}
|
|
49
48
|
onTreeNodeCheck(e) {
|
|
50
49
|
const { node } = e.detail.message;
|
|
51
|
-
updateNodeCheckedStatus(node, this.
|
|
50
|
+
updateNodeCheckedStatus(node, this.rootNode);
|
|
51
|
+
this.rootNode = structuredClone(this.rootNode);
|
|
52
52
|
this.dispatchEvent(new CustomEvent('on-tree-node-checked', {
|
|
53
53
|
detail: {
|
|
54
54
|
message: e.detail.message,
|
|
55
|
-
rootNode: this._rootNode,
|
|
56
55
|
},
|
|
57
56
|
}));
|
|
58
57
|
}
|
|
@@ -81,19 +80,19 @@ export class IxTree extends LitElement {
|
|
|
81
80
|
* Expand the active tree node and all of its parent nodes.
|
|
82
81
|
*/
|
|
83
82
|
expandActiveTreeNode() {
|
|
84
|
-
const nodeToSelect = findChildNodeById(this.
|
|
83
|
+
const nodeToSelect = findChildNodeById(this.rootNode, this._activeItemId) || this.rootNode;
|
|
85
84
|
let iteration = 0;
|
|
86
85
|
const MAX_ITERATIONS = 1000;
|
|
87
86
|
if (!nodeToSelect.parentId) {
|
|
88
87
|
return;
|
|
89
88
|
}
|
|
90
|
-
let node = findChildNodeById(this.
|
|
89
|
+
let node = findChildNodeById(this.rootNode, nodeToSelect.parentId);
|
|
91
90
|
while (node && iteration < MAX_ITERATIONS) {
|
|
92
91
|
node.expanded = true;
|
|
93
92
|
if (!node.parentId) {
|
|
94
93
|
break;
|
|
95
94
|
}
|
|
96
|
-
node = findChildNodeById(this.
|
|
95
|
+
node = findChildNodeById(this.rootNode, node.parentId);
|
|
97
96
|
iteration += 1;
|
|
98
97
|
}
|
|
99
98
|
}
|
|
@@ -104,7 +103,7 @@ export class IxTree extends LitElement {
|
|
|
104
103
|
class="ix-tree-container"
|
|
105
104
|
role="tree"
|
|
106
105
|
>
|
|
107
|
-
${this.renderNodes(this.
|
|
106
|
+
${this.renderNodes(this.rootNode.children, 0)}
|
|
108
107
|
</div>`;
|
|
109
108
|
}
|
|
110
109
|
}
|
|
@@ -127,9 +126,6 @@ __decorate([
|
|
|
127
126
|
__decorate([
|
|
128
127
|
state()
|
|
129
128
|
], IxTree.prototype, "_activeItemId", void 0);
|
|
130
|
-
__decorate([
|
|
131
|
-
state()
|
|
132
|
-
], IxTree.prototype, "_rootNode", void 0);
|
|
133
129
|
__decorate([
|
|
134
130
|
state()
|
|
135
131
|
], IxTree.prototype, "_selectedNodeId", void 0);
|
package/dist/IxTree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAI3B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;
|
|
1
|
+
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { nothing, html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport './ix-tree-node.js';\n\nexport type Appearance = 'filled' | 'filled-tonal' | 'outlined' | 'default';\n\nexport class IxTree extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n connectedCallback() {\n super.connectedCallback();\n\n this._activeItemId = this.selectedNodeId; // store in state\n this._selectedNodeId = this.selectedNodeId; // store in state\n }\n\n @property() ariaLabel: string = 'tree';\n\n @property({ type: Object }) rootNode!: IIxTreeNode;\n\n @property() selectedNodeId: string = '';\n\n @property({ type: Boolean }) checkboxesEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @state() private _activeItemId: string = '';\n\n @state() private _selectedNodeId: string = '';\n\n private onTreeNodeClick(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-selected', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n\n this._selectedNodeId = e.detail.message.id;\n }\n\n private dispatchTreeNodeExpandToggle(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-expand-toggle', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private onTreeNodeToggle(e: CustomEvent): void {\n const newRootNode = { ...this.rootNode };\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this.rootNode = newRootNode;\n this._activeItemId = node.id;\n this.dispatchTreeNodeExpandToggle(e);\n this.requestUpdate();\n }\n\n private onTreeNodeCheck(e: CustomEvent): void {\n const { node } = e.detail.message;\n updateNodeCheckedStatus(node, this.rootNode);\n this.rootNode = structuredClone(this.rootNode);\n this.dispatchEvent(\n new CustomEvent('on-tree-node-checked', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private renderNodes(\n nodes: Array<IIxTreeNode> = [],\n level: number = 0\n ): Array<TemplateResult<1>> {\n const renderedNodes: Array<TemplateResult<1>> = [];\n\n for (const node of nodes) {\n const renderedNode = html`<ix-tree-node\n .isActiveTreeNode=${this._activeItemId === node.id}\n .isExpanded=${!!node.expanded}\n .isSelected=${this._selectedNodeId === node.id}\n .level=${level}\n .node=${node}\n .checkboxEnabled=${this.checkboxesEnabled}\n .appearance=${this.appearance}\n @on-tree-node-click=${this.onTreeNodeClick}\n @on-tree-node-toggle=${this.onTreeNodeToggle}\n @on-tree-node-check=${this.onTreeNodeCheck}\n >\n ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n </ix-tree-node>`;\n renderedNodes.push(renderedNode);\n }\n\n return renderedNodes;\n }\n\n /**\n * Expand the active tree node and all of its parent nodes.\n */\n private expandActiveTreeNode(): void {\n const nodeToSelect =\n findChildNodeById(this.rootNode, this._activeItemId) || this.rootNode;\n\n let iteration = 0;\n const MAX_ITERATIONS = 1000;\n if (!nodeToSelect.parentId) {\n return;\n }\n let node: IIxTreeNode | null = findChildNodeById(\n this.rootNode,\n nodeToSelect.parentId\n );\n while (node && iteration < MAX_ITERATIONS) {\n node.expanded = true;\n if (!node.parentId) {\n break;\n }\n node = findChildNodeById(this.rootNode, node.parentId);\n iteration += 1;\n }\n }\n\n protected render(): TemplateResult<1> {\n this.expandActiveTreeNode();\n\n return html`<div\n aria-label=${this.ariaLabel}\n class=\"ix-tree-container\"\n role=\"tree\"\n >\n ${this.renderNodes(this.rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/theme";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(const i of e.children){var o=findChildNodeById(i,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o){!function t(e,o=!1){e.checked=o,e.indeterminate=!1,e.children&&e.children.forEach(e=>{t(e,o)})}(e,e.checked),function e(t){t.parentId&&(t=findChildNodeById(o,t.parentId))&&t.children&&(t.children.every(e=>e.checked)?(t.checked=!0,t.indeterminate=!1):t.children.some(e=>e.checked)||t.children.some(e=>e.indeterminate)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1),e(t))}(e)}const IxTreeStyles=css`:host,:host :root,:root{--_tree-icon-size:var(--ix-tree-icon-size, 2.4rem);--_tree-icon-spacing:var(--ix-tree-icon-spacing, 0.3rem);--md-icon-button-icon-color:var(
|
|
2
|
+
--ix-outline-color,
|
|
3
|
+
var(--ix-tree-icon-color) #6b7a8d
|
|
4
|
+
)}.wrapper{align-items:center;cursor:pointer;display:flex;border-left:3px solid transparent}.icon{display:flex;color:var(--ix-outline-color,var(--ix-tree-icon-color) #6b7a8d);margin-right:var(--_tree-icon-spacing,--ix-tree-icon-spacing);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-text-color,var(--ix-label-text-color,#092241));flex-grow:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.item-checkbox{display:flex;margin-right:var(--_tree-icon-spacing,--ix-tree-checkbox-spacing)}.selected{background-color:var(--ix-tree-active-background-color,rgba(20,86,224,.1));border-left:3px solid var(--ix-tree-active-border-color,var(--md-sys-color-primary))}`;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getIcon(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}render(){var e=this.isSelected?"selected":"",t=this.node.icon||"account_box";return html`<div ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" data-id="${this.node.id}" role="treeitem"><div class="wrapper ${e}" style="padding-left:calc(var(--_tree-icon-size) * ${this.level})">${this.getIcon()} ${this.checkboxEnabled?html`<ix-checkbox @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`:nothing}<ix-icon class="icon">${t}</ix-icon><div class="label" @click="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}" @keyup="${()=>{this.checkboxEnabled?this.onNodeToggle(this.node):this.onNodeClick(this.node)}}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this._hasScrolledToActive||(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0)}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this.rootNode},o=e.detail.message["node"];o.expanded=!o.expanded,this.rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message["node"];updateNodeCheckedStatus(t,this.rootNode),this.rootNode=structuredClone(this.rootNode),this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o=[];for(const d of e){var i=html`<ix-tree-node .isActiveTreeNode="${this._activeItemId===d.id}" .isExpanded="${!!d.expanded}" .isSelected="${this._selectedNodeId===d.id}" .level="${t}" .node="${d}" .checkboxEnabled="${this.checkboxesEnabled}" .appearance="${this.appearance}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}">${d.expanded?this.renderNodes(d.children,t+1):nothing}</ix-tree-node>`;o.push(i)}return o}expandActiveTreeNode(){var t=findChildNodeById(this.rootNode,this._activeItemId)||this.rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this.rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this.rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this.rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property()],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property()],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);
|
package/package.json
CHANGED
|
@@ -3,13 +3,14 @@
|
|
|
3
3
|
"description": "Webcomponent ix-tree following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "
|
|
6
|
+
"version": "3.0.1",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
10
10
|
"exports": {
|
|
11
11
|
".": "./dist/index.js",
|
|
12
12
|
"./ix-tree.js": "./dist/ix-tree.js",
|
|
13
|
+
"./ix-tree.min.js": "./dist/ix-tree.min.js",
|
|
13
14
|
"./IxTree": "./dist/react/IxTree.js"
|
|
14
15
|
},
|
|
15
16
|
"publishConfig": {
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
},
|
|
18
19
|
"scripts": {
|
|
19
20
|
"analyze": "cem analyze --litelement",
|
|
20
|
-
"build": "tsc && npm run analyze -- --exclude dist",
|
|
21
|
+
"build": "tsc && npm run analyze -- --exclude dist && rollup -c",
|
|
21
22
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
22
23
|
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
23
24
|
"prepublish": "tsc && npm run analyze -- --exclude dist",
|
|
@@ -26,9 +27,9 @@
|
|
|
26
27
|
"test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@digital-realty/ix-checkbox": "^1.1.
|
|
30
|
-
"@digital-realty/ix-icon": "^1.0.
|
|
31
|
-
"@digital-realty/ix-icon-button": "^1.0.
|
|
30
|
+
"@digital-realty/ix-checkbox": "^1.1.26",
|
|
31
|
+
"@digital-realty/ix-icon": "^1.0.36",
|
|
32
|
+
"@digital-realty/ix-icon-button": "^1.0.37",
|
|
32
33
|
"@digital-realty/theme": "^1.0.27",
|
|
33
34
|
"@lit-labs/react": "^2.1.0",
|
|
34
35
|
"@material/web": "1.2.0",
|
|
@@ -49,6 +50,9 @@
|
|
|
49
50
|
"husky": "^4.3.8",
|
|
50
51
|
"lint-staged": "^10.5.4",
|
|
51
52
|
"prettier": "^2.4.1",
|
|
53
|
+
"rollup-plugin-minify-html-literals": "^1.2.6",
|
|
54
|
+
"rollup-plugin-summary": "^2.0.0",
|
|
55
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
52
56
|
"sinon": "^17.0.1",
|
|
53
57
|
"tslib": "^2.3.1",
|
|
54
58
|
"typescript": "^4.5.2"
|
|
@@ -101,5 +105,5 @@
|
|
|
101
105
|
"README.md",
|
|
102
106
|
"LICENSE"
|
|
103
107
|
],
|
|
104
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "6e0e0b61109e21b4713964da556c273ec23f63cb"
|
|
105
109
|
}
|