mirror of
https://github.com/discourse/discourse.git
synced 2024-12-25 03:04:13 +08:00
f6a4de4805
Collections were an existing concept in FormKit but didn't allow nesting. You can now do infinite nesting:
```gjs
<Form
@data={{hash
foo=(array
(hash bar=(array (hash baz=1))) (hash bar=(array (hash baz=2)))
)
}}
as |form|
>
<form.Collection @name="foo" as |parent parentIndex|>
<parent.Collection @name="bar" as |child childIndex|>
<child.Field @name="baz" @title="Baz" as |field|>
<field.Input />
</child.Field>
</parent.Collection>
</form.Collection>
</Form>
```
On top of this a new component has been added: `Object`. It allows you to represent objects in your form data. Collections are basically handling arrays, and Objects are objects.
This is useful if you form data has this shape for example:
```javascript
{ foo: { bar: 1, baz: 2 } }
```
This can now be mapped in your form using this syntax:
```gjs
<Form @data={{hash foo=(hash bar=1 baz=2)}} as |form|>
<form.Object @name="foo" as |object name|>
<object.Field @name={{name}} @title={{name}} as |field|>
<field.Input />
</object.Field>
</form.Object>
</Form>
```
Objects accept nested collections and nested objects. Just like Collections.
A small addition has also been made to `Collection`, they now support a custom `@tagName`, it's useful if each item of your collection is the row of a table for example.
33 lines
788 B
SCSS
33 lines
788 B
SCSS
@import "_default-input-mixin";
|
|
@import "_fieldset";
|
|
@import "_alert";
|
|
@import "_char-counter";
|
|
@import "_col";
|
|
@import "_object";
|
|
@import "_collection";
|
|
@import "_conditional-display";
|
|
@import "_container";
|
|
@import "_control-checkbox";
|
|
@import "_control-code";
|
|
@import "_control-composer";
|
|
@import "_control-icon";
|
|
@import "_control-password";
|
|
@import "_control-image";
|
|
@import "_control-input";
|
|
@import "_control-input-group";
|
|
@import "_checkbox-group";
|
|
@import "_control-menu";
|
|
@import "_control-radio";
|
|
@import "_control-select";
|
|
@import "_control-custom";
|
|
@import "_control-textarea";
|
|
@import "_control-custom-value-list";
|
|
@import "_errors";
|
|
@import "_errors-summary";
|
|
@import "_field";
|
|
@import "_form-kit";
|
|
@import "_meta";
|
|
@import "_row";
|
|
@import "_section";
|
|
@import "_variables";
|