ember-radio-button
Advanced tools
Comparing version 0.1.3 to 1.0.0
import Ember from 'ember'; | ||
import RadioButtonBase | ||
from 'ember-radio-button/components/radio-button-base'; | ||
import { | ||
boundAttributeKeys | ||
} from 'ember-radio-button/components/radio-button-base'; | ||
export default Ember.Component.extend({ | ||
tagName: 'span', | ||
classNames: 'radio-button', | ||
classNameBindings: ['checked', 'disabled'], | ||
var computed = Ember.computed; | ||
var on = Ember.on; | ||
export default RadioButtonBase.extend({ | ||
value: null, | ||
groupValue: null, | ||
disabled: false, | ||
scheduleChangedAction: function(){ | ||
Ember.run.schedule('actions', this, function(){ | ||
this.sendAction('changed', this.get('value')); | ||
}); | ||
}, | ||
wrapInLabelIfUsedAsBlock: on('init', function() { | ||
if (this.get('template')) { | ||
this.set('tagName', 'label'); | ||
this.set('layoutName', 'components/labeled-radio-button'); | ||
checked: function(){ | ||
// our change event handler becomes unused | ||
this.set('change', undefined); | ||
// don't bind name, type, etc to the label | ||
var originalAttrs = this.get('attributeBindings'); | ||
var updatedAttrs = Ember.copy(originalAttrs).removeObjects( | ||
boundAttributeKeys | ||
); | ||
this.set('attributeBindings', updatedAttrs); | ||
} | ||
}), | ||
checked: computed('groupValue', 'value', function(){ | ||
return this.get('groupValue') === this.get('value'); | ||
}.property('groupValue', 'value'), | ||
}).readOnly(), | ||
click: function(){ | ||
if (this.get('disabled')){ return; } | ||
change: function() { | ||
var value = this.get('value'); | ||
var groupValue = this.get('groupValue'); | ||
this.set('groupValue', value); | ||
if (groupValue !== value){ | ||
this.scheduleChangedAction(); | ||
this.set('groupValue', value); | ||
Ember.run.once(this, 'sendChangedAction'); | ||
} | ||
}, | ||
sendChangedAction: function() { | ||
this.sendAction('changed', this.get('value')); | ||
}, | ||
actions: { | ||
// when used as a block, our layout wraps a non-block | ||
// radio-button which maps changed to this | ||
innerRadioChanged: function(value) { | ||
this.sendAction('changed', value); | ||
} | ||
} | ||
}); | ||
{ | ||
"name": "ember-radio-button", | ||
"dependencies": { | ||
"handlebars": "~1.3.0", | ||
"handlebars": "~2.0.0", | ||
"jquery": "^1.11.1", | ||
"ember": "1.7.0", | ||
"ember-data": "1.0.0-beta.10", | ||
"ember-resolver": "~0.1.7", | ||
"ember": "1.9.1", | ||
"ember-data": "1.0.0-beta.14", | ||
"ember-resolver": "~0.1.11", | ||
"loader.js": "stefanpenner/loader.js#1.0.1", | ||
@@ -17,2 +17,2 @@ "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.3", | ||
} | ||
} | ||
} |
{ | ||
"name": "ember-radio-button", | ||
"version": "0.1.3", | ||
"version": "1.0.0", | ||
"directories": { | ||
@@ -22,6 +22,5 @@ "doc": "doc", | ||
"broccoli-asset-rev": "0.3.1", | ||
"broccoli-ember-hbs-template-compiler": "^1.6.1", | ||
"ember-cli": "0.1.2", | ||
"ember-cli": "0.1.7", | ||
"ember-cli-content-security-policy": "0.3.0", | ||
"ember-export-application-global": "^1.0.0", | ||
"ember-cli-htmlbars": "^0.6.0", | ||
"ember-cli-ic-ajax": "0.1.1", | ||
@@ -31,2 +30,3 @@ "ember-cli-inject-live-reload": "^1.3.0", | ||
"ember-data": "1.0.0-beta.10", | ||
"ember-export-application-global": "^1.0.0", | ||
"express": "^4.8.5", | ||
@@ -33,0 +33,0 @@ "glob": "^4.0.5" |
@@ -1,46 +0,42 @@ | ||
# ember-radio-button | ||
# ember-radio-button [![Build Status](https://travis-ci.org/yapplabs/ember-radio-button.svg?branch=master)](https://travis-ci.org/yapplabs/ember-radio-button) [![Ember Observer Score](http://emberobserver.com/badges/ember-radio-button.svg)](http://emberobserver.com/addons/ember-radio-button) | ||
ember-cli addon for an Ember `radio-button` component. | ||
**Note**: **ember-radio-button 1.0.0 requires using htmlbars**. For applications not using htmlbars, use version 0.1.3 or the `pre-htmlbars` | ||
branch | ||
It allows a group of radio buttons with different `value` properties | ||
to be compared to a single property called `groupValue`. | ||
This ember-cli addon provides a `radio-button` component. | ||
Clicking on the component will set `groupValue` to `value`. The radio | ||
button will be in a checked state when `groupValue === value`. | ||
Pass two properties to the component: `value` and `groupValue`. A `radio-button` | ||
will be in a checked state when `groupValue === value`. | ||
Clicking on a `radio-button` will set `groupValue` to its `value`. | ||
The component exposes a `changed` action that allows you to do something | ||
when clicking one of your radio buttons results in `groupValue` changing. | ||
This is useful if you want to autosave a model in response to a user action, | ||
rather than with an observer. | ||
when a user interaction causes one of your radio buttons to update `groupValue`. | ||
To install this addon in your ember-cli project, use `npm install ember-radio-button --save-dev`. | ||
Run the dummy app for examples and documentation. | ||
**Template:** | ||
```javascript | ||
{{radio-button | ||
value="green" | ||
groupValue=color | ||
changed="colorChanged"}} | ||
Handlebars: | ||
```javascript | ||
{{#radio-button value="green" groupValue=color changed="colorChanged"}} | ||
Green | ||
{{#radio-button | ||
value="blue" | ||
groupValue=color | ||
changed="colorChanged"}} | ||
Blue | ||
{{/radio-button}} | ||
{{#radio-button value="blue" groupValue=color changed="colorChanged"}} | ||
Blue | ||
{{/radio-button}} | ||
``` | ||
Results in: | ||
**Results in:** | ||
```html | ||
<span id="ember336" class="ember-view radio-button"> | ||
<label> | ||
<input id="ember345" class="ember-view" type="radio" value="green"> | ||
Green | ||
</label> | ||
</span> | ||
<span id="ember347" class="ember-view radio-button checked"> | ||
<label> | ||
<input id="ember348" class="ember-view" type="radio" value="blue"> | ||
Blue | ||
</label> | ||
</span> | ||
<input id="ember345" class="ember-view" type="radio" value="green"> | ||
<label id="ember346" class="ember-view"> | ||
<input id="ember347" class="ember-view" type="radio" value="blue"> | ||
Blue | ||
</label> | ||
``` | ||
This README outlines the details of collaborating on this Ember addon. | ||
See the dummy app and tests for more example usage | ||
@@ -47,0 +43,0 @@ ## Installing |
@@ -11,3 +11,6 @@ import Ember from 'ember'; | ||
} | ||
} | ||
}, | ||
reservation: Ember.Object.create({ | ||
number: 'one' | ||
}), | ||
}); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
54394
55
419
1
0
68