keep drawer open

packages/editor-ui/src/components/Modal.vue

@@ -3,7 +3,7 @@
 		<el-drawer
 			v-if="drawer"
 			:direction="drawerDirection"
-			:visible="visibleDrawer"
+			:visible="visible && visibleDrawer"
 			:size="drawerWidth"
 			:before-close="closeDrawer"
 			>
@@ -47,7 +47,7 @@ const sizeMap: {[size: string]: string} = {
 
 export default Vue.extend({
 	name: "Modal",
-	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth'],
+	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth', 'visible'],
 	data() {
 		return {
 			visibleDrawer: this.drawer,
@@ -85,13 +85,17 @@ export default Vue.extend({
 				this.$emit('enter');
 			}
 		},
-		closeDialog() {
+		closeDialog(done?: () => void) {
 			this.$store.commit('ui/closeTopModal');
+			if (done) {
+				done();
+			}
 		},
 		closeDrawer() {
 			this.visibleDrawer = false;
 			setTimeout(() =>{
 				this.$store.commit('ui/closeTopModal');
+				this.visibleDrawer = true;
 			}, 300); // delayed for closing animation to take effect
 		},
 	},

packages/editor-ui/src/components/ModalRoot.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
-			v-if="isOpen(name)"
+			v-if="isOpen(name) || keepAlive"
 	>
-		<slot :modalName="name" :active="isActive(name)"></slot>	
+		<slot :modalName="name" :active="isActive(name)" :open="isOpen(name)"></slot>	
 	</div>
 </template>
 
@@ -11,7 +11,7 @@ import Vue from "vue";
 
 export default Vue.extend({
 	name: "ModalRoot",
-	props: ["name"],
+	props: ["name", "keepAlive"],
 	methods: {
 		isActive(name: string) {
 			return this.$store.getters['ui/isModalActive'](name);

packages/editor-ui/src/components/Modals.vue

@@ -24,10 +24,11 @@
 				/>
 			</template>
 		</ModalRoot>
-		<ModalRoot :name="VERSIONS_MODAL_KEY">
-			<template v-slot="{ modalName }">
+		<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
+			<template v-slot="{ modalName, open }">
 				<VersionsModal
 					:modalName="modalName"
+					:visible="open"
 				/>
 			</template>
 		</ModalRoot>

packages/editor-ui/src/components/VersionsModal.vue

@@ -1,7 +1,9 @@
 <template>
 	<Modal
+		v-if="currentVersion"
 		:name="modalName"
 		:drawer="true"
+		:visible="visible"
 		drawerDirection="ltr"
 		drawerWidth="480px"
 	>
@@ -44,7 +46,7 @@ export default Vue.extend({
 		Modal,
 		VersionCard,
 	},
-	props: ['modalName'],
+	props: ['modalName', 'visible'],
 	data() {
 		return {
 			UPDATE_INFO_URL,