Restructure components

src/components/input/colorPicker.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="color-picker-container">
+		<verte
+				v-model="color"
+				menuPosition="top"
+				picker="square"
+				model="hex"
+				:enableAlpha="false"
+				:rgbSliders="true"/>
+		<a @click="reset" class="reset">
+			Reset Color
+		</a>
+	</div>
+</template>
+
+<script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
+	export default {
+		name: 'colorPicker',
+		data() {
+			return {
+				color: '',
+			}
+		},
+		components: {
+			verte,
+		},
+		props: {
+			value: {
+				required: true,
+			},
+		},
+		watch: {
+			value(newVal) {
+				this.color = newVal
+			},
+			color() {
+				this.update()
+			}
+		},
+		mounted() {
+			this.color = this.value
+		},
+		methods: {
+			update() {
+				this.$emit('input', this.color)
+				this.$emit('change')
+			},
+			reset() {
+				// FIXME: I havn't found a way to make it clear to the user the color war reset.
+				//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
+				this.color = ''
+				this.update()
+			},
+		},
+	}
+</script>

src/components/input/easymde.vue

@@ -0,0 +1,96 @@
+<template>
+    <!-- TODO: Fix the icons -->
+    <vue-easymde v-model="text" :configs="config" @change="bubble"/>
+</template>
+
+<script>
+    import VueEasymde from 'vue-easymde'
+
+    export default {
+        name: 'easymde',
+        components: {
+            VueEasymde
+        },
+        props: {
+            value: {
+                type: String,
+                default: '',
+            },
+        },
+        data() {
+            return {
+                text: '',
+                config: {
+                    autoDownloadFontAwesome: false,
+                    spellChecker: false,
+                    placeholder: 'Click here to enter a description...',
+                    toolbar: [
+                        'heading-1',
+                        'heading-2',
+                        'heading-3',
+                        'heading-smaller',
+                        'heading-bigger',
+                        '|',
+                        'bold',
+                        'italic',
+                        'strikethrough',
+                        'code',
+                        'quote',
+                        'unordered-list',
+                        'ordered-list',
+                        '|',
+                        'clean-block',
+                        'link',
+                        'image',
+                        'table',
+                        'horizontal-rule',
+                        '|',
+                        'preview',
+                        'side-by-side',
+                        'fullscreen',
+                        'guide',
+//                        {
+//                            name: 'bold',
+//                            title: 'Bold',
+//                            iconElement: '<span>test</span>' // This relies on an extra thing added in node_modules/easymde/src/js/easymde.js:145
+//                        },
+                    ]
+                },
+            }
+        },
+        watch: {
+            value(newVal) {
+                this.text = newVal
+            },
+            text() {
+                this.bubble()
+            }
+        },
+        methods: {
+            bubble() {
+                this.$emit('input', this.text)
+                this.$emit('change')
+            }
+        },
+    }
+</script>
+
+<style lang="scss">
+    @import '../../../node_modules/easymde/dist/easymde.min.css';
+
+    .CodeMirror {
+        padding: 0;
+    }
+
+    .CodeMirror-scroll {
+        padding: .5em;
+    }
+
+    .editor-toolbar {
+        background: #ffffff;
+    }
+
+    pre.CodeMirror-line{
+        margin-bottom: 0 !important;
+    }
+</style>

src/components/input/fancycheckbox.vue

@@ -0,0 +1,54 @@
+<template>
+	<div class="fancycheckbox" :class="{'is-disabled': disabled}">
+		<input @change="updateData" type="checkbox" :id="checkBoxId" :checked="checked" style="display: none;" :disabled="disabled">
+		<label :for="checkBoxId" class="check">
+			<svg width="18px" height="18px" viewBox="0 0 18 18">
+				<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+				<polyline points="1 9 7 14 15 4"></polyline>
+			</svg>
+			<span>
+				<slot></slot>
+			</span>
+		</label>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'fancycheckbox',
+		data() {
+			return {
+				checked: false,
+				checkBoxId: '',
+			}
+		},
+		props: {
+			value: {
+				required: false,
+			},
+			disabled: {
+				type: Boolean,
+				required: false,
+				default: false,
+			},
+		},
+		watch: {
+			value(newVal) {
+				this.checked = newVal
+			},
+		},
+		mounted() {
+			this.checked = this.value
+		},
+		created() {
+			this.checkBoxId = 'fancycheckbox' + Math.random()
+		},
+		methods: {
+			updateData(e) {
+				this.checked = e.target.checked
+				this.$emit('input', this.checked)
+				this.$emit('change', e.target.checked)
+			},
+		},
+	}
+</script>