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

Button.vue in Hostinger Tools 3.0.6, at vue-frontend/src/components/Button/Button.vue

148 lines 3.1 KB

Raw Download Zip

1	<script lang="ts" setup>
2	import { ref } from "vue";
3
4	import { useButton } from "@/composables/useButton";
5	import CircleLoader from "@/components/Loaders/CircleLoader.vue";
6	import Icon from "@/components/Icon/Icon.vue";
7	import type { IButtonProps } from "@/types";
8
9	type Emit = {
10	click: [event: Event];
11	};
12
13	const emit = defineEmits<Emit>();
14	const buttonTextRef = ref<HTMLElement>();
15	const props = withDefaults(defineProps<IButtonProps>(), {
16	size: "medium",
17	variant: "contain",
18	color: "primary",
19	isDisabled: null,
20	isLoading: false,
21	});
22
23	const { style, tag } = useButton(props);
24	</script>
25
26	<template>
27	<Component
28	:is="tag"
29	:to="to"
30	:target="target"
31	:href="to"
32	class="button-v2"
33	:class="{
34	'button-v2--disabled': isDisabled,
35	'button-v2--hovered': isHovered,
36	'button-v2--loading': isLoading,
37	}"
38	:disabled="isDisabled \|\| null"
39	@click="(event: Event) => emit('click', event)"
40	>
41	<Icon
42	v-if="iconPrepend && !isLoading"
43	class="button-v2__icon"
44	:name="iconPrepend"
45	:color="style.icon.color"
46	:size="style.icon.size"
47	/>
48	<div class="button-v2__loader">
49	<CircleLoader
50	v-show="isLoading"
51	:dimensions="style.loader.size"
52	:border-color="style.loader.borderColor"
53	:border-size="style.loader.border"
54	:color="props.color"
55	/>
56	</div>
57
58	<span v-if="$slots.default" ref="buttonTextRef" class="button-v2__text">
59	<slot />
60	</span>
61
62	<Icon
63	v-if="iconAppend && !isLoading"
64	class="button-v2__icon"
65	:name="iconAppend"
66	:color="style.icon.color"
67	:size="style.icon.size"
68	/>
69	</Component>
70	</template>
71
72	<style lang="scss">
73	.button-v2 {
74	$this: &;
75
76	font-family: 'DM Sans', 'Roboto', sans-serif;
77	padding: v-bind('style.padding');
78	color: v-bind('style.color');
79	background-color: v-bind('style.backgroundColor');
80	border: v-bind('style.border');
81	border-radius: 8px;
82	display: inline-flex;
83	align-items: center;
84	gap: 8px;
85	position: relative;
86	transition: background-color 0.1s ease-in-out;
87	text-decoration: none;
88	font-size: 14px;
89	line-height: 24px;
90	font-weight: 700;
91	width: fit-content;
92	flex-wrap: wrap;
93	justify-content: center;
94	text-wrap: nowrap;
95
96	&--disabled,
97	&[disabled]] {
98	color: v-bind('style.colorDisabled');
99	background-color: v-bind('style.backgroundColorDisabled');
100	}
101
102	&--loading {
103	pointer-events: none;
104
105	#{$this}__text {
106	opacity: 0;
107	}
108
109	#{$this}__loader {
110	opacity: 1;
111	}
112	}
113
114	&__text {
115	opacity: 1;
116	transition: opacity 0.2s ease-in-out;
117	}
118
119	&__loader {
120	display: flex;
121	align-items: center;
122	justify-content: center;
123	position: absolute;
124	left: 0;
125	top: 0;
126	width: 100%;
127	height: 100%;
128	pointer-events: none;
129	opacity: 0;
130	transition: opacity 0.2s ease-in-out;
131	}
132
133	&--hovered:not(&--disabled):not([disabled]) {
134	background-color: v-bind('style.backgroundHoverColor');
135	}
136
137	&:hover:not(&--disabled):not([disabled]) {
138	background-color: v-bind('style.backgroundHoverColor');
139	cursor: pointer;
140	}
141
142	@media (max-width: 576px) {
143	width: 100%;
144	}
145	}
146	</style>
147
148