From 1f8d2b1a98d7d481ea6076ccd055129b2a3a76fa Mon Sep 17 00:00:00 2001
From: Marcos Moura <mrufino@ciandt.com>
Date: Thu, 4 Aug 2016 20:59:42 -0300
Subject: [PATCH] Create initial state of checkbox

---
 src/components/mdCheckbox/mdCheckbox.scss  | 11 +++---
 src/components/mdCheckbox/mdCheckbox.theme |  4 +++
 src/components/mdCheckbox/mdCheckbox.vue   | 39 +++++++++++++++++++---
 src/docs/pages/Checkbox.vue                |  8 +++--
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/components/mdCheckbox/mdCheckbox.scss b/src/components/mdCheckbox/mdCheckbox.scss
index ee01863..1f54d9d 100644
--- a/src/components/mdCheckbox/mdCheckbox.scss
+++ b/src/components/mdCheckbox/mdCheckbox.scss
@@ -16,6 +16,7 @@ $checkbox-ripple-size: 48px;
     position: relative;
     border-radius: 2px;
     border: 2px solid rgba(#000, .54);
+    transition: $swift-ease-out;
 
     input {
       position: absolute;
@@ -28,6 +29,7 @@ $checkbox-ripple-size: 48px;
       bottom: -16px;
       left: -16px;
       border-radius: 50%;
+      color: rgba(#000, .54);
 
       .md-ripple {
         width: $checkbox-ripple-size !important;
@@ -56,18 +58,17 @@ $checkbox-ripple-size: 48px;
     bottom: 0;
     left: 0;
     opacity: 0;
-    transform: scale(.5);
+    transform: scale3D(.3, .3, 1);
     color: #fff;
     font-size: $checkbox-size - 4px;
-    transition: $swift-ease-out;
+    transition: $swift-ease-in;
   }
 }
 
 .md-checkbox.md-checked {
-
-
   .md-icon {
     opacity: 1;
-    transform: scale(1);
+    transform: scale3D(1, 1, 1);
+    transition: $swift-ease-out;
   }
 }
diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme
index 26d2315..83a5d77 100644
--- a/src/components/mdCheckbox/mdCheckbox.theme
+++ b/src/components/mdCheckbox/mdCheckbox.theme
@@ -6,6 +6,10 @@
         background-color: PRIMARY-COLOR;
         border-color: PRIMARY-COLOR;
       }
+
+      .md-ink-ripple {
+        color: PRIMARY-COLOR;
+      }
     }
   }
 }
diff --git a/src/components/mdCheckbox/mdCheckbox.vue b/src/components/mdCheckbox/mdCheckbox.vue
index 62725f1..f2baaf7 100644
--- a/src/components/mdCheckbox/mdCheckbox.vue
+++ b/src/components/mdCheckbox/mdCheckbox.vue
@@ -1,14 +1,45 @@
 <template>
-  <div class="md-checkbox md-checked">
-    <div class="md-checkbox-container" v-md-ink-ripple>
-      <input type="checkbox" id="temp">
+  <div class="md-checkbox" :class="classes">
+    <div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple>
+      <input type="checkbox" v-model="model" :name="name" :id="id" :disabled="disabled" :value="value">
+
       <md-icon>check</md-icon>
     </div>
 
-    <label class="md-checkbox-label" for="temp">
+    <label :for="id || name" class="md-checkbox-label">
       <slot></slot>
     </label>
   </div>
 </template>
 
 <style lang="scss" src="./mdCheckbox.scss"></style>
+
+<script>
+  export default {
+    props: {
+      model: {
+        type: Boolean,
+        required: true,
+        twoWay: true
+      },
+      name: String,
+      id: String,
+      disabled: Boolean
+    },
+    computed: {
+      classes() {
+        return {
+          'md-checked': Boolean(this.model)
+        };
+      }
+    },
+    methods: {
+      toggleCheck() {
+        this.model = !this.model;
+      }
+    },
+    ready() {
+
+    }
+  };
+</script>
diff --git a/src/docs/pages/Checkbox.vue b/src/docs/pages/Checkbox.vue
index ade801f..232c70a 100644
--- a/src/docs/pages/Checkbox.vue
+++ b/src/docs/pages/Checkbox.vue
@@ -2,7 +2,7 @@
   <section>
     <h2 class="title">Checkbox</h2>
 
-    <md-checkbox>My beautiful checkbox</md-checkbox>
+    <md-checkbox :model.sync="checked" id="my-test" name="my-test">My beautiful checkbox</md-checkbox>
   </section>
 </template>
 
@@ -14,6 +14,10 @@
 
 <script>
   export default {
-
+    data() {
+      return {
+        checked: false
+      };
+    }
   };
 </script>