@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/components/dialog.html DELETED
@@ -1,336 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components > Dialog</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Dialog</h1>
14
-
15
- <p>The dialog is using the native <code>&lt;dialog&gt;</code> tag.</p>
16
-
17
- <p>You can define if the dialog is a <b>modal</b> with the <code>aria-modal</code> attribute.</p>
18
-
19
- <blockquote>
20
- <p>
21
- <b>Difference between modal and non-modal:</b><br>
22
- The key difference is the level interaction and interaction restriction.
23
- A modal will block interaction with the main content, and they have their own context focus (use of a backdrop). But a non-modal don't impose context and restriction.
24
- </p>
25
- </blockquote>
26
-
27
- <doc-demo>
28
- <button aria-controls="demoDialog">Open the dialog</button>
29
- <dialog id="demoDialog" class="demo-dialog" aria-labelledby="demoDialogTitle">
30
- <h3 title="demoDialogTitle">Hey this is a dialog as non-modal !</h3>
31
- <p>Hello there !</p>
32
- <button data-dialog-close>Close the dialog</button>
33
- </dialog>
34
- </doc-demo>
35
-
36
- <div class="code-group">
37
- <div role="tablist">
38
- <button role="tab" aria-controls="html">HTML</button>
39
- <button role="tab" aria-controls="scss">SCSS</button>
40
- <button role="tab" aria-controls="css">CSS</button>
41
- <button role="tab" aria-controls="js">JS</button>
42
- </div>
43
- <doc-code id="html" data-type="html" role="tabpanel">
44
- <button aria-controls="myDialog">Open the dialog</button>
45
- <dialog id="myDialog" aria-modal="true" aria-label="demo">
46
- Content of the dialog
47
- <button data-dialog-close>Close the dialog</button>
48
- </dialog>
49
- </doc-code>
50
- <doc-code id="scss" data-type="scss" role="tabpanel">
51
- @use '@natachah/vanilla-frontend/scss/components/dialog';
52
- </doc-code>
53
- <doc-code id="css" data-type="css" role="tabpanel">
54
- --dialog-color
55
- --dialog-background
56
- --dialog-border-size
57
- --dialog-border-style
58
- --dialog-border-color
59
- --dialog-border-radius
60
- --dialog-padding-inline
61
- --dialog-padding-block
62
- --dialog-position
63
- --dialog-width
64
- --dialog-height
65
- --dialog-max-width
66
- --dialog-max-height
67
- --dialog-index
68
- --dialog-backdrop-background
69
- --dialog-backdrop-filter
70
- --dialog-open-animation
71
- --dialog-open-transform
72
- --dialog-close-animation
73
- --dialog-close-transform
74
- --dialog-divider-size
75
- --dialog-divider-style
76
- --dialog-divider-color
77
- </doc-code>
78
- <doc-code id="js" data-type="js" role="tabpanel">
79
- import Dialog from "@natachah/vanilla-frontend/js/_dialog"
80
- const myDialog = document.getElementById('myDialog')
81
- if (myDialog) new Dialog(myDialog)
82
- </doc-code>
83
- </div>
84
-
85
- <blockquote class="note">Add a <code>tabindex="0"</code> to the heading to focus on it when opened !</blockquote>
86
-
87
- <p>To work properly you must have a <code>&lt;button&gt;</code> in your page with the attribute <code>aria-controls=&quot;IdOfDialogToOpen&quot;</code> that will open the dialog.</p>
88
- <p>And inside your <code>&lt;dialog&gt;</code> you should have a <code>&lt;button&gt;</code> with the attribute <code>data-dialog-close</code> to close the dialog.</p>
89
-
90
- <h2>Layout</h2>
91
-
92
- <p>The dialog can have a <code>&lt;header&gt;</code> and/or <code>&lt;footer&gt;</code> inside to create a more complexe layout.</p>
93
-
94
- <doc-demo>
95
- <button aria-controls="demoDialogLayout">Open the dialog</button>
96
- <dialog id="demoDialogLayout" class="demo-dialog" aria-labelledby="demoDialogLayoutTitle" aria-modal="true">
97
- <header id="demoDialogLayoutTitle">This is a header</header>
98
- <div>
99
- <p>This is the content</p>
100
- <p>This dialog is a modal</p>
101
- <button data-dialog-close>Close</button>
102
- </div>
103
- <footer>This is a footer</footer>
104
- </dialog>
105
- </doc-demo>
106
-
107
- <doc-code>
108
- <dialog id="myDialog" class="demo-dialog" aria-labelledby="myDialogTitle" aria-modal="true">
109
- <header id="myDialogTitle">This is a header</header>
110
- <div>
111
- <p>This is the content</p>
112
- <button data-dialog-close>Close</button>
113
- </div>
114
- <footer>This is a footer</footer>
115
- </dialog>
116
- </doc-code>
117
-
118
- <h2>Form</h2>
119
-
120
- <p>You can submit a <code>&lt;form&gt;</code> inside the <code>&lt;dialog&gt;</code>.</p>
121
-
122
- <doc-demo>
123
- <button aria-controls="demoDialogForm">Open the dialog</button>
124
- <dialog id="demoDialogForm" class="demo-dialog" aria-labelledby="demoDialogFormTitle" aria-modal="true">
125
- <h3 id="demoDialogFormTitle">Dialog with form</h3>
126
- <form method="POST">
127
- <label for="animal">What is your favorite animal</label>
128
- <input id="animal" type="text" name="animal" required>
129
- <button type="reset" data-dialog-close>Cancel</button>
130
- <button type="submit">Default submit</button>
131
- </form>
132
- </dialog>
133
- </doc-demo>
134
-
135
- <doc-code>
136
- <button aria-controls="myDialog">Open the dialog</button>
137
- <dialog id="myDialog" aria-labelledby="demoDialogFormTitle" aria-modal="true">
138
- <h3 id="myDialogTitle">Dialog with form</h3>
139
- <form method="POST">
140
- <label for="animal">What is your favorite animal</label>
141
- <input id="animal" type="text" name="animal" required>
142
- <button type="reset" data-dialog-close>Cancel</button>
143
- <button type="submit">Default submit</button>
144
- </form>
145
- </dialog>
146
- </doc-code>
147
-
148
- <p>If you want to submit via <b>javascript</b> add the <code>method=&quot;dialog&quot;</code> attribute on the <code>&lt;form&gt;</code> or the <code>formmethod=&quot;dialog&quot;</code> attribute on the <code>&lt;button&gt;</code>.</p>
149
-
150
- <p>Then you should use the event <b>dialog:submited</b> to catch the values.</p>
151
-
152
- <doc-demo>
153
- <button aria-controls="demoDialogFormJs">Open the dialog</button>
154
- <dialog id="demoDialogFormJs" class="demo-dialog" aria-labelledby="demoDialogFormJsTitle" aria-modal="true">
155
- <h3 id="demoDialogFormJsTitle">Dialog with form</h3>
156
- <form method="dialog">
157
- <label for="animal">What is your favorite animal</label>
158
- <input id="animal" type="text" name="animal" required>
159
- <button type="reset" data-dialog-close>Cancel</button>
160
- <button type="submit">Javascript submit</button>
161
- </form>
162
- </dialog>
163
- <p>Your favorite animal is: <span id="favorite">--</span></p>
164
- </doc-demo>
165
-
166
- <div class="code-group">
167
- <div role="tablist">
168
- <button role="tab" aria-controls="html">HTML</button>
169
- <button role="tab" aria-controls="js">JS</button>
170
- </div>
171
- <doc-code id="html" data-type="html" role="tabpanel">
172
- <button aria-controls="myDialog">Open the dialog</button>
173
- <dialog id="myDialog" aria-labelledby="myDialogTitle" aria-modal="true">
174
- <h3 id="myDialogTitle">Dialog with form</h3>
175
- <form method="dialog">
176
- <label for="animal">What is your favorite animal</label>
177
- <input id="animal" type="text" name="animal" required>
178
- <button type="reset" data-dialog-close>Cancel</button>
179
- <button type="submit">Javascript submit</button>
180
- </form>
181
- </dialog>
182
- <p>Your favorite animal is: <span id="favorite">--</span></p>
183
- </doc-code>
184
- <doc-code id="js" data-type="js" role="tabpanel">
185
- const demoDialogFormJS = document.getElementById('myDialog')
186
- if (demoDialogFormJS) {
187
- new Dialog(demoDialogFormJS)
188
- demoDialogFormJS.addEventListener('dialog:submited', (e) => {
189
- const value = e.detail.form.querySelector('input').value
190
- document.getElementById('favorite').innerText = value
191
- })
192
- }
193
- </doc-code>
194
- </div>
195
-
196
- <h2>Javascript</h2>
197
-
198
- <blockquote>
199
- <p>To work properly the dialog required some javascript.</p>
200
- </blockquote>
201
-
202
- <h3>Methods</h3>
203
-
204
- <table>
205
- <thead>
206
- <tr>
207
- <th>Method</th>
208
- <th>Description</th>
209
- </tr>
210
- </thead>
211
- <tbody>
212
- <tr>
213
- <td data-label="Method">
214
- <p>open(e)</p>
215
- </td>
216
- <td data-label="Description">
217
- <p>This method will open the dialog</p>
218
- </td>
219
- </tr>
220
- <tr>
221
- <td data-label="Method">
222
- <p>close()</p>
223
- </td>
224
- <td data-label="Description">
225
- <p>This method will close the dialog</p>
226
- </td>
227
- </tr>
228
- <tr>
229
- <td data-label="Method">
230
- <p>submit()</p>
231
- </td>
232
- <td data-label="Description">
233
- <p>This method will submit the dialog</p>
234
- </td>
235
- </tr>
236
- </tbody>
237
- </table>
238
-
239
- <h3>Events</h3>
240
- <table>
241
- <thead>
242
- <tr>
243
- <th>Event</th>
244
- <th>Description</th>
245
- <th>Value</th>
246
- </tr>
247
- </thead>
248
- <tbody>
249
- <tr>
250
- <td data-label="Event">
251
- <p>dialog:opening</p>
252
- </td>
253
- <td data-label="Description">
254
- <p>This event is fired when the method <code>open()</code> is called</p>
255
- </td>
256
- <td data-label="Value">
257
- <p>-</p>
258
- </td>
259
- </tr>
260
- <tr>
261
- <td data-label="Event">
262
- <p>dialog:opened</p>
263
- </td>
264
- <td data-label="Description">
265
- <p>This event is fired after the method <code>open()</code> is called</p>
266
- </td>
267
- <td data-label="Value">
268
- <p>-</p>
269
- </td>
270
- </tr>
271
- <tr>
272
- <td data-label="Event">
273
- <p>dialog:closing</p>
274
- </td>
275
- <td data-label="Description">
276
- <p>This event is fired when the method <code>close()</code> is called</p>
277
- </td>
278
- <td data-label="Value">
279
- <p>-</p>
280
- </td>
281
- </tr>
282
- <tr>
283
- <td data-label="Event">
284
- <p>dialog:closed</p>
285
- </td>
286
- <td data-label="Description">
287
- <p>This event is fired after the method <code>close()</code> is called</p>
288
- </td>
289
- <td data-label="Value">
290
- <p>-</p>
291
- </td>
292
- </tr>
293
- <tr>
294
- <td data-label="Event">
295
- <p>dialog:submiting</p>
296
- </td>
297
- <td data-label="Description">
298
- <p>This event is fired when the method <code>submit()</code> is called</p>
299
- </td>
300
- <td data-label="Value">
301
- <p><code>form</code> as an <code>HTMLElement</code></p>
302
- </td>
303
- </tr>
304
- <tr>
305
- <td data-label="Event">
306
- <p>dialog:submited</p>
307
- </td>
308
- <td data-label="Description">
309
- <p>This event is fired after the method <code>submit()</code> is called</p>
310
- </td>
311
- <td data-label="Value">
312
- <p><code>form</code> as an <code>HTMLElement</code></p>
313
- </td>
314
- </tr>
315
- </tbody>
316
- </table>
317
-
318
- <doc-code data-type="js">
319
- // E.G. basic opening
320
- document.getElementById('myDialogID').addEventListener('dialog:opening', () => {
321
- console.log('The dialog is opening')
322
- })
323
-
324
- // E.G. with form value
325
- document.getElementById('myDialogID').addEventListener('dialog:submited', (e) => {
326
- const theHTMLForm = e.detail.form
327
- ...
328
- })
329
- </doc-code>
330
-
331
-
332
- </doc-layout>
333
- <script type="module" src="/main.js"></script>
334
- </body>
335
-
336
- </html>
package/docs/pages/components/disclosure.html DELETED
@@ -1,174 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8" />
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <title>Documentations: Components > Disclosure</title>
8
- </head>
9
-
10
- <body data-preload>
11
- <doc-layout>
12
-
13
- <h1>Disclosure</h1>
14
-
15
- <p>The disclosure is using the native <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> tags.</p>
16
-
17
- <doc-demo>
18
- <details>
19
- <summary>
20
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
21
- <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" />
22
- </svg>
23
- Some disclosure
24
- </summary>
25
- <div>
26
- <p>
27
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam
28
- reprehenderit ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam
29
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
30
- </p>
31
- </div>
32
- </details>
33
- </doc-demo>
34
-
35
- <div class="code-group">
36
- <div role="tablist">
37
- <button role="tab" aria-controls="html">HTML</button>
38
- <button role="tab" aria-controls="scss">SCSS</button>
39
- <button role="tab" aria-controls="css">CSS</button>
40
- </div>
41
- <doc-code id="html" data-type="html" role="tabpanel">
42
- <details>
43
- <summary>
44
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
45
- <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" />
46
- </svg>
47
- Title
48
- </summary>
49
- <div>
50
- Content
51
- </div>
52
- </details>
53
- </doc-code>
54
- <doc-code id="scss" data-type="scss" role="tabpanel">
55
- @use '@natachah/vanilla-frontend/scss/components/disclosure';
56
- </doc-code>
57
- <doc-code id="css" data-type="css" role="tabpanel">
58
- --disclosure-color
59
- --disclosure-background
60
- --disclosure-border-size
61
- --disclosure-border-style
62
- --disclosure-border-color
63
- --disclosure-border-radius
64
- --disclosure-padding-inline
65
- --disclosure-padding-block
66
- --disclosure-transition
67
- --disclosure-decoration
68
- --disclosure-outline-size
69
- --disclosure-outline-style
70
- --disclosure-outline-color
71
- --disclosure-outline-offset
72
- --disclosure-hover-color
73
- --disclosure-hover-background
74
- --disclosure-hover-border-color
75
- --disclosure-focus-color
76
- --disclosure-focus-background
77
- --disclosure-focus-border-color
78
- --disclosure-active-color
79
- --disclosure-active-background
80
- --disclosure-active-border-color
81
- --disclosure-disabled-opacity
82
- --disclosure-svg-transform
83
- </doc-code>
84
- </div>
85
-
86
- <blockquote class="tip">
87
- <p>It's recommended to add a <code>&lt;div&gt;</code> around the inside content for better design.</p>
88
- </blockquote>
89
-
90
- <h2>States</h2>
91
-
92
- <p>The <code>&lt;summary&gt;</code> can have multiple states as <code>:focus</code>, <code>:hover</code> and <code>:active</code></p>
93
-
94
- <blockquote>
95
- <p>The active state is automatically displayed when the disclosure is <code>open</code>.</p>
96
- </blockquote>
97
-
98
- <h2>Variants</h2>
99
-
100
- <h3>Group</h3>
101
-
102
- <p>You can group some disclosure by putting them in a <code>&lt;div&gt;</code> with the class <code>.accordion</code>.</p>
103
-
104
- <doc-demo>
105
- <div class="accordion">
106
- <details>
107
- <summary>
108
- Disclosure A
109
- </summary>
110
- <div>
111
- <p>
112
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis non, doloremque possimus maiores earum, aperiam dolore sequi incidunt a nam.
113
- </p>
114
- </div>
115
- </details>
116
- <details>
117
- <summary>
118
- Disclosure B
119
- </summary>
120
- <div>
121
- <p>
122
- Ipsa inventore exercitationem dolor officiis odio optio nisi facilis? Aliquid nihil sequi beatae architecto ullam quisquam.
123
- </p>
124
- </div>
125
- </details>
126
- <details>
127
- <summary>
128
- Disclosure C
129
- </summary>
130
- <div>
131
- <p>
132
- Aliquid nihil sequi beatae architecto ullam quisquam
133
- voluptatem, atque optio voluptatum doloribus esse molestiae repudiandae nesciunt dolorem impedit corrupti ipsam.
134
- </p>
135
- </div>
136
- </details>
137
- </div>
138
- </doc-demo>
139
-
140
-
141
- <doc-code>
142
- <div class="accordion">
143
- <details>
144
- <summary>
145
- Disclosure A
146
- </summary>
147
- <div>
148
- AAA
149
- </div>
150
- </details>
151
- <details>
152
- <summary>
153
- Disclosure B
154
- </summary>
155
- <div>
156
- BBB
157
- </div>
158
- </details>
159
- <details>
160
- <summary>
161
- Disclosure C
162
- </summary>
163
- <div>
164
- CCC
165
- </div>
166
- </details>
167
- </div>
168
- </doc-code>
169
-
170
- </doc-layout>
171
- <script type="module" src="/main.js"></script>
172
- </body>
173
-
174
- </html>