@natachah/vanilla-frontend 0.4.1 → 1.0.0

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 (281) hide show
  1. package/.gitlab-ci.yml +22 -13
  2. package/LICENSE.md +1 -1
  3. package/docs/.vitepress/config.mts +101 -0
  4. package/docs/base/layout.md +77 -0
  5. package/docs/base/media.md +146 -0
  6. package/docs/base/reset.md +33 -0
  7. package/docs/base/typography.md +296 -0
  8. package/docs/classes/badge.md +146 -0
  9. package/docs/classes/breadcrumb.md +54 -0
  10. package/docs/classes/card.md +171 -0
  11. package/docs/classes/dropdown.md +180 -0
  12. package/docs/classes/grid.md +230 -0
  13. package/docs/classes/list.md +90 -0
  14. package/docs/components/button.md +254 -0
  15. package/docs/components/dialog.md +223 -0
  16. package/docs/components/disclosure.md +169 -0
  17. package/docs/components/form.md +514 -0
  18. package/docs/components/loading.md +53 -0
  19. package/docs/components/popover.md +270 -0
  20. package/docs/components/progress.md +33 -0
  21. package/docs/components/table.md +175 -0
  22. package/docs/index.md +27 -0
  23. package/docs/javascript/autofill.md +155 -0
  24. package/docs/javascript/check.md +53 -0
  25. package/docs/javascript/comfort.md +125 -0
  26. package/docs/javascript/consent.md +89 -0
  27. package/docs/javascript/cookie.md +33 -0
  28. package/docs/javascript/drawer.md +99 -0
  29. package/docs/javascript/form.md +130 -0
  30. package/docs/javascript/scroll.md +104 -0
  31. package/docs/javascript/slider.md +130 -0
  32. package/docs/javascript/sortable.md +127 -0
  33. package/docs/javascript/tabpanel.md +72 -0
  34. package/docs/javascript/toggle.md +182 -0
  35. package/docs/javascript/trap.md +33 -0
  36. package/docs/javascript/tree.md +220 -0
  37. package/docs/prologue/conventions.md +92 -0
  38. package/docs/prologue/release.md +44 -0
  39. package/docs/prologue/upgrade.md +21 -0
  40. package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
  41. package/docs/start/customization.md +184 -0
  42. package/docs/start/install.md +80 -0
  43. package/docs/start/mixin.md +203 -0
  44. package/docs/vuejs/ComponentPreview.vue +99 -0
  45. package/js/_slider.js +17 -1
  46. package/js/{vanilla-frontend.js → vanilla-frontend-doc.js} +30 -33
  47. package/natachah-vanilla-frontend-1.0.0.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.DsgDPRSA.js +1 -0
  51. package/public/assets/base_layout.md.CTGv6rTn.js +13 -0
  52. package/public/assets/base_layout.md.CTGv6rTn.lean.js +1 -0
  53. package/public/assets/base_media.md.CcuDUcF-.js +24 -0
  54. package/public/assets/base_media.md.CcuDUcF-.lean.js +1 -0
  55. package/public/assets/base_reset.md.DqIdqFRJ.js +3 -0
  56. package/public/assets/base_reset.md.DqIdqFRJ.lean.js +1 -0
  57. package/public/assets/base_typography.md.DV-ikqGZ.js +87 -0
  58. package/public/assets/base_typography.md.DV-ikqGZ.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.BW2s4ay5.js +27 -0
  60. package/public/assets/chunks/framework.CaiDwmc7.js +4 -0
  61. package/public/assets/chunks/theme.DL_11MHV.js +1 -0
  62. package/public/assets/classes_badge.md.BCGzPr6f.js +24 -0
  63. package/public/assets/classes_badge.md.BCGzPr6f.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.vU6jlo36.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.vU6jlo36.lean.js +1 -0
  66. package/public/assets/classes_card.md.BZEh2l_B.js +41 -0
  67. package/public/assets/classes_card.md.BZEh2l_B.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.BLVw_xQY.js +70 -0
  69. package/public/assets/classes_dropdown.md.BLVw_xQY.lean.js +1 -0
  70. package/public/assets/classes_grid.md.47v-Ybqe.js +45 -0
  71. package/public/assets/classes_grid.md.47v-Ybqe.lean.js +1 -0
  72. package/public/assets/classes_list.md.BW9PWZV1.js +36 -0
  73. package/public/assets/classes_list.md.BW9PWZV1.lean.js +1 -0
  74. package/public/assets/components_button.md.vx3HzdpN.js +45 -0
  75. package/public/assets/components_button.md.vx3HzdpN.lean.js +1 -0
  76. package/public/assets/components_dialog.md.C-0gJGus.js +76 -0
  77. package/public/assets/components_dialog.md.C-0gJGus.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.DeSRu9_P.js +53 -0
  79. package/public/assets/components_disclosure.md.DeSRu9_P.lean.js +1 -0
  80. package/public/assets/components_form.md.Be8d5WFv.js +122 -0
  81. package/public/assets/components_form.md.Be8d5WFv.lean.js +1 -0
  82. package/public/assets/components_loading.md.CKDG7z5x.js +4 -0
  83. package/public/assets/components_loading.md.CKDG7z5x.lean.js +1 -0
  84. package/public/assets/components_popover.md.CwgNttNc.js +102 -0
  85. package/public/assets/components_popover.md.CwgNttNc.lean.js +1 -0
  86. package/public/assets/components_progress.md.CNC7rJiC.js +6 -0
  87. package/public/assets/components_progress.md.CNC7rJiC.lean.js +1 -0
  88. package/public/assets/components_table.md.LyBkIDkF.js +75 -0
  89. package/public/assets/components_table.md.LyBkIDkF.lean.js +1 -0
  90. package/public/assets/index.md.CJiHmjB7.js +1 -0
  91. package/public/assets/index.md.CJiHmjB7.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.BewVUo4H.js +49 -0
  107. package/public/assets/javascript_autofill.md.BewVUo4H.lean.js +1 -0
  108. package/public/assets/javascript_check.md.B6ajE66i.js +13 -0
  109. package/public/assets/javascript_check.md.B6ajE66i.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.BRci3j7V.js +20 -0
  111. package/public/assets/javascript_comfort.md.BRci3j7V.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.Bjv8ZDS6.js +29 -0
  113. package/public/assets/javascript_consent.md.Bjv8ZDS6.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.Dlhyk4Ha.js +2 -0
  115. package/public/assets/javascript_cookie.md.Dlhyk4Ha.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.BCJX3fL-.js +32 -0
  117. package/public/assets/javascript_drawer.md.BCJX3fL-.lean.js +1 -0
  118. package/public/assets/javascript_form.md.Cwf_gxLI.js +40 -0
  119. package/public/assets/javascript_form.md.Cwf_gxLI.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.BrJijWbF.js +30 -0
  121. package/public/assets/javascript_scroll.md.BrJijWbF.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.DDO8wC4u.js +27 -0
  123. package/public/assets/javascript_slider.md.DDO8wC4u.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.BKyem7yw.js +35 -0
  125. package/public/assets/javascript_sortable.md.BKyem7yw.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.D9M-_xE0.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.D9M-_xE0.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C8582WNC.js +46 -0
  129. package/public/assets/javascript_toggle.md.C8582WNC.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Bc59YUng.js +2 -0
  131. package/public/assets/javascript_trap.md.Bc59YUng.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.uc1UUsFV.js +72 -0
  133. package/public/assets/javascript_tree.md.uc1UUsFV.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.D8nVwlRS.js +34 -0
  135. package/public/assets/prologue_conventions.md.D8nVwlRS.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CG6nuFnt.js +1 -0
  137. package/public/assets/prologue_release.md.CG6nuFnt.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.CFxokaBG.js +1 -0
  139. package/public/assets/prologue_upgrade.md.CFxokaBG.lean.js +1 -0
  140. package/public/assets/start_customization.md.t-ze_NoQ.js +141 -0
  141. package/public/assets/start_customization.md.t-ze_NoQ.lean.js +1 -0
  142. package/public/assets/start_install.md.OluH7l11.js +46 -0
  143. package/public/assets/start_install.md.OluH7l11.lean.js +1 -0
  144. package/public/assets/start_mixin.md.D76cLRSX.js +85 -0
  145. package/public/assets/start_mixin.md.D76cLRSX.lean.js +1 -0
  146. package/public/assets/style.zIeGMibA.css +1 -0
  147. package/public/base/layout.html +37 -0
  148. package/public/base/media.html +179 -0
  149. package/public/base/reset.html +27 -0
  150. package/public/base/typography.html +320 -0
  151. package/public/bundles/vanilla-frontend-doc.css +1 -0
  152. package/public/bundles/vanilla-frontend-doc.js +1 -0
  153. package/public/bundles/vanilla-frontend.css +1 -0
  154. package/public/classes/badge.html +205 -0
  155. package/public/classes/breadcrumb.html +66 -0
  156. package/public/classes/card.html +222 -0
  157. package/public/classes/dropdown.html +147 -0
  158. package/public/classes/grid.html +278 -0
  159. package/public/classes/list.html +113 -0
  160. package/public/components/button.html +304 -0
  161. package/public/components/dialog.html +205 -0
  162. package/public/components/disclosure.html +130 -0
  163. package/public/components/form.html +589 -0
  164. package/public/components/loading.html +107 -0
  165. package/public/components/popover.html +257 -0
  166. package/public/components/progress.html +57 -0
  167. package/public/components/table.html +152 -0
  168. package/public/demo/demo.html +84 -0
  169. package/public/hashmap.json +1 -0
  170. package/public/index.html +25 -0
  171. package/public/javascript/autofill.html +152 -0
  172. package/public/javascript/check.html +64 -0
  173. package/public/javascript/comfort.html +123 -0
  174. package/public/javascript/consent.html +80 -0
  175. package/public/javascript/cookie.html +26 -0
  176. package/public/javascript/drawer.html +83 -0
  177. package/public/javascript/form.html +117 -0
  178. package/public/javascript/scroll.html +81 -0
  179. package/public/javascript/slider.html +78 -0
  180. package/public/javascript/sortable.html +112 -0
  181. package/public/javascript/tabpanel.html +70 -0
  182. package/public/javascript/toggle.html +201 -0
  183. package/public/javascript/trap.html +26 -0
  184. package/public/javascript/tree.html +175 -0
  185. package/public/prologue/conventions.html +58 -0
  186. package/public/prologue/release.html +25 -0
  187. package/public/prologue/upgrade.html +25 -0
  188. package/public/start/customization.html +165 -0
  189. package/public/start/install.html +70 -0
  190. package/public/start/mixin.html +109 -0
  191. package/public/vp-icons.css +0 -0
  192. package/sandbox/index.html +27 -0
  193. package/sandbox/js/sandbox-header.js +57 -0
  194. package/sandbox/js/sandbox-test.js +91 -0
  195. package/sandbox/pages/base/layout.html +80 -0
  196. package/sandbox/pages/base/media.html +52 -0
  197. package/sandbox/pages/base/typography.html +132 -0
  198. package/sandbox/pages/components/button.html +70 -0
  199. package/sandbox/pages/components/dialog.html +72 -0
  200. package/sandbox/pages/components/disclosure.html +77 -0
  201. package/sandbox/pages/components/form.html +164 -0
  202. package/sandbox/pages/components/loading.html +32 -0
  203. package/sandbox/pages/components/popover.html +119 -0
  204. package/sandbox/pages/components/progress.html +28 -0
  205. package/sandbox/pages/components/table.html +80 -0
  206. package/sandbox/pages/customs/badge.html +59 -0
  207. package/sandbox/pages/customs/breadcrumb.html +34 -0
  208. package/sandbox/pages/customs/card.html +71 -0
  209. package/sandbox/pages/customs/dropdown.html +70 -0
  210. package/sandbox/pages/customs/grid.html +109 -0
  211. package/sandbox/pages/customs/list.html +43 -0
  212. package/sandbox/pages/javascript/autofill.html +39 -0
  213. package/sandbox/pages/javascript/checkall.html +37 -0
  214. package/sandbox/pages/javascript/comfort.html +41 -0
  215. package/sandbox/pages/javascript/consent.html +45 -0
  216. package/sandbox/pages/javascript/form.html +50 -0
  217. package/sandbox/pages/javascript/scroll.html +44 -0
  218. package/sandbox/pages/javascript/slider.html +44 -0
  219. package/sandbox/pages/javascript/sortable.html +56 -0
  220. package/sandbox/pages/javascript/tabpanel.html +39 -0
  221. package/sandbox/pages/javascript/toggle.html +72 -0
  222. package/sandbox/pages/javascript/tree.html +96 -0
  223. package/sandbox/sandbox.js +26 -0
  224. package/sandbox/scss/sandbox-header.scss +93 -0
  225. package/scss/components/_badge.scss +2 -1
  226. package/scss/components/_dropdown.scss +2 -2
  227. package/scss/components/_group.scss +8 -4
  228. package/scss/components/_popover.scss +74 -0
  229. package/scss/components/index.scss +1 -0
  230. package/scss/vanilla-frontend-doc.scss +46 -1
  231. package/scss/vanilla-frontend-sandbox.scss +34 -0
  232. package/vite.config.js +30 -0
  233. package/docs/index.html +0 -36
  234. package/docs/main-demo.js +0 -2
  235. package/docs/main.js +0 -34
  236. package/docs/pages/base/layout.html +0 -131
  237. package/docs/pages/base/media.html +0 -142
  238. package/docs/pages/base/reset.html +0 -53
  239. package/docs/pages/base/typography.html +0 -334
  240. package/docs/pages/components/button.html +0 -202
  241. package/docs/pages/components/dialog.html +0 -336
  242. package/docs/pages/components/disclosure.html +0 -174
  243. package/docs/pages/components/form.html +0 -427
  244. package/docs/pages/components/loading.html +0 -58
  245. package/docs/pages/components/progress.html +0 -47
  246. package/docs/pages/components/table.html +0 -168
  247. package/docs/pages/customs/badge.html +0 -150
  248. package/docs/pages/customs/breadcrumb.html +0 -67
  249. package/docs/pages/customs/card.html +0 -185
  250. package/docs/pages/customs/drawer.html +0 -149
  251. package/docs/pages/customs/dropdown.html +0 -270
  252. package/docs/pages/customs/grid.html +0 -185
  253. package/docs/pages/customs/list.html +0 -112
  254. package/docs/pages/customs/slider.html +0 -273
  255. package/docs/pages/javascript/autofill.html +0 -170
  256. package/docs/pages/javascript/checkall.html +0 -59
  257. package/docs/pages/javascript/comfort.html +0 -146
  258. package/docs/pages/javascript/consent.html +0 -112
  259. package/docs/pages/javascript/cookie.html +0 -81
  260. package/docs/pages/javascript/form.html +0 -199
  261. package/docs/pages/javascript/scroll.html +0 -209
  262. package/docs/pages/javascript/sortable.html +0 -167
  263. package/docs/pages/javascript/tabpanel.html +0 -89
  264. package/docs/pages/javascript/toggle.html +0 -193
  265. package/docs/pages/javascript/trap.html +0 -89
  266. package/docs/pages/javascript/tree.html +0 -256
  267. package/docs/pages/quick-start/conventions.html +0 -112
  268. package/docs/pages/quick-start/customization.html +0 -187
  269. package/docs/pages/quick-start/installation.html +0 -97
  270. package/docs/pages/quick-start/mixins.html +0 -214
  271. package/docs/src/js/demo.js +0 -110
  272. package/docs/src/js/doc-code.js +0 -102
  273. package/docs/src/js/doc-demo.js +0 -14
  274. package/docs/src/js/doc-layout.js +0 -117
  275. package/docs/src/scss/demo.scss +0 -77
  276. package/docs/src/scss/layout.scss +0 -83
  277. package/docs/src/scss/style.scss +0 -278
  278. package/docs/vite.config.mjs +0 -23
  279. package/esbuild.mjs +0 -25
  280. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  281. package/vitest.config.js +0 -8
package/docs/pages/customs/list.html DELETED
@@ -1,112 +0,0 @@
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>List</h1>
14
- <p>The list is using the native <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code> or <code>&lt;div&gt;</code> tag with the class <code>.list</code>.</p>
15
- <doc-demo>
16
- <ul class="list">
17
- <li>List A</li>
18
- <li>List B</li>
19
- <li><a href="#">List C</a></li>
20
- <li>List D</li>
21
- <li><span>List E</span> <button>button</button></li>
22
- </ul>
23
- </doc-demo>
24
-
25
- <div class="code-group">
26
- <div role="tablist">
27
- <button role="tab" aria-controls="html">HTML</button>
28
- <button role="tab" aria-controls="scss">SCSS</button>
29
- <button role="tab" aria-controls="css">CSS</button>
30
- </div>
31
- <doc-code id="html" data-type="html" role="tabpanel">
32
- <ul class="list">
33
- <li>List A</li>
34
- <li>List B</li>
35
- <li><a href="#">List C</a></li>
36
- <li>List D</li>
37
- <li><span>List E</span> <button>button</button></li>
38
- </ul>
39
- </doc-code>
40
- <doc-code id="scss" data-type="scss" role="tabpanel">
41
- @use '@natachah/vanilla-frontend/scss/components/list';
42
- </doc-code>
43
- <doc-code id="css" data-type="css" role="tabpanel">
44
- --list-color
45
- --list-background
46
- --list-border-size
47
- --list-border-style
48
- --list-border-color
49
- --list-border-radius
50
- --list-padding-inline
51
- --list-padding-block
52
- --list-text-align
53
- </doc-code>
54
- </div>
55
-
56
- <h2>Action list</h2>
57
-
58
- <p>You can use some <b>button</b> components as <code>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</code> inside a list.</p>
59
- <doc-demo>
60
- <ul class="list">
61
- <li><button>List A (button)</button></li>
62
- <li><button disabled>List B (button disabled)</button></li>
63
- <li>List C</li>
64
- <li><a role="button" href="#">List D (link)</a></li>
65
- <li><span>List E</span><a role="button" href="#">Not only child (link)</a></li>
66
- <li><a role="button">List F (link disabled)</a></li>
67
- </ul>
68
- </doc-demo>
69
-
70
- <div class="code-group">
71
- <div role="tablist">
72
- <button role="tab" aria-controls="html">HTML</button>
73
- <button role="tab" aria-controls="scss">SCSS</button>
74
- <button role="tab" aria-controls="css">CSS</button>
75
- </div>
76
- <doc-code id="html" data-type="html" role="tabpanel">
77
- <ul class="list">
78
- <li><button>List A</button></li>
79
- <li><button disabled>List B</button></li>
80
- <li>List C</li>
81
- <li><a role="button" href="#">List D</a></li>
82
- <li><a role="button">List E</a></li>
83
- </ul>
84
- </doc-code>
85
- <doc-code id="scss" data-type="scss" role="tabpanel">
86
- @use '@natachah/vanilla-frontend/scss/components/list';
87
- </doc-code>
88
- <doc-code id="css" data-type="css" role="tabpanel">
89
- --list-transition
90
- --list-decoration
91
- --list-outline-size
92
- --list-outline-style
93
- --list-outline-color
94
- --list-outline-offset
95
- --list-hover-color
96
- --list-hover-background
97
- --list-hover-border-color
98
- --list-focus-color
99
- --list-focus-background
100
- --list-focus-border-color
101
- --list-active-color
102
- --list-active-background
103
- --list-active-border-color
104
- --list-disabled-opacity
105
- </doc-code>
106
- </div>
107
-
108
- </doc-layout>
109
- <script type="module" src="/main.js"></script>
110
- </body>
111
-
112
- </html>
package/docs/pages/customs/slider.html DELETED
@@ -1,273 +0,0 @@
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>&lt;div&gt;</code> tag with the class <code>.slider</code>.</p>
15
- <p>Each slide must be a <code>&lt;div&gt;</code> with <code>role=&quot;tabpanel&quot;</code> and <code>aria-hidden=&quot;true&quot;</code> attributes.</p>
16
- <doc-demo>
17
- <div id="sliderFull" class="slider demo-slider">
18
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
19
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
20
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
21
- </div>
22
- <button aria-controls="sliderFull" data-slider-prev>previous</button>
23
- <div aria-controls="sliderFull" role="tablist">
24
- <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
25
- <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
26
- <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
27
- </div>
28
- <button aria-controls="sliderFull" data-slider-next>next</button>
29
- </doc-demo>
30
- <div class="code-group">
31
- <div role="tablist">
32
- <button role="tab" aria-controls="html" aria-selected="true">HTML</button>
33
- <button role="tab" aria-controls="scss">SCSS</button>
34
- <button role="tab" aria-controls="css">CSS</button>
35
- <button role="tab" aria-controls="js">JS</button>
36
- </div>
37
- <doc-code id="html" data-type="html" role="tabpanel" aria-hidden="false">
38
- <div id="slider" class="slider">
39
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
40
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
41
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
42
- </div>
43
- <button aria-controls="slider" data-slider-prev>previous</button>
44
- <div aria-controls="slider" role="tablist">
45
- <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
46
- <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
47
- <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
48
- </div>
49
- <button aria-controls="slider" data-slider-next>next</button>
50
- </doc-code>
51
- <doc-code id="scss" data-type="scss" role="tabpanel">
52
- @use '@natachah/vanilla-frontend/scss/components/slider';
53
- </doc-code>
54
- <doc-code id="css" data-type="css" role="tabpanel">
55
- --slider-columns
56
- --slider-gap
57
- </doc-code>
58
- <doc-code id="js" data-type="js" role="tabpanel">
59
- import Slider from "@natachah/vanilla-frontend/js/_slider"
60
- const slider = document.getElementById('slider')
61
- if (slider) const mySliderObj = new Slider(slider, {loop: true})
62
- </doc-code>
63
- </div>
64
-
65
- <h2>Indicators</h2>
66
- <p>You can create some indicators with a <code>&lt;div&gt;</code> tag with the <code>aria-controls=&quot;IdOfSlider&quot;</code> and <code>role=&quot;tablist&quot;</code> attributes.</p>
67
- <p>Inside you must insert each slides indicators as <code>&lt;button&gt;</code> tag with <code>role=&quot;tab&quot;</code>, <code>aria-controls=&quot;IdOfSlide&quot;</code> and <code>aria-selected=&quot;false&quot;</code> attributes.</p>
68
-
69
- <doc-code>
70
- <div aria-controls="slider" role="tablist">
71
- <button role="tab" aria-controls="slide1" aria-selected="true">1</button>
72
- <button role="tab" aria-controls="slide2" aria-selected="false">2</button>
73
- <button role="tab" aria-controls="slide3" aria-selected="false">3</button>
74
- </div>
75
- </doc-code>
76
-
77
- <h2>Navigation</h2>
78
- <p>You can create some prev/next navigation with some <code>&lt;button&gt;</code> tag with the <code>aria-controls=&quot;IdOfSlider&quot;</code> and <code>data-slider-prev</code> or <code>data-slider-next</code> attributes.</p>
79
- <doc-code>
80
- <button aria-controls="slider" data-slider-prev>previous</button>
81
- <button aria-controls="slider" data-slider-next>next</button>
82
- </doc-code>
83
-
84
- <h2>Variants</h2>
85
- <h3>Fade effect</h3>
86
- <p>You can change the CSS and JS to create a sort of fade effect, but it's not optimal.</p>
87
- <doc-demo>
88
- <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://picsum.photos/id/1/300);">
89
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
90
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
91
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
92
- </div>
93
- </doc-demo>
94
- <div class="code-group">
95
- <div role="tablist">
96
- <button role="tab" aria-controls="html">HTML</button>
97
- <button role="tab" aria-controls="css">CSS</button>
98
- <button role="tab" aria-controls="js">JS</button>
99
- </div>
100
- <doc-code id="html" data-type="html" role="tabpanel">
101
- <div id="sliderFade" class="slider slider-fade-demo" style="background-image: url(https://picsum.photos/id/1/300);">
102
- <div id="slide1" role="tabpanel" aria-hidden="false"><img src="https://picsum.photos/id/1/300" alt="Image 1"></div>
103
- <div id="slide2" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/2/300" alt="Image 2"></div>
104
- <div id="slide3" role="tabpanel" aria-hidden="true"><img src="https://picsum.photos/id/3/300" alt="Image 3"></div>
105
- </div>
106
- </doc-code>
107
- <doc-code id="css" data-type="css" role="tabpanel">
108
- .slider-fade-demo {
109
- --image-width: 100%;
110
- --image-ratio: 4/3;
111
- background-position: center;
112
- background-repeat: no-repeat;
113
- background-size: cover;
114
- > * {
115
- transition: all 2s ease-out;
116
- &[aria-hidden=true] {
117
- filter: blur(1rem);
118
- opacity: 0;
119
- }
120
- &[aria-hidden=false] {
121
- opacity: 1;
122
- }
123
- }
124
- }
125
- </doc-code>
126
- <doc-code id="js" data-type="js" role="tabpanel">
127
- import Slider from "@natachah/vanilla-frontend/js/_slider"
128
- const sliderFade = document.getElementById('mySlider')
129
- if (sliderFade) {
130
-
131
- const mySliderObj = new Slider(sliderFade, {
132
- behavior: 'instant',
133
- autoplay: 4000
134
- })
135
-
136
- sliderFade.addEventListener('slider:changing', (ev) => {
137
- const currentSlide = mySliderObj._slides[ev.detail.previous]
138
- const src = currentSlide.querySelector('img').getAttribute('src')
139
- sliderFade.style.backgroundImage = `url("${src}")`
140
- })
141
-
142
- }
143
- </doc-code>
144
- </div>
145
-
146
- <h2>Javascript</h2>
147
- <blockquote>
148
- <p>To work properly the slider required some javascript.</p>
149
- </blockquote>
150
- <h3>Options</h3>
151
- <table>
152
- <thead>
153
- <tr>
154
- <th>Name</th>
155
- <th>Description</th>
156
- <th>Value</th>
157
- </tr>
158
- </thead>
159
- <tbody>
160
- <tr>
161
- <td data-label="Name">
162
- <p>behavior</p>
163
- </td>
164
- <td data-label="Description">
165
- <p>The scroll behavior inside the slider</p>
166
- </td>
167
- <td data-label="Value">
168
- <p><code>smooth</code> as string <em>can be auto, smooth or instant</em></p>
169
- </td>
170
- </tr>
171
- <tr>
172
- <td data-label="Name">
173
- <p>loop</p>
174
- </td>
175
- <td data-label="Description">
176
- <p>If set to <code>true</code>, the slider will work as a carousel</p>
177
- </td>
178
- <td data-label="Value">
179
- <p><code>false</code> as <code>boolean</code></p>
180
- </td>
181
- </tr>
182
- <tr>
183
- <td data-label="Name">
184
- <p>autoplay</p>
185
- </td>
186
- <td data-label="Description">
187
- <p>If set to <code>true</code>, the slider will automatically cycling</p>
188
- </td>
189
- <td data-label="Value">
190
- <p><code>false</code> as <code>boolean</code></p>
191
- </td>
192
- </tr>
193
- </tbody>
194
- </table>
195
- <doc-code data-type="js">
196
- new Slider(mySliderDiv, {
197
- behavior: 'smooth',
198
- loop: false,
199
- autoplay: false
200
- })
201
- </doc-code>
202
-
203
- <h3>Methods</h3>
204
- <table>
205
- <thead>
206
- <tr>
207
- <th>Method</th>
208
- <th>Description</th>
209
- </tr>
210
- </thead>
211
- <tbody>
212
- <tr>
213
- <td data-label="Method">
214
- <p>goTo(index)
215
- </td>
216
- <td data-label="Description">
217
- <p>Go to a specific slide by index starting by <code>0</code>
218
- </td>
219
- </tr>
220
- <tr>
221
- <td data-label="Method">
222
- <p>next()
223
- </td>
224
- <td data-label="Description">
225
- <p>Go to the next slide
226
- </td>
227
- </tr>
228
- <tr>
229
- <td data-label="Method">
230
- <p>prev()
231
- </td>
232
- <td data-label="Description">
233
- <p>Go to the previous slide
234
- </td>
235
- </tr>
236
- </tbody>
237
- </table>
238
-
239
- <h3>Events</h3>
240
- <table>
241
- <thead>
242
- <tr>
243
- <th>Event</th>
244
- <th>Description</th>
245
- <th>Value</th>
246
- </tr>
247
- </thead>
248
- <tbody>
249
- <tr>
250
- <td data-label="Event">
251
- <p>slider:changed</p>
252
- </td>
253
- <td data-label="Description">
254
- <p>This event is fired when the slide has been changed</p>
255
- </td>
256
- <td data-label="Value">
257
- <p><code>current</code> as a <code>index number</code></p>
258
- </td>
259
- </tr>
260
- </tbody>
261
- </table>
262
- <doc-code data-type="js">
263
- document.getElementById('mySliderId').addEventListener('slider:changed', (e) => {
264
- const theSlide = e.detail.current
265
- ...
266
- })
267
- </doc-code>
268
-
269
- </doc-layout>
270
- <script type="module" src="/main.js"></script>
271
- </body>
272
-
273
- </html>
package/docs/pages/javascript/autofill.html DELETED
@@ -1,170 +0,0 @@
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>&lt;input&gt;</code> fields by another.</p>
15
- <p>You can use it with a <code>&lt;select&gt;</code> tag with the <code>aria-controls=&quot;IdOfTheOtherField&quot;</code> attribute.</p>
16
- <p>The other field must have a <code>data-autofill=&quot;NameOfTheValue&quot;</code> attribute. The value must exist into the <code>&lt;option&gt;</code> tags as <code>data-NameOfTheValue=&quot;value&quot;</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>&lt;input&gt;</code> associated with a <code>&lt;datalist&gt;</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>&lt;option&gt;</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>
package/docs/pages/javascript/checkall.html DELETED
@@ -1,59 +0,0 @@
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 > Check all</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Check all</h1>
14
- <p>The check all component make you able to toggle a checkbox in relation of others.</p>
15
- <p>The <code>value</code> of the parent checkbox must be the <code>name</code> of the children.</p>
16
- <doc-demo>
17
- <input type="checkbox" id="demoCheckboxAll" name="all" value="checkbox[]">
18
- <label for="demoCheckboxAll">Check all</label>
19
- <fieldset>
20
- <legend>Choice</legend>
21
- <input type="checkbox" id="checkboxA" name="checkbox[]" value="a">
22
- <label for="checkboxA">A</label>
23
- <input type="checkbox" id="checkboxB" name="checkbox[]" value="b">
24
- <label for="checkboxB">B</label>
25
- <input type="checkbox" id="checkboxC" name="checkbox[]" value="c">
26
- <label for="checkboxC">B</label>
27
- </fieldset>
28
- </doc-demo>
29
-
30
- <div class="code-group">
31
- <div role="tablist">
32
- <button role="tab" aria-controls="html">HTML</button>
33
- <button role="tab" aria-controls="js">JS</button>
34
- </div>
35
- <doc-code id="html" data-type="html" role="tabpanel">
36
- <input type="checkbox" id="checkboxAll" name="all" value="check[]">
37
- <label for="checkboxAll">Check all</label>
38
- <fieldset>
39
- <legend>Choice</legend>
40
- <input type="checkbox" id="checkboxA" name="check[]" value="a">
41
- <label for="checkboxA">A</label>
42
- <input type="checkbox" id="checkboxB" name="check[]" value="b">
43
- <label for="checkboxB">B</label>
44
- <input type="checkbox" id="checkboxC" name="check[]" value="c">
45
- <label for="checkboxC">B</label>
46
- </fieldset>
47
- </doc-code>
48
- <doc-code id="js" data-type="js" role="tabpanel">
49
- import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
50
- const checkboxAll = document.getElementById('checkboxAll')
51
- if (checkboxAll) new CheckAll(checkboxAll)
52
- </doc-code>
53
- </div>
54
-
55
- </doc-layout>
56
- <script type="module" src="/main.js"></script>
57
- </body>
58
-
59
- </html>