37 lines
1.4 KiB
JavaScript
37 lines
1.4 KiB
JavaScript
import { LitElement } from 'lit';
|
|
import { FormGroupMixin } from '@lion/ui/form-core.js';
|
|
|
|
/**
|
|
* @desc LionFieldset is basically a 'sub form' and can have its own nested sub forms.
|
|
* It mimics the native <fieldset> element in this sense, but has all the functionality of
|
|
* a FormControl (advanced styling, validation, interaction states etc.) Also see
|
|
* FormGroupMixin it depends on.
|
|
*
|
|
* LionFieldset enables the '_isFormOrFieldset' flag in FormRegistrarMixin. This makes .formElements
|
|
* act not only as an array, but also as an object (see FormRegistarMixin for more information).
|
|
* As a bonus, It can also group children having names ending with '[]'.
|
|
*
|
|
* Above will be helpful for both forms and sub forms, which can contain sub forms as children
|
|
* as well and allow for a nested form structure.
|
|
* Contrary, other form groups (choice groups like radio-group, checkbox-group and (multi)select)
|
|
* don't: they should be considered 'end nodes' or 'leaves' of the form and their children/formElements
|
|
* cannot be accessed individually via object keys.
|
|
*
|
|
* @customElement lion-fieldset
|
|
*/
|
|
export class LionFieldset extends FormGroupMixin(LitElement) {
|
|
constructor() {
|
|
super();
|
|
/**
|
|
* @override FormRegistrarMixin
|
|
* @protected
|
|
*/
|
|
this._isFormOrFieldset = true;
|
|
/**
|
|
* @type {'child' | 'choice-group' | 'fieldset'}
|
|
* @override FormControlMixin
|
|
* @protected
|
|
*/
|
|
this._repropagationRole = 'fieldset';
|
|
}
|
|
}
|