43 lines
986 B
TypeScript
43 lines
986 B
TypeScript
import clsx from 'clsx'
|
|
import { defineComponent, type SlotsType, type VNode } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
noRoundedB: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
noRoundedT: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
noBg: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
slots: {} as SlotsType<{
|
|
label?: () => VNode[]
|
|
default?: () => VNode[]
|
|
end?: () => VNode[]
|
|
}>,
|
|
setup(props, ctx) {
|
|
return () => (
|
|
<div
|
|
class={clsx('flex items-center py-2 px-3 rounded-lg', {
|
|
'rounded-b-none': props.noRoundedB,
|
|
'rounded-t-none': props.noRoundedT,
|
|
'bg-black/5': !props.noBg
|
|
})}
|
|
style={{
|
|
marginBottom: props.noRoundedB ? 0 : '12px'
|
|
}}
|
|
>
|
|
<div class="text-sm text-black/60 mr-4">{ctx.slots.label?.()}</div>
|
|
<div class="w-0 flex-grow">{ctx.slots.default?.()}</div>
|
|
{ctx.slots.end?.()}
|
|
</div>
|
|
)
|
|
}
|
|
})
|