68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template>
|
||
<Notifications
|
||
position="bottom left"
|
||
:max="2"
|
||
:ignore-duplicates="true"
|
||
class="global-notification"
|
||
>
|
||
<template #body="{ item, close }">
|
||
<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
|
||
<div
|
||
class="vue-notification-template vue-notification"
|
||
:class="[
|
||
item.type,
|
||
]"
|
||
@click="close()"
|
||
>
|
||
<div
|
||
v-if="item.title"
|
||
class="notification-title"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="notification-content">
|
||
<template v-if="Array.isArray(item.text)">
|
||
<template
|
||
v-for="(t, k) in item.text"
|
||
:key="k"
|
||
>
|
||
{{ t }}<br>
|
||
</template>
|
||
</template>
|
||
<template v-else>
|
||
{{ item.text }}
|
||
</template>
|
||
<span
|
||
v-if="item.duplicates > 0"
|
||
class="tw:text-xs tw:font-bold tw:ml-1"
|
||
>
|
||
×{{ item.duplicates + 1 }}
|
||
</span>
|
||
</div>
|
||
<div
|
||
v-if="item.data?.actions?.length > 0"
|
||
class="mbs-2 tw:flex tw:justify-end tw:gap-2"
|
||
>
|
||
<XButton
|
||
v-for="(action, i) in item.data.actions"
|
||
:key="'action_' + i"
|
||
:shadow="false"
|
||
class="is-small"
|
||
variant="secondary"
|
||
@click="action.callback"
|
||
>
|
||
{{ action.title }}
|
||
</XButton>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</Notifications>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.vue-notification {
|
||
z-index: 9999;
|
||
}
|
||
|
||
</style>
|