@natachah/vanilla-frontend 0.4.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (281) hide show
  1. package/.gitlab-ci.yml +22 -13
  2. package/LICENSE.md +1 -1
  3. package/docs/.vitepress/config.mts +101 -0
  4. package/docs/base/layout.md +77 -0
  5. package/docs/base/media.md +146 -0
  6. package/docs/base/reset.md +33 -0
  7. package/docs/base/typography.md +296 -0
  8. package/docs/classes/badge.md +146 -0
  9. package/docs/classes/breadcrumb.md +54 -0
  10. package/docs/classes/card.md +171 -0
  11. package/docs/classes/dropdown.md +180 -0
  12. package/docs/classes/grid.md +230 -0
  13. package/docs/classes/list.md +90 -0
  14. package/docs/components/button.md +254 -0
  15. package/docs/components/dialog.md +223 -0
  16. package/docs/components/disclosure.md +169 -0
  17. package/docs/components/form.md +514 -0
  18. package/docs/components/loading.md +53 -0
  19. package/docs/components/popover.md +270 -0
  20. package/docs/components/progress.md +33 -0
  21. package/docs/components/table.md +175 -0
  22. package/docs/index.md +27 -0
  23. package/docs/javascript/autofill.md +155 -0
  24. package/docs/javascript/check.md +53 -0
  25. package/docs/javascript/comfort.md +125 -0
  26. package/docs/javascript/consent.md +89 -0
  27. package/docs/javascript/cookie.md +33 -0
  28. package/docs/javascript/drawer.md +99 -0
  29. package/docs/javascript/form.md +130 -0
  30. package/docs/javascript/scroll.md +104 -0
  31. package/docs/javascript/slider.md +130 -0
  32. package/docs/javascript/sortable.md +127 -0
  33. package/docs/javascript/tabpanel.md +72 -0
  34. package/docs/javascript/toggle.md +182 -0
  35. package/docs/javascript/trap.md +33 -0
  36. package/docs/javascript/tree.md +220 -0
  37. package/docs/prologue/conventions.md +92 -0
  38. package/docs/prologue/release.md +44 -0
  39. package/docs/prologue/upgrade.md +21 -0
  40. package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
  41. package/docs/start/customization.md +184 -0
  42. package/docs/start/install.md +80 -0
  43. package/docs/start/mixin.md +203 -0
  44. package/docs/vuejs/ComponentPreview.vue +99 -0
  45. package/js/_slider.js +17 -1
  46. package/js/{vanilla-frontend.js → vanilla-frontend-doc.js} +30 -33
  47. package/natachah-vanilla-frontend-1.0.0.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.DsgDPRSA.js +1 -0
  51. package/public/assets/base_layout.md.CTGv6rTn.js +13 -0
  52. package/public/assets/base_layout.md.CTGv6rTn.lean.js +1 -0
  53. package/public/assets/base_media.md.CcuDUcF-.js +24 -0
  54. package/public/assets/base_media.md.CcuDUcF-.lean.js +1 -0
  55. package/public/assets/base_reset.md.DqIdqFRJ.js +3 -0
  56. package/public/assets/base_reset.md.DqIdqFRJ.lean.js +1 -0
  57. package/public/assets/base_typography.md.DV-ikqGZ.js +87 -0
  58. package/public/assets/base_typography.md.DV-ikqGZ.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.BW2s4ay5.js +27 -0
  60. package/public/assets/chunks/framework.CaiDwmc7.js +4 -0
  61. package/public/assets/chunks/theme.DL_11MHV.js +1 -0
  62. package/public/assets/classes_badge.md.BCGzPr6f.js +24 -0
  63. package/public/assets/classes_badge.md.BCGzPr6f.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.vU6jlo36.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.vU6jlo36.lean.js +1 -0
  66. package/public/assets/classes_card.md.BZEh2l_B.js +41 -0
  67. package/public/assets/classes_card.md.BZEh2l_B.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.BLVw_xQY.js +70 -0
  69. package/public/assets/classes_dropdown.md.BLVw_xQY.lean.js +1 -0
  70. package/public/assets/classes_grid.md.47v-Ybqe.js +45 -0
  71. package/public/assets/classes_grid.md.47v-Ybqe.lean.js +1 -0
  72. package/public/assets/classes_list.md.BW9PWZV1.js +36 -0
  73. package/public/assets/classes_list.md.BW9PWZV1.lean.js +1 -0
  74. package/public/assets/components_button.md.vx3HzdpN.js +45 -0
  75. package/public/assets/components_button.md.vx3HzdpN.lean.js +1 -0
  76. package/public/assets/components_dialog.md.C-0gJGus.js +76 -0
  77. package/public/assets/components_dialog.md.C-0gJGus.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.DeSRu9_P.js +53 -0
  79. package/public/assets/components_disclosure.md.DeSRu9_P.lean.js +1 -0
  80. package/public/assets/components_form.md.Be8d5WFv.js +122 -0
  81. package/public/assets/components_form.md.Be8d5WFv.lean.js +1 -0
  82. package/public/assets/components_loading.md.CKDG7z5x.js +4 -0
  83. package/public/assets/components_loading.md.CKDG7z5x.lean.js +1 -0
  84. package/public/assets/components_popover.md.CwgNttNc.js +102 -0
  85. package/public/assets/components_popover.md.CwgNttNc.lean.js +1 -0
  86. package/public/assets/components_progress.md.CNC7rJiC.js +6 -0
  87. package/public/assets/components_progress.md.CNC7rJiC.lean.js +1 -0
  88. package/public/assets/components_table.md.LyBkIDkF.js +75 -0
  89. package/public/assets/components_table.md.LyBkIDkF.lean.js +1 -0
  90. package/public/assets/index.md.CJiHmjB7.js +1 -0
  91. package/public/assets/index.md.CJiHmjB7.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.BewVUo4H.js +49 -0
  107. package/public/assets/javascript_autofill.md.BewVUo4H.lean.js +1 -0
  108. package/public/assets/javascript_check.md.B6ajE66i.js +13 -0
  109. package/public/assets/javascript_check.md.B6ajE66i.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.BRci3j7V.js +20 -0
  111. package/public/assets/javascript_comfort.md.BRci3j7V.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.Bjv8ZDS6.js +29 -0
  113. package/public/assets/javascript_consent.md.Bjv8ZDS6.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.Dlhyk4Ha.js +2 -0
  115. package/public/assets/javascript_cookie.md.Dlhyk4Ha.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.BCJX3fL-.js +32 -0
  117. package/public/assets/javascript_drawer.md.BCJX3fL-.lean.js +1 -0
  118. package/public/assets/javascript_form.md.Cwf_gxLI.js +40 -0
  119. package/public/assets/javascript_form.md.Cwf_gxLI.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.BrJijWbF.js +30 -0
  121. package/public/assets/javascript_scroll.md.BrJijWbF.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.DDO8wC4u.js +27 -0
  123. package/public/assets/javascript_slider.md.DDO8wC4u.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.BKyem7yw.js +35 -0
  125. package/public/assets/javascript_sortable.md.BKyem7yw.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.D9M-_xE0.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.D9M-_xE0.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C8582WNC.js +46 -0
  129. package/public/assets/javascript_toggle.md.C8582WNC.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Bc59YUng.js +2 -0
  131. package/public/assets/javascript_trap.md.Bc59YUng.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.uc1UUsFV.js +72 -0
  133. package/public/assets/javascript_tree.md.uc1UUsFV.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.D8nVwlRS.js +34 -0
  135. package/public/assets/prologue_conventions.md.D8nVwlRS.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CG6nuFnt.js +1 -0
  137. package/public/assets/prologue_release.md.CG6nuFnt.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.CFxokaBG.js +1 -0
  139. package/public/assets/prologue_upgrade.md.CFxokaBG.lean.js +1 -0
  140. package/public/assets/start_customization.md.t-ze_NoQ.js +141 -0
  141. package/public/assets/start_customization.md.t-ze_NoQ.lean.js +1 -0
  142. package/public/assets/start_install.md.OluH7l11.js +46 -0
  143. package/public/assets/start_install.md.OluH7l11.lean.js +1 -0
  144. package/public/assets/start_mixin.md.D76cLRSX.js +85 -0
  145. package/public/assets/start_mixin.md.D76cLRSX.lean.js +1 -0
  146. package/public/assets/style.zIeGMibA.css +1 -0
  147. package/public/base/layout.html +37 -0
  148. package/public/base/media.html +179 -0
  149. package/public/base/reset.html +27 -0
  150. package/public/base/typography.html +320 -0
  151. package/public/bundles/vanilla-frontend-doc.css +1 -0
  152. package/public/bundles/vanilla-frontend-doc.js +1 -0
  153. package/public/bundles/vanilla-frontend.css +1 -0
  154. package/public/classes/badge.html +205 -0
  155. package/public/classes/breadcrumb.html +66 -0
  156. package/public/classes/card.html +222 -0
  157. package/public/classes/dropdown.html +147 -0
  158. package/public/classes/grid.html +278 -0
  159. package/public/classes/list.html +113 -0
  160. package/public/components/button.html +304 -0
  161. package/public/components/dialog.html +205 -0
  162. package/public/components/disclosure.html +130 -0
  163. package/public/components/form.html +589 -0
  164. package/public/components/loading.html +107 -0
  165. package/public/components/popover.html +257 -0
  166. package/public/components/progress.html +57 -0
  167. package/public/components/table.html +152 -0
  168. package/public/demo/demo.html +84 -0
  169. package/public/hashmap.json +1 -0
  170. package/public/index.html +25 -0
  171. package/public/javascript/autofill.html +152 -0
  172. package/public/javascript/check.html +64 -0
  173. package/public/javascript/comfort.html +123 -0
  174. package/public/javascript/consent.html +80 -0
  175. package/public/javascript/cookie.html +26 -0
  176. package/public/javascript/drawer.html +83 -0
  177. package/public/javascript/form.html +117 -0
  178. package/public/javascript/scroll.html +81 -0
  179. package/public/javascript/slider.html +78 -0
  180. package/public/javascript/sortable.html +112 -0
  181. package/public/javascript/tabpanel.html +70 -0
  182. package/public/javascript/toggle.html +201 -0
  183. package/public/javascript/trap.html +26 -0
  184. package/public/javascript/tree.html +175 -0
  185. package/public/prologue/conventions.html +58 -0
  186. package/public/prologue/release.html +25 -0
  187. package/public/prologue/upgrade.html +25 -0
  188. package/public/start/customization.html +165 -0
  189. package/public/start/install.html +70 -0
  190. package/public/start/mixin.html +109 -0
  191. package/public/vp-icons.css +0 -0
  192. package/sandbox/index.html +27 -0
  193. package/sandbox/js/sandbox-header.js +57 -0
  194. package/sandbox/js/sandbox-test.js +91 -0
  195. package/sandbox/pages/base/layout.html +80 -0
  196. package/sandbox/pages/base/media.html +52 -0
  197. package/sandbox/pages/base/typography.html +132 -0
  198. package/sandbox/pages/components/button.html +70 -0
  199. package/sandbox/pages/components/dialog.html +72 -0
  200. package/sandbox/pages/components/disclosure.html +77 -0
  201. package/sandbox/pages/components/form.html +164 -0
  202. package/sandbox/pages/components/loading.html +32 -0
  203. package/sandbox/pages/components/popover.html +119 -0
  204. package/sandbox/pages/components/progress.html +28 -0
  205. package/sandbox/pages/components/table.html +80 -0
  206. package/sandbox/pages/customs/badge.html +59 -0
  207. package/sandbox/pages/customs/breadcrumb.html +34 -0
  208. package/sandbox/pages/customs/card.html +71 -0
  209. package/sandbox/pages/customs/dropdown.html +70 -0
  210. package/sandbox/pages/customs/grid.html +109 -0
  211. package/sandbox/pages/customs/list.html +43 -0
  212. package/sandbox/pages/javascript/autofill.html +39 -0
  213. package/sandbox/pages/javascript/checkall.html +37 -0
  214. package/sandbox/pages/javascript/comfort.html +41 -0
  215. package/sandbox/pages/javascript/consent.html +45 -0
  216. package/sandbox/pages/javascript/form.html +50 -0
  217. package/sandbox/pages/javascript/scroll.html +44 -0
  218. package/sandbox/pages/javascript/slider.html +44 -0
  219. package/sandbox/pages/javascript/sortable.html +56 -0
  220. package/sandbox/pages/javascript/tabpanel.html +39 -0
  221. package/sandbox/pages/javascript/toggle.html +72 -0
  222. package/sandbox/pages/javascript/tree.html +96 -0
  223. package/sandbox/sandbox.js +26 -0
  224. package/sandbox/scss/sandbox-header.scss +93 -0
  225. package/scss/components/_badge.scss +2 -1
  226. package/scss/components/_dropdown.scss +2 -2
  227. package/scss/components/_group.scss +8 -4
  228. package/scss/components/_popover.scss +74 -0
  229. package/scss/components/index.scss +1 -0
  230. package/scss/vanilla-frontend-doc.scss +46 -1
  231. package/scss/vanilla-frontend-sandbox.scss +34 -0
  232. package/vite.config.js +30 -0
  233. package/docs/index.html +0 -36
  234. package/docs/main-demo.js +0 -2
  235. package/docs/main.js +0 -34
  236. package/docs/pages/base/layout.html +0 -131
  237. package/docs/pages/base/media.html +0 -142
  238. package/docs/pages/base/reset.html +0 -53
  239. package/docs/pages/base/typography.html +0 -334
  240. package/docs/pages/components/button.html +0 -202
  241. package/docs/pages/components/dialog.html +0 -336
  242. package/docs/pages/components/disclosure.html +0 -174
  243. package/docs/pages/components/form.html +0 -427
  244. package/docs/pages/components/loading.html +0 -58
  245. package/docs/pages/components/progress.html +0 -47
  246. package/docs/pages/components/table.html +0 -168
  247. package/docs/pages/customs/badge.html +0 -150
  248. package/docs/pages/customs/breadcrumb.html +0 -67
  249. package/docs/pages/customs/card.html +0 -185
  250. package/docs/pages/customs/drawer.html +0 -149
  251. package/docs/pages/customs/dropdown.html +0 -270
  252. package/docs/pages/customs/grid.html +0 -185
  253. package/docs/pages/customs/list.html +0 -112
  254. package/docs/pages/customs/slider.html +0 -273
  255. package/docs/pages/javascript/autofill.html +0 -170
  256. package/docs/pages/javascript/checkall.html +0 -59
  257. package/docs/pages/javascript/comfort.html +0 -146
  258. package/docs/pages/javascript/consent.html +0 -112
  259. package/docs/pages/javascript/cookie.html +0 -81
  260. package/docs/pages/javascript/form.html +0 -199
  261. package/docs/pages/javascript/scroll.html +0 -209
  262. package/docs/pages/javascript/sortable.html +0 -167
  263. package/docs/pages/javascript/tabpanel.html +0 -89
  264. package/docs/pages/javascript/toggle.html +0 -193
  265. package/docs/pages/javascript/trap.html +0 -89
  266. package/docs/pages/javascript/tree.html +0 -256
  267. package/docs/pages/quick-start/conventions.html +0 -112
  268. package/docs/pages/quick-start/customization.html +0 -187
  269. package/docs/pages/quick-start/installation.html +0 -97
  270. package/docs/pages/quick-start/mixins.html +0 -214
  271. package/docs/src/js/demo.js +0 -110
  272. package/docs/src/js/doc-code.js +0 -102
  273. package/docs/src/js/doc-demo.js +0 -14
  274. package/docs/src/js/doc-layout.js +0 -117
  275. package/docs/src/scss/demo.scss +0 -77
  276. package/docs/src/scss/layout.scss +0 -83
  277. package/docs/src/scss/style.scss +0 -278
  278. package/docs/vite.config.mjs +0 -23
  279. package/esbuild.mjs +0 -25
  280. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  281. package/vitest.config.js +0 -8
package/docs/pages/javascript/trap.html DELETED
@@ -1,89 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Javascript > Trap</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Trap</h1>
14
- <p>The trap component make you able to create a focus trap on an element.</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 Trap object.</p>
18
- <p>You can pass the element, an array of exclusions (= element that should not be inert) and an array of inclusions (= element that should be included into the trap) when initiate the component.</p>
19
-
20
- <doc-code data-type="js">
21
- import Trap from "@natachah/vanilla-frontend/js/utilities/_trap"
22
- new Trap(document.getElementById('drawer'), ['#backdrop','#toggleMenu'], ['#toggleMenu'])
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>focusOnFirst()</p>
37
- </td>
38
- <td data-label="Description">
39
- <p>This will focus on the first focusable element</p>
40
- </td>
41
- </tr>
42
- <tr>
43
- <td data-label="Method">
44
- <p>activate()</p>
45
- </td>
46
- <td data-label="Description">
47
- <p>This method will activate the trap, it will also set <code>inert</code> and <code>aria-hidden</code> attributes on other HTMLElements</p>
48
- </td>
49
- </tr>
50
- <tr>
51
- <td data-label="Method">
52
- <p>desactivate()</p>
53
- </td>
54
- <td data-label="Description">
55
- <p>This method will desactivate the trap and remove related attributes</p>
56
- </td>
57
- </tr>
58
- <tr>
59
- <td data-label="Method">
60
- <p>handleKeydown(e)</p>
61
- </td>
62
- <td data-label="Description">
63
- <p>This method will keep the <kbd>TAB</kbd> focus inside the element</p>
64
- </td>
65
- </tr>
66
- <tr>
67
- <td data-label="Method">
68
- <p>getFocusableElements()</p>
69
- </td>
70
- <td data-label="Description">
71
- <p>This method will return an array of focusable items inside the element</p>
72
- </td>
73
- </tr>
74
- <tr>
75
- <td data-label="Method">
76
- <p>getSiblingsOutside()</p>
77
- </td>
78
- <td data-label="Description">
79
- <p>This method will return an array of HTMLElements outside of the element</p>
80
- </td>
81
- </tr>
82
- </tbody>
83
- </table>
84
-
85
- </doc-layout>
86
- <script type="module" src="/main.js"></script>
87
- </body>
88
-
89
- </html>
package/docs/pages/javascript/tree.html DELETED
@@ -1,256 +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 > Tree</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <blockquote class="warning">
14
- <p>The <code>role=tree</code> and <code>role=treeGrid</code> are not accessible !</p>
15
- </blockquote>
16
-
17
- <h1>Tree</h1>
18
- <p>The tree component make you able to make a tree view by adding the <code>role=&quot;tree&quot;</code> attribute on a <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> tag.</p>
19
- <p>The <code>&lt;li&gt;</code> must have a <code>role=&quot;treeitem&quot;</code>, and if nested the <code>aria-expanded</code> and <code>aria-owns</code> attributes.</p>
20
- <doc-demo>
21
- <ul class="demo-tree">
22
- <li>1: Lorem, ipsum</li>
23
- <li>
24
- <button role="link" aria-controls="treelist" aria-expanded="false">
25
- 1: Inventore, perspiciatis (Open)
26
- </button>
27
- <ul id="treelist" tabindex="0" hidden>
28
- <li>2: Lorem</li>
29
- <li>
30
- <button role="link" aria-controls="subtreelist" aria-expanded="false">
31
- 2: Adipisci (Open)
32
- </button>
33
- <ul id="subtreelist" tabindex="0" hidden>
34
- <li>3: Lorem</li>
35
- <li>3: Adipisci</li>
36
- <li>3: Facilis</li>
37
- </ul>
38
- </li>
39
- <li>1: Facilis</li>
40
- </ul>
41
- </li>
42
- <li>Dolor, quis</li>
43
- </ul>
44
- </doc-demo>
45
-
46
- <div class="code-group">
47
- <div role="tablist">
48
- <button role="tab" aria-controls="html">HTML</button>
49
- <button role="tab" aria-controls="js">JS</button>
50
- </div>
51
- <doc-code id="html" data-type="html" role="tabpanel">
52
- <ul class="demo-tree">
53
- <li>1: Lorem, ipsum</li>
54
- <li>
55
- <button role="link" aria-controls="treelist" aria-expanded="false">
56
- 1: Inventore, perspiciatis (Open)
57
- </button>
58
- <ul id="treelist" tabindex="0" hidden>
59
- <li>2: Lorem</li>
60
- <li>
61
- <button role="link" aria-controls="subtreelist" aria-expanded="false">
62
- 2: Adipisci (Open)
63
- </button>
64
- <ul id="subtreelist" tabindex="0" hidden>
65
- <li>3: Lorem</li>
66
- <li>3: Adipisci</li>
67
- <li>3: Facilis</li>
68
- </ul>
69
- </li>
70
- <li>1: Facilis</li>
71
- </ul>
72
- </li>
73
- <li>Dolor, quis</li>
74
- </ul>
75
- </doc-code>
76
- <doc-code id="js" data-type="js" role="tabpanel">
77
- import Tree from "@natachah/vanilla-frontend/js/_tree"
78
- const treeList = document.querySelector('.demo-tree')
79
- if (treeList) new Tree(treeList)
80
- </doc-code>
81
- </div>
82
-
83
- <blockquote class="note">
84
- <p>Into a <code>&lt;li&gt;</code> you must add a <code>&lt;button&gt;</code> to toggle the children, otherwise it will toggle if you click on any child.</p>
85
- </blockquote>
86
-
87
- <p>This can also be implemented on a <code>&lt;table&gt;</code> but it required the <code>role=&quot;treegrid&quot;</code> attribute.</p>
88
- <doc-demo>
89
- <table class="demo-tree">
90
- <tbody>
91
- <tr aria-level="1">
92
- <td>1: Lorem, ipsum</td>
93
- </tr>
94
- <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
95
- <td>1: Cum, dolorum (open me)</td>
96
- </tr>
97
- <tr id="row1" aria-level="2" tabindex="0" hidden>
98
- <td>2: Lorem</td>
99
- </tr>
100
- <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
101
- <td>2: Quo (open me)</td>
102
- </tr>
103
- <tr id="row2-1" aria-level="3" tabindex="0" hidden>
104
- <td>2.1: Quo</td>
105
- </tr>
106
- <tr id="row2-2" aria-level="3" hidden>
107
- <td>2.2: Quo</td>
108
- </tr>
109
- <tr id="row3" aria-level="2" hidden>
110
- <td>2: Odio</td>
111
- </tr>
112
- <tr aria-level="1">
113
- <td>1: Perspiciatis, tenetur</td>
114
- </tr>
115
- </tbody>
116
- </table>
117
- </doc-demo>
118
-
119
- <doc-code>
120
- <table id="treeGrid" role="treegrid">
121
- <tbody>
122
- <tr aria-level="1">
123
- <td>1: Lorem, ipsum</td>
124
- </tr>
125
- <tr aria-level="1" aria-expanded="false" aria-controls="row1 row2 row3">
126
- <td>1: Cum, dolorum (open me)</td>
127
- </tr>
128
- <tr id="row1" aria-level="2" tabindex="0" hidden>
129
- <td>2: Lorem</td>
130
- </tr>
131
- <tr id="row2" aria-level="2" aria-expanded="false" aria-controls="row2-1 row2-2" hidden>
132
- <td>2: Quo (open me)</td>
133
- </tr>
134
- <tr id="row2-1" aria-level="3" tabindex="0" hidden>
135
- <td>2.1: Quo</td>
136
- </tr>
137
- <tr id="row2-2" aria-level="3" hidden>
138
- <td>2.2: Quo</td>
139
- </tr>
140
- <tr id="row3" aria-level="2" hidden>
141
- <td>2: Odio</td>
142
- </tr>
143
- <tr aria-level="1">
144
- <td>1: Perspiciatis, tenetur</td>
145
- </tr>
146
- </tbody>
147
- </table>
148
- </doc-code>
149
-
150
- <blockquote>
151
- <p>When it's a <code>&lt;table&gt;</code>, the close method will impact all the children associated.</p>
152
- </blockquote>
153
-
154
- <h2>Handle</h2>
155
- <p>You can decide which part of the item toggle the open/close method with the <code>data-handle="tree"</code> attribute</p>
156
- <doc-demo>
157
- <table class="demo-tree">
158
- <tbody>
159
- <tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
160
- <td>
161
- <span data-handle="tree">
162
- (open me)
163
- </span>
164
- </td>
165
- <td>1: Cum, dolorum</td>
166
- </tr>
167
- <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
168
- <td></td>
169
- <td>1.1: Lorem</td>
170
- </tr>
171
- </table>
172
- </doc-demo>
173
-
174
- <doc-code>
175
- <table class="demo-tree">
176
- <tbody>
177
- <tr aria-level="1" aria-expanded="false" aria-controls="rowExpandable">
178
- <td>
179
- <span data-handle="tree">
180
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
181
- <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
182
- </svg>
183
- (open me)
184
- </span>
185
- </td>
186
- <td>1: Cum, dolorum</td>
187
- </tr>
188
- <tr id="rowExpandable" aria-level="2" tabindex="0" hidden>
189
- <td></td>
190
- <td>1.1: Lorem</td>
191
- </tr>
192
- </table>
193
- </doc-code>
194
-
195
- <blockquote class="tip">
196
- <p>If there is an <code>&lt;svg&gt;</code> as handle, the default style will provide an animation.</p>
197
- </blockquote>
198
-
199
- <h2>Javascript</h2>
200
- <p>To enable this component you need to import the javascript file and create a new Tree object.</p>
201
- <h3>Methods</h3>
202
- <table>
203
- <thead>
204
- <tr>
205
- <th>Method</th>
206
- <th>Description</th>
207
- </tr>
208
- </thead>
209
- <tbody>
210
- <tr>
211
- <td data-label="Method">
212
- <p>resetEvents()</p>
213
- </td>
214
- <td data-label="Description">
215
- <p>This method will reset the items and events</p>
216
- </td>
217
- </tr>
218
- </tbody>
219
- </table>
220
- <h3>Events</h3>
221
- <table>
222
- <thead>
223
- <tr>
224
- <th>Event</th>
225
- <th>Description</th>
226
- <th>Value</th>
227
- </tr>
228
- </thead>
229
- <tbody>
230
- <tr>
231
- <td data-label="Event">
232
- <p>tree:changed</p>
233
- </td>
234
- <td data-label="Description">
235
- <p>This event is fired when an item is toggled</p>
236
- </td>
237
- <td data-label="Value">
238
- <p><code>isOpen</code> as a <code>boolean</code></p>
239
- </td>
240
- </tr>
241
- </tbody>
242
- </table>
243
-
244
- <doc-code data-type="js">
245
- const myTree = document.getElementById('myTree')
246
- myTree.addEventListener('tree:changed', (e) => {
247
- const isOpen = e.detail.isOpen
248
- ...
249
- })
250
- </doc-code>
251
-
252
- </doc-layout>
253
- <script type="module" src="/main.js"></script>
254
- </body>
255
-
256
- </html>
package/docs/pages/quick-start/conventions.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: Quick start > Naming conventions</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Naming conventions</h1>
14
-
15
- <p>Because all project should have some little rules...</p>
16
-
17
- <h2>Classless</h2>
18
-
19
- <p>The framework try to be classless as much as possible, this are the exeptions:</p>
20
-
21
- <ul>
22
- <li>.card</li>
23
- <li>.dropdown</li>
24
- <li>.grid</li>
25
- <li>.flex-grid</li>
26
- <li>.slider</li>
27
- <li>.group</li>
28
- <li>.list</li>
29
- </ul>
30
-
31
- <p>And for variations:</p>
32
-
33
- <ul>
34
- <li>.outline</li>
35
- <li>.COLORNAME (e.g.: .primary)</li>
36
- </ul>
37
-
38
- <blockquote>
39
- <p>For good practice avoid as much it's possible classes !</p>
40
- </blockquote>
41
-
42
- <h2>CSS and SCSS</h2>
43
-
44
- <ul>
45
- <li>The custom properties and variable must be <b>kebab-case</b></li>
46
- <li>Private properties start with an <b>underscore</b></li>
47
- <li>The classes must be <b>kebab-case</b></li>
48
- <li>The IDs must be <b>camelCase</b></li>
49
- <li>Use comment like in <a href="http://sassdoc.com/" target="_blank">SassDoc</a></li>
50
- </ul>
51
-
52
- <doc-code data-type="css">
53
- :root {
54
- --global-property: red;
55
- }
56
-
57
- .my-class {
58
- background-color: var(--global-property)
59
- }
60
-
61
- #myId {
62
- --_private-property: green;
63
- background-color: var(--_private-property);
64
- }
65
- </doc-code>
66
-
67
- <blockquote class="warning">
68
- <p>Limit the number of <b>custom properties defined</b>, using too many of them can impact performance. Avoid unnecessary complexity.</p>
69
- </blockquote>
70
-
71
- <doc-code data-type="scss">
72
- /// Description of the mixin
73
- ///
74
- /// @example something(red) // color: red
75
- /// @link http://sassdoc.com/annotations/
76
- /// @require {mixin} something
77
- /// @param {name} $name - The description
78
- /// @access public
79
- ///
80
- @mixin something($name){
81
- color: $name
82
- }
83
- </doc-code>
84
-
85
- <h2>Javascript</h2>
86
-
87
- <ul>
88
- <li>The variable and method name must be <b>camelCase</b></li>
89
- <li>Use comment like in <a href="https://jsdoc.app/" target="_blank">JSDoc</a></li>
90
- <li>Use single quote</li>
91
- <li>Avoid semicolon</li>
92
- </ul>
93
-
94
- <doc-code data-type="js">
95
- /**
96
- * Explaination of the method
97
- *
98
- * @param {number} length - The length of the rectangle
99
- * @param {number} width - The width of the rectangle
100
- * @returns {number} - The area of the rectangle
101
- */
102
- function calculate(length, width) {
103
- const myVariable = 'nothing'
104
- return length * height
105
- }
106
- </doc-code>
107
-
108
- </doc-layout>
109
- <script type="module" src="/main.js"></script>
110
- </body>
111
-
112
- </html>
package/docs/pages/quick-start/customization.html DELETED
@@ -1,187 +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: Quick start > Customization</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Customization</h1>
14
-
15
- <p>The framework make you able to customize almost everything. But keep in mind that most of the work will be to create you own components per website !</p>
16
-
17
- <h2>CSS custom properties</h2>
18
-
19
- <p>There is a bunch of default CSS custom properties, and (almost) each component have their own properties if needed.</p>
20
-
21
- <h3>Root</h3>
22
-
23
- <p>In the <code>:root</code> set the default CSS properties that are global to all your website.</p>
24
- <p>You also can split in multiple files, e.g.: <code>root.scss</code> and <code>color.scss</code></p>
25
-
26
- <p>You can use the default file <code>@natachah/vanilla-frontend/scss/themes/_root.scss</code>, or copy this code in your own file:</p>
27
-
28
- <doc-code data-type="css">
29
- :root {
30
-
31
- // Typography
32
- --font-size: 16px;
33
- --line-height: 1.5;
34
- --font-family: Arial;
35
- --font-weight: normal;
36
- --font-weight-light: 300;
37
- --font-weight-medium: 500;
38
- --font-weight-bold: 600;
39
-
40
- --font-size-h1: 2.25em; // 36px
41
- --font-size-h2: 2.00em; // 32px
42
- --font-size-h3: 1.75em; // 28px
43
- --font-size-h4: 1.50em; // 24px
44
- --font-size-h5: 1.25em; // 20px
45
- --font-size-h6: 1.125em; // 18px
46
- --font-size-large: 1.25em;
47
- --font-size-medium: 1.125em;
48
- --font-size-small: .875em;
49
-
50
- --word-spacing: normal;
51
- --letter-spacing: normal;
52
-
53
- // Anchor
54
- --decoration: none;
55
-
56
- // Layouts
57
- --padding-inline: .75em;
58
- --padding-block: .5em;
59
-
60
- // Border
61
- --border-size: 1px;
62
- --border-style: solid;
63
- --border-radius: .25rem;
64
-
65
- // Outline (:focus)
66
- --outline-size: 3px;
67
- --outline-style: solid;
68
- --outline-offset: 0;
69
- //--outline-color: var(--color-primary); To override default behavior
70
-
71
- // Backdrop
72
- --backdrop-color: rgba(255, 255, 255, .5);
73
-
74
- // Hover (color-mix)
75
- --hover-color: black;
76
- --hover-percent: 5%;
77
-
78
- // Active (color-mix)
79
- --active-color: black;
80
- --active-percent: 10%;
81
-
82
- // Focus (color-mix)
83
- --focus-color: currentColor;
84
- --focus-percent: 50%;
85
-
86
- // Disabled
87
- --disabled-opacity: 50%;
88
-
89
- // Colors
90
- --color-body: white;
91
- --color-font: black;
92
- --color-primary: #B790E5;
93
- --color-error: #DC3030;
94
- --color-success: #008A00;
95
- --color-warning: #FFA500;
96
-
97
- // Contrasts
98
- --color-warning-contrast: black;
99
-
100
- // Form
101
- --form-border-color: currentColor;
102
- --form-active-background: color-mix(in srgb, var(--form-background, transparent), var(--active-color, currentColor) 40%);
103
-
104
- // Icons
105
- --icon-external: url('data:image/svg+xml,...');
106
- --icon-date: url('data:image/svg+xml,...');
107
- --icon-time: url('data:image/svg+xml,...');
108
- --icon-file: url('data:image/svg+xml,...');
109
- --icon-select: url('data:image/svg+xml,...');
110
- --icon-radio: url('data:image/svg+xml,...');
111
- --icon-check: url('data:image/svg+xml,...');
112
- --icon-switch: var(--icon-radio);
113
-
114
- // Layout
115
- --layout-width: 1280px;
116
- --layout-gap-block: 1rem;
117
- --layout-gap-inline: 1rem;
118
- --layout-columns: 1;
119
-
120
- @media (min-width: 720px) {
121
- --layout-columns: 6;
122
- --layout-gap-block: 1rem;
123
- --layout-gap-inline: 1rem;
124
- }
125
-
126
- @media (min-width: 1024px) {
127
- --layout-columns: 12;
128
- --layout-gap-block: 2rem;
129
- --layout-gap-inline: 2rem;
130
- }
131
-
132
- @media (min-width: 1440px) {
133
- --layout-columns: 12;
134
- --layout-gap-block: 4rem;
135
- --layout-gap-inline: 2rem;
136
- }
137
-
138
- }
139
- </doc-code>
140
-
141
- <h3>Themes</h3>
142
- <p>You can define some CSS properties per theme with the attribute <code>[data-theme=MYTHEME]</code>:</p>
143
-
144
- <doc-code data-type="scss">
145
- // This is the light theme (or if there is none)
146
- html[data-theme=light],
147
- html:not([data-theme]) {
148
- --color-body: white;
149
- --color-font: black;
150
- }
151
-
152
- // This is for the dark theme
153
- html[data-theme=dark] {
154
- --color-body: black;
155
- --color-font: white;
156
- }
157
-
158
- // This is for the dark theme
159
- html[data-theme=my-custom-theme] {
160
- --color-body: white;
161
- --color-font: orange;
162
- }
163
- </doc-code>
164
-
165
- <blockquote>
166
- <p>In best practive it will be better to have a file per theme.</p>
167
- </blockquote>
168
-
169
- <h2>SCSS options</h2>
170
-
171
- <p>You can set custom settings with <code>@use "@natachah/vanilla-frontend/scss/components/..." with ( ... );.</code>. These custom values will override the default variables.</p>
172
-
173
- <p>There is also a <code>$default-item-properties</code> to define the default properties to use for items <em>(see mixins)</em></p>
174
-
175
- <p>There is 3 component sthat use this:</p>
176
-
177
- <doc-code data-type="scss">
178
- @use "./components/badge" with ($colors: ('primary'), $outline: true);
179
- @use "./components/button" with ($colors: ('primary'), $outline: true);
180
- @use "./components/card" with ($colors: ('primary'), $outline: true);
181
- </doc-code>
182
-
183
- </doc-layout>
184
- <script type="module" src="/main.js"></script>
185
- </body>
186
-
187
- </html>