kempo-ui 0.0.6 → 0.0.7
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/docs/components/tree.html +89 -0
- package/docs/nav.inc.html +1 -0
- package/package.json +1 -1
- package/src/components/Tree.js +247 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Tree - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />
|
|
9
|
+
<link rel="stylesheet" href="../styles.css" />
|
|
10
|
+
<script type="module">
|
|
11
|
+
import Import from '../src/components/Import.js';
|
|
12
|
+
import Icon from '../src/components/Icon.js';
|
|
13
|
+
Import.replacements.root = '../';
|
|
14
|
+
Icon.pathToIcons = ['../icons'];
|
|
15
|
+
</script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<k-import src="../nav.inc.html"></k-import>
|
|
19
|
+
<h1 class="ta-center">Tree</h1>
|
|
20
|
+
<main>
|
|
21
|
+
<details class="b r mb">
|
|
22
|
+
<summary class="p">Table of Contents</summary>
|
|
23
|
+
<div class="m mt0 pl">
|
|
24
|
+
<h6>Examples</h6>
|
|
25
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#properties">Properties</a><br />
|
|
31
|
+
<a href="#methods">Methods</a><br />
|
|
32
|
+
</div>
|
|
33
|
+
</details>
|
|
34
|
+
|
|
35
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
36
|
+
<p>Create a tree using the <code>k-tree</code> component. Set your data by setting the <code>data</code> attribute.</p>
|
|
37
|
+
<div class="row -mx mb">
|
|
38
|
+
<div class="col d-span-6 m-span-12 px">
|
|
39
|
+
|
|
40
|
+
</div>
|
|
41
|
+
<div class="col d-span-6 m-span-12 px">
|
|
42
|
+
<k-tree id="myTree"></k-tree>
|
|
43
|
+
<script type="module">
|
|
44
|
+
import Tree from '../src/components/Tree.js';
|
|
45
|
+
|
|
46
|
+
const tree = document.getElementById('myTree');
|
|
47
|
+
const data = {
|
|
48
|
+
name: 'John Doe',
|
|
49
|
+
age: 30,
|
|
50
|
+
active: true,
|
|
51
|
+
hobbies: ['reading', 'coding'],
|
|
52
|
+
address: {
|
|
53
|
+
street: '123 Main St',
|
|
54
|
+
city: 'New York'
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
tree.data = data;
|
|
58
|
+
console.log('Tree element:', tree);
|
|
59
|
+
console.log('Tree data:', tree.data);
|
|
60
|
+
console.log('Tree.leafs:', Tree.leafs);
|
|
61
|
+
</script>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
66
|
+
|
|
67
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
68
|
+
<h6>Extends <a href="./component.html">Component</a></h6>
|
|
69
|
+
<h5>
|
|
70
|
+
<code>new Tree()</code><br />
|
|
71
|
+
<code>new Tree(<i>string</i> name)</code>
|
|
72
|
+
</h5>
|
|
73
|
+
|
|
74
|
+
<h4>Parameters</h4>
|
|
75
|
+
|
|
76
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
77
|
+
<ul>
|
|
78
|
+
<li><a href="./shadow-component.html">ShadowComponent</a></li>
|
|
79
|
+
</ul>
|
|
80
|
+
|
|
81
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
</main>
|
|
85
|
+
<div style="height:33vh"></div>
|
|
86
|
+
<script type="module" src="../src/components/Card.js"></script>
|
|
87
|
+
<script type="module" src="../src/components/Tree.js"></script>
|
|
88
|
+
</body>
|
|
89
|
+
</html>
|
package/docs/nav.inc.html
CHANGED
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
<a href="%%root%%components/theme-switcher.html">Theme Switcher</a>
|
|
43
43
|
<a href="%%root%%components/timestamp.html">Timestamp</a>
|
|
44
44
|
<a href="%%root%%components/toggle.html">Toggle</a>
|
|
45
|
+
<a href="%%root%%components/tree.html">Tree</a>
|
|
45
46
|
</div>
|
|
46
47
|
|
|
47
48
|
<h5 class="mb0">Base Components</h5>
|
package/package.json
CHANGED
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
import ShadowComponent from './ShadowComponent.js';
|
|
2
|
+
import { html, css } from '../lit-all.min.js';
|
|
3
|
+
import { boolExists } from '../utils/propConverters.js';
|
|
4
|
+
|
|
5
|
+
export default class Tree extends ShadowComponent {
|
|
6
|
+
/* Properties */
|
|
7
|
+
static properties = {
|
|
8
|
+
data: { type: Object },
|
|
9
|
+
editable: { type: Boolean, converter: boolExists, attribute: 'editable', reflect: true }
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
constructor(){
|
|
13
|
+
super();
|
|
14
|
+
this.data = null;
|
|
15
|
+
this.editable = false;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Rendering */
|
|
19
|
+
render(){
|
|
20
|
+
if(!this.data){
|
|
21
|
+
return html`<slot></slot>`;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if(typeof this.data === 'object' && this.data !== null){
|
|
25
|
+
return html`
|
|
26
|
+
<div class="tree-root">
|
|
27
|
+
${(Array.isArray(this.data)
|
|
28
|
+
? this.data.map((v, i) => [i, v])
|
|
29
|
+
: Object.entries(this.data)
|
|
30
|
+
).map(([key, value]) => Tree.renderValue(value, key))}
|
|
31
|
+
</div>
|
|
32
|
+
`;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
return html`
|
|
36
|
+
<div class="tree-root">
|
|
37
|
+
${Tree.renderValue(this.data)}
|
|
38
|
+
</div>
|
|
39
|
+
`;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Leaf Definitions */
|
|
43
|
+
static leafs = [];
|
|
44
|
+
|
|
45
|
+
static addLeaf = (...leafs) => {
|
|
46
|
+
leafs.forEach(leaf => Tree.leafs.unshift(leaf));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
/* Static Methods */
|
|
50
|
+
static renderValue(value, key = null){
|
|
51
|
+
const LeafClass = Tree.leafs.find(leaf => leaf.detect(value));
|
|
52
|
+
|
|
53
|
+
if(LeafClass){
|
|
54
|
+
const leaf = document.createElement(LeafClass.tagName);
|
|
55
|
+
leaf.value = value;
|
|
56
|
+
leaf.key = key;
|
|
57
|
+
return leaf;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
if(typeof value === 'object' && value !== null){
|
|
61
|
+
const branch = document.createElement('k-tree-branch');
|
|
62
|
+
branch.value = value;
|
|
63
|
+
branch.key = key;
|
|
64
|
+
return branch;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return html`<span class="primitive">${key !== null ? `${key}: ` : ''}${value}</span>`;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
window.customElements.define('k-tree', Tree);
|
|
72
|
+
|
|
73
|
+
export class TreeBranch extends ShadowComponent {
|
|
74
|
+
/* Properties */
|
|
75
|
+
static properties = {
|
|
76
|
+
value: { type: Object },
|
|
77
|
+
key: { type: String },
|
|
78
|
+
opened: { type: Boolean, converter: boolExists, reflect: true }
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
constructor(){
|
|
82
|
+
super();
|
|
83
|
+
this.value = null;
|
|
84
|
+
this.key = null;
|
|
85
|
+
this.opened = false;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Members */
|
|
89
|
+
get tree(){
|
|
90
|
+
return this.closest('k-tree');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
/* Event Handlers */
|
|
94
|
+
toggle = () => {
|
|
95
|
+
this.opened = !this.opened;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
/* Rendering */
|
|
99
|
+
render(){
|
|
100
|
+
const label = this.key !== null ? `${this.key}: ` : '';
|
|
101
|
+
const type = Array.isArray(this.value) ? 'Array' : 'Object';
|
|
102
|
+
|
|
103
|
+
return html`
|
|
104
|
+
<div class="branch">
|
|
105
|
+
<div class="branch-label" @click=${this.toggle}>
|
|
106
|
+
<span class="toggle">${this.opened ? '▼' : '▶'}</span>
|
|
107
|
+
${label}${type}
|
|
108
|
+
</div>
|
|
109
|
+
${this.opened ? html`
|
|
110
|
+
<div class="branch-content">
|
|
111
|
+
${this.value ? (Array.isArray(this.value)
|
|
112
|
+
? this.value.map((v, i) => [i, v])
|
|
113
|
+
: Object.entries(this.value)
|
|
114
|
+
).map(([key, value]) => Tree.renderValue(value, key)) : ''}
|
|
115
|
+
</div>
|
|
116
|
+
` : ''}
|
|
117
|
+
</div>
|
|
118
|
+
`;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
static styles = css`
|
|
122
|
+
:host{
|
|
123
|
+
display: block;
|
|
124
|
+
}
|
|
125
|
+
.branch-label{
|
|
126
|
+
cursor: pointer;
|
|
127
|
+
padding: 2px 4px;
|
|
128
|
+
}
|
|
129
|
+
.branch-label:hover{
|
|
130
|
+
background-color: var(--c_bg__alt, #f5f5f5);
|
|
131
|
+
}
|
|
132
|
+
.toggle{
|
|
133
|
+
display: inline-block;
|
|
134
|
+
width: 1rem;
|
|
135
|
+
}
|
|
136
|
+
.branch-content{
|
|
137
|
+
margin-left: 1.5rem;
|
|
138
|
+
}
|
|
139
|
+
`;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
window.customElements.define('k-tree-branch', TreeBranch);
|
|
143
|
+
export class TreeLeaf extends ShadowComponent {
|
|
144
|
+
/* Properties */
|
|
145
|
+
static properties = {
|
|
146
|
+
value: {},
|
|
147
|
+
key: { type: String },
|
|
148
|
+
opened: { reflect: true, type: Boolean, converter: boolExists }
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
constructor(){
|
|
152
|
+
super();
|
|
153
|
+
this.value = null;
|
|
154
|
+
this.key = null;
|
|
155
|
+
this.opened = false;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Members */
|
|
159
|
+
get tree(){
|
|
160
|
+
return this.closest('k-tree');
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Rendering */
|
|
164
|
+
render(){
|
|
165
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
166
|
+
return html`${label}<slot></slot>`;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Static Methods */
|
|
170
|
+
static detect = () => {
|
|
171
|
+
return false;
|
|
172
|
+
};
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
window.customElements.define('k-tree-leaf', TreeLeaf);
|
|
176
|
+
|
|
177
|
+
export class StringLeaf extends TreeLeaf {
|
|
178
|
+
/* Rendering */
|
|
179
|
+
render(){
|
|
180
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
181
|
+
return html`<span class="d-b">${label}<span class="tc-success">"${this.value}"</span></span>`;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
static detect = value => typeof value === 'string';
|
|
185
|
+
|
|
186
|
+
static tagName = 'k-tree-string-leaf';
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
window.customElements.define(StringLeaf.tagName, StringLeaf);
|
|
190
|
+
|
|
191
|
+
export class NumberLeaf extends TreeLeaf {
|
|
192
|
+
/* Rendering */
|
|
193
|
+
render(){
|
|
194
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
195
|
+
return html`<span class="d-b">${label}<span class="tc-primary">${this.value}</span></span>`;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
static detect = value => typeof value === 'number';
|
|
199
|
+
|
|
200
|
+
static tagName = 'k-tree-number-leaf';
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
window.customElements.define(NumberLeaf.tagName, NumberLeaf);
|
|
204
|
+
|
|
205
|
+
export class BooleanLeaf extends TreeLeaf {
|
|
206
|
+
/* Rendering */
|
|
207
|
+
render(){
|
|
208
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
209
|
+
return html`<span class="d-b">${label}<span class="${this.value ? 'tc-success' : 'tc-danger'}">${this.value}</span></span>`;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
static detect = value => typeof value === 'boolean';
|
|
213
|
+
|
|
214
|
+
static tagName = 'k-tree-boolean-leaf';
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
window.customElements.define(BooleanLeaf.tagName, BooleanLeaf);
|
|
218
|
+
|
|
219
|
+
export class NullLeaf extends TreeLeaf {
|
|
220
|
+
/* Rendering */
|
|
221
|
+
render(){
|
|
222
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
223
|
+
return html`<span class="d-b">${label}<span class="tc-muted">null</span></span>`;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
static detect = value => value === null;
|
|
227
|
+
|
|
228
|
+
static tagName = 'k-tree-null-leaf';
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
window.customElements.define(NullLeaf.tagName, NullLeaf);
|
|
232
|
+
|
|
233
|
+
export class UndefinedLeaf extends TreeLeaf {
|
|
234
|
+
/* Rendering */
|
|
235
|
+
render(){
|
|
236
|
+
const label = this.key !== null ? html`<span class="tc-muted">${this.key}: </span>` : '';
|
|
237
|
+
return html`<span class="d-b">${label}<span class="tc-muted">undefined</span></span>`;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
static detect = value => value === undefined;
|
|
241
|
+
|
|
242
|
+
static tagName = 'k-tree-undefined-leaf';
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
window.customElements.define(UndefinedLeaf.tagName, UndefinedLeaf);
|
|
246
|
+
|
|
247
|
+
Tree.addLeaf(UndefinedLeaf, NullLeaf, BooleanLeaf, NumberLeaf, StringLeaf);
|