feat: admin tags.

This commit is contained in:
Abhinav Raut
2024-08-18 15:29:04 +05:30
parent 531bc3136f
commit 5dc630c540
10 changed files with 254 additions and 67 deletions

View File

@@ -2,6 +2,8 @@
import { Primitive } from "radix-vue";
import { buttonVariants } from ".";
import { cn } from "@/lib/utils";
import { ref, computed } from "vue";
import { ReloadIcon } from "@radix-icons/vue";
const props = defineProps({
variant: { type: null, required: false },
@@ -9,15 +11,29 @@ const props = defineProps({
class: { type: null, required: false },
asChild: { type: Boolean, required: false },
as: { type: null, required: false, default: "button" },
isLoading: { type: Boolean, required: false, default: false },
});
const isDisabled = ref(false);
const computedClass = computed(() => {
return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
"cursor-not-allowed opacity-50": props.isLoading || isDisabled.value,
});
});
</script>
<template>
<Primitive
:as="as"
:as-child="asChild"
:class="cn(buttonVariants({ variant, size }), props.class)"
:class="computedClass"
:disabled="isLoading || isDisabled"
>
<template v-if="isLoading">
<ReloadIcon class="animate-spin h-3 w-3 mr-2 text-white" />
</template>
<slot />
</Primitive>
</template>