46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<template>
|
|
<div class="grid gap-2 has-contents">
|
|
<transition-group name="fadeRight" tag="div">
|
|
<div v-for="item, index in items" :key="'i'+index"
|
|
:class="`${colors[item.type].bg} ${colors[item.type].text} h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
|
|
>
|
|
<div class="text-sm" v-for="message, mindex in item.messages" :key="mindex" v-text="message"></div>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data: function() {
|
|
return {
|
|
colors: {
|
|
red: {
|
|
bg: 'bg-red-300',
|
|
text: 'text-red-800'
|
|
},
|
|
green: {
|
|
bg: 'bg-green-300',
|
|
text: 'text-green-800'
|
|
}
|
|
}
|
|
};
|
|
},
|
|
computed: {
|
|
items() {
|
|
var i = [];
|
|
|
|
for (const field in this.$page.props.errors) {
|
|
i.push({ messages: this.$page.props.errors[field], type: 'red' });
|
|
}
|
|
|
|
if (this.$page.props.flash && this.$page.props.flash.success) {
|
|
i.push({ messages: [ this.$page.props.flash.success ], type: 'green' });
|
|
}
|
|
|
|
return i;
|
|
}
|
|
}
|
|
};
|
|
</script>
|