Cancel Card Heading Edit on Click Outside

Clicking away while editing a card name
will now cancel the edit.

Signed-off-by: Gary Kim <gary@garykim.dev>

src/components/cards/CardItem.vue

@@ -1,8 +1,12 @@
 <!--
   - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
   -
+  - @copyright Copyright (c) 2019 Gary Kim <gary@garykim.dev>
+  -
   - @author Julius Härtl <jus@bitgrid.net>
   -
+  - @author Gary Kim <gary@garykim.dev>
+  -
   - @license GNU AGPL version 3 or any later version
   -
   - This program is free software: you can redistribute it and/or modify
@@ -27,7 +31,7 @@
 			<h3 v-if="showArchived">{{ card.title }}</h3>
 			<h3 v-else @click.stop="startEditing(card)">{{ card.title }}</h3>
 			<transition name="fade" mode="out-in">
-				<form v-if="editing">
+				<form v-if="editing" v-click-outside="cancelEdit">
 					<input v-model="copiedCard.title" type="text" autofocus>
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
@@ -157,6 +161,9 @@ export default {
 			}
 			this.editing = false
 		},
+		cancelEdit() {
+			this.editing = false
+		},
 		deleteCard() {
 			this.$store.dispatch('deleteCard', this.card)
 		},