Cleanup new list creation component

src/components/misc/create.vue

@@ -5,15 +5,27 @@
 			:shadow="false"
 			:padding="false"
 			class="has-text-left"
+			:has-close="true"
+			close-icon="times"
 		>
 			<div class="p-4">
 				<slot></slot>
 			</div>
 			<footer class="modal-card-foot is-flex is-justify-content-flex-end">
-				<x-button :shadow="false" type="secondary" @click="$router.back()">
+				<x-button
+					:shadow="false"
+					type="secondary"
+					@click.prevent.stop="$router.back()"
+				>
 					Cancel
 				</x-button>
-				<x-button :shadow="false" type="primary" @click="$emit('create')" icon="plus">
+				<x-button
+					:shadow="false"
+					type="primary"
+					@click.prevent.stop="$emit('create')"
+					icon="plus"
+					:disabled="createDisabled"
+				>
 					{{ createLabel }}
 				</x-button>
 			</footer>
@@ -33,6 +45,10 @@ export default {
 			type: String,
 			default: 'Create',
 		},
+		createDisabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 }
 </script>

src/components/modal/modal.vue

@@ -1,7 +1,7 @@
 <template>
 	<transition name="modal">
 		<div class="modal-mask">
-			<div class="modal-container" @click.prevent.stop="$emit('close')">
+			<div class="modal-container" @click.self.prevent.stop="$emit('close')">
 				<div class="modal-content">
 					<slot>
 						<div class="header">

src/views/list/NewList.vue

@@ -1,5 +1,5 @@
 <template>
-	<create title="Create a new list" @create="newList()">
+	<create title="Create a new list" @create="newList()" :create-disabled="list.title === ''">
 		<div class="field">
 			<label class="label" for="listTitle">List Title</label>
 			<div
@@ -9,7 +9,7 @@
 				<input
 					:class="{ disabled: listService.loading }"
 					@keyup.enter="newList()"
-					@keyup.esc="back()"
+					@keyup.esc="$router.back()"
 					class="input"
 					placeholder="The list's title goes here..."
 					type="text"
@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import router from '../../router'
 import ListService from '../../services/list'
 import ListModel from '../../models/list'
 import Create from '@/components/misc/create'
@@ -66,7 +65,7 @@ export default {
 						{ message: 'The list was successfully created.' },
 						this
 					)
-					router.push({
+					this.$router.push({
 						name: 'list.index',
 						params: { listId: r.id },
 					})
@@ -75,9 +74,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		back() {
-			router.go(-1)
-		},
 	},
 }
 </script>