@supersoniks/concorde 3.1.64 → 3.1.65
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 +1 -1
- package/concorde-core.es.js +1 -1
- package/dist/concorde-core.bundle.js +1 -1
- package/dist/concorde-core.es.js +1 -1
- package/package.json +1 -1
- package/scripts/create-search.js +0 -0
- package/scripts/post-build-docs.js +0 -0
- package/scripts/pre-publish.mjs +0 -0
- package/src/core/components/ui/alert-messages/alert-messages.ts +0 -0
- package/src/core/components/ui/group/group.ts +0 -0
- package/src/core/components/ui/toast/message-subscriber.ts +0 -0
- package/src/core/components/ui/toast/toast.ts +0 -0
- package/src/core/mixins/FormCheckable.ts +0 -0
- package/src/core/mixins/Subscriber.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/index.ts +0 -0
- package/docs/assets/index-D9bBwsCn.js +0 -4537
- package/docs/assets/index-DCRPZO3x.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 -117
- 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 -108
- 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 -12
- 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 -94
- 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 -130
- 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 -288
- package/docs/src/core/components/ui/modal/modal.md +0 -123
- package/docs/src/core/components/ui/pop/pop.md +0 -79
- 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/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/_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/search/docs-search.json +0 -3902
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -835
- package/docs/svg/regular/plane.svg +0 -1
- package/docs/svg/solid/plane.svg +0 -1
- package/php/get-challenge.php +0 -34
- package/php/some-service.php +0 -42
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
# Pop
|
|
2
|
-
|
|
3
|
-
## Placement
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-pop class="inline-block" placement="left">
|
|
7
|
-
<sonic-button>Left</sonic-button>
|
|
8
|
-
<sonic-menu slot="content">
|
|
9
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
10
|
-
</sonic-menu>
|
|
11
|
-
</sonic-pop>
|
|
12
|
-
<sonic-pop class="inline-block" placement="right">
|
|
13
|
-
<sonic-button>Right</sonic-button>
|
|
14
|
-
<sonic-menu slot="content">
|
|
15
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
16
|
-
</sonic-menu>
|
|
17
|
-
</sonic-pop>
|
|
18
|
-
<sonic-pop class="inline-block" placement="top">
|
|
19
|
-
<sonic-button>Top</sonic-button>
|
|
20
|
-
<sonic-menu slot="content">
|
|
21
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
22
|
-
</sonic-menu>
|
|
23
|
-
</sonic-pop>
|
|
24
|
-
<sonic-pop class="inline-block" placement="bottom">
|
|
25
|
-
<sonic-button>Bottom</sonic-button>
|
|
26
|
-
<sonic-menu slot="content">
|
|
27
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
28
|
-
</sonic-menu>
|
|
29
|
-
</sonic-pop>
|
|
30
|
-
</template>
|
|
31
|
-
</sonic-code>
|
|
32
|
-
|
|
33
|
-
## Shadow
|
|
34
|
-
<sonic-code>
|
|
35
|
-
<template>
|
|
36
|
-
<sonic-pop class="inline-block" shadow="none" placement='top' >
|
|
37
|
-
<sonic-button>None</sonic-button>
|
|
38
|
-
<sonic-menu slot="content">
|
|
39
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
40
|
-
</sonic-menu>
|
|
41
|
-
</sonic-pop>
|
|
42
|
-
<sonic-pop class="inline-block" shadow="sm" placement='top'>
|
|
43
|
-
<sonic-button>Small</sonic-button>
|
|
44
|
-
<sonic-menu slot="content">
|
|
45
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
46
|
-
</sonic-menu>
|
|
47
|
-
</sonic-pop>
|
|
48
|
-
<sonic-pop class="inline-block" shadow="md" placement='top'>
|
|
49
|
-
<sonic-button>Medium</sonic-button>
|
|
50
|
-
<sonic-menu slot="content">
|
|
51
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
52
|
-
</sonic-menu>
|
|
53
|
-
</sonic-pop>
|
|
54
|
-
<sonic-pop class="inline-block" shadow="lg" placement='top'>
|
|
55
|
-
<sonic-button>Large</sonic-button>
|
|
56
|
-
<sonic-menu slot="content">
|
|
57
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
58
|
-
</sonic-menu>
|
|
59
|
-
</sonic-pop>
|
|
60
|
-
</template>
|
|
61
|
-
</sonic-code>
|
|
62
|
-
|
|
63
|
-
## noToggle
|
|
64
|
-
<sonic-code>
|
|
65
|
-
<template>
|
|
66
|
-
<sonic-pop class="inline-block" noToggle>
|
|
67
|
-
<sonic-button>No toggle on click</sonic-button>
|
|
68
|
-
<sonic-menu slot="content">
|
|
69
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
70
|
-
</sonic-menu>
|
|
71
|
-
</sonic-pop>
|
|
72
|
-
<sonic-pop class="inline-block" >
|
|
73
|
-
<sonic-button>Default toggle on click</sonic-button>
|
|
74
|
-
<sonic-menu slot="content">
|
|
75
|
-
<sonic-menu-item><sonic-icon library="iconoir" name="bell-notification" slot="prefix"></sonic-icon>Notifications</sonic-menu-item>
|
|
76
|
-
</sonic-menu>
|
|
77
|
-
</sonic-pop>
|
|
78
|
-
</template>
|
|
79
|
-
</sonic-code>
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
# Progress bar
|
|
2
|
-
|
|
3
|
-
Displays an indicator showing the completion progress of a task.
|
|
4
|
-
|
|
5
|
-
## Indeterminate
|
|
6
|
-
|
|
7
|
-
<sonic-code>
|
|
8
|
-
<template>
|
|
9
|
-
<sonic-progress></sonic-progress>
|
|
10
|
-
</template>
|
|
11
|
-
</sonic-code>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
## Remaining
|
|
15
|
-
|
|
16
|
-
<sonic-code>
|
|
17
|
-
<template>
|
|
18
|
-
<sonic-progress type="danger" value="80">
|
|
19
|
-
80% Used <span slot="remaining">20% left</span>
|
|
20
|
-
</sonic-progress>
|
|
21
|
-
</template>
|
|
22
|
-
</sonic-code>
|
|
23
|
-
|
|
24
|
-
## Sizes
|
|
25
|
-
|
|
26
|
-
<sonic-code>
|
|
27
|
-
<template>
|
|
28
|
-
<div class="grid gap-3">
|
|
29
|
-
<sonic-progress size="2xs" value="25">25%</sonic-progress>
|
|
30
|
-
<sonic-progress size="xs" value="25">25%</sonic-progress>
|
|
31
|
-
<sonic-progress size="sm" value="25">25%</sonic-progress>
|
|
32
|
-
<sonic-progress size="md" value="25">25%</sonic-progress>
|
|
33
|
-
<sonic-progress size="lg" value="25">25%</sonic-progress>
|
|
34
|
-
<sonic-progress size="xl" value="25">25%</sonic-progress>
|
|
35
|
-
<sonic-progress size="2xl" value="25">25%</sonic-progress>
|
|
36
|
-
</div>
|
|
37
|
-
</template>
|
|
38
|
-
</sonic-code>
|
|
39
|
-
|
|
40
|
-
## Type
|
|
41
|
-
|
|
42
|
-
<sonic-code>
|
|
43
|
-
<template>
|
|
44
|
-
<div class="grid gap-3">
|
|
45
|
-
<sonic-progress value="50">50%</sonic-progress>
|
|
46
|
-
<sonic-progress type="info" value="50">50%</sonic-progress>
|
|
47
|
-
<sonic-progress type="warning" value="50">50%</sonic-progress>
|
|
48
|
-
<sonic-progress type="success" value="50">50%</sonic-progress>
|
|
49
|
-
<sonic-progress type="danger" value="50">50%</sonic-progress>
|
|
50
|
-
</div>
|
|
51
|
-
</template>
|
|
52
|
-
</sonic-code>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
## Invert
|
|
56
|
-
|
|
57
|
-
<sonic-code>
|
|
58
|
-
<template>
|
|
59
|
-
<div class="bg-neutral-900 p-4 rounded-md">
|
|
60
|
-
<sonic-progress type="invert" value="50">50%</sonic-progress>
|
|
61
|
-
</div>
|
|
62
|
-
</template>
|
|
63
|
-
</sonic-code>
|
|
@@ -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,82 +0,0 @@
|
|
|
1
|
-
# Tooltip
|
|
2
|
-
|
|
3
|
-
<sonic-code>
|
|
4
|
-
<template>
|
|
5
|
-
<sonic-tooltip label="Tada : Text appears">hover me</sonic-tooltip>
|
|
6
|
-
</template>
|
|
7
|
-
</sonic-code>
|
|
8
|
-
|
|
9
|
-
## Placement
|
|
10
|
-
|
|
11
|
-
By default, tooltip is centered next to its content
|
|
12
|
-
|
|
13
|
-
<sonic-code>
|
|
14
|
-
<template>
|
|
15
|
-
<sonic-tooltip placement="top" label="Top text">
|
|
16
|
-
<sonic-button>Top</sonic-button>
|
|
17
|
-
</sonic-tooltip>
|
|
18
|
-
<sonic-tooltip placement="bottom" label="Bottom text">
|
|
19
|
-
<sonic-button>Bottom</sonic-button>
|
|
20
|
-
</sonic-tooltip>
|
|
21
|
-
<sonic-tooltip placement="right" label="Right text">
|
|
22
|
-
<sonic-button>Right</sonic-button>
|
|
23
|
-
</sonic-tooltip>
|
|
24
|
-
<sonic-tooltip placement="left" label="Left text">
|
|
25
|
-
<sonic-button>Left</sonic-button>
|
|
26
|
-
</sonic-tooltip>
|
|
27
|
-
</template>
|
|
28
|
-
</sonic-code>
|
|
29
|
-
|
|
30
|
-
## More placement
|
|
31
|
-
<sonic-code>
|
|
32
|
-
<template>
|
|
33
|
-
<div class="flex gap-3 flex-wrap">
|
|
34
|
-
<sonic-tooltip placement="top-start" label="My tooltip">
|
|
35
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Top start</sonic-button>
|
|
36
|
-
</sonic-tooltip>
|
|
37
|
-
<sonic-tooltip placement="top-end" label="My tooltip">
|
|
38
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Top end</sonic-button>
|
|
39
|
-
</sonic-tooltip>
|
|
40
|
-
<sonic-tooltip placement="bottom-start" label="My tooltip">
|
|
41
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom start</sonic-button>
|
|
42
|
-
</sonic-tooltip>
|
|
43
|
-
<sonic-tooltip placement="bottom-end" label="My tooltip">
|
|
44
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Bottom end</sonic-button>
|
|
45
|
-
</sonic-tooltip>
|
|
46
|
-
<sonic-tooltip placement="right-start" label="My tooltip">
|
|
47
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Right start</sonic-button>
|
|
48
|
-
</sonic-tooltip>
|
|
49
|
-
<sonic-tooltip placement="right-end" label="My tooltip">
|
|
50
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Right end</sonic-button>
|
|
51
|
-
</sonic-tooltip>
|
|
52
|
-
<sonic-tooltip placement="left-start" label="My tooltip">
|
|
53
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Left start</sonic-button>
|
|
54
|
-
</sonic-tooltip>
|
|
55
|
-
<sonic-tooltip placement="left-end" label="My tooltip">
|
|
56
|
-
<sonic-button class="size-40 bg-neutral-200 rounded-lg">Left end</sonic-button>
|
|
57
|
-
</sonic-tooltip>
|
|
58
|
-
</div>
|
|
59
|
-
</template>
|
|
60
|
-
</sonic-code>
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
## Focusable
|
|
64
|
-
|
|
65
|
-
<sonic-code>
|
|
66
|
-
<template>
|
|
67
|
-
<sonic-tooltip focusable label="The Concorde made its first transatlantic crossing on September 26, 1973">
|
|
68
|
-
<sonic-icon library="iconoir" name="chat-bubble-question"></sonic-icon> Focus or hover non interactive element
|
|
69
|
-
</sonic-tooltip>
|
|
70
|
-
</template>
|
|
71
|
-
</sonic-code>
|
|
72
|
-
|
|
73
|
-
## Disabled
|
|
74
|
-
|
|
75
|
-
<sonic-code>
|
|
76
|
-
<template>
|
|
77
|
-
<sonic-tooltip disabled label="Disabled text">
|
|
78
|
-
<sonic-button>Tooltip disabled</sonic-button>
|
|
79
|
-
</sonic-tooltip>
|
|
80
|
-
</template>
|
|
81
|
-
</sonic-code>
|
|
82
|
-
|