bbell / src / components / UI / BaseButton.vue

<script setup lang="ts">
withDefaults(
	defineProps<{
		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'subtle' | 'subtle-alt' | 'text'
		size?: 'sm' | 'md' | 'lg'
		icon?: boolean
		block?: boolean
		loading?: boolean
		disabled?: boolean
		flat?: boolean
		type?: 'button' | 'submit' | 'reset'
		pill?: boolean
	}>(),
	{
		variant: 'primary',
		size: 'md',
		type: 'button',
		disabled: false,
	},
)

const emit = defineEmits<{
	(e: 'click', event: MouseEvent): void
}>()
</script>

<template>
	<button
		:type="type"
		class="th-btn"
		:class="[
			`variant-${variant}`,
			`size-${size}`,
			{
				'is-icon': icon,
				'is-block': block,
				'is-loading': loading,
				'is-flat': flat,
				'is-pill': pill,
			},
		]"
		:disabled="disabled || loading"
		@click.stop="emit('click', $event)"
	>
		<span v-if="loading" class="spinner"></span>
		<slot v-else />
	</button>
</template>

<style scoped>
.th-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	position: relative;
	overflow: hidden;

	&.is-flat {
		border: none !important;
	}
	&.is-pill {
		border-radius: 10rem !important;
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
		pointer-events: none;
	}

	&.is-block {
		width: 100%;
		display: flex;
	}

	background-color: hsla(var(--bg-colour) / 0.9);
	color: hsl(var(--text-colour));
	/*border-color: hsla(var(--border-colour) / 0.2);*/

	&:not(.variant-text) {
		&:hover:not(:disabled) {
			background-color: hsla(var(--bg-colour) / 1);
			/*border-color: hsla(var(--border-colour) / 0.5);*/
		}

		&:active:not(:disabled) {
			background-color: hsla(var(--bg-colour) / 0.7);
			/*border-color: hsla(var(--border-colour) / 0.5);*/
		}
	}
}

/* Sizes */
.size-sm {
	font-size: 0.75rem;
	padding: 0.375rem 0.75rem;
	&.is-icon {
		padding: 0;
		width: 2rem;
		height: 2rem;
	}
}
.size-md {
	font-size: 0.875rem;
	padding: 0.625rem 1.25rem;
	&.is-icon {
		padding: 0;
		width: 2.5rem;
		height: 2.5rem;
	}
}
.size-lg {
	font-size: 1rem;
	padding: 0.875rem 1.75rem;
	&.is-icon {
		padding: 0;
		width: 3rem;
		height: 3rem;
	}
}

.th-btn.variant-primary {
	--bg-colour: var(--accent);
	--text-colour: var(--base);
	--border-colour: var(--accent);
}

.th-btn.variant-secondary {
	--bg-colour: var(--surface0);
	--text-colour: var(--text);
	--border-colour: var(--surface2);
}

.th-btn.variant-subtle {
	--bg-colour: var(--accent);
	--text-colour: var(--accent);
	--border-colour: var(--accent);

	border-color: hsla(var(--accent) / 0.05);
	background-color: hsla(var(--accent) / 0.05);

	&:hover:not(:disabled) {
		background-color: hsla(var(--accent) / 0.15);
		border-color: hsla(var(--accent) / 0.1);
	}
	&:active:not(:disabled) {
		background-color: hsla(var(--accent) / 0.1);
		border-color: hsla(var(--accent) / 0.1);
	}
}

.th-btn.variant-subtle-alt {
	border-color: transparent;
	background-color: hsla(var(--overlay0) / 0.1);
	color: hsl(var(--subtext0));

	&:hover:not(:disabled) {
		background-color: hsla(var(--overlay0) / 0.15);
		border-color: transparent;
	}
	&:active:not(:disabled) {
		background-color: hsla(var(--overlay0) / 0.075);
		border-color: transparent;
	}
}

.th-btn.variant-ghost {
	--bg-colour: transparent;
	--text-colour: var(--subtext0);
	--border-colour: transparent;

	border-color: transparent;

	&:hover:not(:disabled) {
		background-color: hsla(var(--surface1) / 0.35);
		border-color: hsla(var(--surface2) / 0);
	}
	&:active:not(:disabled) {
		background-color: hsla(var(--surface1) / 0.25);
		border-color: hsla(var(--surface2) / 0);
	}
}

.variant-danger {
	--background-colour: var(--red);
	--text-colour: var(--red);
	--border-colour: var(--red);

	border-color: hsla(var(--red) / 0.05);
	background-color: hsla(var(--red) / 0.25);

	&:hover:not(:disabled) {
		background-color: hsla(var(--red) / 0.4);
		border-color: hsla(var(--red) / 0.3);
	}
	&:active:not(:disabled) {
		background-color: hsla(var(--red) / 0.3);
		border-color: hsla(var(--red) / 0.3);
	}
}

.variant-text {
	background-color: none;
	color: hsl(var(--text-colour));
	border-color: transparent;

	&:hover {
		color: hsla(var(--text) / 0.9);
	}
	&:active {
		color: hsla(var(--text) / 0.75);
	}
}

/* Spinner */
.spinner {
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.75s linear infinite;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
</style>