El Switch component upgrade to octane

addon/components/el-switch.hbs

@@ -1,11 +1,16 @@
 {{! template-lint-disable }}
-<span class="el-switch {{if isChecked "is-checked"}} {{if disabled "is-disabled"}}" role="switch">
-  {{input
-    type="checkbox"
-    checked=model
-    class="el-switch__input"
-    disabled=disabled
-  }}
+
+<span 
+  {{on "click" this.handleAction}} 
+  class="el-switch {{if isChecked "is-checked"}} {{if isDisabled "is-disabled"}}" 
+  role="switch">
+
+  <Input
+    @type="checkbox"
+    @checked={{@model}}
+    @class="el-switch__input"
+    @disabled={{isDisabled}}
+  />
 
   {{#if isInactive}}
     <span class="el-switch__label el-switch__label--left {{if notChecked "is-active"}}">

addon/components/el-switch.js

@@ -1,63 +1,110 @@
-import Component  from '@ember/component';
-import layout     from '../templates/components/el-switch';
-import {computed} from "@ember/object";
+import Component  from '@glimmer/component';
+import {action, computed} from "@ember/object";
 import {htmlSafe} from '@ember/template';
-
-export default Component.extend({
-  layout,
-  classNames: ['el-switch'],
-  tagName   : 'label',
-
-  id               : '',
-  name             : '',
-  disabled         : false,
-  width            : '',
-  activeIconClass  : '',
-  inactiveIconClass: '',
-  activeText       : '',
-  inactiveText     : '',
-  activeValue      : true,
-  inactiveValue    : false,
-  validateEvent    : true,
-  activeColor      : '',
-  inactiveColor    : '',
-  model            : false,
-
-  isChecked: computed('model', function () {
-    return !!this.get('model');
-  }),
-
-  notChecked: computed('model', function () {
-    return !this.get('model');
-  }),
-
-  isInactive: computed.or('inactiveIconClass', 'inactiveText'),
-
-  notInactiveIconClass: computed('inactiveIconClass', function () {
-    return !this.get('inactiveIconClass');
-  }),
-
-  isInactiveText: computed.and('notInactiveIconClass', 'inactiveText'),
-
-
-  isActive: computed.or('activeIconClass', 'activeText'),
-
-  notActiveIconClass: computed('isActive', function () {
-    return !this.get('activeIconClass');
-  }),
-
-  isActiveText: computed.and('notActiveIconClass', 'activeText'),
-
-
-  spanStyle: computed("isChecked", "inactiveColor", "activeColor", 'width', function () {
-    let color = this.get("model") ? this.get("activeColor") : this.get("inactiveColor");
-    let width = this.get("width");
-
-    if (width === '') {
-      width = 40;
-    }
-
+import { tracked } from '@glimmer/tracking';
+
+export default class ElSwitchComponent extends Component {
+
+  @tracked model;
+
+  constructor(owner, args) {
+    super(owner, args);
+    this.model = this.args.model;
+  }
+
+  // disabled         : false,
+  @computed ("args.disabled")
+  get isDisabled() {
+    return this.args.disabled || false;
+  }
+  // activeIconClass  : '',
+  @computed ("args.activeIconClass")
+  get activeIconClass() {
+    return this.args.activeIconClass || '';
+  }
+  // inactiveIconClass: '',
+  @computed ("args.inactiveIconClass")
+  get inactiveIconClass() {
+    return this.args.inactiveIconClass || '';
+  }
+  // activeText       : '',
+  @computed ("args.activeText")
+  get activeText() {
+    return this.args.activeText || '';
+  }
+  // inactiveText     : '',
+  @computed ("args.inactiveText")
+  get inactiveText() {
+    return this.args.inactiveText || '';
+  }
+  // activeValue      : true,
+  @computed ("args.activeValue")
+  get activeValue() {
+    return this.args.activeValue || true;
+  }
+  // inactiveValue    : false,
+  @computed ("args.inactiveValue")
+  get inactiveValue() {
+    return this.args.inactiveValue || false;
+  }
+  // validateEvent    : true,
+  @computed ("args.validateEvent")
+  get validateEvent() {
+    return this.args.validateEvent || true;
+  }
+  // activeColor      : '',
+  @computed ("args.activeColor")
+  get activeColor() {
+    return this.args.activeColor || '';
+  }
+  // inactiveColor    : '',
+  @computed ("args.inactiveColor")
+  get inactiveColor() {
+    return this.args.inactiveColor || '';
+  }
+
+  get isChecked() {
+    return !!this.model;
+  }
+
+  get notChecked() {
+    return !this.model;
+  }
+
+  get isInactive() {
+    return this.inactiveIconClass || this.inactiveText;
+  }
+
+  get notInactiveIconClass() {
+    return !this.inactiveIconClass;
+  }
+
+  get isInactiveText() {
+    return this.notInactiveIconClass && this.inactiveText;
+  }
+
+  get isActive() {
+    return this.activeIconClass && this.activeText;
+  }
+
+  get notActiveIconClass() {
+    return !this.activeIconClass;
+  }
+
+  get isActiveText() {
+    return this.notActiveIconClass && this.activeText;
+  }
+
+  get spanStyle() {
+    const color = this.model ? this.activeColor : this.inactiveColor;
+    const width = this.width || 40;
     return htmlSafe(`background: ${color}; border-color: ${color}; width: ${width}px;`);
-  }),
+  }
+
+  @action 
+  handleAction () {
+    if(!this.isDisabled)
+    this.model  = !this.model;
+  }
 
-});
+}

tests/dummy/app/templates/switch.hbs

@@ -9,12 +9,12 @@
   {{#card.body}}
     {{#el-card class="box-card" shadow="naver" as |card|}}
       {{#card.body}}
-        {{el-switch }}
-        {{#el-switch  activeColor="#13ce66" inactiveColor="#ff4949" model=true}}{{/el-switch}}
+        <ElSwitch />
+        <ElSwitch @activeColor="#13ce66" @inactiveColor="#ff4949" @model=true></ElSwitch>
       {{/card.body}}
     {{/el-card}}
-<pre><code class="language-handlebars">\{{el-switch }}
-\{{#el-switch  activeColor="#13ce66" inactiveColor="#ff4949" model=true}}\{{/el-switch}}</code></pre>
+<pre><code class="language-handlebars">&lt;ElSwitch />
+&lt;ElSwitch @activeColor="#13ce66" @inactiveColor="#ff4949" @model=true>&lt;/ElSwitch></code></pre>
   {{/card.body}}
 {{/el-card}}
 
@@ -23,12 +23,12 @@
   {{#card.body}}
     {{#el-card class="box-card" shadow="naver" as |card|}}
       {{#card.body}}
-      {{#el-switch  activeText="Pay by month" inactiveText="Pay by year"}}{{/el-switch}}<br><br><br>
-      {{#el-switch  model=true activeColor="#13ce66" inactiveColor="#ff4949" activeText="Pay by month" inactiveText="Pay by year"}}{{/el-switch}}
+      <ElSwitch @activeText="Pay by month" @inactiveText="Pay by year"></ElSwitch><br><br><br>
+      <ElSwitch @model=true @activeColor="#13ce66" @inactiveColor="#ff4949" @activeText="Pay by month" @inactiveText="Pay by year"></ElSwitch>
       {{/card.body}}
     {{/el-card}}
-<pre><code class="language-handlebars">\{{#el-switch  activeText="Pay by month" inactiveText="Pay by year"}}\{{/el-switch}}
-\{{#el-switch  model=true activeColor="#13ce66" inactiveColor="#ff4949" activeText="Pay by month" inactiveText="Pay by year"}}\{{/el-switch}}</code></pre>
+<pre><code class="language-handlebars">&lt;ElSwitch @activeText="Pay by month" @inactiveText="Pay by year">&lt;/ElSwitch>
+&lt;ElSwitch @model=true @activeColor="#13ce66" @inactiveColor="#ff4949" @activeText="Pay by month" @inactiveText="Pay by year">&lt;/ElSwitch></code></pre>
   {{/card.body}}
 {{/el-card}}
 
@@ -41,21 +41,21 @@
         {{#el-switch model=false disabled=true}}{{/el-switch}}
       {{/card.body}}
     {{/el-card}}
-<pre><code class="language-handlebars">\{{#el-switch model=true disabled=true}}\{{/el-switch}}
-\{{#el-switch model=false disabled=true}}\{{/el-switch}}</code></pre>
+<pre><code class="language-handlebars">&lt;ElSwitch @model=true @disabled=true>&lt;/ElSwitch>
+&lt;ElSwitch @model=false @disabled=true>&lt;/ElSwitch></code></pre>
   {{/card.body}}
 {{/el-card}}
 </div>
 
 <h2>Attributes</h2>
 {{#el-card class="box-card" shadow="hover" bodyStyle="padding:0px;" as |card|}}
 {{#card.body}}
-    {{#el-table data=tableAttributes  as |t|}}
+    {{!-- {{#el-table data=tableAttributes  as |t|}}
       {{t.column prop="attribute" label="Attribute" width=150}}
       {{t.column prop="desc" label="Description" width=300}}
       {{t.column prop="type" label="Type" width=120}}
       {{t.column prop="val" label="Accepted Values" width=130}}
       {{t.column prop="def" label="Default" width=75}}
-    {{/el-table}}
+    {{/el-table}} --}}
 {{/card.body}}
 {{/el-card}}