@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/quick-start/installation.html DELETED
@@ -1,97 +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 > Installation</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Installation</h1>
14
-
15
- <p>Install the package via <b>NPM</b></p>
16
-
17
- <doc-code data-typ="sh">
18
- npm i @natachah/vanilla-frontend
19
- </doc-code>
20
-
21
- <p>Then you can import the <b>SCSS</b> files:</p>
22
-
23
- <doc-code data-type="scss">
24
- @use '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
25
- </doc-code>
26
-
27
- <p>Or better, include only the files that you need, here the template with all files:</p>
28
-
29
- <doc-code data-type="scss">
30
- // Should be overide by your own files
31
- @use '@natachah/vanilla-frontend/scss/themes/_root';
32
-
33
- // If you need to use the mixin
34
- @use '@natachah/vanilla-frontend/scss/abstracts/_mixins';
35
-
36
- // Base files (reset, typography and media)
37
- @use "@natachah/vanilla-frontend/scss/base";
38
-
39
- // Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
40
- @use '@natachah/vanilla-frontend/scss/components/_badge';
41
- @use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
42
- @use '@natachah/vanilla-frontend/scss/components/_button';
43
- @use '@natachah/vanilla-frontend/scss/components/_card';
44
- @use '@natachah/vanilla-frontend/scss/components/_dialog';
45
- @use '@natachah/vanilla-frontend/scss/components/_disclosure';
46
- @use '@natachah/vanilla-frontend/scss/components/_drawer';
47
- @use '@natachah/vanilla-frontend/scss/components/_dropdown';
48
- @use '@natachah/vanilla-frontend/scss/components/_form';
49
- @use '@natachah/vanilla-frontend/scss/components/_grid';
50
- @use '@natachah/vanilla-frontend/scss/components/_group';
51
- @use '@natachah/vanilla-frontend/scss/components/_list';
52
- @use '@natachah/vanilla-frontend/scss/components/_loading';
53
- @use '@natachah/vanilla-frontend/scss/components/_progress';
54
- @use '@natachah/vanilla-frontend/scss/components/_slider';
55
- @use '@natachah/vanilla-frontend/scss/components/_table';
56
-
57
- </doc-code>
58
-
59
- <blockquote>
60
- <p>There is no required files, but it's recommanded to have at least the <b>base/*</b> and the <b>themes/root</b></p>
61
- </blockquote>
62
-
63
- <p>Import the <b>Javascript</b> files that you need, here the template:</p>
64
-
65
- <doc-code data-type="js">
66
- // If you need to create some component, you can use this
67
- import BaseComponent from "@natachah/vanilla-frontend/js/utilities/_base-component"
68
- import ErrorMessage from "@natachah/vanilla-frontend/js/utilities/_error"
69
- import Cookie from "@natachah/vanilla-frontend/js/utilities/_cookie"
70
-
71
- // Here the helpers
72
- import FormHelper from "@natachah/vanilla-frontend/js/utilities/_form-helper"
73
-
74
- // Here the components
75
- import Autofill from "@natachah/vanilla-frontend/js/_autofill"
76
- import CheckAll from "@natachah/vanilla-frontend/js/_check-all"
77
- import Comfort from "@natachah/vanilla-frontend/js/_comfort"
78
- import Consent from "@natachah/vanilla-frontend/js/_consent"
79
- import Dialog from "@natachah/vanilla-frontend/js/_dialog"
80
- import Dropdown from "@natachah/vanilla-frontend/js/_dropdown"
81
- import Drawer from "@natachah/vanilla-frontend/js/_drawer"
82
- import Scroll from "@natachah/vanilla-frontend/js/_scroll"
83
- import Slider from "@natachah/vanilla-frontend/js/_slider"
84
- import Sortable from "@natachah/vanilla-frontend/js/_sortable"
85
- import Toggle from "@natachah/vanilla-frontend/js/_toggle"
86
- import Tree from "@natachah/vanilla-frontend/js/_tree"
87
- </doc-code>
88
-
89
- <blockquote class="tip">
90
- <p>Import only the files that you need to keep the assets lightweight !</p>
91
- </blockquote>
92
-
93
- </doc-layout>
94
- <script type="module" src="/main.js"></script>
95
- </body>
96
-
97
- </html>
package/docs/pages/quick-start/mixins.html DELETED
@@ -1,214 +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 > SCSS mixins</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>SCSS Mixins</h1>
14
-
15
- <p>The framework come with some helpfull SCSS mixins to re-use.</p>
16
-
17
- <p>To use them, import this file:</p>
18
-
19
- <doc-code data-type="scss">
20
- @use '@natachah/vanilla-frontend/scss/abstracts/mixins';
21
- </doc-code>
22
-
23
- <h2>Create an item</h2>
24
-
25
- <p>This mixin create an element as an item with some default style properties:</p>
26
-
27
- <ul>
28
- <li>Color</li>
29
- <li>Background</li>
30
- <li>Border</li>
31
- <li>Border radius</li>
32
- <li>Padding</li>
33
- <li>...and more for each states</li>
34
- </ul>
35
-
36
- <doc-code data-type="scss">
37
- /// Create a basic item that can be interactive or not
38
- ///
39
- /// @param {string} $name - Name of the component
40
- /// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
41
- /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
42
- /// @access public
43
- ///
44
-
45
- @include as-item($name, $states: (), $properties: default.$item-properties)
46
- </doc-code>
47
-
48
- <blockquote class="warning">
49
- <p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
50
- </blockquote>
51
-
52
- <h2>Create a list</h2>
53
- <p>This mixin transform a <code>&lt;ul/ol/div&gt;</code> as a group list with all children as an item.</p>
54
-
55
- <doc-code data-type="scss">
56
- /// Create a basic list group that can be interactive
57
- ///
58
- /// @require {mixin} as-item
59
- /// @param {string} $name - Name of the component
60
- /// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
61
- /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
62
- /// @access public
63
- ///
64
-
65
- @include as-list($name, $states: (), $properties: default.$item-properties)
66
- </doc-code>
67
-
68
- <blockquote>
69
- <p>This mixin is used for the <b>list</b> and <b>dropdown</b> components</p>
70
- </blockquote>
71
-
72
- <h2>Add header and footer to an item</h2>
73
-
74
- <p>This mixin will create a header and a footer with negativ margin, some padding and a divider border.</p>
75
-
76
- <doc-code data-type="scss">
77
- /// Create a basic item with an header and a footer style
78
- ///
79
- /// @param {string} $name - Name of the component
80
- /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
81
- /// @access public
82
- ///
83
- @mixin with-header-and-footer($name, $properties: default.$item-properties)
84
- </doc-code>
85
-
86
- <blockquote>
87
- <p>This mixin is used in <b>Dialog</b> components</p>
88
- </blockquote>
89
-
90
- <h2>Set outline variation</h2>
91
-
92
- <p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
93
-
94
- <doc-code id="scss" data-type="scss" >
95
- /// Create some outline variations
96
- ///
97
- /// @param {string} $name - Name of the component
98
- /// @param {array} $states - List of interactions
99
- /// @param {string} $color - The color of the item
100
- /// @param {string} $contrast - The color contrast of the item
101
- /// @access public
102
- ///
103
-
104
- @include with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body))
105
- </doc-code>
106
-
107
- <h2>Set color variation</h2>
108
-
109
- <p>This mixin will create the <code>.COLOR</code> classes to transform an item to multiple color variations.</p>
110
-
111
- <doc-code id="scss" data-type="scss">
112
- /// Create some color variations
113
- ///
114
- /// @param {string} $name - Name of the component
115
- /// @param {array} $states - List of interactions
116
- /// @param {array} $colors - List of colors
117
- /// @param {boolean} $withOutline - Thit outline colored version
118
- /// @access public
119
- ///
120
-
121
- @include with-color-variations($name, $states: (), $colors: (), $withOutline: true)
122
- </doc-code>
123
-
124
- <h2>Transform table to be responsive</h2>
125
-
126
- <p>This mixin will transform a <code>&lt;table&gt;</code> to a more responsive view. You must use this mixin inside a <code>@media</code> or a <code>@container</code>.</p>
127
-
128
- <p>It also required to add the attribute <code>data-label="Name of the column"</code> on each <code>&lt;td&gt;</code>.</p>
129
-
130
- <div class="code-group">
131
- <div role="tablist">
132
- <button role="tab" aria-controls="html">HTML</button>
133
- <button role="tab" aria-controls="scss">SCSS</button>
134
- <button role="tab" aria-controls="css">CSS</button>
135
- </div>
136
- <doc-code id="html" data-type="html" role="tabpanel">
137
- <table>
138
- <thead>
139
- <tr>
140
- <th>Header A</th>
141
- <th>Header B</th>
142
- <th>Header C</th>
143
- </tr>
144
- </thead>
145
- <tbody>
146
- <tr>
147
- <td data-label="Header A">Cell</td>
148
- <td data-label="Header B">Cell</td>
149
- <td data-label="Header C">Cell</td>
150
- </tr>
151
- </tbody>
152
- </table>
153
- </doc-code>
154
- <doc-code id="scss" data-type="scss" role="tabpanel">
155
- @container (max-width:800px) {
156
- table {
157
- @include as-responsive-table()
158
- }
159
- }
160
- </doc-code>
161
- <doc-code id="css" data-type="css" role="tabpanel">
162
- --table-grid-template: 15ch 1fr;
163
- </doc-code>
164
- </div>
165
-
166
- <blockquote>
167
- <p>By default the grid is set on 2 columns (15 characters and auto).</p>
168
- </blockquote>
169
-
170
- <h2>Flex grid utilities</h2>
171
-
172
- <p>There two mixins to make it easier to change the offset and the width of a specific column when used with the <b>grid</b> component.</p>
173
-
174
- <div class="code-group">
175
- <div role="tablist">
176
- <button role="tab" aria-controls="html">HTML</button>
177
- <button role="tab" aria-controls="scss">SCSS</button>
178
- </div>
179
- <doc-code id="html" data-type="html" role="tabpanel">
180
- <div class="flex-grid">
181
- <div>Flex 1</div>
182
- <div>Flex 2</div>
183
- <div>Flex 3</div>
184
- <div id="wider">Wider of 3</div>
185
- <div id="offset">Offset of 2</div>
186
- </div>
187
- </doc-code>
188
- <doc-code id="scss" data-type="scss" role="tabpanel">
189
- #wider {
190
- @include flex-grid-wider-column(3)
191
- }
192
-
193
- #offset {
194
- @include flex-grid-offset-column(2)
195
- }
196
- </doc-code>
197
- </div>
198
-
199
- <blockquote class="warning">
200
- <p>This mixins only work with <code>.flex-grid</code></p>
201
- </blockquote>
202
-
203
- <blockquote>
204
- <p>By default the <code>flex-grid-wider-column</code> parameter is <code>2</code>, to have the width equal of two columns width.</p>
205
- </blockquote>
206
- <blockquote>
207
- <p>By default the <code>flex-grid-offset-column</code> parameter is <code>1</code> to take the place of one column width.</p>
208
- </blockquote>
209
-
210
- </doc-layout>
211
- <script type="module" src="/main.js"></script>
212
- </body>
213
-
214
- </html>
package/docs/src/js/demo.js DELETED
@@ -1,110 +0,0 @@
1
- /**
2
- * ------------------------------------------------------------------
3
- * Demo
4
- * ------------------------------------------------------------------
5
- * This is the code for the demonstration code
6
- *
7
- * @author Natacha Herth
8
-
9
- * @copyright Natacha Herth, design & web development
10
- *
11
- */
12
-
13
- import Dialog from './../../../js/_dialog.js'
14
- const dialogs = document.querySelectorAll('.demo-dialog')
15
- if (dialogs) dialogs.forEach(dialog => new Dialog(dialog))
16
-
17
- const demoDialogFormJS = document.getElementById('demoDialogFormJs')
18
- if (demoDialogFormJS) {
19
- demoDialogFormJS.addEventListener('dialog:submited', (e) => {
20
- const value = e.detail.form.querySelector('input').value
21
- document.getElementById('favorite').innerText = value
22
- })
23
- }
24
-
25
- import Dropdown from "./../../../js/_dropdown.js"
26
- const dropdowns = document.querySelectorAll('.demo-dropdown')
27
- if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
28
-
29
- import Slider from './../../../js/_slider.js'
30
- //if (sliders) sliders.forEach(slider => new Slider(slider))
31
- const sliderFull = document.getElementById('sliderFull')
32
- if (sliderFull) new Slider(sliderFull, {
33
- //behavior: 'instant',
34
- loop: true,
35
- //autoplay: 1500
36
- })
37
-
38
- const sliderFade = document.getElementById('sliderFade')
39
- if (sliderFade) {
40
- const mySliderObj = new Slider(sliderFade, {
41
- behavior: 'instant',
42
- loop: true,
43
- autoplay: 4000
44
- })
45
- sliderFade.addEventListener('slider:changed', (ev) => {
46
- const src = mySliderObj._slides[ev.detail.previous].querySelector('img').getAttribute('src')
47
- sliderFade.style.backgroundImage = `url("${src}")`
48
- })
49
- }
50
-
51
- import Autofill from "./../../../js/_autofill"
52
- const autofills = document.querySelectorAll('.demo-autofill')
53
- if (autofills) autofills.forEach(autofill => new Autofill(autofill))
54
-
55
- import CheckAll from "./../../../js/_check-all"
56
- const checkboxAll = document.getElementById('demoCheckboxAll')
57
- if (checkboxAll) new CheckAll(checkboxAll)
58
-
59
- import Comfort from "./../../../js/_comfort"
60
- const demoConfort = new Comfort('demo-confort')
61
-
62
- if (document.getElementById('resetConfort')) {
63
- document.getElementById('resetConfort').addEventListener('click', () => {
64
- demoConfort.reset()
65
- })
66
- }
67
-
68
- import Consent from "./../../../js/_consent"
69
- if (document.getElementById('demoCookies')) {
70
- new Consent('demo-consent', 'demoCookies', 'demoCookiesPreferences')
71
- }
72
-
73
- import FormHelper from "./../../../js/utilities/_form-helper"
74
- const passwordButton = document.getElementById('demoPassword')
75
- if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))
76
- const demoToggleFormButton = document.getElementById('demoToggleFormButton')
77
- const demoToggleFormContent = document.getElementById('demoToggleFormContent')
78
-
79
- if (demoToggleFormButton && demoToggleFormContent) {
80
- const fields = demoToggleFormContent.querySelectorAll('input,select,textarea')
81
- new Toggle(demoToggleFormButton)
82
- demoToggleFormButton.addEventListener('toggle:changed', (e) => {
83
- FormHelper.toggleAttributes(fields, !demoToggleFormContent.hidden, {
84
- reset: true,
85
- disabled: true,
86
- required: ['test'],
87
- unchanged: ['test']
88
- })
89
- })
90
- }
91
-
92
- import Scroll from "./../../../js/_scroll"
93
- const scrollSpy = document.getElementById('demoScrollSpy')
94
- if (scrollSpy) {
95
- new Scroll(scrollSpy, {
96
- navigation: 'demoScrollNav'
97
- })
98
- }
99
-
100
- import Sortable from "./../../../js/_sortable"
101
- const sortables = document.querySelectorAll('.demo-sortable')
102
- if (sortables) sortables.forEach(sortable => new Sortable(sortable))
103
-
104
- import Toggle from "./../../../js/_toggle.js"
105
- const toggles = document.querySelectorAll('.demo-toggle')
106
- if (toggles) toggles.forEach(toggle => new Toggle(toggle))
107
-
108
- import Tree from "./../../../js/_tree"
109
- const trees = document.querySelectorAll('.demo-tree')
110
- if (trees) trees.forEach(tree => new Tree(tree))
package/docs/src/js/doc-code.js DELETED
@@ -1,102 +0,0 @@
1
- const template = document.createElement('template')
2
- template.innerHTML = `
3
- <style>
4
- pre {
5
- white-space: preserve;
6
- word-spacing: normal;
7
- word-break: normal;
8
- word-wrap:normal;
9
- tab-size:0;
10
- hyphen:none;
11
- margin: 0;
12
- }
13
- .copy-btn {
14
- all: unset;
15
- color: white;
16
- position: absolute;
17
- top: 0;
18
- right: 0;
19
- padding:.75rem;
20
- font-size:12px;
21
- line-height:12px;
22
- border-radius: .5rem;
23
- opacity: .5;
24
- transition: opacity .25s ;
25
- }
26
- .copy-btn:hover {
27
- cursor:pointer;
28
- opacity: 1;
29
-
30
- }
31
- pre {
32
- overflow: auto;
33
- }
34
- </style>
35
- <button class="copy-btn" aria-label="Copy to clipboard" title="Copy to clipboard">
36
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
37
- <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
38
- <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
39
- </svg>
40
- </button>
41
- <div class="my-code"></div>
42
- `
43
-
44
- import { getHighlighter } from 'shiki'
45
- const highlighter = await getHighlighter({
46
- themes: ['one-light', 'one-dark-pro'],
47
- langs: ['javascript', 'html', 'css', 'scss', 'sh'],
48
- })
49
-
50
- class DocCode extends HTMLElement {
51
- constructor() {
52
-
53
- super()
54
-
55
- // Define the shadow
56
- const shadow = this.attachShadow({ mode: 'open' })
57
- shadow.append(template.content.cloneNode(true))
58
- this.code = shadow.querySelector('.my-code')
59
-
60
- // Get the type of code
61
- const type = this.getAttribute('data-type') ?? 'html'
62
-
63
- // Clean the code
64
- let content = type === 'html' ? this.innerHTML : this.textContent
65
- var pattern = content.match(/\s*\n[\t\s]*/)
66
- content = content.replace(new RegExp(pattern, "g"), '\n').replaceAll('=""', '')
67
- content = content.trim()
68
-
69
- // Run the shiki plugin
70
- const shiki = highlighter.codeToHtml(content, {
71
- lang: type,
72
- theme: 'one-dark-pro'
73
- })
74
-
75
- // Replace the content by the shiki <pre>
76
- this.code.innerHTML = shiki
77
-
78
- // Init copy button
79
- const delay = (s) => new Promise((resolve) => setTimeout(resolve, s * 1000))
80
- const copyBtn = shadow.querySelector('.copy-btn')
81
- if (copyBtn) copyBtn.addEventListener('click', async () => {
82
- navigator.clipboard.writeText(content)
83
- copyBtn.innerHTML = `
84
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check" viewBox="0 0 16 16">
85
- <path fill-rule="evenodd" d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0"/>
86
- <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
87
- <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
88
- </svg>
89
- `
90
- await delay(2)
91
- copyBtn.innerHTML = `
92
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
93
- <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1z"/>
94
- <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0z"/>
95
- </svg>
96
- `
97
- })
98
- }
99
- }
100
-
101
- customElements.define('doc-code', DocCode)
102
-
package/docs/src/js/doc-demo.js DELETED
@@ -1,14 +0,0 @@
1
- const template = document.createElement('template')
2
- template.innerHTML = `
3
- <div><slot></slot></div>
4
- `
5
-
6
- class DocDemo extends HTMLElement {
7
- constructor() {
8
- super()
9
- const shadow = this.attachShadow({ mode: 'open' })
10
- shadow.append(template.content.cloneNode(true))
11
- }
12
- }
13
-
14
- customElements.define('doc-demo', DocDemo)
package/docs/src/js/doc-layout.js DELETED
@@ -1,117 +0,0 @@
1
- class DocLayout extends HTMLElement {
2
- constructor() {
3
- super()
4
- this.innerHTML = `
5
- <div id="backdrop"></div>
6
- <header>
7
- <button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Toggle the sidebar navigation">
8
- <svg viewbox="0 0 100 100" width="100%">
9
- <rect width="100" height="10" x="0" y="10" rx="0"></rect>
10
- <rect width="100" height="10" x="0" y="45" rx="0"></rect>
11
- <rect width="100" height="10" x="0" y="80" rx="0"></rect>
12
- </svg>
13
- </button>
14
- <nav aria-label="Mainbar navigation">
15
- <ul>
16
- <li>
17
- <span class="badge">
18
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
19
- <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
20
- </svg>
21
- 0.4.1v
22
- </span>
23
- </li>
24
- <li>
25
- <a href="https://gitlab.com/packages4913705/vanilla-frontend" aria-label="Go to Gitlab">
26
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gitlab" viewBox="0 0 16 16">
27
- <path d="m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z"/>
28
- </svg>
29
- </a>
30
- </li>
31
- <li>
32
- <a href="https://www.npmjs.com/package/@natachah/vanilla-frontend" aria-label="Go to NPMJS">
33
- <svg viewBox="0 0 27.23 27.23" aria-hidden="true"><rect fill="currentColor" width="27.23" height="27.23" rx="2"></rect><polygon fill="#fff" points="5.8 21.75 13.66 21.75 13.67 9.98 17.59 9.98 17.58 21.76 21.51 21.76 21.52 6.06 5.82 6.04 5.8 21.75"></polygon></svg>
34
- </a>
35
- </li>
36
- </ul>
37
- </nav>
38
- </header>
39
- <div id="sidebar" class="drawer" hidden>
40
- <header>
41
- <a href="/index.html">
42
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket" viewBox="0 0 16 16">
43
- <path d="M8 8c.828 0 1.5-.895 1.5-2S8.828 4 8 4s-1.5.895-1.5 2S7.172 8 8 8"/>
44
- <path d="M11.953 8.81c-.195-3.388-.968-5.507-1.777-6.819C9.707 1.233 9.23.751 8.857.454a3.5 3.5 0 0 0-.463-.315A2 2 0 0 0 8.25.064.55.55 0 0 0 8 0a.55.55 0 0 0-.266.073 2 2 0 0 0-.142.08 4 4 0 0 0-.459.33c-.37.308-.844.803-1.31 1.57-.805 1.322-1.577 3.433-1.774 6.756l-1.497 1.826-.004.005A2.5 2.5 0 0 0 2 12.202V15.5a.5.5 0 0 0 .9.3l1.125-1.5c.166-.222.42-.4.752-.57.214-.108.414-.192.625-.281l.198-.084c.7.428 1.55.635 2.4.635s1.7-.207 2.4-.635q.1.044.196.083c.213.09.413.174.627.282.332.17.586.348.752.57l1.125 1.5a.5.5 0 0 0 .9-.3v-3.298a2.5 2.5 0 0 0-.548-1.562zM12 10.445v.055c0 .866-.284 1.585-.75 2.14.146.064.292.13.425.199.39.197.8.46 1.1.86L13 14v-1.798a1.5 1.5 0 0 0-.327-.935zM4.75 12.64C4.284 12.085 4 11.366 4 10.5v-.054l-.673.82a1.5 1.5 0 0 0-.327.936V14l.225-.3c.3-.4.71-.664 1.1-.861.133-.068.279-.135.425-.199M8.009 1.073q.096.06.226.163c.284.226.683.621 1.09 1.28C10.137 3.836 11 6.237 11 10.5c0 .858-.374 1.48-.943 1.893C9.517 12.786 8.781 13 8 13s-1.517-.214-2.057-.607C5.373 11.979 5 11.358 5 10.5c0-4.182.86-6.586 1.677-7.928.409-.67.81-1.082 1.096-1.32q.136-.113.236-.18Z"/>
45
- <path d="M9.479 14.361c-.48.093-.98.139-1.479.139s-.999-.046-1.479-.139L7.6 15.8a.5.5 0 0 0 .8 0z"/>
46
- </svg>
47
- Vanilla Frontend
48
- </a>
49
- </header>
50
- <nav aria-label="Sidebar navigation">
51
- <h2>Quick start</h2>
52
- <ul>
53
- <li><a href="/pages/quick-start/installation.html">Installation</a></li>
54
- <li><a href="/pages/quick-start/customization.html">Customization</a></li>
55
- <li><a href="/pages/quick-start/mixins.html">SCSS Mixins</a></li>
56
- <li><a href="/pages/quick-start/conventions.html">Conventions</a></li>
57
- </ul>
58
- <h2>Base</h2>
59
- <ul>
60
- <li><a href="/pages/base/reset.html">Reset</a></li>
61
- <li><a href="/pages/base/layout.html">Layout</a></li>
62
- <li><a href="/pages/base/typography.html">Typography</a></li>
63
- <li><a href="/pages/base/media.html">Media</a></li>
64
- </ul>
65
- <h2>Components</h2>
66
- <ul>
67
- <li><a href="/pages/components/button.html">Button</a></li>
68
- <li><a href="/pages/components/dialog.html">Dialog</a></li>
69
- <li><a href="/pages/components/disclosure.html">Disclosure</a></li>
70
- <li><a href="/pages/components/form.html">Form</a></li>
71
- <li><a href="/pages/components/loading.html">Loading</a></li>
72
- <li><a href="/pages/components/progress.html">Progress</a></li>
73
- <li><a href="/pages/components/table.html">Table</a></li>
74
- </ul>
75
- <h2>Custom components</h2>
76
- <ul>
77
- <li><a href="/pages/customs/badge.html">Badge</a></li>
78
- <li><a href="/pages/customs/breadcrumb.html">Breadcrumb</a></li>
79
- <li><a href="/pages/customs/card.html">Card</a></li>
80
- <li><a href="/pages/customs/drawer.html">Drawer</a></li>
81
- <li><a href="/pages/customs/dropdown.html">Dropdown</a></li>
82
- <li><a href="/pages/customs/grid.html">Grid</a></li>
83
- <li><a href="/pages/customs/list.html">List</a></li>
84
- <li><a href="/pages/customs/slider.html">Slider</a></li>
85
- </ul>
86
- <h2>Javascript</h2>
87
- <ul>
88
- <li><a href="/pages/javascript/autofill.html">Autofill</a></li>
89
- <li><a href="/pages/javascript/checkall.html">Check all</a></li>
90
- <li><a href="/pages/javascript/comfort.html">Comfort</a></li>
91
- <li><a href="/pages/javascript/consent.html">Consent</a></li>
92
- <li><a href="/pages/javascript/cookie.html">Cookie</a></li>
93
- <li><a href="/pages/javascript/form.html">Form helper</a></li>
94
- <li><a href="/pages/javascript/scroll.html">Scroll</a></li>
95
- <li><a href="/pages/javascript/sortable.html">Sortable</a></li>
96
- <li><a href="/pages/javascript/tabpanel.html">Tabpanel</a></li>
97
- <li><a href="/pages/javascript/toggle.html">Toggle</a></li>
98
- <li><a href="/pages/javascript/trap.html">Trap</a></li>
99
- <li><a href="/pages/javascript/tree.html">Tree</a></li>
100
- </ul>
101
- <div id="copyright">
102
- Released under the MIT License.<br>
103
- Copyright © 2024-present <a href="https://natachaherth.ch">Natacha Herth</a>
104
- </div>
105
- <button aria-expanded="false" aria-pressed="false" aria-controls="sidebar" aria-label="Close the sidebar navigation">
106
- Close
107
- </button>
108
- </nav>
109
- </div>
110
- <main>
111
- ${this.innerHTML}
112
- </main>
113
- `
114
- }
115
- }
116
-
117
- customElements.define('doc-layout', DocLayout)