91 lines
1.8 KiB
Vue
91 lines
1.8 KiB
Vue
<template lang="pug">
|
|
teleport(:to="appContainer")
|
|
transition
|
|
.base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
|
|
.base-content(v-click-outside="clickOutside", :style="styleContent")
|
|
.base-header
|
|
.header-title.text {{ title }}
|
|
.icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
|
|
slot
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseModal",
|
|
props: {
|
|
hideOverlay: Boolean,
|
|
styleOverlay: Object,
|
|
styleContent: Object,
|
|
title: String,
|
|
modelValue: Boolean,
|
|
showIcon: Boolean,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
methods: {
|
|
clickOutside() {
|
|
this.value = false;
|
|
},
|
|
},
|
|
computed: {
|
|
appContainer() {
|
|
return this.$.appContext.app._container;
|
|
},
|
|
value: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", value);
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
.base-overlay
|
|
z-index: 10000
|
|
position: absolute
|
|
left: 0
|
|
top: 0
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
.base-overlay-bg
|
|
background: rgba(37, 40, 80, 0.2)
|
|
backdrop-filter: blur(4px)
|
|
width: 100vw
|
|
height: 100vh
|
|
.base-content
|
|
padding: 32px 40px
|
|
background-color: var(--default-white)
|
|
box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
|
|
border-radius: 4px
|
|
|
|
.header-title
|
|
font-weight: 700
|
|
font-size: 20px
|
|
line-height: 23px
|
|
color: var(--font-dark-blue-color)
|
|
.base-header
|
|
display: flex
|
|
justify-content: space-between
|
|
gap: 16px
|
|
.icon-cancel
|
|
margin-top: -11px
|
|
margin-right: -11px
|
|
cursor: pointer
|
|
color: var(--font-grey-color)
|
|
|
|
.v-enter-active,
|
|
.v-leave-active
|
|
transition: opacity 0.3s ease-in-out
|
|
|
|
|
|
.v-enter-from,
|
|
.v-leave-to
|
|
opacity: 0
|
|
</style>
|