marzban-dev
49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
// types
|
|
type Props = {
|
|
variant?: "solid" | "secondary" | "outlined" | "ghost" | "primary";
|
|
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 max-lg:text-xs",
|
|
{
|
|
"btn-solid": variant.value === "solid",
|
|
"btn-secondary": variant.value === "secondary",
|
|
"btn-outlined": variant.value === "outlined",
|
|
"btn-ghost": variant.value === "ghost",
|
|
"btn-primary": variant.value === "primary",
|
|
},
|
|
{
|
|
"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="ci:svg-spinners-3-dots-fade" class="my-0.5" />
|
|
</button>
|
|
</template>
|