@ea-lab/reactive-json-docs 2.3.0 → 2.4.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.
- package/package.json +1 -1
- package/public/rjbuild/docs/core/element/form/AutocompleteField.md +169 -0
- package/public/rjbuild/docs/core/element/form/AutocompleteField.yaml +225 -0
- package/public/rjbuild/docs/core/element/html/Join.md +108 -0
- package/public/rjbuild/docs/core/element/html/Join.yaml +113 -0
package/package.json
CHANGED
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
# AutocompleteField
|
|
2
|
+
|
|
3
|
+
The `AutocompleteField` component provides a search-as-you-type input that fetches suggestions from a remote API as the user types. It supports single and multiple value selection, and customizable dropdown and selected-item templates.
|
|
4
|
+
|
|
5
|
+
## Basic Syntax
|
|
6
|
+
|
|
7
|
+
```yaml
|
|
8
|
+
- type: AutocompleteField
|
|
9
|
+
dataLocation: ~~.selectedId
|
|
10
|
+
placeholder: "Search…"
|
|
11
|
+
src:
|
|
12
|
+
- "/api/items"
|
|
13
|
+
- param: "search"
|
|
14
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
15
|
+
- param: "limit"
|
|
16
|
+
value: "10"
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Properties
|
|
20
|
+
|
|
21
|
+
- `dataLocation` (string, required): Path where the selected value (or array of values in multiple mode) is stored in the data context.
|
|
22
|
+
- `src` (array, required): URL segments used to build the API endpoint, using the same format as `additionalDataSource.src`. The special token `<reactive-json:autocomplete-field:input>` is replaced by the current search text at request time.
|
|
23
|
+
- `placeholder` (string, optional): Placeholder text for the search input.
|
|
24
|
+
- `minChars` (number, optional): Minimum number of characters required before a search is triggered. Defaults to `2`.
|
|
25
|
+
- `debounce` (number, optional): Delay in milliseconds between the last keystroke and the API request. Defaults to `300`.
|
|
26
|
+
- `multiple` (boolean, optional): Enable multiple selection mode. Selected values are stored as an array. Defaults to `false`.
|
|
27
|
+
- `maxItems` (number, optional): Maximum number of items that can be selected in multiple mode. No limit by default.
|
|
28
|
+
- `clearOnSelect` (boolean, optional): Clear the search input and close the dropdown after an item is selected. Defaults to `true`.
|
|
29
|
+
- `itemTemplate` (rjbuild, optional): Template used to render each item in the dropdown. Has access to item data via `~.` (e.g., `~.label`, `~.value`). Defaults to a `div` displaying `~.label`.
|
|
30
|
+
- `selectedTemplate` (rjbuild, optional): Template used to render the selected item (single mode) or each tag (multiple mode). Has access to item data via `~.`. Defaults to a `span` displaying `~.label`.
|
|
31
|
+
- `defaultFieldValue` (any, optional): Default value used when no data is present at `dataLocation`.
|
|
32
|
+
- `attributes` (object, optional): Attributes applied to the root container `div`. Also receives the CSS class `rj-autocomplete` automatically.
|
|
33
|
+
- `actions` (array, optional): Actions to execute based on component state.
|
|
34
|
+
|
|
35
|
+
## Backend Response Format
|
|
36
|
+
|
|
37
|
+
The endpoint must return a JSON array of objects. Each object must have at minimum a `value` and a `label` key:
|
|
38
|
+
|
|
39
|
+
```json
|
|
40
|
+
[
|
|
41
|
+
{ "value": 42, "label": "First result" },
|
|
42
|
+
{ "value": 7, "label": "Second result" }
|
|
43
|
+
]
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Additional keys can be included and are available in `itemTemplate` / `selectedTemplate` via `~.fieldName`.
|
|
47
|
+
|
|
48
|
+
## The Input Token
|
|
49
|
+
|
|
50
|
+
The string `<reactive-json:autocomplete-field:input>` is a special token that can be placed anywhere in the `src` segments (as a `value`, `param`, or URL segment). It is replaced at request time with the current text in the search field.
|
|
51
|
+
|
|
52
|
+
```yaml
|
|
53
|
+
src:
|
|
54
|
+
- "/api/search"
|
|
55
|
+
- param: "q"
|
|
56
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## CSS Classes
|
|
60
|
+
|
|
61
|
+
The component uses the following CSS classes for styling:
|
|
62
|
+
|
|
63
|
+
- `.rj-autocomplete` — root container
|
|
64
|
+
- `.rj-autocomplete__input` — the search text input
|
|
65
|
+
- `.rj-autocomplete__dropdown` — the suggestions dropdown
|
|
66
|
+
- `.rj-autocomplete__item` — each suggestion item
|
|
67
|
+
- `.rj-autocomplete__item.is-selected` — a suggestion that is already selected (multiple mode)
|
|
68
|
+
- `.rj-autocomplete__selected` — the selected-item area (single mode)
|
|
69
|
+
- `.rj-autocomplete__clear` — the clear button (single mode)
|
|
70
|
+
- `.rj-autocomplete__tag` — a selected tag (multiple mode)
|
|
71
|
+
- `.rj-autocomplete__tag-remove` — the remove button on a tag
|
|
72
|
+
- `.rj-autocomplete__loading` — the loading indicator
|
|
73
|
+
|
|
74
|
+
## Examples
|
|
75
|
+
|
|
76
|
+
### Single value selection
|
|
77
|
+
|
|
78
|
+
Stores a single selected value. Shows a clear button once an item is selected.
|
|
79
|
+
|
|
80
|
+
```yaml
|
|
81
|
+
renderView:
|
|
82
|
+
- type: AutocompleteField
|
|
83
|
+
dataLocation: ~~.selectedId
|
|
84
|
+
placeholder: "Search…"
|
|
85
|
+
src:
|
|
86
|
+
- "/api/items"
|
|
87
|
+
- param: "search"
|
|
88
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
89
|
+
- param: "limit"
|
|
90
|
+
value: "10"
|
|
91
|
+
|
|
92
|
+
data:
|
|
93
|
+
selectedId: null
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Multiple selection with a limit
|
|
97
|
+
|
|
98
|
+
Stores up to 3 values as an array. Each selected item is displayed as a removable tag.
|
|
99
|
+
|
|
100
|
+
```yaml
|
|
101
|
+
renderView:
|
|
102
|
+
- type: AutocompleteField
|
|
103
|
+
dataLocation: ~~.selectedIds
|
|
104
|
+
multiple: true
|
|
105
|
+
maxItems: 3
|
|
106
|
+
placeholder: "Add items (max 3)…"
|
|
107
|
+
src:
|
|
108
|
+
- "/api/items"
|
|
109
|
+
- param: "search"
|
|
110
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
111
|
+
- param: "limit"
|
|
112
|
+
value: "10"
|
|
113
|
+
- type: p
|
|
114
|
+
content:
|
|
115
|
+
- "Selected IDs: "
|
|
116
|
+
- type: Join
|
|
117
|
+
content: ~~.selectedIds
|
|
118
|
+
|
|
119
|
+
data:
|
|
120
|
+
selectedIds: []
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### Custom templates
|
|
124
|
+
|
|
125
|
+
Use `itemTemplate` and `selectedTemplate` to render richer content. Both templates have access to all fields returned by the backend via `~.`.
|
|
126
|
+
|
|
127
|
+
```yaml
|
|
128
|
+
- type: AutocompleteField
|
|
129
|
+
dataLocation: ~~.selectedItem
|
|
130
|
+
placeholder: "Search…"
|
|
131
|
+
src:
|
|
132
|
+
- "/api/items"
|
|
133
|
+
- param: "search"
|
|
134
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
135
|
+
itemTemplate:
|
|
136
|
+
type: div
|
|
137
|
+
content:
|
|
138
|
+
- type: strong
|
|
139
|
+
content: ~.label
|
|
140
|
+
- " (#"
|
|
141
|
+
- ~.value
|
|
142
|
+
- ")"
|
|
143
|
+
selectedTemplate:
|
|
144
|
+
type: span
|
|
145
|
+
content:
|
|
146
|
+
- ~.label
|
|
147
|
+
- " ✓"
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Keep search text after selection
|
|
151
|
+
|
|
152
|
+
Set `clearOnSelect: false` to keep the typed text and dropdown open after selecting an item (useful in multiple mode when selecting several items quickly).
|
|
153
|
+
|
|
154
|
+
```yaml
|
|
155
|
+
- type: AutocompleteField
|
|
156
|
+
dataLocation: ~~.selectedIds
|
|
157
|
+
multiple: true
|
|
158
|
+
clearOnSelect: false
|
|
159
|
+
placeholder: "Search…"
|
|
160
|
+
src: [...]
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Limitations
|
|
164
|
+
|
|
165
|
+
- Requires an external API endpoint; no built-in static options support.
|
|
166
|
+
- The dropdown only renders while the user is actively typing (results are not re-fetched on re-open without re-typing).
|
|
167
|
+
- In multiple mode, selected items' display data is kept in local React state and may be lost on page reload unless persisted separately.
|
|
168
|
+
- Styling must be provided via external CSS targeting the `.rj-autocomplete*` classes, or via `attributes.style`.
|
|
169
|
+
- No built-in keyboard navigation for the dropdown.
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
- type: Markdown
|
|
3
|
+
content: |
|
|
4
|
+
# AutocompleteField
|
|
5
|
+
|
|
6
|
+
The `AutocompleteField` component provides a search-as-you-type input that fetches suggestions from a remote API as the user types. It supports single and multiple value selection, and customizable dropdown and selected-item templates.
|
|
7
|
+
|
|
8
|
+
- type: Markdown
|
|
9
|
+
content: |
|
|
10
|
+
## Basic Syntax
|
|
11
|
+
|
|
12
|
+
```yaml
|
|
13
|
+
- type: AutocompleteField
|
|
14
|
+
dataLocation: ~~.selectedId
|
|
15
|
+
placeholder: "Search…"
|
|
16
|
+
src:
|
|
17
|
+
- "/api/items"
|
|
18
|
+
- param: "search"
|
|
19
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
20
|
+
- param: "limit"
|
|
21
|
+
value: "10"
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Properties
|
|
25
|
+
|
|
26
|
+
- type: DefinitionList
|
|
27
|
+
content:
|
|
28
|
+
- term:
|
|
29
|
+
code: dataLocation
|
|
30
|
+
after: "(string, required)"
|
|
31
|
+
details: "Path where the selected value (or array of values in multiple mode) is stored in the data context."
|
|
32
|
+
- term:
|
|
33
|
+
code: src
|
|
34
|
+
after: "(array, required)"
|
|
35
|
+
details:
|
|
36
|
+
type: Markdown
|
|
37
|
+
content: "URL segments used to build the API endpoint. The special token `<reactive-json:autocomplete-field:input>` is replaced by the current search text at request time."
|
|
38
|
+
- term:
|
|
39
|
+
code: placeholder
|
|
40
|
+
after: "(string, optional)"
|
|
41
|
+
details: "Placeholder text for the search input."
|
|
42
|
+
- term:
|
|
43
|
+
code: minChars
|
|
44
|
+
after: "(number, optional, default: 2)"
|
|
45
|
+
details: "Minimum number of characters required before a search is triggered."
|
|
46
|
+
- term:
|
|
47
|
+
code: debounce
|
|
48
|
+
after: "(number, optional, default: 300)"
|
|
49
|
+
details: "Delay in milliseconds between the last keystroke and the API request."
|
|
50
|
+
- term:
|
|
51
|
+
code: multiple
|
|
52
|
+
after: "(boolean, optional, default: false)"
|
|
53
|
+
details: "Enable multiple selection mode. Selected values are stored as an array."
|
|
54
|
+
- term:
|
|
55
|
+
code: maxItems
|
|
56
|
+
after: "(number, optional)"
|
|
57
|
+
details: "Maximum number of items selectable in multiple mode. No limit by default."
|
|
58
|
+
- term:
|
|
59
|
+
code: clearOnSelect
|
|
60
|
+
after: "(boolean, optional, default: true)"
|
|
61
|
+
details: "Clear the search input and close the dropdown after an item is selected."
|
|
62
|
+
- term:
|
|
63
|
+
code: itemTemplate
|
|
64
|
+
after: "(rjbuild, optional)"
|
|
65
|
+
details:
|
|
66
|
+
type: Markdown
|
|
67
|
+
content: "Template rendered for each item in the dropdown. Has access to item data via `~.` (e.g., `~.label`, `~.value`). Defaults to a `div` displaying `~.label`."
|
|
68
|
+
- term:
|
|
69
|
+
code: selectedTemplate
|
|
70
|
+
after: "(rjbuild, optional)"
|
|
71
|
+
details:
|
|
72
|
+
type: Markdown
|
|
73
|
+
content: "Template rendered for the selected item (single mode) or each tag (multiple mode). Has access to item data via `~.`. Defaults to a `span` displaying `~.label`."
|
|
74
|
+
- term:
|
|
75
|
+
code: defaultFieldValue
|
|
76
|
+
after: "(any, optional)"
|
|
77
|
+
details: "Default value used when no data is present at dataLocation."
|
|
78
|
+
- term:
|
|
79
|
+
code: attributes
|
|
80
|
+
after: "(object, optional)"
|
|
81
|
+
details:
|
|
82
|
+
type: Markdown
|
|
83
|
+
content: "Attributes applied to the root container `div`. Also receives the CSS class `rj-autocomplete` automatically."
|
|
84
|
+
- term:
|
|
85
|
+
code: actions
|
|
86
|
+
after: "(array, optional)"
|
|
87
|
+
details: "Actions to execute based on component state."
|
|
88
|
+
|
|
89
|
+
- type: Markdown
|
|
90
|
+
content: |
|
|
91
|
+
## Backend Response Format
|
|
92
|
+
|
|
93
|
+
The endpoint must return a JSON array of objects. Each object must have at minimum a `value` and a `label` key:
|
|
94
|
+
|
|
95
|
+
```json
|
|
96
|
+
[
|
|
97
|
+
{ "value": 42, "label": "First result" },
|
|
98
|
+
{ "value": 7, "label": "Second result" }
|
|
99
|
+
]
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Additional keys can be included and are available in `itemTemplate` / `selectedTemplate` via `~.fieldName`.
|
|
103
|
+
|
|
104
|
+
- type: Markdown
|
|
105
|
+
content: |
|
|
106
|
+
## The Input Token
|
|
107
|
+
|
|
108
|
+
The string `<reactive-json:autocomplete-field:input>` is a special token that can be placed anywhere in the `src` segments. It is replaced at request time with the current text in the search field.
|
|
109
|
+
|
|
110
|
+
```yaml
|
|
111
|
+
src:
|
|
112
|
+
- "/api/search"
|
|
113
|
+
- param: "q"
|
|
114
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
- type: Markdown
|
|
118
|
+
content: |
|
|
119
|
+
## CSS Classes
|
|
120
|
+
|
|
121
|
+
The component uses the following CSS classes for styling:
|
|
122
|
+
|
|
123
|
+
| Class | Element |
|
|
124
|
+
|---|---|
|
|
125
|
+
| `.rj-autocomplete` | Root container |
|
|
126
|
+
| `.rj-autocomplete__input` | The search text input |
|
|
127
|
+
| `.rj-autocomplete__dropdown` | The suggestions dropdown |
|
|
128
|
+
| `.rj-autocomplete__item` | Each suggestion item |
|
|
129
|
+
| `.rj-autocomplete__item.is-selected` | A suggestion already selected (multiple mode) |
|
|
130
|
+
| `.rj-autocomplete__selected` | The selected-item area (single mode) |
|
|
131
|
+
| `.rj-autocomplete__clear` | The clear button (single mode) |
|
|
132
|
+
| `.rj-autocomplete__tag` | A selected tag (multiple mode) |
|
|
133
|
+
| `.rj-autocomplete__tag-remove` | The remove button on a tag |
|
|
134
|
+
| `.rj-autocomplete__loading` | The loading indicator |
|
|
135
|
+
|
|
136
|
+
- type: Markdown
|
|
137
|
+
content: |
|
|
138
|
+
## Examples
|
|
139
|
+
|
|
140
|
+
> **Note**: The following examples require a live API endpoint. They show the YAML configuration without a live demo.
|
|
141
|
+
|
|
142
|
+
### Single value selection
|
|
143
|
+
|
|
144
|
+
Stores a single selected value. Shows a clear button once an item is selected.
|
|
145
|
+
|
|
146
|
+
```yaml
|
|
147
|
+
renderView:
|
|
148
|
+
- type: AutocompleteField
|
|
149
|
+
dataLocation: ~~.selectedId
|
|
150
|
+
placeholder: "Search…"
|
|
151
|
+
src:
|
|
152
|
+
- "/api/items"
|
|
153
|
+
- param: "search"
|
|
154
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
155
|
+
- param: "limit"
|
|
156
|
+
value: "10"
|
|
157
|
+
|
|
158
|
+
data:
|
|
159
|
+
selectedId: null
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
### Multiple selection with a limit
|
|
163
|
+
|
|
164
|
+
Stores up to 3 values as an array. Each selected item is displayed as a removable tag.
|
|
165
|
+
|
|
166
|
+
```yaml
|
|
167
|
+
renderView:
|
|
168
|
+
- type: AutocompleteField
|
|
169
|
+
dataLocation: ~~.selectedIds
|
|
170
|
+
multiple: true
|
|
171
|
+
maxItems: 3
|
|
172
|
+
placeholder: "Add items (max 3)…"
|
|
173
|
+
src:
|
|
174
|
+
- "/api/items"
|
|
175
|
+
- param: "search"
|
|
176
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
177
|
+
- param: "limit"
|
|
178
|
+
value: "10"
|
|
179
|
+
- type: p
|
|
180
|
+
content:
|
|
181
|
+
- "Selected IDs: "
|
|
182
|
+
- type: Join
|
|
183
|
+
content: ~~.selectedIds
|
|
184
|
+
|
|
185
|
+
data:
|
|
186
|
+
selectedIds: []
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
### Custom templates
|
|
190
|
+
|
|
191
|
+
Use `itemTemplate` and `selectedTemplate` to render richer content. Both templates have access to all fields returned by the backend via `~.`.
|
|
192
|
+
|
|
193
|
+
```yaml
|
|
194
|
+
- type: AutocompleteField
|
|
195
|
+
dataLocation: ~~.selectedItem
|
|
196
|
+
placeholder: "Search…"
|
|
197
|
+
src:
|
|
198
|
+
- "/api/items"
|
|
199
|
+
- param: "search"
|
|
200
|
+
value: "<reactive-json:autocomplete-field:input>"
|
|
201
|
+
itemTemplate:
|
|
202
|
+
type: div
|
|
203
|
+
content:
|
|
204
|
+
- type: strong
|
|
205
|
+
content: ~.label
|
|
206
|
+
- " (#"
|
|
207
|
+
- ~.value
|
|
208
|
+
- ")"
|
|
209
|
+
selectedTemplate:
|
|
210
|
+
type: span
|
|
211
|
+
content:
|
|
212
|
+
- ~.label
|
|
213
|
+
- " ✓"
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Limitations
|
|
217
|
+
|
|
218
|
+
- Requires an external API endpoint; no built-in static options support.
|
|
219
|
+
- The dropdown only renders while the user is actively typing (results are not re-fetched on re-open without re-typing).
|
|
220
|
+
- In multiple mode, selected items' display data is kept in local React state and may be lost on page reload unless persisted separately.
|
|
221
|
+
- Styling must be provided via external CSS targeting the `.rj-autocomplete*` classes, or via `attributes.style`.
|
|
222
|
+
- No built-in keyboard navigation for the dropdown.
|
|
223
|
+
|
|
224
|
+
templates: {}
|
|
225
|
+
data: {}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# Join
|
|
2
|
+
|
|
3
|
+
The `Join` component concatenates an array of values into a single string, with a configurable separator. It is useful for displaying lists of scalar values (IDs, labels, tags, etc.) inline.
|
|
4
|
+
|
|
5
|
+
## Basic Syntax
|
|
6
|
+
|
|
7
|
+
```yaml
|
|
8
|
+
- type: Join
|
|
9
|
+
content: ~~.myArray
|
|
10
|
+
separator: ", "
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Properties
|
|
14
|
+
|
|
15
|
+
- `content` (array, required): The array to join. Supports template references such as `~~.myArray` or `~.items`. Non-array values are coerced to string and displayed as-is.
|
|
16
|
+
- `separator` (string, optional): The string used between each element. Defaults to `", "`.
|
|
17
|
+
- `attributes` (object, optional): Additional attributes for the root element.
|
|
18
|
+
- `actions` (array, optional): Actions to execute based on component state.
|
|
19
|
+
|
|
20
|
+
## Examples
|
|
21
|
+
|
|
22
|
+
### Basic join with default separator
|
|
23
|
+
|
|
24
|
+
```yaml
|
|
25
|
+
renderView:
|
|
26
|
+
- type: Join
|
|
27
|
+
content: ~~.tags
|
|
28
|
+
|
|
29
|
+
data:
|
|
30
|
+
tags:
|
|
31
|
+
- "react"
|
|
32
|
+
- "yaml"
|
|
33
|
+
- "json"
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Renders: `react, yaml, json`
|
|
37
|
+
|
|
38
|
+
### Custom separator
|
|
39
|
+
|
|
40
|
+
```yaml
|
|
41
|
+
renderView:
|
|
42
|
+
- type: Join
|
|
43
|
+
content: ~~.ids
|
|
44
|
+
separator: " | "
|
|
45
|
+
|
|
46
|
+
data:
|
|
47
|
+
ids:
|
|
48
|
+
- 1
|
|
49
|
+
- 2
|
|
50
|
+
- 3
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Renders: `1 | 2 | 3`
|
|
54
|
+
|
|
55
|
+
### Used inside a sentence
|
|
56
|
+
|
|
57
|
+
```yaml
|
|
58
|
+
renderView:
|
|
59
|
+
- type: p
|
|
60
|
+
content:
|
|
61
|
+
- "Selected items: "
|
|
62
|
+
- type: Join
|
|
63
|
+
content: ~~.selectedIds
|
|
64
|
+
separator: ", "
|
|
65
|
+
|
|
66
|
+
data:
|
|
67
|
+
selectedIds:
|
|
68
|
+
- 42
|
|
69
|
+
- 7
|
|
70
|
+
- 15
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### With template-scoped data
|
|
74
|
+
|
|
75
|
+
```yaml
|
|
76
|
+
renderView:
|
|
77
|
+
- type: Switch
|
|
78
|
+
content: ~~.users
|
|
79
|
+
singleOption:
|
|
80
|
+
load: userRow
|
|
81
|
+
|
|
82
|
+
templates:
|
|
83
|
+
userRow:
|
|
84
|
+
type: div
|
|
85
|
+
content:
|
|
86
|
+
- "Roles: "
|
|
87
|
+
- type: Join
|
|
88
|
+
content: ~.roles
|
|
89
|
+
separator: " / "
|
|
90
|
+
|
|
91
|
+
data:
|
|
92
|
+
users:
|
|
93
|
+
- name: "Alice"
|
|
94
|
+
roles: ["admin", "editor"]
|
|
95
|
+
- name: "Bob"
|
|
96
|
+
roles: ["viewer"]
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Notes
|
|
100
|
+
|
|
101
|
+
- If `content` evaluates to a non-array value, it is rendered as a plain string (no separator applied).
|
|
102
|
+
- Null or undefined `content` renders nothing.
|
|
103
|
+
- Array elements are joined using JavaScript's native `.join()`, so objects will render as `[object Object]`. Use this component with arrays of primitives (strings, numbers).
|
|
104
|
+
|
|
105
|
+
## Limitations
|
|
106
|
+
|
|
107
|
+
- No support for rendering rich content (HTML, components) between items — use `Switch` with a template for that.
|
|
108
|
+
- No per-item formatting; all elements are joined as plain strings.
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
renderView:
|
|
2
|
+
- type: Markdown
|
|
3
|
+
content: |
|
|
4
|
+
# Join
|
|
5
|
+
|
|
6
|
+
The `Join` component concatenates an array of values into a single string, with a configurable separator. It is useful for displaying lists of scalar values (IDs, labels, tags, etc.) inline.
|
|
7
|
+
|
|
8
|
+
- type: Markdown
|
|
9
|
+
content: |
|
|
10
|
+
## Basic Syntax
|
|
11
|
+
|
|
12
|
+
```yaml
|
|
13
|
+
- type: Join
|
|
14
|
+
content: ~~.myArray
|
|
15
|
+
separator: ", "
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Properties
|
|
19
|
+
|
|
20
|
+
- type: DefinitionList
|
|
21
|
+
content:
|
|
22
|
+
- term:
|
|
23
|
+
code: content
|
|
24
|
+
after: "(array, required)"
|
|
25
|
+
details: "The array to join. Supports template references such as ~~.myArray or ~.items. Non-array values are coerced to string and displayed as-is."
|
|
26
|
+
- term:
|
|
27
|
+
code: separator
|
|
28
|
+
after: '(string, optional, default: ", ")'
|
|
29
|
+
details: "The string used between each element."
|
|
30
|
+
- term:
|
|
31
|
+
code: attributes
|
|
32
|
+
after: "(object, optional)"
|
|
33
|
+
details: "Additional attributes for the root element."
|
|
34
|
+
- term:
|
|
35
|
+
code: actions
|
|
36
|
+
after: "(array, optional)"
|
|
37
|
+
details: "Actions to execute based on component state."
|
|
38
|
+
|
|
39
|
+
- type: RjBuildDescriber
|
|
40
|
+
title: "Basic join with default separator"
|
|
41
|
+
description: "Join an array of strings with the default comma-space separator."
|
|
42
|
+
toDescribe:
|
|
43
|
+
renderView:
|
|
44
|
+
- type: p
|
|
45
|
+
content:
|
|
46
|
+
- "Tags: "
|
|
47
|
+
- type: Join
|
|
48
|
+
content: ~~.tags
|
|
49
|
+
data:
|
|
50
|
+
tags:
|
|
51
|
+
- "react"
|
|
52
|
+
- "yaml"
|
|
53
|
+
- "json"
|
|
54
|
+
|
|
55
|
+
- type: RjBuildDescriber
|
|
56
|
+
title: "Custom separator"
|
|
57
|
+
description: "Use a pipe separator to display a list of IDs."
|
|
58
|
+
toDescribe:
|
|
59
|
+
renderView:
|
|
60
|
+
- type: p
|
|
61
|
+
content:
|
|
62
|
+
- "IDs: "
|
|
63
|
+
- type: Join
|
|
64
|
+
content: ~~.ids
|
|
65
|
+
separator: " | "
|
|
66
|
+
- type: div
|
|
67
|
+
attributes:
|
|
68
|
+
class: "mt-5 p-2.5 rounded border border-gray-300 dark:border-gray-600"
|
|
69
|
+
content:
|
|
70
|
+
- type: strong
|
|
71
|
+
content: "Raw array: "
|
|
72
|
+
- type: Code
|
|
73
|
+
content: ~~.ids
|
|
74
|
+
data:
|
|
75
|
+
ids:
|
|
76
|
+
- 42
|
|
77
|
+
- 7
|
|
78
|
+
- 15
|
|
79
|
+
|
|
80
|
+
- type: RjBuildDescriber
|
|
81
|
+
title: "Inside a sentence"
|
|
82
|
+
description: "Embed a Join inside a paragraph to display selected values inline."
|
|
83
|
+
toDescribe:
|
|
84
|
+
renderView:
|
|
85
|
+
- type: p
|
|
86
|
+
content:
|
|
87
|
+
- "Selected items: "
|
|
88
|
+
- type: strong
|
|
89
|
+
content:
|
|
90
|
+
type: Join
|
|
91
|
+
content: ~~.selectedIds
|
|
92
|
+
separator: ", "
|
|
93
|
+
data:
|
|
94
|
+
selectedIds:
|
|
95
|
+
- 42
|
|
96
|
+
- 7
|
|
97
|
+
- 15
|
|
98
|
+
|
|
99
|
+
- type: Markdown
|
|
100
|
+
content: |
|
|
101
|
+
## Notes
|
|
102
|
+
|
|
103
|
+
- If `content` evaluates to a non-array value, it is rendered as a plain string (no separator applied).
|
|
104
|
+
- Null or undefined `content` renders nothing.
|
|
105
|
+
- Array elements are joined using JavaScript's native `.join()`, so objects will render as `[object Object]`. Use this component with arrays of primitives (strings, numbers).
|
|
106
|
+
|
|
107
|
+
## Limitations
|
|
108
|
+
|
|
109
|
+
- No support for rendering rich content (HTML, components) between items — use `Switch` with a template for that.
|
|
110
|
+
- No per-item formatting; all elements are joined as plain strings.
|
|
111
|
+
|
|
112
|
+
templates: {}
|
|
113
|
+
data: {}
|