@operato/data-tree 8.0.0-alpha.0 → 8.0.0-alpha.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/CHANGELOG.md +10 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-tree-horizontal.d.ts +21 -0
- package/dist/src/ox-tree-horizontal.js +262 -0
- package/dist/src/ox-tree-horizontal.js.map +1 -0
- package/dist/src/ox-tree-vertical.d.ts +1 -1
- package/dist/src/ox-tree-vertical.js +13 -6
- package/dist/src/ox-tree-vertical.js.map +1 -1
- package/dist/stories/data-tree-horizontal.stories.d.ts +28 -0
- package/dist/stories/data-tree-horizontal.stories.js +213 -0
- package/dist/stories/data-tree-horizontal.stories.js.map +1 -0
- package/dist/stories/data-tree-vertical.stories.d.ts +7 -1
- package/dist/stories/data-tree-vertical.stories.js +177 -84
- package/dist/stories/data-tree-vertical.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +10 -3
- package/src/index.ts +1 -0
- package/src/ox-tree-horizontal.ts +260 -0
- package/src/ox-tree-vertical.ts +17 -8
- package/stories/data-tree-horizontal.stories.ts +231 -0
- package/stories/data-tree-vertical.stories.ts +183 -85
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [8.0.0-alpha.1](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.0...v8.0.0-alpha.1) (2024-09-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### :bug: Bug Fix
|
|
10
|
+
|
|
11
|
+
* add ox-tree-horizontal ([770dab4](https://github.com/hatiolab/operato/commit/770dab4f143cdd522865bb04ba47c26d288329cb))
|
|
12
|
+
* add ox-tree-horizontal ([d723c42](https://github.com/hatiolab/operato/commit/d723c4283e56f5649660e067cc25416df81ca739))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
6
16
|
## [8.0.0-alpha.0](https://github.com/hatiolab/operato/compare/v7.1.1...v8.0.0-alpha.0) (2024-09-01)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @operato/data-tree
|
package/dist/src/index.d.ts
CHANGED
package/dist/src/index.js
CHANGED
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './ox-tree'\nexport * from './ox-tree-vertical'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ox-tree'\nexport * from './ox-tree-vertical'\nexport * from './ox-tree-horizontal'\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
type TreeItem = {
|
|
3
|
+
[key: string]: any;
|
|
4
|
+
__status__?: {
|
|
5
|
+
[state: string]: boolean | string;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
export declare class TreeViewHorizontal extends LitElement {
|
|
9
|
+
static styles: import("lit").CSSResult[];
|
|
10
|
+
data?: TreeItem | TreeItem[];
|
|
11
|
+
selected?: TreeItem;
|
|
12
|
+
idProperty: string;
|
|
13
|
+
labelProperty: string;
|
|
14
|
+
descriptionProperty?: string;
|
|
15
|
+
childrenProperty: string;
|
|
16
|
+
render(): TemplateResult<1>;
|
|
17
|
+
renderItem(item: TreeItem): TemplateResult;
|
|
18
|
+
onClickSelect(e: MouseEvent): void;
|
|
19
|
+
onClickSelectConfirm(e: MouseEvent): void;
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,262 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, css, LitElement, nothing } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
5
|
+
let TreeViewHorizontal = class TreeViewHorizontal extends LitElement {
|
|
6
|
+
constructor() {
|
|
7
|
+
super(...arguments);
|
|
8
|
+
this.idProperty = 'id';
|
|
9
|
+
this.labelProperty = 'label';
|
|
10
|
+
this.childrenProperty = 'children';
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
13
|
+
if (!this.data)
|
|
14
|
+
return html ``;
|
|
15
|
+
const dataArray = Array.isArray(this.data) ? this.data : [this.data];
|
|
16
|
+
return html `
|
|
17
|
+
${dataArray.map(root => html `
|
|
18
|
+
<ul root>
|
|
19
|
+
${this.renderItem(root)}
|
|
20
|
+
</ul>
|
|
21
|
+
`)}
|
|
22
|
+
`;
|
|
23
|
+
}
|
|
24
|
+
renderItem(item) {
|
|
25
|
+
var _a;
|
|
26
|
+
const id = item[this.idProperty];
|
|
27
|
+
const label = item[this.labelProperty];
|
|
28
|
+
const children = item[this.childrenProperty];
|
|
29
|
+
const expandable = children && children.length > 0;
|
|
30
|
+
const selected = id === ((_a = this.selected) === null || _a === void 0 ? void 0 : _a[this.idProperty]);
|
|
31
|
+
return html `
|
|
32
|
+
<li .item=${item}>
|
|
33
|
+
<span
|
|
34
|
+
?selected=${selected}
|
|
35
|
+
@click=${this.onClickSelect.bind(this)}
|
|
36
|
+
@dblclick=${this.onClickSelectConfirm.bind(this)}
|
|
37
|
+
>
|
|
38
|
+
<div header>${id}</div>
|
|
39
|
+
<div label>${label}</div>
|
|
40
|
+
${this.descriptionProperty ? html ` <div description>${item[this.descriptionProperty]} </div>` : nothing}
|
|
41
|
+
</span>
|
|
42
|
+
|
|
43
|
+
${expandable
|
|
44
|
+
? html `
|
|
45
|
+
<ul>
|
|
46
|
+
${children.map(child => this.renderItem(child))}
|
|
47
|
+
</ul>
|
|
48
|
+
`
|
|
49
|
+
: html ``}
|
|
50
|
+
</li>
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
53
|
+
onClickSelect(e) {
|
|
54
|
+
var _a;
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
const target = e.target;
|
|
57
|
+
this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
|
|
58
|
+
this.dispatchEvent(new CustomEvent('select', {
|
|
59
|
+
detail: this.selected
|
|
60
|
+
}));
|
|
61
|
+
}
|
|
62
|
+
onClickSelectConfirm(e) {
|
|
63
|
+
var _a;
|
|
64
|
+
e.stopPropagation();
|
|
65
|
+
const target = e.target;
|
|
66
|
+
this.selected = (_a = target.closest('li')) === null || _a === void 0 ? void 0 : _a.item;
|
|
67
|
+
this.dispatchEvent(new CustomEvent('select-confirm', {
|
|
68
|
+
detail: this.selected
|
|
69
|
+
}));
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
TreeViewHorizontal.styles = [
|
|
73
|
+
ScrollbarStyles,
|
|
74
|
+
css `
|
|
75
|
+
:host {
|
|
76
|
+
display: block;
|
|
77
|
+
overflow: auto;
|
|
78
|
+
padding: 1em;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
ul,
|
|
82
|
+
li {
|
|
83
|
+
list-style: none;
|
|
84
|
+
margin: 0;
|
|
85
|
+
padding: 0;
|
|
86
|
+
position: relative;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
ul[root] {
|
|
90
|
+
margin: 0 0 1em;
|
|
91
|
+
text-align: left;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
ul[root]:before {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
ul {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
align-items: flex-start;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
ul {
|
|
106
|
+
width: 100%;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
li {
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: row;
|
|
112
|
+
position: relative;
|
|
113
|
+
align-items: center;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
li:before,
|
|
117
|
+
li:after {
|
|
118
|
+
content: '';
|
|
119
|
+
position: absolute;
|
|
120
|
+
left: -1em;
|
|
121
|
+
border-left: 1px solid #666;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
li:before {
|
|
125
|
+
top: 0;
|
|
126
|
+
bottom: 50%;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
li:after {
|
|
130
|
+
top: 50%;
|
|
131
|
+
bottom: 0;
|
|
132
|
+
border-top: 1px solid #666;
|
|
133
|
+
width: 1em;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
ul[root] > li:after {
|
|
137
|
+
content: none;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
li:first-child:before {
|
|
141
|
+
top: 50%;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
li:last-child:after {
|
|
145
|
+
bottom: 50%;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
li > ul {
|
|
149
|
+
padding-left: 2em;
|
|
150
|
+
position: relative;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
li > ul:before {
|
|
154
|
+
content: '';
|
|
155
|
+
position: absolute;
|
|
156
|
+
top: 0;
|
|
157
|
+
bottom: -2px;
|
|
158
|
+
left: 0;
|
|
159
|
+
border-bottom: 1px solid #666;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
code,
|
|
163
|
+
span {
|
|
164
|
+
border: solid 0.1em #666;
|
|
165
|
+
border-radius: 0.2em;
|
|
166
|
+
display: inline-block;
|
|
167
|
+
margin: 0.3em 0;
|
|
168
|
+
position: relative;
|
|
169
|
+
min-width: 120px;
|
|
170
|
+
background-color: #f9f9f9;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
span[selected] {
|
|
174
|
+
color: var(--md-sys-color-on-tertiary);
|
|
175
|
+
background-color: var(--md-sys-color-tertiary);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
ul:before,
|
|
179
|
+
code:before,
|
|
180
|
+
span:before {
|
|
181
|
+
content: '';
|
|
182
|
+
width: 1em;
|
|
183
|
+
top: 50%;
|
|
184
|
+
position: absolute;
|
|
185
|
+
transform: translateY(-50%);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
ul:before {
|
|
189
|
+
left: -1em;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
code:before,
|
|
193
|
+
span:before {
|
|
194
|
+
left: -1.1em;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
ul[root] > li {
|
|
198
|
+
margin-left: 0;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
ul[root] > li:before,
|
|
202
|
+
ul[root] > li:after,
|
|
203
|
+
ul[root] > li > code:before,
|
|
204
|
+
ul[root] > li > span:before {
|
|
205
|
+
outline: none;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
span {
|
|
209
|
+
display: inline-block;
|
|
210
|
+
background-color: var(--md-sys-color-surface);
|
|
211
|
+
|
|
212
|
+
div[header] {
|
|
213
|
+
font-weight: bold;
|
|
214
|
+
font-size: 0.8em;
|
|
215
|
+
color: var(--md-sys-color-on-primary, #fff);
|
|
216
|
+
background-color: var(--md-sys-color-primary, #333);
|
|
217
|
+
padding: 0.5em 1em;
|
|
218
|
+
text-align: center;
|
|
219
|
+
width: 100%;
|
|
220
|
+
box-sizing: border-box;
|
|
221
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
div[label] {
|
|
225
|
+
font-size: 1em;
|
|
226
|
+
background-color: transparent;
|
|
227
|
+
padding: 0.5em;
|
|
228
|
+
text-align: left;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
div[description] {
|
|
232
|
+
font-size: 0.8em;
|
|
233
|
+
background-color: transparent;
|
|
234
|
+
padding: 0.5em;
|
|
235
|
+
text-align: left;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
`
|
|
239
|
+
];
|
|
240
|
+
__decorate([
|
|
241
|
+
property({ type: Object })
|
|
242
|
+
], TreeViewHorizontal.prototype, "data", void 0);
|
|
243
|
+
__decorate([
|
|
244
|
+
property({ type: Object })
|
|
245
|
+
], TreeViewHorizontal.prototype, "selected", void 0);
|
|
246
|
+
__decorate([
|
|
247
|
+
property({ type: String, attribute: 'id-property' })
|
|
248
|
+
], TreeViewHorizontal.prototype, "idProperty", void 0);
|
|
249
|
+
__decorate([
|
|
250
|
+
property({ type: String, attribute: 'label-property' })
|
|
251
|
+
], TreeViewHorizontal.prototype, "labelProperty", void 0);
|
|
252
|
+
__decorate([
|
|
253
|
+
property({ type: String, attribute: 'description-property' })
|
|
254
|
+
], TreeViewHorizontal.prototype, "descriptionProperty", void 0);
|
|
255
|
+
__decorate([
|
|
256
|
+
property({ type: String, attribute: 'children-property' })
|
|
257
|
+
], TreeViewHorizontal.prototype, "childrenProperty", void 0);
|
|
258
|
+
TreeViewHorizontal = __decorate([
|
|
259
|
+
customElement('ox-tree-horizontal')
|
|
260
|
+
], TreeViewHorizontal);
|
|
261
|
+
export { TreeViewHorizontal };
|
|
262
|
+
//# sourceMappingURL=ox-tree-horizontal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-tree-horizontal.js","sourceRoot":"","sources":["../../src/ox-tree-horizontal.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\ntype TreeItem = {\n [key: string]: any\n __status__?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree-horizontal')\nexport class TreeViewHorizontal extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: auto;\n padding: 1em;\n }\n\n ul,\n li {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n\n ul[root] {\n margin: 0 0 1em;\n text-align: left;\n }\n\n ul[root]:before {\n display: none;\n }\n\n ul {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n }\n\n ul {\n width: 100%;\n }\n\n li {\n display: flex;\n flex-direction: row;\n position: relative;\n align-items: center;\n }\n\n li:before,\n li:after {\n content: '';\n position: absolute;\n left: -1em;\n border-left: 1px solid #666;\n }\n\n li:before {\n top: 0;\n bottom: 50%;\n }\n\n li:after {\n top: 50%;\n bottom: 0;\n border-top: 1px solid #666;\n width: 1em;\n }\n\n ul[root] > li:after {\n content: none;\n }\n\n li:first-child:before {\n top: 50%;\n }\n\n li:last-child:after {\n bottom: 50%;\n }\n\n li > ul {\n padding-left: 2em;\n position: relative;\n }\n\n li > ul:before {\n content: '';\n position: absolute;\n top: 0;\n bottom: -2px;\n left: 0;\n border-bottom: 1px solid #666;\n }\n\n code,\n span {\n border: solid 0.1em #666;\n border-radius: 0.2em;\n display: inline-block;\n margin: 0.3em 0;\n position: relative;\n min-width: 120px;\n background-color: #f9f9f9;\n }\n\n span[selected] {\n color: var(--md-sys-color-on-tertiary);\n background-color: var(--md-sys-color-tertiary);\n }\n\n ul:before,\n code:before,\n span:before {\n content: '';\n width: 1em;\n top: 50%;\n position: absolute;\n transform: translateY(-50%);\n }\n\n ul:before {\n left: -1em;\n }\n\n code:before,\n span:before {\n left: -1.1em;\n }\n\n ul[root] > li {\n margin-left: 0;\n }\n\n ul[root] > li:before,\n ul[root] > li:after,\n ul[root] > li > code:before,\n ul[root] > li > span:before {\n outline: none;\n }\n\n span {\n display: inline-block;\n background-color: var(--md-sys-color-surface);\n\n div[header] {\n font-weight: bold;\n font-size: 0.8em;\n color: var(--md-sys-color-on-primary, #fff);\n background-color: var(--md-sys-color-primary, #333);\n padding: 0.5em 1em;\n text-align: center;\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n div[label] {\n font-size: 1em;\n background-color: transparent;\n padding: 0.5em;\n text-align: left;\n }\n\n div[description] {\n font-size: 0.8em;\n background-color: transparent;\n padding: 0.5em;\n text-align: left;\n }\n }\n `\n ]\n\n @property({ type: Object }) data?: TreeItem | TreeItem[]\n @property({ type: Object }) selected?: TreeItem\n @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'\n @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'\n @property({ type: String, attribute: 'description-property' }) descriptionProperty?: string\n @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'\n\n render() {\n if (!this.data) return html``\n\n const dataArray = Array.isArray(this.data) ? this.data : [this.data]\n\n return html`\n ${dataArray.map(\n root => html`\n <ul root>\n ${this.renderItem(root)}\n </ul>\n `\n )}\n `\n }\n\n renderItem(item: TreeItem): TemplateResult {\n const id = item[this.idProperty]\n const label = item[this.labelProperty]\n const children = item[this.childrenProperty] as TreeItem[]\n\n const expandable = children && children.length > 0\n const selected = id === this.selected?.[this.idProperty]\n\n return html`\n <li .item=${item}>\n <span\n ?selected=${selected}\n @click=${this.onClickSelect.bind(this)}\n @dblclick=${this.onClickSelectConfirm.bind(this)}\n >\n <div header>${id}</div>\n <div label>${label}</div>\n ${this.descriptionProperty ? html` <div description>${item[this.descriptionProperty]} </div>` : nothing}\n </span>\n\n ${expandable\n ? html`\n <ul>\n ${children.map(child => this.renderItem(child))}\n </ul>\n `\n : html``}\n </li>\n `\n }\n\n onClickSelect(e: MouseEvent) {\n e.stopPropagation()\n\n const target = e.target as HTMLElement\n this.selected = (target.closest('li') as any)?.item\n\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: this.selected\n })\n )\n }\n\n onClickSelectConfirm(e: MouseEvent) {\n e.stopPropagation()\n\n const target = e.target as HTMLElement\n this.selected = (target.closest('li') as any)?.item\n\n this.dispatchEvent(\n new CustomEvent('select-confirm', {\n detail: this.selected\n })\n )\n }\n}\n"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { __decorate } from "tslib";
|
|
3
3
|
import { html, css, LitElement, nothing } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
+
import { ScrollbarStyles } from '@operato/styles';
|
|
5
6
|
let TreeViewVertical = class TreeViewVertical extends LitElement {
|
|
6
7
|
constructor() {
|
|
7
8
|
super(...arguments);
|
|
@@ -10,13 +11,16 @@ let TreeViewVertical = class TreeViewVertical extends LitElement {
|
|
|
10
11
|
this.childrenProperty = 'children';
|
|
11
12
|
}
|
|
12
13
|
render() {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
if (!this.data)
|
|
15
|
+
return html ``;
|
|
16
|
+
const dataArray = Array.isArray(this.data) ? this.data : [this.data];
|
|
17
|
+
return html `
|
|
18
|
+
${dataArray.map(root => html `
|
|
15
19
|
<ul root>
|
|
16
|
-
${this.renderItem(
|
|
20
|
+
${this.renderItem(root)}
|
|
17
21
|
</ul>
|
|
18
|
-
`
|
|
19
|
-
|
|
22
|
+
`)}
|
|
23
|
+
`;
|
|
20
24
|
}
|
|
21
25
|
renderItem(item) {
|
|
22
26
|
var _a;
|
|
@@ -67,9 +71,11 @@ let TreeViewVertical = class TreeViewVertical extends LitElement {
|
|
|
67
71
|
}
|
|
68
72
|
};
|
|
69
73
|
TreeViewVertical.styles = [
|
|
74
|
+
ScrollbarStyles,
|
|
70
75
|
css `
|
|
71
76
|
:host {
|
|
72
77
|
display: block;
|
|
78
|
+
overflow: auto;
|
|
73
79
|
}
|
|
74
80
|
|
|
75
81
|
ul,
|
|
@@ -85,7 +91,8 @@ TreeViewVertical.styles = [
|
|
|
85
91
|
text-align: center;
|
|
86
92
|
}
|
|
87
93
|
|
|
88
|
-
ul[root]:before
|
|
94
|
+
ul[root]:before,
|
|
95
|
+
ul[root]:after {
|
|
89
96
|
display: none;
|
|
90
97
|
}
|
|
91
98
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-tree-vertical.js","sourceRoot":"","sources":["../../src/ox-tree-vertical.ts"],"names":[],"mappings":"AAAA,+DAA+D;;AAE/D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,KAAK,CAAA;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"ox-tree-vertical.js","sourceRoot":"","sources":["../../src/ox-tree-vertical.ts"],"names":[],"mappings":"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","sourcesContent":["/* Inspired by https://www.cssscript.com/clean-tree-diagram/ */\n\nimport { html, css, LitElement, TemplateResult, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\ntype TreeItem = {\n [key: string]: any\n __status__?: { [state: string]: boolean | string }\n}\n\n@customElement('ox-tree-vertical')\nexport class TreeViewVertical extends LitElement {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: block;\n overflow: auto;\n }\n\n ul,\n li {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n }\n\n ul[root] {\n margin: 0 0 1em;\n text-align: center;\n }\n\n ul[root]:before,\n ul[root]:after {\n display: none;\n }\n\n ul {\n display: table;\n }\n\n ul {\n width: 100%;\n }\n\n li {\n display: table-cell;\n padding: 1em 0;\n vertical-align: top;\n }\n\n li:before {\n outline: solid 1px #666;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n }\n\n li:first-child:before {\n left: 50%;\n }\n\n li:last-child:before {\n right: 50%;\n }\n\n code,\n span {\n border: solid 0.1em #666;\n border-radius: 0.2em;\n display: inline-block;\n margin: 0 0.2em 1em;\n position: relative;\n min-width: 120px;\n }\n\n span[selected] {\n color: var(--md-sys-color-on-tertiary);\n background-color: var(--md-sys-color-tertiary);\n }\n\n ul:before,\n code:before,\n span:before {\n outline: solid 1px #666;\n content: '';\n height: 1em;\n left: 50%;\n position: absolute;\n }\n\n ul:before {\n top: -1em;\n }\n\n code:before,\n span:before {\n top: -1.1em;\n }\n\n ul[root] > li {\n margin-top: 0;\n }\n\n ul[root] > li:before,\n ul[root] > li:after,\n ul[root] > li > code:before,\n ul[root] > li > span:before {\n outline: none;\n }\n\n span {\n display: inline-block;\n background-color: var(--md-sys-color-surface);\n\n div[header] {\n font-weight: bold;\n font-size: 0.8em;\n color: var(--md-sys-color-on-primary, #fff);\n background-color: var(--md-sys-color-primary, #333);\n padding: 0.5em 1em;\n text-align: center;\n width: 100%;\n box-sizing: border-box;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n }\n\n div[label] {\n font-size: 1em;\n background-color: transparent;\n padding: 0.5em;\n text-align: left;\n }\n\n div[description] {\n font-size: 0.8em;\n background-color: transparent;\n padding: 0.5em;\n text-align: left;\n }\n }\n `\n ]\n\n @property({ type: Object }) data?: TreeItem | TreeItem[]\n @property({ type: Object }) selected?: TreeItem\n @property({ type: String, attribute: 'id-property' }) idProperty: string = 'id'\n @property({ type: String, attribute: 'label-property' }) labelProperty: string = 'label'\n @property({ type: String, attribute: 'description-property' }) descriptionProperty?: string\n @property({ type: String, attribute: 'children-property' }) childrenProperty: string = 'children'\n\n render() {\n if (!this.data) return html``\n\n const dataArray = Array.isArray(this.data) ? this.data : [this.data]\n\n return html`\n ${dataArray.map(\n root => html`\n <ul root>\n ${this.renderItem(root)}\n </ul>\n `\n )}\n `\n }\n\n renderItem(item: TreeItem): TemplateResult {\n const id = item[this.idProperty]\n const label = item[this.labelProperty]\n const children = item[this.childrenProperty] as TreeItem[]\n\n const expandable = children && children.length > 0\n const selected = id === this.selected?.[this.idProperty]\n\n return html`\n <li .item=${item}>\n <span\n ?selected=${selected}\n @click=${this.onClickSelect.bind(this)}\n @dblclick=${this.onClickSelectConfirm.bind(this)}\n >\n <div header>${id}</div>\n <div label>${label}</div>\n ${this.descriptionProperty ? html` <div description>${item[this.descriptionProperty]} </div>` : nothing}\n </span>\n\n ${expandable\n ? html`\n <ul>\n ${children.map(child => this.renderItem(child))}\n </ul>\n `\n : html``}\n </li>\n `\n }\n\n onClickSelect(e: MouseEvent) {\n e.stopPropagation()\n\n const target = e.target as HTMLElement\n this.selected = (target.closest('li') as any)?.item\n\n this.dispatchEvent(\n new CustomEvent('select', {\n detail: this.selected\n })\n )\n }\n\n onClickSelectConfirm(e: MouseEvent) {\n e.stopPropagation()\n\n const target = e.target as HTMLElement\n this.selected = (target.closest('li') as any)?.item\n\n this.dispatchEvent(\n new CustomEvent('select-confirm', {\n detail: this.selected\n })\n )\n }\n}\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import '../src/ox-tree-horizontal.js';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
import { TemplateResult } from 'lit';
|
|
4
|
+
declare const _default: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: string;
|
|
7
|
+
argTypes: {
|
|
8
|
+
data: {
|
|
9
|
+
control: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
export default _default;
|
|
14
|
+
interface Story<T> {
|
|
15
|
+
(args: T): TemplateResult;
|
|
16
|
+
args?: Partial<T>;
|
|
17
|
+
argTypes?: Record<string, unknown>;
|
|
18
|
+
}
|
|
19
|
+
type TreeItem = {
|
|
20
|
+
[key: string]: any;
|
|
21
|
+
__status__?: {
|
|
22
|
+
[state: string]: boolean | string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
interface ArgTypes {
|
|
26
|
+
data: Array<TreeItem>;
|
|
27
|
+
}
|
|
28
|
+
export declare const Regular: Story<ArgTypes>;
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
import '../src/ox-tree-horizontal.js';
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
3
|
+
import { html } from 'lit';
|
|
4
|
+
export default {
|
|
5
|
+
title: '3 modes in ox-tree-horizontal',
|
|
6
|
+
component: 'ox-tree-horizontal',
|
|
7
|
+
argTypes: {
|
|
8
|
+
data: { control: 'object' }
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
const Template = ({ data }) => html `
|
|
12
|
+
<link
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
|
|
14
|
+
rel="stylesheet"
|
|
15
|
+
/>
|
|
16
|
+
<link
|
|
17
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
|
|
18
|
+
rel="stylesheet"
|
|
19
|
+
/>
|
|
20
|
+
<link
|
|
21
|
+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
|
|
22
|
+
rel="stylesheet"
|
|
23
|
+
/>
|
|
24
|
+
|
|
25
|
+
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
26
|
+
<link href="/themes/light.css" rel="stylesheet" />
|
|
27
|
+
<link href="/themes/dark.css" rel="stylesheet" />
|
|
28
|
+
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
29
|
+
<link href="/themes/grist-theme.css" rel="stylesheet" />
|
|
30
|
+
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
31
|
+
|
|
32
|
+
<style>
|
|
33
|
+
ox-tree-horizontal {
|
|
34
|
+
height: 1000px;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
|
|
38
|
+
<div>
|
|
39
|
+
<ox-tree-horizontal .data=${data} description-property="description"></ox-tree-horizontal>
|
|
40
|
+
</div>
|
|
41
|
+
`;
|
|
42
|
+
export const Regular = Template.bind({});
|
|
43
|
+
Regular.args = {
|
|
44
|
+
data: [
|
|
45
|
+
{
|
|
46
|
+
id: 'H000',
|
|
47
|
+
label: 'Home',
|
|
48
|
+
children: [
|
|
49
|
+
{
|
|
50
|
+
id: 'H001',
|
|
51
|
+
label: 'About us',
|
|
52
|
+
children: [
|
|
53
|
+
{
|
|
54
|
+
id: 'H101',
|
|
55
|
+
label: 'Our history',
|
|
56
|
+
children: [
|
|
57
|
+
{
|
|
58
|
+
id: 'H111',
|
|
59
|
+
label: 'Founder',
|
|
60
|
+
description: 'long long founder history'
|
|
61
|
+
}
|
|
62
|
+
]
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
id: 'H102',
|
|
66
|
+
label: 'Our board',
|
|
67
|
+
children: [
|
|
68
|
+
{
|
|
69
|
+
id: 'H121',
|
|
70
|
+
label: 'Brad Whiteman'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
id: 'H122',
|
|
74
|
+
label: 'Cynthia Tolken'
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
id: 'H123',
|
|
78
|
+
label: 'Bobby Founderson'
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
]
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
id: 'H002',
|
|
86
|
+
label: 'Our products',
|
|
87
|
+
children: [
|
|
88
|
+
{
|
|
89
|
+
id: 'H201',
|
|
90
|
+
label: 'The Widget 2000™',
|
|
91
|
+
children: [
|
|
92
|
+
{
|
|
93
|
+
id: 'H211',
|
|
94
|
+
label: 'Order form'
|
|
95
|
+
}
|
|
96
|
+
]
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
id: 'H202',
|
|
100
|
+
label: 'The McGuffin V2',
|
|
101
|
+
children: [
|
|
102
|
+
{
|
|
103
|
+
id: 'H221',
|
|
104
|
+
label: 'Order form'
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
]
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
id: 'H003',
|
|
112
|
+
label: 'Contact us',
|
|
113
|
+
children: [
|
|
114
|
+
{
|
|
115
|
+
id: 'H301',
|
|
116
|
+
label: 'Social media',
|
|
117
|
+
children: [
|
|
118
|
+
{
|
|
119
|
+
id: 'H311',
|
|
120
|
+
label: 'Facebook'
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
id: 'H000',
|
|
130
|
+
label: 'Home',
|
|
131
|
+
children: [
|
|
132
|
+
{
|
|
133
|
+
id: 'H001',
|
|
134
|
+
label: 'About us',
|
|
135
|
+
children: [
|
|
136
|
+
{
|
|
137
|
+
id: 'H101',
|
|
138
|
+
label: 'Our history',
|
|
139
|
+
children: [
|
|
140
|
+
{
|
|
141
|
+
id: 'H111',
|
|
142
|
+
label: 'Founder',
|
|
143
|
+
description: 'long long founder history'
|
|
144
|
+
}
|
|
145
|
+
]
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
id: 'H102',
|
|
149
|
+
label: 'Our board',
|
|
150
|
+
children: [
|
|
151
|
+
{
|
|
152
|
+
id: 'H121',
|
|
153
|
+
label: 'Brad Whiteman'
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
id: 'H122',
|
|
157
|
+
label: 'Cynthia Tolken'
|
|
158
|
+
},
|
|
159
|
+
{
|
|
160
|
+
id: 'H123',
|
|
161
|
+
label: 'Bobby Founderson'
|
|
162
|
+
}
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
]
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
id: 'H002',
|
|
169
|
+
label: 'Our products',
|
|
170
|
+
children: [
|
|
171
|
+
{
|
|
172
|
+
id: 'H201',
|
|
173
|
+
label: 'The Widget 2000™',
|
|
174
|
+
children: [
|
|
175
|
+
{
|
|
176
|
+
id: 'H211',
|
|
177
|
+
label: 'Order form'
|
|
178
|
+
}
|
|
179
|
+
]
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
id: 'H202',
|
|
183
|
+
label: 'The McGuffin V2',
|
|
184
|
+
children: [
|
|
185
|
+
{
|
|
186
|
+
id: 'H221',
|
|
187
|
+
label: 'Order form'
|
|
188
|
+
}
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
]
|
|
192
|
+
},
|
|
193
|
+
{
|
|
194
|
+
id: 'H003',
|
|
195
|
+
label: 'Contact us',
|
|
196
|
+
children: [
|
|
197
|
+
{
|
|
198
|
+
id: 'H301',
|
|
199
|
+
label: 'Social media',
|
|
200
|
+
children: [
|
|
201
|
+
{
|
|
202
|
+
id: 'H311',
|
|
203
|
+
label: 'Facebook'
|
|
204
|
+
}
|
|
205
|
+
]
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
]
|
|
210
|
+
}
|
|
211
|
+
]
|
|
212
|
+
};
|
|
213
|
+
//# sourceMappingURL=data-tree-horizontal.stories.js.map
|