fix: fix drawer visibility

packages/design-system/src/components/N8nBlockUi/BlockUi.vue

@@ -38,7 +38,7 @@ withDefaults(defineProps<BlockUiProps>(), {
 .fade-leave-active {
 	transition: opacity 200ms;
 }
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
 }

packages/design-system/src/css/alert.scss

@@ -141,7 +141,7 @@
 	}
 }
 
-.el-alert-fade-enter,
+.el-alert-fade-enter-from,
 .el-alert-fade-leave-active {
 	opacity: 0;
 }

packages/design-system/src/css/carousel.scss

@@ -148,13 +148,13 @@
 	}
 }
 
-.carousel-arrow-left-enter,
+.carousel-arrow-left-enter-from,
 .carousel-arrow-left-leave-active {
 	transform: translateY(-50%) translateX(-10px);
 	opacity: 0;
 }
 
-.carousel-arrow-right-enter,
+.carousel-arrow-right-enter-from,
 .carousel-arrow-right-leave-active {
 	transform: translateY(-50%) translateX(10px);
 	opacity: 0;

packages/design-system/src/css/common/popup.scss

@@ -1,11 +1,11 @@
 @use './var.scss';
 @use '../mixins/mixins';
 
-.v-modal-enter {
+.v-modal-enter-from {
 	animation: v-modal-in 0.2s ease;
 }
 
-.v-modal-leave {
+.v-modal-leave-to {
 	animation: v-modal-out 0.2s ease forwards;
 }
 

packages/design-system/src/css/drawer.scss

@@ -100,10 +100,11 @@
 	}
 }
 
-@include drawer-animation(rtl);
-@include drawer-animation(ltr);
-@include drawer-animation(ttb);
-@include drawer-animation(btt);
+// @TODO Fix drawer animations
+//@include drawer-animation(rtl);
+//@include drawer-animation(ltr);
+//@include drawer-animation(ttb);
+//@include drawer-animation(btt);
 
 $directions: rtl, ltr, ttb, btt;
 

packages/design-system/src/css/loading.scss

@@ -69,7 +69,7 @@
 	}
 }
 
-.el-loading-fade-enter,
+.el-loading-fade-enter-from,
 .el-loading-fade-leave-active {
 	opacity: 0;
 }

packages/design-system/src/css/message.scss

@@ -117,7 +117,7 @@
 	}
 }
 
-.el-message-fade-enter,
+.el-message-fade-enter-from,
 .el-message-fade-leave-active {
 	opacity: 0;
 	transform: translate(-50%, -100%);

packages/design-system/src/css/notification.scss

@@ -84,7 +84,7 @@
 	}
 }
 
-.el-notification-fade-enter {
+.el-notification-fade-enter-from {
 	&.right {
 		right: 0;
 		transform: translateX(100%);

packages/design-system/src/css/switch.scss

@@ -109,7 +109,7 @@
 		}
 	}
 
-	& .label-fade-enter,
+	& .label-fade-enter-from,
 	& .label-fade-leave-active {
 		opacity: 0;
 	}

packages/design-system/src/css/tabs.scss

@@ -517,19 +517,19 @@
 .slideInLeft-transition {
 	display: inline-block;
 }
-.slideInRight-enter {
+.slideInRight-enter-from {
 	animation: slideInRight-enter 0.3s;
 }
-.slideInRight-leave {
+.slideInRight-leave-to {
 	position: absolute;
 	left: 0;
 	right: 0;
 	animation: slideInRight-leave 0.3s;
 }
-.slideInLeft-enter {
+.slideInLeft-enter-from {
 	animation: slideInLeft-enter 0.3s;
 }
-.slideInLeft-leave {
+.slideInLeft-leave-to {
 	position: absolute;
 	left: 0;
 	right: 0;

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

@@ -1,7 +1,7 @@
 <template>
 	<el-drawer
 		:direction="direction"
-		:visible="uiStore.isModalOpen(this.name)"
+		:modelValue="uiStore.isModalOpen(this.name)"
 		:size="width"
 		:before-close="close"
 		:modal="modal"
@@ -22,9 +22,13 @@ import { mapStores } from 'pinia';
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
 import type { EventBus } from 'n8n-design-system';
+import { ElDrawer } from 'element-plus';
 
 export default defineComponent({
 	name: 'ModalDrawer',
+	components: {
+		ElDrawer,
+	},
 	props: {
 		name: {
 			type: String,

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

@@ -13,16 +13,20 @@
 							interpolate: { currentVersionName: currentVersion.name },
 						})
 					}}
-					<strong><TimeAgo :date="currentVersion.createdAt" /></strong
-					>{{ $locale.baseText('updatesPanel.andIs') }}
-					<strong>{{
-						$locale.baseText('updatesPanel.version', {
-							interpolate: {
-								numberOfVersions: nextVersions.length,
-								howManySuffix: nextVersions.length > 1 ? 's' : '',
-							},
-						})
-					}}</strong>
+					<strong>
+						<TimeAgo :date="currentVersion.createdAt" />
+					</strong>
+					{{ $locale.baseText('updatesPanel.andIs') }}
+					<strong>
+						{{
+							$locale.baseText('updatesPanel.version', {
+								interpolate: {
+									numberOfVersions: nextVersions.length,
+									howManySuffix: nextVersions.length > 1 ? 's' : '',
+								},
+							})
+						}}
+					</strong>
 					{{ $locale.baseText('updatesPanel.behindTheLatest') }}
 				</p>