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

chore(form-system): update umbrella form

Browse source
This commit is contained in:
qa46hx 2020-02-04 16:38:08 +01:00 committed by Thomas Allmer
parent f49bdf80a6
commit 72d91e28c7
1 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/form-system/stories/15-features-overview.stories.mdx
View file

@ -7,6 +7,7 @@ import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js'; import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js'; import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js'; import '@lion/input-iban/lion-input-iban.js';
import '@lion/input-range/lion-input-range.js';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js'; import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js'; import '@lion/radio-group/lion-radio-group.js';
@ -41,10 +42,10 @@ For usage and installation please see the appropriate packages.
label="Last Name" label="Last Name"
.validators="${[new Required()]}" .validators="${[new Required()]}"
></lion-input> ></lion-input>
<!-- TODO: lion-input-birthdate -->
<lion-input-date <lion-input-date
name="date" name="date"
label="Date of application" label="Date of application"
.modelValue="${new Date('2000-12-12')}"
.validators="${[new Required()]}" .validators="${[new Required()]}"
></lion-input-date> ></lion-input-date>
<lion-textarea <lion-textarea
@ -66,11 +67,9 @@ For usage and installation please see the appropriate packages.
<lion-checkbox name="checkers[]" value="baz" label="I like baz"></lion-checkbox> <lion-checkbox name="checkers[]" value="baz" label="I like baz"></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<lion-radio-group <lion-radio-group
class="vertical"
name="dinosaurs" name="dinosaurs"
label="Favorite dinosaur" label="Favorite dinosaur"
.validators="${[new Required()]}" .validators="${[new Required()]}"
error-message="Dinosaurs error message"
> >
<lion-radio name="dinosaurs[]" value="allosaurus" label="allosaurus"></lion-radio> <lion-radio name="dinosaurs[]" value="allosaurus" label="allosaurus"></lion-radio>
<lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio> <lion-radio name="dinosaurs[]" value="brontosaurus" label="brontosaurus"></lion-radio>
@ -84,7 +83,7 @@ For usage and installation please see the appropriate packages.
</lion-options> </lion-options>
</lion-select-rich> </lion-select-rich>
<lion-select <lion-select
label="Make a selection (simple select)" label="Lyrics"
name="lyrics" name="lyrics"
.validators="${[new Required()]}" .validators="${[new Required()]}"
> >
@ -94,13 +93,21 @@ For usage and installation please see the appropriate packages.
<option value="3">Drop down for what?</option> <option value="3">Drop down for what?</option>
</select> </select>
</lion-select> </lion-select>
<lion-input-range
name="range"
min="1"
max="5"
.modelValue="${2.3}"
unit="%"
step="0.1"
label="Input range"
></lion-input-range>
<lion-checkbox-group name="terms" .validators="${[new Required()]}"> <lion-checkbox-group name="terms" .validators="${[new Required()]}">
<lion-checkbox <lion-checkbox
name="terms[]" name="terms[]"
label="I blindly accept all terms and conditions" label="I blindly accept all terms and conditions"
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
<!-- TODO: slider -->
<lion-textarea name="comments" label="Comments"></lion-textarea> <lion-textarea name="comments" label="Comments"></lion-textarea>
<div class="buttons"> <div class="buttons">
<lion-button raised>Submit</lion-button> <lion-button raised>Submit</lion-button>
@ -126,13 +133,14 @@ import '@lion/input-amount/lion-input-amount.js';
import '@lion/input-date/lion-input-date.js'; import '@lion/input-date/lion-input-date.js';
import '@lion/input-email/lion-input-email.js'; import '@lion/input-email/lion-input-email.js';
import '@lion/input-iban/lion-input-iban.js'; import '@lion/input-iban/lion-input-iban.js';
import '@lion/input-range/lion-input-range.js';
import '@lion/input/lion-input.js'; import '@lion/input/lion-input.js';
import '@lion/option/lion-option.js'; import '@lion/option/lion-option.js';
import '@lion/radio-group/lion-radio-group.js'; import '@lion/radio-group/lion-radio-group.js';
import '@lion/radio/lion-radio.js'; import '@lion/radio/lion-radio.js';
import '@lion/select-rich/lion-select-rich.js'; import '@lion/select/lion-select.js';
import '@lion/select-rich/lion-options.js'; import '@lion/select-rich/lion-options.js';
import '@lion/option/lion-option.js'; import '@lion/select-rich/lion-select-rich.js';
import '@lion/textarea/lion-textarea.js'; import '@lion/textarea/lion-textarea.js';
import { MinLength, Required } from '@lion/validate'; import { MinLength, Required } from '@lion/validate';
``` ```