Matthew Raymer
1 year ago
17 changed files with 312 additions and 282 deletions
@ -1,47 +0,0 @@ |
|||
<template> |
|||
<div v-bind:class="computedAlertClassNames()"> |
|||
<button |
|||
class="close-button bg-amber-400 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 = ""; |
|||
isAlertVisible = this.alertMessage; |
|||
|
|||
public onClickClose() { |
|||
this.isAlertVisible = false; |
|||
} |
|||
|
|||
public computedAlertClassNames() { |
|||
return { |
|||
hidden: !this.isAlertVisible, |
|||
"dismissable-alert": true, |
|||
"bg-amber-200": 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