Matthew Raymer
1 year ago
1 changed files with 48 additions and 0 deletions
@ -0,0 +1,48 @@ |
|||||
|
<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, Vue } from "vue-facing-decorator"; |
||||
|
|
||||
|
@Component |
||||
|
export default class AlertMessage extends Vue { |
||||
|
alertTitle = ""; |
||||
|
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> |
Loading…
Reference in new issue