@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.
Files changed (216) hide show
  1. package/build-infos.json +1 -1
  2. package/concorde-core.bundle.js +101 -101
  3. package/concorde-core.es.js +187 -182
  4. package/dist/concorde-core.bundle.js +101 -101
  5. package/dist/concorde-core.es.js +187 -182
  6. package/index.html +0 -0
  7. package/package.json +1 -1
  8. package/scripts/create-search.js +0 -0
  9. package/scripts/generate-routes.js +0 -0
  10. package/src/core/_types/types.ts +0 -0
  11. package/src/core/components/functional/date/date.ts +0 -0
  12. package/src/core/components/functional/functional.ts +0 -0
  13. package/src/core/components/functional/if/if.md +0 -0
  14. package/src/core/components/functional/if/if.test.ts +0 -0
  15. package/src/core/components/functional/list/list.spec.ts +0 -0
  16. package/src/core/components/functional/queue/queue.demo.ts +0 -0
  17. package/src/core/components/functional/router/router.demo.ts +0 -0
  18. package/src/core/components/functional/router/router.md +0 -0
  19. package/src/core/components/functional/router/router.spec.ts +0 -0
  20. package/src/core/components/functional/router/router.ts +0 -0
  21. package/src/core/components/functional/sonic-scope/sonic-scope.ts +0 -0
  22. package/src/core/components/functional/states/states.demo.ts +0 -0
  23. package/src/core/components/functional/states/states.md +0 -0
  24. package/src/core/components/functional/states/states.spec.ts +0 -0
  25. package/src/core/components/functional/states/states.ts +0 -0
  26. package/src/core/components/functional/submit/submit.ts +0 -0
  27. package/src/core/components/functional/translation/translation.ts +0 -0
  28. package/src/core/components/ui/_css/scroll.ts +0 -0
  29. package/src/core/components/ui/_css/shadow.ts +0 -0
  30. package/src/core/components/ui/_css/size.ts +0 -0
  31. package/src/core/components/ui/_css/type.ts +0 -0
  32. package/src/core/components/ui/alert/alert.md +0 -0
  33. package/src/core/components/ui/alert/alert.ts +0 -0
  34. package/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  35. package/src/core/components/ui/badge/badge.md +0 -0
  36. package/src/core/components/ui/badge/badge.ts +0 -0
  37. package/src/core/components/ui/button/button.md +0 -0
  38. package/src/core/components/ui/button/button.ts +0 -0
  39. package/src/core/components/ui/captcha/captcha.md +0 -0
  40. package/src/core/components/ui/captcha/captcha.ts +0 -0
  41. package/src/core/components/ui/card/card-footer.ts +0 -0
  42. package/src/core/components/ui/card/card-header-descripton.ts +0 -0
  43. package/src/core/components/ui/card/card-header.ts +0 -0
  44. package/src/core/components/ui/card/card-main.ts +0 -0
  45. package/src/core/components/ui/card/card.md +0 -0
  46. package/src/core/components/ui/card/card.ts +0 -0
  47. package/src/core/components/ui/divider/divider.ts +0 -0
  48. package/src/core/components/ui/form/checkbox/checkbox.md +0 -0
  49. package/src/core/components/ui/form/checkbox/checkbox.ts +0 -0
  50. package/src/core/components/ui/form/css/form-control.ts +0 -0
  51. package/src/core/components/ui/form/fieldset/fieldset.ts +0 -0
  52. package/src/core/components/ui/form/fieldset/legend-description.ts +0 -0
  53. package/src/core/components/ui/form/fieldset/legend.ts +0 -0
  54. package/src/core/components/ui/form/form-layout/form-layout.md +0 -0
  55. package/src/core/components/ui/form/input/input.md +0 -0
  56. package/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -0
  57. package/src/core/components/ui/form/radio/radio.md +0 -0
  58. package/src/core/components/ui/form/radio/radio.ts +0 -0
  59. package/src/core/components/ui/form/select/select.md +0 -0
  60. package/src/core/components/ui/form/switch/switch.md +0 -0
  61. package/src/core/components/ui/form/switch/switch.ts +0 -0
  62. package/src/core/components/ui/form/textarea/textarea.ts +0 -0
  63. package/src/core/components/ui/icon/icons.ts +14 -3
  64. package/src/core/components/ui/image/image.md +0 -0
  65. package/src/core/components/ui/image/image.ts +0 -0
  66. package/src/core/components/ui/loader/loader.md +0 -0
  67. package/src/core/components/ui/loader/loader.ts +0 -0
  68. package/src/core/components/ui/loader/styles/fixed.ts +0 -0
  69. package/src/core/components/ui/loader/styles/inline.ts +0 -0
  70. package/src/core/components/ui/menu/menu.ts +0 -0
  71. package/src/core/components/ui/modal/modal-actions.ts +0 -0
  72. package/src/core/components/ui/modal/modal-close.ts +0 -0
  73. package/src/core/components/ui/modal/modal-subtitle.ts +0 -0
  74. package/src/core/components/ui/modal/modal-title.ts +0 -0
  75. package/src/core/components/ui/modal/modal.md +0 -0
  76. package/src/core/components/ui/pop/pop.md +0 -0
  77. package/src/core/components/ui/progress/progress.ts +0 -0
  78. package/src/core/components/ui/table/table-tbody.ts +0 -0
  79. package/src/core/components/ui/table/table-th.ts +0 -0
  80. package/src/core/components/ui/table/table.ts +0 -0
  81. package/src/core/components/ui/theme/theme-collection/core-variables.ts +0 -0
  82. package/src/core/components/ui/theme/theme-collection/dark.ts +0 -0
  83. package/src/core/components/ui/theme/theme-collection/light.ts +0 -0
  84. package/src/core/components/ui/theme/theme.ts +0 -0
  85. package/src/core/components/ui/toast/toast-item.ts +0 -0
  86. package/src/core/components/ui/tooltip/tooltip.ts +0 -0
  87. package/src/core/components/ui/ui.ts +0 -0
  88. package/src/core/directives/DataProvider.ts +0 -0
  89. package/src/core/directives/Wording.ts +0 -0
  90. package/src/core/mixins/Fetcher.ts +0 -0
  91. package/src/core/mixins/FormCheckable.ts +0 -0
  92. package/src/core/mixins/TemplatesContainer.ts +0 -0
  93. package/src/core/utils/HTML.ts +0 -0
  94. package/src/core/utils/LocationHandler.ts +0 -0
  95. package/src/core/utils/Objects.ts +0 -0
  96. package/src/core/utils/Utils.ts +0 -0
  97. package/src/core/utils/api.ts +0 -0
  98. package/src/core/utils/route.spec.ts +0 -0
  99. package/src/core/utils/route.ts +0 -0
  100. package/src/docs/code.ts +0 -0
  101. package/src/docs/docs.ts +0 -0
  102. package/src/docs/header/header.ts +0 -0
  103. package/src/docs/layout.ts +0 -0
  104. package/src/docs/navigation/navigation.ts +0 -0
  105. package/src/docs/search/docs-search.json +0 -0
  106. package/src/docs/search/markdown-renderer.ts +0 -0
  107. package/src/docs/search/page.ts +0 -0
  108. package/src/docs/search/search.ts +0 -0
  109. package/src/docs/tailwind/css/tailwind.css +0 -0
  110. package/src/docs/tailwind/css.d.ts +0 -0
  111. package/src/index.ts +0 -0
  112. package/src/test-utils/TestUtils.ts +0 -0
  113. package/src/tsconfig-model.json +0 -0
  114. package/src/tsconfig.json +294 -294
  115. package/tailwind.config.js +0 -0
  116. package/templates-test.html +0 -0
  117. package/vite/config.js +0 -0
  118. package/docs/assets/index-C0K6xugr.css +0 -1
  119. package/docs/assets/index-Dgl1lJQo.js +0 -4861
  120. package/docs/css/docs.css +0 -0
  121. package/docs/fonts/ClashGrotesk-Bold.eot +0 -0
  122. package/docs/fonts/ClashGrotesk-Bold.ttf +0 -0
  123. package/docs/fonts/ClashGrotesk-Bold.woff +0 -0
  124. package/docs/fonts/ClashGrotesk-Bold.woff2 +0 -0
  125. package/docs/fonts/ClashGrotesk-Extralight.eot +0 -0
  126. package/docs/fonts/ClashGrotesk-Extralight.ttf +0 -0
  127. package/docs/fonts/ClashGrotesk-Extralight.woff +0 -0
  128. package/docs/fonts/ClashGrotesk-Extralight.woff2 +0 -0
  129. package/docs/fonts/ClashGrotesk-Light.eot +0 -0
  130. package/docs/fonts/ClashGrotesk-Light.ttf +0 -0
  131. package/docs/fonts/ClashGrotesk-Light.woff +0 -0
  132. package/docs/fonts/ClashGrotesk-Light.woff2 +0 -0
  133. package/docs/fonts/ClashGrotesk-Medium.eot +0 -0
  134. package/docs/fonts/ClashGrotesk-Medium.ttf +0 -0
  135. package/docs/fonts/ClashGrotesk-Medium.woff +0 -0
  136. package/docs/fonts/ClashGrotesk-Medium.woff2 +0 -0
  137. package/docs/fonts/ClashGrotesk-Regular.eot +0 -0
  138. package/docs/fonts/ClashGrotesk-Regular.ttf +0 -0
  139. package/docs/fonts/ClashGrotesk-Regular.woff +0 -0
  140. package/docs/fonts/ClashGrotesk-Regular.woff2 +0 -0
  141. package/docs/fonts/ClashGrotesk-Semibold.eot +0 -0
  142. package/docs/fonts/ClashGrotesk-Semibold.ttf +0 -0
  143. package/docs/fonts/ClashGrotesk-Semibold.woff +0 -0
  144. package/docs/fonts/ClashGrotesk-Semibold.woff2 +0 -0
  145. package/docs/fonts/ClashGrotesk-Variable.eot +0 -0
  146. package/docs/fonts/ClashGrotesk-Variable.ttf +0 -0
  147. package/docs/fonts/ClashGrotesk-Variable.woff +0 -0
  148. package/docs/fonts/ClashGrotesk-Variable.woff2 +0 -0
  149. package/docs/img/concorde-icon.svg +0 -5
  150. package/docs/img/concorde-logo.svg +0 -1
  151. package/docs/img/concorde.png +0 -0
  152. package/docs/img/concorde_def.png +0 -0
  153. package/docs/img/concorde_seuil.png.webp +0 -0
  154. package/docs/img/concorde_seuil_invert.png +0 -0
  155. package/docs/img/paul_metrand.jpg +0 -0
  156. package/docs/img/paul_metrand_xs.jpg +0 -0
  157. package/docs/index.html +0 -93
  158. package/docs/src/core/components/functional/date/date.md +0 -290
  159. package/docs/src/core/components/functional/fetch/fetch.md +0 -117
  160. package/docs/src/core/components/functional/if/if.md +0 -16
  161. package/docs/src/core/components/functional/list/list.md +0 -199
  162. package/docs/src/core/components/functional/mix/mix.md +0 -41
  163. package/docs/src/core/components/functional/queue/queue.md +0 -87
  164. package/docs/src/core/components/functional/router/router.md +0 -129
  165. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  166. package/docs/src/core/components/functional/sdui/example.json +0 -99
  167. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  168. package/docs/src/core/components/functional/states/states.md +0 -87
  169. package/docs/src/core/components/functional/submit/submit.md +0 -83
  170. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  171. package/docs/src/core/components/functional/value/value.md +0 -35
  172. package/docs/src/core/components/ui/alert/alert.md +0 -121
  173. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  174. package/docs/src/core/components/ui/badge/badge.md +0 -127
  175. package/docs/src/core/components/ui/button/button.md +0 -182
  176. package/docs/src/core/components/ui/captcha/captcha.md +0 -24
  177. package/docs/src/core/components/ui/card/card.md +0 -97
  178. package/docs/src/core/components/ui/divider/divider.md +0 -35
  179. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -104
  180. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  181. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  182. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  183. package/docs/src/core/components/ui/form/input/input.md +0 -167
  184. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -131
  185. package/docs/src/core/components/ui/form/radio/radio.md +0 -84
  186. package/docs/src/core/components/ui/form/select/select.md +0 -97
  187. package/docs/src/core/components/ui/form/switch/switch.md +0 -84
  188. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  189. package/docs/src/core/components/ui/group/group.md +0 -75
  190. package/docs/src/core/components/ui/icon/icon.md +0 -125
  191. package/docs/src/core/components/ui/icon/icons.json +0 -1
  192. package/docs/src/core/components/ui/image/image.md +0 -107
  193. package/docs/src/core/components/ui/link/link.md +0 -43
  194. package/docs/src/core/components/ui/loader/loader.md +0 -67
  195. package/docs/src/core/components/ui/menu/menu.md +0 -288
  196. package/docs/src/core/components/ui/modal/modal.md +0 -123
  197. package/docs/src/core/components/ui/pop/pop.md +0 -96
  198. package/docs/src/core/components/ui/progress/progress.md +0 -63
  199. package/docs/src/core/components/ui/table/table.md +0 -455
  200. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  201. package/docs/src/docs/_core-concept/overview.md +0 -57
  202. package/docs/src/docs/_core-concept/subscriber.md +0 -76
  203. package/docs/src/docs/_getting-started/concorde-outside.md +0 -143
  204. package/docs/src/docs/_getting-started/create-a-component.md +0 -137
  205. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -174
  206. package/docs/src/docs/_getting-started/pubsub.md +0 -150
  207. package/docs/src/docs/_getting-started/start.md +0 -39
  208. package/docs/src/docs/_getting-started/theming.md +0 -91
  209. package/docs/src/docs/search/docs-search.json +0 -3917
  210. package/docs/src/tag-list.json +0 -1
  211. package/docs/src/tsconfig-model.json +0 -23
  212. package/docs/src/tsconfig.json +0 -918
  213. package/docs/svg/regular/plane.svg +0 -1
  214. package/docs/svg/solid/plane.svg +0 -1
  215. package/php/get-challenge.php +0 -34
  216. 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>
@@ -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>