mirror of
https://gitlab2.federez.net/re2o/re2o
synced 2024-11-29 08:02:24 +00:00
57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<!--
|
|
An alert message using Django or Bootstrap message levels
|
|
|
|
props:
|
|
variant: debug, info, success, warning or error
|
|
|
|
"debug" is mapped to Boostrap secondary color.
|
|
"error" is mapped to Boostrap danger color.
|
|
-->
|
|
|
|
<template>
|
|
<b-alert
|
|
:variant="variant"
|
|
dismissible
|
|
show
|
|
fade
|
|
>
|
|
<slot></slot>
|
|
</b-alert>
|
|
</template>
|
|
|
|
<!--
|
|
Many modern browsers implement an optimization for <style> tags either cloned
|
|
from a common node or that have identical text, to allow them to share a single
|
|
backing stylesheet. With this optimization the performance of external and
|
|
internal styles should be similar.
|
|
From https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
|
|
|
|
So it is not a problem to import all Boostrap here.
|
|
-->
|
|
<style lang="sass">
|
|
@import '~bootstrap'
|
|
@import '~bootstrap-vue'
|
|
</style>
|
|
|
|
<script>
|
|
import Vue from "vue";
|
|
import { BAlert } from "bootstrap-vue";
|
|
Vue.component("b-alert", BAlert);
|
|
|
|
export default {
|
|
name: "Message",
|
|
props: ["tags"],
|
|
computed: {
|
|
variant: function() {
|
|
switch (this.tags) {
|
|
case "error":
|
|
return "danger";
|
|
case "debug":
|
|
return "secondary";
|
|
default:
|
|
return this.tags;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|