68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<div class="notification" :class="message_class">
|
|
<button class="delete" @click="$emit('close')" v-if="!useToggle && useClose"></button>
|
|
<div @click="$emit('toggle')" class="is-clickable is-pulled-right is-unselectable" v-if="useToggle">
|
|
<span class="icon">
|
|
<i class="fas" :class="{'fa-arrow-up':toggle,'fa-arrow-down':!toggle}"></i>
|
|
</span>
|
|
<span>{{ toggle ? 'Close' : 'Open' }}</span>
|
|
</div>
|
|
<div class="notification-title is-unselectable" :class="{'is-clickable':useToggle}" v-if="title || icon"
|
|
@click="useToggle ? $emit('toggle', toggle):null">
|
|
<template v-if="icon">
|
|
<span class="icon-text">
|
|
<span class="icon"><i :class="icon"></i></span>
|
|
<span>{{ title }}</span>
|
|
</span>
|
|
</template>
|
|
<template v-else>{{ title }}</template>
|
|
</div>
|
|
<div class="notification-content content is-text-break" v-if="false === useToggle || toggle">
|
|
<template v-if="message">{{ message }}</template>
|
|
<slot/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
title: {
|
|
type: String,
|
|
default: null,
|
|
required: false
|
|
},
|
|
icon: {
|
|
type: String,
|
|
default: null,
|
|
required: false
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: null,
|
|
required: false
|
|
},
|
|
message_class: {
|
|
type: String,
|
|
default: 'is-info',
|
|
required: false
|
|
},
|
|
useToggle: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
},
|
|
toggle: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
},
|
|
useClose: {
|
|
type: Boolean,
|
|
default: false,
|
|
required: false
|
|
}
|
|
})
|
|
|
|
defineEmits(['toggle', 'close'])
|
|
</script>
|