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.
47 lines
1.1 KiB
47 lines
1.1 KiB
<template>
|
|
<div v-bind:class="computedAlertClassNames()">
|
|
<button
|
|
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
|
|
@click="onClickClose()"
|
|
>
|
|
<fa icon="xmark"></fa>
|
|
</button>
|
|
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
|
|
<p>{{ alertMessage }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue } from "vue-facing-decorator";
|
|
|
|
@Component
|
|
export default class AlertMessage extends Vue {
|
|
@Prop alertTitle = "";
|
|
@Prop alertMessage = "";
|
|
|
|
public onClickClose() {
|
|
this.alertTitle = "";
|
|
this.alertMessage = "";
|
|
}
|
|
|
|
public computedAlertClassNames() {
|
|
return {
|
|
hidden: !this.alertMessage,
|
|
"dismissable-alert": true,
|
|
"bg-slate-100": true,
|
|
"p-5": true,
|
|
rounded: true,
|
|
"drop-shadow-lg": true,
|
|
fixed: true,
|
|
"top-3": true,
|
|
"inset-x-3": true,
|
|
"transition-transform": true,
|
|
"ease-in": true,
|
|
"duration-300": true,
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped></style>
|
|
|