52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
comment: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="bg-neutral-50 dark:bg-neutral-900 px-1.5 py-1 rounded-sm flex flex-col gap-1 shadow-sm"
|
|
>
|
|
<div class="flex items-center gap-1 text-sm">
|
|
<UIcon
|
|
v-if="icon"
|
|
:name="icon"
|
|
class="text-base inline-block"
|
|
/>
|
|
<div
|
|
class="flex-1 flex items-center truncate whitespace-nowrap overflow-hidden"
|
|
>
|
|
<span>{{ label }}</span>
|
|
<UTooltip
|
|
v-if="comment"
|
|
:popper="{ arrow: true, placement: 'right' }"
|
|
:text="comment"
|
|
>
|
|
<UIcon
|
|
class="text-base"
|
|
name="i-tabler-help"
|
|
/>
|
|
</UTooltip>
|
|
</div>
|
|
<slot name="actions" />
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|