mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-02 12:08:01 +00:00
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup>
|
|
defineProps({
|
|
buttonText: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isActive: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
iconColor: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
|
|
@click.stop.prevent="$emit('click')"
|
|
@mouseenter="$emit('mouseenter')"
|
|
@mouseleave="$emit('mouseleave')"
|
|
@focus="$emit('focus')"
|
|
>
|
|
<div class="inline-flex items-center gap-3 overflow-hidden">
|
|
<fluent-icon
|
|
v-if="icon"
|
|
:icon="icon"
|
|
size="18"
|
|
:style="{ color: iconColor }"
|
|
/>
|
|
<span
|
|
class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
|
|
>
|
|
{{ buttonText }}
|
|
</span>
|
|
<fluent-icon
|
|
v-if="isActive"
|
|
icon="checkmark"
|
|
size="18"
|
|
class="flex-shrink-0 text-slate-900 dark:text-slate-50"
|
|
/>
|
|
</div>
|
|
<slot name="dropdown" />
|
|
</button>
|
|
</template>
|