@supersoniks/concorde 4.7.4 → 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 (143) hide show
  1. package/README.md +1 -1
  2. package/ai/cursor/rules/concorde.mdc +1 -1
  3. package/ai/skills/concorde-scope/SKILL.md +2 -2
  4. package/build-infos.json +1 -1
  5. package/concorde-core.bundle.js +289 -289
  6. package/concorde-core.es.js +4837 -4544
  7. package/dist/concorde-core.bundle.js +289 -289
  8. package/dist/concorde-core.es.js +4837 -4544
  9. package/dist/docs-mock-api-sw.js +19 -0
  10. package/dist/docs-mock-api-sw.js.map +2 -2
  11. package/docs/assets/index-wyNMyWT9.js +11196 -0
  12. package/docs/docs-mock-api-sw.js +19 -0
  13. package/docs/docs-mock-api-sw.js.map +2 -2
  14. package/docs/index.html +1 -1
  15. package/package.json +9 -1
  16. package/public/docs-mock-api-sw.js +19 -0
  17. package/public/docs-mock-api-sw.js.map +2 -2
  18. package/src/core/components/functional/example/example.ts +3 -3
  19. package/src/core/components/ui/icon/icon.ts +17 -2
  20. package/src/core/components/ui/menu/menu.ts +12 -3
  21. package/src/core/decorators/api.post.spec.ts +293 -0
  22. package/src/core/decorators/api.spec.ts +6 -6
  23. package/src/core/decorators/api.ts +643 -12
  24. package/src/core/decorators/subscriber/bind.ts +13 -5
  25. package/src/core/decorators/subscriber/dynamicPath.spec.ts +53 -0
  26. package/src/core/decorators/subscriber/dynamicPath.ts +23 -1
  27. package/src/core/decorators/subscriber/handle.ts +3 -1
  28. package/src/core/decorators/subscriber/onAssign.ts +10 -2
  29. package/src/core/decorators/subscriber/publish.ts +12 -2
  30. package/src/core/utils/PublisherProxy.ts +95 -11
  31. package/src/core/utils/api.ts +72 -3
  32. package/src/core/utils/dpOptions.spec.ts +56 -0
  33. package/src/core/utils/endpoint.ts +3 -3
  34. package/src/decorators.ts +17 -1
  35. package/src/docs/_core-concept/dataFlow.md +9 -3
  36. package/src/docs/_decorators/bind.md +2 -2
  37. package/src/docs/_decorators/get.md +13 -4
  38. package/src/docs/_decorators/handle.md +5 -1
  39. package/src/docs/_decorators/on-assign.md +2 -0
  40. package/src/docs/_decorators/patch.md +45 -0
  41. package/src/docs/_decorators/post.md +93 -0
  42. package/src/docs/_decorators/publish.md +1 -1
  43. package/src/docs/_decorators/put.md +43 -0
  44. package/src/docs/_decorators/subscribe.md +4 -1
  45. package/src/docs/_directives/sub.md +1 -1
  46. package/src/docs/_getting-started/my-first-component.md +1 -1
  47. package/src/docs/_misc/api-configuration.md +3 -1
  48. package/src/docs/_misc/dataProviderKey.md +2 -2
  49. package/src/docs/_misc/dynamic-path.md +71 -0
  50. package/src/docs/_misc/endpoint.md +5 -3
  51. package/src/docs/components/docs-demo-sources.ts +102 -3
  52. package/src/docs/components/docs-lit-demo-raw.ts +2 -26
  53. package/src/docs/components/docs-lit-demo.ts +9 -42
  54. package/src/docs/components/docs-source-excerpt.ts +53 -0
  55. package/src/docs/components/docs-source-link.ts +24 -8
  56. package/src/docs/components/docs-source-raw.ts +34 -0
  57. package/src/docs/example/decorators-demo-geo.ts +2 -2
  58. package/src/docs/example/decorators-demo-post.ts +249 -0
  59. package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts +5 -5
  60. package/src/docs/example/decorators-demo.ts +1 -0
  61. package/src/docs/example/docs-api-config-demos.ts +5 -5
  62. package/src/docs/mock-api/router.ts +20 -0
  63. package/src/docs/navigation/navigation.ts +16 -0
  64. package/src/docs/search/docs-search.json +540 -15
  65. package/src/tsconfig.json +24 -0
  66. package/src/tsconfig.tsbuildinfo +1 -1
  67. package/vite.config.mts +1 -1
  68. package/docs/assets/index-CwtPzTFq.js +0 -7508
  69. package/docs/src/core/components/functional/date/date.md +0 -290
  70. package/docs/src/core/components/functional/fetch/fetch.md +0 -125
  71. package/docs/src/core/components/functional/if/if.md +0 -9
  72. package/docs/src/core/components/functional/list/list.md +0 -65
  73. package/docs/src/core/components/functional/mix/mix.md +0 -41
  74. package/docs/src/core/components/functional/queue/queue.md +0 -72
  75. package/docs/src/core/components/functional/router/router.md +0 -94
  76. package/docs/src/core/components/functional/sdui/default-library.json +0 -108
  77. package/docs/src/core/components/functional/sdui/example.json +0 -99
  78. package/docs/src/core/components/functional/sdui/sdui.md +0 -356
  79. package/docs/src/core/components/functional/states/states.md +0 -87
  80. package/docs/src/core/components/functional/submit/submit.md +0 -114
  81. package/docs/src/core/components/functional/subscriber/subscriber.md +0 -91
  82. package/docs/src/core/components/functional/value/value.md +0 -35
  83. package/docs/src/core/components/ui/alert/alert.md +0 -121
  84. package/docs/src/core/components/ui/alert-messages/alert-messages.md +0 -0
  85. package/docs/src/core/components/ui/badge/badge.md +0 -127
  86. package/docs/src/core/components/ui/button/button.md +0 -182
  87. package/docs/src/core/components/ui/captcha/captcha.md +0 -12
  88. package/docs/src/core/components/ui/card/card.md +0 -97
  89. package/docs/src/core/components/ui/divider/divider.md +0 -35
  90. package/docs/src/core/components/ui/form/checkbox/checkbox.md +0 -77
  91. package/docs/src/core/components/ui/form/fieldset/fieldset.md +0 -129
  92. package/docs/src/core/components/ui/form/form-actions/form-actions.md +0 -77
  93. package/docs/src/core/components/ui/form/form-layout/form-layout.md +0 -44
  94. package/docs/src/core/components/ui/form/input/input.md +0 -142
  95. package/docs/src/core/components/ui/form/input-autocomplete/input-autocomplete.md +0 -133
  96. package/docs/src/core/components/ui/form/radio/radio.md +0 -57
  97. package/docs/src/core/components/ui/form/select/select.md +0 -71
  98. package/docs/src/core/components/ui/form/switch/switch.md +0 -57
  99. package/docs/src/core/components/ui/form/textarea/textarea.md +0 -65
  100. package/docs/src/core/components/ui/group/group.md +0 -75
  101. package/docs/src/core/components/ui/icon/icon.md +0 -125
  102. package/docs/src/core/components/ui/icon/icons.json +0 -1
  103. package/docs/src/core/components/ui/image/image.md +0 -107
  104. package/docs/src/core/components/ui/link/link.md +0 -43
  105. package/docs/src/core/components/ui/loader/loader.md +0 -55
  106. package/docs/src/core/components/ui/menu/menu.md +0 -329
  107. package/docs/src/core/components/ui/modal/modal.md +0 -119
  108. package/docs/src/core/components/ui/pop/pop.md +0 -96
  109. package/docs/src/core/components/ui/progress/progress.md +0 -63
  110. package/docs/src/core/components/ui/table/table.md +0 -455
  111. package/docs/src/core/components/ui/toast/toast.md +0 -166
  112. package/docs/src/core/components/ui/tooltip/tooltip.md +0 -82
  113. package/docs/src/docs/_core-concept/dataFlow.md +0 -73
  114. package/docs/src/docs/_core-concept/overview.md +0 -57
  115. package/docs/src/docs/_core-concept/subscriber.md +0 -75
  116. package/docs/src/docs/_decorators/ancestor-attribute.md +0 -79
  117. package/docs/src/docs/_decorators/auto-subscribe.md +0 -202
  118. package/docs/src/docs/_decorators/bind.md +0 -167
  119. package/docs/src/docs/_decorators/get.md +0 -68
  120. package/docs/src/docs/_decorators/handle.md +0 -171
  121. package/docs/src/docs/_decorators/on-assign.md +0 -388
  122. package/docs/src/docs/_decorators/publish.md +0 -55
  123. package/docs/src/docs/_decorators/subscribe.md +0 -97
  124. package/docs/src/docs/_decorators/wait-for-ancestors.md +0 -163
  125. package/docs/src/docs/_directives/sub.md +0 -91
  126. package/docs/src/docs/_getting-started/ai-agents.md +0 -56
  127. package/docs/src/docs/_getting-started/concorde-manual-install.md +0 -133
  128. package/docs/src/docs/_getting-started/concorde-outside.md +0 -33
  129. package/docs/src/docs/_getting-started/create-a-component.md +0 -139
  130. package/docs/src/docs/_getting-started/my-first-component.md +0 -236
  131. package/docs/src/docs/_getting-started/my-first-subscriber.md +0 -120
  132. package/docs/src/docs/_getting-started/pubsub.md +0 -37
  133. package/docs/src/docs/_getting-started/start.md +0 -47
  134. package/docs/src/docs/_getting-started/theming.md +0 -91
  135. package/docs/src/docs/_misc/api-configuration.md +0 -79
  136. package/docs/src/docs/_misc/dataProviderKey.md +0 -168
  137. package/docs/src/docs/_misc/docs-mock-api.md +0 -60
  138. package/docs/src/docs/_misc/endpoint.md +0 -43
  139. package/docs/src/docs/_misc/html-integration.md +0 -13
  140. package/docs/src/docs/search/docs-search.json +0 -8532
  141. package/docs/src/tag-list.json +0 -1
  142. package/docs/src/tsconfig-model.json +0 -23
  143. package/docs/src/tsconfig.json +0 -1095
@@ -1,290 +0,0 @@
1
- # Date
2
-
3
- ## No attribute
4
-
5
- **Nothing** is displayed.
6
-
7
- <sonic-code>
8
- <template>
9
- <sonic-date></sonic-date>
10
- </template>
11
- </sonic-code>
12
-
13
- ## Now
14
-
15
- Displays the **current date**.
16
-
17
- <sonic-code>
18
- <template>
19
- <sonic-date now></sonic-date>
20
- </template>
21
- </sonic-code>
22
-
23
-
24
- ## Date
25
-
26
- Displays a date from a **timestamp**.
27
-
28
- <sonic-code>
29
- <template>
30
- <sonic-date date= "1640265629"></sonic-date>
31
- </template>
32
- </sonic-code>
33
-
34
- ## Date_string
35
-
36
- Displays a date from a **string**.
37
-
38
- <sonic-code>
39
- <template>
40
- <sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>
41
- </template>
42
- </sonic-code>
43
-
44
- ## Start_date / end_date
45
-
46
- Displays a period of time **from start_date to end_date**.
47
- When by itself **start_date** will act as **date**
48
- if a **start_date is not specified** it will be set by the **current date**.
49
- if the **end_date is anterior** to start date date it will be **used as the start_date**.
50
-
51
- <sonic-code>
52
- <template>
53
- <!-- from start_date to end_date -->
54
- <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
55
- <br>
56
- <!-- start_date is not specified -->
57
- <sonic-date end_date= "2640365629"></sonic-date>
58
- <br>
59
- <!-- end_date is anterior -->
60
- <sonic-date end_date= "640365629"></sonic-date>
61
- </template>
62
- </sonic-code>
63
-
64
-
65
- ## Start_date_string / end_date_string
66
-
67
- <sonic-code>
68
- <template>
69
- <!-- from start_date to end_date -->
70
- <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
71
- <br>
72
- <!-- start_date is not specified -->
73
- <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
74
- <br>
75
- <!-- end_date is anterior -->
76
- <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>
77
- </template>
78
- </sonic-code>
79
-
80
- ## Wording_billet_periode_validite
81
-
82
- <sonic-code>
83
- <template>
84
- <sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>
85
- </template>
86
- </sonic-code>
87
-
88
-
89
- ## Weekday
90
-
91
- <sonic-code>
92
- <template>
93
- <b>narrow : </b>
94
- <sonic-date weekday="narrow" now></sonic-date>
95
- <br>
96
- <b>short (default) : </b>
97
- <sonic-date weekday="short" now></sonic-date>
98
- <br>
99
- <b>long : </b>
100
- <sonic-date weekday="long" now></sonic-date>
101
- <br>
102
- <b>hidden : </b>
103
- <sonic-date weekday="hidden" now></sonic-date>
104
- </template>
105
- </sonic-code>
106
-
107
- ## Day
108
-
109
- <sonic-code>
110
- <template>
111
- <b>numeric : </b>
112
- <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
113
- <br>
114
- <b>2-digit (default) : </b>
115
- <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>
116
- </template>
117
- </sonic-code>
118
-
119
- ## Month
120
-
121
- <sonic-code>
122
- <template>
123
- <b>numeric : </b>
124
- <sonic-date month="numeric" now></sonic-date>
125
- <br>
126
- <b>2-digit : </b>
127
- <sonic-date month="2-digit" now></sonic-date>
128
- <br>
129
- <b>narrow : </b>
130
- <sonic-date month="narrow" now></sonic-date>
131
- <br>
132
- <b>short (default) : </b>
133
- <sonic-date month="short" now></sonic-date>
134
- <br>
135
- <b>long : </b>
136
- <sonic-date month="long" now></sonic-date>
137
- </template>
138
- </sonic-code>
139
-
140
- ## Year
141
-
142
- <sonic-code>
143
- <template>
144
- <b>numeric (default) : </b>
145
- <sonic-date year="numeric" now></sonic-date>
146
- <br>
147
- <b>2-digit : </b>
148
- <sonic-date year="2-digit" now></sonic-date>
149
- </template>
150
- </sonic-code>
151
-
152
- ## Hour
153
-
154
- <sonic-code>
155
- <template>
156
- <b>numeric : </b>
157
- <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
158
- <br>
159
- <b>2-digit (default) : </b>
160
- <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
161
- <br>
162
- <b>hidden : </b>
163
- <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
164
- </template>
165
- </sonic-code>
166
-
167
- ## Minute
168
-
169
- <sonic-code>
170
- <template>
171
- <b>numeric : </b>
172
- <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
173
- <br>
174
- <b>2-digit (default) : </b>
175
- <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
176
- <br>
177
- <b>hidden : </b>
178
- <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
179
- </template>
180
- </sonic-code>
181
-
182
- ## Language
183
-
184
- <sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>
185
-
186
- <sonic-code>
187
- <template>
188
- <b>fr : </b>
189
- <sonic-date language="fr" now></sonic-date>
190
- <br>
191
- <b>en : </b>
192
- <sonic-date language="en" now></sonic-date>
193
- <br>
194
- <b>zh : </b>
195
- <sonic-date language="zh" now></sonic-date>
196
- <br>
197
- <b>ja : </b>
198
- <sonic-date language="ja" now></sonic-date>
199
- </template>
200
- </sonic-code>
201
-
202
- ## Time_zone
203
-
204
- For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console
205
-
206
- <sonic-code>
207
- <template>
208
- <b>Europe/London : </b>
209
- <sonic-date time_zone="Europe/London" now></sonic-date>
210
- <br>
211
- <b>Europe/Paris : </b>
212
- <sonic-date time_zone="Europe/Paris" now></sonic-date>
213
- <br>
214
- <b>America/Tijuana : </b>
215
- <sonic-date time_zone="America/Tijuana" now></sonic-date>
216
- </template>
217
- </sonic-code>
218
-
219
- ## Era
220
-
221
- <sonic-code>
222
- <template>
223
- <b>narrow : </b>
224
- <sonic-date era="narrow" now></sonic-date>
225
- <br>
226
- <b>short : </b>
227
- <sonic-date era="short" now></sonic-date>
228
- <br>
229
- <b>long : </b>
230
- <sonic-date era="long" now></sonic-date>
231
- </template>
232
- </sonic-code>
233
-
234
- ## .renderIf
235
-
236
- <sonic-alert status="error" background>Deprecated</sonic-alert>
237
-
238
- <sonic-code>
239
- <template>
240
- <b>True statement : </b>
241
- <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
242
- <br>
243
- <b>False statement : </b>
244
- <sonic-date data-bind ::render-if="|10<2" now></sonic-date>
245
- </template>
246
- </sonic-code>
247
-
248
- ## DesignMode
249
-
250
- <sonic-code>
251
- <template>
252
- <div class="relative max-w-lg rounded-lg overflow-hidden">
253
- <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
254
- <sonic-date
255
- designMode
256
- noShadowDom
257
- start_date= "1640265629"
258
- end_date= "1640365629"
259
- language= "fr"
260
- wording_billet_periode_validite= "Du %s au %s"
261
- year= "numeric"
262
- month= "short"
263
- weekday= "short"
264
- hour= "2-digit"
265
- minute= "2-digit"
266
- class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
267
- >
268
- <template data-value="weekday">
269
- <span class="hidden"></span>
270
- </template>
271
- <template data-value="day">
272
- <span class="text-4xl block uppercase leading-none font-bold"></span>
273
- </template>
274
- <template data-value="month">
275
- <span class="text-xl block uppercase leading-tight font-bold"></span>
276
- </template>
277
- <template data-value="year">
278
- <span class="text-lg mb-1 font-bold block uppercase leading-tight "></span>
279
- </template>
280
- <template data-value="to">
281
- <span class="font-medium block my-1 text-3xl leading-none">↓</span>
282
- </template>
283
- </sonic-date>
284
- <sonic-image
285
- ratio="1/1" src="https://picsum.photos/id/237/700/700">
286
- </sonic-image>
287
- </div>
288
- </template>
289
- </sonic-code>
290
-
@@ -1,125 +0,0 @@
1
- # Fetch
2
-
3
- > **New apps:** prefer [@get](#docs/_decorators/get.md/get) for a typed GET on a component, or [List](#core/components/functional/list/list.md/list) / [Queue](#core/components/functional/queue/queue.md/queue) with `fetch` for collections. Use [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api) (`serviceURL="/docs-mock-api"`) to try examples offline.
4
-
5
- The **sonic-fetch** component requests and stores API data. It extends the Fetcher and [Subscriber](#docs/_core-concept/subscriber.md/subscriber) mixins.
6
-
7
-
8
-
9
-
10
-
11
- ## Basic usage
12
- In order to work properly the <b>sonic-fetch</b> component needs at least the following attributes.
13
- - **serviceURL** : A base service url. This attribute can be inherited from an ancestor.
14
- *ex : /docs-mock-api*
15
- - **endPoint** : the specific location where requests for information are sent (see the api docs).
16
- *ex : api/users | api/users?page=2 | api/users/2*
17
- - **dataProvider *(Required)*** : An ID that is used as a reference to the object storing the data returned by the API.
18
- This attribute can be inherited from an ancestor.
19
-
20
-
21
-
22
- <sonic-code>
23
- <template>
24
- <sonic-fetch serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
25
- <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>
26
- </template>
27
- </sonic-code>
28
-
29
- ## DataProvider as an endPoint
30
- If no **endPoint** is specified it will be filled by the **dataProvider ID** instead
31
-
32
- <sonic-code>
33
- <template>
34
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users?page=2" ></sonic-fetch>
35
- <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>
36
- </template>
37
- </sonic-code>
38
-
39
- ## HeadersDataProvider
40
-
41
- <sonic-alert status="error" background>Deprecated</sonic-alert>
42
-
43
- ## Key
44
- When the **key** attribute is present, only a sub-part of the data received is injected into the **dataProvider**.
45
- We can use the dot syntax to target what we want to keep.
46
-
47
- For example if the data is `{my:{data:{a:1,b:2}}}` and the key is `key="my.data"`, the data available in the **dataProvider** will be `{a:1 , b:2}`
48
-
49
- <sonic-code>
50
- <template>
51
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="api/users/2" ></sonic-fetch>
52
- <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
53
- <!-- Get the user ID -->
54
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="id" endPoint="api/users/2" key="data.id"></sonic-fetch>
55
- <sonic-button dataProvider="id" debug>data.id</sonic-button>
56
- <!-- Get the user First name -->
57
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="first_name" endPoint="api/users/2" key="data.first_name"></sonic-fetch>
58
- <sonic-button dataProvider="first_name" debug>data.first_name</sonic-button>
59
- <!-- Get the user Last name -->
60
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="last_name" endPoint="api/users/2" key="data.last_name"></sonic-fetch>
61
- <sonic-button dataProvider="last_name" debug>data.last_name</sonic-button>
62
- <!-- Get the user email -->
63
- <sonic-fetch serviceURL="/docs-mock-api" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
64
- <sonic-button dataProvider="email" debug>data.email</sonic-button>
65
- </template>
66
- </sonic-code>
67
-
68
- ## Text mode
69
-
70
- if the mime type of the content returned by the service begins with **text/**, then the dataProvider has a key named "text" which contains the text returned by the service.
71
-
72
- <sonic-code>
73
- <template>
74
- <sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
75
- <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>
76
- </template>
77
- </sonic-code>
78
-
79
- ## NoLoader
80
-
81
- The noLoader attribute disables display of the default loader
82
-
83
- <sonic-code>
84
- <template>
85
- <sonic-fetch noLoader serviceURL="/docs-mock-api" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
86
- <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>
87
- </template>
88
- </sonic-code>
89
-
90
-
91
-
92
-
93
- <!--
94
- ## Summary
95
- Extends mixins : Fetcher, [Subscriber](#core/components/functional/subscriber/subscriber.md/subscriber)
96
-
97
- ### Configuration via les attributs
98
-
99
- | nom | sur quelle balise | Description | Exemple de valeur | défaut / requis |
100
- |-----|-----|---|---|---|
101
- | serviceURL |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
102
- | endpoint |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
103
- | dataProvider |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](#core/components/functional/subscriber/subscriber.md/subscriber). | billetterie/user/2 | *REQUIS* |
104
- | headersDataProvider |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
105
- | key |Fetcher | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
106
-
107
- *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
108
-
109
- ### Intégration auto de basic auth (pour tester une api qui nécessite une authentification)
110
-
111
- Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
112
-
113
- | nom | sur quelle balise | Description | Exemple de valeur | défaut / requis |
114
- |-----|-----|---|---|---|
115
- | userName | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
116
- | password | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
117
- | tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
118
- | token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
119
-
120
- ### Autres choses utiles
121
- L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
122
- On peut appeler la methode invalidate() sur le publisher associé au composant pour declencher le rechargement des données.
123
- endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
124
- -->
125
-
@@ -1,9 +0,0 @@
1
- # if
2
-
3
- The **sonic-if** component shows its slot when **`.condition`** is true. In Lit, bind `.condition` from store-driven state (`@subscribe` on a `formDataProvider` field) — live preview and **TypeScript source are the same file** (`docs-lit-demo`):
4
-
5
- <docs-lit-demo for="docs-toggle-if-demo"></docs-lit-demo>
6
-
7
- Plain HTML without Lit: [HTML integration](#docs/_misc/html-integration.md/html-integration).
8
-
9
-
@@ -1,65 +0,0 @@
1
- # List
2
-
3
- > **Try offline:** `serviceURL="/docs-mock-api"` and `dataProvider="api/users"` with `key="data"` — see [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api). Recommended patterns: [Data flow](#docs/_core-concept/dataFlow.md/dataFlow).
4
-
5
- The **sonic-list** component renders one row per entry in **`props`** (array from fetch or set on the element).
6
-
7
- List extends [Subscriber](#docs/_core-concept/subscriber.md/subscriber) and **Fetcher**:
8
- * **Subscriber** — `props` + `dataProvider`
9
- * **Fetcher** — optional `fetch` + `serviceURL` / `key` (see [Fetch](#core/components/functional/fetch/fetch.md/fetch))
10
-
11
- ## Row renderer (`items`) — recommended
12
-
13
- From a **Lit** parent, pass a function on the **`items`** property (`ListItems`). Each row is wrapped in a `sonic-subscriber` with `dataProvider="…/list-item/n"` (hover rows with `debug`).
14
-
15
- ```typescript
16
- private items = ({ first_name, last_name, email, avatar }) => html`
17
- <sonic-image src=${avatar} …></sonic-image>
18
- <div>${first_name} <b>${last_name}</b></div>
19
- <div>${email}</div>
20
- `;
21
-
22
- html`<sonic-list
23
- fetch
24
- dataProvider="api/users"
25
- key="data"
26
- serviceURL="/docs-mock-api"
27
- .items=${this.items}
28
- ></sonic-list>`;
29
- ```
30
-
31
- Use **`.items=${fn}`** (property binding): Lit passes functions only as properties, not as HTML attributes — `@property({ type: Function })` does not change that. Same for **`.noItems`**, **`.separator`**, **`.skeleton`**. The callback receives each row object (replacing `data-bind` / `<sonic-value>` in a `<template>`).
32
-
33
- Live demo + TypeScript source (one file, no Markdown copy):
34
-
35
- <docs-lit-demo for="docs-users-list"></docs-lit-demo>
36
-
37
- Implementation: `src/docs/example/docs-users-list.ts` — row markup in the **`items`** callback (`item.first_name`, …), same idea as replacing `data-bind` / `<sonic-value>` in a `<template>`.
38
-
39
- ## Alternating row layouts
40
-
41
- Use **`metadata`** (`even`, `odd`, `firstChild`, …) or fields on each item (e.g. `tpl` with `templateKey`):
42
-
43
- <docs-lit-demo for="docs-list-alternate-demo"></docs-lit-demo>
44
-
45
- <docs-lit-demo for="docs-list-template-key-demo"></docs-lit-demo>
46
-
47
- ## Separator and empty list
48
-
49
- <docs-lit-demo for="docs-list-separator-demo"></docs-lit-demo>
50
-
51
- ## Fetch + `extractValues`
52
-
53
- <docs-lit-demo for="docs-list-extract-values-demo"></docs-lit-demo>
54
-
55
- ## HTML `<template>` children (integration without Lit)
56
-
57
- For **plain HTML** hosts, you can still declare **`<template>`** children (and `data-value` for `templateKey`, `separator`, `no-item`). That path is for [HTML integration](#docs/_misc/html-integration.md/html-integration) — not used in Concorde doc live demos.
58
-
59
- Each list row still gets `dataProvider="[list]/list-item/[index]"`.
60
-
61
- ## Additionnal tips
62
-
63
- * If the request returns an object, it is wrapped in an array (unless `extractValues` is set).
64
- * Call **`invalidate()`** on the list publisher to reload fetch data.
65
- * Each row publisher exposes **`_parent_`** pointing at the list publisher.
@@ -1,41 +0,0 @@
1
- # Mix
2
-
3
- Mix allows you to mix several subsets of dataProvider in a new key/value structure which is itself associated with a new dataProvider. The data update is then bidirectional.
4
-
5
- Dot notation is supported to extract a sub-part of the data.
6
-
7
- For example, if we declare dataproviders as follows :
8
- <sonic-code>
9
- <template>
10
- <sonic-subscriber dataProvider="dataToMixA" props='{"foo":{"bar":2}}'></sonic-subscriber>
11
- <sonic-subscriber dataProvider="dataToMixB" props='{"baz":3}'></sonic-subscriber>
12
- </template>
13
- </sonic-code>
14
- We can rearrange the data as follows
15
- <sonic-code>
16
- <template>
17
- <sonic-mix dataProvider="mixedData" composition='{"either":"dataToMixB","orThat":"dataToMixA.foo.bar"}'>
18
- <div>Value of dataToMixA.foo.bar and mixedData.orThat : <sonic-value key="orThat"></sonic-value></div>
19
- <div>Value of dataToMixB.baz and mixedData.either.baz : <sonic-value key="either.baz"></sonic-value></div>
20
- </sonic-mix>
21
- </template>
22
- </sonic-code>
23
- Then we can change values in both dataProviders programaticaly this way, they will stay in sync
24
- <sonic-code language="javascript">
25
- <template>
26
- SonicPublisherManager.get("mixedData").either.baz=6;
27
- SonicPublisherManager.get("dataToMixB").baz=8;
28
- SonicPublisherManager.get("dataToMixA").foo.bar=8;
29
- SonicPublisherManager.get("mixedData").orThat=6;
30
- </template>
31
- </sonic-code>
32
- Or by using a form element
33
- <sonic-code>
34
- <template>
35
- <sonic-input label="mixedData.orThat" formDataProvider="mixedData" name="orThat"></sonic-input>
36
- </template>
37
- </sonic-code>
38
-
39
-
40
-
41
-
@@ -1,72 +0,0 @@
1
- # Queue
2
-
3
- > **Try offline:** `serviceURL="/docs-mock-api"` — see [Local API demos](#docs/_misc/docs-mock-api.md/docs-mock-api). Row rendering: [Data flow](#docs/_core-concept/dataFlow.md/dataFlow) (`.items` property binding).
4
-
5
- **sonic-queue** loads data in **batches**. Each batch is an internal [List](#core/components/functional/list/list.md/list) with its own `dataProvider` (`…/list-item/0`, `…/1`, …).
6
-
7
- | Mechanism | Role |
8
- |-----------|------|
9
- | **`dataProviderExpression`** | API path template; `$offset` and `$limit` are replaced per batch |
10
- | **`lazyload`** | Load the next batch when the user scrolls near the end |
11
- | **`dataFilterProvider`** | Publisher id of a form (`formDataProvider`); field values are merged into the request query string |
12
- | **`filteredFields`** | Optional list of form field names to **exclude** from the query (space-separated) — omit when every field should be sent |
13
- | **`.items`**, **`.noItems`**, **`.separator`**, **`.skeleton`** | Lit callbacks forwarded to each batch list (use the **dot** — functions are properties, not attributes) |
14
-
15
- ## Lazy load — `$offset` and `$limit`
16
-
17
- When the expression contains **`$offset`** and **`$limit`**, the queue:
18
-
19
- 1. Fetches the first batch with `offset=0` (or the initial `offset` attribute) and `per_page=$limit`.
20
- 2. On scroll, appends a batch with `offset` increased by the previous batch size.
21
- 3. Stops when a batch returns fewer rows than `limit` (or none).
22
-
23
- The doc mock implements this on `GET /docs-mock-api/api/users?offset=…&per_page=…` (`paginateUsers` in `src/docs/mock-api/router.ts`).
24
-
25
- <docs-lit-demo for="docs-queue-users-demo"></docs-lit-demo>
26
-
27
- Wrap the queue in a **fixed height** with **`overflow-y-auto`** so lazy load triggers when scrolling inside the box (same layout as the [TS starter](https://github.com/supersoniks/create-concorde-ts-starter) `demo-queue-templates`).
28
-
29
- Try scrolling after load — batches of 4 users. Search e.g. `George`, `Bluth`, or `zzz` for empty results.
30
-
31
- ### Expression example
32
-
33
- ```typescript
34
- html`<sonic-queue
35
- lazyload
36
- serviceURL="/docs-mock-api"
37
- dataProviderExpression="api/users?offset=$offset&limit=$limit"
38
- key="data"
39
- limit="4"
40
- class="grid max-h-96 overflow-y-auto"
41
- .items=${this.renderUser}
42
- ></sonic-queue>`;
43
- ```
44
-
45
- Without **`$offset`** in the expression, the queue behaves like a single list (one batch), e.g. geo communes below.
46
-
47
- ## Filter — `dataFilterProvider` + `q`
48
-
49
- One search field (`name="q"`) on `formDataProvider="filter"`. The queue listens via **`dataFilterProvider="filter"`** and, on change:
50
-
51
- 1. Resets loaded batches.
52
- 2. Appends each non-empty form field to the query (here only **`q`** — no `filteredFields` needed).
53
- 3. Fetches again from offset `0`.
54
-
55
- Use **`filteredFields`** only when the form has extra fields that must **not** be sent to the API (e.g. `filteredFields="rememberMe internalId"`).
56
-
57
- The mock API filters before pagination — same haystack logic as the starter (`filterDocsUsers` in `src/docs/mock-api/fixtures.ts`, used by `paginateUsers` in `router.ts` / Service Worker):
58
-
59
- ```typescript
60
- const haystack = `${first_name} ${last_name} ${email}`.toLowerCase();
61
- return haystack.includes(q);
62
- ```
63
-
64
- ## Simple batch (no lazy scroll)
65
-
66
- Geo communes: expression uses **`$limit` only** (no `$offset`) — one request, one batch.
67
-
68
- <docs-lit-demo for="docs-queue-geo-demo"></docs-lit-demo>
69
-
70
- ## HTML `<template>` children
71
-
72
- Optional for hosts without Lit — see [HTML integration](#docs/_misc/html-integration.md/html-integration).