You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.8 KiB
105 lines
3.8 KiB
<template>
|
|
<client-only>
|
|
<notifications position="top center" class="my-notification tw-top-[84px] xl:tw-top-[144px] tw-w-max">
|
|
<template slot="body" slot-scope="props">
|
|
<div :class="[
|
|
'custom-template tw-flex tw-items-center tw-px-[20px] tw-py-[14px] tw-rounded-[16px]',
|
|
props.item.type == 'error' ?'tw-bg-error-background':'',
|
|
props.item.type == 'warn' ?'tw-bg-warning-background':'',
|
|
props.item.type == 'success' ?'tw-bg-success-background':''
|
|
]">
|
|
<div v-if="props.item.type == 'error'" class="custom-template-icon tw-flex tw-items-center tw-mr-[18px]">
|
|
<img src="~/assets/svg/notification-error.svg" />
|
|
<div class="tw-ml-[12px] tw-text-error-default t16">Oops!</div>
|
|
</div>
|
|
<div v-if="props.item.type == 'warn'" class="custom-template-icon tw-flex tw-items-center tw-mr-[25px]">
|
|
<img src="~/assets/svg/notification-warn.svg" />
|
|
<div class="tw-ml-[12px] tw-text-warning-default t16">Ohh,</div>
|
|
</div>
|
|
<div v-if="props.item.type == 'success'" class="custom-template-icon tw-mr-[18px]">
|
|
<img src="~/assets/svg/notification-success.svg" />
|
|
</div>
|
|
|
|
<div class="custom-template-content tw-flex tw-items-center">
|
|
<div :class="[
|
|
'tw-font-bold tw-bg-transparent custom-template-title tw-mr-[16px]',
|
|
props.item.type == 'error' ?'tw-text-error-default':'',
|
|
props.item.type == 'warn' ?'tw-text-warning-default':'',
|
|
props.item.type == 'success' ?'tw-text-success-default':''
|
|
]">
|
|
{{ $t(props.item.title) }}
|
|
</div>
|
|
<div :class="[
|
|
'custom-template-text tw-bg-transparent',
|
|
props.item.type == 'error' ?'tw-text-error-default':'',
|
|
props.item.type == 'warn' ?'tw-text-warning-default':'',
|
|
props.item.type == 'success' ?'tw-text-success-default':''
|
|
]" v-html="$t(props.item.text)"></div>
|
|
</div>
|
|
<div class="custom-template-close tw-ml-[20px]" @click="props.close">
|
|
<div v-if="props.item.type == 'error'">
|
|
<img src="~/assets/svg/close-error.svg" width="10" height="10" />
|
|
</div>
|
|
<div v-if="props.item.type == 'warn'">
|
|
<img src="~/assets/svg/close-warn.svg" width="10" height="10" />
|
|
</div>
|
|
<div v-if="props.item.type == 'success'">
|
|
<img src="~/assets/svg/close-success.svg" width="10" height="10" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</notifications>
|
|
</client-only>
|
|
</template>
|
|
<script>
|
|
export default {};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
// style of the notification itself
|
|
:deep() {
|
|
.my-notification {
|
|
|
|
// style for title line
|
|
.notification-title {}
|
|
|
|
// style for content
|
|
.notification-content {}
|
|
|
|
// additional styling hook when using`type` parameter, i.e. this.$notify({ type: 'success', message: 'Yay!' })
|
|
.custom-template {
|
|
&.success {
|
|
background-color: #f1fffb !important;
|
|
box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
|
|
}
|
|
|
|
&.warn {
|
|
background-color: #fffaee !important;
|
|
box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
|
|
}
|
|
|
|
&.error {
|
|
background-color: #fff7f4 !important;
|
|
box-shadow: 0px 2px 2px rgba(137, 138, 141, 0.1) !important;
|
|
}
|
|
}
|
|
|
|
.custom-template-text {
|
|
&.success {
|
|
color: #2dc695;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
&.warn {
|
|
color: #ffb70a;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
&.error {
|
|
color: #ef5a5a;
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|