@supersoniks/concorde 3.2.0 → 3.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build-infos.json +1 -1
- package/concorde-core.bundle.js +101 -101
- package/concorde-core.es.js +187 -182
- package/dist/concorde-core.bundle.js +101 -101
- package/dist/concorde-core.es.js +187 -182
- package/index.html +0 -0
- package/package.json +1 -1
- package/scripts/create-search.js +0 -0
- package/scripts/generate-routes.js +0 -0
- package/src/core/_types/types.ts +0 -0
- package/src/core/components/functional/date/date.ts +0 -0
- package/src/core/components/functional/functional.ts +0 -0
- package/src/core/components/functional/if/if.md +0 -0
- package/src/core/components/functional/if/if.test.ts +0 -0
- package/src/core/components/functional/list/list.spec.ts +0 -0
- package/src/core/components/functional/queue/queue.demo.ts +0 -0
- package/src/core/components/functional/router/router.demo.ts +0 -0
- package/src/core/components/functional/router/router.md +0 -0
- package/src/core/components/functional/router/router.spec.ts +0 -0
- package/src/core/components/functional/router/router.ts +0 -0
- package/src/core/components/functional/sonic-scope/sonic-scope.ts +0 -0
- package/src/core/components/functional/states/states.demo.ts +0 -0
- package/src/core/components/functional/states/states.md +0 -0
- package/src/core/components/functional/states/states.spec.ts +0 -0
- package/src/core/components/functional/states/states.ts +0 -0
- package/src/core/components/functional/submit/submit.ts +0 -0
- package/src/core/components/functional/translation/translation.ts +0 -0
- package/src/core/components/ui/_css/scroll.ts +0 -0
- package/src/core/components/ui/_css/shadow.ts +0 -0
- package/src/core/components/ui/_css/size.ts +0 -0
- package/src/core/components/ui/_css/type.ts +0 -0
- package/src/core/components/ui/alert/alert.md +0 -0
- package/src/core/components/ui/alert/alert.ts +0 -0
- package/src/core/components/ui/alert-messages/alert-messages.md +0 -0
- package/src/core/components/ui/badge/badge.md +0 -0
- package/src/core/components/ui/badge/badge.ts +0 -0
- package/src/core/components/ui/button/button.md +0 -0
- package/src/core/components/ui/button/button.ts +0 -0
- package/src/core/components/ui/captcha/captcha.md +0 -0
- package/src/core/components/ui/captcha/captcha.ts +0 -0
- package/src/core/components/ui/card/card-footer.ts +0 -0
- package/src/core/components/ui/card/card-header-descripton.ts +0 -0
- package/src/core/components/ui/card/card-header.ts +0 -0
- package/src/core/components/ui/card/card-main.ts +0 -0
- package/src/core/components/ui/card/card.md +0 -0
- package/src/core/components/ui/card/card.ts +0 -0
- package/src/core/components/ui/divider/divider.ts +0 -0
- package/src/core/components/ui/form/checkbox/checkbox.md +0 -0
- package/src/core/components/ui/form/checkbox/checkbox.ts +0 -0
- package/src/core/components/ui/form/css/form-control.ts +0 -0
- package/src/core/components/ui/form/fieldset/fieldset.ts +0 -0
- package/src/core/components/ui/form/fieldset/legend-description.ts +0 -0
- package/src/core/components/ui/form/fieldset/legend.ts +0 -0
- package/src/core/components/ui/form/form-layout/form-layout.md +0 -0
- package/src/core/components/ui/form/input/input.md +0 -0
- package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
- package/src/core/components/ui/form/radio/radio.md +0 -0
- package/src/core/components/ui/form/radio/radio.ts +0 -0
- package/src/core/components/ui/form/select/select.md +0 -0
- package/src/core/components/ui/form/switch/switch.md +0 -0
- package/src/core/components/ui/form/switch/switch.ts +0 -0
- package/src/core/components/ui/form/textarea/textarea.ts +0 -0
- package/src/core/components/ui/icon/icons.ts +14 -3
- package/src/core/components/ui/image/image.md +0 -0
- package/src/core/components/ui/image/image.ts +0 -0
- package/src/core/components/ui/loader/loader.md +0 -0
- package/src/core/components/ui/loader/loader.ts +0 -0
- package/src/core/components/ui/loader/styles/fixed.ts +0 -0
- package/src/core/components/ui/loader/styles/inline.ts +0 -0
- package/src/core/components/ui/menu/menu.ts +0 -0
- package/src/core/components/ui/modal/modal-actions.ts +0 -0
- package/src/core/components/ui/modal/modal-close.ts +0 -0
- package/src/core/components/ui/modal/modal-subtitle.ts +0 -0
- package/src/core/components/ui/modal/modal-title.ts +0 -0
- package/src/core/components/ui/modal/modal.md +0 -0
- package/src/core/components/ui/pop/pop.md +0 -0
- package/src/core/components/ui/progress/progress.ts +0 -0
- package/src/core/components/ui/table/table-tbody.ts +0 -0
- package/src/core/components/ui/table/table-th.ts +0 -0
- package/src/core/components/ui/table/table.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/core-variables.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/dark.ts +0 -0
- package/src/core/components/ui/theme/theme-collection/light.ts +0 -0
- package/src/core/components/ui/theme/theme.ts +0 -0
- package/src/core/components/ui/toast/toast-item.ts +0 -0
- package/src/core/components/ui/tooltip/tooltip.ts +0 -0
- package/src/core/components/ui/ui.ts +0 -0
- package/src/core/directives/DataProvider.ts +0 -0
- package/src/core/directives/Wording.ts +0 -0
- package/src/core/mixins/Fetcher.ts +0 -0
- package/src/core/mixins/FormCheckable.ts +0 -0
- package/src/core/mixins/TemplatesContainer.ts +0 -0
- package/src/core/utils/HTML.ts +0 -0
- package/src/core/utils/LocationHandler.ts +0 -0
- package/src/core/utils/Objects.ts +0 -0
- package/src/core/utils/Utils.ts +0 -0
- package/src/core/utils/api.ts +0 -0
- package/src/core/utils/route.spec.ts +0 -0
- package/src/core/utils/route.ts +0 -0
- package/src/docs/code.ts +0 -0
- package/src/docs/docs.ts +0 -0
- package/src/docs/header/header.ts +0 -0
- package/src/docs/layout.ts +0 -0
- package/src/docs/navigation/navigation.ts +0 -0
- package/src/docs/search/docs-search.json +0 -0
- package/src/docs/search/markdown-renderer.ts +0 -0
- package/src/docs/search/page.ts +0 -0
- package/src/docs/search/search.ts +0 -0
- package/src/docs/tailwind/css/tailwind.css +0 -0
- package/src/docs/tailwind/css.d.ts +0 -0
- package/src/index.ts +0 -0
- package/src/test-utils/TestUtils.ts +0 -0
- package/src/tsconfig-model.json +0 -0
- package/src/tsconfig.json +294 -294
- package/tailwind.config.js +0 -0
- package/templates-test.html +0 -0
- package/vite/config.js +0 -0
- package/docs/assets/index-C0K6xugr.css +0 -1
- package/docs/assets/index-Dgl1lJQo.js +0 -4861
- 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 -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 -288
- package/docs/src/core/components/ui/modal/modal.md +0 -123
- 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/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 -3917
- package/docs/src/tag-list.json +0 -1
- package/docs/src/tsconfig-model.json +0 -23
- package/docs/src/tsconfig.json +0 -918
- 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,121 +0,0 @@
|
|
|
1
|
-
# Alert
|
|
2
|
-
|
|
3
|
-
<sonic-code>
|
|
4
|
-
<template>
|
|
5
|
-
<sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
|
|
6
|
-
</template>
|
|
7
|
-
</sonic-code>
|
|
8
|
-
|
|
9
|
-
## Status
|
|
10
|
-
|
|
11
|
-
<sonic-code>
|
|
12
|
-
<template>
|
|
13
|
-
<div class="grid gap-4">
|
|
14
|
-
<sonic-alert label="Default"> This address is already in use. </sonic-alert>
|
|
15
|
-
<sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
|
|
16
|
-
<sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
|
|
17
|
-
<sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
|
|
18
|
-
<sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
|
|
19
|
-
</div>
|
|
20
|
-
</template>
|
|
21
|
-
</sonic-code>
|
|
22
|
-
|
|
23
|
-
## Sizes
|
|
24
|
-
|
|
25
|
-
<sonic-code>
|
|
26
|
-
<template>
|
|
27
|
-
<div class="grid gap-4">
|
|
28
|
-
<sonic-alert status="error" label="Email error" size="2xs">
|
|
29
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
30
|
-
</sonic-alert>
|
|
31
|
-
<sonic-alert status="error" label="Email error" size="xs">
|
|
32
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
33
|
-
</sonic-alert>
|
|
34
|
-
<sonic-alert status="error" label="Email error" size="sm">
|
|
35
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
36
|
-
</sonic-alert>
|
|
37
|
-
<sonic-alert status="error" label="Email error">
|
|
38
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
39
|
-
</sonic-alert>
|
|
40
|
-
<sonic-alert status="error" label="Email error" size="lg">
|
|
41
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
42
|
-
</sonic-alert>
|
|
43
|
-
<sonic-alert status="error" label="Email error" size="xl">
|
|
44
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
45
|
-
</sonic-alert>
|
|
46
|
-
<sonic-alert status="error" label="Email error" size="2xl">
|
|
47
|
-
This address is already in use. Lorem ipsum dolor sit amet.
|
|
48
|
-
</sonic-alert>
|
|
49
|
-
</div>
|
|
50
|
-
</template>
|
|
51
|
-
</sonic-code>
|
|
52
|
-
|
|
53
|
-
## Alert with link
|
|
54
|
-
|
|
55
|
-
<sonic-code>
|
|
56
|
-
<template>
|
|
57
|
-
<sonic-alert status="info" label="New messages !">
|
|
58
|
-
You have 2 unread messages<br />
|
|
59
|
-
<div class="flex gap-2 mt-1">
|
|
60
|
-
<sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
|
|
61
|
-
<sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
|
|
62
|
-
</div>
|
|
63
|
-
</sonic-alert>
|
|
64
|
-
</template>
|
|
65
|
-
</sonic-code>
|
|
66
|
-
|
|
67
|
-
## Background
|
|
68
|
-
|
|
69
|
-
<sonic-code>
|
|
70
|
-
<template>
|
|
71
|
-
<div class="grid gap-4">
|
|
72
|
-
<sonic-alert background label="Lorem ipsum dolor">
|
|
73
|
-
This address is already in use.
|
|
74
|
-
</sonic-alert>
|
|
75
|
-
<sonic-alert status="success" background label="Lorem ipsum dolor">
|
|
76
|
-
This address is already in use.
|
|
77
|
-
</sonic-alert>
|
|
78
|
-
<sonic-alert status="error" background label="Lorem ipsum dolor">
|
|
79
|
-
This address is already in use.
|
|
80
|
-
</sonic-alert>
|
|
81
|
-
<sonic-alert status="warning" background label="Lorem ipsum dolor">
|
|
82
|
-
This address is already in use.
|
|
83
|
-
</sonic-alert>
|
|
84
|
-
<sonic-alert status="info" background label="Lorem ipsum dolor">
|
|
85
|
-
This address is already in use.
|
|
86
|
-
</sonic-alert>
|
|
87
|
-
</div>
|
|
88
|
-
</template>
|
|
89
|
-
</sonic-code>
|
|
90
|
-
|
|
91
|
-
## Dismissible
|
|
92
|
-
|
|
93
|
-
<sonic-code>
|
|
94
|
-
<template>
|
|
95
|
-
<sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
|
|
96
|
-
This address is already in use.
|
|
97
|
-
</sonic-alert>
|
|
98
|
-
<sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
|
|
99
|
-
This address is already in use.
|
|
100
|
-
</sonic-alert>
|
|
101
|
-
<sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
|
|
102
|
-
This address is already in use.
|
|
103
|
-
</sonic-alert>
|
|
104
|
-
<sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
|
|
105
|
-
This address is already in use.
|
|
106
|
-
</sonic-alert>
|
|
107
|
-
<sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
|
|
108
|
-
This address is already in use.
|
|
109
|
-
</sonic-alert>
|
|
110
|
-
</template>
|
|
111
|
-
</sonic-code>
|
|
112
|
-
|
|
113
|
-
## Dismiss forever
|
|
114
|
-
|
|
115
|
-
<sonic-code>
|
|
116
|
-
<template>
|
|
117
|
-
<sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
|
|
118
|
-
This address is already in use.
|
|
119
|
-
</sonic-alert>
|
|
120
|
-
</template>
|
|
121
|
-
</sonic-code>
|
|
File without changes
|
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
# Badge
|
|
2
|
-
|
|
3
|
-
## Type
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-badge>Default</sonic-badge>
|
|
7
|
-
<sonic-badge type="primary">Primary</sonic-badge>
|
|
8
|
-
<sonic-badge type="neutral">Neutral</sonic-badge>
|
|
9
|
-
<sonic-badge type="warning">Warning</sonic-badge>
|
|
10
|
-
<sonic-badge type="info">Info</sonic-badge>
|
|
11
|
-
<sonic-badge type="success">Success</sonic-badge>
|
|
12
|
-
<sonic-badge type="danger">Danger</sonic-badge>
|
|
13
|
-
<sonic-badge type="contrast">Contrast</sonic-badge>
|
|
14
|
-
</template>
|
|
15
|
-
</sonic-code>
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
## Outline
|
|
19
|
-
<sonic-code>
|
|
20
|
-
<template>
|
|
21
|
-
<div class="flex items-center flex-wrap gap-3">
|
|
22
|
-
<sonic-badge variant="outline">Default</sonic-badge>
|
|
23
|
-
<sonic-badge variant="outline" type="primary">Primary</sonic-badge>
|
|
24
|
-
<sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
|
|
25
|
-
<sonic-badge variant="outline" type="warning">Warning</sonic-badge>
|
|
26
|
-
<sonic-badge variant="outline" type="info">Info</sonic-badge>
|
|
27
|
-
<sonic-badge variant="outline" type="success">Success</sonic-badge>
|
|
28
|
-
<sonic-badge variant="outline" type="danger">Danger</sonic-badge>
|
|
29
|
-
<sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
|
|
30
|
-
</div>
|
|
31
|
-
</template>
|
|
32
|
-
</sonic-code>
|
|
33
|
-
|
|
34
|
-
## Ghost
|
|
35
|
-
<sonic-code>
|
|
36
|
-
<template>
|
|
37
|
-
<div class="flex items-center flex-wrap gap-3">
|
|
38
|
-
<sonic-badge variant="ghost">Default</sonic-badge>
|
|
39
|
-
<sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
|
|
40
|
-
<sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
|
|
41
|
-
<sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
|
|
42
|
-
<sonic-badge variant="ghost" type="info">Info</sonic-badge>
|
|
43
|
-
<sonic-badge variant="ghost" type="success">Success</sonic-badge>
|
|
44
|
-
<sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
|
|
45
|
-
<sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
|
|
46
|
-
</div>
|
|
47
|
-
</template>
|
|
48
|
-
</sonic-code>
|
|
49
|
-
|
|
50
|
-
## Size
|
|
51
|
-
<sonic-code>
|
|
52
|
-
<template>
|
|
53
|
-
<sonic-badge size="2xs">2Xs badge</sonic-badge>
|
|
54
|
-
<sonic-badge size="xs">Xs badge</sonic-badge>
|
|
55
|
-
<sonic-badge size="sm">Sm badge</sonic-badge>
|
|
56
|
-
<sonic-badge>Md badge</sonic-badge>
|
|
57
|
-
<sonic-badge size="lg">Lg badge</sonic-badge>
|
|
58
|
-
<sonic-badge size="xl">Xl badge</sonic-badge>
|
|
59
|
-
<sonic-badge size="2xl">2Xl badge</sonic-badge>
|
|
60
|
-
</template>
|
|
61
|
-
</sonic-code>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
## Empty badges
|
|
65
|
-
<sonic-code>
|
|
66
|
-
<template>
|
|
67
|
-
<div class="flex items-center flex-wrap gap-3">
|
|
68
|
-
<sonic-badge type="danger" size="2xs"></sonic-badge>
|
|
69
|
-
<sonic-badge type="danger" size="xs"></sonic-badge>
|
|
70
|
-
<sonic-badge type="danger" size="sm"></sonic-badge>
|
|
71
|
-
<sonic-badge type="danger"></sonic-badge>
|
|
72
|
-
<sonic-badge type="danger" size="lg"></sonic-badge>
|
|
73
|
-
<sonic-badge type="danger" size="xl"></sonic-badge>
|
|
74
|
-
<sonic-badge type="danger" size="2xl"></sonic-badge>
|
|
75
|
-
</div>
|
|
76
|
-
</template>
|
|
77
|
-
</sonic-code>
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
## Ellipsis
|
|
81
|
-
<sonic-code>
|
|
82
|
-
<template>
|
|
83
|
-
<div class="grid grid-cols-3 gap-4" >
|
|
84
|
-
<sonic-badge ellipsis size="sm" variant="outline" >
|
|
85
|
-
<sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
|
|
86
|
-
<sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
|
|
87
|
-
</div>
|
|
88
|
-
</template>
|
|
89
|
-
</sonic-code>
|
|
90
|
-
|
|
91
|
-
## Badge in button
|
|
92
|
-
<sonic-code>
|
|
93
|
-
<template>
|
|
94
|
-
<div class="flex flex-wrap gap-4 items-center">
|
|
95
|
-
<sonic-button type="default">
|
|
96
|
-
Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
|
|
97
|
-
</sonic-button>
|
|
98
|
-
<div class="relative inline-block">
|
|
99
|
-
<sonic-button type="success" class="relative"> Mon compte </sonic-button>
|
|
100
|
-
<sonic-badge type="danger" size="xs" class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
|
|
101
|
-
>12</sonic-badge
|
|
102
|
-
>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="relative inline-block">
|
|
105
|
-
<sonic-button type="neutral" shape="circle" variant="outline"
|
|
106
|
-
><sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
107
|
-
</sonic-button>
|
|
108
|
-
<sonic-badge
|
|
109
|
-
type="danger"
|
|
110
|
-
size="xs"
|
|
111
|
-
class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
|
|
112
|
-
>33</sonic-badge
|
|
113
|
-
>
|
|
114
|
-
</div>
|
|
115
|
-
<div class="relative inline-block">
|
|
116
|
-
<sonic-button type="neutral" shape="circle" variant="outline"
|
|
117
|
-
><sonic-icon library="iconoir" name="user"></sonic-icon>
|
|
118
|
-
</sonic-button>
|
|
119
|
-
<sonic-badge
|
|
120
|
-
type="danger"
|
|
121
|
-
size="xs"
|
|
122
|
-
class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
|
|
123
|
-
></sonic-badge>
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
126
|
-
</template>
|
|
127
|
-
</sonic-code>
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
# Button
|
|
2
|
-
|
|
3
|
-
## Type
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<div class="flex flex-wrap gap-2">
|
|
7
|
-
<sonic-button>Default</sonic-button>
|
|
8
|
-
<sonic-button type="primary">Primary</sonic-button>
|
|
9
|
-
<sonic-button type="neutral">Neutral</sonic-button>
|
|
10
|
-
<sonic-button type="warning">Warning</sonic-button>
|
|
11
|
-
<sonic-button type="info">Info</sonic-button>
|
|
12
|
-
<sonic-button type="success">Success</sonic-button>
|
|
13
|
-
<sonic-button type="danger">Danger</sonic-button>
|
|
14
|
-
<sonic-button type="custom" style="--sc-btn-custom-color: #fde68a; --sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
|
|
15
|
-
</div>
|
|
16
|
-
</template>
|
|
17
|
-
</sonic-code>
|
|
18
|
-
|
|
19
|
-
## Outline
|
|
20
|
-
<sonic-code>
|
|
21
|
-
<template>
|
|
22
|
-
<div class="flex flex-wrap gap-2">
|
|
23
|
-
<sonic-button variant="outline">Default</sonic-button>
|
|
24
|
-
<sonic-button variant="outline" type="primary">Primary</sonic-button>
|
|
25
|
-
<sonic-button variant="outline" type="neutral">Neutral</sonic-button>
|
|
26
|
-
<sonic-button variant="outline" type="warning">Warning</sonic-button>
|
|
27
|
-
<sonic-button variant="outline" type="info">Info</sonic-button>
|
|
28
|
-
<sonic-button variant="outline" type="success">Success</sonic-button>
|
|
29
|
-
<sonic-button variant="outline" type="danger">Danger</sonic-button>
|
|
30
|
-
<sonic-button variant="outline" type="custom" style="--sc-btn-custom-bg: #5b21b6">Custom</sonic-button>
|
|
31
|
-
</div>
|
|
32
|
-
</template>
|
|
33
|
-
</sonic-code>
|
|
34
|
-
|
|
35
|
-
## Variant
|
|
36
|
-
<sonic-code>
|
|
37
|
-
<template>
|
|
38
|
-
<sonic-button variant="default">Default</sonic-button>
|
|
39
|
-
<sonic-button variant="outline">Outline</sonic-button>
|
|
40
|
-
<sonic-button variant="ghost">Ghost</sonic-button>
|
|
41
|
-
<sonic-button variant="link">Link</sonic-button>
|
|
42
|
-
<sonic-button variant="unstyled">Unstyled</sonic-button>
|
|
43
|
-
</template>
|
|
44
|
-
</sonic-code>
|
|
45
|
-
|
|
46
|
-
## Size
|
|
47
|
-
<sonic-code>
|
|
48
|
-
<template>
|
|
49
|
-
<sonic-button size="2xs">2Xs button</sonic-button>
|
|
50
|
-
<sonic-button size="xs">Xs button</sonic-button>
|
|
51
|
-
<sonic-button size="sm">Sm button</sonic-button>
|
|
52
|
-
<sonic-button size="md">Md button</sonic-button>
|
|
53
|
-
<sonic-button>Default button</sonic-button>
|
|
54
|
-
<sonic-button size="lg">Lg button</sonic-button>
|
|
55
|
-
<sonic-button size="xl">Xl button</sonic-button>
|
|
56
|
-
<sonic-button size="2xl">2Xl button</sonic-button>
|
|
57
|
-
</template>
|
|
58
|
-
</sonic-code>
|
|
59
|
-
|
|
60
|
-
## Shape
|
|
61
|
-
<sonic-code>
|
|
62
|
-
<template>
|
|
63
|
-
<sonic-button shape="circle"> 😂 </sonic-button>
|
|
64
|
-
<sonic-button shape="square"> 🚀 </sonic-button>
|
|
65
|
-
</template>
|
|
66
|
-
</sonic-code>
|
|
67
|
-
|
|
68
|
-
## Loading
|
|
69
|
-
The length of the button depends on the size of its content
|
|
70
|
-
<sonic-code>
|
|
71
|
-
<template>
|
|
72
|
-
<sonic-button loading></sonic-button>
|
|
73
|
-
<sonic-button loading>Loading button</sonic-button>
|
|
74
|
-
</template>
|
|
75
|
-
</sonic-code>
|
|
76
|
-
|
|
77
|
-
## Swap
|
|
78
|
-
<sonic-code>
|
|
79
|
-
<template>
|
|
80
|
-
<sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" shape="circle" variant="outline" class="mr-4">
|
|
81
|
-
<sonic-icon library="iconoir" swap="on" name="eye-empty"></sonic-icon>
|
|
82
|
-
<sonic-icon library="iconoir" swap="off" name="eye-off"></sonic-icon>
|
|
83
|
-
</sonic-button>
|
|
84
|
-
<sonic-button formDataProvider="button_swap_example" name="youpi" value="youpla" type="primary" variant="outline">
|
|
85
|
-
<sonic-icon library="iconoir" swap="on" slot="prefix" name="eye-empty"></sonic-icon>
|
|
86
|
-
<sonic-icon library="iconoir" swap="off" slot="prefix" name="eye-off"></sonic-icon>
|
|
87
|
-
Révélez
|
|
88
|
-
<span swap="off">...</span>
|
|
89
|
-
<span swap="on">moi !</span>
|
|
90
|
-
</sonic-button>
|
|
91
|
-
</template>
|
|
92
|
-
</sonic-code>
|
|
93
|
-
|
|
94
|
-
## Reset
|
|
95
|
-
<sonic-code>
|
|
96
|
-
<template>
|
|
97
|
-
<div formDataProvider="button-reset-demo" class="mb-2">
|
|
98
|
-
<sonic-checkbox name="aChexbox" value="AValueToSet">Set A value</sonic-checkbox><br>
|
|
99
|
-
<sonic-button reset>Reset current formDataProvider</sonic-button>
|
|
100
|
-
</div>
|
|
101
|
-
<sonic-button reset="button-reset-demo">Reset formDataProvider by name</sonic-button>
|
|
102
|
-
</template>
|
|
103
|
-
</sonic-code>
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
## GoBack
|
|
107
|
-
<sonic-code>
|
|
108
|
-
<template>
|
|
109
|
-
<sonic-button goBack type="primary" variant="outline" class="mr-4">
|
|
110
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
|
|
111
|
-
Retour classique
|
|
112
|
-
</sonic-button>
|
|
113
|
-
<sonic-button goBack="http://la-billetterie.net" type="primary" variant="outline" class="mr-4">
|
|
114
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-left"></sonic-icon>
|
|
115
|
-
Retour url prédéfinie
|
|
116
|
-
</sonic-button>
|
|
117
|
-
</template>
|
|
118
|
-
</sonic-code>
|
|
119
|
-
|
|
120
|
-
## Button with icon
|
|
121
|
-
<sonic-code>
|
|
122
|
-
<template>
|
|
123
|
-
<sonic-button goBack type="primary" variant="outline" class="mr-4">
|
|
124
|
-
<sonic-icon library="iconoir" slot="prefix" name="arrow-right" ></sonic-icon>
|
|
125
|
-
Button with icon
|
|
126
|
-
</sonic-button>
|
|
127
|
-
</template>
|
|
128
|
-
</sonic-code>
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
## Button group
|
|
132
|
-
<sonic-code>
|
|
133
|
-
<template>
|
|
134
|
-
<sonic-group label="Code promo" class="mr-4">
|
|
135
|
-
<sonic-input placeholder="Entrez votre code ici..."></sonic-input>
|
|
136
|
-
<sonic-button type="primary" shape="square">
|
|
137
|
-
<sonic-icon library="iconoir" library="iconoir" name="gift"></sonic-icon>
|
|
138
|
-
</sonic-button>
|
|
139
|
-
</sonic-group>
|
|
140
|
-
<sonic-divider size="lg"></sonic-divider>
|
|
141
|
-
<div class="text-lg mb-2">Choose a subscription</div>
|
|
142
|
-
<sonic-group formDataProvider="subscriptionData">
|
|
143
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="standard" type="default"
|
|
144
|
-
>😎 Standard</sonic-button
|
|
145
|
-
>
|
|
146
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
|
|
147
|
-
<sonic-button radio minWidth="10rem" name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
|
|
148
|
-
</sonic-group>
|
|
149
|
-
</template>
|
|
150
|
-
</sonic-code>
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
## Aria-label
|
|
154
|
-
<sonic-code>
|
|
155
|
-
<template>
|
|
156
|
-
<sonic-button data-aria-label="Custom aria label" type="primary" >
|
|
157
|
-
Button with aria label
|
|
158
|
-
</sonic-button>
|
|
159
|
-
<sonic-button data-aria-label="Custom aria label" href="https://google.fr" type="primary" >
|
|
160
|
-
Button link with aria label
|
|
161
|
-
</sonic-button>
|
|
162
|
-
</template>
|
|
163
|
-
</sonic-code>
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
## Custom styles & active states with tailwind
|
|
167
|
-
<sonic-code>
|
|
168
|
-
<template>
|
|
169
|
-
<div formDataProvider="subscriptionData2">
|
|
170
|
-
<sonic-button
|
|
171
|
-
class="bg-neutral-100 transition-all text-center text-lg text-neutral-400 rounded-md min-w-[8rem] [&[active]]:text-danger-content [&[active]]:min-w-[13rem] [&[active]]:bg-danger [&[active]]:font-black [&[active]]:rounded-full"
|
|
172
|
-
variant="unstyled"
|
|
173
|
-
checkable unique
|
|
174
|
-
name="subscription"
|
|
175
|
-
value="premium"
|
|
176
|
-
type="default">
|
|
177
|
-
<span swap="off" class="inline-block py-2 px-3" >subscribe</span>
|
|
178
|
-
<span swap="on" class="inline-block py-2 px-3" >⭐ Premium</span>
|
|
179
|
-
</sonic-button>
|
|
180
|
-
</div>
|
|
181
|
-
</template>
|
|
182
|
-
</sonic-code>
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
# Captcha
|
|
2
|
-
|
|
3
|
-
<sonic-code>
|
|
4
|
-
<template>
|
|
5
|
-
<sonic-captcha formDataProvider="captchaTestDataProvider" key="6Leq5V0iAAAAAB-41DlWN335jDlcIuXmhNtdd00t">
|
|
6
|
-
<sonic-submit serviceURL="https://reqres.in" endPoint="api/unknown" onclick>
|
|
7
|
-
<sonic-button class="mt-4">Submit with captcha</sonic-button>
|
|
8
|
-
</sonic-submit>
|
|
9
|
-
</sonic-captcha>
|
|
10
|
-
</template>
|
|
11
|
-
</sonic-code>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<sonic-code>
|
|
16
|
-
<template>
|
|
17
|
-
<sonic-captcha formDataProvider="captchaTestDataProvider">
|
|
18
|
-
<sonic-submit serviceURL="https://atelier.julien.supersoniks.pro" endPoint="php/some-service.php" onclick>
|
|
19
|
-
<sonic-button class="mt-4">Submit with captcha</sonic-button>
|
|
20
|
-
</sonic-submit>
|
|
21
|
-
</sonic-captcha>
|
|
22
|
-
</template>
|
|
23
|
-
</sonic-code>
|
|
24
|
-
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
# Card
|
|
2
|
-
|
|
3
|
-
## Type
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<div class="grid grid-cols-3 gap-3">
|
|
7
|
-
<sonic-card type="base">Base</sonic-card>
|
|
8
|
-
<sonic-card type="light">Light</sonic-card>
|
|
9
|
-
<sonic-card type="primary">Primary</sonic-card>
|
|
10
|
-
<sonic-card type="warning">Warning</sonic-card>
|
|
11
|
-
<sonic-card type="danger">Danger</sonic-card>
|
|
12
|
-
<sonic-card type="success">Success</sonic-card>
|
|
13
|
-
<sonic-card type="info">Info</sonic-card>
|
|
14
|
-
<sonic-card type="neutral">Neutral</sonic-card>
|
|
15
|
-
<sonic-card type="invert">Invert</sonic-card>
|
|
16
|
-
</div>
|
|
17
|
-
</template>
|
|
18
|
-
</sonic-code>
|
|
19
|
-
|
|
20
|
-
## Header
|
|
21
|
-
<sonic-code>
|
|
22
|
-
<template>
|
|
23
|
-
<div class="grid grid-cols-1 gap-3">
|
|
24
|
-
<sonic-card >
|
|
25
|
-
<sonic-card-header label="Header simple, titre géré via l'attribut : label" description="Description via l'attribut : description">
|
|
26
|
-
</sonic-card-header>
|
|
27
|
-
</sonic-card>
|
|
28
|
-
<sonic-card type="neutral">
|
|
29
|
-
<sonic-card-header label="Header composé">
|
|
30
|
-
<sonic-card-header-description>Description rendu via le composant : "sonic-card-header-description"</sonic-card-header-description>
|
|
31
|
-
<div slot="suffix" class="flex">
|
|
32
|
-
Suffix
|
|
33
|
-
</div>
|
|
34
|
-
</sonic-card-header>
|
|
35
|
-
</sonic-card>
|
|
36
|
-
<sonic-card type="invert">
|
|
37
|
-
<sonic-card-header>
|
|
38
|
-
<div>Header custom</div>
|
|
39
|
-
<div class="text-lg text-danger">Tout le contenu excepté l'icône ✈ passe par le slot du header</div>
|
|
40
|
-
<span slot="suffix" >✈</span>
|
|
41
|
-
</sonic-card-header>
|
|
42
|
-
</sonic-card>
|
|
43
|
-
</div>
|
|
44
|
-
</template>
|
|
45
|
-
</sonic-code>
|
|
46
|
-
|
|
47
|
-
## Main
|
|
48
|
-
<sonic-code>
|
|
49
|
-
<template>
|
|
50
|
-
<sonic-card >
|
|
51
|
-
<sonic-card-main >
|
|
52
|
-
<h3>Main area</h3>
|
|
53
|
-
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
|
|
54
|
-
<iframe width="560" height="315" src="https://www.youtube.com/embed/IZTOtyksyPs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
55
|
-
</sonic-card-main>
|
|
56
|
-
</sonic-card>
|
|
57
|
-
</template>
|
|
58
|
-
</sonic-code>
|
|
59
|
-
|
|
60
|
-
## Footer
|
|
61
|
-
<sonic-code>
|
|
62
|
-
<template>
|
|
63
|
-
<sonic-card >
|
|
64
|
-
<sonic-card-footer >
|
|
65
|
-
<div >
|
|
66
|
-
<h4 class="mb-0">Footer area</h4>
|
|
67
|
-
<small>Debitis deleniti eligendi natus dolorem aufdh.</small>
|
|
68
|
-
<div>
|
|
69
|
-
🛫 ✈ ✈ ✈ ✈ ✈ 🛬
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</sonic-card-footer>
|
|
73
|
-
</sonic-card>
|
|
74
|
-
</template>
|
|
75
|
-
</sonic-code>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
## Example of use
|
|
79
|
-
<sonic-code>
|
|
80
|
-
<template>
|
|
81
|
-
<sonic-card >
|
|
82
|
-
<sonic-card-header label="Header" description="Header description">
|
|
83
|
-
<sonic-icon library="iconoir" name="nav-arrow-right" slot="suffix" ></sonic-icon>
|
|
84
|
-
</sonic-card-header>
|
|
85
|
-
<sonic-card-main >
|
|
86
|
-
<sonic-image rounded ratio="11/4" src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg">
|
|
87
|
-
</sonic-image>
|
|
88
|
-
<p><b>Main</b> - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure id dolor debitis deleniti eligendi natus dolorem a commodi sunt dicta? Ipsa asperiores magni consequuntur dolor voluptatibus. Maxime, nemo? Facere, odio.</p>
|
|
89
|
-
</sonic-card-main>
|
|
90
|
-
<sonic-card-footer>
|
|
91
|
-
<div>
|
|
92
|
-
<i>Footer</i> - Amet consectetur adipisicing
|
|
93
|
-
</div>
|
|
94
|
-
</sonic-card-footer>
|
|
95
|
-
</sonic-card>
|
|
96
|
-
</template>
|
|
97
|
-
</sonic-code>
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# Divider
|
|
2
|
-
|
|
3
|
-
## Default
|
|
4
|
-
<sonic-code>
|
|
5
|
-
<template>
|
|
6
|
-
<sonic-divider></sonic-divider>
|
|
7
|
-
</template>
|
|
8
|
-
</sonic-code>
|
|
9
|
-
|
|
10
|
-
## Align
|
|
11
|
-
<sonic-code>
|
|
12
|
-
<template>
|
|
13
|
-
<sonic-divider label="Default centered label"></sonic-divider>
|
|
14
|
-
<sonic-divider label="Right" align="right"></sonic-divider>
|
|
15
|
-
<sonic-divider label="Center" align="center"></sonic-divider>
|
|
16
|
-
<sonic-divider label="Left" align="left"></sonic-divider>
|
|
17
|
-
</template>
|
|
18
|
-
</sonic-code>
|
|
19
|
-
|
|
20
|
-
## Size
|
|
21
|
-
<sonic-code>
|
|
22
|
-
<template>
|
|
23
|
-
<sonic-divider size="xs" label="xs"></sonic-divider>
|
|
24
|
-
<sonic-divider size="sm" label="sm"></sonic-divider>
|
|
25
|
-
<sonic-divider size="md" label="md"></sonic-divider>
|
|
26
|
-
<sonic-divider size="lg" label="lg"></sonic-divider>
|
|
27
|
-
</template>
|
|
28
|
-
</sonic-code>
|
|
29
|
-
|
|
30
|
-
## Custom
|
|
31
|
-
<sonic-code>
|
|
32
|
-
<template>
|
|
33
|
-
<sonic-divider><span class="mr-2">Lorem ipsum dolor sit amet</span><sonic-badge type="danger">+25</sonic-badge></sonic-divider>
|
|
34
|
-
</template>
|
|
35
|
-
</sonic-code>
|