@natachah/vanilla-frontend 0.4.1 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (283) hide show
  1. package/.gitlab-ci.yml +22 -13
  2. package/LICENSE.md +1 -1
  3. package/docs/.vitepress/config.mts +101 -0
  4. package/docs/base/layout.md +77 -0
  5. package/docs/base/media.md +146 -0
  6. package/docs/base/reset.md +33 -0
  7. package/docs/base/typography.md +296 -0
  8. package/docs/classes/badge.md +146 -0
  9. package/docs/classes/breadcrumb.md +54 -0
  10. package/docs/classes/card.md +171 -0
  11. package/docs/classes/dropdown.md +180 -0
  12. package/docs/classes/grid.md +230 -0
  13. package/docs/classes/list.md +90 -0
  14. package/docs/components/button.md +254 -0
  15. package/docs/components/dialog.md +223 -0
  16. package/docs/components/disclosure.md +169 -0
  17. package/docs/components/form.md +514 -0
  18. package/docs/components/loading.md +53 -0
  19. package/docs/components/popover.md +270 -0
  20. package/docs/components/progress.md +33 -0
  21. package/docs/components/table.md +175 -0
  22. package/docs/index.md +27 -0
  23. package/docs/javascript/autofill.md +155 -0
  24. package/docs/javascript/check.md +53 -0
  25. package/docs/javascript/comfort.md +125 -0
  26. package/docs/javascript/consent.md +89 -0
  27. package/docs/javascript/cookie.md +33 -0
  28. package/docs/javascript/drawer.md +99 -0
  29. package/docs/javascript/form.md +130 -0
  30. package/docs/javascript/scroll.md +104 -0
  31. package/docs/javascript/slider.md +130 -0
  32. package/docs/javascript/sortable.md +127 -0
  33. package/docs/javascript/tabpanel.md +72 -0
  34. package/docs/javascript/toggle.md +182 -0
  35. package/docs/javascript/trap.md +33 -0
  36. package/docs/javascript/tree.md +220 -0
  37. package/docs/prologue/conventions.md +92 -0
  38. package/docs/prologue/release.md +44 -0
  39. package/docs/prologue/upgrade.md +21 -0
  40. package/docs/{pages/demo/layout.html → public/demo/demo.html} +1 -2
  41. package/docs/start/customization.md +184 -0
  42. package/docs/start/install.md +80 -0
  43. package/docs/start/mixin.md +203 -0
  44. package/docs/vuejs/ComponentPreview.vue +99 -0
  45. package/js/_slider.js +17 -1
  46. package/js/{vanilla-frontend.js → vanilla-frontend-doc.js} +30 -33
  47. package/natachah-vanilla-frontend-1.0.1.tgz +0 -0
  48. package/package.json +11 -14
  49. package/public/404.html +22 -0
  50. package/public/assets/app.zYBRMlen.js +1 -0
  51. package/public/assets/base_layout.md.DPVON1Hq.js +13 -0
  52. package/public/assets/base_layout.md.DPVON1Hq.lean.js +1 -0
  53. package/public/assets/base_media.md.DHSlU0g6.js +24 -0
  54. package/public/assets/base_media.md.DHSlU0g6.lean.js +1 -0
  55. package/public/assets/base_reset.md.DD9AA1li.js +3 -0
  56. package/public/assets/base_reset.md.DD9AA1li.lean.js +1 -0
  57. package/public/assets/base_typography.md.C9BVN1Re.js +87 -0
  58. package/public/assets/base_typography.md.C9BVN1Re.lean.js +1 -0
  59. package/public/assets/chunks/ComponentPreview.Cw4G3qNN.js +27 -0
  60. package/public/assets/chunks/framework.26dFs73Q.js +4 -0
  61. package/public/assets/chunks/theme.D1Tljxds.js +1 -0
  62. package/public/assets/classes_badge.md.EznZXXqT.js +24 -0
  63. package/public/assets/classes_badge.md.EznZXXqT.lean.js +1 -0
  64. package/public/assets/classes_breadcrumb.md.DrzF9h9m.js +15 -0
  65. package/public/assets/classes_breadcrumb.md.DrzF9h9m.lean.js +1 -0
  66. package/public/assets/classes_card.md.BzNZEHe9.js +41 -0
  67. package/public/assets/classes_card.md.BzNZEHe9.lean.js +1 -0
  68. package/public/assets/classes_dropdown.md.CKZ2tv7T.js +70 -0
  69. package/public/assets/classes_dropdown.md.CKZ2tv7T.lean.js +1 -0
  70. package/public/assets/classes_grid.md.CKCvlWAg.js +45 -0
  71. package/public/assets/classes_grid.md.CKCvlWAg.lean.js +1 -0
  72. package/public/assets/classes_list.md.CjyB8PFK.js +36 -0
  73. package/public/assets/classes_list.md.CjyB8PFK.lean.js +1 -0
  74. package/public/assets/components_button.md.CX41PJBd.js +45 -0
  75. package/public/assets/components_button.md.CX41PJBd.lean.js +1 -0
  76. package/public/assets/components_dialog.md.JMjidrIE.js +76 -0
  77. package/public/assets/components_dialog.md.JMjidrIE.lean.js +1 -0
  78. package/public/assets/components_disclosure.md.BwvLkFL_.js +53 -0
  79. package/public/assets/components_disclosure.md.BwvLkFL_.lean.js +1 -0
  80. package/public/assets/components_form.md.C6B5z_6G.js +122 -0
  81. package/public/assets/components_form.md.C6B5z_6G.lean.js +1 -0
  82. package/public/assets/components_loading.md.51ktm2_l.js +4 -0
  83. package/public/assets/components_loading.md.51ktm2_l.lean.js +1 -0
  84. package/public/assets/components_popover.md.DpbAjVUj.js +102 -0
  85. package/public/assets/components_popover.md.DpbAjVUj.lean.js +1 -0
  86. package/public/assets/components_progress.md.H7v6t9h-.js +6 -0
  87. package/public/assets/components_progress.md.H7v6t9h-.lean.js +1 -0
  88. package/public/assets/components_table.md.BPrpvUDy.js +75 -0
  89. package/public/assets/components_table.md.BPrpvUDy.lean.js +1 -0
  90. package/public/assets/index.md.DNiLOsZD.js +1 -0
  91. package/public/assets/index.md.DNiLOsZD.lean.js +1 -0
  92. package/public/assets/inter-italic-cyrillic-ext._dlW9xFb.woff2 +0 -0
  93. package/public/assets/inter-italic-cyrillic.D7dRslh9.woff2 +0 -0
  94. package/public/assets/inter-italic-greek-ext.Ct-Tf2bq.woff2 +0 -0
  95. package/public/assets/inter-italic-greek.DNcpQ8QC.woff2 +0 -0
  96. package/public/assets/inter-italic-latin-ext.DytegdRQ.woff2 +0 -0
  97. package/public/assets/inter-italic-latin.COaG5lWR.woff2 +0 -0
  98. package/public/assets/inter-italic-vietnamese.BI5UxJD-.woff2 +0 -0
  99. package/public/assets/inter-roman-cyrillic-ext.BeNbU08G.woff2 +0 -0
  100. package/public/assets/inter-roman-cyrillic.CD0kT8R4.woff2 +0 -0
  101. package/public/assets/inter-roman-greek-ext.CFAEQ5Ow.woff2 +0 -0
  102. package/public/assets/inter-roman-greek.Dsf7YjP7.woff2 +0 -0
  103. package/public/assets/inter-roman-latin-ext.Dl_ayf4-.woff2 +0 -0
  104. package/public/assets/inter-roman-latin.Cy4MYw_J.woff2 +0 -0
  105. package/public/assets/inter-roman-vietnamese.CpqCnS2H.woff2 +0 -0
  106. package/public/assets/javascript_autofill.md.HyVx8c7W.js +49 -0
  107. package/public/assets/javascript_autofill.md.HyVx8c7W.lean.js +1 -0
  108. package/public/assets/javascript_check.md.BCbZtUBE.js +13 -0
  109. package/public/assets/javascript_check.md.BCbZtUBE.lean.js +1 -0
  110. package/public/assets/javascript_comfort.md.CQm191VA.js +20 -0
  111. package/public/assets/javascript_comfort.md.CQm191VA.lean.js +1 -0
  112. package/public/assets/javascript_consent.md.CbDzabMd.js +29 -0
  113. package/public/assets/javascript_consent.md.CbDzabMd.lean.js +1 -0
  114. package/public/assets/javascript_cookie.md.CFVe2JRe.js +2 -0
  115. package/public/assets/javascript_cookie.md.CFVe2JRe.lean.js +1 -0
  116. package/public/assets/javascript_drawer.md.D_pT0mrZ.js +32 -0
  117. package/public/assets/javascript_drawer.md.D_pT0mrZ.lean.js +1 -0
  118. package/public/assets/javascript_form.md.sGYh1L4I.js +40 -0
  119. package/public/assets/javascript_form.md.sGYh1L4I.lean.js +2 -0
  120. package/public/assets/javascript_scroll.md.DeOZ4grw.js +30 -0
  121. package/public/assets/javascript_scroll.md.DeOZ4grw.lean.js +1 -0
  122. package/public/assets/javascript_slider.md.CIa7pHr9.js +27 -0
  123. package/public/assets/javascript_slider.md.CIa7pHr9.lean.js +1 -0
  124. package/public/assets/javascript_sortable.md.CThHVTgW.js +35 -0
  125. package/public/assets/javascript_sortable.md.CThHVTgW.lean.js +1 -0
  126. package/public/assets/javascript_tabpanel.md.CxAFdAGU.js +19 -0
  127. package/public/assets/javascript_tabpanel.md.CxAFdAGU.lean.js +1 -0
  128. package/public/assets/javascript_toggle.md.C66hpUWF.js +46 -0
  129. package/public/assets/javascript_toggle.md.C66hpUWF.lean.js +1 -0
  130. package/public/assets/javascript_trap.md.Dt2Rt__e.js +2 -0
  131. package/public/assets/javascript_trap.md.Dt2Rt__e.lean.js +1 -0
  132. package/public/assets/javascript_tree.md.COR-Pj1y.js +72 -0
  133. package/public/assets/javascript_tree.md.COR-Pj1y.lean.js +1 -0
  134. package/public/assets/prologue_conventions.md.wCplqeKt.js +34 -0
  135. package/public/assets/prologue_conventions.md.wCplqeKt.lean.js +1 -0
  136. package/public/assets/prologue_release.md.CBJGKY_Y.js +1 -0
  137. package/public/assets/prologue_release.md.CBJGKY_Y.lean.js +1 -0
  138. package/public/assets/prologue_upgrade.md.E_0GNNE2.js +1 -0
  139. package/public/assets/prologue_upgrade.md.E_0GNNE2.lean.js +1 -0
  140. package/public/assets/start_customization.md.C4fmzVYD.js +141 -0
  141. package/public/assets/start_customization.md.C4fmzVYD.lean.js +1 -0
  142. package/public/assets/start_install.md.vqLh01mm.js +46 -0
  143. package/public/assets/start_install.md.vqLh01mm.lean.js +1 -0
  144. package/public/assets/start_mixin.md.B5VMlbiN.js +85 -0
  145. package/public/assets/start_mixin.md.B5VMlbiN.lean.js +1 -0
  146. package/public/assets/style.Dl6gCPEE.css +1 -0
  147. package/public/base/layout.html +37 -0
  148. package/public/base/media.html +179 -0
  149. package/public/base/reset.html +27 -0
  150. package/public/base/typography.html +320 -0
  151. package/public/bundles/vanilla-frontend-doc.css +1 -0
  152. package/public/bundles/vanilla-frontend-doc.js +1 -0
  153. package/public/bundles/vanilla-frontend.css +1 -0
  154. package/public/classes/badge.html +205 -0
  155. package/public/classes/breadcrumb.html +66 -0
  156. package/public/classes/card.html +222 -0
  157. package/public/classes/dropdown.html +147 -0
  158. package/public/classes/grid.html +278 -0
  159. package/public/classes/list.html +113 -0
  160. package/public/components/button.html +304 -0
  161. package/public/components/dialog.html +205 -0
  162. package/public/components/disclosure.html +130 -0
  163. package/public/components/form.html +589 -0
  164. package/public/components/loading.html +107 -0
  165. package/public/components/popover.html +257 -0
  166. package/public/components/progress.html +57 -0
  167. package/public/components/table.html +152 -0
  168. package/public/demo/demo.html +84 -0
  169. package/public/hashmap.json +1 -0
  170. package/public/index.html +25 -0
  171. package/public/javascript/autofill.html +152 -0
  172. package/public/javascript/check.html +64 -0
  173. package/public/javascript/comfort.html +123 -0
  174. package/public/javascript/consent.html +80 -0
  175. package/public/javascript/cookie.html +26 -0
  176. package/public/javascript/drawer.html +83 -0
  177. package/public/javascript/form.html +117 -0
  178. package/public/javascript/scroll.html +81 -0
  179. package/public/javascript/slider.html +78 -0
  180. package/public/javascript/sortable.html +112 -0
  181. package/public/javascript/tabpanel.html +70 -0
  182. package/public/javascript/toggle.html +201 -0
  183. package/public/javascript/trap.html +26 -0
  184. package/public/javascript/tree.html +175 -0
  185. package/public/prologue/conventions.html +58 -0
  186. package/public/prologue/release.html +25 -0
  187. package/public/prologue/upgrade.html +25 -0
  188. package/public/start/customization.html +165 -0
  189. package/public/start/install.html +70 -0
  190. package/public/start/mixin.html +109 -0
  191. package/public/vp-icons.css +0 -0
  192. package/sandbox/index.html +27 -0
  193. package/sandbox/js/sandbox-header.js +57 -0
  194. package/sandbox/js/sandbox-test.js +112 -0
  195. package/sandbox/pages/base/layout.html +80 -0
  196. package/sandbox/pages/base/media.html +52 -0
  197. package/sandbox/pages/base/typography.html +132 -0
  198. package/sandbox/pages/components/button.html +70 -0
  199. package/sandbox/pages/components/dialog.html +72 -0
  200. package/sandbox/pages/components/disclosure.html +77 -0
  201. package/sandbox/pages/components/form.html +164 -0
  202. package/sandbox/pages/components/loading.html +32 -0
  203. package/sandbox/pages/components/popover.html +119 -0
  204. package/sandbox/pages/components/progress.html +28 -0
  205. package/sandbox/pages/components/table.html +80 -0
  206. package/sandbox/pages/customs/badge.html +59 -0
  207. package/sandbox/pages/customs/breadcrumb.html +34 -0
  208. package/sandbox/pages/customs/card.html +71 -0
  209. package/sandbox/pages/customs/dropdown.html +70 -0
  210. package/sandbox/pages/customs/grid.html +109 -0
  211. package/sandbox/pages/customs/list.html +43 -0
  212. package/sandbox/pages/javascript/autofill.html +39 -0
  213. package/sandbox/pages/javascript/checkall.html +37 -0
  214. package/sandbox/pages/javascript/comfort.html +41 -0
  215. package/sandbox/pages/javascript/consent.html +45 -0
  216. package/sandbox/pages/javascript/form.html +51 -0
  217. package/sandbox/pages/javascript/scroll.html +44 -0
  218. package/sandbox/pages/javascript/slider.html +44 -0
  219. package/sandbox/pages/javascript/sortable.html +56 -0
  220. package/sandbox/pages/javascript/tabpanel.html +39 -0
  221. package/sandbox/pages/javascript/toggle.html +72 -0
  222. package/sandbox/pages/javascript/tree.html +96 -0
  223. package/sandbox/sandbox.js +26 -0
  224. package/sandbox/scss/sandbox-header.scss +93 -0
  225. package/scss/base/_layout.scss +1 -0
  226. package/scss/base/_reset.scss +5 -0
  227. package/scss/components/_badge.scss +2 -1
  228. package/scss/components/_dropdown.scss +2 -2
  229. package/scss/components/_group.scss +8 -4
  230. package/scss/components/_popover.scss +74 -0
  231. package/scss/components/index.scss +1 -0
  232. package/scss/vanilla-frontend-doc.scss +46 -1
  233. package/scss/vanilla-frontend-sandbox.scss +34 -0
  234. package/vite.config.js +30 -0
  235. package/docs/index.html +0 -36
  236. package/docs/main-demo.js +0 -2
  237. package/docs/main.js +0 -34
  238. package/docs/pages/base/layout.html +0 -131
  239. package/docs/pages/base/media.html +0 -142
  240. package/docs/pages/base/reset.html +0 -53
  241. package/docs/pages/base/typography.html +0 -334
  242. package/docs/pages/components/button.html +0 -202
  243. package/docs/pages/components/dialog.html +0 -336
  244. package/docs/pages/components/disclosure.html +0 -174
  245. package/docs/pages/components/form.html +0 -427
  246. package/docs/pages/components/loading.html +0 -58
  247. package/docs/pages/components/progress.html +0 -47
  248. package/docs/pages/components/table.html +0 -168
  249. package/docs/pages/customs/badge.html +0 -150
  250. package/docs/pages/customs/breadcrumb.html +0 -67
  251. package/docs/pages/customs/card.html +0 -185
  252. package/docs/pages/customs/drawer.html +0 -149
  253. package/docs/pages/customs/dropdown.html +0 -270
  254. package/docs/pages/customs/grid.html +0 -185
  255. package/docs/pages/customs/list.html +0 -112
  256. package/docs/pages/customs/slider.html +0 -273
  257. package/docs/pages/javascript/autofill.html +0 -170
  258. package/docs/pages/javascript/checkall.html +0 -59
  259. package/docs/pages/javascript/comfort.html +0 -146
  260. package/docs/pages/javascript/consent.html +0 -112
  261. package/docs/pages/javascript/cookie.html +0 -81
  262. package/docs/pages/javascript/form.html +0 -199
  263. package/docs/pages/javascript/scroll.html +0 -209
  264. package/docs/pages/javascript/sortable.html +0 -167
  265. package/docs/pages/javascript/tabpanel.html +0 -89
  266. package/docs/pages/javascript/toggle.html +0 -193
  267. package/docs/pages/javascript/trap.html +0 -89
  268. package/docs/pages/javascript/tree.html +0 -256
  269. package/docs/pages/quick-start/conventions.html +0 -112
  270. package/docs/pages/quick-start/customization.html +0 -187
  271. package/docs/pages/quick-start/installation.html +0 -97
  272. package/docs/pages/quick-start/mixins.html +0 -214
  273. package/docs/src/js/demo.js +0 -110
  274. package/docs/src/js/doc-code.js +0 -102
  275. package/docs/src/js/doc-demo.js +0 -14
  276. package/docs/src/js/doc-layout.js +0 -117
  277. package/docs/src/scss/demo.scss +0 -77
  278. package/docs/src/scss/layout.scss +0 -83
  279. package/docs/src/scss/style.scss +0 -278
  280. package/docs/vite.config.mjs +0 -23
  281. package/esbuild.mjs +0 -25
  282. package/natachah-vanilla-frontend-0.4.1.tgz +0 -0
  283. package/vitest.config.js +0 -8
package/docs/pages/javascript/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>