Skip to content

Commit

Permalink
Update changeset demo to include character counter
Browse files Browse the repository at this point in the history
  • Loading branch information
@ynotdraw
ynotdraw committed Jul 25, 2023
1 parent ef4e1fa commit 3d6c159
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 63 deletions.
6 changes: 6 additions & 0 deletions .changeset/hip-bulldogs-kick.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@crowdstrike/ember-toucan-core': minor
'@crowdstrike/ember-toucan-form': minor
---

Updated all form elements to have the `w-full` class, making them full width by default. The width of the element is now determined by the container. To restrict the width of the element, use a wrapping tag with an appropriate class name applied.
186 changes: 123 additions & 63 deletions docs/toucan-form/changeset-validation/demo/base-demo.md
View file
Original file line number Diff line number Diff line change
@@ -1,72 +1,130 @@
```hbs template
<ToucanForm
class='space-y-4 max-w-xs'
@data={{changeset this.data this.validations}}
@dataMode='mutable'
@onSubmit={{this.handleSubmit}}
@validate={{(validate-changeset)}}
as |form|
>
<form.Input @label='First name' @name='firstName' />
<form.Input @label='Last name' @name='lastName' />
<form.Textarea @label='Comment' @name='comment' />
<form.CheckboxGroup @label='Fruit selection' @name='fruit' as |group|>
<group.CheckboxField
@label='Banana'
@value='banana'
data-checkbox-group-1
/>
<group.CheckboxField @label='Apple' @value='apple' data-checkbox-group-2 />
<group.CheckboxField @label='Pear' @value='pear' data-checkbox-group-3 />
</form.CheckboxGroup>
<form.RadioGroup @label='Vegetable selection' @name='vegetable' as |group|>
<group.RadioField @label='Avocado' @value='avocado' data-radio-1 />
<group.RadioField @label='Broccoli' @value='broccoli' data-radio-2 />
</form.RadioGroup>
<form.Autocomplete
@contentClass='z-10'
@label='Color'
@name='color'
@noResultsText='No results'
@options={{this.options}}
as |autocomplete|
>
<autocomplete.Option>
{{autocomplete.option}}
</autocomplete.Option>
</form.Autocomplete>
<form.Multiselect
@contentClass='z-10'
@label='Multiselect'
@name='multiselect'
@options={{this.options}}
<div class='mx-auto max-w-md'>
<ToucanForm
class='space-y-4'
@data={{changeset this.data this.validations}}
@dataMode='mutable'
@onSubmit={{this.handleSubmit}}
@validate={{(validate-changeset)}}
as |form|
>
<:noResults>No results</:noResults>
<form.Input @label='First name' @name='firstName' />
<form.Input @label='Last name' @name='lastName'>
<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</form.Input>
<form.Textarea @label='Comment' @name='comment' />
<form.Textarea @label='Description' @name='description'>
<:secondary as |secondary|>
<secondary.CharacterCount @max={{255}} />
</:secondary>
</form.Textarea>
<form.CheckboxGroup @label='Fruit selection' @name='fruit' as |group|>
<group.CheckboxField
@label='Banana'
@value='banana'
data-checkbox-group-1
/>
<group.CheckboxField
@label='Apple'
@value='apple'
data-checkbox-group-2
/>
<group.CheckboxField @label='Pear' @value='pear' data-checkbox-group-3 />
</form.CheckboxGroup>
<form.RadioGroup @label='Vegetable selection' @name='vegetable' as |group|>
<group.RadioField @label='Avocado' @value='avocado' data-radio-1 />
<group.RadioField @label='Broccoli' @value='broccoli' data-radio-2 />
</form.RadioGroup>
<form.Autocomplete
@contentClass='z-10'
@label='Color'
@name='color'
@noResultsText='No results'
@options={{this.options}}
as |autocomplete|
>
<autocomplete.Option>
{{autocomplete.option}}
</autocomplete.Option>
</form.Autocomplete>
<form.Multiselect
@contentClass='z-10'
@label='Multiselect'
@name='multiselect'
@optionKey='label'
@options={{this.options}}
>
<:noResults>No results</:noResults>
<:remove as |remove|>
<remove.Remove @label={{(concat 'Remove' ' ' remove.option.label)}} />
</:remove>
<:remove as |remove|>
<remove.Remove @label={{(concat 'Remove' ' ' remove.option.label)}} />
</:remove>
<:default as |multiselect|>
<multiselect.Option>{{multiselect.option.label}}</multiselect.Option>
</:default>
</form.Multiselect>
<:default as |multiselect|>
<multiselect.Option>{{multiselect.option.label}}</multiselect.Option>
</:default>
</form.Multiselect>
<form.FileInput
@label='Files to attach'
@trigger='Select files'
@deleteLabel='Delete'
@name='files'
/>
<form.FileInput
@label='Files to attach'
@trigger='Select files'
@deleteLabel='Delete'
@name='files'
/>
<form.Checkbox @label='Agree to the Terms' @name='terms' />
<form.Autocomplete
@contentClass='z-10'
@label='Color'
@name='color'
@noResultsText='No results'
@options={{this.options}}
as |autocomplete|
>
<autocomplete.Option>
{{autocomplete.option}}
</autocomplete.Option>
</form.Autocomplete>
<form.Multiselect
@contentClass='z-10'
@label='Multiselect'
@name='multiselect'
@options={{this.options}}
>
<:noResults>No results</:noResults>
<:remove as |remove|>
<remove.Remove @label={{(concat 'Remove' ' ' remove.option.label)}} />
</:remove>
<:default as |multiselect|>
<multiselect.Option>{{multiselect.option.label}}</multiselect.Option>
</:default>
</form.Multiselect>
<form.FileInput
@label='Files to attach'
@trigger='Select files'
@deleteLabel='Delete'
@name='files'
/>
<form.Checkbox @label='Agree to the Terms' @name='terms' />
<form.Checkbox @label='Agree to the Terms' @name='terms' />
<Button type='submit'>Submit</Button>
</ToucanForm>
<Button class='w-full' type='submit'>Submit</Button>
</ToucanForm>
</div>
```

```js component
Expand All @@ -75,6 +133,7 @@ import { action } from '@ember/object';
import {
validatePresence,
validateFormat,
validateLength,
} from 'ember-changeset-validations/validators';

export default class extends Component {
Expand All @@ -83,10 +142,11 @@ export default class extends Component {
validations = {
color: validatePresence(true),
comment: validatePresence(true),
description: [validatePresence(true), validateLength({ max: 255 })],
files: validatePresence(true),
firstName: validatePresence(true),
fruit: validatePresence(true),
lastName: validatePresence(true),
lastName: [validatePresence(true), validateLength({ max: 255 })],
multiselect: validatePresence(true),
terms: validatePresence(true),
vegetable: validatePresence(true),
Expand Down

0 comments on commit 3d6c159

Please sign in to comment.