Mamalizz
48 lines
1.3 KiB
Vue
48 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
type Props = {
|
|
variant?: "solid" | "secondary" | "outlined" | "ghost";
|
|
size?: "xl" | "lg" | "md";
|
|
startIcon?: string;
|
|
endIcon?: string;
|
|
loading?: boolean;
|
|
};
|
|
|
|
// props
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: "solid",
|
|
size: "lg",
|
|
});
|
|
const { variant, size, loading } = toRefs(props);
|
|
|
|
// computed
|
|
const classes = computed(() => {
|
|
return [
|
|
"flex items-center justify-center transition-all cursor-pointer",
|
|
{
|
|
"btn-solid": variant.value === "solid",
|
|
"btn-secondary": variant.value === "secondary",
|
|
"btn-outlined": variant.value === "outlined",
|
|
"btn-ghost": variant.value === "ghost",
|
|
},
|
|
{
|
|
"btn-xl": size.value === "xl",
|
|
"btn-lg": size.value === "lg",
|
|
"btn-md": size.value === "md",
|
|
},
|
|
{
|
|
"pointer-events-none opacity-80 cursor-not-allowed": loading.value,
|
|
},
|
|
];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button :class="classes" :disabled="loading">
|
|
<Icon v-if="!loading && startIcon" :name="startIcon" />
|
|
<slot v-if="!loading" />
|
|
<Icon v-if="!loading && endIcon" :name="endIcon" />
|
|
<Icon v-if="loading" name="svg-spinners:3-dots-fade" class="my-0.5" />
|
|
</button>
|
|
</template>
|