Move buttons to separate component (#380)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/380
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/input/button.vue

@@ -0,0 +1,74 @@
+<template>
+	<a
+		class="button"
+		:class="{
+			'is-loading': loading,
+			'has-no-shadow': !shadow,
+			'is-primary': type === 'primary',
+			'is-outlined': type === 'secondary',
+			'is-text is-inverted has-no-shadow underline-none':
+				type === 'tertary',
+		}"
+		:disabled="disabled"
+		@click="click"
+		:href="href !== '' ? href : false"
+	>
+		<icon :icon="icon" v-if="showIconOnly"/>
+		<span class="icon is-small" v-else-if="icon !== ''">
+			<icon :icon="icon"/>
+		</span>
+		<slot></slot>
+	</a>
+</template>
+
+<script>
+export default {
+	name: 'x-button',
+	props: {
+		type: {
+			type: String,
+			default: 'primary',
+		},
+		href: {
+			type: String,
+			default: '',
+		},
+		to: {
+			default: false,
+		},
+		icon: {
+			default: '',
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		shadow: {
+			type: Boolean,
+			default: true,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		showIconOnly() {
+			return this.icon !== '' && typeof this.$slots.default === 'undefined'
+		}
+	},
+	methods: {
+		click(e) {
+			if (this.disabled) {
+				return
+			}
+
+			if (this.to !== false) {
+				this.$router.push(this.to)
+			}
+
+			this.$emit('click', e)
+		},
+	},
+}
+</script>

src/components/input/colorPicker.vue

@@ -16,9 +16,9 @@
 			model="hex"
 			picker="square"
 			v-model="color"/>
-		<a @click="reset" class="button has-no-shadow is-small ml-2">
+		<x-button @click="reset" class="is-small ml-2" :shadow="false" type="secondary">
 			Reset Color
-		</a>
+		</x-button>
 	</div>
 </template>
 

src/components/input/datepicker.vue

@@ -97,12 +97,13 @@
 					v-model="flatPickrDate"
 				/>
 
-				<a
-					class="button is-primary has-no-shadow is-fullwidth"
+				<x-button
+					class="is-fullwidth"
+					:shadow="false"
 					@click="close"
 				>
 					Confirm
-				</a>
+				</x-button>
 			</div>
 		</transition>
 	</div>

src/components/input/editor.vue

@@ -1,12 +1,22 @@
 <template>
 	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
 		<div class="is-pulled-right mb-4" v-if="hasPreview && isEditEnabled && !hasEditBottom">
-			<a v-if="!isEditActive" @click="toggleEdit" class="button has-no-shadow">
+			<x-button 
+				v-if="!isEditActive"
+				@click="toggleEdit"
+				:shadow="false"
+				type="secondary"
+			>
 				<icon icon="pen"/>
-			</a>
-			<a v-else @click="toggleEdit" class="button has-no-shadow">
+			</x-button>
+			<x-button 
+				v-else 
+				@click="toggleEdit"
+				:shadow="false"
+				type="secondary"
+			>
 				Done
-			</a>
+			</x-button>
 		</div>
 
 		<div class="clear"></div>

src/components/input/multiselect.vue

@@ -35,7 +35,7 @@
 			<div class="search-results" v-if="searchResultsVisible">
 				<button
 					v-if="creatableAvailable"
-					class="button is-ghost is-fullwidth"
+					class="is-fullwidth"
 					ref="result--1"
 					@keydown.up.prevent="() => preSelect(-2)"
 					@keydown.down.prevent="() => preSelect(0)"
@@ -55,7 +55,7 @@
 				</button>
 
 				<button
-					class="button is-ghost is-fullwidth"
+					class="is-fullwidth"
 					v-for="(data, key) in filteredSearchResults"
 					:key="key"
 					:ref="`result-${key}`"