140 lines
3.3 KiB
Vue
140 lines
3.3 KiB
Vue
<template>
|
|
<div
|
|
class="alert fade show text-center mb-0 py-2 px-4"
|
|
role="alert"
|
|
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
|
|
>
|
|
<p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
|
|
<p v-if="splitAlertCopyForLink.length">
|
|
<template v-for="copy in splitAlertCopyForLink" :key="copy">
|
|
<span v-if="copy.includes('routerLink:')" class="m-0 text-body">
|
|
<router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
|
|
</span>
|
|
<span v-else class="m-0 text-body" v-html="copy"></span>
|
|
</template>
|
|
</p>
|
|
<p v-else class="m-0 text-body" v-html="alertCopy"></p>
|
|
<button
|
|
type="button"
|
|
class="btn-close p-2"
|
|
data-bs-dismiss="alert"
|
|
aria-label="Close"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 23.7 23.7"
|
|
xml:space="preserve"
|
|
>
|
|
<path
|
|
d="m23.24 2.7-9.15 9.15L23.24 21a1.581 1.581 0 0 1-1.12 2.7c-.42 0-.82-.16-1.12-.46l-9.15-9.15-9.15 9.15c-.3.3-.7.46-1.12.46A1.581 1.581 0 0 1 .46 21l8.47-8.47.68-.68L.46 2.7c-.62-.62-.62-1.62 0-2.24.62-.62 1.62-.62 2.24 0l8.47 8.47.68.68L21 .46a1.57 1.57 0 0 1 2.23 0c.63.62.63 1.62.01 2.24z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
name: "alert",
|
|
props: {
|
|
isDismissible: Boolean,
|
|
/*
|
|
alertClass class names:
|
|
alert-success (green)
|
|
alert-danger (red)
|
|
alert-warning (yellow)
|
|
alert-info (blue)
|
|
*/
|
|
alertClass: String,
|
|
cmsWidgetName: String,
|
|
manualHeadline: String,
|
|
manualCopy: String,
|
|
},
|
|
computed: {
|
|
alertHeadline(){
|
|
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
|
|
},
|
|
alertCopy(){
|
|
return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
|
|
},
|
|
splitAlertCopyForLink(){
|
|
// Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
|
|
return this.alertCopy.split(/{(.*?)}/g);
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.alert {
|
|
button {
|
|
display: none;
|
|
}
|
|
.btn-close {
|
|
background: none;
|
|
opacity: 1;
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
&.alert-dismissible {
|
|
button {
|
|
display: flex;
|
|
top: 2px;
|
|
right: 2px;
|
|
}
|
|
}
|
|
&.alert-info {
|
|
background-color: $blue-100;
|
|
.alert-heading {
|
|
color: $blue-700;
|
|
}
|
|
svg {
|
|
fill: $blue-700;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
&.alert-danger {
|
|
background-color: $red-100;
|
|
.alert-heading {
|
|
color: $red-600;
|
|
}
|
|
svg {
|
|
fill: $red-600;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
&.alert-warning {
|
|
background-color: $yellow-100;
|
|
.alert-heading {
|
|
color: $yellow-600;
|
|
}
|
|
svg {
|
|
fill: $yellow-600;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
&.alert-success {
|
|
background-color: $green-100;
|
|
.alert-heading {
|
|
color: $green-700;
|
|
}
|
|
svg {
|
|
fill: $green-700;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
& p {
|
|
font-size: .875rem;
|
|
margin-bottom: 0.25rem !important;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|