@natachah/vanilla-frontend 0.4.0 → 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 (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-doc.js +105 -0
  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/base/_reset.scss +2 -0
  226. package/scss/components/_badge.scss +2 -1
  227. package/scss/components/_dropdown.scss +2 -2
  228. package/scss/components/_group.scss +8 -4
  229. package/scss/components/_popover.scss +74 -0
  230. package/scss/components/index.scss +1 -0
  231. package/scss/themes/_root.scss +3 -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 -184
  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.0.tgz +0 -0
  283. package/vitest.config.js +0 -8
package/docs/pages/javascript/comfort.html DELETED
@@ -1,146 +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 > Comfort</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Comfort</h1>
14
- <p>You can change the CSS custom properties of a website with the comfort component.</p>
15
- <p>You can triggered changes by using some <code>&lt;button&gt;</code> tags or with some javascript methods.</p>
16
- <blockquote>
17
- <p>The changes are saved into a <b>cookie</b>.</p>
18
- </blockquote>
19
- <p>An <code>aria-pressed</code> attribute will be automatically added to the <code>&lt;button&gt;</code> tag.</p>
20
-
21
- <h2>Theme</h2>
22
- <p>You can change the global theme via some <code>&lt;button&gt;</code> tag with the <code>data-theme</code> and <code>value</code> attributes.</p>
23
- <p>Or you can use the javascript method <code>setTheme(value)</code>.</p>
24
- <p>In both case, it will add a <code>data-theme</code> attribute on the <code>&lt;html&gt;</code> tag of your website.</p>
25
- <doc-demo>
26
- <button data-theme value="light">Light theme</button>
27
- <button data-theme value="dark">Dark theme</button>
28
- </doc-demo>
29
- <div class="code-group">
30
- <div role="tablist">
31
- <button role="tab" aria-controls="html">HTML</button>
32
- <button role="tab" aria-controls="css">CSS</button>
33
- <button role="tab" aria-controls="js">JS</button>
34
- </div>
35
- <doc-code id="html" data-type="html" role="tabpanel">
36
- <button data-theme value="light">Light theme</button>
37
- <button data-theme value="dark">Dark theme</button>
38
- </doc-code>
39
- <doc-code id="css" data-type="css" role="tabpanel">
40
- html[data-theme=dark] {
41
- background: black
42
- }
43
- </doc-code>
44
- <doc-code id="js" data-type="js" role="tabpanel">
45
- import Comfort from "@natachah/vanilla-frontend/js/_comfort"
46
- const myComfort = new Comfort('my_custom_cookie_name')
47
- myComfort.setTheme('myThemeName')
48
- </doc-code>
49
- </div>
50
-
51
- <h2>Style</h2>
52
- <p>You can change some styling properties with some <code>&lt;button&gt;</code> tag with the <code>data-style="NameOfTheCSSProperty"</code> and <code>value</code> attributes.</p>
53
- <p>Or use the javascript method <code>setStyle(NameOfTheCSSProperty,value)</code>.</p>
54
- <doc-demo>
55
- <p>Paragraph ! 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>
56
- <button data-style="--font-size" value="1rem">1 rem</button>
57
- <button data-style="--font-size" value="1.5rem">1.5 rem</button>
58
- <button data-style="--font-size" value="2rem">2 rem</button>
59
- </doc-demo>
60
- <div class="code-group">
61
- <div role="tablist">
62
- <button role="tab" aria-controls="html">HTML</button>
63
- <button role="tab" aria-controls="css">CSS</button>
64
- <button role="tab" aria-controls="js">JS</button>
65
- </div>
66
- <doc-code id="html" data-type="html" role="tabpanel">
67
- <button data-style="--font-size" value="1rem">1 rem</button>
68
- <button data-style="--font-size" value="1.5rem">1.5 rem</button>
69
- <button data-style="--font-size" value="2rem">2 rem</button>
70
- </doc-code>
71
- <doc-code id="css" data-type="css" role="tabpanel">
72
- body {
73
- font-size: var(--font-size)
74
- }
75
- </doc-code>
76
- <doc-code id="js" data-type="js" role="tabpanel">
77
- import Comfort from "@natachah/vanilla-frontend/js/_comfort"
78
- const myComfort = new Comfort('my_custom_cookie_name')
79
- myComfort.setStyle('--font-size','3rem')
80
- </doc-code>
81
- </div>
82
-
83
- <p>You can also set a custom style by value with some <code>&lt;input&gt;</code> tag with the <code>data-style-custom="NameOfTheCSSProperty"</code> and <code>value</code> attributes.</p>
84
- <doc-demo>
85
- <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
86
- <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
87
- <button id="resetConfort">Reset</button>
88
- </doc-demo>
89
-
90
- <doc-code data-type="html">
91
- <label for="demoCustomColor" style="color: var(--demo-label-color, black)">Change my label color !</label>
92
- <input id="demoCustomColor" name="demo-change-color" data-style-custom="--demo-label-color" type="color" />
93
- </doc-code>
94
-
95
- <h2>Javascript</h2>
96
- <p>To enable this component you need to import the javascript file and create a new Comfort object.</p>
97
- <p>You can customize the name of the <b>cookie</b> when initiate the component.</p>
98
- <doc-code data-type="js">
99
- import Comfort from "@natachah/vanilla-frontend/js/_comfort"
100
- new Comfort('my_custom_cookie_name')
101
- </doc-code>
102
-
103
- <h3>Methods</h3>
104
- <table>
105
- <thead>
106
- <tr>
107
- <th>Method</th>
108
- <th>Description</th>
109
- </tr>
110
- </thead>
111
- <tbody>
112
- <tr>
113
- <td data-label="Method">
114
- <p>setTheme(value)</p>
115
- </td>
116
- <td data-label="Description">
117
- <p>This method will set a global theme</p>
118
- </td>
119
- </tr>
120
- <tr>
121
- <td data-label="Method">
122
- <p>setStyle(name,value)</p>
123
- </td>
124
- <td data-label="Description">
125
- <p>This method will set a specific property</p>
126
- </td>
127
- </tr>
128
- <tr>
129
- <td data-label="Method">
130
- <p>reset()</p>
131
- </td>
132
- <td data-label="Description">
133
- <p>This method will reset all the value and delete the cookie</p>
134
- </td>
135
- </tr>
136
- </tbody>
137
- </table>
138
- <blockquote class="warning">
139
- <p>This component is an extension of the Cookie component, who come with it's own methods and events.</p>
140
- </blockquote>
141
-
142
- </doc-layout>
143
- <script type="module" src="/main.js"></script>
144
- </body>
145
-
146
- </html>
package/docs/pages/javascript/consent.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: Javascript > Consent</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Consent</h1>
14
- <p>The consent component help you to manage the <b>Cookies</b> for the <b>RGPD</b> law.</p>
15
- <p>This component required a <code>&lt;dialog&gt;</code>, and the component will open it if the cookies are not already saved.</p>
16
- <div class="code-group">
17
- <div role="tablist">
18
- <button role="tab" aria-controls="html">HTML</button>
19
- <button role="tab" aria-controls="js">JS</button>
20
- </div>
21
- <doc-code id="html" data-type="html" role="tabpanel">
22
- <dialog id="cookies" aria-labelledby="cookiesTitle">
23
- <div>
24
- <h1 id="cookiesTitle">Cookies Consent</h1>
25
- <p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience !</p>
26
- <button data-dialog-close>Ok</button>
27
- </div>
28
- </dialog>
29
- </doc-code>
30
- <doc-code id="js" data-type="js" role="tabpanel">
31
- import Consent from "@natachah/vanilla-frontend/js/_consent"
32
- if (document.getElementById('cookies')) {
33
- const cookieConsent = new Consent('my_custom_cookie_name')
34
- }
35
- </doc-code>
36
- </div>
37
-
38
- <h2>Preferences</h2>
39
- <p>You can save some preference (aka. custom values) by adding a <code>&lt;form&gt;</code> inside the <code>&lt;dialog&gt;</code>.</p>
40
- <p>Make sure to have a <code>&lt;button&gt;</code> to <b>ONLY</b> save the necessary, and one to submit the form.</p>
41
- <doc-code>
42
- <dialog id="cookies" aria-labelledby="cookiesTitle">
43
- <div id="cookiesTitle">
44
- <h1>Cookies Consent</h1>
45
- <p><b>Accept:</b> will save the checkboxes</p>
46
- <p><b>Decline:</b> will ONLY save the necessary</p>
47
- <form method="dialog">
48
- <fieldset>
49
- <input type="checkbox" id="cookieNecessary" name="cookies_consent[]" value="necessary" disabled checked>
50
- <label for="cookieNecessary">Strictly necessary</label>
51
- <input type="checkbox" id="cookieAnalytic" name="cookies_consent[]" value="analytic">
52
- <label for="cookieAnalytic">Analytic</label>
53
- <input type="checkbox" id="cookieMarketing" name="cookies_consent[]" value="marketing">
54
- <label for="cookieMarketing">Marketing</label>
55
- </fieldset>
56
- <button type="submit">Accept</button>
57
- <button data-dialog-close>Decline</button>
58
- </form>
59
- </div>
60
- </dialog>
61
- </doc-code>
62
-
63
- <h2>Javascript</h2>
64
- <p>To enable this component you need to import the javascript file and create a new Consent object.</p>
65
- <p>You can customize the name of the <b>cookie</b> and the <b>ID</b> of the <code>&lt;dialog&gt;</code> when initiate the component.</p>
66
- <doc-code data-type="js">
67
- import Consent from "@natachah/vanilla-frontend/js/_consent"
68
- const cookieConsent = new Consent('my_custom_cookie_name', 'my_custom_dialog_id')
69
- </doc-code>
70
- <blockquote class="warning">
71
- <p>This component is an extension of the Cookie component, who come with it's own methods and events.<br>
72
- It also use the Dialog component with the events to know when to save the cookie</p>
73
- </blockquote>
74
-
75
-
76
- </doc-layout>
77
-
78
- <dialog id="demoCookies" aria-labelledby="demoCookiesTitle" aria-modal="true">
79
- <div>
80
-
81
- <h1 id="demoCookiesTitle">
82
- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 122.25" xml:space="preserve">
83
- <path d="M101.77,49.38c2.09,3.1,4.37,5.11,6.86,5.78c2.45,0.66,5.32,0.06,8.7-2.01c1.36-0.84,3.14-0.41,3.97,0.95 c0.28,0.46,0.42,0.96,0.43,1.47c0.13,1.4,0.21,2.82,0.24,4.26c0.03,1.46,0.02,2.91-0.05,4.35h0v0c0,0.13-0.01,0.26-0.03,0.38 c-0.91,16.72-8.47,31.51-20,41.93c-11.55,10.44-27.06,16.49-43.82,15.69v0.01h0c-0.13,0-0.26-0.01-0.38-0.03 c-16.72-0.91-31.51-8.47-41.93-20C5.31,90.61-0.73,75.1,0.07,58.34H0.07v0c0-0.13,0.01-0.26,0.03-0.38 C1,41.22,8.81,26.35,20.57,15.87C32.34,5.37,48.09-0.73,64.85,0.07V0.07h0c1.6,0,2.89,1.29,2.89,2.89c0,0.4-0.08,0.78-0.23,1.12 c-1.17,3.81-1.25,7.34-0.27,10.14c0.89,2.54,2.7,4.51,5.41,5.52c1.44,0.54,2.2,2.1,1.74,3.55l0.01,0 c-1.83,5.89-1.87,11.08-0.52,15.26c0.82,2.53,2.14,4.69,3.88,6.4c1.74,1.72,3.9,3,6.39,3.78c4.04,1.26,8.94,1.18,14.31-0.55 C99.73,47.78,101.08,48.3,101.77,49.38L101.77,49.38z M59.28,57.86c2.77,0,5.01,2.24,5.01,5.01c0,2.77-2.24,5.01-5.01,5.01 c-2.77,0-5.01-2.24-5.01-5.01C54.27,60.1,56.52,57.86,59.28,57.86L59.28,57.86z M37.56,78.49c3.37,0,6.11,2.73,6.11,6.11 s-2.73,6.11-6.11,6.11s-6.11-2.73-6.11-6.11S34.18,78.49,37.56,78.49L37.56,78.49z M50.72,31.75c2.65,0,4.79,2.14,4.79,4.79 c0,2.65-2.14,4.79-4.79,4.79c-2.65,0-4.79-2.14-4.79-4.79C45.93,33.89,48.08,31.75,50.72,31.75L50.72,31.75z M119.3,32.4 c1.98,0,3.58,1.6,3.58,3.58c0,1.98-1.6,3.58-3.58,3.58s-3.58-1.6-3.58-3.58C115.71,34.01,117.32,32.4,119.3,32.4L119.3,32.4z M93.62,22.91c2.98,0,5.39,2.41,5.39,5.39c0,2.98-2.41,5.39-5.39,5.39c-2.98,0-5.39-2.41-5.39-5.39 C88.23,25.33,90.64,22.91,93.62,22.91L93.62,22.91z M97.79,0.59c3.19,0,5.78,2.59,5.78,5.78c0,3.19-2.59,5.78-5.78,5.78 c-3.19,0-5.78-2.59-5.78-5.78C92.02,3.17,94.6,0.59,97.79,0.59L97.79,0.59z M76.73,80.63c4.43,0,8.03,3.59,8.03,8.03 c0,4.43-3.59,8.03-8.03,8.03s-8.03-3.59-8.03-8.03C68.7,84.22,72.29,80.63,76.73,80.63L76.73,80.63z M31.91,46.78 c4.8,0,8.69,3.89,8.69,8.69c0,4.8-3.89,8.69-8.69,8.69s-8.69-3.89-8.69-8.69C23.22,50.68,27.11,46.78,31.91,46.78L31.91,46.78z M107.13,60.74c-3.39-0.91-6.35-3.14-8.95-6.48c-5.78,1.52-11.16,1.41-15.76-0.02c-3.37-1.05-6.32-2.81-8.71-5.18 c-2.39-2.37-4.21-5.32-5.32-8.75c-1.51-4.66-1.69-10.2-0.18-16.32c-3.1-1.8-5.25-4.53-6.42-7.88c-1.06-3.05-1.28-6.59-0.61-10.35 C47.27,5.95,34.3,11.36,24.41,20.18C13.74,29.69,6.66,43.15,5.84,58.29l0,0.05v0h0l-0.01,0.13v0C5.07,73.72,10.55,87.82,20.02,98.3 c9.44,10.44,22.84,17.29,38,18.1l0.05,0h0v0l0.13,0.01h0c15.24,0.77,29.35-4.71,39.83-14.19c10.44-9.44,17.29-22.84,18.1-38l0-0.05 v0h0l0.01-0.13v0c0.07-1.34,0.09-2.64,0.06-3.91C112.98,61.34,109.96,61.51,107.13,60.74L107.13,60.74z M116.15,64.04L116.15,64.04 L116.15,64.04L116.15,64.04z M58.21,116.42L58.21,116.42L58.21,116.42L58.21,116.42z" />
84
- </svg>
85
- Cookies Consent
86
- </h1>
87
-
88
- <p>This website use <b>ONLY</b> necessary cookies to ensure you get the best experience ! </p>
89
-
90
- <p><b>Accept:</b> will save the checkboxes</p>
91
- <p><b>Decline:</b> will ONLY save the necessary</p>
92
-
93
- <form method="dialog">
94
- <fieldset style="margin-block:1rem;">
95
- <input type="checkbox" id="cookieConsentNecessary" name="cookies_consent[]" value="necessary" checked disabled>
96
- <label for="cookieConsentNecessary">Strictly necessary</label>
97
- <input type="checkbox" id="cookieConsentAnalytic" name="cookies_consent[]" value="analytic">
98
- <label for="cookieConsentAnalytic">Analytic</label>
99
- <input type="checkbox" id="cookieConsentMarketing" name="cookies_consent[]" value="marketing">
100
- <label for="cookieConsentMarketing">Marketing</label>
101
- </fieldset>
102
- <button class="primary" type="submit">Accept</button>
103
- <button class="outline" data-dialog-close>Decline</button>
104
- </form>
105
-
106
- </div>
107
- </dialog>
108
-
109
- <script type="module" src="/main.js"></script>
110
- </body>
111
-
112
- </html>
package/docs/pages/javascript/cookie.html DELETED
@@ -1,81 +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 > Cookie</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Cookies</h1>
14
- <p>The cookies component make you able to save some data as a cookie.</p>
15
-
16
- <h2>Javascript</h2>
17
- <p>This component is only in javascript, to use it you must import the javascript file and create a new Cookie object.</p>
18
- <p>You can customize the name of the <b>cookie</b> when initiate the component.</p>
19
-
20
- <doc-code data-type="js">
21
- import Cookie from "@natachah/vanilla-frontend/js/utilities/_cookie"
22
- new Cookie('name_of_the_cookie')
23
- </doc-code>
24
-
25
- <h3>Methods</h3>
26
- <table>
27
- <thead>
28
- <tr>
29
- <th>Method</th>
30
- <th>Description</th>
31
- </tr>
32
- </thead>
33
- <tbody>
34
- <tr>
35
- <td data-label="Method">
36
- <p>value</p>
37
- </td>
38
- <td data-label="Description">
39
- <p>This GET method will return the full cookie value</p>
40
- </td>
41
- </tr>
42
- <tr>
43
- <td data-label="Method">
44
- <p>set(value)</p>
45
- </td>
46
- <td data-label="Description">
47
- <p>This method will save a value as a cookie, the value must be an <code>Object</code></p>
48
- </td>
49
- </tr>
50
- <tr>
51
- <td data-label="Method">
52
- <p>has(key)</p>
53
- </td>
54
- <td data-label="Description">
55
- <p>This method will check if the cookie has a certain key</p>
56
- </td>
57
- </tr>
58
- <tr>
59
- <td data-label="Method">
60
- <p>get(key)</p>
61
- </td>
62
- <td data-label="Description">
63
- <p>This method will get a key/value saved inside the cookie</p>
64
- </td>
65
- </tr>
66
- <tr>
67
- <td data-label="Method">
68
- <p>delete()</p>
69
- </td>
70
- <td data-label="Description">
71
- <p>This method will delete the cookie</p>
72
- </td>
73
- </tr>
74
- </tbody>
75
- </table>
76
-
77
- </doc-layout>
78
- <script type="module" src="/main.js"></script>
79
- </body>
80
-
81
- </html>
package/docs/pages/javascript/form.html DELETED
@@ -1,199 +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 > From helper</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Form helper</h1>
14
- <p>There is some javascript helpers that you can use.</p>
15
-
16
- <h2>Password visibility</h2>
17
- <p>You can toggle the visibility of a password field.</p>
18
- <p>The <code>&lt;button&gt;</code> must have an <code>aria-controls=&quot;IdOfTheInput&quot;</code> and an <code>aria-pressed</code> attributes.</p>
19
- <p>This helper gonna change the <code>type</code> of the <code>input</code>, and it will toggle the <code>aria-pressed</code> attribute of the <code>&lt;button&gt;</code>.</p>
20
-
21
- <doc-demo>
22
- <fieldset>
23
- <legend>Password</legend>
24
- <div class="group">
25
- <input id="myPassword" type="password" name="password" value="123456">
26
- <button id="demoPassword" aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
27
- Show
28
- </button>
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>Password</legend>
41
- <div class="group">
42
- <input id="myPassword" type="password" name="password" value="123456">
43
- <button aria-controls="myPassword" aria-pressed="false" aria-label="Expandable the visibility of the password">
44
- Show
45
- </button>
46
- </div>
47
- </fieldset>
48
- </doc-code>
49
- <doc-code id="js" data-type="js" role="tabpanel">
50
- import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
51
- const passwordButton = document.querySelector('button[aria-controls="myPassword"]')
52
- if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))
53
- </doc-code>
54
- </div>
55
-
56
- <h2>Toggle form</h2>
57
- <p>You can toggle the attributes <code>value</code>, <code>disabled</code> and <code>required</code> on multiple fields when the parent is visible.</p>
58
- <p>This is helpfull when you need to show/hide some part of a form and manage the validation.</p>
59
- <doc-demo>
60
- <button id="demoToggleFormButton" aria-controls="demoToggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
61
- <div id="demoToggleFormContent">
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
- </doc-demo>
74
-
75
- <div class="code-group">
76
- <div role="tablist">
77
- <button role="tab" aria-controls="html">HTML</button>
78
- <button role="tab" aria-controls="js">JS</button>
79
- </div>
80
- <doc-code id="html" data-type="html" role="tabpanel">
81
- <button id="toggleFormButton" aria-controls="toggleFormContent" aria-expanded="true" aria-pressed="true">Toggle</button>
82
- <div id="toggleFormContent">
83
- <input name="test" type="text" value="Some input" required>
84
- <textarea> Some textarea
85
- </textarea>
86
- <select>
87
- <option value="null">--</option>
88
- <option value="1" selected>Lorem</option>
89
- <option value="2">Perferendis</option>
90
- <option value="3">Officiis</option>
91
- </select>
92
- <input type="checkbox" checked>
93
- </div>
94
- </doc-code>
95
- <doc-code id="js" data-type="js" role="tabpanel">
96
- import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
97
- import Toggle from "@natachah/vanilla-frontend/js/_toggle"
98
- const toggleFormButton = document.getElementById('toggleFormButton')
99
- const toggleFormContent = document.getElementById('toggleFormContent')
100
-
101
- if (toggleFormButton && toggleFormContent) {
102
- new Toggle(toggleFormButton)
103
- const fields = toggleFormContent.querySelectorAll('input,select,textarea')
104
- toggleFormButton.addEventListener('toggle:changed', (e) => {
105
- FormHelper.toggleAttributes(fields, !toggleFormContent.hidden, {
106
- reset: true,
107
- disabled: true,
108
- required: ['test'],
109
- unchanged: ['test']
110
- })
111
- })
112
- }
113
- </doc-code>
114
- </div>
115
-
116
- <p>The method <code>toggleAttributes()</code> take 3 parameters as:</p>
117
- <ul>
118
- <li>List of <code>HTMLElement</code> fields</li>
119
- <li>Boolean if the container is visible or not</li>
120
- <li>An object of options</li>
121
- </ul>
122
- <table>
123
- <thead>
124
- <tr>
125
- <th>Option</th>
126
- <th>Description</th>
127
- <th>Default value</th>
128
- <th>Format</th>
129
- </tr>
130
- </thead>
131
- <tbody>
132
- <tr>
133
- <td data-label="Option">
134
- <p>reset</p>
135
- </td>
136
- <td data-label="Description">
137
- <p>List of field to reset the value when hidden</p>
138
- </td>
139
- <td data-label="Default value">
140
- <p>true</p>
141
- </td>
142
- <td data-label="Format">
143
- <p>can be <code>boolean</code> or <code>array of name</code></p>
144
- </td>
145
- </tr>
146
- <tr>
147
- <td data-label="Option">
148
- <p>disabled</p>
149
- </td>
150
- <td data-label="Description">
151
- <p>List of field to disabled when hidden</p>
152
- </td>
153
- <td data-label="Default value">
154
- <p>true</p>
155
- </td>
156
- <td data-label="Format">
157
- <p>can be <code>boolean</code> or <code>array of name</code></p>
158
- </td>
159
- </tr>
160
- <tr>
161
- <td data-label="Option">
162
- <p>required</p>
163
- </td>
164
- <td data-label="Description">
165
- <p>List of field that are required when visible</p>
166
- </td>
167
- <td data-label="Default value">
168
- <p>false</p>
169
- </td>
170
- <td data-label="Format">
171
- <p>can be <code>boolean</code> or <code>array of name</code></p>
172
- </td>
173
- </tr>
174
- <tr>
175
- <td data-label="Option">
176
- <p>unchanged</p>
177
- </td>
178
- <td data-label="Description">
179
- <p>List of field that don&#39;t change</p>
180
- </td>
181
- <td data-label="Default value">
182
- <p>[]</p>
183
- </td>
184
- <td data-label="Format">
185
- <p><code>array of name</code></p>
186
- </td>
187
- </tr>
188
- </tbody>
189
- </table>
190
- <blockquote class="warning">
191
- <p>If the option for reset, disabled or required is set to <code>true</code>, it will impact all the fields.</p>
192
- </blockquote>
193
-
194
-
195
- </doc-layout>
196
- <script type="module" src="/main.js"></script>
197
- </body>
198
-
199
- </html>