Checkbox WIP

Xotic750
1 parent 5a3fe3ec
Showing 2 changed files with 15 additions and 1 deletions Show diff stats
src/components/checkbox/checkbox.vue
src/styles/mixins/checkbox.less
 <template>
-    <label :class="wrapClasses">
+    <label 
+        :class="wrapClasses" 
+        @keydown.space.prevent="$el.click()"
+        tabindex="0">
         <span :class="checkboxClasses">
             <span :class="innerClasses"></span>
             <input
                 v-if="group"
                 type="checkbox"
+                 tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :value="label"
@@ -14,6 +18,7 @@
             <input
                 v-if="!group"
                 type="checkbox"
+                 tabindex="-1"
                 :class="inputClasses"
                 :disabled="disabled"
                 :checked="currentValue"
@@ -115,6 +120,7 @@
         },
         methods: {
             change (event) {
+                console.log(event);
                 if (this.disabled) {
                     return false;
                 }
@@ -236,6 +236,14 @@
         font-size: @font-size-small;
         display: inline-block;
         margin-right: 8px;
+        outline: 0;
+        &:focus,
+        &:active {
+            & .@{checkbox-prefix-cls}-inner {
+                box-shadow: 0 0 0 2px fade(@primary-color, 20%);
+            }
+        }
+
         &-disabled{
             cursor: @cursor-disabled;
         }