fix: Allow theme on switch, update dummy app more

knownasilya · May 18, 2017 · 5174457 · 5174457
1 parent 973e47d
commit 5174457
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/addon/components/x-toggle-switch/component.js b/addon/components/x-toggle-switch/component.js
@@ -1,7 +1,15 @@
 import Ember from 'ember';
 import layout from './template';
 
+const { computed } = Ember;
+
 export default Ember.Component.extend({
   layout,
-  tagName: ''
+  tagName: '',
+
+  themeClass: computed('theme', function () {
+    var theme = this.get('theme') || 'default';
+
+    return 'x-toggle-' + theme;
+  }),
 });
diff --git a/addon/components/x-toggle/component.js b/addon/components/x-toggle/component.js
@@ -16,12 +16,6 @@ const ToggleComponent = Ember.Component.extend({
   // private
   toggled: computed.readOnly('value'),
 
-  themeClass: computed('theme', function () {
-    var theme = this.get('theme') || 'default';
-
-    return 'x-toggle-' + theme;
-  }),
-
   forId: computed(function () {
     return this.get('elementId') + '-x-toggle';
   }),

diff --git a/addon/components/x-toggle/template.hbs b/addon/components/x-toggle/template.hbs
@@ -3,7 +3,7 @@
     switch=(component 'x-toggle-switch' onClick=(action 'onClick')
       onChangeValue=(action 'setToValue')
       value=value
-      themeClass=themeClass
+      theme=theme
       size=size
       disabled=disabled
       toggled=toggled
@@ -32,7 +32,7 @@
   {{x-toggle-switch onClick=(action 'onClick')
     onChangeValue=(action 'setToValue')
     value=value
-    themeClass=themeClass
+    theme=theme
     size=size
     disabled=disabled
     toggled=toggled

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -171,15 +171,23 @@
 <h2>Block Form</h2>
 <pre>
 \{{#x-toggle value=value showLabels=true onToggle=(action (mut value)) as |toggle|}}
-  \{{toggle.offLabel}}
-  \{{toggle.onLabel}}
-  \{{toggle.switch}}
+  \{{#toggle.offLabel as |label|}}
+    &lt;b&gt;\{{label}}&lt;/b&gt;
+  \{{/toggle.offLabel}}
+  \{{#toggle.onLabel as |label|}}
+    &lt;b&gt;\{{label}}&lt;/b&gt;
+  \{{/toggle.onLabel}}
+  \{{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
 \{{/x-toggle}}
 </pre>
 <span class='flexy'>
   {{#x-toggle value=value showLabels=true onToggle=(action (mut value)) as |toggle|}}
-    {{toggle.offLabel}}
-    {{toggle.onLabel}}
-    {{toggle.switch}}
+    {{#toggle.offLabel as |label|}}
+      <b>{{label}}</b>
+    {{/toggle.offLabel}}
+    {{#toggle.onLabel as |label|}}
+      <b>{{label}}</b>
+    {{/toggle.onLabel}}
+    {{toggle.switch theme='flip' onLabel='diff on' offLabel='diff off'}}
   {{/x-toggle}}
 </span>