@supersoniks/concorde 4.7.3 → 4.8.0

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 (152) hide show
  1. package/README.md +1 -1
  2. package/ai/AGENTS.md +4 -0
  3. package/ai/cursor/rules/concorde.mdc +11 -1
  4. package/ai/jetbrains/rules/concorde.md +8 -0
  5. package/ai/skills/concorde/SKILL.md +29 -2
  6. package/ai/skills/concorde-scope/SKILL.md +2 -2
  7. package/build-infos.json +1 -1
  8. package/concorde-core.bundle.js +289 -289
  9. package/concorde-core.es.js +4839 -4546
  10. package/dist/concorde-core.bundle.js +289 -289
  11. package/dist/concorde-core.es.js +4839 -4546
  12. package/dist/docs-mock-api-sw.js +19 -0
  13. package/dist/docs-mock-api-sw.js.map +2 -2
  14. package/dist/robots.txt +2 -0
  15. package/docs/assets/index-wyNMyWT9.js +11196 -0
  16. package/docs/docs-mock-api-sw.js +19 -0
  17. package/docs/docs-mock-api-sw.js.map +2 -2
  18. package/docs/index.html +1 -1
  19. package/docs/robots.txt +2 -0
  20. package/package.json +9 -1
  21. package/public/docs-mock-api-sw.js +19 -0
  22. package/public/docs-mock-api-sw.js.map +2 -2
  23. package/public/robots.txt +2 -0
  24. package/src/core/components/functional/example/example.ts +3 -3
  25. package/src/core/components/ui/captcha/captcha.md +0 -12
  26. package/src/core/components/ui/icon/icon.ts +17 -2
  27. package/src/core/components/ui/menu/menu.ts +12 -3
  28. package/src/core/decorators/api.post.spec.ts +293 -0
  29. package/src/core/decorators/api.spec.ts +7 -14
  30. package/src/core/decorators/api.ts +648 -15
  31. package/src/core/decorators/subscriber/bind.ts +13 -5
  32. package/src/core/decorators/subscriber/dynamicPath.spec.ts +53 -0
  33. package/src/core/decorators/subscriber/dynamicPath.ts +23 -1
  34. package/src/core/decorators/subscriber/handle.ts +3 -1
  35. package/src/core/decorators/subscriber/onAssign.ts +10 -2
  36. package/src/core/decorators/subscriber/publish.ts +12 -2
  37. package/src/core/utils/PublisherProxy.ts +95 -11
  38. package/src/core/utils/api.ts +72 -3
  39. package/src/core/utils/dpOptions.spec.ts +56 -0
  40. package/src/core/utils/endpoint.ts +3 -3
  41. package/src/decorators.ts +17 -1
  42. package/src/docs/_core-concept/dataFlow.md +9 -3
  43. package/src/docs/_decorators/bind.md +2 -2
  44. package/src/docs/_decorators/get.md +13 -4
  45. package/src/docs/_decorators/handle.md +5 -1
  46. package/src/docs/_decorators/on-assign.md +2 -0
  47. package/src/docs/_decorators/patch.md +45 -0
  48. package/src/docs/_decorators/post.md +93 -0
  49. package/src/docs/_decorators/publish.md +1 -1
  50. package/src/docs/_decorators/put.md +43 -0
  51. package/src/docs/_decorators/subscribe.md +4 -1
  52. package/src/docs/_directives/sub.md +1 -1
  53. package/src/docs/_getting-started/my-first-component.md +1 -1
  54. package/src/docs/_misc/api-configuration.md +3 -1
  55. package/src/docs/_misc/dataProviderKey.md +2 -2
  56. package/src/docs/_misc/dynamic-path.md +71 -0
  57. package/src/docs/_misc/endpoint.md +5 -3
  58. package/src/docs/components/docs-demo-sources.ts +102 -3
  59. package/src/docs/components/docs-lit-demo-raw.ts +2 -26
  60. package/src/docs/components/docs-lit-demo.ts +9 -42
  61. package/src/docs/components/docs-source-excerpt.ts +53 -0
  62. package/src/docs/components/docs-source-link.ts +24 -8
  63. package/src/docs/components/docs-source-raw.ts +34 -0
  64. package/src/docs/example/decorators-demo-geo.ts +2 -2
  65. package/src/docs/example/decorators-demo-post.ts +249 -0
  66. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +5 -5
  67. package/src/docs/example/decorators-demo.ts +1 -0
  68. package/src/docs/example/docs-api-config-demos.ts +5 -5
  69. package/src/docs/mock-api/router.ts +20 -0
  70. package/src/docs/navigation/navigation.ts +16 -0
  71. package/src/docs/search/docs-search.json +540 -15
  72. package/src/tsconfig.json +24 -0
  73. package/src/tsconfig.tsbuildinfo +1 -1
  74. package/vite.config.mts +1 -1
  75. package/docs/assets/index-D9pxaQYK.js +0 -7508
  76. package/docs/src/core/components/functional/date/date.md +0 -290
  77. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  78. package/docs/src/core/components/functional/if/if.md +0 -9
  79. package/docs/src/core/components/functional/list/list.md +0 -65
  80. package/docs/src/core/components/functional/mix/mix.md +0 -41
  81. package/docs/src/core/components/functional/queue/queue.md +0 -72
  82. package/docs/src/core/components/functional/router/router.md +0 -94
  83. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  84. package/docs/src/core/components/functional/sdui/example.json +0 -99
  85. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  86. package/docs/src/core/components/functional/states/states.md +0 -87
  87. package/docs/src/core/components/functional/submit/submit.md +0 -114
  88. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  89. package/docs/src/core/components/functional/value/value.md +0 -35
  90. package/docs/src/core/components/ui/alert/alert.md +0 -121
  91. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  92. package/docs/src/core/components/ui/badge/badge.md +0 -127
  93. package/docs/src/core/components/ui/button/button.md +0 -182
  94. package/docs/src/core/components/ui/captcha/captcha.md +0 -24
  95. package/docs/src/core/components/ui/card/card.md +0 -97
  96. package/docs/src/core/components/ui/divider/divider.md +0 -35
  97. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  98. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  99. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  100. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  101. package/docs/src/core/components/ui/form/input/input.md +0 -142
  102. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  103. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  104. package/docs/src/core/components/ui/form/select/select.md +0 -71
  105. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  106. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  107. package/docs/src/core/components/ui/group/group.md +0 -75
  108. package/docs/src/core/components/ui/icon/icon.md +0 -125
  109. package/docs/src/core/components/ui/icon/icons.json +0 -1
  110. package/docs/src/core/components/ui/image/image.md +0 -107
  111. package/docs/src/core/components/ui/link/link.md +0 -43
  112. package/docs/src/core/components/ui/loader/loader.md +0 -55
  113. package/docs/src/core/components/ui/menu/menu.md +0 -329
  114. package/docs/src/core/components/ui/modal/modal.md +0 -119
  115. package/docs/src/core/components/ui/pop/pop.md +0 -96
  116. package/docs/src/core/components/ui/progress/progress.md +0 -63
  117. package/docs/src/core/components/ui/table/table.md +0 -455
  118. package/docs/src/core/components/ui/toast/toast.md +0 -166
  119. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  120. package/docs/src/docs/_core-concept/dataFlow.md +0 -73
  121. package/docs/src/docs/_core-concept/overview.md +0 -57
  122. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  123. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -79
  124. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  125. package/docs/src/docs/_decorators/bind.md +0 -167
  126. package/docs/src/docs/_decorators/get.md +0 -68
  127. package/docs/src/docs/_decorators/handle.md +0 -171
  128. package/docs/src/docs/_decorators/on-assign.md +0 -388
  129. package/docs/src/docs/_decorators/publish.md +0 -55
  130. package/docs/src/docs/_decorators/subscribe.md +0 -97
  131. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  132. package/docs/src/docs/_directives/sub.md +0 -91
  133. package/docs/src/docs/_getting-started/ai-agents.md +0 -56
  134. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  135. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  136. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  137. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  138. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  139. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  140. package/docs/src/docs/_getting-started/start.md +0 -47
  141. package/docs/src/docs/_getting-started/theming.md +0 -91
  142. package/docs/src/docs/_misc/api-configuration.md +0 -79
  143. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  144. package/docs/src/docs/_misc/docs-mock-api.md +0 -60
  145. package/docs/src/docs/_misc/endpoint.md +0 -43
  146. package/docs/src/docs/_misc/html-integration.md +0 -13
  147. package/docs/src/docs/search/docs-search.json +0 -8532
  148. package/docs/src/tag-list.json +0 -1
  149. package/docs/src/tsconfig-model.json +0 -23
  150. package/docs/src/tsconfig.json +0 -1050
  151. package/php/get-challenge.php +0 -34
  152. package/php/some-service.php +0 -42
@@ -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="/docs-mock-api" 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/aqz-KE-bpKQ" title="Big Buck Bunny (Blender Foundation)" 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>
@@ -1,77 +0,0 @@
1
- # Checkbox
2
-
3
- ## Size
4
- <sonic-code>
5
- <template>
6
- <div class="grid gap-2">
7
- <sonic-checkbox size="2xs">2xs checkbox</sonic-checkbox>
8
- <sonic-checkbox size="xs">xs checkbox</sonic-checkbox>
9
- <sonic-checkbox size="sm">sm checkbox</sonic-checkbox>
10
- <sonic-checkbox>default checkbox</sonic-checkbox>
11
- <sonic-checkbox size="lg">lg checkbox</sonic-checkbox>
12
- <sonic-checkbox size="xl">xl checkbox</sonic-checkbox>
13
- <sonic-checkbox size="2xl">2xl checkbox</sonic-checkbox>
14
- </div>
15
- </template>
16
- </sonic-code>
17
-
18
- ## Checked
19
- <sonic-code>
20
- <template>
21
- <sonic-checkbox checked
22
- >Already checked checkbox
23
- </sonic-checkbox>
24
- </template>
25
- </sonic-code>
26
-
27
- ## Disabled
28
- <sonic-code>
29
- <template>
30
- <sonic-checkbox disabled
31
- >Disabled checkbox
32
- </sonic-checkbox>
33
- </template>
34
- </sonic-code>
35
-
36
- ## Disabled and checked
37
- <sonic-code>
38
- <template>
39
- <sonic-checkbox disabled checked
40
- >Disabled but already checked checkbox
41
- </sonic-checkbox>
42
- </template>
43
- </sonic-code>
44
-
45
- ## Checkbox with link
46
- <sonic-code>
47
- <template>
48
- <sonic-checkbox>Checkbox with <sonic-link href="#" class="underline text-info">link</sonic-link>
49
- </template>
50
- </sonic-code>
51
-
52
- ## Check all checkbox
53
- <sonic-code>
54
- <template>
55
- <div formDataProvider="checkbox-check-all-demo" dataProvider="checkbox-check-all-demo">
56
- <sonic-checkbox name='someSharedName' value="all" checksAll>All</sonic-checkbox>
57
- <sonic-divider></sonic-divider>
58
- <div class="grid gap-2">
59
- <sonic-checkbox name="someSharedName" value="foo">Foo</sonic-checkbox>
60
- <sonic-checkbox name="someSharedName" value="bar">Bar</sonic-checkbox>
61
- </div>
62
- <sonic-divider></sonic-divider>
63
- <div>
64
- <span>Enabling unsetOnDisconect ensures that outdated or irrelevant values are not retained in the form state once their associated inputs are no longer rendered.</span>
65
- <div id="prunable-checkbox" class="flex gap-2 items-center">
66
- <sonic-checkbox name="someSharedName" value="baz">Baz</sonic-checkbox>
67
- <sonic-button variant="ghost" shape="circle" unique name="toggleCheckboxExistance" onclick="document.getElementById('prunable-checkbox').remove();" value="true"><sonic-icon library="fontAwesome" prefix="solid" name="trash"></sonic-icon></sonic-button>
68
- </div>
69
- </div>
70
- </template>
71
- </sonic-code>
72
-
73
- ## Example of use — blacklist + queue
74
-
75
- Checked **`blacklistFlags`** values are sent to the mock API (`?blacklistFlags=racist,sexist,…`), which excludes jokes whose **`flags`** match (see `filterDocsJokes` in `src/docs/mock-api/fixtures.ts`).
76
-
77
- <docs-lit-demo for="docs-joke-blacklist-demo"></docs-lit-demo>
@@ -1,129 +0,0 @@
1
- # Fieldset
2
-
3
- ## Variant
4
- <sonic-code>
5
- <template>
6
- <sonic-fieldset variant="default" >
7
- Default
8
- </sonic-fieldset>
9
- <sonic-fieldset variant="ghost" >
10
- Ghost
11
- </sonic-fieldset>
12
- <sonic-fieldset variant="shadow" >
13
- Shadow
14
- </sonic-fieldset>
15
- </template>
16
- </sonic-code>
17
-
18
- ## Legend
19
- <sonic-code>
20
- <template>
21
- <sonic-fieldset>
22
- <sonic-legend label="Legend via attribut : label" description="Description via attribut : description">
23
- </sonic-legend>
24
- </sonic-fieldset>
25
- <sonic-fieldset>
26
- <sonic-legend iconLibrary="iconoir" iconName="pin-alt">
27
- Custom legend via <b>slot</b>
28
- <sonic-legend-description>
29
- Description via composant : sonic-legend-description
30
- </sonic-legend-description>
31
- </sonic-legend>
32
- </sonic-fieldset>
33
- </template>
34
- </sonic-code>
35
-
36
-
37
- ## Short hand
38
- <sonic-code>
39
- <template>
40
- <sonic-fieldset
41
- label="All props on fieldset tag"
42
- description="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
43
- iconLibrary="iconoir"
44
- iconName="user">
45
- </sonic-fieldset>
46
- </template>
47
- </sonic-code>
48
-
49
- ## Example of use
50
- <sonic-code>
51
- <template>
52
- <sonic-div formDataProvider="user_create">
53
- <form action="/inscription?lang=fr" method="POST" class="mb-20" accept-charset="UTF-8" id="youpla">
54
- <sonic-fieldset form="formid" collapsible="true" collapsed="false">
55
- <sonic-legend iconLibrary="iconoir" iconName="user">
56
- Informations personnelles
57
- <span slot="description">Description du fieldset lorem ipsum dolor</span>
58
- <sonic-pop class="inline-block" slot="suffix">
59
- <sonic-button shape="circle" variant="ghost">
60
- <sonic-icon library="iconoir" size="lg" name="more-vert"></sonic-icon
61
- ></sonic-button>
62
- <sonic-menu slot="content" minWidth="12rem">
63
- <sonic-menu-item>Mentions légales</sonic-menu-item>
64
- <sonic-menu-item>Conditions générales d'utilisation</sonic-menu-item>
65
- </sonic-menu>
66
- </sonic-pop>
67
- </sonic-legend>
68
- <sonic-form-layout>
69
- <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
70
- <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
71
- <sonic-select autocomplete="sex" label="Sexe" name="sexe">
72
- <option value="" selected="selected">- Sélectionner -</option>
73
- <option value="-">Je préfère ne pas le dire</option>
74
- <option value="Homme">Homme</option>
75
- <option value="Femme">Femme</option>
76
- </sonic-select>
77
- <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
78
- <sonic-divider></sonic-divider>
79
- <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
80
- <sonic-input
81
- autocomplete="email"
82
- label="Confirmer votre e-mail"
83
- name="email_confirmation"
84
- type="email"
85
- ></sonic-input>
86
- <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
87
- <sonic-input
88
- autocomplete="new-password"
89
- label="Confirmer votre mot de passe"
90
- name="password_confirmation"
91
- type="password"
92
- ></sonic-input>
93
- </sonic-form-layout>
94
- </sonic-fieldset>
95
- <sonic-fieldset form="formid" collapsible="true" collapsed="false">
96
- <sonic-legend iconLibrary="iconoir" iconName="pin-alt"> Coordonnées </sonic-legend>
97
- <sonic-form-layout>
98
- <sonic-input autocomplete="postal-code" label="Code postal" name="cp"></sonic-input>
99
- <sonic-input autocomplete="address-level2" label="Ville" name="ville"></sonic-input>
100
- </sonic-form-layout>
101
- </sonic-fieldset>
102
- <div class="">
103
- <sonic-button submit type="primary">
104
- <sonic-icon library="iconoir" name="check"></sonic-icon>
105
- S'inscrire
106
- </sonic-button>
107
- <sonic-tooltip class="inline-flex" label="Vous êtes sûr(e) ? 🙄">
108
- <sonic-button size="sm" variant="ghost"> Continuer sans m'inscrire </sonic-button>
109
- </sonic-tooltip>
110
- </div>
111
- </form>
112
- <div dataProvider="user_create" class="my-6 text-neutral-600 p-5 rounded-xl shadow-lg">
113
- <div class="font-bold text-lg text-neutral-400">Submitted informations...</div>
114
- <div class="text-lg my-2">
115
- <sonic-value key="nom" class="font-bold"></sonic-value>
116
- <sonic-value key="prenom"></sonic-value>
117
- </div>
118
- <div class="text-sm">
119
- <sonic-value key="sexe"></sonic-value>
120
- <sonic-value key="date_naissance"></sonic-value>
121
- </div>
122
- <div class="text-sm">
123
- <sonic-value key="email"></sonic-value>
124
- <sonic-value key="cp"></sonic-value>
125
- <sonic-value key="ville"></sonic-value></div>
126
- </div>
127
- </sonic-div>
128
- </template>
129
- </sonic-code>
@@ -1,77 +0,0 @@
1
- # Form-actions
2
-
3
- ## Left by default
4
-
5
- <sonic-code>
6
- <template>
7
- <form>
8
- <sonic-form-layout>
9
- <sonic-input label="First name"></sonic-input>
10
- <sonic-input label="Last name"></sonic-input>
11
- <sonic-form-actions>
12
- <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
13
- <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
14
- </sonic-form-actions>
15
- </sonic-form-layout>
16
- </form >
17
- </template>
18
- </sonic-code>
19
-
20
- ## Justify
21
-
22
- <sonic-code>
23
- <template>
24
- <form>
25
- <sonic-form-layout>
26
- <sonic-input label="First name"></sonic-input>
27
- <sonic-input label="Last name"></sonic-input>
28
- <sonic-form-actions justify="flex-end">
29
- <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
30
- <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
31
- </sonic-form-actions>
32
- </sonic-form-layout>
33
- </form >
34
- </template>
35
- </sonic-code>
36
-
37
- ## Direction
38
-
39
- <sonic-code>
40
- <template>
41
- <form>
42
- <sonic-form-layout>
43
- <sonic-input label="First name"></sonic-input>
44
- <sonic-input label="Last name"></sonic-input>
45
- <sonic-form-actions direction="row-reverse">
46
- <sonic-button type="success"><sonic-icon name="check" library="iconoir"></sonic-icon> Submit</sonic-button>
47
- <sonic-button type="danger" variant="ghost"><sonic-icon name="undo" library="iconoir"></sonic-icon> Cancel</sonic-button>
48
- </sonic-form-actions>
49
- </sonic-form-layout>
50
- </form >
51
- </template>
52
- </sonic-code>
53
-
54
- ## Center
55
-
56
- <sonic-code>
57
- <template>
58
- <form>
59
- <sonic-form-layout>
60
- <sonic-input label="First name"></sonic-input>
61
- <sonic-input label="Last name"></sonic-input>
62
- <sonic-form-actions justify="center" >
63
- <sonic-button type="info" minWidth="12rem">
64
- <sonic-icon name="nav-arrow-left" library="iconoir" slot="prefix"></sonic-icon>
65
- Left seats
66
- </sonic-button>
67
- <sonic-divider vertical></sonic-divider>
68
- <sonic-button type="info" minWidth="12rem">
69
- <sonic-icon name="nav-arrow-right" library="iconoir" slot="suffix"></sonic-icon>
70
- Right seats
71
- </sonic-button>
72
- </sonic-form-actions>
73
- </sonic-form-layout>
74
- </form >
75
- </template>
76
- </sonic-code>
77
-
@@ -1,44 +0,0 @@
1
- # Form-layout
2
-
3
- <sonic-code>
4
- <template>
5
- <form>
6
- <sonic-form-layout>
7
- <sonic-input autocomplete="family-name" label="Nom" name="nom"></sonic-input>
8
- <sonic-input autocomplete="given-name" label="Prénom" name="prenom"></sonic-input>
9
- <sonic-select autocomplete="sex" label="Sexe" name="sexe">
10
- <option value="" selected="selected">- Sélectionner -</option>
11
- <option value="-">Je préfère ne pas le dire</option>
12
- <option value="Homme">Homme</option>
13
- <option value="Femme">Femme</option>
14
- </sonic-select>
15
- <sonic-input autocomplete="bday" label="Date de naissance" name="date_naissance" type="date"></sonic-input>
16
- <sonic-divider></sonic-divider>
17
- <sonic-input autocomplete="email" label="e-mail" name="email" type="email"></sonic-input>
18
- <sonic-input
19
- autocomplete="email"
20
- label="Confirmer votre e-mail"
21
- name="email_confirmation"
22
- type="email"
23
- ></sonic-input>
24
- <sonic-input autocomplete="new-password" label="Mot de passe" name="password" type="password"></sonic-input>
25
- <sonic-input
26
- autocomplete="new-password"
27
- label="Confirmer votre mot de passe"
28
- name="password_confirmation"
29
- type="password"
30
- ></sonic-input>
31
- <sonic-divider></sonic-divider>
32
- <sonic-textarea label="Message" rows="5">
33
- </sonic-textarea>
34
- <sonic-switch>Activer une superbe option</sonic-switch>
35
- <sonic-checkbox>Inscription à la newsletter</sonic-checkbox>
36
- <sonic-checkbox>J'ai lu et accepte les <sonic-link href="#" class="underline">Conditions générales de ventes</sonic-link></sonic-checkbox>
37
- <sonic-form-actions>
38
- <sonic-button type="success">Valider</sonic-button>
39
- </sonic-form-actions>
40
- </sonic-form-layout>
41
- </form >
42
- </template>
43
- </sonic-code>
44
-