oguzhankoral
105 lines
2.9 KiB
Vue
105 lines
2.9 KiB
Vue
<template>
|
|
<div class="bg-highlight-1 border-t border-t-highlight-3">
|
|
<div class="flex">
|
|
<div class="flex grow justify-between items-center py-2 pl-1 pr-1 min-w-0">
|
|
<div class="grow w-full min-w-0 flex space-x-1 items-center">
|
|
<ReportBase
|
|
v-if="notification.report"
|
|
:report="notification.report"
|
|
class="mt-[3px]"
|
|
/>
|
|
<div
|
|
v-tippy="notification.text"
|
|
:class="`${textClassColor} text-body-3xs transition line-clamp-1 text-ellipsis`"
|
|
>
|
|
{{ notification.text }}
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center group">
|
|
<FormButton
|
|
v-if="notification.secondaryCta"
|
|
v-tippy="notification.secondaryCta.tooltipText"
|
|
size="sm"
|
|
color="outline"
|
|
full-width
|
|
class="mr-1"
|
|
@click.stop="notification.secondaryCta.action"
|
|
>
|
|
{{ notification.secondaryCta.name }}
|
|
</FormButton>
|
|
<div v-if="notification.cta" v-tippy="notification.cta.tooltipText">
|
|
<FormButton
|
|
:disabled="notification.cta.disabled"
|
|
size="sm"
|
|
color="primary"
|
|
full-width
|
|
@click.stop="notification.cta?.action"
|
|
>
|
|
{{ notification.cta.name }}
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="notification.dismissible"
|
|
class="flex items-center w-0 group-hover:w-5 transition-[width]"
|
|
>
|
|
<FormButton
|
|
v-tippy="'Dismiss'"
|
|
color="subtle"
|
|
size="sm"
|
|
:icon-left="XMarkIcon"
|
|
hide-text
|
|
:disabled="!notification.dismissible"
|
|
@click.stop="$emit('dismiss')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTimeoutFn } from '@vueuse/core'
|
|
import type { ModelCardNotification } from '~/lib/models/card/notification'
|
|
import { XMarkIcon } from '@heroicons/vue/24/outline'
|
|
const props = defineProps<{
|
|
notification: ModelCardNotification
|
|
}>()
|
|
|
|
const emit = defineEmits(['dismiss'])
|
|
|
|
if (props.notification.timeout) {
|
|
useTimeoutFn(() => emit('dismiss'), props.notification.timeout)
|
|
}
|
|
|
|
// const notificationButtonColor = (notificationLevel: ModelCardNotificationLevel) => {
|
|
// switch (notificationLevel) {
|
|
// case 'info':
|
|
// return 'outline'
|
|
// case 'danger':
|
|
// return 'danger'
|
|
// case 'success':
|
|
// return 'primary'
|
|
// case 'warning':
|
|
// return 'danger'
|
|
// default:
|
|
// return 'outline'
|
|
// }
|
|
// }
|
|
|
|
const textClassColor = computed(() => {
|
|
switch (props.notification.level) {
|
|
case 'danger':
|
|
return 'text-red-500'
|
|
case 'info':
|
|
return 'text-foreground-2'
|
|
case 'success':
|
|
return 'text-foreground-2'
|
|
case 'warning':
|
|
return 'text-foreground-2'
|
|
default:
|
|
return 'text-foreground-2'
|
|
}
|
|
})
|
|
</script>
|