Skip to content

Commit 9808e51

Browse files
crodriguez1acrodriguez1a
authored
Merge pull request #36 from open-tux/enhancement/bulma-input
Re-factor bulma-input
2 parents e822238 + 22797f1 commit 9808e51

25 files changed

+571
-272
lines changed

‎addon/components/bulma-checkbox.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Ember from 'ember';
2+
import BulmaInput from '../components/bulma-input';
3+
import layout from '../templates/components/bulma-checkbox';
4+
5+
const {
6+
get,
7+
set
8+
} = Ember;
9+
10+
export default BulmaInput.extend({
11+
layout,
12+
classNames: ['checkbox'],
13+
type: 'checkbox',
14+
15+
init() {
16+
this._super(...arguments);
17+
18+
// Remove the inherited input class name (as it breaks the styling)
19+
get(this, 'classNames').removeObject('input');
20+
}
21+
});

‎addon/components/bulma-control.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Ember from 'ember';
2+
import layout from '../templates/components/bulma-control';
3+
4+
const {
5+
Component
6+
} = Ember;
7+
8+
export default Component.extend({
9+
layout,
10+
tagName: 'p',
11+
classNames: ['control'],
12+
classNameBindings: [
13+
'isLoading:is-loading',
14+
'isDisabled:is-disabled',
15+
'disabled:is-disabled',
16+
'loading:is-loading',
17+
'hasAddons:has-addons',
18+
'hasAddonsCentered:has-addons-centered',
19+
'hasAddonsRight:has-addons-right',
20+
'isGroup:is-group',
21+
'isExpanded:is-expanded',
22+
'isHorizontal:is-horizontal'
23+
]
24+
});

‎addon/components/bulma-input.js

Lines changed: 40 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,147 +1,47 @@
1-
import Ember from 'ember';
1+
import Ember from 'ember';
22
import layout from '../templates/components/bulma-input';
3-
import computed, { readOnly, alias, bool } from 'ember-computed-decorators';
4-
import { makeString } from '../utils';
3+
import computed, { alias } from 'ember-computed-decorators';
4+
import { makeString, nativeAttrs, deprecations } from '../utils';
55

6-
export default Ember.Component.extend({
7-
layout,
8-
tagName: '',
9-
/**
10-
Input type (text, radio, checkbox, password)
11-
12-
@property text
13-
@returns String
14-
@public
15-
*/
16-
type: 'text',
17-
18-
/**
19-
Signal if input should be wrapped in a control container as per bulma docs (<p class='control'>input</p> )
20-
21-
@property control
22-
@returns Boolean
23-
@public
24-
*/
25-
control: false,
26-
27-
/**
28-
Determine if control container is required as per bulma docs, then set control flag accordingly
29-
30-
@method _requiresControl
31-
@returns Boolean
32-
@private
33-
*/
34-
@computed('isLoading', 'hasIcon')
35-
_requiresControl(isLoading, hasIcon) {
36-
if (isLoading || hasIcon) {
37-
this.set('control', true);
38-
}
39-
},
40-
41-
/**
42-
Signal that an icon has been passed
43-
44-
@property _hasIcon
45-
@returns Boolean
46-
@private
47-
*/
48-
@bool('icon') _hasIcon,
49-
50-
/**
51-
Signal that input should be a textarea
52-
53-
@property isTextArea
54-
@returns Boolean
55-
@public
56-
*/
57-
isTextArea: false,
58-
59-
/**
60-
Common mis-spelling alias for isTextArea
61-
62-
@property isTextarea
63-
@returns Boolean
64-
@public
65-
*/
66-
@alias('isTextArea') isTextarea,
6+
const {
7+
Component,
8+
get,
9+
set
10+
} = Ember;
6711

68-
/**
69-
Determine if a label must be used for this input type
70-
71-
@property _useLabel
72-
@returns Boolean
73-
@private
74-
*/
75-
@computed('label')
76-
_useLabel(label) {
77-
let type = this.get('type');
78-
return label && label.length > 0 || type === 'radio' || type === 'checkbox';
79-
},
80-
81-
/**
82-
Signal when input field is not a text field
83-
84-
@property _isNotTextInput
85-
@returns Boolean
86-
@private
87-
*/
88-
@computed('type')
89-
_isNotTextInput(type) {
90-
return type === 'select' || type === 'radio' || type === 'checkbox';
91-
},
92-
93-
/**
94-
Compute the bulma class required for this input type
95-
96-
@property _classFromType
97-
@return String
98-
@private
99-
*/
100-
@computed('type')
101-
_classFromType(type) {
102-
return this.get('_isNotTextInput') ? `${type}` : 'input';
103-
},
104-
105-
/**
106-
Bind size only to input field
107-
108-
@property _size
109-
@returns Bool
110-
@private
111-
*/
112-
@computed('isSmall', 'isMedium', 'isLarge')
113-
_size(small, medium, large) {
114-
let isSmall = small ? 'is-small' : small;
115-
let isMedium = medium ? 'is-medium' : medium;
116-
let isLarge = large ? 'is-large' : large;
117-
118-
return isSmall || isMedium || isLarge;
119-
},
12+
const {
13+
input
14+
} = nativeAttrs;
12015

121-
122-
/**
123-
A string representation of the classNames array so that it can be propagated
124-
125-
@property _classes
126-
@returns String
127-
@private
128-
*/
129-
@readOnly
130-
@computed('classNames.[]', 'size')
131-
_classes(classNames) {
132-
let size = this.get('_size');
133-
return `${makeString(classNames)} ${this.get('_classFromType')} ${size}`;
134-
},
135-
136-
actions: {
137-
/**
138-
Handle change action on key-up (key-up event is built into the ember input helper)
139-
140-
@method handleChange
141-
@public
16+
export default Component.extend({
17+
layout,
18+
tagName: 'input',
19+
classNames: ['input'],
20+
classNameBindings: [
21+
'isSmall:is-small',
22+
'isMedium:is-medium',
23+
'isLarge:is-large'
24+
],
25+
attributeBindings: ['isDisabled:disabled','disabled'].concat(input),
26+
27+
/**
28+
* Default class name binding
29+
*
30+
* @property isNormal
31+
* @type Bool
32+
* @default true
14233
*/
143-
handleChange(action) {
144-
this.sendAction('key-up');
145-
}
34+
isNormal: true,
35+
36+
init() {
37+
this._super(...arguments);
38+
39+
// Make user aware of deprecations for this Component
40+
deprecations([
41+
{ name: 'control', value: get(this, 'control') },
42+
{ name: 'isLoading', value: get(this, 'isLoading')},
43+
{ name: 'isTextarea', value: get(this, 'isTextarea')},
44+
{ name: 'key-up', value: get(this, 'key-up')}
45+
]);
14646
}
14747
});

‎addon/components/bulma-radio.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Ember from 'ember';
2+
import BulmaInput from '../components/bulma-input';
3+
import layout from '../templates/components/bulma-checkbox';
4+
5+
const {
6+
get,
7+
set
8+
} = Ember;
9+
10+
export default BulmaInput.extend({
11+
layout,
12+
classNames: ['radio'],
13+
type: 'radio',
14+
15+
init() {
16+
this._super(...arguments);
17+
18+
// Remove the inherited input class name (as it breaks the styling)
19+
get(this, 'classNames').removeObject('input');
20+
}
21+
});

‎addon/components/bulma-select.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
import Ember from 'ember';
22
import layout from '../templates/components/bulma-select';
33
import computed, { readOnly } from 'ember-computed-decorators';
4+
import { deprecations } from '../utils';
5+
6+
const {
7+
get
8+
} = Ember;
49

510
export default Ember.Component.extend({
611
layout,
712
tagName: '',
13+
classNames: ['bulma-select'],
814
/**
915
If used inline, consumer will provide an array of options to the select
1016
@@ -13,6 +19,19 @@ export default Ember.Component.extend({
1319
@public
1420
*/
1521
options: Ember.A([]),
22+
23+
/**
24+
* If used inline, pass through classNames
25+
*
26+
* @property _classes
27+
* @private
28+
* @type String
29+
* @param classNames {Array}
30+
*/
31+
@computed('classNames')
32+
_classes(classNames) {
33+
return classNames.toString().replace(/,/g, ' ');
34+
},
1635
actions: {
1736
/**
1837
Handle change event, return value as string, event object, and instance of component for mutablity
@@ -32,5 +51,14 @@ export default Ember.Component.extend({
3251
return [val, e, this];
3352
}
3453
}
54+
},
55+
56+
init() {
57+
this._super(...arguments);
58+
59+
// Make user aware of deprecations for this Component
60+
deprecations([
61+
{ name: 'control', value: get(this, 'control') },
62+
]);
3563
}
3664
});

‎addon/components/bulma-textarea.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Ember from 'ember';
2+
import layout from '../templates/components/bulma-textarea';
3+
import computed, { read } from 'ember-computed-decorators';
4+
import { nativeAttrs } from './../utils';
5+
6+
const {
7+
Component,
8+
get,
9+
set
10+
} = Ember;
11+
12+
const {
13+
textarea
14+
} = nativeAttrs;
15+
16+
export default Component.extend({
17+
layout,
18+
tagName: 'textarea',
19+
classNames: ['textarea'],
20+
attributeBindings: [].concat(textarea),
21+
});

‎addon/templates/components/bulma-checkbox.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{#if hasBlock}}
2+
{{yield}}
3+
{{/if}}

‎addon/templates/components/bulma-control.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{{yield}}

‎addon/templates/components/bulma-input.hbs

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,3 @@
1-
{{!TODO: consider breaking this up into separate components}}
2-
{{#unless hasBlock}}
3-
<span data-computed="{{_requiresControl}}"/>
4-
<p class="{{if control 'control' 'is-inline'}} {{if isLoading 'is-loading'}} {{if _hasIcon 'has-icon'}}">
5-
{{#if isTextArea}}
6-
{{textarea
7-
class="textarea"
8-
key-up="handleChange"
9-
cols=cols
10-
disabled=disabled
11-
form=form
12-
maxlength=maxlength
13-
placeholder=placeholder
14-
readonly=readonly
15-
required=required
16-
rows=rows
17-
wrap=wrap
18-
value=value
19-
autofocus=autofocus}}
20-
{{else}}
21-
{{#if _useLabel}}
22-
{{!Checkbox or Radio input}}
23-
<label class="{{type}}">
24-
{{input class=_classes type=type placeholder=placeholder name=name id=id key-up="handleChange" checked=checked disabled=disabled}}
25-
{{label}}
26-
</label>
27-
{{else}}
28-
{{!Text input}}
29-
{{input class=_classes value=value type=type placeholder=placeholder name=name id=id key-up="handleChange" disabled=disabled}}
30-
{{/if}}
31-
{{/if}}
32-
{{#if _hasIcon}}
33-
<i class="{{icon}}"></i>
34-
{{/if}}
35-
</p>
36-
{{else}}
37-
<p class="{{if inline 'is-inline' 'control'}}">
38-
{{yield}}
39-
</p>
40-
{{/unless}}
1+
{{#if hasBlock}}
2+
{{yield}}
3+
{{/if}}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{#if hasBlock}}
2+
{{yield}}
3+
{{/if}}

‎addon/templates/components/bulma-select.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{{#if hasBlock}}
44
{{yield}}
55
{{else}}
6-
<select onchange={{action "handleChange"}}>
6+
<select class="{{_classes}}" onchange={{action "handleChange"}}>
77
{{#each options as |option|}}
88
<option>{{option}}</option>
99
{{/each}}

‎addon/templates/components/bulma-textarea.hbs

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{#if hasBlock}}
2+
{{yield}}
3+
{{/if}}

0 commit comments

Comments
 (0)