@operato/data-tree 7.1.1 → 7.1.6

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.
Files changed (24) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/src/index.d.ts +1 -0
  3. package/dist/src/index.js +1 -0
  4. package/dist/src/index.js.map +1 -1
  5. package/dist/src/ox-tree-horizontal.d.ts +21 -0
  6. package/dist/src/ox-tree-horizontal.js +262 -0
  7. package/dist/src/ox-tree-horizontal.js.map +1 -0
  8. package/dist/src/ox-tree-vertical.d.ts +1 -1
  9. package/dist/src/ox-tree-vertical.js +13 -6
  10. package/dist/src/ox-tree-vertical.js.map +1 -1
  11. package/dist/stories/data-tree-horizontal.stories.d.ts +28 -0
  12. package/dist/stories/data-tree-horizontal.stories.js +213 -0
  13. package/dist/stories/data-tree-horizontal.stories.js.map +1 -0
  14. package/dist/stories/data-tree-vertical.stories.d.ts +7 -1
  15. package/dist/stories/data-tree-vertical.stories.js +177 -84
  16. package/dist/stories/data-tree-vertical.stories.js.map +1 -1
  17. package/dist/tsconfig.tsbuildinfo +1 -1
  18. package/package.json +11 -4
  19. package/src/index.ts +1 -0
  20. package/src/ox-tree-horizontal.ts +260 -0
  21. package/src/ox-tree-vertical.ts +17 -8
  22. package/stories/data-tree-horizontal.stories.ts +231 -0
  23. package/stories/data-tree-vertical.stories.ts +183 -85
  24. package/themes/form-theme.css +0 -1
package/stories/data-tree-horizontal.stories.ts ADDED
@@ -0,0 +1,231 @@
1
+ import '../src/ox-tree-horizontal.js'
2
+ import '@material/web/icon/icon.js'
3
+
4
+ import { html, TemplateResult } from 'lit'
5
+
6
+ export default {
7
+ title: '3 modes in ox-tree-horizontal',
8
+ component: 'ox-tree-horizontal',
9
+ argTypes: {
10
+ data: { control: 'object' }
11
+ }
12
+ }
13
+
14
+ interface Story<T> {
15
+ (args: T): TemplateResult
16
+ args?: Partial<T>
17
+ argTypes?: Record<string, unknown>
18
+ }
19
+
20
+ type TreeItem = {
21
+ [key: string]: any
22
+ __status__?: { [state: string]: boolean | string }
23
+ }
24
+
25
+ interface ArgTypes {
26
+ data: Array<TreeItem>
27
+ }
28
+
29
+ const Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`
30
+ <link
31
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
32
+ rel="stylesheet"
33
+ />
34
+ <link
35
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
36
+ rel="stylesheet"
37
+ />
38
+ <link
39
+ href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
40
+ rel="stylesheet"
41
+ />
42
+
43
+ <link href="/themes/app-theme.css" rel="stylesheet" />
44
+ <link href="/themes/light.css" rel="stylesheet" />
45
+ <link href="/themes/dark.css" rel="stylesheet" />
46
+ <link href="/themes/spacing.css" rel="stylesheet" />
47
+ <link href="/themes/grist-theme.css" rel="stylesheet" />
48
+ <link href="/themes/form-theme.css" rel="stylesheet" />
49
+
50
+ <style>
51
+ ox-tree-horizontal {
52
+ height: 1000px;
53
+ }
54
+ </style>
55
+
56
+ <div>
57
+ <ox-tree-horizontal .data=${data} description-property="description"></ox-tree-horizontal>
58
+ </div>
59
+ `
60
+
61
+ export const Regular = Template.bind({})
62
+ Regular.args = {
63
+ data: [
64
+ {
65
+ id: 'H000',
66
+ label: 'Home',
67
+ children: [
68
+ {
69
+ id: 'H001',
70
+ label: 'About us',
71
+ children: [
72
+ {
73
+ id: 'H101',
74
+ label: 'Our history',
75
+ children: [
76
+ {
77
+ id: 'H111',
78
+ label: 'Founder',
79
+ description: 'long long founder history'
80
+ }
81
+ ]
82
+ },
83
+ {
84
+ id: 'H102',
85
+ label: 'Our board',
86
+ children: [
87
+ {
88
+ id: 'H121',
89
+ label: 'Brad Whiteman'
90
+ },
91
+ {
92
+ id: 'H122',
93
+ label: 'Cynthia Tolken'
94
+ },
95
+ {
96
+ id: 'H123',
97
+ label: 'Bobby Founderson'
98
+ }
99
+ ]
100
+ }
101
+ ]
102
+ },
103
+ {
104
+ id: 'H002',
105
+ label: 'Our products',
106
+ children: [
107
+ {
108
+ id: 'H201',
109
+ label: 'The Widget 2000™',
110
+ children: [
111
+ {
112
+ id: 'H211',
113
+ label: 'Order form'
114
+ }
115
+ ]
116
+ },
117
+ {
118
+ id: 'H202',
119
+ label: 'The McGuffin V2',
120
+ children: [
121
+ {
122
+ id: 'H221',
123
+ label: 'Order form'
124
+ }
125
+ ]
126
+ }
127
+ ]
128
+ },
129
+ {
130
+ id: 'H003',
131
+ label: 'Contact us',
132
+ children: [
133
+ {
134
+ id: 'H301',
135
+ label: 'Social media',
136
+ children: [
137
+ {
138
+ id: 'H311',
139
+ label: 'Facebook'
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ }
145
+ ]
146
+ },
147
+ {
148
+ id: 'H000',
149
+ label: 'Home',
150
+ children: [
151
+ {
152
+ id: 'H001',
153
+ label: 'About us',
154
+ children: [
155
+ {
156
+ id: 'H101',
157
+ label: 'Our history',
158
+ children: [
159
+ {
160
+ id: 'H111',
161
+ label: 'Founder',
162
+ description: 'long long founder history'
163
+ }
164
+ ]
165
+ },
166
+ {
167
+ id: 'H102',
168
+ label: 'Our board',
169
+ children: [
170
+ {
171
+ id: 'H121',
172
+ label: 'Brad Whiteman'
173
+ },
174
+ {
175
+ id: 'H122',
176
+ label: 'Cynthia Tolken'
177
+ },
178
+ {
179
+ id: 'H123',
180
+ label: 'Bobby Founderson'
181
+ }
182
+ ]
183
+ }
184
+ ]
185
+ },
186
+ {
187
+ id: 'H002',
188
+ label: 'Our products',
189
+ children: [
190
+ {
191
+ id: 'H201',
192
+ label: 'The Widget 2000™',
193
+ children: [
194
+ {
195
+ id: 'H211',
196
+ label: 'Order form'
197
+ }
198
+ ]
199
+ },
200
+ {
201
+ id: 'H202',
202
+ label: 'The McGuffin V2',
203
+ children: [
204
+ {
205
+ id: 'H221',
206
+ label: 'Order form'
207
+ }
208
+ ]
209
+ }
210
+ ]
211
+ },
212
+ {
213
+ id: 'H003',
214
+ label: 'Contact us',
215
+ children: [
216
+ {
217
+ id: 'H301',
218
+ label: 'Social media',
219
+ children: [
220
+ {
221
+ id: 'H311',
222
+ label: 'Facebook'
223
+ }
224
+ ]
225
+ }
226
+ ]
227
+ }
228
+ ]
229
+ }
230
+ ]
231
+ }
package/stories/data-tree-vertical.stories.ts CHANGED
@@ -17,8 +17,13 @@ interface Story<T> {
17
17
  argTypes?: Record<string, unknown>
18
18
  }
19
19
 
20
+ type TreeItem = {
21
+ [key: string]: any
22
+ __status__?: { [state: string]: boolean | string }
23
+ }
24
+
20
25
  interface ArgTypes {
21
- data: object
26
+ data: Array<TreeItem>
22
27
  }
23
28
 
24
29
  const Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`
@@ -42,92 +47,185 @@ const Template: Story<ArgTypes> = ({ data }: ArgTypes) => html`
42
47
  <link href="/themes/grist-theme.css" rel="stylesheet" />
43
48
  <link href="/themes/form-theme.css" rel="stylesheet" />
44
49
 
45
- <ox-tree-vertical .data=${data} description-property="description"></ox-tree-vertical>
50
+ <style>
51
+ ox-tree-vertical {
52
+ height: 500px;
53
+ }
54
+ </style>
55
+
56
+ <div>
57
+ <ox-tree-vertical .data=${data} description-property="description"></ox-tree-vertical>
58
+ </div>
46
59
  `
47
60
 
48
61
  export const Regular = Template.bind({})
49
62
  Regular.args = {
50
- data: {
51
- id: 'H000',
52
- label: 'Home',
53
- children: [
54
- {
55
- id: 'H001',
56
- label: 'About us',
57
- children: [
58
- {
59
- id: 'H101',
60
- label: 'Our history',
61
- children: [
62
- {
63
- id: 'H111',
64
- label: 'Founder',
65
- description: 'long long founder history'
66
- }
67
- ]
68
- },
69
- {
70
- id: 'H102',
71
- label: 'Our board',
72
- children: [
73
- {
74
- id: 'H121',
75
- label: 'Brad Whiteman'
76
- },
77
- {
78
- id: 'H122',
79
- label: 'Cynthia Tolken'
80
- },
81
- {
82
- id: 'H123',
83
- label: 'Bobby Founderson'
84
- }
85
- ]
86
- }
87
- ]
88
- },
89
- {
90
- id: 'H002',
91
- label: 'Our products',
92
- children: [
93
- {
94
- id: 'H201',
95
- label: 'The Widget 2000™',
96
- children: [
97
- {
98
- id: 'H211',
99
- label: 'Order form'
100
- }
101
- ]
102
- },
103
- {
104
- id: 'H202',
105
- label: 'The McGuffin V2',
106
- children: [
107
- {
108
- id: 'H221',
109
- label: 'Order form'
110
- }
111
- ]
112
- }
113
- ]
114
- },
115
- {
116
- id: 'H003',
117
- label: 'Contact us',
118
- children: [
119
- {
120
- id: 'H301',
121
- label: 'Social media',
122
- children: [
123
- {
124
- id: 'H311',
125
- label: 'Facebook'
126
- }
127
- ]
128
- }
129
- ]
130
- }
131
- ]
132
- }
63
+ data: [
64
+ {
65
+ id: 'H000',
66
+ label: 'Home',
67
+ children: [
68
+ {
69
+ id: 'H001',
70
+ label: 'About us',
71
+ children: [
72
+ {
73
+ id: 'H101',
74
+ label: 'Our history',
75
+ children: [
76
+ {
77
+ id: 'H111',
78
+ label: 'Founder',
79
+ description: 'long long founder history'
80
+ }
81
+ ]
82
+ },
83
+ {
84
+ id: 'H102',
85
+ label: 'Our board',
86
+ children: [
87
+ {
88
+ id: 'H121',
89
+ label: 'Brad Whiteman'
90
+ },
91
+ {
92
+ id: 'H122',
93
+ label: 'Cynthia Tolken'
94
+ },
95
+ {
96
+ id: 'H123',
97
+ label: 'Bobby Founderson'
98
+ }
99
+ ]
100
+ }
101
+ ]
102
+ },
103
+ {
104
+ id: 'H002',
105
+ label: 'Our products',
106
+ children: [
107
+ {
108
+ id: 'H201',
109
+ label: 'The Widget 2000™',
110
+ children: [
111
+ {
112
+ id: 'H211',
113
+ label: 'Order form'
114
+ }
115
+ ]
116
+ },
117
+ {
118
+ id: 'H202',
119
+ label: 'The McGuffin V2',
120
+ children: [
121
+ {
122
+ id: 'H221',
123
+ label: 'Order form'
124
+ }
125
+ ]
126
+ }
127
+ ]
128
+ },
129
+ {
130
+ id: 'H003',
131
+ label: 'Contact us',
132
+ children: [
133
+ {
134
+ id: 'H301',
135
+ label: 'Social media',
136
+ children: [
137
+ {
138
+ id: 'H311',
139
+ label: 'Facebook'
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ }
145
+ ]
146
+ },
147
+ {
148
+ id: 'H000',
149
+ label: 'Home',
150
+ children: [
151
+ {
152
+ id: 'H001',
153
+ label: 'About us',
154
+ children: [
155
+ {
156
+ id: 'H101',
157
+ label: 'Our history',
158
+ children: [
159
+ {
160
+ id: 'H111',
161
+ label: 'Founder',
162
+ description: 'long long founder history'
163
+ }
164
+ ]
165
+ },
166
+ {
167
+ id: 'H102',
168
+ label: 'Our board',
169
+ children: [
170
+ {
171
+ id: 'H121',
172
+ label: 'Brad Whiteman'
173
+ },
174
+ {
175
+ id: 'H122',
176
+ label: 'Cynthia Tolken'
177
+ },
178
+ {
179
+ id: 'H123',
180
+ label: 'Bobby Founderson'
181
+ }
182
+ ]
183
+ }
184
+ ]
185
+ },
186
+ {
187
+ id: 'H002',
188
+ label: 'Our products',
189
+ children: [
190
+ {
191
+ id: 'H201',
192
+ label: 'The Widget 2000™',
193
+ children: [
194
+ {
195
+ id: 'H211',
196
+ label: 'Order form'
197
+ }
198
+ ]
199
+ },
200
+ {
201
+ id: 'H202',
202
+ label: 'The McGuffin V2',
203
+ children: [
204
+ {
205
+ id: 'H221',
206
+ label: 'Order form'
207
+ }
208
+ ]
209
+ }
210
+ ]
211
+ },
212
+ {
213
+ id: 'H003',
214
+ label: 'Contact us',
215
+ children: [
216
+ {
217
+ id: 'H301',
218
+ label: 'Social media',
219
+ children: [
220
+ {
221
+ id: 'H311',
222
+ label: 'Facebook'
223
+ }
224
+ ]
225
+ }
226
+ ]
227
+ }
228
+ ]
229
+ }
230
+ ]
133
231
  }
package/themes/form-theme.css CHANGED
@@ -39,7 +39,6 @@ body {
39
39
  --file-uploader-label-color: #fff;
40
40
  --file-uploader-li-padding: 2px 5px 0px 5px;
41
41
  --file-uploader-li-border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
42
- --file-uploader-li-icon-margin: 2px 0 2px 5px;
43
42
  --file-uploader-li-icon-font: normal 15px var(--md-icon-font, 'Material Symbols Outlined');
44
43
  --file-uploader-li-icon-focus-color: var(--md-sys-color-primary);
45
44
  }