2020-03-02 20:19:26 +00:00
|
|
|
<template>
|
2024-02-07 11:18:19 +00:00
|
|
|
<notifications
|
|
|
|
position="bottom left"
|
|
|
|
:max="2"
|
|
|
|
class="global-notification"
|
|
|
|
>
|
2021-08-19 17:55:13 +00:00
|
|
|
<template #body="{ item, close }">
|
2022-05-10 23:14:38 +00:00
|
|
|
<!-- FIXME: overlay whole notification with button and add event listener on that button instead -->
|
2021-01-17 17:57:57 +00:00
|
|
|
<div
|
2024-02-07 11:18:19 +00:00
|
|
|
class="vue-notification-template vue-notification"
|
2021-01-17 17:57:57 +00:00
|
|
|
:class="[
|
2021-08-19 17:55:13 +00:00
|
|
|
item.type,
|
2021-01-17 17:57:57 +00:00
|
|
|
]"
|
2021-08-19 17:55:13 +00:00
|
|
|
@click="close()"
|
2021-01-17 17:57:57 +00:00
|
|
|
>
|
2024-02-07 11:18:19 +00:00
|
|
|
<div
|
|
|
|
v-if="item.title"
|
|
|
|
class="notification-title"
|
|
|
|
>
|
|
|
|
{{ item.title }}
|
|
|
|
</div>
|
2021-08-19 17:55:13 +00:00
|
|
|
<div class="notification-content">
|
2024-02-07 11:18:19 +00:00
|
|
|
<template
|
|
|
|
v-for="(t, k) in item.text"
|
|
|
|
:key="k"
|
|
|
|
>
|
|
|
|
{{ t }}<br>
|
|
|
|
</template>
|
2021-06-22 20:41:29 +00:00
|
|
|
</div>
|
2020-09-05 20:35:52 +00:00
|
|
|
<div
|
2022-10-27 19:49:17 +00:00
|
|
|
v-if="item.data?.actions?.length > 0"
|
2024-02-07 11:18:19 +00:00
|
|
|
class="buttons is-right"
|
2021-01-17 17:57:57 +00:00
|
|
|
>
|
|
|
|
<x-button
|
2024-02-07 11:18:19 +00:00
|
|
|
v-for="(action, i) in item.data.actions"
|
2021-01-17 17:57:57 +00:00
|
|
|
:key="'action_' + i"
|
|
|
|
:shadow="false"
|
|
|
|
class="is-small"
|
2022-01-04 18:58:06 +00:00
|
|
|
variant="secondary"
|
2024-02-07 11:18:19 +00:00
|
|
|
@click="action.callback"
|
2021-01-17 17:57:57 +00:00
|
|
|
>
|
2020-03-02 20:19:26 +00:00
|
|
|
{{ action.title }}
|
2021-01-17 17:57:57 +00:00
|
|
|
</x-button>
|
2020-03-02 20:19:26 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</notifications>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped>
|
2020-09-05 20:35:52 +00:00
|
|
|
.vue-notification {
|
|
|
|
z-index: 9999;
|
|
|
|
}
|
2020-04-25 23:11:34 +00:00
|
|
|
|
2020-09-05 20:35:52 +00:00
|
|
|
.buttons {
|
2021-01-23 17:18:09 +00:00
|
|
|
margin-top: 0.5rem;
|
2020-09-05 20:35:52 +00:00
|
|
|
}
|
2020-03-02 20:19:26 +00:00
|
|
|
</style>
|