OverheadButton.vue — Hostinger Tools 3.0.72

hostinger / vue-frontend / src / components / OverheadButton.vue

hostinger / vue-frontend / src / components Last commit date

OverheadButton.vue

85 lines

1	<script setup lang="ts">
2	import { computed } from "vue";
3	import { type RouteLocationNamedRaw, useRouter } from "vue-router";
4
5	type Props = {
6	text: string;
7	route?: RouteLocationNamedRaw;
8	to?: string;
9	action?: () => void;
10	};
11
12	type Emits = {
13	click: [];
14	};
15
16	const props = defineProps<Props>();
17	const emit = defineEmits<Emits>();
18	const router = useRouter();
19
20	const buttonText = computed(() => props?.text \|\| "");
21
22	const onButtonClick = () => {
23	emit("click");
24	(props?.action \|\| redirectToRoute)();
25	};
26
27	const tag = computed(() => {
28	if (typeof props.to === "string") {
29	return "a";
30	}
31
32	if (props.to) {
33	return "router-link";
34	}
35
36	return "button";
37	});
38
39	const redirectToRoute = () => {
40	const { name, query } = props?.route \|\| {};
41
42	if (!name) return;
43
44	router.push({
45	name,
46	query
47	});
48	};
49	</script>
50
51	<template>
52	<Teleport
53	:key="buttonText"
54	to="#overhead-button"
55	>
56	<component
57	:is="tag"
58	class="overhead-button text-button-2"
59	@click="onButtonClick"
60	>
61	{{ buttonText }}
62	</component>
63	<slot />
64	</Teleport>
65	</template>
66
67	<style scoped lang="scss">
68	.overhead-button {
69	display: inline-flex;
70	padding: 12px 32px;
71	align-items: flex-start;
72	gap: 12px;
73	color: var(--primary);
74	border-radius: 8px;
75	border: 1px solid var(--gray-border);
76	background: var(--light);
77
78	&:hover {
79	cursor: pointer;
80	transition: 0.3s;
81	opacity: 0.7;
82	}
83	}
84	</style>
85