ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: move demos to form-system to avoid circular dependencies

Browse source
This commit is contained in:
Thomas Allmer 2020-01-23 17:24:45 +01:00
parent 9de016240e
commit ddd1a72ba7
5 changed files with 143 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/fieldset/stories/overview.stories.mdx Normal file
View file

@ -0,0 +1,41 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js';
import { localize } from '@lion/localize';
import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
import '../lion-fieldset.js';
import './helpers/demo-fieldset-child.js';
<Meta title="Forms/Fieldset/Overview" parameters={{ component: 'lion-fieldset' }} />
# Fieldset
`lion-fieldset` groups multiple input fields or other fieldsets together.
We have three specific fieldset implementations:
- [lion-form](?path=/docs/forms-form-overview--page)
- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
- [lion-radio-group](?path=/docs/forms-radio-group)
```html
<lion-fieldset name="nameGroup" label="Name">
<lion-input name="FirstName" label="First Name"></lion-input>
<lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset>
```
A native fieldset element should always have a legend-element for a11y purposes.
However, our fieldset element is not native and should not have a legend-element.
Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
## Features
- Easy retrieval of form data based on field names
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
- Can disable input fields on fieldset level
- Accessible out of the box
## Examples
For examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story).

118
packages/fieldset/stories/index.stories.mdx → packages/form-system/stories/fieldset-examples.stories.mdx
View file

@ -2,20 +2,11 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate'; import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
import '../lion-fieldset.js'; import '@lion/fieldset/lion-fieldset.js';
import './helpers/demo-fieldset-child.js';
<Meta title="Forms/Fieldset" parameters={{ component: 'lion-fieldset' }} /> <Meta title="Forms/Fieldset/Examples" parameters={{ component: 'lion-fieldset' }} />
# Fieldset # Fieldset Examples
`lion-fieldset` groups multiple input fields or other fieldsets together.
We have three specific fieldset implementations:
- [lion-form](?path=/docs/forms-form)
- [lion-checkbox-group](?path=/docs/forms-checkbox-group)
- [lion-radio-group](?path=/docs/forms-radio-group)
<Story name="Default"> <Story name="Default">
{html` {html`
@ -25,34 +16,19 @@ We have three specific fieldset implementations:
} }
</style> </style>
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child> <lion-input name="FirstName" label="First Name"></lion-input>
<demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child> <lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset> </lion-fieldset>
`} `}
</Story> </Story>
```html ```html
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name"></demo-fieldset-child> <lion-input name="FirstName" label="First Name"></lion-input>
<demo-fieldset-child name="LastName" label="Last Name"></demo-fieldset-child> <lion-input name="LastName" label="Last Name"></lion-input>
</lion-fieldset> </lion-fieldset>
``` ```
A native fieldset element should always have a legend-element for a11y purposes.
However, our fieldset element is not native and should not have a legend-element.
Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
## Features
- Easy retrieval of form data based on field names
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Can have [validate](?path=/docs/forms-system-validate-system) on fieldset level and shows the validation feedback below the fieldset
- Can disable input fields on fieldset level
- Accessible out of the box
## Examples
### With Data ### With Data
The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field, The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field,
@ -61,8 +37,8 @@ and the value is the `modelValue` of the field.
<Story name="Data"> <Story name="Data">
{html` {html`
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log to Action Logger Log to Action Logger
</button> </button>
@ -72,8 +48,8 @@ and the value is the `modelValue` of the field.
```html ```html
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log to Action Logger Log to Action Logger
</button> </button>
@ -93,16 +69,16 @@ When enabling a fieldset, fields that have disabled explicitly set will stay dis
} }
return html` return html`
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled> <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-fieldset name="nameGroup2" label="Name"> <lion-fieldset name="nameGroup2" label="Name">
<demo-fieldset-child <lion-input
name="FirstName2" name="FirstName2"
label="First Name" label="First Name"
.modelValue=${'Foo'} .modelValue=${'Foo'}
disabled disabled
></demo-fieldset-child> ></lion-input>
<demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
<button @click=${toggleDisabled}> <button @click=${toggleDisabled}>
@ -121,16 +97,16 @@ function toggleDisabled() {
```html ```html
<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled> <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
<lion-fieldset name="nameGroup2" label="Name"> <lion-fieldset name="nameGroup2" label="Name">
<demo-fieldset-child <lion-input
name="FirstName2" name="FirstName2"
label="First Name" label="First Name"
.modelValue=${'Foo'} .modelValue=${'Foo'}
disabled disabled
></demo-fieldset-child> ></lion-input>
<demo-fieldset-child name="LastName2" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
<button @click=${toggleDisabled}> <button @click=${toggleDisabled}>
@ -147,13 +123,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
<lion-fieldset> <lion-fieldset>
<div slot="label">Personal data</div> <div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-fieldset name="location" label="Location"> <lion-fieldset name="location" label="Location">
<demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child> <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
</lion-fieldset> </lion-fieldset>
<demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child> <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log everything to Action Logger Log everything to Action Logger
</button> </button>
@ -171,13 +147,13 @@ Fieldsets can also be nested. The level of nesting will correspond one to one wi
<lion-fieldset> <lion-fieldset>
<div slot="label">Personal data</div> <div slot="label">Personal data</div>
<lion-fieldset name="nameGroup" label="Name"> <lion-fieldset name="nameGroup" label="Name">
<demo-fieldset-child name="FirstName" label="First Name" .modelValue=${'Foo'}></demo-fieldset-child> <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-fieldset-child name="LastName" label="Last Name" .modelValue=${'Bar'}></demo-fieldset-child> <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-fieldset name="location" label="Location"> <lion-fieldset name="location" label="Location">
<demo-fieldset-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-fieldset-child> <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
</lion-fieldset> </lion-fieldset>
<demo-fieldset-child name="age" label="Age" .modelValue=${21}></demo-fieldset-child> <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
<button @click=${ev => console.log(ev.target.parentElement.modelValue)}> <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
Log everything to Action Logger Log everything to Action Logger
</button> </button>
@ -215,7 +191,7 @@ Try it by typing something in the input, then removing it.
}; };
return html` return html`
<lion-fieldset id="someId" .validators="${[new DemoValidator()]}"> <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
<demo-fieldset-child name="input1" label="Label"></demo-fieldset-child> <lion-input name="input1" label="Label"></lion-input>
</lion-fieldset> </lion-fieldset>
`; `;
}} }}
@ -243,7 +219,7 @@ const DemoValidator = class extends Validator {
```html ```html
<lion-fieldset id="someId" .validators="${[new DemoValidator()]}"> <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
<demo-fieldset-child name="input1" label="Label"></demo-fieldset-child> <lion-input name="input1" label="Label"></lion-input>
</lion-fieldset> </lion-fieldset>
``` ```
@ -267,18 +243,18 @@ You can have your fieldset validator take into consideration multiple fields.
}; };
return html` return html`
<lion-fieldset .validators="${[new IsCatsAndDogs()]}"> <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
<demo-fieldset-child <lion-input
label="An all time YouTube favorite" label="An all time YouTube favorite"
name="input1" name="input1"
help-text="cats" help-text="cats"
> >
</demo-fieldset-child> </lion-input>
<demo-fieldset-child <lion-input
label="Another all time YouTube favorite" label="Another all time YouTube favorite"
name="input2" name="input2"
help-text="dogs" help-text="dogs"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
`; `;
}} }}
@ -303,18 +279,18 @@ const IsCatsAndDogs = class extends Validator {
```html ```html
<lion-fieldset .validators="${[new IsCatsAndDogs()]}"> <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
<demo-fieldset-child <lion-input
label="An all time YouTube favorite" label="An all time YouTube favorite"
name="input1" name="input1"
help-text="cats" help-text="cats"
> >
</demo-fieldset-child> </lion-input>
<demo-fieldset-child <lion-input
label="Another all time YouTube favorite" label="Another all time YouTube favorite"
name="input2" name="input2"
help-text="dogs" help-text="dogs"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
``` ```
@ -352,20 +328,20 @@ You can have your fieldset validator take into accounts multiple nested fieldset
<lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}> <lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
<lion-fieldset name="inner1"> <lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label> <label slot="label">Fieldset no. 1</label>
<demo-fieldset-child <lion-input
label="Write 'cats' here" label="Write 'cats' here"
name="input1" name="input1"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
<hr /> <hr />
<lion-fieldset name="inner2"> <lion-fieldset name="inner2">
<label slot="label">Fieldset no. 2</label> <label slot="label">Fieldset no. 2</label>
<demo-fieldset-child <lion-input
label="Write 'dogs' here" label="Write 'dogs' here"
name="input1" name="input1"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
`; `;
@ -398,20 +374,20 @@ const IsCatsDogs = class extends Validator {
<lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}"> <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
<lion-fieldset name="inner1"> <lion-fieldset name="inner1">
<label slot="label">Fieldset no. 1</label> <label slot="label">Fieldset no. 1</label>
<demo-fieldset-child <lion-input
label="Write 'cats' here" label="Write 'cats' here"
name="input1" name="input1"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
<hr /> <hr />
<lion-fieldset name="inner2"> <lion-fieldset name="inner2">
<label slot="label">Fieldset no. 2</label> <label slot="label">Fieldset no. 2</label>
<demo-fieldset-child <lion-input
label="Write 'dogs' here" label="Write 'dogs' here"
name="input1" name="input1"
> >
</demo-fieldset-child> </lion-input>
</lion-fieldset> </lion-fieldset>
</lion-fieldset> </lion-fieldset>
``` ```

59
packages/form/stories/index.stories.mdx → packages/form-system/stories/form-examples.stories.mdx
View file

@ -2,15 +2,13 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate'; import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
import '@lion/fieldset/lion-fieldset.js'; import '@lion/fieldset/lion-fieldset.js';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '../lion-form.js'; import '@lion/form/lion-form.js';
import './helpers/demo-form-child.js';
<Meta title="Forms/Form" parameters={{ component: 'lion-form' }} /> <Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />
# Form # Form Examples
`lion-form` is a webcomponent that enhances the functionality of the native `form` component. A form can have multiple nested fieldsets.
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
<Story name="Default"> <Story name="Default">
{html` {html`
@ -18,14 +16,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
<form> <form>
<lion-fieldset label="Personal data" name="personalData"> <lion-fieldset label="Personal data" name="personalData">
<lion-fieldset label="Full Name" name="fullName"> <lion-fieldset label="Full Name" name="fullName">
<demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child> <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child> <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-fieldset label="Location" name="location"> <lion-fieldset label="Location" name="location">
<demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child> <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
<demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child> <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
</lion-fieldset> </lion-fieldset>
<demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child> <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
</lion-fieldset> </lion-fieldset>
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}> <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
Log to Action Logger Log to Action Logger
@ -40,14 +38,14 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
<form> <form>
<lion-fieldset label="Personal data" name="personalData"> <lion-fieldset label="Personal data" name="personalData">
<lion-fieldset label="Full Name" name="fullName"> <lion-fieldset label="Full Name" name="fullName">
<demo-form-child name="firstName" label="First Name" .modelValue=${'Foo'}></demo-form-child> <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<demo-form-child name="lastName" label="Last Name" .modelValue=${'Bar'}></demo-form-child> <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</lion-fieldset> </lion-fieldset>
<lion-fieldset label="Location" name="location"> <lion-fieldset label="Location" name="location">
<demo-form-child name="country" label="Country" .modelValue=${'Netherlands'}></demo-form-child> <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
<demo-form-child name="city" label="City" .modelValue=${'Amsterdam'}></demo-form-child> <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
</lion-fieldset> </lion-fieldset>
<demo-form-child name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></demo-form-child> <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
</lion-fieldset> </lion-fieldset>
<button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}> <button type="button" @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
Log to Action Logger Log to Action Logger
@ -56,19 +54,6 @@ It is designed to interact with (instances of) the [form controls](?path=/docs/f
</lion-form> </lion-form>
``` ```
## Features
- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
- Accessible out of the box
For more information about fields that are designed for lion-form, please read
[Forms](?path=/docs/forms-form).
## Form Submit / Reset ## Form Submit / Reset
You can control whether a form gets submitted based on validation states. You can control whether a form gets submitted based on validation states.
@ -88,18 +73,18 @@ Same thing goes for resetting the inputs to the original state.
<lion-form id="form2" @submit="${submit}" <lion-form id="form2" @submit="${submit}"
><form> ><form>
<lion-fieldset label="Name" name="name"> <lion-fieldset label="Name" name="name">
<demo-form-child <lion-input
name="firstName" name="firstName"
label="First Name" label="First Name"
.validators=${[new Required(), new MaxLength(15)]} .validators=${[new Required(), new MaxLength(15)]}
> >
</demo-form-child> </lion-input>
<demo-form-child <lion-input
name="lastName" name="lastName"
label="Last Name" label="Last Name"
.validators=${[new Required(), new MaxLength(15)]} .validators=${[new Required(), new MaxLength(15)]}
> >
</demo-form-child> </lion-input>
</lion-fieldset> </lion-fieldset>
<button type="submit">Submit & Reset (if successfully submitted)</button> <button type="submit">Submit & Reset (if successfully submitted)</button>
<button type="button" @click=${() => document.querySelector('#form2').resetGroup()}> <button type="button" @click=${() => document.querySelector('#form2').resetGroup()}>
@ -131,18 +116,18 @@ const submit = () => {
<lion-form id="form2" @submit="${submit}"> <lion-form id="form2" @submit="${submit}">
<form> <form>
<lion-fieldset label="Name" name="name"> <lion-fieldset label="Name" name="name">
<demo-form-child <lion-input
name="firstName" name="firstName"
label="First Name" label="First Name"
.validators=${[new Required(), new MaxLength(15)]} .validators=${[new Required(), new MaxLength(15)]}
> >
</demo-form-child> </lion-input>
<demo-form-child <lion-input
name="lastName" name="lastName"
label="Last Name" label="Last Name"
.validators=${[new Required(), new MaxLength(15)]} .validators=${[new Required(), new MaxLength(15)]}
> >
</demo-form-child> </lion-input>
</lion-fieldset> </lion-fieldset>
<button type="submit">Submit & Reset (if successfully submitted)</button> <button type="submit">Submit & Reset (if successfully submitted)</button>
<button type="button" @click=${() => console.log(document.querySelector('#form2'))}> <button type="button" @click=${() => console.log(document.querySelector('#form2'))}>

13
packages/form/stories/helpers/demo-form-child.js
View file

@ -1,13 +0,0 @@
import { LionField } from '@lion/field';
customElements.define(
'demo-form-child',
class extends LionField {
get slots() {
return {
...super.slots,
input: () => document.createElement('input'),
};
}
},
);

33
packages/form/stories/overview.stories.mdx Normal file
View file

@ -0,0 +1,33 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook';
<Meta title="Forms/Form/Overview" />
# Form
`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview).
```html
<lion-form id="form">
<form>
<lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
<lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
</form>
</lion-form>
```
## Features
- Data synchronization with models
- Easy retrieval of form data based on field names
- Advanced validation possibilities
- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states)
- Registration mechanism for [form controls](?path=/docs/forms-system-overview)
- Accessible out of the box
For more information about fields that are designed for lion-form, please read
[Forms](?path=/docs/forms-form).
## Examples
For examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).