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> |
|
@ -1,41 +1,43 @@ |
|||||
{ |
{ |
||||
"compilerOptions": { |
"compilerOptions": { |
||||
"target": "esnext", |
"allowJs": true, |
||||
"module": "esnext", |
"target": "esnext", |
||||
"strict": true, |
"module": "esnext", |
||||
"jsx": "preserve", |
"strict": true, |
||||
"moduleResolution": "node", |
"strictPropertyInitialization": false, |
||||
"experimentalDecorators": true, |
"jsx": "preserve", |
||||
"skipLibCheck": true, |
"moduleResolution": "node", |
||||
"esModuleInterop": true, |
"experimentalDecorators": true, |
||||
"allowSyntheticDefaultImports": true, |
"skipLibCheck": true, |
||||
"forceConsistentCasingInFileNames": true, |
"esModuleInterop": true, |
||||
"useDefineForClassFields": true, |
"allowSyntheticDefaultImports": true, |
||||
"sourceMap": true, |
"forceConsistentCasingInFileNames": true, |
||||
"baseUrl": ".", |
"useDefineForClassFields": true, |
||||
"types": [ |
"sourceMap": true, |
||||
"webpack-env" |
"baseUrl": ".", |
||||
], |
"types": [ |
||||
"paths": { |
"webpack-env" |
||||
"@/*": [ |
], |
||||
"src/*" |
"paths": { |
||||
] |
"@/*": [ |
||||
|
"src/*" |
||||
|
] |
||||
|
}, |
||||
|
"lib": [ |
||||
|
"esnext", |
||||
|
"dom", |
||||
|
"dom.iterable", |
||||
|
"scripthost" |
||||
|
] |
||||
}, |
}, |
||||
"lib": [ |
"include": [ |
||||
"esnext", |
"src/**/*.ts", |
||||
"dom", |
"src/**/*.tsx", |
||||
"dom.iterable", |
"src/**/*.vue", |
||||
"scripthost" |
"tests/**/*.ts", |
||||
|
"tests/**/*.tsx" |
||||
|
], |
||||
|
"exclude": [ |
||||
|
"node_modules" |
||||
] |
] |
||||
}, |
|
||||
"include": [ |
|
||||
"src/**/*.ts", |
|
||||
"src/**/*.tsx", |
|
||||
"src/**/*.vue", |
|
||||
"tests/**/*.ts", |
|
||||
"tests/**/*.tsx" |
|
||||
], |
|
||||
"exclude": [ |
|
||||
"node_modules" |
|
||||
] |
|
||||
} |
} |
||||
|
Loading…
Reference in new issue