@supersoniks/concorde 4.4.2 → 4.5.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 (137) hide show
  1. package/build-infos.json +1 -1
  2. package/concorde-core.bundle.js +670 -584
  3. package/concorde-core.es.js +9729 -7104
  4. package/dist/concorde-core.bundle.js +670 -584
  5. package/dist/concorde-core.es.js +9729 -7104
  6. package/package.json +7 -4
  7. package/src/core/components/functional/fetch/fetch.md +0 -0
  8. package/src/core/components/ui/_css/scroll.ts +0 -0
  9. package/src/core/components/ui/_css/size.ts +0 -0
  10. package/src/core/components/ui/alert/alert.ts +0 -0
  11. package/src/core/components/ui/button/button.ts +0 -0
  12. package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
  13. package/src/core/components/ui/divider/divider.ts +0 -0
  14. package/src/core/components/ui/menu/menu.md +0 -0
  15. package/src/core/components/ui/modal/modal-close.ts +0 -0
  16. package/src/core/components/ui/modal/modal-utils.ts +46 -0
  17. package/src/core/components/ui/modal/modal.md +0 -0
  18. package/src/core/components/ui/modal/modal.ts +33 -8
  19. package/src/core/components/ui/table/table-caption.ts +0 -0
  20. package/src/core/decorators/subscriber/onAssign.ts +4 -4
  21. package/src/core/utils/dataProviderKey.spec.ts +8 -0
  22. package/src/core/utils/dataProviderKey.ts +31 -12
  23. package/src/core/utils/route.ts +0 -0
  24. package/src/docs/code.ts +0 -0
  25. package/src/tsconfig.json +9 -0
  26. package/src/tsconfig.tsbuildinfo +1 -1
  27. package/vite/config.js +52 -34
  28. package/vite.config.mts +14 -12
  29. package/docs/assets/index-CW8cIYT9.js +0 -4949
  30. package/docs/assets/index-DZtxIZCW.css +0 -1
  31. package/docs/css/docs.css +0 -0
  32. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  33. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  34. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  35. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  36. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  37. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  38. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  39. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  40. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  41. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  42. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  43. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  44. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  45. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  46. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  47. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  48. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  49. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  50. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  51. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  52. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  53. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  54. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  55. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  56. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  57. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  58. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  59. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  60. package/docs/img/concorde-icon.svg +0 -5
  61. package/docs/img/concorde-logo.svg +0 -1
  62. package/docs/img/concorde.png +0 -0
  63. package/docs/img/concorde_def.png +0 -0
  64. package/docs/img/concorde_seuil.png.webp +0 -0
  65. package/docs/img/concorde_seuil_invert.png +0 -0
  66. package/docs/img/paul_metrand.jpg +0 -0
  67. package/docs/img/paul_metrand_xs.jpg +0 -0
  68. package/docs/index.html +0 -93
  69. package/docs/src/core/components/functional/date/date.md +0 -290
  70. package/docs/src/core/components/functional/fetch/fetch.md +0 -123
  71. package/docs/src/core/components/functional/if/if.md +0 -16
  72. package/docs/src/core/components/functional/list/list.md +0 -199
  73. package/docs/src/core/components/functional/mix/mix.md +0 -41
  74. package/docs/src/core/components/functional/queue/queue.md +0 -87
  75. package/docs/src/core/components/functional/router/router.md +0 -129
  76. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  77. package/docs/src/core/components/functional/sdui/example.json +0 -99
  78. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  79. package/docs/src/core/components/functional/states/states.md +0 -87
  80. package/docs/src/core/components/functional/submit/submit.md +0 -83
  81. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  82. package/docs/src/core/components/functional/value/value.md +0 -35
  83. package/docs/src/core/components/ui/alert/alert.md +0 -121
  84. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  85. package/docs/src/core/components/ui/badge/badge.md +0 -127
  86. package/docs/src/core/components/ui/button/button.md +0 -182
  87. package/docs/src/core/components/ui/captcha/captcha.md +0 -24
  88. package/docs/src/core/components/ui/card/card.md +0 -97
  89. package/docs/src/core/components/ui/divider/divider.md +0 -35
  90. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -104
  91. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  92. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  93. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  94. package/docs/src/core/components/ui/form/input/input.md +0 -167
  95. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -131
  96. package/docs/src/core/components/ui/form/radio/radio.md +0 -84
  97. package/docs/src/core/components/ui/form/select/select.md +0 -97
  98. package/docs/src/core/components/ui/form/switch/switch.md +0 -84
  99. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  100. package/docs/src/core/components/ui/group/group.md +0 -75
  101. package/docs/src/core/components/ui/icon/icon.md +0 -125
  102. package/docs/src/core/components/ui/icon/icons.json +0 -1
  103. package/docs/src/core/components/ui/image/image.md +0 -107
  104. package/docs/src/core/components/ui/link/link.md +0 -43
  105. package/docs/src/core/components/ui/loader/loader.md +0 -67
  106. package/docs/src/core/components/ui/menu/menu.md +0 -329
  107. package/docs/src/core/components/ui/modal/modal.md +0 -119
  108. package/docs/src/core/components/ui/pop/pop.md +0 -96
  109. package/docs/src/core/components/ui/progress/progress.md +0 -63
  110. package/docs/src/core/components/ui/table/table.md +0 -455
  111. package/docs/src/core/components/ui/toast/toast.md +0 -166
  112. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  113. package/docs/src/docs/_core-concept/overview.md +0 -57
  114. package/docs/src/docs/_core-concept/subscriber.md +0 -76
  115. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -78
  116. package/docs/src/docs/_decorators/auto-subscribe.md +0 -199
  117. package/docs/src/docs/_decorators/bind.md +0 -164
  118. package/docs/src/docs/_decorators/get.md +0 -65
  119. package/docs/src/docs/_decorators/on-assign.md +0 -336
  120. package/docs/src/docs/_decorators/publish.md +0 -54
  121. package/docs/src/docs/_decorators/subscribe.md +0 -36
  122. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -160
  123. package/docs/src/docs/_getting-started/concorde-outside.md +0 -143
  124. package/docs/src/docs/_getting-started/create-a-component.md +0 -137
  125. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -174
  126. package/docs/src/docs/_getting-started/pubsub.md +0 -150
  127. package/docs/src/docs/_getting-started/start.md +0 -39
  128. package/docs/src/docs/_getting-started/theming.md +0 -91
  129. package/docs/src/docs/_misc/dataProviderKey.md +0 -135
  130. package/docs/src/docs/_misc/endpoint.md +0 -42
  131. package/docs/src/docs/_misc/templates-demo.md +0 -19
  132. package/docs/src/docs/search/docs-search.json +0 -5197
  133. package/docs/src/tag-list.json +0 -1
  134. package/docs/src/tsconfig-model.json +0 -23
  135. package/docs/src/tsconfig.json +0 -987
  136. package/docs/svg/regular/plane.svg +0 -1
  137. package/docs/svg/solid/plane.svg +0 -1
@@ -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="https://reqres.in" 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="https://reqres.in" 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="https://reqres.in" 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
-