@natachah/vanilla-frontend 0.0.3 → 0.0.4
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.
|
@@ -94,6 +94,24 @@
|
|
|
94
94
|
|
|
95
95
|
<p>To work properly the <code><button></code> of the dropdown must have an <code>aria-controls="IdOfTheContent"</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
|
|
96
96
|
|
|
97
|
+
<p>You can also add some buttons into the list to make them look as a vertical group.</p>
|
|
98
|
+
|
|
99
|
+
<doc-demo>
|
|
100
|
+
<div class="dropdown demo-dropdown">
|
|
101
|
+
<button aria-controls="mySecondDropdown" aria-expanded="false" aria-pressed="false">
|
|
102
|
+
Dropdown
|
|
103
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
104
|
+
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
|
|
105
|
+
</svg>
|
|
106
|
+
</button>
|
|
107
|
+
<ul id="mySecondDropdown" tabindex="0" style="--button-background: var(--color-body);" hidden>
|
|
108
|
+
<li><button>Button longer</button></li>
|
|
109
|
+
<li><button>Button</button></li>
|
|
110
|
+
<li><button>Button</button></li>
|
|
111
|
+
</ul>
|
|
112
|
+
</div>
|
|
113
|
+
</doc-demo>
|
|
114
|
+
|
|
97
115
|
<h2>States</h2>
|
|
98
116
|
|
|
99
117
|
<p>The <code><button></code> inside the dropdown will work as the default button component.</p>
|
|
@@ -208,7 +226,7 @@
|
|
|
208
226
|
|
|
209
227
|
<doc-code data-type="js">
|
|
210
228
|
new Toggle(myDropdown, {
|
|
211
|
-
|
|
229
|
+
closable:false
|
|
212
230
|
})
|
|
213
231
|
</doc-code>
|
|
214
232
|
|
|
@@ -243,8 +261,8 @@
|
|
|
243
261
|
<doc-code data-type="js">
|
|
244
262
|
const dropdown = document.getElementById('myDropdown')
|
|
245
263
|
dropdown.addEventListener('dropdown:changed', (e) => {
|
|
246
|
-
|
|
247
|
-
|
|
264
|
+
const value = e.detail.isOpen
|
|
265
|
+
console.log(value)
|
|
248
266
|
})
|
|
249
267
|
</doc-code>
|
|
250
268
|
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Documentations: Javascript > Tabpanel</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Tabpanel</h1>
|
|
14
|
+
<p>The tabpanel component make you able to make some elements visible by some <code><button></code>.</p>
|
|
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
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<div class="code-group">
|
|
20
|
+
<div role="tablist">
|
|
21
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
22
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
23
|
+
</div>
|
|
24
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
25
|
+
<div id="myPanel">
|
|
26
|
+
<div role="tablist">
|
|
27
|
+
<button role="tab" aria-controls="one">One</button>
|
|
28
|
+
<button role="tab" aria-controls="two">Two</button>
|
|
29
|
+
</div>
|
|
30
|
+
<div id="one" role="tabpanel">
|
|
31
|
+
This is the first panel
|
|
32
|
+
</div>
|
|
33
|
+
<div id="two" role="tabpanel">
|
|
34
|
+
This is the seconde panel
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</doc-code>
|
|
38
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
39
|
+
import Tabpanel from '@natachah/vanilla-frontend/js/_tabpanel.js'
|
|
40
|
+
const tabpanel = document.getElementById('myPanel')
|
|
41
|
+
if (tabpanel) new Tabpanel(tabpanel)
|
|
42
|
+
</doc-code>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<blockquote class="tip">
|
|
46
|
+
<p>These website use the Tabpanel to show you the code of each component !</p>
|
|
47
|
+
</blockquote>
|
|
48
|
+
|
|
49
|
+
<h2>Javascript</h2>
|
|
50
|
+
<p>To enable this component you need to import the javascript file and create a new Tabpanel object.</p>
|
|
51
|
+
|
|
52
|
+
<h3>Events</h3>
|
|
53
|
+
<table>
|
|
54
|
+
<thead>
|
|
55
|
+
<tr>
|
|
56
|
+
<th>Event</th>
|
|
57
|
+
<th>Description</th>
|
|
58
|
+
<th>Value</th>
|
|
59
|
+
</tr>
|
|
60
|
+
</thead>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr>
|
|
63
|
+
<td data-label="Event">
|
|
64
|
+
<p>tabpanel:changed</p>
|
|
65
|
+
</td>
|
|
66
|
+
<td data-label="Description">
|
|
67
|
+
<p>This event is fired when the panel as been changed</p>
|
|
68
|
+
</td>
|
|
69
|
+
<td data-label="Value">
|
|
70
|
+
<p><code>current</code> as a <code>HTMLElement</code> of the current button</p>
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
</tbody>
|
|
74
|
+
</table>
|
|
75
|
+
|
|
76
|
+
<doc-code data-type="js">
|
|
77
|
+
const myPanel = document.getElementById('myPanel')
|
|
78
|
+
myPanel.addEventListener('tabpanel:changed', (e) => {
|
|
79
|
+
const thecurrentButton = e.detail.current
|
|
80
|
+
console.log('It has changed !')
|
|
81
|
+
})
|
|
82
|
+
</doc-code>
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
</doc-layout>
|
|
86
|
+
<script type="module" src="/main.js"></script>
|
|
87
|
+
</body>
|
|
88
|
+
|
|
89
|
+
</html>
|
|
@@ -89,6 +89,7 @@ class DocLayout extends HTMLElement {
|
|
|
89
89
|
<li><a href="/pages/javascript/scroll.html">Scroll</a></li>
|
|
90
90
|
<li><a href="/pages/javascript/sidebar.html">Sidebar</a></li>
|
|
91
91
|
<li><a href="/pages/javascript/sortable.html">Sortable</a></li>
|
|
92
|
+
<li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
|
|
92
93
|
<li><a href="/pages/javascript/toggle.html">Toggle</a></li>
|
|
93
94
|
<li><a href="/pages/javascript/tree.html">Tree</a></li>
|
|
94
95
|
</ul>
|
package/js/_sortable.js
CHANGED
|
@@ -126,6 +126,9 @@ export default class Sortable extends BaseComponent {
|
|
|
126
126
|
// Check for errors
|
|
127
127
|
if (!(item instanceof HTMLElement)) throw new Error(ErrorMessage.instanceOf('item', 'HTMLElement'))
|
|
128
128
|
|
|
129
|
+
// Do nothing if there is NO current
|
|
130
|
+
if (!this._current) return
|
|
131
|
+
|
|
129
132
|
// Reset the current property
|
|
130
133
|
this._current = null
|
|
131
134
|
|
|
@@ -116,7 +116,8 @@ describe('#Drop()', () => {
|
|
|
116
116
|
|
|
117
117
|
test('Emmit the sortable:drop event', () => {
|
|
118
118
|
const eventSpy = vi.spyOn(fakeListSortable, 'emmitEvent')
|
|
119
|
-
|
|
119
|
+
fireEvent(fakeListItem, new MouseEvent('mousedown')) // First drag item
|
|
120
|
+
fireEvent(fakeListItem, new MouseEvent('dragstart')) // First drag item
|
|
120
121
|
fireEvent(fakeListItem, new MouseEvent('dragend'))
|
|
121
122
|
expect(eventSpy).toHaveBeenCalledWith('drop', { current: fakeListItem, items: fakeListSortable.items })
|
|
122
123
|
})
|
package/package.json
CHANGED
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
margin: 0;
|
|
126
126
|
|
|
127
127
|
// Simple item
|
|
128
|
-
&:not(:has(> a:first-child:last-child)) {
|
|
128
|
+
&:not(:has(> a:first-child:last-child, > button:first-child:last-child)) {
|
|
129
129
|
@include as-item($name, (), $properties);
|
|
130
130
|
}
|
|
131
131
|
|
|
@@ -135,15 +135,23 @@
|
|
|
135
135
|
@include as-item($name, $states, $properties);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
|
+
// Item with button
|
|
139
|
+
&:has(> button:first-child:last-child) > button {
|
|
140
|
+
width: 100%;
|
|
141
|
+
text-align: left;
|
|
142
|
+
}
|
|
143
|
+
|
|
138
144
|
// Remove extra border
|
|
139
145
|
& + *,
|
|
140
|
-
& + * > a
|
|
146
|
+
& + * > a,
|
|
147
|
+
& + * > button {
|
|
141
148
|
border-top: none !important;
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
// Remove radius on middle child
|
|
145
152
|
&:not(:first-child, :last-child),
|
|
146
|
-
&:not(:first-child, :last-child) > a
|
|
153
|
+
&:not(:first-child, :last-child) > a,
|
|
154
|
+
&:not(:first-child, :last-child) > button {
|
|
147
155
|
border-radius: 0 !important;
|
|
148
156
|
}
|
|
149
157
|
|
|
@@ -152,14 +160,16 @@
|
|
|
152
160
|
|
|
153
161
|
// Remove radius bottom on first child
|
|
154
162
|
&:first-child,
|
|
155
|
-
&:first-child > a
|
|
163
|
+
&:first-child > a,
|
|
164
|
+
&:first-child > button {
|
|
156
165
|
border-end-start-radius: 0 !important;
|
|
157
166
|
border-end-end-radius: 0 !important;
|
|
158
167
|
}
|
|
159
168
|
|
|
160
169
|
// Remove radius top on last child
|
|
161
170
|
&:last-child,
|
|
162
|
-
&:last-child > a
|
|
171
|
+
&:last-child > a,
|
|
172
|
+
&:last-child > button {
|
|
163
173
|
border-start-start-radius: 0 !important;
|
|
164
174
|
border-start-end-radius: 0 !important;
|
|
165
175
|
}
|