@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,84 +0,0 @@
1
- # Radio
2
-
3
- ## Size
4
- <sonic-code>
5
- <template>
6
- <div class="grid gap-2" formDataProvider="radioSizeExemple">
7
- <sonic-radio name="size" value="2xs" size="2xs">2xs radio</sonic-radio>
8
- <sonic-radio name="size" value="xs" size="xs">xs radio</sonic-radio>
9
- <sonic-radio name="size" value="sm" size="sm">sm radio</sonic-radio>
10
- <sonic-radio name="size" value="default" >default radio</sonic-radio>
11
- <sonic-radio name="size" value="lg" size="lg">lg radio</sonic-radio>
12
- <sonic-radio name="size" value="xl" size="xl">xl radio</sonic-radio>
13
- <sonic-radio name="size" value="2xl" size="2xl">2xl radio</sonic-radio>
14
- </div>
15
- </template>
16
- </sonic-code>
17
-
18
- ## Checked
19
- <sonic-code>
20
- <template>
21
- <sonic-radio checked
22
- >Already checked radio
23
- </sonic-radio>
24
- </template>
25
- </sonic-code>
26
-
27
- ## Disabled
28
- <sonic-code>
29
- <template>
30
- <sonic-radio disabled
31
- >Disabled radio
32
- </sonic-radio>
33
- </template>
34
- </sonic-code>
35
-
36
- ## Disabled and checked
37
- <sonic-code>
38
- <template>
39
- <sonic-radio disabled checked
40
- >Disabled but already checked radio
41
- </sonic-radio>
42
- </template>
43
- </sonic-code>
44
-
45
- ## radio with link
46
- <sonic-code>
47
- <template>
48
- <sonic-radio name="link" value="link">radio with <sonic-link href="#" class="underline text-info">link</sonic-link>
49
- </template>
50
- </sonic-code>
51
-
52
-
53
- ## Example of use
54
- <sonic-code>
55
- <template>
56
- <sonic-subscriber dataProvider="jokeFilterRadio" class="text-xl my-4 block font-bold">
57
- Remove following jokes :
58
- <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
59
- </sonic-subscriber>
60
- <div formDataProvider="jokeFilterRadio" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
61
- <sonic-radio name="blacklistFlags" value="nsfw">nsfw</sonic-radio>
62
- <sonic-radio name="blacklistFlags" value="religious">religious</sonic-radio>
63
- <sonic-radio name="blacklistFlags" value="political">political</sonic-radio>
64
- <sonic-radio name="blacklistFlags" value="racist" checked >racist</sonic-radio>
65
- <sonic-radio name="blacklistFlags" value="sexist" >sexist</sonic-radio>
66
- <sonic-radio name="blacklistFlags" value="explicit">explicit</sonic-radio>
67
- </div>
68
- <sonic-queue
69
- lazyload
70
- dataProviderExpression="joke/Any?amount=10&lang=en"
71
- dataFilterProvider="jokeFilterRadio"
72
- serviceURL="https://v2.jokeapi.dev"
73
- key="jokes"
74
- >
75
- <template>
76
- <div class="border-0 border-b-[1px] border-b-neutral-300 py-3 leading-tight">
77
- <sonic-value key="joke"></sonic-value>
78
- <sonic-value key="setup" class="font-bold"></sonic-value><br>
79
- <sonic-value key="delivery"></sonic-value>
80
- </div>
81
- </template>
82
- </sonic-queue>
83
- </template>
84
- </sonic-code>
@@ -1,97 +0,0 @@
1
- # Select
2
-
3
- ## Options
4
- <sonic-code>
5
- <template>
6
- <div class="grid gap-3">
7
- <sonic-select>
8
- <option value="">No Selection</option>
9
- <option value="1">One</option>
10
- <option value="2" selected>Two (set by "tag")</option>
11
- <option value="3">Three</option>
12
- </sonic-select>
13
- <sonic-select options='[{"value":"", "wording":"Set options via \"attribute\""},
14
- {"value":"dark", "wording":"dark (set by \"attribute\")", "selected" : "true"}, {"value":"auto", "wording":"auto"}
15
- ]'>
16
- </sonic-select>
17
- </div>
18
- </template>
19
- </sonic-code>
20
-
21
- ## Size
22
- <sonic-code>
23
- <template>
24
- <div class="grid gap-3">
25
- <sonic-select size="2xs"><option>2xs</option></sonic-select>
26
- <sonic-select size="xs"><option>xs</option></sonic-select>
27
- <sonic-select size="sm"><option>sm</option></sonic-select>
28
- <sonic-select size="md"><option>md</option></sonic-select>
29
- <sonic-select size="default"><option>default</option></sonic-select>
30
- <sonic-select size="lg"><option>lg</option></sonic-select>
31
- <sonic-select size="xl"><option>xl</option></sonic-select>
32
- <sonic-select size="2xl"><option>2xl</option></sonic-select>
33
- </div>
34
- </template>
35
- </sonic-code>
36
-
37
-
38
- ## Multiple
39
- <sonic-code>
40
- <template>
41
- <div class="grid gap-3">
42
- <sonic-select multiple>
43
- <option value="">Choose a number</option>
44
- <option value="1">One</option>
45
- <option value="2">Two</option>
46
- <option value="3">Three</option>
47
- </sonic-select>
48
- </div>
49
- </template>
50
- </sonic-code>
51
-
52
-
53
- ## Disabled
54
- <sonic-code>
55
- <template>
56
- <div class="grid gap-3">
57
- <sonic-select disabled>
58
- <option value="">Choose a number</option>
59
- <option value="1">One</option>
60
- <option value="2">Two</option>
61
- <option value="3">Three</option>
62
- </sonic-select>
63
- </div>
64
- </template>
65
- </sonic-code>
66
-
67
- ## Example of use
68
- <sonic-code>
69
- <template>
70
- <sonic-select
71
- formDataProvider="select-filter"
72
- name="lang"
73
- value="fr"
74
- >
75
- <option value="fr">fr<option>
76
- <optionn value="en">en<option>
77
- </sonic-select>
78
- <sonic-subscriber dataProvider="select-filter" class="text-xl my-4 block font-bold">
79
- Blagues trouvées pour le code de langue"<span data-bind ::inner-html="$lang"></span>" :
80
- </sonic-subscriber>
81
- <sonic-queue
82
- lazyload
83
- dataProviderExpression="joke/Any?amount=10"
84
- dataFilterProvider="select-filter"
85
- serviceURL="https://v2.jokeapi.dev"
86
- key="jokes"
87
- >
88
- <template>
89
- <div class="border-0 border-b-[1px] border-b-neutral-300 border-dotted py-3">
90
- <div data-bind ::inner-html="$joke"></div>
91
- <div data-bind ::inner-html="$setup"></div>
92
- <div data-bind ::inner-html="$delivery"></div>
93
- </div>
94
- </template>
95
- </sonic-queue>
96
- </template>
97
- </sonic-code>
@@ -1,84 +0,0 @@
1
- # Switch
2
-
3
- ## Size
4
- <sonic-code>
5
- <template>
6
- <div class="grid gap-2" formDataProvider="switchSizeExemple">
7
- <sonic-switch name="size2xs" value="2xs" size="2xs">2xs switch</sonic-switch>
8
- <sonic-switch name="sizexs" value="xs" size="xs">xs switch</sonic-switch>
9
- <sonic-switch name="sizesm" value="sm" size="sm">sm switch</sonic-switch>
10
- <sonic-switch name="size" value="default" >default switch</sonic-switch>
11
- <sonic-switch name="sizelg" value="lg" size="lg">lg switch</sonic-switch>
12
- <sonic-switch name="sizexl" value="xl" size="xl">xl switch</sonic-switch>
13
- <sonic-switch name="size2xl" value="2xl" size="2xl">2xl switch</sonic-switch>
14
- </div>
15
- </template>
16
- </sonic-code>
17
-
18
- ## Checked
19
- <sonic-code>
20
- <template>
21
- <sonic-switch checked
22
- >Already checked switch
23
- </sonic-switch>
24
- </template>
25
- </sonic-code>
26
-
27
- ## Disabled
28
- <sonic-code>
29
- <template>
30
- <sonic-switch disabled
31
- >Disabled switch
32
- </sonic-switch>
33
- </template>
34
- </sonic-code>
35
-
36
- ## Disabled and checked
37
- <sonic-code>
38
- <template>
39
- <sonic-switch disabled checked
40
- >Disabled but already checked switch
41
- </sonic-switch>
42
- </template>
43
- </sonic-code>
44
-
45
- ## switch with link
46
- <sonic-code>
47
- <template>
48
- <sonic-switch name="link" value="link">switch with <sonic-link href="#" class="underline text-info">link</sonic-link>
49
- </template>
50
- </sonic-code>
51
-
52
-
53
- ## Example of use
54
- <sonic-code>
55
- <template>
56
- <sonic-subscriber dataProvider="jokeFilterswitch" class="text-xl my-4 block font-bold">
57
- Remove following jokes :
58
- <sonic-value key="blacklistFlags" class="block text-sm"></sonic-value>
59
- </sonic-subscriber>
60
- <div formDataProvider="jokeFilterswitch" class="grid grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 mt-2 mb-3">
61
- <sonic-switch name="blacklistFlags" value="nsfw">nsfw</sonic-switch>
62
- <sonic-switch name="blacklistFlags" value="religious">religious</sonic-switch>
63
- <sonic-switch name="blacklistFlags" value="political">political</sonic-switch>
64
- <sonic-switch name="blacklistFlags" value="racist" checked >racist</sonic-switch>
65
- <sonic-switch name="blacklistFlags" value="sexist" >sexist</sonic-switch>
66
- <sonic-switch name="blacklistFlags" value="explicit">explicit</sonic-switch>
67
- </div>
68
- <sonic-queue
69
- lazyload
70
- dataProviderExpression="joke/Any?amount=10&lang=en"
71
- dataFilterProvider="jokeFilterswitch"
72
- serviceURL="https://v2.jokeapi.dev"
73
- key="jokes"
74
- >
75
- <template>
76
- <div class="border-0 border-b-[1px] border-b-neutral-300 py-3 leading-tight">
77
- <sonic-value key="joke"></sonic-value>
78
- <sonic-value key="setup" class="font-bold"></sonic-value><br>
79
- <sonic-value key="delivery"></sonic-value>
80
- </div>
81
- </template>
82
- </sonic-queue>
83
- </template>
84
- </sonic-code>
@@ -1,65 +0,0 @@
1
- # Textarea
2
-
3
- <sonic-button type="info" size="sm" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp#midcontentadcontainer">
4
- <sonic-icon library="iconoir" name="open-new-window" slot="prefix" ></sonic-icon>
5
- Native attibutes list
6
- </sonic-button>
7
-
8
-
9
- ## Label
10
- <sonic-code>
11
- <template>
12
- <sonic-textarea label="Label"></sonic-textarea>
13
- </template>
14
- </sonic-code>
15
-
16
- ## Placeholder
17
- <sonic-code>
18
- <template>
19
- <sonic-textarea placeholder="placeholder"></sonic-textarea>
20
- </template>
21
- </sonic-code>
22
-
23
- ## Value
24
- <sonic-code>
25
- <template>
26
- <sonic-textarea value="value"></sonic-textarea>
27
- </template>
28
- </sonic-code>
29
-
30
- ## Required
31
- <sonic-code>
32
- <template>
33
- <sonic-textarea required label="Feedback on blur" placeholder="required" ></sonic-textarea>
34
- </template>
35
- </sonic-code>
36
-
37
- ## Rows
38
- <sonic-code>
39
- <template>
40
- <sonic-textarea rows="8"></sonic-textarea>
41
- </template>
42
- </sonic-code>
43
-
44
- ## Description
45
- <sonic-code>
46
- <template>
47
- <sonic-textarea description="Description goes here" ></sonic-textarea>
48
- </template>
49
- </sonic-code>
50
-
51
-
52
- ## Size
53
- <sonic-code>
54
- <template>
55
- <div class="grid gap-4">
56
- <sonic-textarea size="2xs" value="2xs"></sonic-textarea>
57
- <sonic-textarea size="xs" value="xs"></sonic-textarea>
58
- <sonic-textarea size="sm" value="sm"></sonic-textarea>
59
- <sonic-textarea value="md / default"></sonic-textarea>
60
- <sonic-textarea size="lg" value="lg"></sonic-textarea>
61
- <sonic-textarea size="xl" value="xl"></sonic-textarea>
62
- <sonic-textarea size="2xl" value="2xl"></sonic-textarea>
63
- </div>
64
- </template>
65
- </sonic-code>
@@ -1,75 +0,0 @@
1
- # Group
2
-
3
- ## Radio group
4
- <sonic-code>
5
- <template>
6
- <sonic-group formDataProvider="subscriptionData">
7
- <sonic-button radio name="subscription" value="standard" type="default">😎 Standard</sonic-button>
8
- <sonic-button radio checked name="subscription" value="premium" type="default">⭐ Premium</sonic-button>
9
- <sonic-button radio name="subscription" value="diamond" type="default">💎 Diamond</sonic-button>
10
- </sonic-group>
11
- </template>
12
- </sonic-code>
13
-
14
- ## Button group
15
- <sonic-code>
16
- <template>
17
- <sonic-group>
18
- <sonic-button type="info" target="_blank" href="https://wwws.airfrance.fr/">🗼Air France</sonic-button>
19
- <sonic-button type="success" target="_blank" href="https://www.airtahitinui.com/">🌴 Air Tahiti</sonic-button>
20
- <sonic-button type="danger" target="_blank" href="https://www.aircorsica.com/">💣 Air Corsica</sonic-button>
21
- </sonic-group>
22
- </template>
23
- </sonic-code>
24
-
25
- ## Input actions prefix
26
- <sonic-code>
27
- <template>
28
- <div class="grid grid-cols-3 gap-3">
29
- <sonic-group>
30
- <sonic-button type="info" shape="square">
31
- <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
32
- </sonic-button>
33
- <sonic-input placeholder="placeholder" ></sonic-input>
34
- </sonic-group>
35
- <sonic-group label="Label">
36
- <sonic-button type="info" shape="square">
37
- <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
38
- </sonic-button>
39
- <sonic-input ></sonic-input>
40
- </sonic-group>
41
- <sonic-group description="Description">
42
- <sonic-button type="info" shape="square">
43
- <sonic-icon library="iconoir" library="iconoir" name="info-empty"></sonic-icon>
44
- </sonic-button>
45
- <sonic-input ></sonic-input>
46
- </sonic-group>
47
- </div>
48
- </template>
49
- </sonic-code>
50
-
51
- ## Input actions suffix
52
- <sonic-code>
53
- <template>
54
- <div class="grid grid-cols-3 gap-3">
55
- <sonic-group>
56
- <sonic-input placeholder="placeholder" ></sonic-input>
57
- <sonic-button type="primary" shape="square">
58
- <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
59
- </sonic-button>
60
- </sonic-group>
61
- <sonic-group label="Label">
62
- <sonic-input ></sonic-input>
63
- <sonic-button type="primary" shape="square">
64
- <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
65
- </sonic-button>
66
- </sonic-group>
67
- <sonic-group description="Description">
68
- <sonic-input ></sonic-input>
69
- <sonic-button type="primary" shape="square">
70
- <sonic-icon library="iconoir" library="iconoir" name="check"></sonic-icon>
71
- </sonic-button>
72
- </sonic-group>
73
- </div>
74
- </template>
75
- </sonic-code>
@@ -1,125 +0,0 @@
1
- # Icon
2
-
3
-
4
- ## Custom
5
-
6
- <p >Icons located in the following folder : <span class="text-info">/svg/$prefix/$name.svg<span></p>
7
-
8
- <sonic-code customIconLibraryPath="/svg/$prefix/$name.svg"
9
- customIconDefaultPrefix="regular">
10
- <template>
11
- <sonic-scope customIconLibraryPath="/svg/$prefix/$name.svg"
12
- customIconDefaultPrefix="regular">
13
- <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
14
- <div class="text-center">
15
- <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
16
- <br>
17
- <div class="text-xs mt-1">regular</div>
18
- </div>
19
- <div class="text-center">
20
- <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
21
- <br>
22
- <div class="text-xs mt-1">solid</div>
23
- </div>
24
- <div class="text-center">
25
- <sonic-icon library="custom" name="plane"></sonic-icon>
26
- <br>
27
- <div class="text-xs mt-1">default prefix</div>
28
- </div>
29
- </div>
30
- </sonic-scope>
31
- </template>
32
- </sonic-code>
33
-
34
-
35
- ## External
36
- <sonic-code>
37
- <template>
38
- <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
39
- <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
40
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
41
- <br>
42
- <div class="text-xs mt-1">heroicons</div>
43
- </sonic-link>
44
- <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
45
- <sonic-icon library="iconoir" name="2x2-cell" size="lg"></sonic-icon>
46
- <br>
47
- <div class="text-xs mt-1">iconoir</div>
48
- </sonic-link>
49
- <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
50
- <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
51
- <br>
52
- <div class="text-xs mt-1">material design</div>
53
- </sonic-link>
54
- <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
55
- <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
56
- <br>
57
- <div class="text-xs mt-1">fontAwesome regular</div>
58
- </sonic-link>
59
- <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
60
- <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
61
- <br>
62
- <div class="text-xs mt-1">fontAwesome solid</div>
63
- </sonic-link>
64
- <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
65
- <sonic-icon library="feathers" name="activity" size="lg"></sonic-icon>
66
- <br>
67
- <div class="text-xs mt-1">feathers</div>
68
- </sonic-link>
69
- <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
70
- <sonic-icon library="lucide" name="album" size="lg"></sonic-icon>
71
- <br>
72
- <div class="text-xs mt-1">lucide</div>
73
- </sonic-link>
74
- </div>
75
- </template>
76
- </sonic-code>
77
-
78
- ## Size
79
- <sonic-code>
80
- <template>
81
- <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
82
- <div class="text-center">
83
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
84
- <br>
85
- <div class="text-xs mt-1">2xs</div>
86
- </div>
87
- <div class="text-center">
88
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
89
- <br>
90
- <div class="text-xs mt-1">xs</div>
91
- </div>
92
- <div class="text-center">
93
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
94
- <br>
95
- <div class="text-xs mt-1">sm</div>
96
- </div>
97
- <div class="text-center">
98
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
99
- <br>
100
- <div class="text-xs mt-1">default</div>
101
- </div>
102
- <div class="text-center">
103
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
104
- <br>
105
- <div class="text-xs mt-1">lg</div>
106
- </div>
107
- <div class="text-center">
108
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
109
- <br>
110
- <div class="text-xs mt-1">xl</div>
111
- </div>
112
- <div class="text-center">
113
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
114
- <br>
115
- <div class="text-xs mt-1">2xl</div>
116
- </div>
117
- <div class="text-center">
118
- <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
119
- <br>
120
- <div class="text-xs mt-1">3xl</div>
121
- </div>
122
- </div>
123
- </template>
124
- </sonic-code>
125
-
@@ -1 +0,0 @@
1
- {"core":{"cancel":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7 12.5L10 15.5L17 8.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","check":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5 13L9 17L19 7\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","emoji-puzzled":"<svg width=\"24px\" height=\"24px\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" ><path d=\"M2 12c0 5.523 4.477 10 10 10s10-4.477 10-10S17.523 2 12 2\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M11.5 15.5s1.5-2 4.5-2 4.5 2 4.5 2M3 4c0-2.754 4-2.754 4 0 0 1.967-2 1.64-2 4M5 11.01l.01-.011\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M17.5 9a.5.5 0 110-1 .5.5 0 010 1zM10.5 9a.5.5 0 110-1 .5.5 0 010 1z\" fill=\"#000\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>","info-empty":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 11.5V16.5\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 7.51L12.01 7.49889\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","loader":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-loader\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>","minus-small":"<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 12H6\" />\n</svg>\n","more-horiz":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M18 12.5C18.2761 12.5 18.5 12.2761 18.5 12C18.5 11.7239 18.2761 11.5 18 11.5C17.7239 11.5 17.5 11.7239 17.5 12C17.5 12.2761 17.7239 12.5 18 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M6 12.5C6.27614 12.5 6.5 12.2761 6.5 12C6.5 11.7239 6.27614 11.5 6 11.5C5.72386 11.5 5.5 11.7239 5.5 12C5.5 12.2761 5.72386 12.5 6 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","more-vert":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 18.5C12.2761 18.5 12.5 18.2761 12.5 18C12.5 17.7239 12.2761 17.5 12 17.5C11.7239 17.5 11.5 17.7239 11.5 18C11.5 18.2761 11.7239 18.5 12 18.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 6.5C12.2761 6.5 12.5 6.27614 12.5 6C12.5 5.72386 12.2761 5.5 12 5.5C11.7239 5.5 11.5 5.72386 11.5 6C11.5 6.27614 11.7239 6.5 12 6.5Z\" fill=\"currentColor\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","nav-arrow-down":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n","warning-circled-outline":"<svg width=\"24\" height=\"24\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 7L12 13\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 17.01L12.01 16.9989\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n"}}
@@ -1,107 +0,0 @@
1
- # Image
2
-
3
- ## Rounded
4
-
5
- <sonic-code>
6
- <template>
7
- <div class="grid gap-8 grid-cols-3 items-center">
8
- <sonic-image
9
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
10
- ratio="1/1"
11
- >
12
- </sonic-image>
13
- <sonic-image
14
- rounded="sm"
15
- ratio="1/1"
16
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
17
- >
18
- </sonic-image>
19
- <sonic-image
20
- rounded
21
- ratio="1/1"
22
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
23
- >
24
- </sonic-image>
25
- <sonic-image
26
- rounded="md"
27
- ratio="1/1"
28
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
29
- >
30
- </sonic-image>
31
- <sonic-image
32
- rounded="lg"
33
- ratio="1/1"
34
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
35
- >
36
- </sonic-image>
37
- <sonic-image
38
- rounded="full"
39
- ratio="1/1"
40
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
41
- >
42
- </sonic-image>
43
- </div>
44
- </template>
45
- </sonic-code>
46
-
47
- ## Ratio
48
-
49
- <sonic-code>
50
- <template>
51
- <div class="grid gap-8 grid-cols-2 items-center">
52
- <sonic-image
53
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
54
- >
55
- </sonic-image>
56
- <sonic-image
57
- ratio="16/9"
58
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
59
- >
60
- </sonic-image>
61
- <sonic-image
62
- ratio="1/1"
63
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
64
- >
65
- </sonic-image>
66
- <sonic-image
67
- ratio="2/3"
68
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
69
- >
70
- </sonic-image>
71
- </div>
72
- </template>
73
- </sonic-code>
74
-
75
- ## Object position
76
-
77
- <sonic-code>
78
- <template>
79
- <div class="grid gap-8 grid-cols-2 items-center">
80
- <sonic-image
81
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
82
- ratio="11/4"
83
- >
84
- </sonic-image>
85
- <sonic-image
86
- objectPosition="center top"
87
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
88
- ratio="11/4"
89
- >
90
- </sonic-image>
91
- </div>
92
- </template>
93
- </sonic-code>
94
-
95
- ## Cover
96
-
97
- <sonic-code>
98
- <template>
99
- <div class="h-96 relative">
100
- <sonic-image
101
- cover
102
- src="https://thegoodlife.fr/wp-content/uploads/sites/2/2022/03/compagnies-aeriennes-nostalgie-coeur-insert-03-dr.jpg"
103
- >
104
- </sonic-image>
105
- </div>
106
- </template>
107
- </sonic-code>