<template>
<dialog ref="dialog" class="dialog q-pa-sm q-ma-none" :style="style">
<q-btn v-if="toolbarCloseable" flat style="position:absolute; top:5px; right:5px; z-index: 9999;" @click="close" padding="xs" icon="close"
size="sm" />
<div :style="{ backgroundColor: bgColor }">
<slot />
</div>
</dialog>
</template>
<script>
/**
* Dialog component for displaying various components.
*
* @component
* @name Dialog
* @example
* <Dialog />
*/
export default {
name: "Dialog",
props: {
open: Boolean,
align: String,
width: String,
toolbarCloseable: { type: Boolean, default: true },
bgColor: { type: String, default: "white" },
},
computed: {
style() {
return {
left: (this.$q.screen.width - this.width.replace('px', '')) + "px",
width: this.width,
bgColor: this.bgColor,
margin: 0,
};
},
},
watch: {
open(val) {
val ? this.$refs.dialog.show() : this.$refs.dialog.close();
},
},
methods: {
close() {
this.$emit("close");
this.$refs.dialog.close()
},
},
mounted() {
this.open ? this.$refs.dialog.show() : this.$refs.dialog.close();
},
}
</script>
<style scoped>
.dialog {
border: 0;
z-index: 99999;
background-color: white;
transition: height 0.5s ease-in-out;
margin: 0;
padding: 0;
top: 35px;
width: 100%;
}
</style>