33 lines
1.0 KiB
Vue
33 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import type { Component } from 'vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
|
|
|
defineProps<{
|
|
icon: Component;
|
|
label: string;
|
|
destructive?: boolean;
|
|
size?: 'default' | 'sm';
|
|
disabled?: boolean;
|
|
tooltipClass?: string;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
click: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<Tooltip>
|
|
<TooltipTrigger as-child>
|
|
<Button variant="ghost" :size="size === 'sm' ? 'sm' : 'icon'"
|
|
:class="[size === 'sm' ? '' : 'size-8', destructive ? 'text-destructive hover:text-destructive' : '']"
|
|
:disabled="disabled" @click="emit('click')">
|
|
<component :is="icon" :class="size === 'sm' ? 'size-3.5' : 'size-4'" />
|
|
<span class="sr-only">{{ label }}</span>
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent :class="tooltipClass">{{ label }}</TooltipContent>
|
|
</Tooltip>
|
|
</template>
|