Last active
September 29, 2019 10:07
-
-
Save cagcak/24073ed61642b2cc90e4036a74a40996 to your computer and use it in GitHub Desktop.
Created for the article: https://medium.com/@cagcak/a-common-story-of-reusable-cross-platformvuejs-component-library-ecaf86a0e35d
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<transition name="about-modal"> | |
<div class="about-modal-mask" :style="maskBackgroud"> | |
<div class="about-modal-wrapper"> | |
<div | |
class="about-modal-container" | |
:style="modalStyles" | |
:class="`modal__${position}`" | |
> | |
<div class="about-modal-header" v-if="header"> | |
<slot name="header"> | |
<div | |
v-html="infoHeaderContent" | |
:style="headerStyles" | |
></div> | |
</slot> | |
</div> | |
<div class="about-modal-body" v-if="body"> | |
<slot name="body"> | |
<div | |
v-html="infoBodyContent" | |
:style="bodyStyles" | |
></div> | |
</slot> | |
</div> | |
<div class="about-modal-footer" v-if="footer"> | |
<slot name="footer"> | |
<div | |
v-html="infoFooterContent" | |
:style="footerStyles" | |
></div> | |
</slot> | |
<button | |
class="warning about-modal-default-button" | |
@click="$emit('close')" | |
> | |
{{ buttonText }} | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</transition> | |
</template> | |
<script> | |
const defaultModalStyles = { | |
left: 0, | |
right: 0, | |
backgroundColor: '#333' | |
} | |
const defaultModalHeaderStyles = { | |
color: '#000' | |
} | |
const defaultModalBodyStyles = { | |
color: '#111' | |
} | |
const defaultModalFooterStyles = { | |
color: '#222' | |
} | |
export default { | |
name: 'AboutModal', | |
props: { | |
header: { | |
type: Boolean, | |
default: true | |
}, | |
body: { | |
type: Boolean, | |
default: true | |
}, | |
footer: { | |
type: Boolean, | |
default: true | |
}, | |
position: { | |
type: String, | |
default: 'center', | |
validator (position) { | |
return ['top', 'bottom', 'center'].indexOf(position) > -1 | |
} | |
}, | |
modalStyle: { | |
type: Object, | |
default: () => ({}) | |
}, | |
headerStyle: { | |
type: Object, | |
default: () => ({}) | |
}, | |
bodyStyle: { | |
type: Object, | |
default: () => ({}) | |
}, | |
footerStyle: { | |
type: Object, | |
default: () => ({}) | |
}, | |
maskBackgroud: { | |
type: Object, | |
default: () => ({ | |
backgroundColor: 'rgba(51, 51, 51, 0.82)' | |
}) | |
}, | |
infoHeader: { | |
type: String, | |
default: '<div>No Header</div>' | |
}, | |
infoBody: { | |
type: String, | |
default: '<div>No Body</div>' | |
}, | |
infoFooter: { | |
type: String, | |
default: '<div>No Footer</div>' | |
}, | |
buttonText: { | |
type: String, | |
default: 'Tamam' | |
} | |
}, | |
data () { | |
return { | |
infoHeaderContent: this.infoHeader, | |
infoBodyContent: this.infoBody, | |
infoFooterContent: this.infoFooter, | |
modalStyles: { | |
...defaultModalStyles, | |
...this.styles | |
}, | |
headerStyles: { | |
...defaultModalHeaderStyles, | |
...this.headerStyle | |
}, | |
bodyStyles: { | |
...defaultModalBodyStyles, | |
...this.bodyStyle | |
}, | |
footerStyles: { | |
...defaultModalFooterStyles, | |
...this.footerStyle | |
} | |
} | |
}, | |
mounted () { | |
if ( | |
Object.keys(this.$store.state.data).length !== 0 && | |
Object.keys(this.$store.state.data.app).length !== 0 && | |
Object.keys(this.$store.state.data.app.about).length !== 0 | |
) { | |
if (this.infoHeader === undefined || this.infoHeader === '') { | |
this.infoHeaderContent = this.$store.state.data.app.about.header | |
} else { | |
this.infoHeaderContent = this.infoHeader | |
} | |
if (this.infoBody === undefined || this.infoBody === '') { | |
this.infoBodyContent = this.$store.state.data.app.about.body | |
} else { | |
this.infoBodyContent = this.infoBody | |
} | |
if (this.infoFooter === undefined || this.infoFooter === undefined) { | |
this.infoFooterContent = this.$store.state.data.app.about.footer | |
} else { | |
this.infoFooterContent = this.infoFooter | |
} | |
} | |
} | |
} | |
</script> | |
<style lang="scss"> | |
$_overlay: #345; | |
$primary: turquoise; | |
$warning: yellow; | |
.modal__top { | |
top: 0; | |
} | |
.modal__bottom { | |
bottom: 0; | |
} | |
.modal__center { | |
margin: 0 auto; | |
} | |
.about-modal-mask { | |
position: fixed; | |
z-index: 9998; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: $_overlay; | |
display: table; | |
transition: opacity .3s ease; | |
} | |
.about-modal-wrapper { | |
display: table-cell; | |
vertical-align: middle; | |
} | |
.about-modal-container { | |
width: 50%; | |
overflow: auto; | |
margin: 0px auto; | |
padding: 20px 30px; | |
border-radius: 2px; | |
background-color: $primary; | |
box-shadow: 0 2px 8px $_overlay; | |
transition: ease-in-out 1s all; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
.about-modal-header h3 { | |
color: $warning; | |
margin-top: 0; | |
} | |
.about-modal-body { | |
margin: 20px 0; | |
} | |
.about-modal-default-button { | |
float: right; | |
} | |
.about-modal-enter { | |
opacity: 0; | |
} | |
.about-modal-leave-active { | |
opacity: 0; | |
} | |
.about-modal-enter .about-modal-container, | |
.about-modal-leave-active .about-modal-container { | |
transform: scale(1.1); | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment