@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/customs/drawer.html DELETED
@@ -1,149 +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 > Drawer</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Drawer</h1>
14
- <p>The drawer component make you able to toggle a drawer with a button and resize window.</p>
15
-
16
- <p>You can use the classes <code>.drawer</code>, <code>.drawer-button</code> and the id <code>backdrop</code> to quickly design the drawer with some nice animations</p>
17
-
18
- <div class="code-group">
19
- <div role="tablist">
20
- <button role="tab" aria-controls="html">HTML</button>
21
- <button role="tab" aria-controls="scss">SCSS</button>
22
- <button role="tab" aria-controls="css">CSS</button>
23
- <button role="tab" aria-controls="js">JS</button>
24
- </div>
25
- <doc-code id="html" data-type="html" role="tabpanel">
26
- <div id="backdrop"></div>
27
- <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
28
- <svg viewbox="0 0 100 100" width="100%">
29
- <rect width="100" height="10" x="0" y="10" rx="0"></rect>
30
- <rect width="100" height="10" x="0" y="45" rx="0"></rect>
31
- <rect width="100" height="10" x="0" y="80" rx="0"></rect>
32
- </svg>
33
- </button>
34
- <div id="drawer" class="drawer" hidden>
35
- My awsome drawer !
36
- </div>
37
- </doc-code>
38
- <doc-code id="scss" data-type="scss" role="tabpanel">
39
- @use '@natachah/vanilla-frontend/scss/components/drawer';
40
- </doc-code>
41
- <doc-code id="css" data-type="css" role="tabpanel">
42
- --drawer-display
43
- --drawer-background
44
- --drawer-index
45
- --drawer-position
46
- --drawer-width
47
- --drawer-height
48
- --drawer-max-width
49
- --drawer-max-height
50
- --drawer-origin
51
- --drawer-animation
52
- --drawer-trasnform
53
- --drawer-backdrop-color
54
- --drawer-backdrop-filter
55
- --svg-line-size
56
- </doc-code>
57
- <doc-code id="js" data-type="js" role="tabpanel">
58
- import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
59
- const drawer = document.getElementById('drawer')
60
- if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: 'name-of-my-cookie' })
61
- </doc-code>
62
- </div>
63
-
64
- <blockquote class="note">The <code>#backdrop</code> must be a child of the <code>&lt;body&gt;</code> ! <br> And the default CSS breakpoint to view the backdrop is 960px</blockquote>
65
-
66
- <blockquote class="warning"> You should add a toggle button inside the drawer to avoid some Focus Trap !</blockquote>
67
-
68
- <h2>Javascript</h2>
69
- <p>This component is mostly in javascript, to use it you must import the javascript file and create a new Drawer object.</p>
70
- <p>You can have a <b>Backdrop</b> if you want to make it more like a drawer opening on the front of the content, you juste need a <code>#backdrop</code> somewhere on your page.</p>
71
-
72
- <h3>Options</h3>
73
-
74
- <table>
75
- <thead>
76
- <tr>
77
- <th>Name</th>
78
- <th>Description</th>
79
- <th>Value</th>
80
- </tr>
81
- </thead>
82
- <tbody>
83
- <tr>
84
- <td data-label="Name">
85
- <p>breakpoint</p>
86
- </td>
87
- <td data-label="Description">
88
- <p>The breakpoint to open/close the drawer</p>
89
- </td>
90
- <td data-label="Value">
91
- <p><code>960</code> as an <code>int</code></p>
92
- </td>
93
- </tr>
94
- <tr>
95
- <td data-label="Name">
96
- <p>cookie</p>
97
- </td>
98
- <td data-label="Description">
99
- <p>The cookie name to save if you want to keep it open/close on refresh</p>
100
- </td>
101
- <td data-label="Value">
102
- <p><code>false</code> by default, or a <code>string</code></p>
103
- </td>
104
- </tr>
105
- <tr>
106
- <td data-label="Name">
107
- <p>trap.exclusions</p>
108
- </td>
109
- <td data-label="Description">
110
- <p>The elements that should not be inert for Accessibility</p>
111
- </td>
112
- <td data-label="Value">
113
- <p><code>['#backdrop']</code> by default, or an <code>Array</code></p>
114
- </td>
115
- </tr>
116
- <tr>
117
- <td data-label="Name">
118
- <p>trap.inclusions</p>
119
- </td>
120
- <td data-label="Description">
121
- <p>The elements to include into the <kbd>TAB</kbd> trap focus</p>
122
- </td>
123
- <td data-label="Value">
124
- <p><code>null</code> by default, or an <code>Array</code></p>
125
- </td>
126
- </tr>
127
- </tbody>
128
- </table>
129
-
130
- <doc-code data-type="js">
131
- import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
132
- const drawer = document.getElementById('drawer')
133
- if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: '_drawer-cookie': trap: {exclusions: ['#backdrop', '#toggleMenu'], inclusions: ['#toggleMenu']} })
134
- </doc-code>
135
-
136
- <blockquote>
137
- <p>Main use case are sidebar menu or main navigation menu.</p>
138
- <p>This documentation use the drawer as an exemple for the sidebar on the left !</p>
139
- </blockquote>
140
-
141
- <blockquote class="warning">
142
- <p>If your website use the <b>Comfort</b> JS component, you should use the same cookie name for both as it will combine the values.</p>
143
- </blockquote>
144
-
145
- </doc-layout>
146
- <script type="module" src="/main.js"></script>
147
- </body>
148
-
149
- </html>
package/docs/pages/customs/dropdown.html DELETED
@@ -1,270 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components > Dropdown</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Dropdown</h1>
14
-
15
- <p>The dropdown is using a <code>&lt;div&gt;</code> tag with the class <code>.dropdown</code>. Inside of the element you must add a <code>&lt;button&gt;</code> and another <code>&lt;div&gt;</code> or an <code>&lt;ul/ol&gt;</code> tag.</p>
16
-
17
- <blockquote class="todo">
18
- <p>Could be replaced by the popover attribute when compatibility is ok. Check on Can I Use website for Popover and Anchor</p>
19
- </blockquote>
20
- <doc-demo>
21
- <div class="dropdown demo-dropdown">
22
- <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
23
- Dropdown
24
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
25
- <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
26
- </svg>
27
- </button>
28
- <ul id="myDropdown" tabindex="0" hidden>
29
- <li><a href="#">Subitem</a></li>
30
- <li><a href="#">Subitem</a></li>
31
- <li><a href="#">Subitem</a></li>
32
- </ul>
33
- </div>
34
- </doc-demo>
35
-
36
- <div class="code-group">
37
- <div role="tablist">
38
- <button role="tab" aria-controls="html">HTML</button>
39
- <button role="tab" aria-controls="scss">SCSS</button>
40
- <button role="tab" aria-controls="css">CSS</button>
41
- <button role="tab" aria-controls="js">JS</button>
42
- </div>
43
- <doc-code id="html" data-type="html" role="tabpanel">
44
- <div class="dropdown">
45
- <button aria-controls="myDropdown" aria-expanded="false" aria-pressed="false">
46
- Dropdown
47
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
48
- <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
49
- </svg>
50
- </button>
51
- <ul id="myDropdown" tabindex="0" hidden>
52
- <li><a href="#">Subitem</a></li>
53
- <li><a href="#">Subitem</a></li>
54
- <li><a href="#">Subitem</a></li>
55
- </ul>
56
- </div>
57
- </doc-code>
58
- <doc-code id="scss" data-type="scss" role="tabpanel">
59
- @use '@natachah/vanilla-frontend/scss/components/component';
60
- </doc-code>
61
- <doc-code id="css" data-type="css" role="tabpanel">
62
- --dropdown-color
63
- --dropdown-background
64
- --dropdown-border-size
65
- --dropdown-border-style
66
- --dropdown-border-color
67
- --dropdown-border-radius
68
- --dropdown-padding-inline
69
- --dropdown-padding-block
70
- --dropdown-transition
71
- --dropdown-decoration
72
- --dropdown-outline-size
73
- --dropdown-outline-style
74
- --dropdown-outline-color
75
- --dropdown-outline-offset
76
- --dropdown-hover-color
77
- --dropdown-hover-background
78
- --dropdown-hover-border-color
79
- --dropdown-focus-color
80
- --dropdown-focus-background
81
- --dropdown-focus-border-color
82
- --dropdown-active-color
83
- --dropdown-active-background
84
- --dropdown-active-border-color
85
- --dropdown-disabled-opacity
86
- --dropdown-transition
87
- --dropdown-svg-transform
88
- --dropdown-index
89
- --dropdown-offset
90
- </doc-code>
91
- <doc-code id="js" data-type="js" role="tabpanel">
92
- import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
93
- const dropdowns = document.querySelectorAll('.dropdown')
94
- if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
95
- </doc-code>
96
- </div>
97
-
98
- <p>To work properly the <code>&lt;button&gt;</code> of the dropdown must have an <code>aria-controls=&quot;IdOfTheContent&quot;</code>, an <code>aria-expanded</code> and an <code>aria-pressed</code> attributes.</p>
99
-
100
- <p>You can also add some <code>&lt;button&gt;</code> or <code>&lt;a role="button"&gt;</code> into the list to make them look as a vertical group.</p>
101
-
102
- <doc-demo>
103
- <div class="dropdown demo-dropdown">
104
- <button aria-controls="mySecondDropdown" aria-expanded="false" aria-pressed="false">
105
- Dropdown
106
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
107
- <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path>
108
- </svg>
109
- </button>
110
- <ul id="mySecondDropdown" tabindex="0" hidden>
111
- <li><button>Button longer</button></li>
112
- <li><button>Button</button></li>
113
- <li><button>Button</button></li>
114
- </ul>
115
- </div>
116
- </doc-demo>
117
-
118
- <h2>Variants</h2>
119
-
120
- <p>You can make <code>.outline</code> and <code>.{COLOR}</code> variations on the children.</p>
121
-
122
- <h3>Group</h3>
123
-
124
- <p>You can group some dropdown by putting them in a <code>&lt;div&gt;</code> with the class <code>.group</code>.</p>
125
-
126
- <doc-demo>
127
- <div class="group">
128
- <div class="dropdown demo-dropdown">
129
- <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
130
- Dropdown A
131
- </button>
132
- <div id="myDropdownA" tabindex="0" hidden>
133
- <p>AAA</p>
134
- </div>
135
- </div>
136
- <div class="dropdown demo-dropdown">
137
- <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
138
- Dropdown B
139
- </button>
140
- <div id="myDropdownB" tabindex="0" hidden>
141
- <p>BBB</p>
142
- </div>
143
- </div>
144
- <div class="dropdown demo-dropdown">
145
- <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
146
- Dropdown C
147
- </button>
148
- <div id="myDropdownC" tabindex="0" hidden>
149
- <p>CCC</p>
150
- </div>
151
- </div>
152
- </div>
153
- </doc-demo>
154
-
155
- <div class="code-group">
156
- <div role="tablist">
157
- <button role="tab" aria-controls="html">HTML</button>
158
- <button role="tab" aria-controls="scss">SCSS</button>
159
- </div>
160
- <doc-code id="html" data-type="html" role="tabpanel">
161
- <div class="group">
162
- <div class="dropdown">
163
- <button aria-controls="myDropdownA" aria-expanded="false" aria-pressed="false">
164
- Dropdown A
165
- </button>
166
- <div id="myDropdownA" tabindex="0" hidden>
167
- <p>AAA</p>
168
- </div>
169
- </div>
170
- <div class="dropdown">
171
- <button aria-controls="myDropdownB" aria-expanded="false" aria-pressed="false">
172
- Dropdown B
173
- </button>
174
- <div id="myDropdownB" tabindex="0" hidden>
175
- <p>BBB</p>
176
- </div>
177
- </div>
178
- <div class="dropdown">
179
- <button aria-controls="myDropdownC" aria-expanded="false" aria-pressed="false">
180
- Dropdown C
181
- </button>
182
- <div id="myDropdownC" tabindex="0" hidden>
183
- <p>CCC</p>
184
- </div>
185
- </div>
186
- </div>
187
- </doc-code>
188
- <doc-code id="scss" data-type="scss" role="tabpanel">
189
- @use '@natachah/vanilla-frontend/scss/components/group';
190
- </doc-code>
191
- </div>
192
-
193
- <h2>Javascript</h2>
194
-
195
- <blockquote>
196
- <p>To work properly the dropdown required some javascript.</p>
197
- </blockquote>
198
-
199
- <h3>Options</h3>
200
-
201
- <table>
202
- <thead>
203
- <tr>
204
- <th>Name</th>
205
- <th>Description</th>
206
- <th>Value</th>
207
- </tr>
208
- </thead>
209
- <tbody>
210
- <tr>
211
- <td data-label="Name">
212
- <p>closable</p>
213
- </td>
214
- <td data-label="Description">
215
- <p>The ability to close the dropdown when click outside</p>
216
- </td>
217
- <td data-label="Value">
218
- <p><code>true</code> as a <code>boolean</code></p>
219
- </td>
220
- </tr>
221
- </tbody>
222
- </table>
223
-
224
- <doc-code data-type="js">
225
- new Toggle(myDropdown, {
226
- closable:false
227
- })
228
- </doc-code>
229
-
230
- <blockquote class="warning">
231
- <p>If you want the ability to close the dropdown on click outside, add the <code>tabindex=&quot;0&quot;</code> attribute on the content <code>&lt;div/ul&gt;</code> tag.</p>
232
- </blockquote>
233
-
234
- <h3>Events</h3>
235
- <table>
236
- <thead>
237
- <tr>
238
- <th>Event</th>
239
- <th>Description</th>
240
- <th>Value</th>
241
- </tr>
242
- </thead>
243
- <tbody>
244
- <tr>
245
- <td data-label="Event">
246
- <p>dropdown:changed</p>
247
- </td>
248
- <td data-label="Description">
249
- <p>This event is fired when toggle the button</p>
250
- </td>
251
- <td data-label="Value">
252
- <p><code>isOpen</code> as a <code>boolean</code></p>
253
- </td>
254
- </tr>
255
- </tbody>
256
- </table>
257
-
258
- <doc-code data-type="js">
259
- const dropdown = document.getElementById('myDropdown')
260
- dropdown.addEventListener('dropdown:changed', (e) => {
261
- const value = e.detail.isOpen
262
- console.log(value)
263
- })
264
- </doc-code>
265
-
266
- </doc-layout>
267
- <script type="module" src="/main.js"></script>
268
- </body>
269
-
270
- </html>
package/docs/pages/customs/grid.html DELETED
@@ -1,185 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components > Grid</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Grid system</h1>
14
-
15
- <p>A simple way to create some grid into your layout.</p>
16
-
17
- <p>To use it, import this file:</p>
18
-
19
- <doc-code data-type="scss">
20
- @use '@natachah/vanilla-frontend/scss/components/grid';
21
- </doc-code>
22
-
23
- <p>There is two types of grid, the basic and the flexible.</p>
24
-
25
- <h2>Grid</h2>
26
-
27
- <p>You can create a basic grid via the <code>.grid</code> class.</p>
28
-
29
- <doc-demo>
30
- <div class="grid" style="--grid-columns:8">
31
- <div>1</div>
32
- <div>2</div>
33
- <div>3</div>
34
- <div>4</div>
35
- <div>5</div>
36
- <div>6</div>
37
- <div>7</div>
38
- <div>8</div>
39
- <div>9</div>
40
- <div>10</div>
41
- <div>11</div>
42
- <div>12</div>
43
- </div>
44
- </doc-demo>
45
-
46
- <doc-code>
47
- <div class="grid" style="--grid-columns:8">
48
- <div>Col 1</div>
49
- <div>Col 2</div>
50
- <div>Col 3</div>
51
- <div>...</div>
52
- </div>
53
- </doc-code>
54
-
55
- <h2 id="flex-grid">Flex grid</h2>
56
-
57
- <p>You can create a flexible grid via the <code>.flex-grid</code> class.</p>
58
-
59
- <doc-demo>
60
- <div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
61
- <div>1</div>
62
- <div>2</div>
63
- <div>3</div>
64
- <div>4</div>
65
- <div>5</div>
66
- <div>6</div>
67
- <div>7</div>
68
- <div>8</div>
69
- <div>9</div>
70
- <div>10</div>
71
- <div>11</div>
72
- <div>12</div>
73
- </div>
74
- </doc-demo>
75
-
76
- <doc-code>
77
- <div class="flex-grid" style="--grid-columns:8; --grid-grow:0">
78
- <div>1</div>
79
- <div>2</div>
80
- <div>3</div>
81
- <div>...</div>
82
- </div>
83
- </doc-code>
84
-
85
- <h2>Customization</h2>
86
-
87
- <p>Both of them can be customize by changing the CSS custom properties.</p>
88
-
89
- <doc-code data-type="scss">
90
- --grid-columns: 12;
91
- --grid-gap-inline: 1rem;
92
- --grid-gap-block: 1rem;
93
- --grid-min-column-size: 0%;
94
- --grid-min-columns: auto-fit;
95
- </doc-code>
96
-
97
- <p>But <code>.flex-grid</code> as also the property <code>--grid-grow</code> !</p>
98
-
99
- <h3>Responsive</h3>
100
-
101
- <p>There is multiple way to make them responsive, but a simple one is to change the CSS custom properties as:</p>
102
-
103
- <doc-code data-type="scss">
104
- --grid-columns: 6; // The maximum number of columns
105
- --grid-min-column-size: 120px; // The minimum width of a column
106
- </doc-code>
107
-
108
- <doc-demo>
109
- <div class="grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
110
- <div>1</div>
111
- <div>2</div>
112
- <div>3</div>
113
- <div>4</div>
114
- <div>5</div>
115
- <div>6</div>
116
- <div>7</div>
117
- <div>8</div>
118
- </div>
119
- </doc-demo>
120
-
121
- <p>Same thing for the Flex grid:</p>
122
-
123
- <doc-demo>
124
- <div class="flex-grid" style="--grid-columns: 6;--grid-min-column-size: 120px;">
125
- <div>1</div>
126
- <div>2</div>
127
- <div>3</div>
128
- <div>4</div>
129
- <div>5</div>
130
- <div>6</div>
131
- <div>7</div>
132
- <div>8</div>
133
- </div>
134
- </doc-demo>
135
-
136
- <h2>Columns</h2>
137
-
138
- <h3>Offset</h3>
139
-
140
- <p>To make a column ossfet with <code>.grid</code>, change the properties <code>--grid-min-columns</code> to a fixed number, and add the properties <code>grid-column-start</code> and <code>grid-column-end</code> into the column.</p>
141
-
142
- <doc-demo>
143
- <div class="grid" style="--grid-min-columns:4">
144
- <div>Grid 1</div>
145
- <div>Grid 2</div>
146
- <div style="grid-column-start: 4;grid-column-end: 5;">Offset</div>
147
- </div>
148
- </doc-demo>
149
-
150
- <p>But for <code>.flex-grid</code> you must calculate the percentage of the offset and set it as a <code>margin-left</code>. Or you can simply use the mixin <code>flex-grid-offset-column()</code> and pass as parameter the number of columns you want to offset <em>(by default it's one)</em></p>
151
-
152
- <doc-demo>
153
- <div class="flex-grid" style="--grid-columns:4">
154
- <div>Flex 1</div>
155
- <div>Flex 2</div>
156
- <div id="flexGridDemoOffset">Offset</div>
157
- </div>
158
- </doc-demo>
159
-
160
- <h3>Width</h3>
161
-
162
- <p>To make a column wider with <code>.grid</code>, change the properties <code>grid-column-start</code> and <code>grid-column-end</code> of the column.</p>
163
-
164
- <doc-demo>
165
- <div class="grid" style="--grid-columns:4">
166
- <div>Grid 1</div>
167
- <div>Grid 2</div>
168
- <div style="grid-column-start: 3;grid-column-end: 5;">Wider</div>
169
- </div>
170
- </doc-demo>
171
-
172
- <p>But for <code>.flex-grid</code> you must calculate the percentage of the width and set it as a <code>flex-basis</code>. Or you can simply use the mixin <code>flex-grid-wider-column()</code> and pass as parameter the number of columns you want to take <em>(by default it's two)</em></p>
173
-
174
- <doc-demo>
175
- <div class="flex-grid" style="--grid-columns:4">
176
- <div>Flex 1</div>
177
- <div>Flex 2</div>
178
- <div id="flexGridDemoWider">Wider</div>
179
- </div>
180
- </doc-demo>
181
- </doc-layout>
182
- <script type="module" src="/main.js"></script>
183
- </body>
184
-
185
- </html>