@natachah/vanilla-frontend 0.0.2
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/.gitlab-ci.yml +40 -0
- package/LICENSE.md +7 -0
- package/README.md +11 -0
- package/docs/index.html +36 -0
- package/docs/main.js +32 -0
- package/docs/pages/components/badge.html +154 -0
- package/docs/pages/components/button.html +186 -0
- package/docs/pages/components/card.html +184 -0
- package/docs/pages/components/dialog.html +334 -0
- package/docs/pages/components/disclosure.html +310 -0
- package/docs/pages/components/dropdown.html +255 -0
- package/docs/pages/components/form.html +331 -0
- package/docs/pages/components/list.html +140 -0
- package/docs/pages/components/loading.html +58 -0
- package/docs/pages/components/media.html +130 -0
- package/docs/pages/components/nav.html +119 -0
- package/docs/pages/components/progress.html +47 -0
- package/docs/pages/components/slider.html +311 -0
- package/docs/pages/components/table.html +168 -0
- package/docs/pages/javascript/autofill.html +170 -0
- package/docs/pages/javascript/checkall.html +59 -0
- package/docs/pages/javascript/comfort.html +134 -0
- package/docs/pages/javascript/consent.html +112 -0
- package/docs/pages/javascript/cookie.html +81 -0
- package/docs/pages/javascript/form.html +199 -0
- package/docs/pages/javascript/scroll.html +209 -0
- package/docs/pages/javascript/sidebar.html +53 -0
- package/docs/pages/javascript/sortable.html +148 -0
- package/docs/pages/javascript/toggle.html +191 -0
- package/docs/pages/javascript/tree.html +221 -0
- package/docs/pages/layout/grid.html +201 -0
- package/docs/pages/layout/reset.html +53 -0
- package/docs/pages/layout/typography.html +324 -0
- package/docs/pages/quick-start/conventions.html +112 -0
- package/docs/pages/quick-start/customization.html +187 -0
- package/docs/pages/quick-start/installation.html +95 -0
- package/docs/pages/quick-start/mixins.html +228 -0
- package/docs/pages/test.html +15 -0
- package/docs/src/js/demo.js +98 -0
- package/docs/src/js/doc-code.js +102 -0
- package/docs/src/js/doc-demo.js +14 -0
- package/docs/src/js/doc-layout.js +108 -0
- package/docs/src/scss/demo.scss +77 -0
- package/docs/src/scss/layout.scss +160 -0
- package/docs/src/scss/style.scss +278 -0
- package/docs/vite.config.mjs +23 -0
- package/esbuild.mjs +25 -0
- package/js/_autofill.js +131 -0
- package/js/_check-all.js +77 -0
- package/js/_comfort.js +174 -0
- package/js/_consent.js +84 -0
- package/js/_dialog.js +164 -0
- package/js/_dropdown.js +101 -0
- package/js/_scroll.js +184 -0
- package/js/_sidebar.js +97 -0
- package/js/_slider.js +249 -0
- package/js/_sortable.js +143 -0
- package/js/_tabpanel.js +88 -0
- package/js/_toggle.js +123 -0
- package/js/_tree.js +85 -0
- package/js/tests/autofill.test.js +157 -0
- package/js/tests/base-component.test.js +108 -0
- package/js/tests/check-all.test.js +88 -0
- package/js/tests/comfort.test.js +219 -0
- package/js/tests/consent.test.js +84 -0
- package/js/tests/cookie.test.js +102 -0
- package/js/tests/dialog.test.js +189 -0
- package/js/tests/dropdown.test.js +115 -0
- package/js/tests/form-helper.test.js +155 -0
- package/js/tests/scroll.test.js +203 -0
- package/js/tests/sidebar.test.js +99 -0
- package/js/tests/slider.test.js +307 -0
- package/js/tests/sortable.test.js +124 -0
- package/js/tests/tabpanel.test.js +114 -0
- package/js/tests/toggle.test.js +190 -0
- package/js/tests/tree.test.js +165 -0
- package/js/utilities/_base-component.js +101 -0
- package/js/utilities/_cookie.js +98 -0
- package/js/utilities/_error.js +80 -0
- package/js/utilities/_form-helper.js +101 -0
- package/package.json +42 -0
- package/scss/_badge.scss +37 -0
- package/scss/_button.scss +34 -0
- package/scss/_card.scss +122 -0
- package/scss/_dialog.scss +116 -0
- package/scss/_disclosure.scss +101 -0
- package/scss/_dropdown.scss +68 -0
- package/scss/_form.scss +197 -0
- package/scss/_grid.scss +40 -0
- package/scss/_group.scss +57 -0
- package/scss/_list.scss +18 -0
- package/scss/_loading.scss +49 -0
- package/scss/_media.scss +37 -0
- package/scss/_nav.scss +72 -0
- package/scss/_progress.scss +40 -0
- package/scss/_slider.scss +35 -0
- package/scss/_table.scss +36 -0
- package/scss/utilities/_mixin.scss +322 -0
- package/scss/utilities/_reset.scss +145 -0
- package/scss/utilities/_typography.scss +107 -0
- package/scss/vanilla-frontend.scss +23 -0
- package/scss/variables/_root.scss +70 -0
- package/scss/variables/_setting.scss +63 -0
- package/vitest.config.js +7 -0
|
@@ -0,0 +1,311 @@
|
|
|
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: Components ></title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Slider</h1>
|
|
14
|
+
<p>The slider is using the a <code><div></code> tag with the class <code>.slider</code>.</p>
|
|
15
|
+
<p>Each slide must be a <code><div></code> with <code>role="tabpanel"</code> and <code>aria-hidden="true"</code> attributes.</p>
|
|
16
|
+
<doc-demo>
|
|
17
|
+
<div id="slider" class="slider demo-slider">
|
|
18
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
19
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
20
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
21
|
+
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
22
|
+
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
23
|
+
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
24
|
+
</div>
|
|
25
|
+
</doc-demo>
|
|
26
|
+
<div class="code-group">
|
|
27
|
+
<div role="tablist">
|
|
28
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
29
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
30
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
31
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
32
|
+
</div>
|
|
33
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
34
|
+
<div id="slider" class="slider">
|
|
35
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
36
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
37
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
38
|
+
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
39
|
+
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
40
|
+
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
41
|
+
</div>
|
|
42
|
+
</doc-code>
|
|
43
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
44
|
+
@import '@natachah/vanilla-frontend/scss/_slider';
|
|
45
|
+
</doc-code>
|
|
46
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
47
|
+
--slider-columns
|
|
48
|
+
--slider-gap
|
|
49
|
+
</doc-code>
|
|
50
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
51
|
+
import Slider from "@natachah/vanilla-frontend/js/_slider"
|
|
52
|
+
const slider = document.getElementById('slider')
|
|
53
|
+
if (slider) const mySliderObj = new Slider(sliderFade)
|
|
54
|
+
</doc-code>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<h2>Indicators</h2>
|
|
58
|
+
<p>You can create some indicators with a <code><div></code> tag with the <code>aria-controls="IdOfSlider"</code> and <code>role="tablist"</code> attributes.</p>
|
|
59
|
+
<p>Inside you must insert each slides indicators as <code><button></code> tag with <code>role="tab"</code>, <code>aria-controls="IdOfSlide"</code> and <code>aria-selected="false"</code> attributes.</p>
|
|
60
|
+
<doc-demo>
|
|
61
|
+
<div id="sliderTabs" class="slider demo-slider">
|
|
62
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
63
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
64
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
65
|
+
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
66
|
+
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
67
|
+
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
68
|
+
</div>
|
|
69
|
+
<div aria-controls="sliderTabs" role="tablist">
|
|
70
|
+
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
71
|
+
<button role="tab" aria-controls="slide2" aria-selected="false">2</button>
|
|
72
|
+
<button role="tab" aria-controls="slide3" aria-selected="false">3</button>
|
|
73
|
+
<button role="tab" aria-controls="slide4" aria-selected="false">4</button>
|
|
74
|
+
<button role="tab" aria-controls="slide5" aria-selected="false">5</button>
|
|
75
|
+
<button role="tab" aria-controls="slide6" aria-selected="false">6</button>
|
|
76
|
+
</div>
|
|
77
|
+
</doc-demo>
|
|
78
|
+
<doc-code>
|
|
79
|
+
<div aria-controls="slider" role="tablist">
|
|
80
|
+
<button role="tab" aria-controls="slide1" aria-selected="true">1</button>
|
|
81
|
+
<button role="tab" aria-controls="slide2" aria-selected="false">2</button>
|
|
82
|
+
<button role="tab" aria-controls="slide3" aria-selected="false">3</button>
|
|
83
|
+
<button role="tab" aria-controls="slide4" aria-selected="false">4</button>
|
|
84
|
+
<button role="tab" aria-controls="slide5" aria-selected="false">5</button>
|
|
85
|
+
<button role="tab" aria-controls="slide6" aria-selected="false">6</button>
|
|
86
|
+
</div>
|
|
87
|
+
</doc-code>
|
|
88
|
+
|
|
89
|
+
<h2>Navigation</h2>
|
|
90
|
+
<p>You can create some prev/next navigation with some <code><button></code> tag with the <code>aria-controls="IdOfSlider"</code> and <code>data-slider-prev</code> or <code>data-slider-next</code> attributes.</p>
|
|
91
|
+
<doc-demo>
|
|
92
|
+
<div id="sliderNav" class="slider demo-slider">
|
|
93
|
+
<div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://fakeimg.pl/760x506/?text=one" alt="Image 1"></div>
|
|
94
|
+
<div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=two" alt="Image 2"></div>
|
|
95
|
+
<div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=three" alt="Image 3"></div>
|
|
96
|
+
<div id="slide4" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=four" alt="Image 4"></div>
|
|
97
|
+
<div id="slide5" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=five" alt="Image 5"></div>
|
|
98
|
+
<div id="slide6" role="tabpanel" aria-hidden="true"><img src="https://fakeimg.pl/760x506/?text=six" alt="Image 6"></div>
|
|
99
|
+
</div>
|
|
100
|
+
<button aria-controls="sliderNav" data-slider-prev>previous</button>
|
|
101
|
+
<button aria-controls="sliderNav" data-slider-next>next</button>
|
|
102
|
+
</doc-demo>
|
|
103
|
+
<doc-code>
|
|
104
|
+
<button aria-controls="slider" data-slider-prev>previous</button>
|
|
105
|
+
<button aria-controls="slider" data-slider-next>next</button>
|
|
106
|
+
</doc-code>
|
|
107
|
+
|
|
108
|
+
<h2>Variants</h2>
|
|
109
|
+
<h3>Fade effect</h3>
|
|
110
|
+
<p>You can change the CSS and JS to create a sort of fade effect, but it's not optimal.</p>
|
|
111
|
+
<blockquote class="todo">
|
|
112
|
+
<p>This functionality is not working good on mobile and with prev/next arrow.</p>
|
|
113
|
+
</blockquote>
|
|
114
|
+
<doc-demo>
|
|
115
|
+
<div id="sliderFade" class="slider slider-fade-demo">
|
|
116
|
+
<div id="slide7" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/220/400/330" srcset="https://picsum.photos/id/220/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
117
|
+
<div id="slide8" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/221/400/330" srcset="https://picsum.photos/id/221/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
118
|
+
<div id="slide9" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/222/400/330" srcset="https://picsum.photos/id/222/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
119
|
+
</div>
|
|
120
|
+
</doc-demo>
|
|
121
|
+
<div class="code-group">
|
|
122
|
+
<div role="tablist">
|
|
123
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
124
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
125
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
126
|
+
</div>
|
|
127
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
128
|
+
<div id="mySlider" class="slider slider-fade-demo">
|
|
129
|
+
<div id="slide7" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/220/400/330" srcset="https://picsum.photos/id/220/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
130
|
+
<div id="slide8" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/221/400/330" srcset="https://picsum.photos/id/221/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
131
|
+
<div id="slide9" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/222/400/330" srcset="https://picsum.photos/id/222/800/660 2x" alt="My random image from lorem picsum"></div>
|
|
132
|
+
</div>
|
|
133
|
+
</doc-code>
|
|
134
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
135
|
+
.slider-fade-demo {
|
|
136
|
+
--image-width: 100%;
|
|
137
|
+
--image-ratio: 4/3;
|
|
138
|
+
background-position: center;
|
|
139
|
+
background-repeat: no-repeat;
|
|
140
|
+
background-size: cover;
|
|
141
|
+
> * {
|
|
142
|
+
transition: all 2s ease-out;
|
|
143
|
+
&[aria-hidden=true] {
|
|
144
|
+
filter: blur(1rem);
|
|
145
|
+
opacity: 0;
|
|
146
|
+
}
|
|
147
|
+
&[aria-hidden=false] {
|
|
148
|
+
opacity: 1;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
</doc-code>
|
|
153
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
154
|
+
import Slider from "@natachah/vanilla-frontend/js/_slider"
|
|
155
|
+
const sliderFade = document.getElementById('mySlider')
|
|
156
|
+
if (sliderFade) {
|
|
157
|
+
|
|
158
|
+
const mySliderObj = new Slider(sliderFade, {
|
|
159
|
+
behavior: 'instant',
|
|
160
|
+
autoplay: 4000
|
|
161
|
+
})
|
|
162
|
+
|
|
163
|
+
sliderFade.addEventListener('slider:changing', (ev) => {
|
|
164
|
+
const currentSlide = mySliderObj._slides[ev.detail.current]
|
|
165
|
+
const src = currentSlide.querySelector('img').getAttribute('src')
|
|
166
|
+
sliderFade.style.backgroundImage = `url("${src}")`
|
|
167
|
+
})
|
|
168
|
+
|
|
169
|
+
}
|
|
170
|
+
</doc-code>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<h2>Javascript</h2>
|
|
174
|
+
<blockquote>
|
|
175
|
+
<p>To work properly the slider required some javascript.</p>
|
|
176
|
+
</blockquote>
|
|
177
|
+
<h3>Options</h3>
|
|
178
|
+
<table>
|
|
179
|
+
<thead>
|
|
180
|
+
<tr>
|
|
181
|
+
<th>Name</th>
|
|
182
|
+
<th>Description</th>
|
|
183
|
+
<th>Value</th>
|
|
184
|
+
</tr>
|
|
185
|
+
</thead>
|
|
186
|
+
<tbody>
|
|
187
|
+
<tr>
|
|
188
|
+
<td data-label="Name">
|
|
189
|
+
<p>behavior</p>
|
|
190
|
+
</td>
|
|
191
|
+
<td data-label="Description">
|
|
192
|
+
<p>The scroll behavior inside the slider</p>
|
|
193
|
+
</td>
|
|
194
|
+
<td data-label="Value">
|
|
195
|
+
<p><code>smooth</code> as string <em>can be auto, smooth or instant</em></p>
|
|
196
|
+
</td>
|
|
197
|
+
</tr>
|
|
198
|
+
<tr>
|
|
199
|
+
<td data-label="Name">
|
|
200
|
+
<p>loop</p>
|
|
201
|
+
</td>
|
|
202
|
+
<td data-label="Description">
|
|
203
|
+
<p>If set to <code>true</code>, the slider will work as a carousel</p>
|
|
204
|
+
</td>
|
|
205
|
+
<td data-label="Value">
|
|
206
|
+
<p><code>false</code> as <code>boolean</code></p>
|
|
207
|
+
</td>
|
|
208
|
+
</tr>
|
|
209
|
+
<tr>
|
|
210
|
+
<td data-label="Name">
|
|
211
|
+
<p>autoplay</p>
|
|
212
|
+
</td>
|
|
213
|
+
<td data-label="Description">
|
|
214
|
+
<p>If set to <code>true</code>, the slider will automatically cycling</p>
|
|
215
|
+
</td>
|
|
216
|
+
<td data-label="Value">
|
|
217
|
+
<p><code>false</code> as <code>boolean</code></p>
|
|
218
|
+
</td>
|
|
219
|
+
</tr>
|
|
220
|
+
</tbody>
|
|
221
|
+
</table>
|
|
222
|
+
<doc-code data-type="js">
|
|
223
|
+
new Slider(mySliderDiv, {
|
|
224
|
+
behavior: 'smooth',
|
|
225
|
+
loop: false,
|
|
226
|
+
autoplay: false
|
|
227
|
+
})
|
|
228
|
+
</doc-code>
|
|
229
|
+
|
|
230
|
+
<h3>Methods</h3>
|
|
231
|
+
<table>
|
|
232
|
+
<thead>
|
|
233
|
+
<tr>
|
|
234
|
+
<th>Method</th>
|
|
235
|
+
<th>Description</th>
|
|
236
|
+
</tr>
|
|
237
|
+
</thead>
|
|
238
|
+
<tbody>
|
|
239
|
+
<tr>
|
|
240
|
+
<td data-label="Method">
|
|
241
|
+
<p>goTo(index)
|
|
242
|
+
</td>
|
|
243
|
+
<td data-label="Description">
|
|
244
|
+
<p>Go to a specific slide by index starting by <code>0</code>
|
|
245
|
+
</td>
|
|
246
|
+
</tr>
|
|
247
|
+
<tr>
|
|
248
|
+
<td data-label="Method">
|
|
249
|
+
<p>next()
|
|
250
|
+
</td>
|
|
251
|
+
<td data-label="Description">
|
|
252
|
+
<p>Go to the next slide
|
|
253
|
+
</td>
|
|
254
|
+
</tr>
|
|
255
|
+
<tr>
|
|
256
|
+
<td data-label="Method">
|
|
257
|
+
<p>prev()
|
|
258
|
+
</td>
|
|
259
|
+
<td data-label="Description">
|
|
260
|
+
<p>Go to the previous slide
|
|
261
|
+
</td>
|
|
262
|
+
</tr>
|
|
263
|
+
</tbody>
|
|
264
|
+
</table>
|
|
265
|
+
|
|
266
|
+
<h3>Events</h3>
|
|
267
|
+
<table>
|
|
268
|
+
<thead>
|
|
269
|
+
<tr>
|
|
270
|
+
<th>Event</th>
|
|
271
|
+
<th>Description</th>
|
|
272
|
+
<th>Value</th>
|
|
273
|
+
</tr>
|
|
274
|
+
</thead>
|
|
275
|
+
<tbody>
|
|
276
|
+
<tr>
|
|
277
|
+
<td data-label="Event">
|
|
278
|
+
<p>slider:changing</p>
|
|
279
|
+
</td>
|
|
280
|
+
<td data-label="Description">
|
|
281
|
+
<p>This event is fired when the slide is changing</p>
|
|
282
|
+
</td>
|
|
283
|
+
<td data-label="Value">
|
|
284
|
+
<p><code>current</code> as a <code>index number</code></p>
|
|
285
|
+
</td>
|
|
286
|
+
</tr>
|
|
287
|
+
<tr>
|
|
288
|
+
<td data-label="Event">
|
|
289
|
+
<p>slider:changed</p>
|
|
290
|
+
</td>
|
|
291
|
+
<td data-label="Description">
|
|
292
|
+
<p>This event is fired when the slide has been changed</p>
|
|
293
|
+
</td>
|
|
294
|
+
<td data-label="Value">
|
|
295
|
+
<p><code>current</code> as a <code>index number</code></p>
|
|
296
|
+
</td>
|
|
297
|
+
</tr>
|
|
298
|
+
</tbody>
|
|
299
|
+
</table>
|
|
300
|
+
<doc-code data-type="js">
|
|
301
|
+
document.getElementById('mySliderId').addEventListener('slider:changed', (e) => {
|
|
302
|
+
const theSlide = e.detail.current
|
|
303
|
+
...
|
|
304
|
+
})
|
|
305
|
+
</doc-code>
|
|
306
|
+
|
|
307
|
+
</doc-layout>
|
|
308
|
+
<script type="module" src="/main.js"></script>
|
|
309
|
+
</body>
|
|
310
|
+
|
|
311
|
+
</html>
|
|
@@ -0,0 +1,168 @@
|
|
|
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: Components ></title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Table</h1>
|
|
14
|
+
<p>The table is using the native <code><table></code> tag.</p>
|
|
15
|
+
<doc-demo>
|
|
16
|
+
<table>
|
|
17
|
+
<caption>Caption of the table</caption>
|
|
18
|
+
<thead>
|
|
19
|
+
<tr>
|
|
20
|
+
<th>Head A</th>
|
|
21
|
+
<th>Head B</th>
|
|
22
|
+
<th>Head C</th>
|
|
23
|
+
</tr>
|
|
24
|
+
</thead>
|
|
25
|
+
<tbody>
|
|
26
|
+
<tr>
|
|
27
|
+
<td>Cell</td>
|
|
28
|
+
<td>Cell</td>
|
|
29
|
+
<td>Cell</td>
|
|
30
|
+
</tr>
|
|
31
|
+
<tr>
|
|
32
|
+
<td>Cell</td>
|
|
33
|
+
<td>Cell</td>
|
|
34
|
+
<td>Cell</td>
|
|
35
|
+
</tr>
|
|
36
|
+
<tr>
|
|
37
|
+
<td>Cell</td>
|
|
38
|
+
<td>Cell</td>
|
|
39
|
+
<td>Cell</td>
|
|
40
|
+
</tr>
|
|
41
|
+
</tbody>
|
|
42
|
+
<tfoot>
|
|
43
|
+
<tr>
|
|
44
|
+
<th>Foot A</th>
|
|
45
|
+
<th>Foot B</th>
|
|
46
|
+
<th>Foot C</th>
|
|
47
|
+
</tr>
|
|
48
|
+
</tfoot>
|
|
49
|
+
</table>
|
|
50
|
+
</doc-demo>
|
|
51
|
+
<div class="code-group">
|
|
52
|
+
<div role="tablist">
|
|
53
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
54
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
55
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
56
|
+
</div>
|
|
57
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
58
|
+
<table>
|
|
59
|
+
<caption>Caption of the table</caption>
|
|
60
|
+
<thead>
|
|
61
|
+
<tr>
|
|
62
|
+
<th>A</th>
|
|
63
|
+
<th>B</th>
|
|
64
|
+
<th>C</th>
|
|
65
|
+
</tr>
|
|
66
|
+
</thead>
|
|
67
|
+
<tbody>
|
|
68
|
+
<tr>
|
|
69
|
+
<td>Cell</td>
|
|
70
|
+
<td>Cell</td>
|
|
71
|
+
<td>Cell</td>
|
|
72
|
+
</tr>
|
|
73
|
+
</tbody>
|
|
74
|
+
<tfoot>
|
|
75
|
+
<tr>
|
|
76
|
+
<th>Result A</th>
|
|
77
|
+
<th>Result B</th>
|
|
78
|
+
<th>Result C</th>
|
|
79
|
+
</tr>
|
|
80
|
+
</tfoot>
|
|
81
|
+
</table>
|
|
82
|
+
</doc-code>
|
|
83
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
84
|
+
@import '@natachah/vanilla-frontend/scss/_table';
|
|
85
|
+
</doc-code>
|
|
86
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
87
|
+
--table-padding-inline
|
|
88
|
+
--table-padding-block
|
|
89
|
+
--table-align-inline
|
|
90
|
+
--table-align-block
|
|
91
|
+
--table-border-size
|
|
92
|
+
--table-border-style
|
|
93
|
+
--table-border-color
|
|
94
|
+
--table-divider-size
|
|
95
|
+
--table-divider-style
|
|
96
|
+
--table-divider-color
|
|
97
|
+
</doc-code>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<h2>Responsive</h2>
|
|
101
|
+
<p>To render a table responsive, you can use the SASS mixin <code>as-responsive-table()</code> inside a <code>@media</code> or <code>@container</code>.</p>
|
|
102
|
+
<p>It require the attribute <code>data-label="Name of the column"</code> on each <code><td></code>.</p>
|
|
103
|
+
<doc-demo>
|
|
104
|
+
<div class="as-container">
|
|
105
|
+
<table id="demoTable">
|
|
106
|
+
<thead>
|
|
107
|
+
<tr>
|
|
108
|
+
<th>Header A</th>
|
|
109
|
+
<th>Header B</th>
|
|
110
|
+
<th>Header C</th>
|
|
111
|
+
</tr>
|
|
112
|
+
</thead>
|
|
113
|
+
<tbody>
|
|
114
|
+
<tr>
|
|
115
|
+
<td data-label="Header A">Cell</td>
|
|
116
|
+
<td data-label="Header B">Cell</td>
|
|
117
|
+
<td data-label="Header C">Cell</td>
|
|
118
|
+
</tr>
|
|
119
|
+
</tbody>
|
|
120
|
+
</table>
|
|
121
|
+
</div>
|
|
122
|
+
</doc-demo>
|
|
123
|
+
<div class="code-group">
|
|
124
|
+
<div role="tablist">
|
|
125
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
126
|
+
<button role="tab" aria-controls="scss">SCSS</button>
|
|
127
|
+
<button role="tab" aria-controls="css">CSS</button>
|
|
128
|
+
</div>
|
|
129
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
130
|
+
<table id="demoTable">
|
|
131
|
+
<thead>
|
|
132
|
+
<tr>
|
|
133
|
+
<th>Header A</th>
|
|
134
|
+
<th>Header B</th>
|
|
135
|
+
<th>Header C</th>
|
|
136
|
+
</tr>
|
|
137
|
+
</thead>
|
|
138
|
+
<tbody>
|
|
139
|
+
<tr>
|
|
140
|
+
<td data-label="Header A">Cell</td>
|
|
141
|
+
<td data-label="Header B">Cell</td>
|
|
142
|
+
<td data-label="Header C">Cell</td>
|
|
143
|
+
</tr>
|
|
144
|
+
</tbody>
|
|
145
|
+
</table>
|
|
146
|
+
</doc-code>
|
|
147
|
+
<doc-code id="scss" data-type="scss" role="tabpanel">
|
|
148
|
+
@container (max-width:800px) {
|
|
149
|
+
#myTable {
|
|
150
|
+
@include as-responsive-table()
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
</doc-code>
|
|
154
|
+
<doc-code id="css" data-type="css" role="tabpanel">
|
|
155
|
+
--table-grid-template
|
|
156
|
+
</doc-code>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<blockquote>
|
|
160
|
+
<p>By default the grid is set on 2 columns (15 characters and auto).</p>
|
|
161
|
+
</blockquote>
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
</doc-layout>
|
|
165
|
+
<script type="module" src="/main.js"></script>
|
|
166
|
+
</body>
|
|
167
|
+
|
|
168
|
+
</html>
|
|
@@ -0,0 +1,170 @@
|
|
|
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 > Autofill</title>
|
|
8
|
+
</head>
|
|
9
|
+
|
|
10
|
+
<body data-preload>
|
|
11
|
+
<doc-layout>
|
|
12
|
+
|
|
13
|
+
<h1>Autofill</h1>
|
|
14
|
+
<p>The autofill component make you able to automaticaly fill some <code><input></code> fields by another.</p>
|
|
15
|
+
<p>You can use it with a <code><select></code> tag with the <code>aria-controls="IdOfTheOtherField"</code> attribute.</p>
|
|
16
|
+
<p>The other field must have a <code>data-autofill="NameOfTheValue"</code> attribute. The value must exist into the <code><option></code> tags as <code>data-NameOfTheValue="value"</code>.</p>
|
|
17
|
+
<doc-demo>
|
|
18
|
+
<fieldset>
|
|
19
|
+
<legend>Favorite animal</legend>
|
|
20
|
+
<div class="group">
|
|
21
|
+
<select class="demo-autofill" id="autofill" name="select" aria-controls="animalID">
|
|
22
|
+
<option>--</option>
|
|
23
|
+
<option data-id="1">Cat</option>
|
|
24
|
+
<option data-id="2">Dog</option>
|
|
25
|
+
<option data-id="3">Lizzard</option>
|
|
26
|
+
<option data-id="4">Bird</option>
|
|
27
|
+
</select>
|
|
28
|
+
<input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
|
|
29
|
+
</div>
|
|
30
|
+
</fieldset>
|
|
31
|
+
</doc-demo>
|
|
32
|
+
|
|
33
|
+
<div class="code-group">
|
|
34
|
+
<div role="tablist">
|
|
35
|
+
<button role="tab" aria-controls="html">HTML</button>
|
|
36
|
+
<button role="tab" aria-controls="js">JS</button>
|
|
37
|
+
</div>
|
|
38
|
+
<doc-code id="html" data-type="html" role="tabpanel">
|
|
39
|
+
<fieldset>
|
|
40
|
+
<legend>Favorite animal</legend>
|
|
41
|
+
<div class="group">
|
|
42
|
+
<select id="autofillSelect" name="select" aria-controls="animalID">
|
|
43
|
+
<option>--</option>
|
|
44
|
+
<option data-id="1">Cat</option>
|
|
45
|
+
<option data-id="2">Dog</option>
|
|
46
|
+
<option data-id="3">Lizzard</option>
|
|
47
|
+
<option data-id="4">Bird</option>
|
|
48
|
+
</select>
|
|
49
|
+
<input id="animalID" type="text" placeholder="ID of the animal" data-autofill="id" readonly>
|
|
50
|
+
</div>
|
|
51
|
+
</fieldset>
|
|
52
|
+
</doc-code>
|
|
53
|
+
<doc-code id="js" data-type="js" role="tabpanel">
|
|
54
|
+
import Autofill from "@natachah/vanilla-frontend/js/_autofill"
|
|
55
|
+
const autofillSelect = document.getElementById('autofillSelect')
|
|
56
|
+
if(autofillSelect) new Autofill(autofillSelect)
|
|
57
|
+
</doc-code>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<h2>Autocomplete (datalist)</h2>
|
|
61
|
+
<p>The component also work with <code><input></code> associated with a <code><datalist></code>.</p>
|
|
62
|
+
<doc-demo>
|
|
63
|
+
<fieldset>
|
|
64
|
+
<legend>Favorite ice cream</legend>
|
|
65
|
+
<div class="group">
|
|
66
|
+
<input class="demo-autofill" id="autofill" name="datalist" list="myDatalist" aria-controls="flavourID flavorColor" placeholder="Choose a flavor">
|
|
67
|
+
<input id="flavourID" type="text" placeholder="ID of the icecream" data-autofill="id" readonly>
|
|
68
|
+
<input id="flavorColor" type="text" placeholder="Color of the icecream" data-autofill="color" readonly>
|
|
69
|
+
</div>
|
|
70
|
+
</fieldset>
|
|
71
|
+
<datalist id="myDatalist">
|
|
72
|
+
<option data-id="1" data-color="Brown" value="Chocolate"></option>
|
|
73
|
+
<option data-id="2" data-color="White" value="Coconut"></option>
|
|
74
|
+
<option data-id="3" data-color="Green" value="Mint"></option>
|
|
75
|
+
<option data-id="4" data-color="Red" value="Strawberry"></option>
|
|
76
|
+
<option data-id="5" data-color="Yellow" value="Vanilla"></option>
|
|
77
|
+
</datalist>
|
|
78
|
+
</doc-demo>
|
|
79
|
+
<doc-code>
|
|
80
|
+
<fieldset>
|
|
81
|
+
<legend>Favorite ice cream</legend>
|
|
82
|
+
<div class="group">
|
|
83
|
+
<input id="autofillList" name="datalist" list="myDatalist" aria-controls="flavourID flavorColor" placeholder="Choose a flavor">
|
|
84
|
+
<input id="flavourID" type="text" placeholder="ID of the icecream" data-autofill="id" readonly>
|
|
85
|
+
<input id="flavorColor" type="text" placeholder="Color of the icecream" data-autofill="color" readonly>
|
|
86
|
+
</div>
|
|
87
|
+
</fieldset>
|
|
88
|
+
<datalist id="myDatalist">
|
|
89
|
+
<option data-id="1" data-color="Brown" value="Chocolate">
|
|
90
|
+
</option>
|
|
91
|
+
<option data-id="2" data-color="White" value="Coconut">
|
|
92
|
+
</option>
|
|
93
|
+
<option data-id="3" data-color="Green" value="Mint">
|
|
94
|
+
</option>
|
|
95
|
+
<option data-id="4" data-color="Red" value="Strawberry">
|
|
96
|
+
</option>
|
|
97
|
+
<option data-id="5" data-color="Yellow" value="Vanilla">
|
|
98
|
+
</option>
|
|
99
|
+
</datalist>
|
|
100
|
+
</doc-code>
|
|
101
|
+
|
|
102
|
+
<h2>File</h2>
|
|
103
|
+
<p>The component also work with <b>file</b> field and take default information about the uploaded media.</p>
|
|
104
|
+
<doc-demo>
|
|
105
|
+
<label for="autofill">Choose a file</label>
|
|
106
|
+
<input class="demo-autofill" id="autofill" type="file" name="file" aria-controls="fileName fileSize fileType fileCleanName fileExtension">
|
|
107
|
+
<fieldset>
|
|
108
|
+
<legend>File data</legend>
|
|
109
|
+
<div class="group">
|
|
110
|
+
<input id="fileName" type="text" placeholder="Name of the file" data-autofill="name" readonly>
|
|
111
|
+
<input id="fileSize" type="text" placeholder="Size of the file" data-autofill="size" readonly>
|
|
112
|
+
<input id="fileType" type="text" placeholder="Type of the file" data-autofill="type" readonly>
|
|
113
|
+
<input id="fileCleanName" type="text" placeholder="Clean name of the file" data-autofill="filename" readonly>
|
|
114
|
+
<input id="fileExtension" type="text" placeholder="Extension of the file" data-autofill="extension" readonly>
|
|
115
|
+
</div>
|
|
116
|
+
</fieldset>
|
|
117
|
+
</doc-demo>
|
|
118
|
+
<doc-code>
|
|
119
|
+
<label for="autofillList">Choose a file</label>
|
|
120
|
+
<input id="autofillFile" type="file" name="file" aria-controls="fileName fileSize fileType fileCleanName fileExtension">
|
|
121
|
+
<fieldset>
|
|
122
|
+
<legend>File data</legend>
|
|
123
|
+
<div class="group">
|
|
124
|
+
<input id="fileName" type="text" placeholder="Name of the file" data-autofill="name" readonly>
|
|
125
|
+
<input id="fileSize" type="text" placeholder="Size of the file" data-autofill="size" readonly>
|
|
126
|
+
<input id="fileType" type="text" placeholder="Type of the file" data-autofill="type" readonly>
|
|
127
|
+
<input id="fileCleanName" type="text" placeholder="Clean name of the file" data-autofill="filename" readonly>
|
|
128
|
+
<input id="fileExtension" type="text" placeholder="Extension of the file" data-autofill="extension" readonly>
|
|
129
|
+
</div>
|
|
130
|
+
</fieldset>
|
|
131
|
+
</doc-code>
|
|
132
|
+
|
|
133
|
+
<h2>Javascript</h2>
|
|
134
|
+
<p>To enable this component you need to import the javascript file and create a new Autofill object.</p>
|
|
135
|
+
<h3>Events</h3>
|
|
136
|
+
<table>
|
|
137
|
+
<thead>
|
|
138
|
+
<tr>
|
|
139
|
+
<th>Event</th>
|
|
140
|
+
<th>Description</th>
|
|
141
|
+
<th>Value</th>
|
|
142
|
+
</tr>
|
|
143
|
+
</thead>
|
|
144
|
+
<tbody>
|
|
145
|
+
<tr>
|
|
146
|
+
<td data-label="Event">
|
|
147
|
+
<p>autofill:changed</p>
|
|
148
|
+
</td>
|
|
149
|
+
<td data-label="Description">
|
|
150
|
+
<p>This event is fired when the original element value has changed</p>
|
|
151
|
+
</td>
|
|
152
|
+
<td data-label="Value">
|
|
153
|
+
<p><code>current</code> as <code>HTMLElement</code> *Could be an <code><option></code> or a <code>File</code></p>
|
|
154
|
+
</td>
|
|
155
|
+
</tr>
|
|
156
|
+
</tbody>
|
|
157
|
+
</table>
|
|
158
|
+
<doc-code data-type="js">
|
|
159
|
+
const myAutofill = document.getElementById('myAutofill')
|
|
160
|
+
myAutofill.addEventListener('autofill:changed', (e) => {
|
|
161
|
+
const theCurrentItem = e.detail.current
|
|
162
|
+
...
|
|
163
|
+
})
|
|
164
|
+
</doc-code>
|
|
165
|
+
|
|
166
|
+
</doc-layout>
|
|
167
|
+
<script type="module" src="/main.js"></script>
|
|
168
|
+
</body>
|
|
169
|
+
|
|
170
|
+
</html>
|