@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/javascript/check.md ADDED
@@ -0,0 +1,53 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Check all <Badge type="warning" text="JS" />
6
+
7
+ ```js
8
+ import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
9
+ ```
10
+
11
+ ## Syntax
12
+
13
+ The check all component make you able to toggle a checkbox in relation of others.
14
+
15
+ The value of the parent checkbox must be the name of the children.
16
+
17
+ <ComponentPreview>
18
+ <input type="checkbox" id="checkboxAll" name="all" value="check[]">
19
+ <label for="checkboxAll">Check all</label>
20
+ <fieldset>
21
+ <legend>Choices</legend>
22
+ <input type="checkbox" id="checkboxA" name="check[]" value="a">
23
+ <label for="checkboxA">A</label>
24
+ <input type="checkbox" id="checkboxB" name="check[]" value="b">
25
+ <label for="checkboxB">B</label>
26
+ <input type="checkbox" id="checkboxC" name="check[]" value="c">
27
+ <label for="checkboxC">C</label>
28
+ </fieldset>
29
+ </ComponentPreview>
30
+
31
+ ::: code-group
32
+
33
+ ```html
34
+ <input type="checkbox" id="checkboxAll" name="all" value="check[]">
35
+ <label for="checkboxAll">Check all</label>
36
+ <fieldset>
37
+ <legend>Choices</legend>
38
+ <input type="checkbox" id="checkboxA" name="check[]" value="a">
39
+ <label for="checkboxA">A</label>
40
+ <input type="checkbox" id="checkboxB" name="check[]" value="b">
41
+ <label for="checkboxB">B</label>
42
+ <input type="checkbox" id="checkboxC" name="check[]" value="c">
43
+ <label for="checkboxC">C</label>
44
+ </fieldset>
45
+ ```
46
+
47
+ ```js
48
+ import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
49
+ const checkboxAll = document.getElementById('checkboxAll')
50
+ if (checkboxAll) new CheckAll(checkboxAll)
51
+ ```
52
+
53
+ :::
package/docs/javascript/comfort.md ADDED
@@ -0,0 +1,125 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Comfort <Badge type="warning" text="JS" />
6
+
7
+ ```js
8
+ import Comfort from "@natachah/vanilla-frontend/js/_comfort"
9
+ ```
10
+
11
+ ## Syntax
12
+
13
+ You can change the CSS custom properties of a website with the comfort component.
14
+
15
+ You can triggered changes by using some `<button>` tags or with some javascript methods.
16
+ The changes are saved into a cookie.
17
+
18
+ An `aria-pressed` attribute will be automatically added to the `<button>` tag.
19
+
20
+ ### Themes
21
+
22
+ You can change the global theme via some `<button>` tag with the `data-theme` and value attributes.
23
+
24
+ Or you can use the javascript method `setTheme(value)`.
25
+
26
+ In both case, it will add a `data-theme` attribute on the `<html>` tag of your website.
27
+
28
+ <ComponentPreview>
29
+ <p class="demo-theme">Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
30
+ <button data-theme value="light">Light theme</button>
31
+ <button data-theme value="dark">Dark theme</button>
32
+ </ComponentPreview>
33
+
34
+ ::: code-group
35
+
36
+ ```html
37
+ <p class="demo-theme">Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
38
+ <button data-theme value="light">Light theme</button>
39
+ <button data-theme value="dark">Dark theme</button>
40
+ ```
41
+
42
+ ```css
43
+ html[data-theme=light] .demo-theme {
44
+ color: black;
45
+ background: white
46
+ }
47
+ html[data-theme=dark] .demo-theme {
48
+ color: white;
49
+ background: black
50
+ }
51
+ ```
52
+
53
+ ```js
54
+ import Comfort from "@natachah/vanilla-frontend/js/_comfort"
55
+ const myComfort = new Comfort('my_custom_cookie_name')
56
+ myComfort.setTheme('myThemeName')
57
+ ```
58
+
59
+ :::
60
+
61
+ ### Styles
62
+
63
+ You can change some styling properties with some `<button>` tag with the `data-style="NameOfTheCSSProperty"` and `value` attributes.
64
+
65
+ Or use the javascript method `setStyle(NameOfTheCSSProperty,value)`.
66
+
67
+ <ComponentPreview>
68
+ <p>Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
69
+ <button data-style="--font-size" value="1rem">1 rem</button>
70
+ <button data-style="--font-size" value="1.5rem">1.5 rem</button>
71
+ <button data-style="--font-size" value="2rem">2 rem</button>
72
+ </ComponentPreview>
73
+
74
+ ::: code-group
75
+
76
+ ```html
77
+ <p>Lorem ipsum sit amet consectetur adipisicing elit. Quos consequatur omnis velit saepe suscipit? Ab ut assumenda nesciunt, veritatis beatae temporibus facilis quis earum vero officia explicabo veniam tempore voluptatibus?</p>
78
+ <button data-style="--font-size" value="1rem">1 rem</button>
79
+ <button data-style="--font-size" value="1.5rem">1.5 rem</button>
80
+ <button data-style="--font-size" value="2rem">2 rem</button>
81
+ ```
82
+
83
+ ```css
84
+ body {
85
+ font-size: var(--font-size)
86
+ }
87
+ ```
88
+
89
+ ```js
90
+ import Comfort from "@natachah/vanilla-frontend/js/_comfort"
91
+ const myComfort = new Comfort('my_custom_cookie_name')
92
+ myComfort.setStyle('--font-size','3rem')
93
+ ```
94
+
95
+ :::
96
+
97
+ You can also set a custom style by value with some `<input>` tag with the `data-style-custom="NameOfTheCSSProperty"` and value attributes.
98
+
99
+ <ComponentPreview>
100
+ <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
101
+ <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color">
102
+ </ComponentPreview>
103
+
104
+ ```html
105
+ <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
106
+ <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color">
107
+ ```
108
+
109
+ ## Javascript
110
+
111
+ To enable this component you need to import the javascript file and create a `new Comfort` object.
112
+
113
+ You can customize the name of the cookie when initiate the component.
114
+
115
+ ### Methods
116
+
117
+ | Method | Description |
118
+ | --- | --- |
119
+ | setTheme(value) | This method will set a global theme |
120
+ | setStyle(name,value) | This method will set a specific property |
121
+ | reset() | This method will reset all the value and delete the cookie |
122
+
123
+ ::: warning
124
+ This component is an extension of the Cookie component, who come with it's own methods and events.
125
+ :::
package/docs/javascript/consent.md ADDED
@@ -0,0 +1,89 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Consent <Badge type="warning" text="JS" />
6
+
7
+ ```js
8
+ import Consent from "@natachah/vanilla-frontend/js/_consent"
9
+ ```
10
+
11
+ ## Syntax
12
+
13
+ The consent component help you to manage the **Cookies** for the **RGPD** law.
14
+
15
+ This component required a `<dialog>`, and the component will open it if the cookies are not already saved.
16
+
17
+ <ComponentPreview height="200px">
18
+ <dialog id="demoCookies" aria-labelledby="cookiesTitle">
19
+ <div>
20
+ <h1 id="cookiesTitle">Cookies Consent</h1>
21
+ <p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience !</p>
22
+ <button data-dialog-close>Ok</button>
23
+ </div>
24
+ </dialog>
25
+ </ComponentPreview>
26
+
27
+ ::: code-group
28
+
29
+ ```html
30
+ <dialog id="demoCookies" aria-labelledby="cookiesTitle">
31
+ <div>
32
+ <h1 id="cookiesTitle">Cookies Consent</h1>
33
+ <p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience !</p>
34
+ <button data-dialog-close>Ok</button>
35
+ </div>
36
+ </dialog>
37
+ ```
38
+
39
+ ```js
40
+ import Consent from "@natachah/vanilla-frontend/js/_consent"
41
+ if (document.getElementById('demoCookies')) {
42
+ const cookieConsent = new Consent('my_custom_cookie_name')
43
+ }
44
+ ```
45
+
46
+ :::
47
+
48
+ ### Options
49
+
50
+ You can save some options as preference (aka. custom values) by adding a `<form>` inside the `<dialog>`.
51
+
52
+ Make sure to have a `<button>` to ONLY save the necessary, and one to submit the form.
53
+
54
+ ```html
55
+ <dialog id="demoCookiesPreferences" aria-labelledby="cookiesTitle">
56
+ <div id="cookiesTitle">
57
+ <h1>Cookies Consent</h1>
58
+ <p><b>Accept:</b> will save the checkboxes</p>
59
+ <p><b>Decline:</b> will ONLY save the necessary</p>
60
+ <form method="dialog">
61
+ <fieldset>
62
+ <input type="checkbox" id="cookieNecessary" name="cookies_consent[]" value="necessary" disabled checked>
63
+ <label for="cookieNecessary">Strictly necessary</label>
64
+ <input type="checkbox" id="cookieAnalytic" name="cookies_consent[]" value="analytic">
65
+ <label for="cookieAnalytic">Analytic</label>
66
+ <input type="checkbox" id="cookieMarketing" name="cookies_consent[]" value="marketing">
67
+ <label for="cookieMarketing">Marketing</label>
68
+ </fieldset>
69
+ <button type="submit">Accept</button>
70
+ <button data-dialog-close>Decline</button>
71
+ </form>
72
+ </div>
73
+ </dialog>
74
+ ```
75
+
76
+ ## Javascript
77
+
78
+ To enable this component you need to import the javascript file and create a `new Consent` object.
79
+
80
+ You can customize the name of the cookie and the ID of the `<dialog>` when initiate the component.
81
+
82
+ ```js
83
+ import Consent from "@natachah/vanilla-frontend/js/_consent"
84
+ const cookieConsent = new Consent('my_custom_cookie_name', 'my_custom_dialog_id')
85
+ ```
86
+
87
+ ::: warning
88
+ This component is an extension of the Cookie component, who come with it's own methods and events.
89
+ :::
package/docs/javascript/cookie.md ADDED
@@ -0,0 +1,33 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Cookie <Badge type="warning" text="JS" />
6
+
7
+ The cookies component make you able to save some data as a cookie.
8
+
9
+ ```js
10
+ import Cookie from "@natachah/vanilla-frontend/js/_cookie"
11
+ ```
12
+
13
+ ## Javascript
14
+
15
+ This component is only in javascript, to use it you must import the javascript file and create a `new Cookie` object.
16
+
17
+ You can customize the name of the cookie when initiate the component.
18
+
19
+ ```js
20
+ import Cookie from "@natachah/vanilla-frontend/js/utilities/_cookie"
21
+ new Cookie('name_of_the_cookie')
22
+ ```
23
+
24
+ ### Methods
25
+
26
+ | Method | Description |
27
+ | --- | --- |
28
+ | value | This GET method will return the full cookie value |
29
+ | set(value) | This method will save a value as a cookie, the value must be an Object |
30
+ | has(key) | This method will check if the cookie has a certain key |
31
+ | get(key) | This method will get a key/value saved inside the cookie |
32
+ | delete() | This method will delete the cookie |
33
+
package/docs/javascript/drawer.md ADDED
@@ -0,0 +1,99 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Drawer <Badge type="warning" text="JS" />
6
+
7
+ The drawer component make you able to toggle a drawer with a button and resize window.
8
+
9
+ ```scss
10
+ @use '@natachah/vanilla-frontend/scss/components/drawer';
11
+ ```
12
+
13
+ ## Syntax
14
+
15
+ You can use the classes `.drawer`, `.drawer-button` and the id `#backdrop` to quickly design the drawer with some nice animations.
16
+
17
+ <ComponentPreview height="200px">
18
+ <div id="backdrop"></div>
19
+ <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
20
+ Menu
21
+ </button>
22
+ <div id="drawer" class="drawer" hidden>
23
+ My awsome drawer !
24
+ </div>
25
+ </ComponentPreview>
26
+
27
+ ::: code-group
28
+
29
+ ```html
30
+ <div id="backdrop"></div>
31
+ <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
32
+ Menu
33
+ </button>
34
+ <div id="drawer" class="drawer" hidden>
35
+ My awsome drawer !
36
+ </div>
37
+ ```
38
+
39
+ ```css [css properties]
40
+ --drawer-display
41
+ --drawer-background
42
+ --drawer-index
43
+ --drawer-position
44
+ --drawer-width
45
+ --drawer-height
46
+ --drawer-max-width
47
+ --drawer-max-height
48
+ --drawer-origin
49
+ --drawer-animation
50
+ --drawer-transform
51
+ --drawer-backdrop-color
52
+ --drawer-backdrop-filter
53
+ --svg-line-size
54
+ ```
55
+
56
+ ```js
57
+ import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
58
+ const drawer = document.getElementById('drawer')
59
+ if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: 'name-of-my-cookie' })
60
+ ```
61
+
62
+ :::
63
+
64
+ The `#backdrop` must be a child of the `<body>` !
65
+
66
+ And the default CSS breakpoint to view the backdrop is **960px**.
67
+
68
+ ## Javascript
69
+
70
+ This component is mostly in javascript, to use it you must import the javascript file and create a `new Drawer` object.
71
+
72
+ You can have a Backdrop if you want to make it more like a drawer opening on the front of the content, you juste need a `#backdrop` somewhere on your page.
73
+
74
+ ### Options
75
+
76
+ | Name | Description | Value |
77
+ |---|---|---|
78
+ | breakpoint | The breakpoint to open/close the drawer | `960` as an int |
79
+ | cookie | The cookie name to save if you want to keep it open/close on refresh | `false` by default, or a string |
80
+ | trap.exclusions | The elements that should not be inert for Accessibility | `['#backdrop']` by default, or an `Array` |
81
+ | trap.inclusions | The elements to include into the **TAB** trap focus | `null` by default, or an `Array` |
82
+
83
+ ```js
84
+ // E.G. basic opening
85
+ import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
86
+ const drawer = document.getElementById('drawer')
87
+ if (drawer) new Drawer(drawer, {
88
+ breakpoint : 960,
89
+ cookie: '_drawer-cookie',
90
+ trap: {
91
+ exclusions: ['#backdrop', '#toggleMenu'],
92
+ inclusions: ['#toggleMenu']
93
+ }
94
+ })
95
+ ```
96
+
97
+ ::: tip
98
+ If your website use the **Comfort JS** component, you should use the same cookie name for both as it will combine the values.
99
+ :::
package/docs/javascript/form.md ADDED
@@ -0,0 +1,130 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Form <Badge type="warning" text="JS" />
6
+
7
+ ```js
8
+ import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
9
+ ```
10
+
11
+ ## Password visibility
12
+
13
+ You can toggle the visibility of a password field.
14
+
15
+ The `<button>` must have an `aria-controls="IdOfTheInput"` and an `aria-pressed` attributes.
16
+
17
+ This helper gonna change the type of the input, and it will toggle the `aria-pressed` attribute of the `<button>`.
18
+
19
+ <ComponentPreview>
20
+ <fieldset>
21
+ <legend>Password</legend>
22
+ <div class="group">
23
+ <input id="myPassword" type="password" name="password" value="123456">
24
+ <button id="demoPassword" aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
25
+ Show
26
+ </button>
27
+ </div>
28
+ </fieldset>
29
+ </ComponentPreview>
30
+
31
+ ::: code-group
32
+
33
+ ```html
34
+ <fieldset>
35
+ <legend>Password</legend>
36
+ <div class="group">
37
+ <input id="myPassword" type="password" name="password" value="123456">
38
+ <button id="demoPassword" aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
39
+ Show
40
+ </button>
41
+ </div>
42
+ </fieldset>
43
+ ```
44
+
45
+ ```js
46
+ import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
47
+ const passwordButton = document.getElementById('demoPassword')
48
+ if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))
49
+ ```
50
+
51
+ :::
52
+
53
+ ## Toggle form
54
+
55
+ You can toggle the attributes `value`, `disabled` and `required` on multiple fields when the parent is visible.
56
+
57
+ This is helpfull when you need to show/hide some part of a form and manage the validation.
58
+
59
+ <ComponentPreview>
60
+ <button id="toggleFormButton" aria-controls="toggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
61
+ <div id="toggleFormContent">
62
+ <input name="test" type="text" value="Some input" required>
63
+ <textarea> Some textarea
64
+ </textarea>
65
+ <select>
66
+ <option value="null">--</option>
67
+ <option value="1" selected>Lorem</option>
68
+ <option value="2">Perferendis</option>
69
+ <option value="3">Officiis</option>
70
+ </select>
71
+ <input type="checkbox" checked>
72
+ </div>
73
+ </ComponentPreview>
74
+
75
+ ::: code-group
76
+
77
+ ```html
78
+ <button id="toggleFormButton" aria-controls="toggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
79
+ <div id="toggleFormContent">
80
+ <input name="test" type="text" value="Some input" required>
81
+ <textarea> Some textarea
82
+ </textarea>
83
+ <select>
84
+ <option value="null">--</option>
85
+ <option value="1" selected>Lorem</option>
86
+ <option value="2">Perferendis</option>
87
+ <option value="3">Officiis</option>
88
+ </select>
89
+ <input type="checkbox" checked>
90
+ </div>
91
+ ```
92
+
93
+ ```js
94
+ import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
95
+ import Toggle from "@natachah/vanilla-frontend/js/_toggle"
96
+ const toggleFormButton = document.getElementById('toggleFormButton')
97
+ const toggleFormContent = document.getElementById('toggleFormContent')
98
+
99
+ if (toggleFormButton && toggleFormContent) {
100
+ new Toggle(toggleFormButton)
101
+ const fields = toggleFormContent.querySelectorAll('input,select,textarea')
102
+ toggleFormButton.addEventListener('toggle:changed', (e) => {
103
+ FormHelper.toggleAttributes(fields, !toggleFormContent.hidden, {
104
+ reset: true,
105
+ disabled: true,
106
+ required: ['test'],
107
+ unchanged: ['test']
108
+ })
109
+ })
110
+ }
111
+ ```
112
+
113
+ :::
114
+
115
+ The method `toggleAttributes()` take 3 parameters as:
116
+
117
+ - List of HTMLElement fields
118
+ - Boolean if the container is visible or not
119
+ - An object of options
120
+
121
+ | Option | Description | Default value | Format |
122
+ | --- | --- | --- | --- |
123
+ | reset | List of field to reset the value when hidden | true | can be `boolean` or `array` of name |
124
+ | disabled | List of field to disabled when hidden | true | can be `boolean` or `array` of name |
125
+ | required | List of field that are required when visible | false | can be `boolean` or `array` of name |
126
+ | unchanged | List of field that don't change | [] | `array` of name |
127
+
128
+ ::: warning
129
+ If the option for reset, disabled or required is set to `true`, it will impact all the fields.
130
+ :::
package/docs/javascript/scroll.md ADDED
@@ -0,0 +1,104 @@
1
+ <script setup>
2
+ import ComponentPreview from '../vuejs/ComponentPreview.vue'
3
+ </script>
4
+
5
+ # Scroll <Badge type="warning" text="JS" />
6
+
7
+ ```js
8
+ import Scroll from "@natachah/vanilla-frontend/js/_scroll"
9
+ ```
10
+
11
+ ## Syntax
12
+
13
+ The scroll component make you able to add some `<button>` to go on the top or bottom of an element.
14
+
15
+ It also make you able to spy on a `<nav>` to automatically set the `current` attribute on links when scrolling.
16
+
17
+ <ComponentPreview>
18
+ <nav id="demoScrollNav">
19
+ <ul class="list">
20
+ <li><a role="button" href="#target1" aria-current="location">One</a></li>
21
+ <li><a role="button" href="#target2">Two</a></li>
22
+ <li><a role="button" href="#target3">Three</a></li>
23
+ <li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
24
+ <li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
25
+ </ul>
26
+ </nav>
27
+ <div id="demoScrollSpy" style="height: 150px; overflow-y: scroll; position: relative">
28
+ <div>
29
+ <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>
30
+ <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>
31
+ <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>
32
+ </div>
33
+ </div>
34
+ </ComponentPreview>
35
+
36
+ ::: warning
37
+ To work on the `<body>`, you must passed the `document.documentElement` as parameter.
38
+ :::
39
+
40
+ ::: code-group
41
+
42
+ ```html
43
+ <nav id="demoScrollNav">
44
+ <ul class="list">
45
+ <li><a role="button" href="#target1" aria-current="location">One</a></li>
46
+ <li><a role="button" href="#target2">Two</a></li>
47
+ <li><a role="button" href="#target3">Three</a></li>
48
+ <li><button data-scroll-bottom="demoScrollSpy">Scroll to the bottom</button></li>
49
+ <li><button data-scroll-top="demoScrollSpy">Scroll to the top</button></li>
50
+ </ul>
51
+ </nav>
52
+ <div id="demoScrollSpy" style="height: 150px; overflow-y: scroll; position: relative">
53
+ <div>
54
+ <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>
55
+ <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>
56
+ <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>
57
+ </div>
58
+ </div>
59
+ ```
60
+
61
+ ```js
62
+ import Scroll from "@natachah/vanilla-frontend/js/_scroll"
63
+ const scrollSpy = document.getElementById('demoScrollSpy')
64
+ if (scrollSpy) {
65
+ new Scroll(scrollSpy,{
66
+ navigation: 'demoScrollNav'
67
+ })
68
+ }
69
+ ```
70
+
71
+ :::
72
+
73
+ ## Javascript
74
+
75
+ ### Options
76
+
77
+ | Name | Description | Value |
78
+ |---|---|---|
79
+ | behavior | The scroll behavior|smooth as string can be auto, smooth or instant|
80
+ | navigation | The id of the navigation to spy | NULL or a string |
81
+ | gaps.top | The distance when to toggle the go top button | 100 as number |
82
+ | gaps.bottom | The distance when to toggle the go bottom button | 100 as number |
83
+ | gaps.spy | The distance when change the navigation current | 100 as number|
84
+
85
+
86
+ ```js
87
+ new Scroll(myElement,{
88
+ behavior: 'smooth'
89
+ navigation: 'scrollNav',
90
+ gaps: {
91
+ top: 200,
92
+ bottom: 200,
93
+ spy: 100
94
+ }
95
+ })
96
+ ```
97
+
98
+ ### Methods
99
+
100
+ | Method | Description |
101
+ |---|---|
102
+ | goTo(distance) | This method will go to a specific position |
103
+ | scrollTop() | This method will go to the top of the element |
104
+ | scrollBottom() | This method will go to the bottom of the element |