Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-radio-button

Package Overview
Dependencies
Maintainers
2
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-radio-button - npm Package Compare versions

Comparing version 0.1.3 to 1.0.0

addon/components/labeled-radio-button.js

61

addon/components/radio-button.js
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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc