@natachah/vanilla-frontend 0.1.4 → 0.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.
- package/docs/main.js +2 -2
- package/docs/pages/base/typography.html +4 -0
- package/docs/pages/components/button.html +16 -2
- package/docs/pages/components/card.html +2 -2
- package/docs/pages/components/dialog.html +13 -11
- package/docs/pages/components/form.html +25 -1
- package/docs/pages/components/list.html +2 -2
- package/docs/pages/javascript/{sidebar.html → drawer.html} +17 -16
- package/docs/pages/javascript/scroll.html +4 -4
- package/docs/pages/javascript/tabpanel.html +2 -2
- package/docs/pages/javascript/toggle.html +3 -3
- package/docs/pages/javascript/tree.html +89 -72
- package/docs/pages/quick-start/customization.html +95 -86
- package/docs/pages/quick-start/installation.html +1 -0
- package/docs/pages/quick-start/mixins.html +7 -7
- package/docs/src/js/doc-code.js +1 -1
- package/docs/src/js/doc-layout.js +2 -2
- package/js/{_sidebar.js → _drawer.js} +16 -15
- package/js/_toggle.js +2 -0
- package/js/_tree.js +9 -3
- package/js/tests/{sidebar.test.js → drawer.test.js} +27 -27
- package/js/tests/tree.test.js +11 -10
- package/js/utilities/_cookie.js +2 -2
- package/natachah-vanilla-frontend-0.1.6.tgz +0 -0
- package/package.json +1 -1
- package/scss/abstracts/_mixins.scss +2 -0
- package/scss/base/_reset.scss +12 -26
- package/scss/base/_typography.scss +3 -2
- package/scss/components/_button.scss +1 -1
- package/scss/components/_dropdown.scss +1 -1
- package/scss/components/_form.scss +8 -8
- package/scss/themes/_root.scss +8 -0
- package/natachah-vanilla-frontend-0.1.4.tgz +0 -0
package/docs/main.js
CHANGED
|
@@ -22,9 +22,9 @@ if (current.startsWith('/pages/')) document.querySelectorAll(`#sidebar a[href*="
|
|
|
22
22
|
})
|
|
23
23
|
|
|
24
24
|
// My awsome sidebar !!!
|
|
25
|
-
import
|
|
25
|
+
import Drawer from './../js/_drawer.js'
|
|
26
26
|
const sidebar = document.getElementById('sidebar')
|
|
27
|
-
if (sidebar) new
|
|
27
|
+
if (sidebar) new Drawer(sidebar)
|
|
28
28
|
|
|
29
29
|
// Code group
|
|
30
30
|
import Tabpanel from './../js/_tabpanel.js'
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
</doc-code>
|
|
120
120
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
121
121
|
$outline-variations: (
|
|
122
|
-
|
|
122
|
+
button
|
|
123
123
|
);
|
|
124
124
|
</doc-code>
|
|
125
125
|
</div>
|
|
@@ -145,11 +145,25 @@
|
|
|
145
145
|
</doc-code>
|
|
146
146
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
147
147
|
$color-variations: (
|
|
148
|
-
|
|
148
|
+
button: (primary)
|
|
149
149
|
);
|
|
150
150
|
</doc-code>
|
|
151
151
|
</div>
|
|
152
152
|
|
|
153
|
+
<h3>As link</h3>
|
|
154
|
+
|
|
155
|
+
<p>You can create a button that look as a simple link with the attribute <code>role="link"</code>.</p>
|
|
156
|
+
|
|
157
|
+
<doc-demo>
|
|
158
|
+
<button role="link">As link</button>
|
|
159
|
+
<button role="link" disabled>As disabled link</button>
|
|
160
|
+
</doc-demo>
|
|
161
|
+
|
|
162
|
+
<doc-code data-typ="html">
|
|
163
|
+
<button role="link">As link</button>
|
|
164
|
+
<button role="link" disabled>As disabled link</button>
|
|
165
|
+
</doc-code>
|
|
166
|
+
|
|
153
167
|
<h3>Group</h3>
|
|
154
168
|
<p>You can group some badge by putting them in a <code><div></code> with the class <code>.group</code>.</p>
|
|
155
169
|
|
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
</doc-code>
|
|
152
152
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
153
153
|
$outline-variations: (
|
|
154
|
-
|
|
154
|
+
card
|
|
155
155
|
);
|
|
156
156
|
</doc-code>
|
|
157
157
|
</div>
|
|
@@ -176,7 +176,7 @@
|
|
|
176
176
|
</doc-code>
|
|
177
177
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
178
178
|
$color-variations: (
|
|
179
|
-
|
|
179
|
+
card: (primary)
|
|
180
180
|
);
|
|
181
181
|
</doc-code>
|
|
182
182
|
</div>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<doc-demo>
|
|
28
28
|
<button aria-controls="demoDialog">Open the dialog</button>
|
|
29
29
|
<dialog id="demoDialog" class="demo-dialog">
|
|
30
|
-
<h3>Hey this is a dialog as non-modal !</h3>
|
|
30
|
+
<h3 tabindex="0">Hey this is a dialog as non-modal !</h3>
|
|
31
31
|
<p>Hello there !</p>
|
|
32
32
|
<button data-dialog-close>Close the dialog</button>
|
|
33
33
|
</dialog>
|
|
@@ -82,6 +82,8 @@
|
|
|
82
82
|
</doc-code>
|
|
83
83
|
</div>
|
|
84
84
|
|
|
85
|
+
<blockquote class="note">Add a <code>tabindex="0"</code> to the heading to focus on it when opened !</blockquote>
|
|
86
|
+
|
|
85
87
|
<p>To work properly you must have a <code><button></code> in your page with the attribute <code>aria-controls="IdOfDialogToOpen"</code> that will open the dialog.</p>
|
|
86
88
|
<p>And inside your <code><dialog></code> you should have a <code><button></code> with the attribute <code>data-dialog-close</code> to close the dialog.</p>
|
|
87
89
|
|
|
@@ -92,7 +94,7 @@
|
|
|
92
94
|
<doc-demo>
|
|
93
95
|
<button aria-controls="demoDialogLayout">Open the dialog</button>
|
|
94
96
|
<dialog id="demoDialogLayout" class="demo-dialog" aria-modal="true">
|
|
95
|
-
<header>This is a header</header>
|
|
97
|
+
<header tabindex="0">This is a header</header>
|
|
96
98
|
<div>
|
|
97
99
|
<p>This is the content</p>
|
|
98
100
|
<p>This dialog is a modal</p>
|
|
@@ -104,7 +106,7 @@
|
|
|
104
106
|
|
|
105
107
|
<doc-code>
|
|
106
108
|
<dialog id="myDialog" class="demo-dialog" aria-modal="true">
|
|
107
|
-
<header>This is a header</header>
|
|
109
|
+
<header tabindex="0">This is a header</header>
|
|
108
110
|
<div>
|
|
109
111
|
<p>This is the content</p>
|
|
110
112
|
<button data-dialog-close>Close</button>
|
|
@@ -182,11 +184,11 @@
|
|
|
182
184
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
183
185
|
const demoDialogFormJS = document.getElementById('myDialog')
|
|
184
186
|
if (demoDialogFormJS) {
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
187
|
+
new Dialog(demoDialogFormJS)
|
|
188
|
+
demoDialogFormJS.addEventListener('dialog:submited', (e) => {
|
|
189
|
+
const value = e.detail.form.querySelector('input').value
|
|
190
|
+
document.getElementById('favorite').innerText = value
|
|
191
|
+
})
|
|
190
192
|
}
|
|
191
193
|
</doc-code>
|
|
192
194
|
</div>
|
|
@@ -316,13 +318,13 @@
|
|
|
316
318
|
<doc-code data-type="js">
|
|
317
319
|
// E.G. basic opening
|
|
318
320
|
document.getElementById('myDialogID').addEventListener('dialog:opening', () => {
|
|
319
|
-
|
|
321
|
+
console.log('The dialog is opening')
|
|
320
322
|
})
|
|
321
323
|
|
|
322
324
|
// E.G. with form value
|
|
323
325
|
document.getElementById('myDialogID').addEventListener('dialog:submited', (e) => {
|
|
324
|
-
|
|
325
|
-
|
|
326
|
+
const theHTMLForm = e.detail.form
|
|
327
|
+
...
|
|
326
328
|
})
|
|
327
329
|
</doc-code>
|
|
328
330
|
|
|
@@ -77,6 +77,10 @@
|
|
|
77
77
|
<input type="file" name="file" accept="image/png, image/jpeg">
|
|
78
78
|
</doc-demo>
|
|
79
79
|
|
|
80
|
+
<blockquote class="info">
|
|
81
|
+
<p>You can change the icon via <code>var(--icon-file)</code>.</p>
|
|
82
|
+
</blockquote>
|
|
83
|
+
|
|
80
84
|
<p>The type <b>date</b>, <b>time</b> and <b>datetime-local</b> come with default icon.</p>
|
|
81
85
|
<doc-demo>
|
|
82
86
|
<input type="date" name="date">
|
|
@@ -84,6 +88,10 @@
|
|
|
84
88
|
<input type="datetime-local" name="datetime">
|
|
85
89
|
</doc-demo>
|
|
86
90
|
|
|
91
|
+
<blockquote class="info">
|
|
92
|
+
<p>You can change the icon via <code>var(--icon-date)</code> and <code>var(--icon-time)</code>.</p>
|
|
93
|
+
</blockquote>
|
|
94
|
+
|
|
87
95
|
<blockquote class="warning">
|
|
88
96
|
<p>Hard to make it 100% similar on all browser.</p>
|
|
89
97
|
</blockquote>
|
|
@@ -113,6 +121,10 @@
|
|
|
113
121
|
</select>
|
|
114
122
|
</doc-demo>
|
|
115
123
|
|
|
124
|
+
<blockquote class="info">
|
|
125
|
+
<p>You can change the icon via <code>var(--icon-select)</code>.</p>
|
|
126
|
+
</blockquote>
|
|
127
|
+
|
|
116
128
|
<h3>Range</h3>
|
|
117
129
|
<p>The <b>range</b> field look more like a progress bar.</p>
|
|
118
130
|
<doc-demo>
|
|
@@ -174,6 +186,10 @@
|
|
|
174
186
|
</fieldset>
|
|
175
187
|
</doc-code>
|
|
176
188
|
|
|
189
|
+
<blockquote class="info">
|
|
190
|
+
<p>You can change the icon via <code>var(--icon-radio)</code>.</p>
|
|
191
|
+
</blockquote>
|
|
192
|
+
|
|
177
193
|
<h3>Checkbox</h3>
|
|
178
194
|
<p>The <b>checkbox</b> field must be inside a <code><fieldset></code>.</p>
|
|
179
195
|
<p>By default the checkboxes are displayed inline.</p>
|
|
@@ -231,6 +247,10 @@
|
|
|
231
247
|
</fieldset>
|
|
232
248
|
</doc-code>
|
|
233
249
|
|
|
250
|
+
<blockquote class="info">
|
|
251
|
+
<p>You can change the icon via <code>var(--icon-check)</code>.</p>
|
|
252
|
+
</blockquote>
|
|
253
|
+
|
|
234
254
|
<h3>Switch</h3>
|
|
235
255
|
<p>The <b>checkbox</b> with the <code>role="switch"</code> attribute will render a switch component.</p>
|
|
236
256
|
<doc-demo>
|
|
@@ -240,6 +260,10 @@
|
|
|
240
260
|
<input type="checkbox" role="switch" id="switch" name="switch" value="true"> <label for="switch">I agree to the terms</label>
|
|
241
261
|
</doc-code>
|
|
242
262
|
|
|
263
|
+
<blockquote class="info">
|
|
264
|
+
<p>You can change the icon via <code>var(--icon-switch)</code>.</p>
|
|
265
|
+
</blockquote>
|
|
266
|
+
|
|
243
267
|
<h2>States</h2>
|
|
244
268
|
<p>The form fields can have multiple states as <code>:focus</code>, <code>:disabled</code>, <code>:readonly</code> and <code>:validation</code>.</p>
|
|
245
269
|
|
|
@@ -323,7 +347,7 @@
|
|
|
323
347
|
@use '@natachah/vanilla-frontend/scss/components/group';
|
|
324
348
|
</doc-code>
|
|
325
349
|
</div>
|
|
326
|
-
|
|
350
|
+
|
|
327
351
|
</doc-layout>
|
|
328
352
|
<script type="module" src="/main.js"></script>
|
|
329
353
|
</body>
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
</doc-code>
|
|
127
127
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
128
128
|
$outline-variations: (
|
|
129
|
-
|
|
129
|
+
list
|
|
130
130
|
);
|
|
131
131
|
</doc-code>
|
|
132
132
|
</div>
|
|
@@ -161,7 +161,7 @@
|
|
|
161
161
|
</doc-code>
|
|
162
162
|
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
163
163
|
$color-variations: (
|
|
164
|
-
|
|
164
|
+
list: (primary)
|
|
165
165
|
);
|
|
166
166
|
</doc-code>
|
|
167
167
|
</div>
|
|
@@ -4,19 +4,24 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="UTF-8" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Documentations: Javascript >
|
|
7
|
+
<title>Documentations: Javascript > Drawer</title>
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body data-preload>
|
|
11
11
|
<doc-layout>
|
|
12
12
|
|
|
13
|
-
<h1>
|
|
14
|
-
<p>The
|
|
13
|
+
<h1>Drawer</h1>
|
|
14
|
+
<p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
|
|
15
15
|
|
|
16
16
|
<h2>Javascript</h2>
|
|
17
|
-
<p>This component is only in javascript, to use it you must import the javascript file and create a new
|
|
17
|
+
<p>This component is only in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
|
|
18
18
|
<p>You can customize the breakpoint when initiate the component.</p>
|
|
19
|
-
<p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening.</p>
|
|
19
|
+
<p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content.</p>
|
|
20
|
+
|
|
21
|
+
<blockquote>
|
|
22
|
+
<p>Main use case are sidebar menu or main navigation menu.</p>
|
|
23
|
+
<p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
|
|
24
|
+
</blockquote>
|
|
20
25
|
|
|
21
26
|
<div class="code-group">
|
|
22
27
|
<div role="tablist">
|
|
@@ -25,23 +30,19 @@
|
|
|
25
30
|
</div>
|
|
26
31
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
27
32
|
<div id="backdrop"></div>
|
|
28
|
-
<button aria-expanded="false" aria-pressed="false" aria-controls="
|
|
29
|
-
<aside id="
|
|
30
|
-
<button aria-expanded="false" aria-pressed="false" aria-controls="
|
|
31
|
-
My
|
|
33
|
+
<button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
|
|
34
|
+
<aside id="drawer" tabindex="0" hidden>
|
|
35
|
+
<button aria-expanded="false" aria-pressed="false" aria-controls="drawer">Toggle</button>
|
|
36
|
+
My drawer
|
|
32
37
|
</aside>
|
|
33
38
|
</doc-code>
|
|
34
39
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
35
|
-
import
|
|
36
|
-
const
|
|
37
|
-
if (
|
|
40
|
+
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
|
|
41
|
+
const drawer = document.getElementById('drawer')
|
|
42
|
+
if (drawer) new Drawer(drawer, { breakpoint : 960 })
|
|
38
43
|
</doc-code>
|
|
39
44
|
</div>
|
|
40
45
|
|
|
41
|
-
<blockquote>
|
|
42
|
-
<p>This documentation use the sidebar as an exemple !</p>
|
|
43
|
-
</blockquote>
|
|
44
|
-
|
|
45
46
|
</doc-layout>
|
|
46
47
|
<script type="module" src="/main.js"></script>
|
|
47
48
|
</body>
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
<p>The scroll component make you able to add some <code><button></code> to go on the top or bottom of an element.</p>
|
|
15
15
|
<doc-demo>
|
|
16
16
|
<nav id="demoScrollNav">
|
|
17
|
-
<ul>
|
|
18
|
-
<li><a href="#target1" aria-current="location">One</a></li>
|
|
19
|
-
<li><a href="#target2">Two</a></li>
|
|
20
|
-
<li><a href="#target3">Three</a></li>
|
|
17
|
+
<ul class="list">
|
|
18
|
+
<li><a role="button" href="#target1" aria-current="location">One</a></li>
|
|
19
|
+
<li><a role="button" href="#target2">Two</a></li>
|
|
20
|
+
<li><a role="button" href="#target3">Three</a></li>
|
|
21
21
|
<li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
|
|
22
22
|
<li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
|
|
23
23
|
</ul>
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
<doc-code data-type="js">
|
|
77
77
|
const myPanel = document.getElementById('myPanel')
|
|
78
78
|
myPanel.addEventListener('tabpanel:changed', (e) => {
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
const thecurrentButton = e.detail.current
|
|
80
|
+
console.log('It has changed !')
|
|
81
81
|
})
|
|
82
82
|
</doc-code>
|
|
83
83
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
<p>The button must have an <code>aria-controls="IdOfElement"</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>
|
|
16
16
|
<doc-demo>
|
|
17
17
|
<button class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
|
|
18
|
-
<div id="collapse" hidden>
|
|
18
|
+
<div id="collapse" tabindex="0" hidden>
|
|
19
19
|
Hello there !
|
|
20
20
|
</div>
|
|
21
21
|
</doc-demo>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
29
29
|
<button id="toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
|
|
30
|
-
<div id="collapse" hidden>
|
|
30
|
+
<div id="collapse" tabindex="0" hidden>
|
|
31
31
|
Hello there !
|
|
32
32
|
</div>
|
|
33
33
|
</doc-code>
|
|
@@ -179,7 +179,7 @@
|
|
|
179
179
|
<doc-code data-type="js">
|
|
180
180
|
const myToggle = document.getElementById('myToggle')
|
|
181
181
|
myToggle.addEventListener('toggle:changed', () => {
|
|
182
|
-
|
|
182
|
+
console.log('It has changed !')
|
|
183
183
|
})
|
|
184
184
|
</doc-code>
|
|
185
185
|
|
|
@@ -10,28 +10,36 @@
|
|
|
10
10
|
<body data-preload>
|
|
11
11
|
<doc-layout>
|
|
12
12
|
|
|
13
|
+
<blockquote class="warning">
|
|
14
|
+
<p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p>
|
|
15
|
+
</blockquote>
|
|
16
|
+
|
|
13
17
|
<h1>Tree</h1>
|
|
14
18
|
<p>The tree component make you able to make a tree view by adding the <code>role="tree"</code> attribute on a <code><ul></code> or <code><ol></code> tag.</p>
|
|
15
19
|
<p>The <code><li></code> must have a <code>role="treeitem"</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>
|
|
16
20
|
<doc-demo>
|
|
17
|
-
<ul class="demo-tree"
|
|
18
|
-
<li
|
|
19
|
-
<li
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
<ul class="demo-tree">
|
|
22
|
+
<li>1: Lorem, ipsum</li>
|
|
23
|
+
<li>
|
|
24
|
+
<button role="link" aria-controls="treelist" aria-expanded="false">
|
|
25
|
+
1: Inventore, perspiciatis (Open)
|
|
26
|
+
</button>
|
|
27
|
+
<ul id="treelist" tabindex="0" hidden>
|
|
28
|
+
<li>2: Lorem</li>
|
|
29
|
+
<li>
|
|
30
|
+
<button role="link" aria-controls="subtreelist" aria-expanded="false">
|
|
31
|
+
2: Adipisci (Open)
|
|
32
|
+
</button>
|
|
33
|
+
<ul id="subtreelist" tabindex="0" hidden>
|
|
34
|
+
<li>3: Lorem</li>
|
|
35
|
+
<li>3: Adipisci</li>
|
|
36
|
+
<li>3: Facilis</li>
|
|
29
37
|
</ul>
|
|
30
38
|
</li>
|
|
31
|
-
<li
|
|
39
|
+
<li>1: Facilis</li>
|
|
32
40
|
</ul>
|
|
33
41
|
</li>
|
|
34
|
-
<li
|
|
42
|
+
<li>Dolor, quis</li>
|
|
35
43
|
</ul>
|
|
36
44
|
</doc-demo>
|
|
37
45
|
|
|
@@ -41,50 +49,58 @@
|
|
|
41
49
|
<button role="tab" aria-controls="js">JS</button>
|
|
42
50
|
</div>
|
|
43
51
|
<doc-code id="html" data-type="html" role="tabpanel">
|
|
44
|
-
<ul
|
|
45
|
-
<li
|
|
46
|
-
<li
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
<ul class="demo-tree">
|
|
53
|
+
<li>1: Lorem, ipsum</li>
|
|
54
|
+
<li>
|
|
55
|
+
<button role="link" aria-controls="treelist" aria-expanded="false">
|
|
56
|
+
1: Inventore, perspiciatis (Open)
|
|
57
|
+
</button>
|
|
58
|
+
<ul id="treelist" tabindex="0" hidden>
|
|
59
|
+
<li>2: Lorem</li>
|
|
60
|
+
<li>
|
|
61
|
+
<button role="link" aria-controls="subtreelist" aria-expanded="false">
|
|
62
|
+
2: Adipisci (Open)
|
|
63
|
+
</button>
|
|
64
|
+
<ul id="subtreelist" tabindex="0" hidden>
|
|
65
|
+
<li>3: Lorem</li>
|
|
66
|
+
<li>3: Adipisci</li>
|
|
67
|
+
<li>3: Facilis</li>
|
|
56
68
|
</ul>
|
|
57
69
|
</li>
|
|
58
|
-
<li
|
|
70
|
+
<li>1: Facilis</li>
|
|
59
71
|
</ul>
|
|
60
72
|
</li>
|
|
61
|
-
<li
|
|
73
|
+
<li>Dolor, quis</li>
|
|
62
74
|
</ul>
|
|
63
75
|
</doc-code>
|
|
64
76
|
<doc-code id="js" data-type="js" role="tabpanel">
|
|
65
77
|
import Tree from "@natachah/vanilla-frontend/js/_tree"
|
|
66
|
-
const treeList = document.
|
|
78
|
+
const treeList = document.querySelector('.demo-tree')
|
|
67
79
|
if (treeList) new Tree(treeList)
|
|
68
80
|
</doc-code>
|
|
69
81
|
</div>
|
|
70
82
|
|
|
83
|
+
<blockquote class="note">
|
|
84
|
+
<p>Into a <code><li></code> you must add a <code><button></code> to toggle the children, otherwise it will toggle if you click on any child.</p>
|
|
85
|
+
</blockquote>
|
|
86
|
+
|
|
71
87
|
<p>This can also be implemented on a <code><table></code> but it required the <code>role="treegrid"</code> attribute.</p>
|
|
72
88
|
<doc-demo>
|
|
73
|
-
<table class="demo-tree"
|
|
89
|
+
<table class="demo-tree">
|
|
74
90
|
<tbody>
|
|
75
91
|
<tr aria-level="1">
|
|
76
92
|
<td>1: Lorem, ipsum</td>
|
|
77
93
|
</tr>
|
|
78
|
-
<tr aria-level="1" aria-expanded="false" aria-
|
|
94
|
+
<tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
|
|
79
95
|
<td>1: Cum, dolorum (open me)</td>
|
|
80
96
|
</tr>
|
|
81
|
-
<tr id="row1" aria-level="2" hidden>
|
|
97
|
+
<tr id="row1" aria-level="2" tabindex="0" hidden>
|
|
82
98
|
<td>2: Lorem</td>
|
|
83
99
|
</tr>
|
|
84
|
-
<tr id="row2" aria-level="2" aria-expanded="false" aria-
|
|
100
|
+
<tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
|
|
85
101
|
<td>2: Quo (open me)</td>
|
|
86
102
|
</tr>
|
|
87
|
-
<tr id="row2-1" aria-level="3" hidden>
|
|
103
|
+
<tr id="row2-1" aria-level="3" tabindex="0" hidden>
|
|
88
104
|
<td>2.1: Quo</td>
|
|
89
105
|
</tr>
|
|
90
106
|
<tr id="row2-2" aria-level="3" hidden>
|
|
@@ -106,16 +122,16 @@
|
|
|
106
122
|
<tr aria-level="1">
|
|
107
123
|
<td>1: Lorem, ipsum</td>
|
|
108
124
|
</tr>
|
|
109
|
-
<tr aria-level="1" aria-expanded="false" aria-
|
|
110
|
-
<td>1: Cum, dolorum</td>
|
|
125
|
+
<tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
|
|
126
|
+
<td>1: Cum, dolorum (open me)</td>
|
|
111
127
|
</tr>
|
|
112
|
-
<tr id="row1" aria-level="2" hidden>
|
|
128
|
+
<tr id="row1" aria-level="2" tabindex="0" hidden>
|
|
113
129
|
<td>2: Lorem</td>
|
|
114
130
|
</tr>
|
|
115
|
-
<tr id="row2" aria-level="2" aria-expanded="false" aria-
|
|
116
|
-
<td>2: Quo</td>
|
|
131
|
+
<tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
|
|
132
|
+
<td>2: Quo (open me)</td>
|
|
117
133
|
</tr>
|
|
118
|
-
<tr id="row2-1" aria-level="3" hidden>
|
|
134
|
+
<tr id="row2-1" aria-level="3" tabindex="0" hidden>
|
|
119
135
|
<td>2.1: Quo</td>
|
|
120
136
|
</tr>
|
|
121
137
|
<tr id="row2-2" aria-level="3" hidden>
|
|
@@ -138,41 +154,42 @@
|
|
|
138
154
|
<h2>Handle</h2>
|
|
139
155
|
<p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>
|
|
140
156
|
<doc-demo>
|
|
141
|
-
<
|
|
142
|
-
<
|
|
143
|
-
<
|
|
144
|
-
<
|
|
145
|
-
<
|
|
146
|
-
|
|
147
|
-
</
|
|
148
|
-
</
|
|
149
|
-
|
|
150
|
-
</
|
|
151
|
-
<
|
|
152
|
-
<
|
|
153
|
-
<
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
</li>
|
|
157
|
-
</ul>
|
|
157
|
+
<table class="demo-tree">
|
|
158
|
+
<tbody>
|
|
159
|
+
<tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
|
|
160
|
+
<td>
|
|
161
|
+
<span data-handle="tree">
|
|
162
|
+
(open me)
|
|
163
|
+
</span>
|
|
164
|
+
</td>
|
|
165
|
+
<td>1: Cum, dolorum</td>
|
|
166
|
+
</tr>
|
|
167
|
+
<tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
|
|
168
|
+
<td></td>
|
|
169
|
+
<td>1.1: Lorem</td>
|
|
170
|
+
</tr>
|
|
171
|
+
</table>
|
|
158
172
|
</doc-demo>
|
|
159
173
|
|
|
160
174
|
<doc-code>
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
175
|
+
<table class="demo-tree">
|
|
176
|
+
<tbody>
|
|
177
|
+
<tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
|
|
178
|
+
<td>
|
|
179
|
+
<span data-handle="tree">
|
|
180
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
181
|
+
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
|
|
182
|
+
</svg>
|
|
183
|
+
(open me)
|
|
184
|
+
</span>
|
|
185
|
+
</td>
|
|
186
|
+
<td>1: Cum, dolorum</td>
|
|
187
|
+
</tr>
|
|
188
|
+
<tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
|
|
189
|
+
<td></td>
|
|
190
|
+
<td>1.1: Lorem</td>
|
|
191
|
+
</tr>
|
|
192
|
+
</table>
|
|
176
193
|
</doc-code>
|
|
177
194
|
|
|
178
195
|
<blockquote class="tip">
|