mirror of https://github.com/certd/certd
52 lines
1.4 KiB
Vue
52 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import type { ButtonVariants } from "../../ui";
|
|
import type { VbenButtonProps } from "./button";
|
|
|
|
import { computed, useSlots } from "vue";
|
|
|
|
import { cn } from "/@/vben/shared/utils";
|
|
|
|
import { VbenTooltip } from "../tooltip";
|
|
import VbenButton from "./button.vue";
|
|
|
|
interface Props extends VbenButtonProps {
|
|
class?: any;
|
|
disabled?: boolean;
|
|
onClick?: () => void;
|
|
tooltip?: string;
|
|
tooltipDelayDuration?: number;
|
|
tooltipSide?: "bottom" | "left" | "right" | "top";
|
|
variant?: ButtonVariants;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
disabled: false,
|
|
onClick: () => {},
|
|
tooltipDelayDuration: 200,
|
|
tooltipSide: "bottom",
|
|
variant: "icon",
|
|
});
|
|
|
|
const slots = useSlots();
|
|
|
|
const showTooltip = computed(() => !!slots.tooltip || !!props.tooltip);
|
|
</script>
|
|
|
|
<template>
|
|
<VbenButton v-if="!showTooltip" :class="cn('rounded-full', props.class)" :disabled="disabled" :variant="variant" size="icon" @click="onClick">
|
|
<slot></slot>
|
|
</VbenButton>
|
|
|
|
<VbenTooltip v-else :delay-duration="tooltipDelayDuration" :side="tooltipSide">
|
|
<template #trigger>
|
|
<VbenButton :class="cn('rounded-full', props.class)" :disabled="disabled" :variant="variant" size="icon" @click="onClick">
|
|
<slot></slot>
|
|
</VbenButton>
|
|
</template>
|
|
<slot v-if="slots.tooltip" name="tooltip"> </slot>
|
|
<template v-else>
|
|
{{ tooltip }}
|
|
</template>
|
|
</VbenTooltip>
|
|
</template>
|