Generalize radiobuttons and checkboxes

client/src/components/Checkbox.vue

@@ -1,19 +1,14 @@
 <template>
-  <label class="checkbox-container">
+  <base-input :label="label"
-    <input type="checkbox"
+              :checked="checked"
-           class="checkbox-container__input"
+              :item="item"
-           :checked="checked"
+              v-on:input="passOn"
-           v-on:input="$emit('input', $event.target.checked, item)">
+              :type="'checkbox'"
-    <span class="checkbox-container__checkbox">
+  ></base-input>
-        <tick></tick>
-    </span>
-    <span class="checkbox-container__label">{{label}}</span>
-  </label>
-
 </template>
 
 <script>
-  import Tick from '@/components/icons/Tick.vue';
+  import BaseInput from '@/components/inputs/BaseInput';
 
   export default {
     props: {
@@ -25,61 +20,13 @@
     },
 
     components: {
-      Tick
+      BaseInput
+    },
+
+    methods: {
+      passOn() {
+        this.$emit('input', ...arguments);
+      }
     }
   }
 </script>
-
-<style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .checkbox-container {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    margin-right: 10px;
-    cursor: pointer;
-    width: auto;
-
-    svg {
-      width: 15px;
-    }
-
-    &__input {
-      display: none;
-    }
-
-    &__input:checked + &__checkbox {
-      border: 0;
-      background-color: $color-brand;
-
-      svg {
-        display: block;
-        fill: $color-white;
-      }
-    }
-
-    &__checkbox {
-      width: 20px;
-      height: 20px;
-      display: flex;
-      border: 2px solid $color-grey;
-      justify-content: center;
-      align-items: center;
-      border-radius: 3px;
-      box-sizing: border-box;
-      margin-right: 10px;
-
-      transition: background-color 0.5s;
-
-      svg {
-        display: none;
-        transition: all 0.7s;
-      }
-    }
-
-    &__label {
-      font-family: $sans-serif-font-family;
-    }
-  }
-</style>

client/src/components/Radiobutton.vue

@@ -0,0 +1,32 @@
+<template>
+  <base-input :label="label"
+              :checked="checked"
+              :item="item"
+              v-on:input="passOn"
+              :type="'radiobutton'"
+  ></base-input>
+</template>
+
+<script>
+  import BaseInput from '@/components/inputs/BaseInput';
+
+  export default {
+    props: {
+      label: String,
+      checked: {
+        type: Boolean
+      },
+      item: Object
+    },
+
+    components: {
+      BaseInput
+    },
+
+    methods: {
+      passOn() {
+        this.$emit('input', ...arguments);
+      }
+    }
+  }
+</script>

client/src/components/icons/AddIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88"><title>add</title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88">
     <path
       d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
     <path

client/src/components/icons/CircleIcon.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle r="25" cx="50" cy="50"></circle>
+  </svg>
+</template>

client/src/components/inputs/BaseInput.vue

@@ -0,0 +1,110 @@
+<template>
+  <label class="base-input-container">
+    <input type="checkbox"
+           class="base-input-container__input"
+           :checked="checked"
+           @click.prevent="$emit('input', $event.target.checked, item)"
+           v-on:input.prevent="$emit('input', $event.target.checked, item)">
+    <span class="base-input-container__icon"
+          :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}">
+        <tick v-if="type === 'checkbox'"></tick>
+        <circle-icon v-if="type === 'radiobutton'"></circle-icon>
+    </span>
+    <span class="base-input-container__label">{{label}}</span>
+  </label>
+</template>
+
+<script>
+  import Tick from '@/components/icons/Tick';
+  import CircleIcon from '@/components/icons/CircleIcon';
+
+  export default {
+    props: {
+      label: String,
+      checked: {
+        type: Boolean
+      },
+      item: Object,
+      type: String
+    },
+
+    components: {
+      Tick,
+      CircleIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .base-input-container {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 10px;
+    cursor: pointer;
+    width: auto;
+
+    svg {
+      width: 15px;
+    }
+
+    &__input {
+      display: none;
+    }
+
+    &__input:checked + &__checkbox {
+      border: 0;
+      background-color: $color-brand;
+
+      svg {
+        display: block;
+        fill: $color-white;
+      }
+    }
+
+    &__icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      border: 2px solid $color-grey;
+      justify-content: center;
+      align-items: center;
+      box-sizing: border-box;
+      margin-right: 10px;
+      transition: background-color 0.5s;
+    }
+
+    &__checkbox {
+      border-radius: 3px;
+
+      svg {
+        display: none;
+        transition: all 0.7s;
+      }
+    }
+
+    &__radiobutton {
+      border-radius: 20px;
+
+      svg {
+        display: none;
+        fill: $color-brand;
+        width: 12px;
+      }
+    }
+
+    &__input:checked + &__radiobutton {
+      border-color: $color-brand;
+
+      svg {
+        display: block;
+      }
+    }
+
+    &__label {
+      font-family: $sans-serif-font-family;
+    }
+  }
+</style>