marzban-dev
64 lines
1.6 KiB
Vue
64 lines
1.6 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;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
// props
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: "solid",
|
|
size: "lg",
|
|
disabled: false,
|
|
});
|
|
const { variant, size, loading, disabled } = 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 cursor-not-allowed": loading.value || disabled.value,
|
|
},
|
|
];
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
:class="classes"
|
|
:disabled="loading || disabled"
|
|
>
|
|
<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>
|