Skip to content

Commit 74036d5

Browse files
GabrielCousinGabrielCousin
committed
Create Octane components
1 parent 158e44e commit 74036d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+386
-528
lines changed

‎.template-lintrc.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,16 @@
22

33
module.exports = {
44
extends: 'octane',
5+
rules: {
6+
'no-positive-tabindex': 'off',
7+
},
8+
overrides: [
9+
{
10+
files: ['tests/dummy/app/**/*.hbs'],
11+
rules: {
12+
'no-inline-styles': 'off',
13+
'require-input-label': 'off',
14+
},
15+
},
16+
],
517
};

‎README.md‎

Lines changed: 51 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ Clicking on a `radio-button` will set `groupValue` to its `value`.
1515
The block form emits a label wrapping the input element and any elements passed to the block.
1616

1717
**Template:**
18+
1819
```javascript
19-
{{#radio-button
20-
value="blue"
21-
groupValue=color
22-
changed=(action "colorChanged")
23-
}}
24-
<span>Blue</span>
25-
{{/radio-button}}
20+
<RadioButton
21+
@value="blue"
22+
@groupValue=color
23+
@changed={{this.colorChanged}}
24+
>
25+
<span>Blue</span>
26+
</RadioButton>
2627

2728
/* results in */
2829
<label id="ember346" class="ember-view ember-radio-button">
@@ -36,12 +37,12 @@ The block form emits a label wrapping the input element and any elements passed
3637
If you want more control over the DOM, the non-block form only emits a single input element
3738

3839
```javascript
39-
{{radio-button
40-
value="green"
41-
groupValue=color
42-
name="colors"
43-
changed=(action "colorChanged")
44-
}}
40+
<RadioButton
41+
@value="green"
42+
@groupValue={{this.color}}
43+
@name="colors"
44+
@changed={{this.colorChanged}}
45+
/>
4546

4647
/* results in */
4748
<input id="ember345" class="ember-view" type="radio" value="green">
@@ -53,43 +54,42 @@ If you want more control over the DOM, the non-block form only emits a single in
5354

5455
## Supported Ember Versions
5556

56-
| ember-radio-button version | supports |
57-
|----------------------------|--------------------------|
58-
| 2.x | Ember 2.8+ |
59-
| 1.x | Ember 1.11+ |
57+
| ember-radio-button version | supports |
58+
| -------------------------- | ----------- |
59+
| 3.x | Ember 3.16+ |
60+
| 2.x | Ember 2.8+ |
61+
| 1.x | Ember 1.11+ |
6062

6163
## Properties
6264

63-
*Required:*
64-
65-
| name | type | description |
66-
|------------|-----------|------------------------|
67-
| value | any |the unique value represented by the radio button |
68-
| groupValue | any |the value representing a radio group's current value. supply the same `groupValue` to every radio-button in a group |
69-
65+
_Required:_
7066

71-
*Optional:*
67+
| name | type | description |
68+
| ---------- | ---- | ------------------------------------------------------------------------------------------------------------------- |
69+
| value | any | the unique value represented by the radio button |
70+
| groupValue | any | the value representing a radio group's current value. supply the same `groupValue` to every radio-button in a group |
7271

73-
| name | type | description |
74-
|------------|-----------|------------------------|
75-
| ariaDescribedby | string | applies an `aria-describedby` attribute to the input element |
76-
| ariaLabelledby | string | applies an `aria-labelledby` attribute to the input element |
77-
| autofocus | boolean | applies the `autofocus` property to the input element |
78-
| checkedClass | string | classname to apply to the `label` element when the input it wraps is checked. block form only. defaults to `"checked"` |
79-
| classNames | string | applies additional classnames to the `label` element (block form only) |
80-
| disabled | boolean | applies the `disabled` property to the input element |
81-
| name | string | applies the `name` property to the input element |
82-
| radioClass | string | applies additional classnames to the input element |
83-
| radioId | string | sets the `id` of the input element and the `for` property to the label element |
84-
| required | boolean | applies the `required` property to the input element |
85-
| tabindex | number | applies a `tabindex` property to the input element |
72+
_Optional:_
8673

87-
*Actions:*
74+
| name | type | description |
75+
| --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------- |
76+
| ariaDescribedby | string | applies an `aria-describedby` attribute to the input element |
77+
| ariaLabelledby | string | applies an `aria-labelledby` attribute to the input element |
78+
| autofocus | boolean | applies the `autofocus` property to the input element |
79+
| checkedClass | string | classname to apply to the `label` element when the input it wraps is checked. block form only. defaults to `"checked"` |
80+
| classNames | string | applies additional classnames to the `label` element (block form only) |
81+
| disabled | boolean | applies the `disabled` property to the input element |
82+
| name | string | applies the `name` property to the input element |
83+
| radioClass | string | applies additional classnames to the input element |
84+
| radioId | string | sets the `id` of the input element and the `for` property to the label element |
85+
| required | boolean | applies the `required` property to the input element |
86+
| tabindex | number | applies a `tabindex` property to the input element |
8887

89-
| name | description |
90-
|------------|------------------------|
91-
| changed | fires when user interaction causes a radio-button to update `groupValue`|
88+
_Actions:_
9289

90+
| name | description |
91+
| ------- | ------------------------------------------------------------------------ |
92+
| changed | fires when user interaction causes a radio-button to update `groupValue` |
9393

9494
## Installing
9595

@@ -106,23 +106,23 @@ Applications not using htmlbars should use version 0.1.3 or the `pre-htmlbars` b
106106

107107
## Collaborating on this repo
108108

109-
* `git clone <repository-url>` this repository
110-
* `cd ember-radio-button`
111-
* `npm install`
109+
- `git clone <repository-url>` this repository
110+
- `cd ember-radio-button`
111+
- `npm install`
112112

113113
## Running
114114

115-
* `ember serve`
116-
* Visit your app at [http://localhost:4200](http://localhost:4200).
115+
- `ember serve`
116+
- Visit your app at [http://localhost:4200](http://localhost:4200).
117117

118118
## Running Tests
119119

120-
* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
121-
* `ember test`
122-
* `ember test --server`
120+
- `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
121+
- `ember test`
122+
- `ember test --server`
123123

124124
## Building
125125

126-
* `ember build`
126+
- `ember build`
127127

128128
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).

‎addon/components/radio-button-input.hbs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<input ...attributes type="radio" aria-checked={{this.checkedStr}} value={{@value}} {{on "change" this.change}} />

‎addon/components/radio-button-input.js‎

Lines changed: 13 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,22 @@
1-
import Component from '@ember/component';
2-
import { computed } from '@ember/object';
3-
import { isEqual } from '@ember/utils';
4-
import { run } from '@ember/runloop';
1+
import Component from '@glimmer/component';
2+
import { once } from '@ember/runloop';
3+
import { action } from '@ember/object';
54

6-
export default Component.extend({
7-
tagName: 'input',
8-
type: 'radio',
9-
10-
// value - required
11-
// groupValue - required
12-
13-
// autofocus - boolean
14-
// disabled - optional
15-
// name - optional
16-
// required - optional
17-
// radioClass - string
18-
// radioId - string
19-
// tabindex - number
20-
// ariaLabelledby - string
21-
// ariaDescribedby - string
22-
23-
defaultLayout: null, // ie8 support
24-
25-
attributeBindings: [
26-
'autofocus',
27-
'checked',
28-
'disabled',
29-
'name',
30-
'required',
31-
'tabindex',
32-
'type',
33-
'value',
34-
'ariaLabelledby:aria-labelledby',
35-
'ariaDescribedby:aria-describedby',
36-
'checkedStr:aria-checked',
37-
],
38-
39-
checked: computed('groupValue', 'value', function () {
40-
return isEqual(this.groupValue, this.value);
41-
}).readOnly(),
42-
43-
checkedStr: computed('checked', function () {
44-
let checked = this.checked;
5+
export default class RadioButtonInputComponent extends Component {
6+
get checkedStr() {
7+
const checked = this.args.checked;
458

469
if (typeof checked === 'boolean') {
4710
return checked.toString();
4811
}
4912

5013
return null;
51-
}),
52-
53-
invokeChangedAction() {
54-
let value = this.value;
55-
let changedAction = this.changed;
56-
57-
if (typeof changedAction === 'string') {
58-
this.sendAction('changed', value);
59-
return;
60-
}
61-
62-
if (changedAction) {
63-
changedAction(value);
64-
}
65-
},
66-
67-
change() {
68-
let value = this.value;
69-
let groupValue = this.groupValue;
14+
}
7015

71-
if (groupValue !== value) {
72-
this.set('groupValue', value);
73-
run.once(this, 'invokeChangedAction');
16+
@action change() {
17+
if (this.args.groupValue !== this.args.value) {
18+
// this.set('groupValue', value);
19+
once(this.args, 'changed', this.args.value);
7420
}
75-
},
76-
});
21+
}
22+
}

‎addon/components/radio-button.hbs‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{{#if (has-block)}}
2+
<label class="ember-radio-button {{if this.checked this.checkedClass}} {{this.joinedClassNames}}" for={{@radioId}}>
3+
<RadioButtonInput
4+
class={{@radioClass}}
5+
id={{@radioId}}
6+
autofocus={{@autofocus}}
7+
disabled={{@disabled}}
8+
name={{@name}}
9+
required={{@required}}
10+
tabindex={{@tabindex}}
11+
@groupValue={{@groupValue}}
12+
checked={{this.checked}}
13+
@value={{@value}}
14+
aria-labelledby={{@ariaLabelledby}}
15+
aria-describedby={{@ariaDescribedby}}
16+
@changed={{this.changed}}
17+
/>
18+
{{yield}}
19+
</label>
20+
{{else}}
21+
<RadioButtonInput
22+
class={{@radioClass}}
23+
id={{@radioId}}
24+
autofocus={{@autofocus}}
25+
disabled={{@disabled}}
26+
name={{@name}}
27+
required={{@required}}
28+
tabindex={{@tabindex}}
29+
@groupValue={{@groupValue}}
30+
checked={{this.checked}}
31+
@value={{@value}}
32+
aria-labelledby={{@ariaLabelledby}}
33+
aria-describedby={{@ariaDescribedby}}
34+
@changed={{this.changed}}
35+
/>
36+
{{/if}}

‎addon/components/radio-button.js‎

Lines changed: 20 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
1-
import Component from '@ember/component';
2-
import { computed } from '@ember/object';
1+
import Component from '@glimmer/component';
2+
import { action } from '@ember/object';
33
import { isEqual } from '@ember/utils';
4-
import layout from '../templates/components/radio-button';
5-
6-
export default Component.extend({
7-
tagName: '',
8-
layout,
94

5+
export default class RadioButtonComponent extends Component {
106
// value - passed in, required, the value for this radio button
117
// groupValue - passed in, required, the currently selected value
128

@@ -19,37 +15,28 @@ export default Component.extend({
1915
// ariaLabelledby - string
2016
// ariaDescribedby - string
2117

22-
joinedClassNames: computed('classNames', function () {
23-
let classNames = this.classNames;
18+
get joinedClassNames() {
19+
const classNames = this.args.classNames;
2420
if (classNames && classNames.length && classNames.join) {
2521
return classNames.join(' ');
2622
}
2723
return classNames;
28-
}),
29-
30-
// is this needed here or just on radio-button-input?
31-
defaultLayout: null, // ie8 support
24+
}
3225

33-
checkedClass: 'checked',
26+
get checkedClass() {
27+
return this.args.checkedClass || 'checked';
28+
}
3429

35-
checked: computed('groupValue', 'value', function () {
36-
return isEqual(this.groupValue, this.value);
37-
}).readOnly(),
30+
get checked() {
31+
return isEqual(this.args.groupValue, this.args.value);
32+
}
3833

39-
actions: {
40-
changed(newValue) {
41-
let changedAction = this.changed;
34+
@action changed(newValue) {
35+
let changedAction = this.args.changed;
4236

43-
// support legacy actions
44-
if (typeof changedAction === 'string') {
45-
this.sendAction('changed', newValue);
46-
return;
47-
}
48-
49-
// providing a closure action is optional
50-
if (changedAction) {
51-
changedAction(newValue);
52-
}
53-
},
54-
},
55-
});
37+
// providing a closure action is optional
38+
if (changedAction) {
39+
changedAction(newValue);
40+
}
41+
}
42+
}

‎addon/templates/components/radio-button-input.hbs‎

Whitespace-only changes.

‎addon/templates/components/radio-button.hbs‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)