Skip to content

Commit

Permalink
New in Ember v4.4: Used the {{unique-id}} helper to generate IDs
Browse files Browse the repository at this point in the history
  • Loading branch information
ijlee2 committed Aug 1, 2023
1 parent 09ada51 commit bd75af0
Show file tree
Hide file tree
Showing 4 changed files with 92 additions and 97 deletions.
132 changes: 67 additions & 65 deletions app/components/ui/form.hbs
Original file line number Diff line number Diff line change
@@ -1,68 +1,70 @@
<form
aria-describedby={{if
@instructions
(concat this.formId "-instructions")
}}
aria-labelledby={{if @title (concat this.formId "-title")}}
data-test-form={{or @title ""}}
local-class="form"
{{autofocus}}
{{on "submit" this.submitForm}}
>
<Ui::Form::Information
@formId={{this.formId}}
@instructions={{@instructions}}
@title={{@title}}
/>

<ContainerQuery
@features={{hash wide=(width min=480)}}
as |CQ|
>
{{yield
(hash
Checkbox=(component
"ui/form/checkbox"
changeset=this.changeset
isInline=true
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Input=(component
"ui/form/input"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Number=(component
"ui/form/number"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Select=(component
"ui/form/select"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Textarea=(component
"ui/form/textarea"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
)
{{#let (unique-id) as |formId|}}
<form
aria-describedby={{if
@instructions
(concat formId "-instructions")
}}
</ContainerQuery>
aria-labelledby={{if @title (concat formId "-title")}}
data-test-form={{or @title ""}}
local-class="form"
{{autofocus}}
{{on "submit" this.submitForm}}
>
<Ui::Form::Information
@formId={{formId}}
@instructions={{@instructions}}
@title={{@title}}
/>

<div local-class="actions">
<button
data-test-button="Submit"
local-class="submit-button"
type="submit"
<ContainerQuery
@features={{hash wide=(width min=480)}}
as |CQ|
>
{{t "components.ui.form.submit"}}
</button>
</div>
</form>
{{yield
(hash
Checkbox=(component
"ui/form/checkbox"
changeset=this.changeset
isInline=true
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Input=(component
"ui/form/input"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Number=(component
"ui/form/number"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Select=(component
"ui/form/select"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
Textarea=(component
"ui/form/textarea"
changeset=this.changeset
isWide=CQ.features.wide
onUpdate=this.updateChangeset
)
)
}}
</ContainerQuery>

<div local-class="actions">
<button
data-test-button="Submit"
local-class="submit-button"
type="submit"
>
{{t "components.ui.form.submit"}}
</button>
</div>
</form>
{{/let}}
3 changes: 0 additions & 3 deletions app/components/ui/form.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
import { action } from '@ember/object';
import { guidFor } from '@ember/object/internals';
import Component from '@glimmer/component';
import { TrackedObject } from 'tracked-built-ins';

export default class UiFormComponent extends Component {
formId = guidFor(this);

changeset = new TrackedObject(this.args.data ?? {});

@action submitForm(event) {
Expand Down
48 changes: 25 additions & 23 deletions app/components/ui/form/field.hbs
Original file line number Diff line number Diff line change
@@ -1,25 +1,27 @@
<div
local-class="container
{{if @isInline 'is-inline'}}
{{if @isWide 'is-wide'}}
{{unless @errorMessage 'no-feedback'}}
"
>
<div local-class="label">
{{yield (hash inputId=this.inputId) to="label"}}
</div>

<div local-class="field">
{{yield (hash inputId=this.inputId) to="field"}}
</div>
{{#let (unique-id) as |inputId|}}
<div
local-class="container
{{if @isInline 'is-inline'}}
{{if @isWide 'is-wide'}}
{{unless @errorMessage 'no-feedback'}}
"
>
<div local-class="label">
{{yield (hash inputId=inputId) to="label"}}
</div>

{{#if @errorMessage}}
<div
data-test-feedback
local-class="feedback is-error"
role="alert"
>
{{@errorMessage}}
<div local-class="field">
{{yield (hash inputId=inputId) to="field"}}
</div>
{{/if}}
</div>

{{#if @errorMessage}}
<div
data-test-feedback
local-class="feedback is-error"
role="alert"
>
{{@errorMessage}}
</div>
{{/if}}
</div>
{{/let}}
6 changes: 0 additions & 6 deletions app/components/ui/form/field.js

This file was deleted.

0 comments on commit bd75af0

Please sign in to comment.