@supersoniks/concorde 5.0.0 → 5.0.2

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 (314) hide show
  1. package/.gitlab-ci.yml +0 -13
  2. package/build-infos.json +1 -1
  3. package/concorde-core.bundle.js +606 -689
  4. package/concorde-core.es.js +4511 -4329
  5. package/dist/concorde-core.bundle.js +606 -689
  6. package/dist/concorde-core.es.js +4511 -4329
  7. package/gitlab/job_tests.sh +25 -12
  8. package/index.html +3 -3
  9. package/package.json +16 -1
  10. package/scripts/post-build-docs.js +0 -0
  11. package/scripts/post-build.mjs +0 -0
  12. package/src/core/components/functional/fetch/fetch.md +0 -0
  13. package/src/core/components/functional/if/if.md +0 -0
  14. package/src/core/components/functional/list/list.demo.ts +0 -0
  15. package/src/core/components/functional/list/list.md +0 -0
  16. package/src/core/components/functional/list/list.ts +0 -0
  17. package/src/core/components/functional/router/router.md +0 -0
  18. package/src/core/components/functional/router/router.ts +0 -0
  19. package/src/core/components/functional/sdui/sdui.md +0 -0
  20. package/src/core/components/functional/states/states.md +0 -0
  21. package/src/core/components/functional/submit/submit.md +0 -0
  22. package/src/core/components/ui/_css/rounded.ts +36 -0
  23. package/src/core/components/ui/_css/size.ts +0 -0
  24. package/src/core/components/ui/_css/type.ts +49 -0
  25. package/src/core/components/ui/_i18n/ui-aria-labels.ts +104 -0
  26. package/src/core/components/ui/alert/alert.md +128 -72
  27. package/src/core/components/ui/alert/alert.spec.ts +145 -0
  28. package/src/core/components/ui/alert/alert.ts +86 -91
  29. package/src/core/components/ui/alert-messages/alert-messages.ts +1 -1
  30. package/src/core/components/ui/badge/badge.md +126 -78
  31. package/src/core/components/ui/badge/badge.ts +29 -81
  32. package/src/core/components/ui/button/button.md +1 -0
  33. package/src/core/components/ui/button/button.ts +11 -8
  34. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  35. package/src/core/components/ui/captcha/captcha.md +0 -0
  36. package/src/core/components/ui/card/card-header.ts +7 -2
  37. package/src/core/components/ui/card/card.md +120 -65
  38. package/src/core/components/ui/divider/divider.ts +4 -9
  39. package/src/core/components/ui/form/fieldset/legend-description.ts +1 -1
  40. package/src/core/components/ui/form/fieldset/legend.ts +1 -1
  41. package/src/core/components/ui/form/input/input.md +1 -1
  42. package/src/core/components/ui/form/input/input.ts +19 -15
  43. package/src/core/components/ui/form/radio/radio.md +0 -0
  44. package/src/core/components/ui/form/select/select.md +0 -0
  45. package/src/core/components/ui/form/switch/switch.md +0 -0
  46. package/src/core/components/ui/form/textarea/textarea.md +1 -1
  47. package/src/core/components/ui/image/image.md +147 -53
  48. package/src/core/components/ui/image/image.ts +10 -44
  49. package/src/core/components/ui/link/link.md +2 -2
  50. package/src/core/components/ui/link/link.ts +42 -37
  51. package/src/core/components/ui/loader/loader.md +0 -0
  52. package/src/core/components/ui/menu/menu.md +0 -0
  53. package/src/core/components/ui/modal/modal-close.ts +8 -12
  54. package/src/core/components/ui/modal/modal.md +0 -0
  55. package/src/core/components/ui/modal/modal.ts +18 -18
  56. package/src/core/components/ui/pop/pop.md +105 -1
  57. package/src/core/components/ui/pop/pop.ts +143 -148
  58. package/src/core/components/ui/table/table-caption.ts +0 -0
  59. package/src/core/components/ui/table/table.md +0 -0
  60. package/src/core/components/ui/table/table.ts +2 -8
  61. package/src/core/components/ui/theme/theme.ts +1 -1
  62. package/src/core/components/ui/toast/dismissed.ts +14 -0
  63. package/src/core/components/ui/toast/toast-item.ts +139 -91
  64. package/src/core/components/ui/toast/toast.ts +4 -7
  65. package/src/core/components/ui/tooltip/tooltip.ts +176 -154
  66. package/src/core/utils/LocationHandler.ts +12 -5
  67. package/src/core/utils/dismissed.ts +22 -0
  68. package/src/core/utils/positioning.spec.ts +208 -0
  69. package/src/core/utils/positioning.ts +183 -0
  70. package/src/core/utils/route.ts +0 -0
  71. package/src/directives.ts +2 -3
  72. package/src/docs/_core-concept/subscriber.md +0 -0
  73. package/src/docs/_getting-started/concorde-outside.md +3 -3
  74. package/src/docs/_getting-started/my-first-subscriber.md +0 -0
  75. package/src/docs/_getting-started/pubsub.md +0 -0
  76. package/src/docs/_getting-started/start.md +0 -0
  77. package/src/docs/code.ts +3 -1
  78. package/src/docs/example/users.ts +0 -0
  79. package/src/docs/search/docs-search.json +651 -21
  80. package/src/docs/search/page.ts +0 -0
  81. package/src/docs/tailwind/css/tailwind.css +13 -6
  82. package/src/tsconfig.json +45 -0
  83. package/src/tsconfig.tsbuildinfo +1 -1
  84. package/tailwind.config.js +50 -3
  85. package/vitest.setup.ts +49 -13
  86. package/.github/workflows/ci.yml +0 -21
  87. package/.github-export-ignore +0 -30
  88. package/CONTRIBUTING.md +0 -59
  89. package/DEV.md +0 -54
  90. package/LICENSE +0 -21
  91. package/OPEN_SOURCE_CHECKPOINT.md +0 -133
  92. package/concorde-3d.bundle.js +0 -3960
  93. package/concorde-3d.es.js +0 -33433
  94. package/concorde-hugging-face-infer.bundle.js +0 -32
  95. package/concorde-hugging-face-infer.es.js +0 -2952
  96. package/concorde-shader.bundle.js +0 -116
  97. package/concorde-shader.es.js +0 -8353
  98. package/concorde-webgpu.bundle.js +0 -307
  99. package/concorde-webgpu.es.js +0 -8627
  100. package/docs/altcha-widget.js +0 -2662
  101. package/docs/assets/index-BZiZXMU-.css +0 -1
  102. package/docs/assets/index-FmK4JaIM.js +0 -11992
  103. package/docs/crawl/core/components/functional/date/date.html +0 -190
  104. package/docs/crawl/core/components/functional/fetch/fetch.html +0 -109
  105. package/docs/crawl/core/components/functional/if/if.html +0 -27
  106. package/docs/crawl/core/components/functional/jsonata/jsonata.html +0 -79
  107. package/docs/crawl/core/components/functional/list/list.html +0 -70
  108. package/docs/crawl/core/components/functional/mix/mix.html +0 -45
  109. package/docs/crawl/core/components/functional/queue/queue.html +0 -96
  110. package/docs/crawl/core/components/functional/router/router.html +0 -106
  111. package/docs/crawl/core/components/functional/sdui/sdui.html +0 -269
  112. package/docs/crawl/core/components/functional/states/states.html +0 -66
  113. package/docs/crawl/core/components/functional/submit/submit.html +0 -160
  114. package/docs/crawl/core/components/functional/subscriber/subscriber.html +0 -67
  115. package/docs/crawl/core/components/functional/value/value.html +0 -51
  116. package/docs/crawl/core/components/ui/alert/alert.html +0 -110
  117. package/docs/crawl/core/components/ui/alert-messages/alert-messages.html +0 -23
  118. package/docs/crawl/core/components/ui/badge/badge.html +0 -119
  119. package/docs/crawl/core/components/ui/button/button.html +0 -149
  120. package/docs/crawl/core/components/ui/captcha/captcha.html +0 -30
  121. package/docs/crawl/core/components/ui/card/card.html +0 -99
  122. package/docs/crawl/core/components/ui/divider/divider.html +0 -58
  123. package/docs/crawl/core/components/ui/form/checkbox/checkbox.html +0 -73
  124. package/docs/crawl/core/components/ui/form/fieldset/fieldset.html +0 -135
  125. package/docs/crawl/core/components/ui/form/form-actions/form-actions.html +0 -79
  126. package/docs/crawl/core/components/ui/form/form-layout/form-layout.html +0 -62
  127. package/docs/crawl/core/components/ui/form/input/input.html +0 -109
  128. package/docs/crawl/core/components/ui/form/input-autocomplete/input-autocomplete.html +0 -106
  129. package/docs/crawl/core/components/ui/form/radio/radio.html +0 -56
  130. package/docs/crawl/core/components/ui/form/select/select.html +0 -73
  131. package/docs/crawl/core/components/ui/form/switch/switch.html +0 -56
  132. package/docs/crawl/core/components/ui/form/textarea/textarea.html +0 -59
  133. package/docs/crawl/core/components/ui/group/group.html +0 -82
  134. package/docs/crawl/core/components/ui/icon/icon.html +0 -133
  135. package/docs/crawl/core/components/ui/image/image.html +0 -110
  136. package/docs/crawl/core/components/ui/link/link.html +0 -42
  137. package/docs/crawl/core/components/ui/loader/loader.html +0 -50
  138. package/docs/crawl/core/components/ui/menu/menu.html +0 -322
  139. package/docs/crawl/core/components/ui/modal/modal.html +0 -117
  140. package/docs/crawl/core/components/ui/pop/pop.html +0 -102
  141. package/docs/crawl/core/components/ui/progress/progress.html +0 -58
  142. package/docs/crawl/core/components/ui/table/table.html +0 -413
  143. package/docs/crawl/core/components/ui/toast/toast.html +0 -122
  144. package/docs/crawl/core/components/ui/tooltip/tooltip.html +0 -79
  145. package/docs/crawl/docs/_core-concept/dataFlow.html +0 -177
  146. package/docs/crawl/docs/_core-concept/overview.html +0 -66
  147. package/docs/crawl/docs/_core-concept/subscriber.html +0 -75
  148. package/docs/crawl/docs/_decorators/ancestor-attribute.html +0 -116
  149. package/docs/crawl/docs/_decorators/auto-subscribe.html +0 -202
  150. package/docs/crawl/docs/_decorators/bind.html +0 -141
  151. package/docs/crawl/docs/_decorators/get.html +0 -149
  152. package/docs/crawl/docs/_decorators/handle.html +0 -165
  153. package/docs/crawl/docs/_decorators/on-assign.html +0 -355
  154. package/docs/crawl/docs/_decorators/patch.html +0 -78
  155. package/docs/crawl/docs/_decorators/post.html +0 -139
  156. package/docs/crawl/docs/_decorators/publish.html +0 -61
  157. package/docs/crawl/docs/_decorators/put.html +0 -78
  158. package/docs/crawl/docs/_decorators/subscribe.html +0 -109
  159. package/docs/crawl/docs/_decorators/wait-for-ancestors.html +0 -137
  160. package/docs/crawl/docs/_directives/sub.html +0 -93
  161. package/docs/crawl/docs/_getting-started/ai-agents.html +0 -173
  162. package/docs/crawl/docs/_getting-started/concorde-manual-install.html +0 -100
  163. package/docs/crawl/docs/_getting-started/concorde-outside.html +0 -58
  164. package/docs/crawl/docs/_getting-started/create-a-component.html +0 -111
  165. package/docs/crawl/docs/_getting-started/my-first-component.html +0 -189
  166. package/docs/crawl/docs/_getting-started/my-first-subscriber.html +0 -110
  167. package/docs/crawl/docs/_getting-started/pubsub.html +0 -62
  168. package/docs/crawl/docs/_getting-started/start.html +0 -76
  169. package/docs/crawl/docs/_getting-started/theming.html +0 -85
  170. package/docs/crawl/docs/_misc/api-configuration.html +0 -149
  171. package/docs/crawl/docs/_misc/dataProviderKey.html +0 -135
  172. package/docs/crawl/docs/_misc/docs-mock-api.html +0 -158
  173. package/docs/crawl/docs/_misc/dynamic-path.html +0 -180
  174. package/docs/crawl/docs/_misc/endpoint.html +0 -50
  175. package/docs/crawl/docs/_misc/formelement-subscriber-removal.html +0 -138
  176. package/docs/crawl/docs/_misc/html-integration.html +0 -48
  177. package/docs/crawl/hubs/decorators.html +0 -547
  178. package/docs/crawl/hubs/form-components.html +0 -357
  179. package/docs/crawl/hubs/remote-data.html +0 -452
  180. package/docs/crawl/index.html +0 -101
  181. package/docs/css/docs.css +0 -0
  182. package/docs/docs-mock-api-sw.js +0 -720
  183. package/docs/docs-mock-api-sw.js.map +0 -7
  184. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  185. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  186. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  187. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  188. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  189. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  190. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  191. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  192. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  193. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  194. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  195. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  196. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  197. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  198. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  199. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  200. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  201. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  202. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  203. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  204. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  205. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  206. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  207. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  208. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  209. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  210. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  211. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  212. package/docs/img/concorde-icon.svg +0 -5
  213. package/docs/img/concorde-logo.svg +0 -1
  214. package/docs/img/concorde.png +0 -0
  215. package/docs/img/concorde_def.png +0 -0
  216. package/docs/img/concorde_seuil.png.webp +0 -0
  217. package/docs/img/concorde_seuil_invert.png +0 -0
  218. package/docs/img/paul_metrand.jpg +0 -0
  219. package/docs/img/paul_metrand_xs.jpg +0 -0
  220. package/docs/index.html +0 -93
  221. package/docs/llms-full.txt +0 -5787
  222. package/docs/llms.txt +0 -104
  223. package/docs/robots.txt +0 -16
  224. package/docs/sitemap.xml +0 -237
  225. package/docs/src/core/components/functional/date/date.md +0 -290
  226. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  227. package/docs/src/core/components/functional/if/if.md +0 -9
  228. package/docs/src/core/components/functional/jsonata/jsonata.md +0 -56
  229. package/docs/src/core/components/functional/list/list.md +0 -65
  230. package/docs/src/core/components/functional/mix/mix.md +0 -41
  231. package/docs/src/core/components/functional/queue/queue.md +0 -72
  232. package/docs/src/core/components/functional/router/router.md +0 -94
  233. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  234. package/docs/src/core/components/functional/sdui/example.json +0 -99
  235. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  236. package/docs/src/core/components/functional/states/states.md +0 -87
  237. package/docs/src/core/components/functional/submit/submit.md +0 -114
  238. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  239. package/docs/src/core/components/functional/value/value.md +0 -35
  240. package/docs/src/core/components/ui/alert/alert.md +0 -121
  241. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  242. package/docs/src/core/components/ui/badge/badge.md +0 -127
  243. package/docs/src/core/components/ui/button/button.md +0 -182
  244. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  245. package/docs/src/core/components/ui/card/card.md +0 -97
  246. package/docs/src/core/components/ui/divider/divider.md +0 -35
  247. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  248. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  249. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  250. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  251. package/docs/src/core/components/ui/form/input/input.md +0 -142
  252. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  253. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  254. package/docs/src/core/components/ui/form/select/select.md +0 -71
  255. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  256. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  257. package/docs/src/core/components/ui/group/group.md +0 -75
  258. package/docs/src/core/components/ui/icon/icon.md +0 -125
  259. package/docs/src/core/components/ui/icon/icons.json +0 -1
  260. package/docs/src/core/components/ui/image/image.md +0 -107
  261. package/docs/src/core/components/ui/link/link.md +0 -43
  262. package/docs/src/core/components/ui/loader/loader.md +0 -55
  263. package/docs/src/core/components/ui/menu/menu.md +0 -329
  264. package/docs/src/core/components/ui/modal/modal.md +0 -119
  265. package/docs/src/core/components/ui/pop/pop.md +0 -96
  266. package/docs/src/core/components/ui/progress/progress.md +0 -63
  267. package/docs/src/core/components/ui/table/table.md +0 -455
  268. package/docs/src/core/components/ui/toast/toast.md +0 -166
  269. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  270. package/docs/src/docs/_core-concept/dataFlow.md +0 -88
  271. package/docs/src/docs/_core-concept/overview.md +0 -57
  272. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  273. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -127
  274. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  275. package/docs/src/docs/_decorators/bind.md +0 -167
  276. package/docs/src/docs/_decorators/get.md +0 -162
  277. package/docs/src/docs/_decorators/handle.md +0 -175
  278. package/docs/src/docs/_decorators/on-assign.md +0 -390
  279. package/docs/src/docs/_decorators/patch.md +0 -70
  280. package/docs/src/docs/_decorators/post.md +0 -146
  281. package/docs/src/docs/_decorators/publish.md +0 -55
  282. package/docs/src/docs/_decorators/put.md +0 -70
  283. package/docs/src/docs/_decorators/subscribe.md +0 -100
  284. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  285. package/docs/src/docs/_directives/sub.md +0 -91
  286. package/docs/src/docs/_getting-started/ai-agents.md +0 -76
  287. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  288. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  289. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  290. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  291. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  292. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  293. package/docs/src/docs/_getting-started/start.md +0 -47
  294. package/docs/src/docs/_getting-started/theming.md +0 -91
  295. package/docs/src/docs/_misc/api-configuration.md +0 -81
  296. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  297. package/docs/src/docs/_misc/docs-mock-api.md +0 -63
  298. package/docs/src/docs/_misc/dynamic-path.md +0 -71
  299. package/docs/src/docs/_misc/endpoint.md +0 -45
  300. package/docs/src/docs/_misc/formelement-subscriber-removal.md +0 -115
  301. package/docs/src/docs/_misc/html-integration.md +0 -15
  302. package/docs/src/docs/search/docs-search.json +0 -9512
  303. package/docs/src/tag-list.json +0 -1
  304. package/docs/src/tsconfig-model.json +0 -23
  305. package/docs/src/tsconfig.declarations.json +0 -22
  306. package/docs/src/tsconfig.emit.json +0 -23
  307. package/docs/src/tsconfig.json +0 -858
  308. package/docs/svg/regular/plane.svg +0 -1
  309. package/docs/svg/solid/plane.svg +0 -1
  310. package/gitlab/job_github_mirror.sh +0 -39
  311. package/scripts/github-export.mjs +0 -150
  312. package/src/css.d.ts +0 -19
  313. package/src/tsconfig.declarations.json +0 -22
  314. package/src/tsconfig.emit.json +0 -23
@@ -1,455 +0,0 @@
1
- # Table
2
-
3
- ## Basic usage
4
-
5
- <sonic-code>
6
- <template>
7
- <sonic-table>
8
- <sonic-tr>
9
- <sonic-th>Id</sonic-th>
10
- <sonic-th>Name</sonic-th>
11
- <sonic-th>Email</sonic-th>
12
- </sonic-tr>
13
- <sonic-tr>
14
- <sonic-td>1</sonic-td>
15
- <sonic-td>George Bluth</sonic-td>
16
- <sonic-td>george.bluth@reqres.in</sonic-td>
17
- </sonic-tr>
18
- <sonic-tr>
19
- <sonic-td>2</sonic-td>
20
- <sonic-td>Janet Weaver</sonic-td>
21
- <sonic-td>janet.weaver@reqres.in</sonic-td>
22
- </sonic-tr>
23
- <sonic-tr>
24
- <sonic-td>3</sonic-td>
25
- <sonic-td>Emma Wong</sonic-td>
26
- <sonic-td>emma.wong@reqres.in</sonic-td>
27
- </sonic-tr>
28
- </sonic-table>
29
- </template>
30
- </sonic-code>
31
-
32
- ## List / fetch
33
-
34
- <sonic-code>
35
- <template>
36
- <sonic-table>
37
- <sonic-thead>
38
- <sonic-tr>
39
- <sonic-th>Id</sonic-th>
40
- <sonic-th>Name</sonic-th>
41
- <sonic-th>Email</sonic-th>
42
- </sonic-tr>
43
- </sonic-thead>
44
- <sonic-tbody>
45
- <sonic-list debug fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
46
- <template>
47
- <sonic-tr>
48
- <sonic-td data-bind ::inner-html="$id"></sonic-td>
49
- <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
50
- <sonic-td data-bind ::inner-html="$email"></sonic-td>
51
- </sonic-tr>
52
- </template>
53
- <sonic-list>
54
- </sonic-tbody>
55
- </sonic-table>
56
- </template>
57
- </sonic-code>
58
-
59
- ## Size
60
-
61
- <sonic-code>
62
- <template>
63
- <div class="grid grid-cols-4 gap-3">
64
- <sonic-table size="2xs" bordered>
65
- <sonic-tr><sonic-td class="w-[5rem]">2xs</sonic-td></sonic-tr>
66
- </sonic-table>
67
- <sonic-table size="xs" bordered>
68
- <sonic-tr><sonic-td class="w-[5rem]">xs</sonic-td></sonic-tr>
69
- </sonic-table>
70
- <sonic-table size="sm" bordered>
71
- <sonic-tr><sonic-td class="w-[5rem]">sm</sonic-td></sonic-tr>
72
- </sonic-table>
73
- <sonic-table size="md" bordered>
74
- <sonic-tr><sonic-td class="w-[5rem]">md</sonic-td></sonic-tr>
75
- </sonic-table>
76
- <sonic-table bordered>
77
- <sonic-tr><sonic-td class="w-[5rem]">default</sonic-td></sonic-tr>
78
- </sonic-table>
79
- <sonic-table size="lg" bordered>
80
- <sonic-tr><sonic-td class="w-[5rem]">lg</sonic-td></sonic-tr>
81
- </sonic-table>
82
- <sonic-table size="xl" bordered>
83
- <sonic-tr><sonic-td class="w-[5rem]">xl</sonic-td></sonic-tr>
84
- </sonic-table>
85
- <sonic-table size="2xl" bordered>
86
- <sonic-tr><sonic-td class="w-[5rem]">2xl</sonic-td></sonic-tr>
87
- </sonic-table>
88
- </div>
89
- </template>
90
- </sonic-code>
91
-
92
- ## Bordered
93
-
94
- <sonic-code>
95
- <template>
96
- <sonic-table bordered>
97
- <sonic-thead>
98
- <sonic-tr>
99
- <sonic-th>Id</sonic-th>
100
- <sonic-th>Name</sonic-th>
101
- <sonic-th>Email</sonic-th>
102
- </sonic-tr>
103
- </sonic-thead>
104
- <sonic-tbody>
105
- <sonic-tr>
106
- <sonic-td>1</sonic-td>
107
- <sonic-td>George Bluth</sonic-td>
108
- <sonic-td>george.bluth@reqres.in</sonic-td>
109
- </sonic-tr>
110
- <sonic-tr>
111
- <sonic-td>2</sonic-td>
112
- <sonic-td>Janet Weaver</sonic-td>
113
- <sonic-td>janet.weaver@reqres.in</sonic-td>
114
- </sonic-tr>
115
- <sonic-tr>
116
- <sonic-td>3</sonic-td>
117
- <sonic-td>Emma Wong</sonic-td>
118
- <sonic-td>emma.wong@reqres.in</sonic-td>
119
- </sonic-tr>
120
- </sonic-tbody>
121
- </sonic-table>
122
- </template>
123
- </sonic-code>
124
-
125
- ## MaxHeight
126
-
127
- <sonic-code>
128
- <template>
129
- <sonic-table maxHeight="8rem">
130
- <sonic-thead>
131
- <sonic-tr>
132
- <sonic-th>Id</sonic-th>
133
- <sonic-th>Name</sonic-th>
134
- <sonic-th>Email</sonic-th>
135
- </sonic-tr>
136
- </sonic-thead>
137
- <sonic-tbody>
138
- <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
139
- <template>
140
- <sonic-tr>
141
- <sonic-td data-bind ::inner-html="$id"></sonic-td>
142
- <sonic-td data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
143
- <sonic-td data-bind ::inner-html="$email"></sonic-td>
144
- </sonic-tr>
145
- </template>
146
- <sonic-list>
147
- </sonic-tbody>
148
- </sonic-table>
149
- </template>
150
- </sonic-code>
151
-
152
- ## Type
153
-
154
- Values available : primary, info, success, warning, danger
155
-
156
- <sonic-code>
157
- <template>
158
- <sonic-table bordered>
159
- <sonic-tr>
160
- <sonic-th type="info">Attribute type set on</sonic-th>
161
- <sonic-th type="info">sonic-th</sonic-th>
162
- </sonic-tr>
163
- <sonic-tr>
164
- <sonic-td type="danger">Attribute type set on</sonic-td>
165
- <sonic-td type="danger">sonic-td</sonic-td>
166
- </sonic-tr>
167
- <sonic-tr type="success">
168
- <sonic-td>Attribute type set on</sonic-td>
169
- <sonic-td>sonic-tr</sonic-td>
170
- </sonic-tr>
171
- </sonic-tbody>
172
- </sonic-table>
173
- </template>
174
- </sonic-code>
175
-
176
- ## Colspan / rowspan
177
-
178
- <sonic-code>
179
- <template>
180
- <sonic-table >
181
- <sonic-tbody>
182
- <sonic-tr>
183
- <sonic-td colspan="2" class="bg-info text-neutral-0">colspan : 2</sonic-td>
184
- <sonic-td>cell</sonic-td>
185
- </sonic-tr>
186
- <sonic-tr>
187
- <sonic-td>cell</sonic-td>
188
- <sonic-td>cell</sonic-td>
189
- <sonic-td rowspan="2" class="bg-success text-neutral-0">rowspan : 2</sonic-td>
190
- </sonic-tr>
191
- <sonic-tr>
192
- <sonic-td>cell</sonic-td>
193
- <sonic-td>cell</sonic-td>
194
- </sonic-tr>
195
- </sonic-tbody>
196
- </sonic-table>
197
- </template>
198
- </sonic-code>
199
-
200
- ## Cell style attributes
201
-
202
- The following attributes will be used to set the style of the component :
203
- - align
204
- - minWidth
205
- - maxWidth
206
- - width
207
-
208
- <sonic-code>
209
- <template>
210
- <sonic-table bordered>
211
- <sonic-thead>
212
- <sonic-tr>
213
- <sonic-th width="7rem">align</sonic-th>
214
- <sonic-th minWidth="20rem">minWidth</sonic-th>
215
- <sonic-th>maxWidth</sonic-th>
216
- <sonic-th>width</sonic-th>
217
- </sonic-tr>
218
- </sonic-thead>
219
- <sonic-tbody>
220
- <sonic-tr>
221
- <sonic-td align="left">Left</sonic-td>
222
- <sonic-td>20rem</sonic-td>
223
- <sonic-td>5rem</sonic-td>
224
- <sonic-td>15rem</sonic-td>
225
- </sonic-tr>
226
- <sonic-tr>
227
- <sonic-td align="center">center</sonic-td>
228
- <sonic-td>20rem</sonic-td>
229
- <sonic-td maxWidth="5rem">5rem</sonic-td>
230
- <sonic-td>15rem</sonic-td>
231
- </sonic-tr>
232
- <sonic-tr>
233
- <sonic-td align="right">right</sonic-td>
234
- <sonic-td>20rem</sonic-td>
235
- <sonic-td>5rem - Lorem ipsum dolor</sonic-td>
236
- <sonic-td width="60rem">15rem - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta sollicitudin mollis. Curabitur sit amet nibh diam. Vivamus a pharetra mauris.</sonic-td>
237
- </sonic-tr>
238
- </sonic-table>
239
- </template>
240
- </sonic-code>
241
-
242
-
243
- ## Responsive
244
-
245
- Every table is responsive by default
246
-
247
- <sonic-code>
248
- <template>
249
- <sonic-table bordered>
250
- <sonic-thead>
251
- <sonic-tr>
252
- <sonic-th>Id</sonic-th>
253
- <sonic-th>Name</sonic-th>
254
- <sonic-th>Email</sonic-th>
255
- <sonic-th>Comment</sonic-th>
256
- </sonic-tr>
257
- </sonic-thead>
258
- <sonic-tbody>
259
- <sonic-list fetch serviceURL="/docs-mock-api" dataProvider="api/users" key="data" displayContents>
260
- <template>
261
- <sonic-tr>
262
- <sonic-td data-bind ::inner-html="$id"></sonic-td>
263
- <sonic-td minWidth="10rem" data-bind ::inner-html="$first_name <b>$last_name</b>"></sonic-td>
264
- <sonic-td data-bind ::inner-html="$email"></sonic-td>
265
- <sonic-td minWidth="40rem">
266
- hasellus suscipit vulputate lacus, in tempor turpis aliquam vel. Nunc eleifend, velit id ultrices elementum, ipsum felis porttitor dui, id laoreet diam nulla sed urna.
267
- </sonic-td>
268
- </sonic-tr>
269
- </template>
270
- <sonic-list>
271
- </sonic-tbody>
272
- </sonic-table>
273
- </template>
274
- </sonic-code>
275
-
276
-
277
- ## Sticky header
278
-
279
- <sonic-code>
280
- <template>
281
- <sonic-table bordered noCustomScroll>
282
- <sonic-thead class="sticky top-16">
283
- <sonic-tr>
284
- <sonic-th minWidth="max(20ch,12rem)">Company</sonic-th>
285
- <sonic-th type="success">Contact</sonic-th>
286
- <sonic-th>Country</sonic-th>
287
- <sonic-th align="center">Quantity</sonic-th>
288
- <sonic-th align="right">Price</sonic-th>
289
- <sonic-th></sonic-th>
290
- </sonic-tr>
291
- </sonic-thead>
292
- <sonic-tbody>
293
- <sonic-tr>
294
- <sonic-td>Alfreds Futterkiste</sonic-td>
295
- <sonic-td>Maria Anders</sonic-td>
296
- <sonic-td>Germany</sonic-td>
297
- <sonic-td align="center">2</sonic-td>
298
- <sonic-td align="right">40€</sonic-td>
299
- <sonic-td td align="right"
300
- ><sonic-button shape="circle" variant="outline" size="sm">
301
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
302
- ></sonic-button>
303
- </sonic-td>
304
- </sonic-tr>
305
- <sonic-tr>
306
- <sonic-td>Centro comercial Moctezuma</sonic-td>
307
- <sonic-td
308
- colspan="2"
309
- align="center"
310
- class="
311
- text-center
312
- text-neutral-400
313
- "
314
- >no information yet</sonic-td
315
- >
316
- <sonic-td align="center">3</sonic-td>
317
- <sonic-td align="right">40€</sonic-td>
318
- <sonic-td td align="right"
319
- ><sonic-button shape="circle" variant="outline" size="sm">
320
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
321
- ></sonic-button>
322
- </sonic-td>
323
- </sonic-tr>
324
- <sonic-tr>
325
- <sonic-td>Ernst Handel</sonic-td>
326
- <sonic-td>Roland Mendel</sonic-td>
327
- <sonic-td>Austria</sonic-td>
328
- <sonic-td align="center">4</sonic-td>
329
- <sonic-td align="right">40€</sonic-td>
330
- <sonic-td td align="right"
331
- ><sonic-button shape="circle" variant="outline" size="sm">
332
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
333
- ></sonic-button>
334
- </sonic-td>
335
- </sonic-tr>
336
- <sonic-tr>
337
- <sonic-td>Island Trading</sonic-td>
338
- <sonic-td>Helen Bennett</sonic-td>
339
- <sonic-td>UK</sonic-td>
340
- <sonic-td align="center">1</sonic-td>
341
- <sonic-td align="right">40€</sonic-td>
342
- <sonic-td td align="right"
343
- ><sonic-button shape="circle" variant="outline" size="sm">
344
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
345
- ></sonic-button>
346
- </sonic-td>
347
- </sonic-tr>
348
- <sonic-tr type="warning">
349
- <sonic-td>Laughing Bacchus Winecellars</sonic-td>
350
- <sonic-td>Yoshi Tannamuri</sonic-td>
351
- <sonic-td>Canada</sonic-td>
352
- <sonic-td align="center">0</sonic-td>
353
- <sonic-td align="right">40€</sonic-td>
354
- <sonic-td td align="right"
355
- ><sonic-button shape="circle" variant="outline" size="sm">
356
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
357
- ></sonic-button>
358
- </sonic-td>
359
- </sonic-tr>
360
- <sonic-tr>
361
- <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
362
- <sonic-td>Giovanni Rovelli</sonic-td>
363
- <sonic-td type="danger">Italy</sonic-td>
364
- <sonic-td align="center">20</sonic-td>
365
- <sonic-td align="right">40€</sonic-td>
366
- <sonic-td td align="right"
367
- ><sonic-button shape="circle" variant="outline" size="sm">
368
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
369
- ></sonic-button>
370
- </sonic-td>
371
- </sonic-tr>
372
- <sonic-tr>
373
- <sonic-td>Alfreds Futterkiste</sonic-td>
374
- <sonic-td>Maria Anders</sonic-td>
375
- <sonic-td>Germany</sonic-td>
376
- <sonic-td align="center">2</sonic-td>
377
- <sonic-td align="right">40€</sonic-td>
378
- <sonic-td td align="right"
379
- ><sonic-button shape="circle" variant="outline" size="sm">
380
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
381
- ></sonic-button>
382
- </sonic-td>
383
- </sonic-tr>
384
- <sonic-tr>
385
- <sonic-td>Centro comercial Moctezuma</sonic-td>
386
- <sonic-td
387
- colspan="2"
388
- align="center"
389
- class="
390
- text-center
391
- text-neutral-400
392
- "
393
- >no information yet</sonic-td
394
- >
395
- <sonic-td align="center">3</sonic-td>
396
- <sonic-td align="right">40€</sonic-td>
397
- <sonic-td td align="right"
398
- ><sonic-button shape="circle" variant="outline" size="sm">
399
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
400
- ></sonic-button>
401
- </sonic-td>
402
- </sonic-tr>
403
- <sonic-tr>
404
- <sonic-td>Ernst Handel</sonic-td>
405
- <sonic-td>Roland Mendel</sonic-td>
406
- <sonic-td>Austria</sonic-td>
407
- <sonic-td align="center">4</sonic-td>
408
- <sonic-td align="right">40€</sonic-td>
409
- <sonic-td td align="right"
410
- ><sonic-button shape="circle" variant="outline" size="sm">
411
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
412
- ></sonic-button>
413
- </sonic-td>
414
- </sonic-tr>
415
- <sonic-tr>
416
- <sonic-td>Island Trading</sonic-td>
417
- <sonic-td>Helen Bennett</sonic-td>
418
- <sonic-td>UK</sonic-td>
419
- <sonic-td align="center">1</sonic-td>
420
- <sonic-td align="right">40€</sonic-td>
421
- <sonic-td td align="right"
422
- ><sonic-button shape="circle" variant="outline" size="sm">
423
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
424
- ></sonic-button>
425
- </sonic-td>
426
- </sonic-tr>
427
- <sonic-tr type="warning">
428
- <sonic-td>Laughing Bacchus Winecellars</sonic-td>
429
- <sonic-td>Yoshi Tannamuri</sonic-td>
430
- <sonic-td>Canada</sonic-td>
431
- <sonic-td align="center">0</sonic-td>
432
- <sonic-td align="right">40€</sonic-td>
433
- <sonic-td td align="right"
434
- ><sonic-button shape="circle" variant="outline" size="sm">
435
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
436
- ></sonic-button>
437
- </sonic-td>
438
- </sonic-tr>
439
- <sonic-tr>
440
- <sonic-td>Magazzini Alimentari Riuniti</sonic-td>
441
- <sonic-td>Giovanni Rovelli</sonic-td>
442
- <sonic-td>Italy</sonic-td>
443
- <sonic-td align="center">20</sonic-td>
444
- <sonic-td align="right">40€</sonic-td>
445
- <sonic-td td align="right"
446
- ><sonic-button shape="circle" variant="outline" size="sm">
447
- <sonic-icon library="iconoir" name="edit-pencil" size="lg"></sonic-icon
448
- ></sonic-button>
449
- </sonic-td>
450
- </sonic-tr>
451
- </sonic-tbody>
452
- <sonic-caption>table caption</sonic-caption>
453
- </sonic-table>
454
- </template>
455
- </sonic-code>
@@ -1,166 +0,0 @@
1
- # Toast
2
-
3
- ## Utilisation de base
4
-
5
- <sonic-code>
6
- <template>
7
- <sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
8
- Afficher un toast
9
- </sonic-button>
10
- </template>
11
- </sonic-code>
12
-
13
- ## Statut
14
-
15
- Les statuts disponibles sont : `success`, `error`, `warning`, `info` ou vide (par défaut).
16
-
17
- <sonic-code>
18
- <template>
19
- <div class="flex flex-wrap gap-2">
20
- <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
21
- Default
22
- </sonic-button>
23
- <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
24
- Success
25
- </sonic-button>
26
- <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
27
- Error
28
- </sonic-button>
29
- <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
30
- Warning
31
- </sonic-button>
32
- <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
33
- Info
34
- </sonic-button>
35
- </div>
36
- </template>
37
- </sonic-code>
38
-
39
- ## Avec titre
40
-
41
- <sonic-code>
42
- <template>
43
- <div class="flex flex-wrap gap-2">
44
- <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
45
- Toast avec titre
46
- </sonic-button>
47
- <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
48
- Toast d'erreur avec titre
49
- </sonic-button>
50
- </div>
51
- </template>
52
- </sonic-code>
53
-
54
- ## Avec contenu HTML
55
-
56
- Le contenu du toast peut contenir du HTML.
57
-
58
- <sonic-code>
59
- <template>
60
- <sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
61
- Toast avec HTML
62
- </sonic-button>
63
- </template>
64
- </sonic-code>
65
-
66
-
67
- ## Persistance
68
-
69
- Par défaut, les toasts disparaissent automatiquement. Avec `preserve: true`, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.
70
-
71
- <sonic-code>
72
- <template>
73
- <sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
74
- Toast persistant
75
- </sonic-button>
76
- </template>
77
- </sonic-code>
78
-
79
- ## Masquer définitivement
80
-
81
- Avec `dismissForever: true` et un `id`, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.
82
-
83
- <sonic-code>
84
- <template>
85
- <sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
86
- Toast avec dismiss forever
87
- </sonic-button>
88
- </template>
89
- </sonic-code>
90
-
91
- ## Fantôme
92
-
93
- Avec `ghost: true`, le toast devient semi-transparent et non-interactif.
94
-
95
- <sonic-code>
96
- <template>
97
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
98
- Toast ghost
99
- </sonic-button>
100
- </template>
101
- </sonic-code>
102
-
103
-
104
- ## Méthodes de suppression
105
-
106
- ### Tout supprimer
107
-
108
- Supprime tous les toasts sauf ceux marqués comme `ghost`.
109
-
110
- <sonic-code>
111
- <template>
112
- <div class="flex flex-wrap gap-2">
113
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
114
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
115
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
116
- <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
117
- </div>
118
- </template>
119
- </sonic-code>
120
-
121
- ### Supprimer par statut
122
-
123
- Supprime tous les toasts d'un statut spécifique.
124
-
125
- <sonic-code>
126
- <template>
127
- <div class="flex flex-wrap gap-2">
128
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
129
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
130
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
131
- <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
132
- <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
133
- </div>
134
- </template>
135
- </sonic-code>
136
-
137
- ### Supprimer les éléments temporaires
138
-
139
- Supprime tous les toasts qui ne sont pas marqués comme `preserve`.
140
-
141
- <sonic-code>
142
- <template>
143
- <div class="flex flex-wrap gap-2">
144
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
145
- <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
146
- <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
147
- </div>
148
- </template>
149
- </sonic-code>
150
-
151
- ## Exemple complet
152
-
153
- <sonic-code>
154
- <template>
155
- <sonic-button onclick="window.SonicToast.add({
156
- id: 'welcome-toast',
157
- title: 'Bienvenue',
158
- text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
159
- status: 'success',
160
- dismissForever: true
161
- })">
162
- Toast complet
163
- </sonic-button>
164
- </template>
165
- </sonic-code>
166
-