@natachah/vanilla-frontend 0.4.1 → 1.0.1

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 (283) 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.1.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.zYBRMlen.js +1 -0
  51. package/public/assets/base_layout.md.DPVON1Hq.js +13 -0
  52. package/public/assets/base_layout.md.DPVON1Hq.lean.js +1 -0
  53. package/public/assets/base_media.md.DHSlU0g6.js +24 -0
  54. package/public/assets/base_media.md.DHSlU0g6.lean.js +1 -0
  55. package/public/assets/base_reset.md.DD9AA1li.js +3 -0
  56. package/public/assets/base_reset.md.DD9AA1li.lean.js +1 -0
  57. package/public/assets/base_typography.md.C9BVN1Re.js +87 -0
  58. package/public/assets/base_typography.md.C9BVN1Re.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.Cw4G3qNN.js +27 -0
  60. package/public/assets/chunks/framework.26dFs73Q.js +4 -0
  61. package/public/assets/chunks/theme.D1Tljxds.js +1 -0
  62. package/public/assets/classes_badge.md.EznZXXqT.js +24 -0
  63. package/public/assets/classes_badge.md.EznZXXqT.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.DrzF9h9m.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.DrzF9h9m.lean.js +1 -0
  66. package/public/assets/classes_card.md.BzNZEHe9.js +41 -0
  67. package/public/assets/classes_card.md.BzNZEHe9.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.CKZ2tv7T.js +70 -0
  69. package/public/assets/classes_dropdown.md.CKZ2tv7T.lean.js +1 -0
  70. package/public/assets/classes_grid.md.CKCvlWAg.js +45 -0
  71. package/public/assets/classes_grid.md.CKCvlWAg.lean.js +1 -0
  72. package/public/assets/classes_list.md.CjyB8PFK.js +36 -0
  73. package/public/assets/classes_list.md.CjyB8PFK.lean.js +1 -0
  74. package/public/assets/components_button.md.CX41PJBd.js +45 -0
  75. package/public/assets/components_button.md.CX41PJBd.lean.js +1 -0
  76. package/public/assets/components_dialog.md.JMjidrIE.js +76 -0
  77. package/public/assets/components_dialog.md.JMjidrIE.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.BwvLkFL_.js +53 -0
  79. package/public/assets/components_disclosure.md.BwvLkFL_.lean.js +1 -0
  80. package/public/assets/components_form.md.C6B5z_6G.js +122 -0
  81. package/public/assets/components_form.md.C6B5z_6G.lean.js +1 -0
  82. package/public/assets/components_loading.md.51ktm2_l.js +4 -0
  83. package/public/assets/components_loading.md.51ktm2_l.lean.js +1 -0
  84. package/public/assets/components_popover.md.DpbAjVUj.js +102 -0
  85. package/public/assets/components_popover.md.DpbAjVUj.lean.js +1 -0
  86. package/public/assets/components_progress.md.H7v6t9h-.js +6 -0
  87. package/public/assets/components_progress.md.H7v6t9h-.lean.js +1 -0
  88. package/public/assets/components_table.md.BPrpvUDy.js +75 -0
  89. package/public/assets/components_table.md.BPrpvUDy.lean.js +1 -0
  90. package/public/assets/index.md.DNiLOsZD.js +1 -0
  91. package/public/assets/index.md.DNiLOsZD.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.COaG5lWR.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.HyVx8c7W.js +49 -0
  107. package/public/assets/javascript_autofill.md.HyVx8c7W.lean.js +1 -0
  108. package/public/assets/javascript_check.md.BCbZtUBE.js +13 -0
  109. package/public/assets/javascript_check.md.BCbZtUBE.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.CQm191VA.js +20 -0
  111. package/public/assets/javascript_comfort.md.CQm191VA.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.CbDzabMd.js +29 -0
  113. package/public/assets/javascript_consent.md.CbDzabMd.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.CFVe2JRe.js +2 -0
  115. package/public/assets/javascript_cookie.md.CFVe2JRe.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.D_pT0mrZ.js +32 -0
  117. package/public/assets/javascript_drawer.md.D_pT0mrZ.lean.js +1 -0
  118. package/public/assets/javascript_form.md.sGYh1L4I.js +40 -0
  119. package/public/assets/javascript_form.md.sGYh1L4I.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.DeOZ4grw.js +30 -0
  121. package/public/assets/javascript_scroll.md.DeOZ4grw.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.CIa7pHr9.js +27 -0
  123. package/public/assets/javascript_slider.md.CIa7pHr9.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.CThHVTgW.js +35 -0
  125. package/public/assets/javascript_sortable.md.CThHVTgW.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.CxAFdAGU.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C66hpUWF.js +46 -0
  129. package/public/assets/javascript_toggle.md.C66hpUWF.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Dt2Rt__e.js +2 -0
  131. package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.COR-Pj1y.js +72 -0
  133. package/public/assets/javascript_tree.md.COR-Pj1y.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.wCplqeKt.js +34 -0
  135. package/public/assets/prologue_conventions.md.wCplqeKt.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CBJGKY_Y.js +1 -0
  137. package/public/assets/prologue_release.md.CBJGKY_Y.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.E_0GNNE2.js +1 -0
  139. package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js +1 -0
  140. package/public/assets/start_customization.md.C4fmzVYD.js +141 -0
  141. package/public/assets/start_customization.md.C4fmzVYD.lean.js +1 -0
  142. package/public/assets/start_install.md.vqLh01mm.js +46 -0
  143. package/public/assets/start_install.md.vqLh01mm.lean.js +1 -0
  144. package/public/assets/start_mixin.md.B5VMlbiN.js +85 -0
  145. package/public/assets/start_mixin.md.B5VMlbiN.lean.js +1 -0
  146. package/public/assets/style.Dl6gCPEE.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 +112 -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 +51 -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/base/_layout.scss +1 -0
  226. package/scss/base/_reset.scss +5 -0
  227. package/scss/components/_badge.scss +2 -1
  228. package/scss/components/_dropdown.scss +2 -2
  229. package/scss/components/_group.scss +8 -4
  230. package/scss/components/_popover.scss +74 -0
  231. package/scss/components/index.scss +1 -0
  232. package/scss/vanilla-frontend-doc.scss +46 -1
  233. package/scss/vanilla-frontend-sandbox.scss +34 -0
  234. package/vite.config.js +30 -0
  235. package/docs/index.html +0 -36
  236. package/docs/main-demo.js +0 -2
  237. package/docs/main.js +0 -34
  238. package/docs/pages/base/layout.html +0 -131
  239. package/docs/pages/base/media.html +0 -142
  240. package/docs/pages/base/reset.html +0 -53
  241. package/docs/pages/base/typography.html +0 -334
  242. package/docs/pages/components/button.html +0 -202
  243. package/docs/pages/components/dialog.html +0 -336
  244. package/docs/pages/components/disclosure.html +0 -174
  245. package/docs/pages/components/form.html +0 -427
  246. package/docs/pages/components/loading.html +0 -58
  247. package/docs/pages/components/progress.html +0 -47
  248. package/docs/pages/components/table.html +0 -168
  249. package/docs/pages/customs/badge.html +0 -150
  250. package/docs/pages/customs/breadcrumb.html +0 -67
  251. package/docs/pages/customs/card.html +0 -185
  252. package/docs/pages/customs/drawer.html +0 -149
  253. package/docs/pages/customs/dropdown.html +0 -270
  254. package/docs/pages/customs/grid.html +0 -185
  255. package/docs/pages/customs/list.html +0 -112
  256. package/docs/pages/customs/slider.html +0 -273
  257. package/docs/pages/javascript/autofill.html +0 -170
  258. package/docs/pages/javascript/checkall.html +0 -59
  259. package/docs/pages/javascript/comfort.html +0 -146
  260. package/docs/pages/javascript/consent.html +0 -112
  261. package/docs/pages/javascript/cookie.html +0 -81
  262. package/docs/pages/javascript/form.html +0 -199
  263. package/docs/pages/javascript/scroll.html +0 -209
  264. package/docs/pages/javascript/sortable.html +0 -167
  265. package/docs/pages/javascript/tabpanel.html +0 -89
  266. package/docs/pages/javascript/toggle.html +0 -193
  267. package/docs/pages/javascript/trap.html +0 -89
  268. package/docs/pages/javascript/tree.html +0 -256
  269. package/docs/pages/quick-start/conventions.html +0 -112
  270. package/docs/pages/quick-start/customization.html +0 -187
  271. package/docs/pages/quick-start/installation.html +0 -97
  272. package/docs/pages/quick-start/mixins.html +0 -214
  273. package/docs/src/js/demo.js +0 -110
  274. package/docs/src/js/doc-code.js +0 -102
  275. package/docs/src/js/doc-demo.js +0 -14
  276. package/docs/src/js/doc-layout.js +0 -117
  277. package/docs/src/scss/demo.scss +0 -77
  278. package/docs/src/scss/layout.scss +0 -83
  279. package/docs/src/scss/style.scss +0 -278
  280. package/docs/vite.config.mjs +0 -23
  281. package/esbuild.mjs +0 -25
  282. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  283. package/vitest.config.js +0 -8
package/docs/pages/javascript/scroll.html DELETED
@@ -1,209 +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 > Scroll</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Scroll</h1>
14
- <p>The scroll component make you able to add some <code>&lt;button&gt;</code> to go on the top or bottom of an element.</p>
15
- <doc-demo>
16
- <nav id="demoScrollNav">
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
- <li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
22
- <li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
23
- </ul>
24
- </nav>
25
- <div id="demoScrollSpy" style="height: 150px; overflow-y: scroll; position: relative">
26
- <div>
27
- <p id="target1">1) Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis in dolore exercitationem, quibusdam repellat perspiciatis qui deleniti commodi reiciendis provident dolorem libero velit, ipsam inventore laudantium, maxime repudiandae minima. Sunt?</p>
28
- <p id="target2">2) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
29
- <p id="target3">3) Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.Lorem, ipsum dolor sit amet consectetur adipisicing elit. At excepturi ratione modi vero eligendi doloremque architecto ab quaerat delectus minima doloribus, ut, sint eos ipsam impedit reprehenderit hic, labore voluptas.</p>
30
- </div>
31
- </div>
32
- </doc-demo>
33
-
34
- <blockquote class="tip">
35
- <p>To work on the body, you must passed the <code>document.documentElement</code> as parameter.</p>
36
- </blockquote>
37
-
38
- <div class="code-group">
39
- <div role="tablist">
40
- <button role="tab" aria-controls="html">HTML</button>
41
- <button role="tab" aria-controls="js">JS</button>
42
- </div>
43
- <doc-code id="html" data-type="html" role="tabpanel">
44
- <button data-scroll-bottom="scrollSpy">Scroll to the bottom</button>
45
- <button data-scroll-top="scrollSpy">Scroll to the top</button>
46
- </doc-code>
47
- <doc-code id="js" data-type="js" role="tabpanel">
48
- import Scroll from "@natachah/vanilla-frontend/js/_scroll"
49
- new Scroll(document.documentElement)
50
- </doc-code>
51
- </div>
52
-
53
- <p>It also make you able to spy on a <code>&lt;nav&gt;</code> to automatically set the current attribute on links when scrolling.</p>
54
-
55
- <div class="code-group">
56
- <div role="tablist">
57
- <button role="tab" aria-controls="html">HTML</button>
58
- <button role="tab" aria-controls="js">JS</button>
59
- </div>
60
- <doc-code id="html" data-type="html" role="tabpanel">
61
- <nav id="scrollNav">
62
- <a href="#target1">One</a>
63
- <a href="#target2">Two</a>
64
- <a href="#target3">Three</a>
65
- </nav>
66
-
67
- <div id="scrollSpy" style="height: 250px; overflow-y: scroll; position: relative">
68
- <div>
69
- <p id="target1">...</p>
70
- <p id="target2">...</p>
71
- <p id="target3">...</p>
72
- </div>
73
- </div>
74
- </doc-code>
75
- <doc-code id="js" data-type="js" role="tabpanel">
76
- import Scroll from "@natachah/vanilla-frontend/js/_scroll"
77
- const scrollSpy = document.getElementById('scrollSpy')
78
- if (scrollSpy) {
79
- new Scroll(scrollSpy,{
80
- navigation: 'scrollNav'
81
- })
82
- }
83
- </doc-code>
84
- </div>
85
-
86
- <h2>Javascript</h2>
87
- <p>To enable this component you need to import the javascript file and create a new Scroll object.</p>
88
-
89
- <h3>Options</h3>
90
- <table>
91
- <thead>
92
- <tr>
93
- <th>Option</th>
94
- <th>Description</th>
95
- <th>Value</th>
96
- </tr>
97
- </thead>
98
- <tbody>
99
- <tr>
100
- <td data-label="Option">
101
- <p>behavior</p>
102
- </td>
103
- <td data-label="Description">
104
- <p>The scroll behavior</p>
105
- </td>
106
- <td data-label="Value">
107
- <p><code>smooth</code> as string <em>can be auto, smooth or instant</em></p>
108
- </td>
109
- </tr>
110
- <tr>
111
- <td data-label="Option">
112
- <p>navigation</p>
113
- </td>
114
- <td data-label="Description">
115
- <p>The id of the navigation to spy</p>
116
- </td>
117
- <td data-label="Value">
118
- <p><code>null</code> as NULL or a string</p>
119
- </td>
120
- </tr>
121
- <tr>
122
- <td data-label="Option">
123
- <p>gaps.top</p>
124
- </td>
125
- <td data-label="Description">
126
- <p>The distance when to toggle the go top button</p>
127
- </td>
128
- <td data-label="Value">
129
- <p><code>100</code> as number</p>
130
- </td>
131
- </tr>
132
- <tr>
133
- <td data-label="Option">
134
- <p>gaps.bottom</p>
135
- </td>
136
- <td data-label="Description">
137
- <p>The distance when to toggle the go bottom button</p>
138
- </td>
139
- <td data-label="Value">
140
- <p><code>100</code> as number</p>
141
- </td>
142
- </tr>
143
- <tr>
144
- <td data-label="Option">
145
- <p>gaps.spy</p>
146
- </td>
147
- <td data-label="Description">
148
- <p>The distance when change the navigation current</p>
149
- </td>
150
- <td data-label="Value">
151
- <p><code>100</code> as number</p>
152
- </td>
153
- </tr>
154
- </tbody>
155
- </table>
156
-
157
- <doc-code data-type="js">
158
- new Scroll(myElement,{
159
- behavior: 'smooth'
160
- navigation: 'scrollNav',
161
- gaps: {
162
- top: 200,
163
- bottom: 200,
164
- spy: 100
165
- }
166
- }))
167
- </doc-code>
168
-
169
- <h3>Methods</h3>
170
- <table>
171
- <thead>
172
- <tr>
173
- <th>Method</th>
174
- <th>Description</th>
175
- </tr>
176
- </thead>
177
- <tbody>
178
- <tr>
179
- <td data-label="Method">
180
- <p>goTo(distance)</p>
181
- </td>
182
- <td data-label="Description">
183
- <p>This method will go to a specific position</p>
184
- </td>
185
- </tr>
186
- <tr>
187
- <td data-label="Method">
188
- <p>scrollTop()</p>
189
- </td>
190
- <td data-label="Description">
191
- <p>This method will go to the top of the element</p>
192
- </td>
193
- </tr>
194
- <tr>
195
- <td data-label="Method">
196
- <p>scrollBottom()</p>
197
- </td>
198
- <td data-label="Description">
199
- <p>This method will go to the bottom of the element</p>
200
- </td>
201
- </tr>
202
- </tbody>
203
- </table>
204
-
205
- </doc-layout>
206
- <script type="module" src="/main.js"></script>
207
- </body>
208
-
209
- </html>
package/docs/pages/javascript/sortable.html DELETED
@@ -1,167 +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 > Sortable</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Sortable</h1>
14
- <p>The sortable component make you able to change the order of a list.</p>
15
- <p>The list can be an <code>&lt;ul&gt;</code>, <code>&lt;ol&gt;</code>, <code>&lt;div&gt;</code> or <code>&lt;tbody&gt;</code> tag.</p>
16
- <p>Each children must have a <code>draggable=&quot;false&quot;</code> attribute. The attribute will be changed when drag start.</p>
17
- <doc-demo>
18
- <ul class="demo-sortable">
19
- <li draggable="false">Lorem, ipsum.</li>
20
- <li draggable="false">Impedit, quod!</li>
21
- <li draggable="false">Repudiandae, rerum.</li>
22
- <li draggable="false">Ab, doloremque!</li>
23
- <li draggable="false">Totam, consectetur.</li>
24
- <li draggable="false">Laborum, cum!</li>
25
- </ul>
26
- </doc-demo>
27
-
28
- <div class="code-group">
29
- <div role="tablist">
30
- <button role="tab" aria-controls="html">HTML</button>
31
- <button role="tab" aria-controls="js">JS</button>
32
- </div>
33
- <doc-code id="html" data-type="html" role="tabpanel">
34
- <ul id="mySortableList">
35
- <li draggable="false">Lorem, ipsum.</li>
36
- <li draggable="false">Impedit, quod!</li>
37
- <li draggable="false">Repudiandae, rerum.</li>
38
- <li draggable="false">Ab, doloremque!</li>
39
- <li draggable="false">Totam, consectetur.</li>
40
- <li draggable="false">Laborum, cum!</li>
41
- </ul>
42
- </doc-code>
43
- <doc-code id="js" data-type="js" role="tabpanel">
44
- import Sortable from "@natachah/vanilla-frontend/js/_sortable"
45
- const myList = document.getElementById('mySortableList')
46
- if (myList) new Sortable(myList)
47
- </doc-code>
48
- </div>
49
-
50
- <h2 id="handle">Handle</h2>
51
- <p>You can decide which part of the item is draggable with the <code>data-handle="sortable"</code> attribute</p>
52
- <doc-demo>
53
- <ul class="demo-sortable">
54
- <li draggable=" false">
55
- <span data-handle="sortable">
56
- HANDLE
57
- </span>
58
- Lorem, ipsum.
59
- </li>
60
- <li draggable="false">
61
- <span data-handle="sortable">
62
- HANDLE
63
- </span>
64
- Impedit, quod!
65
- </li>
66
- <li draggable="false">
67
- <span data-handle="sortable">
68
- HANDLE
69
- </span>
70
- Repudiandae, rerum.
71
- </li>
72
- </ul>
73
- </doc-demo>
74
-
75
- <doc-code>
76
- <ul id="mySortableListWithHandle">
77
- <li draggable="false">
78
- <span data-handle="sortable">
79
- Handle
80
- </span>
81
- Lorem, ipsum.
82
- </li>
83
- <li draggable="false">
84
- <span data-handle="sortable">
85
- Handle
86
- </span>
87
- Impedit, quod!
88
- </li>
89
- <li draggable="false">
90
- <span data-handle="sortable">
91
- Handle
92
- </span>
93
- Repudiandae, rerum.
94
- </li>
95
- </ul>
96
- </doc-code>
97
-
98
- <h2 id="javascript">Javascript</h2>
99
- <p>To enable this component you need to import the javascript file and create a new Sortable object.</p>
100
- <h3>Methods</h3>
101
- <table>
102
- <thead>
103
- <tr>
104
- <th>Method</th>
105
- <th>Description</th>
106
- </tr>
107
- </thead>
108
- <tbody>
109
- <tr>
110
- <td data-label="Method">
111
- <p>resetEvents()</p>
112
- </td>
113
- <td data-label="Description">
114
- <p>This method will reset the items and events</p>
115
- </td>
116
- </tr>
117
- </tbody>
118
- </table>
119
- <h3 id="events">Events</h3>
120
- <table>
121
- <thead>
122
- <tr>
123
- <th>Event</th>
124
- <th>Description</th>
125
- <th>Value</th>
126
- </tr>
127
- </thead>
128
- <tbody>
129
- <tr>
130
- <td data-label="Event">
131
- <p>sortable:drag</p>
132
- </td>
133
- <td data-label="Description">
134
- <p>This event is fired when the you start dragging an item</p>
135
- </td>
136
- <td data-label="Value">
137
- <p><code>items</code> as a <code>Collection</code> and <code>current</code> as <code>HTMLElement</code></p>
138
- </td>
139
- </tr>
140
- <tr>
141
- <td data-label="Event">
142
- <p>sortable:drop</p>
143
- </td>
144
- <td data-label="Description">
145
- <p>This event is fired when the you drop an item</p>
146
- </td>
147
- <td data-label="Value">
148
- <p><code>items</code> as a <code>Collection</code> and <code>current</code> as <code>HTMLElement</code></p>
149
- </td>
150
- </tr>
151
- </tbody>
152
- </table>
153
-
154
- <doc-code data-type="js">
155
- const mySortable = document.getElementById('mySortableList')
156
- mySortable.addEventListener('sortable:drag', (e) => {
157
- const theCollectionOfItems = e.detail.items
158
- const thecurrentItem = e.detail.current
159
- ...
160
- })
161
- </doc-code>
162
-
163
- </doc-layout>
164
- <script type="module" src="/main.js"></script>
165
- </body>
166
-
167
- </html>
package/docs/pages/javascript/tabpanel.html DELETED
@@ -1,89 +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 > 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>&lt;button&gt;</code>.</p>
15
- <p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</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" aria-label="My demo tabpanel">
27
- <button id="tab-1" role="tab" aria-controls="one">One</button>
28
- <button id="tab-2" role="tab" aria-controls="two">Two</button>
29
- </div>
30
- <div id="one" role="tabpanel" aria-labelledby="tab-1">
31
- This is the first panel
32
- </div>
33
- <div id="two" role="tabpanel" aria-labelledby="tab-2">
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>
package/docs/pages/javascript/toggle.html DELETED
@@ -1,193 +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 > Toggle</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Toggle</h1>
14
- <p>The toggle component make you able to show/hide some elements by a <code>&lt;button&gt;</code>.</p>
15
- <p>The button must have an <code>aria-controls=&quot;IdOfElement&quot;</code>, an <code>aria-expanded</code> and a <code>aria-pressed</code> attributes.</p>
16
- <doc-demo>
17
- <button class="demo-toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
18
- <div id="collapse" tabindex="0" hidden>
19
- Hello there !
20
- </div>
21
- </doc-demo>
22
-
23
- <div class="code-group">
24
- <div role="tablist">
25
- <button role="tab" aria-controls="html">HTML</button>
26
- <button role="tab" aria-controls="js">JS</button>
27
- </div>
28
- <doc-code id="html" data-type="html" role="tabpanel">
29
- <button id="toggle" aria-controls="collapse" aria-expanded="false" aria-pressed="false">Toggle</button>
30
- <div id="collapse" tabindex="0" hidden>
31
- Hello there !
32
- </div>
33
- </doc-code>
34
- <doc-code id="js" data-type="js" role="tabpanel">
35
- import Toggle from "@natachah/vanilla-frontend/js/_toggle"
36
- const toggle = document.getElementById('toggle')
37
- if (toggle) new Toggle(toggle)
38
- </doc-code>
39
- </div>
40
-
41
- <blockquote class="tip">
42
- <p>The <code>aria-controls</code> can have multiple IDs split by a comma.</p>
43
- </blockquote>
44
-
45
- <h2>Toggle by form</h2>
46
- <p>The component also work with some form fields as <b>checkbox</b> and <b>radio</b>.</p>
47
- <doc-demo>
48
- <fieldset>
49
- <legend>Checkboxes</legend>
50
- <input class="demo-toggle" id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
51
- <label for="cA">Toggle A</label>
52
- <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
53
- <label for="cB">Toggle B</label>
54
- </fieldset>
55
- <div id="checkboxA" hidden>Hello there, I&#39;m A !</div>
56
- <div id="checkboxB" hidden>Hello there, I&#39;m B !</div>
57
- <hr style="margin-block:1rem">
58
- <fieldset>
59
- <legend>radios</legend>
60
- <input class="demo-toggle" id="rA" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
61
- <label for="rA">Toggle A</label>
62
- <input class="demo-toggle" id="rB" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
63
- <label for="rB">Toggle B</label>
64
- <input class="demo-toggle" id="rC" type="radio" name="radio" value="c">
65
- <label for="rC">Toggle C</label>
66
- </fieldset>
67
- <div id="radioA" hidden>Hello there, I&#39;m A !</div>
68
- <div id="radioB" hidden>Hello there, I&#39;m B !</div>
69
- </doc-demo>
70
-
71
- <div class="code-group">
72
- <div role="tablist">
73
- <button role="tab" aria-controls="checkboxes">Checkboxes</button>
74
- <button role="tab" aria-controls="radios">Radios</button>
75
- </div>
76
- <doc-code id="checkboxes" data-type="html" role="tabpanel">
77
- <fieldset>
78
- <legend>Toggles</legend>
79
- <input id="cA" type="checkbox" aria-controls="checkboxA" aria-expanded="false">
80
- <label for="cA">Toggle A</label>
81
- <input class="demo-toggle" id="cB" type="checkbox" aria-controls="checkboxB" aria-expanded="false">
82
- <label for="cB">Toggle B</label>
83
- </fieldset>
84
-
85
- <div id="checkboxA" hidden>Hello there, I'm A !</div>
86
- <div id="checkboxB" hidden>Hello there, I'm B !</div>
87
- </doc-code>
88
- <doc-code id="radios" data-type="html" role="tabpanel">
89
- <fieldset>
90
- <legend>Toggles</legend>
91
- <input id="rA" type="radio" name="radio" aria-controls="radioA" aria-expanded="false" value="a">
92
- <label for="rA">Toggle A</label>
93
- <input id="rB" type="radio" name="radio" aria-controls="radioB" aria-expanded="false" value="b">
94
- <label for="rB">Toggle B</label>
95
- <input id="rC" type="radio" name="radio" value="c">
96
- <label for="rC">Toggle C</label>
97
- </fieldset>
98
-
99
- <div id="radioA" hidden>Hello there, I'm A !</div>
100
- <div id="radioB" hidden>Hello there, I'm B !</div>
101
- </doc-code>
102
- </div>
103
-
104
- <p>It also work with the <b>switch</b> fields.
105
- You can tell when display the element via the <code>data-toggle-when=&quot;value&quot;</code> attribute.</p>
106
- <doc-demo>
107
- <input id="switch" class="demo-toggle" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
108
- <label for="switch">Switch</label>
109
- <div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
110
- <div id="switchB" data-toggle-when="false">This is FALSE</div>
111
- </doc-demo>
112
-
113
- <doc-code>
114
- <input id="switch" type="checkbox" role="switch" aria-controls="switchA switchB" aria-expanded="true">
115
- <label for="switch">Switch</label>
116
- <div id="switchA" data-toggle-when="true" hidden>This is TRUE</div>
117
- <div id="switchB" data-toggle-when="false">This is FALSE</div>
118
- </doc-code>
119
-
120
- <p>The component also work with <code>&lt;select&gt;</code> and it support the <code>&lt;optgroup&gt;</code>.</p>
121
- <doc-demo>
122
- <select class="demo-toggle" name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
123
- <option value="null">--</option>
124
- <option value="A">aaa</option>
125
- <option value="B">bbb</option>
126
- <optgroup label="group">
127
- <option value="C">ccc</option>
128
- <option value="D">ddd</option>
129
- </optgroup>
130
- </select>
131
- <div id="selectA" data-toggle-when="A" hidden>Hello there, I&#39;m A !</div>
132
- <div id="selectB" data-toggle-when="B" hidden>Hello there, I&#39;m B !</div>
133
- <div id="selectG" data-toggle-when="group" hidden>Hello there, I&#39;m GROUP for C or D !</div>
134
- <div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I&#39;m present if not A !</div>
135
- </doc-demo>
136
-
137
- <doc-code>
138
- <select name="select" aria-controls="selectA selectB selectG selectNot" aria-expanded="false">
139
- <option value="null">--</option>
140
- <option value="A">aaa</option>
141
- <option value="B">bbb</option>
142
- <optgroup label="mygroup">
143
- <option value="C">ccc</option>
144
- <option value="D">ddd</option>
145
- </optgroup>
146
- </select>
147
-
148
- <div id="selectA" data-toggle-when="A" hidden>Hello there, I'm A !</div>
149
- <div id="selectB" data-toggle-when="B" hidden>Hello there, I'm B !</div>
150
- <div id="selectG" data-toggle-when="mygroup" hidden>Hello there, I'm GROUP for C or D !</div>
151
- <div id="selectNot" data-toggle-when-not="A" hidden>Hello there, I'm present if not A !</div>
152
- </doc-code>
153
-
154
- <h2>Javascript</h2>
155
- <p>To enable this component you need to import the javascript file and create a new Toggle object.</p>
156
-
157
- <h3>Events</h3>
158
- <table>
159
- <thead>
160
- <tr>
161
- <th>Event</th>
162
- <th>Description</th>
163
- <th>Value</th>
164
- </tr>
165
- </thead>
166
- <tbody>
167
- <tr>
168
- <td data-label="Event">
169
- <p>toggle:changed</p>
170
- </td>
171
- <td data-label="Description">
172
- <p>This event is fired when the value as been changed</p>
173
- </td>
174
- <td data-label="Value">
175
- <p>-</p>
176
- </td>
177
- </tr>
178
- </tbody>
179
- </table>
180
-
181
- <doc-code data-type="js">
182
- const myToggle = document.getElementById('myToggle')
183
- myToggle.addEventListener('toggle:changed', () => {
184
- console.log('It has changed !')
185
- })
186
- </doc-code>
187
-
188
-
189
- </doc-layout>
190
- <script type="module" src="/main.js"></script>
191
- </body>
192
-
193
- </html>