@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.
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +670 -584
- package/concorde-core.es.js +9729 -7104
- package/dist/concorde-core.bundle.js +670 -584
- package/dist/concorde-core.es.js +9729 -7104
- package/package.json +7 -4
- package/src/core/components/functional/fetch/fetch.md +0 -0
- package/src/core/components/ui/_css/scroll.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/alert/alert.ts +0 -0
- package/src/core/components/ui/button/button.ts +0 -0
- package/src/core/components/ui/captcha/altchaStyles.ts +0 -0
- package/src/core/components/ui/divider/divider.ts +0 -0
- package/src/core/components/ui/menu/menu.md +0 -0
- package/src/core/components/ui/modal/modal-close.ts +0 -0
- package/src/core/components/ui/modal/modal-utils.ts +46 -0
- package/src/core/components/ui/modal/modal.md +0 -0
- package/src/core/components/ui/modal/modal.ts +33 -8
- package/src/core/components/ui/table/table-caption.ts +0 -0
- package/src/core/decorators/subscriber/onAssign.ts +4 -4
- package/src/core/utils/dataProviderKey.spec.ts +8 -0
- package/src/core/utils/dataProviderKey.ts +31 -12
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +0 -0
- package/src/tsconfig.json +9 -0
- package/src/tsconfig.tsbuildinfo +1 -1
- package/vite/config.js +52 -34
- package/vite.config.mts +14 -12
- package/docs/assets/index-CW8cIYT9.js +0 -4949
- package/docs/assets/index-DZtxIZCW.css +0 -1
- package/docs/css/docs.css +0 -0
- package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
- package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Light.eot +0 -0
- package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff +0 -0
- package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
- package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
- package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
- package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
- package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
- package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
- package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
- package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
- package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
- package/docs/img/concorde-icon.svg +0 -5
- package/docs/img/concorde-logo.svg +0 -1
- package/docs/img/concorde.png +0 -0
- package/docs/img/concorde_def.png +0 -0
- package/docs/img/concorde_seuil.png.webp +0 -0
- package/docs/img/concorde_seuil_invert.png +0 -0
- package/docs/img/paul_metrand.jpg +0 -0
- package/docs/img/paul_metrand_xs.jpg +0 -0
- package/docs/index.html +0 -93
- package/docs/src/core/components/functional/date/date.md +0 -290
- package/docs/src/core/components/functional/fetch/fetch.md +0 -123
- package/docs/src/core/components/functional/if/if.md +0 -16
- package/docs/src/core/components/functional/list/list.md +0 -199
- package/docs/src/core/components/functional/mix/mix.md +0 -41
- package/docs/src/core/components/functional/queue/queue.md +0 -87
- package/docs/src/core/components/functional/router/router.md +0 -129
- package/docs/src/core/components/functional/sdui/default-library.json +0 -108
- package/docs/src/core/components/functional/sdui/example.json +0 -99
- package/docs/src/core/components/functional/sdui/sdui.md +0 -356
- package/docs/src/core/components/functional/states/states.md +0 -87
- package/docs/src/core/components/functional/submit/submit.md +0 -83
- package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
- package/docs/src/core/components/functional/value/value.md +0 -35
- package/docs/src/core/components/ui/alert/alert.md +0 -121
- package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/docs/src/core/components/ui/badge/badge.md +0 -127
- package/docs/src/core/components/ui/button/button.md +0 -182
- package/docs/src/core/components/ui/captcha/captcha.md +0 -24
- package/docs/src/core/components/ui/card/card.md +0 -97
- package/docs/src/core/components/ui/divider/divider.md +0 -35
- package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -104
- package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
- package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
- package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
- package/docs/src/core/components/ui/form/input/input.md +0 -167
- package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -131
- package/docs/src/core/components/ui/form/radio/radio.md +0 -84
- package/docs/src/core/components/ui/form/select/select.md +0 -97
- package/docs/src/core/components/ui/form/switch/switch.md +0 -84
- package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
- package/docs/src/core/components/ui/group/group.md +0 -75
- package/docs/src/core/components/ui/icon/icon.md +0 -125
- package/docs/src/core/components/ui/icon/icons.json +0 -1
- package/docs/src/core/components/ui/image/image.md +0 -107
- package/docs/src/core/components/ui/link/link.md +0 -43
- package/docs/src/core/components/ui/loader/loader.md +0 -67
- package/docs/src/core/components/ui/menu/menu.md +0 -329
- package/docs/src/core/components/ui/modal/modal.md +0 -119
- package/docs/src/core/components/ui/pop/pop.md +0 -96
- package/docs/src/core/components/ui/progress/progress.md +0 -63
- package/docs/src/core/components/ui/table/table.md +0 -455
- package/docs/src/core/components/ui/toast/toast.md +0 -166
- package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
- package/docs/src/docs/_core-concept/overview.md +0 -57
- package/docs/src/docs/_core-concept/subscriber.md +0 -76
- package/docs/src/docs/_decorators/ancestor-attribute.md +0 -78
- package/docs/src/docs/_decorators/auto-subscribe.md +0 -199
- package/docs/src/docs/_decorators/bind.md +0 -164
- package/docs/src/docs/_decorators/get.md +0 -65
- package/docs/src/docs/_decorators/on-assign.md +0 -336
- package/docs/src/docs/_decorators/publish.md +0 -54
- package/docs/src/docs/_decorators/subscribe.md +0 -36
- package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -160
- package/docs/src/docs/_getting-started/concorde-outside.md +0 -143
- package/docs/src/docs/_getting-started/create-a-component.md +0 -137
- package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -174
- package/docs/src/docs/_getting-started/pubsub.md +0 -150
- package/docs/src/docs/_getting-started/start.md +0 -39
- package/docs/src/docs/_getting-started/theming.md +0 -91
- package/docs/src/docs/_misc/dataProviderKey.md +0 -135
- package/docs/src/docs/_misc/endpoint.md +0 -42
- package/docs/src/docs/_misc/templates-demo.md +0 -19
- package/docs/src/docs/search/docs-search.json +0 -5197
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -987
- package/docs/svg/regular/plane.svg +0 -1
- 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="#">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
|
-
|