108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
||
<UiDropdown
|
||
class="notifications-dropdown"
|
||
dropdown-class="notifications-dropdown__content"
|
||
placement="bottom-end"
|
||
trigger="hover"
|
||
:offset="12"
|
||
teleport
|
||
>
|
||
<template #default="{ isActive }">
|
||
<NotifyButton
|
||
icon="bell"
|
||
:count="0"
|
||
class="notifications-dropdown__trigger"
|
||
:state="isActive ? 'hover' : undefined"
|
||
/>
|
||
</template>
|
||
|
||
<template #dropdown>
|
||
<div class="notifications-dropdown__header">
|
||
<h3>Notifications</h3>
|
||
|
||
<UiButton class="ml-a" size="small" icon="s-check-seen" type="ghost">
|
||
Mark all as read
|
||
</UiButton>
|
||
|
||
<UiButton class="ml-4" icon="s-kebab-android" type="link" size="small" color="secondary" />
|
||
</div>
|
||
|
||
<form class="notifications-dropdown__filter">
|
||
<UiSwitcher
|
||
id="notification_type"
|
||
:options="[
|
||
{ label: 'All', value: 'all' },
|
||
{ label: 'Поступления', value: 'p' },
|
||
{ label: 'Списания', value: 's' },
|
||
]"
|
||
size="small"
|
||
/>
|
||
</form>
|
||
|
||
<div class="notifications-dropdown__list">
|
||
<NotificationCardWithdrawCreated title="Новый вывод средств создан" subtitle="Адрес: 7u5RQ9g....bkNfG" />
|
||
<NotificationCardDeposit title="На ваш кошелек поступил новый платеж" subtitle="Адрес: 7u5RQ9g....bkNfG" />
|
||
<NotificationCardCompletedWithdraw title="Вывод средств был проведен успешно" subtitle="Адрес: 7u5RQ9g....bkNfG" />
|
||
<NotificationCardSignIn title="Вход в учетную запись" subtitle="IP: 185.218.108.156" read />
|
||
</div>
|
||
</template>
|
||
</UiDropdown>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useForm } from 'vee-validate'
|
||
|
||
useForm({
|
||
keepValuesOnUnmount: true,
|
||
initialValues: {
|
||
notification_type: 'all',
|
||
},
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.notifications-dropdown {
|
||
cursor: pointer;
|
||
|
||
&__header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
&__filter {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
&__list {
|
||
//margin-inline: -16px;
|
||
//padding-inline: 16px;
|
||
//max-height: 150px;
|
||
//overflow: auto;
|
||
|
||
> *:not(:last-child) {
|
||
margin-bottom: 8px;
|
||
}
|
||
}
|
||
|
||
&__content {
|
||
position: relative;
|
||
width: 406px;
|
||
padding: 16px !important;
|
||
box-shadow: 0px 4px 4px 0px #6C86AD40;
|
||
|
||
&::before {
|
||
content: '';
|
||
width: 16px;
|
||
height: 16px;
|
||
position: absolute;
|
||
top: -8px;
|
||
right: 12px;
|
||
background-color: $clr-white;
|
||
border-radius: 2px;
|
||
transform: rotateZ(45deg);
|
||
}
|
||
}
|
||
}
|
||
</style>
|