@supersoniks/concorde 5.0.0 → 5.0.1

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