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

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

149 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	:dimensions="style.icon.size"
47	/>
48
49	<div class="button-v2__loader">
50	<CircleLoader
51	v-show="isLoading"
52	:dimensions="style.loader.size"
53	:border-color="style.loader.borderColor"
54	:border-size="style.loader.border"
55	:color="props.color"
56	/>
57	</div>
58
59	<span v-if="$slots.default" ref="buttonTextRef" class="button-v2__text">
60	<slot />
61	</span>
62
63	<Icon
64	v-if="iconAppend && !isLoading"
65	class="button-v2__icon"
66	:name="iconAppend"
67	:color="style.icon.color"
68	:dimensions="style.icon.size"
69	/>
70	</Component>
71	</template>
72
73	<style lang="scss">
74	.button-v2 {
75	$this: &;
76
77	font-family: 'DM Sans', 'Roboto', sans-serif;
78	padding: v-bind('style.padding');
79	color: v-bind('style.color');
80	background-color: v-bind('style.backgroundColor');
81	border: v-bind('style.border');
82	border-radius: 8px;
83	display: inline-flex;
84	align-items: center;
85	gap: 8px;
86	position: relative;
87	transition: background-color 0.1s ease-in-out;
88	text-decoration: none;
89	font-size: 12px;
90	line-height: 24px;
91	font-weight: 700;
92	width: fit-content;
93	flex-wrap: wrap;
94	justify-content: center;
95	text-wrap: nowrap;
96
97	&--disabled,
98	&[disabled]] {
99	color: v-bind('style.colorDisabled');
100	background-color: v-bind('style.backgroundColorDisabled');
101	}
102
103	&--loading {
104	pointer-events: none;
105
106	#{$this}__text {
107	opacity: 0;
108	}
109
110	#{$this}__loader {
111	opacity: 1;
112	}
113	}
114
115	&__text {
116	opacity: 1;
117	transition: opacity 0.2s ease-in-out;
118	}
119
120	&__loader {
121	display: flex;
122	align-items: center;
123	justify-content: center;
124	position: absolute;
125	left: 0;
126	top: 0;
127	width: 100%;
128	height: 100%;
129	pointer-events: none;
130	opacity: 0;
131	transition: opacity 0.2s ease-in-out;
132	}
133
134	&--hovered:not(&--disabled):not([disabled]) {
135	background-color: v-bind('style.backgroundHoverColor');
136	}
137
138	&:hover:not(&--disabled):not([disabled]) {
139	background-color: v-bind('style.backgroundHoverColor');
140	cursor: pointer;
141	}
142
143	@media (max-width: 576px) {
144	width: 100%;
145	}
146	}
147	</style>
148
149