-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert addon to use template tag #84
Changes from all commits
bf614b1
8a03963
f7ae1ea
2ae55e0
4ceb555
e58f052
f1d8baa
67a5169
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'ember-headless-form': patch | ||
--- | ||
|
||
Convert addon to use template tag |
This file was deleted.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I love seeing these components in a single file! This is great. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,6 @@ | ||
import Component from '@glimmer/component'; | ||
import { assert } from '@ember/debug'; | ||
import { on } from '@ember/modifier'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yay explicit imports! 🎉 |
||
import { action } from '@ember/object'; | ||
|
||
// Possible values for the input type, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types | ||
|
@@ -107,4 +108,16 @@ export default class HeadlessFormControlInputComponent extends Component<Headles | |
assert('Expected HTMLInputElement', e.target instanceof HTMLInputElement); | ||
this.args.setValue(e.target.value); | ||
} | ||
<template> | ||
<input | ||
name={{@name}} | ||
type={{@type}} | ||
value={{@value}} | ||
id={{@fieldId}} | ||
aria-invalid={{if @invalid "true"}} | ||
aria-describedby={{if @invalid @errorId}} | ||
...attributes | ||
{{on "input" this.handleInput}} | ||
/> | ||
</template> | ||
} |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,87 @@ | ||
import { hash } from '@ember/helper'; | ||
|
||
import { uniqueId } from '../../utils'; | ||
import HeadlessFormControlRadioGroupLabelComponent from './radio-group/label'; | ||
import HeadlessFormControlRadioComponent from './radio-group/radio'; | ||
|
||
import type { TemplateOnlyComponent } from '@ember/component/template-only'; | ||
import type { WithBoundArgs } from '@glint/template'; | ||
|
||
export interface HeadlessFormControlRadioGroupComponentSignature { | ||
Element: HTMLDivElement; | ||
Args: { | ||
// the following are private arguments curried by the component helper, so users will never have to use those | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ah, I like this comment and the |
||
|
||
/* | ||
* @internal | ||
*/ | ||
name: string; | ||
|
||
/* | ||
* @internal | ||
*/ | ||
selected: string; | ||
|
||
/* | ||
* @internal | ||
*/ | ||
setValue: (value: string) => void; | ||
|
||
/* | ||
* @internal | ||
*/ | ||
invalid: boolean; | ||
|
||
/* | ||
* @internal | ||
*/ | ||
errorId: string; | ||
}; | ||
Blocks: { | ||
default: [ | ||
{ | ||
/** | ||
* Yielded component that renders the `<input type="radio">` element. | ||
*/ | ||
Radio: WithBoundArgs< | ||
typeof HeadlessFormControlRadioComponent, | ||
'name' | 'selected' | 'setValue' | ||
>; | ||
|
||
Label: WithBoundArgs< | ||
typeof HeadlessFormControlRadioGroupLabelComponent, | ||
'id' | ||
>; | ||
} | ||
]; | ||
}; | ||
} | ||
|
||
const HeadlessFormControlRadioGroupComponent: TemplateOnlyComponent<HeadlessFormControlRadioGroupComponentSignature> = | ||
<template> | ||
{{#let (uniqueId) as |labelId|}} | ||
<div | ||
role="radiogroup" | ||
aria-labelledby={{labelId}} | ||
aria-invalid={{if @invalid "true"}} | ||
aria-describedby={{if @invalid @errorId}} | ||
...attributes | ||
> | ||
{{yield | ||
(hash | ||
Radio=(component | ||
HeadlessFormControlRadioComponent | ||
name=@name | ||
selected=@selected | ||
setValue=@setValue | ||
) | ||
Label=(component | ||
HeadlessFormControlRadioGroupLabelComponent id=labelId | ||
) | ||
) | ||
}} | ||
</div> | ||
{{/let}} | ||
</template>; | ||
|
||
export default HeadlessFormControlRadioGroupComponent; |
This file was deleted.
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import type { TemplateOnlyComponent } from '@ember/component/template-only'; | ||
|
||
export interface HeadlessFormControlRadioGroupLabelComponentSignature { | ||
Element: HTMLDivElement; | ||
Args: { | ||
// the following are private arguments curried by the component helper, so users will never have to use those | ||
|
||
/** | ||
* @internal | ||
*/ | ||
id: string; | ||
}; | ||
Blocks: { | ||
default: []; | ||
}; | ||
} | ||
|
||
const HeadlessFormControlRadioGroupLabelComponent: TemplateOnlyComponent<HeadlessFormControlRadioGroupLabelComponentSignature> = | ||
<template><div id={{@id}} ...attributes>{{yield}}</div></template>; | ||
|
||
export default HeadlessFormControlRadioGroupLabelComponent; |
This file was deleted.
This file was deleted.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm surprised to see double quotes here, as we're now (sort of) in JS, and they were single quotes in the hbs... 🤷
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, didn't realise this before. Probably our prettier config is a bit inconsistent. I did wonder why we have single quotes in hbs before (which in other projects were usually double quotes)...