discourse/app/assets/stylesheets/common/form-kit/_collection.scss

.form-kit__collection {
  &div {
    display: flex;
    flex-direction: column;
    gap: var(--form-kit-gutter-y);
  }
}
DEV: various form-kit tweaks (#27950) - removes unused css code - improves password control sizing - adds more spacing between collection items - correct a typo in collection class --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> 2024-07-18 02:18:19 +08:00			`.form-kit__collection {`
DEV: adds support for nested collections and objects (#30265) 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. 2024-12-13 22:43:32 +08:00			`&div {`
			`display: flex;`
			`flex-direction: column;`
			`gap: var(--form-kit-gutter-y);`
			`}`
DEV: various form-kit tweaks (#27950) - removes unused css code - improves password control sizing - adds more spacing between collection items - correct a typo in collection class --------- Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com> 2024-07-18 02:18:19 +08:00			`}`