Browse Source

Improved confirmation component

Owen Diffey 3 years ago
parent
commit
8d62d4e985
1 changed files with 25 additions and 2 deletions
  1. 25 2
      frontend/src/components/Confirm.vue

+ 25 - 2
frontend/src/components/Confirm.vue

@@ -5,12 +5,35 @@
 		theme="confirm"
 		ref="confirm"
 		trigger="click"
+		@hide="confirm(false)"
 	>
 		<template #trigger>
-			<div @click.shift="$emit('confirm')">
+			<div @click.shift="confirm(true)" @click.exact="confirm()">
 				<slot />
 			</div>
 		</template>
-		<a @click.prevent="$emit('confirm')"> Confirm </a>
+		<a @click.exact="confirm(true)"> Click to Confirm </a>
 	</tippy>
 </template>
+
+<script>
+export default {
+	data() {
+		return {
+			clickedOnce: false
+		};
+	},
+	methods: {
+		confirm(confirm) {
+			if (confirm === false) {
+				this.clickedOnce = false;
+			} else if (confirm === true || this.clickedOnce === true) {
+				this.$emit("confirm");
+				this.clickedOnce = false;
+			} else {
+				this.clickedOnce = true;
+			}
+		}
+	}
+};
+</script>