feat(checkbox): simple checkbox features

animation and show checked
bind to value with two way binding
bind to checked with two way binding

Author: serifine

src/checkbox/ux-checkbox-theme.css

@@ -1,11 +1,56 @@
 styles.checkbox {
   display: inline-flex;
   align-items: center;
+  margin: auto;
+  cursor: pointer;
 }
 
 styles.checkbox>.box {
-    width: 20px;
-    height: 20px;
-    border: #5d5d5d solid 2px;
-    border-radius: 3px;
+  width: 20px;
+  height: 20px;
+  border: ${border || $swatches.grey.p700} solid 2px;
+  border-radius: 3px;
+}
+
+styles.checkbox>.box+label:not(:empty) {
+  margin-left: 8px;
+}
+
+styles.checkbox>.box:hover {
+  width: 20px;
+  height: 20px;
+  border: ${background || $design.accent} solid 2px;
+  border-radius: 3px;
+}
+
+styles.checkbox.checked>.box {
+  background-color: ${background || $design.accent};
+  border: ${background || $design.accent} solid 2px;
+}
+
+styles.checkbox>.box>.background-box {
+  width: 100%;
+  height: 100%;
+  transform: scale3d(0, 0, 0);
+  border-radius: 50%;
+  transition: 100ms;
+}
+
+styles.checkbox>.box>.background-box::after {
+  margin: auto;
+  display: block;
+  width: 6px;
+  height: 12px;
+  border: ${foreground || $design.accentForeground} solid 2px;
+  border-top: none;
+  border-left: none;
+  -webkit-transform-origin: 6px 6px;
+  transform-origin: 6px 6px;
+  transform: rotate(45deg);
+  content: ' ';
+}
+
+styles.checkbox.checked>.box>.background-box {
+  transform: scale3d(1, 1, 1);
+  border-radius: 0;
 }

src/checkbox/ux-checkbox-theme.ts

@@ -6,6 +6,7 @@ export class UxCheckboxTheme {
 
   public background: string;
   public foreground: string;
+  public border: string;
 
   public backgroundDisabled: string;
   public foregroundDisabled: string;

src/checkbox/ux-checkbox.html

@@ -1,10 +1,10 @@
 <template styles.checkbox>
   <require from="./ux-checkbox-theme"></require>
 
-  <div class="box">
+  <div class="box" click.trigger="toggle()">
+    <div class="background-box"></div>
   </div>
 
-  <label>
-    <slot></slot>
-  </label>
+  <!-- Leave Inline, uses :not(:empty) selector to determine margin -->
+  <label ref="label"><slot></slot></label>
 </template>

src/checkbox/ux-checkbox.ts

@@ -1,22 +1,27 @@
-import {customElement, bindable, ViewResources, View, processAttributes} from 'aurelia-templating';
-import {inject} from 'aurelia-dependency-injection';
-import {StyleEngine} from '../styles/style-engine';
-import {Themable} from '../styles/themable';
-import {processDesignAttributes} from '../designs/design-attributes';
+import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
+import { bindingMode } from 'aurelia-binding';
+import { inject } from 'aurelia-dependency-injection';
+import { StyleEngine } from '../styles/style-engine';
+import { Themable } from '../styles/themable';
+import { processDesignAttributes } from '../designs/design-attributes';
 
 @inject(Element, ViewResources, StyleEngine)
 @customElement('ux-checkbox')
 @processAttributes(processDesignAttributes)
-export class UxButton implements Themable {
-  @bindable public type = null;
-  @bindable public size = null;
+export class UxCheckbox implements Themable {
   @bindable public effect = null;
   @bindable public disabled = false;
   @bindable public theme = null;
 
+  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable public checked = false;
+
+  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable public value: any = false;
+
   public view: View;
 
-  constructor(public element: Element, public resources: ViewResources, private styleEngine: StyleEngine) {}
+  constructor(public element: Element, public resources: ViewResources, private styleEngine: StyleEngine) { }
 
   public created(_: any, myView: View) {
     this.view = myView;
@@ -26,9 +31,25 @@ export class UxButton implements Themable {
     if (this.theme) {
       this.styleEngine.applyTheme(this, this.theme);
     }
+
+    if (this.checked) {
+      this.element.classList.add('checked');
+    }
   }
 
   public themeChanged(newValue: any) {
     this.styleEngine.applyTheme(this, newValue);
   }
-}
+
+  public checkedChanged(newValue: any) {
+    if (newValue) {
+      this.element.classList.add('checked');
+    } else {
+      this.element.classList.remove('checked');
+    }
+  }
+
+  public toggle() {
+    this.checked = !this.checked;
+  }
+}