From ffb11ff853845520d6c9088a78086f9f970e7c12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Tue, 31 Oct 2023 09:03:46 +0100
Subject: [PATCH] feat(NcModal): migrate to vue 3
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 .eslintrc.js                       |  1 -
 cypress.config.ts                  |  1 -
 cypress/component/modal.cy.ts      | 11 ++++++-----
 src/components/NcModal/NcModal.vue | 20 ++++++++++----------
 styleguide.config.js               |  1 -
 vite.config.mts                    |  1 -
 6 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7aced3362c..99b3bc3b1d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,7 +24,6 @@ module.exports = {
 		'src/components/NcDashboard*/*.vue',
 		'src/components/NcAvatar*/*.vue',
 		'src/components/NcHeaderMenu*/*.vue',
-		'src/components/NcModal*/*.vue',
 		'src/components/NcRelatedResourcesPanel*/*.vue',
 		'src/components/NcRich*/**/*.vue',
 		'src/components/NcUserBubble*/*.vue',
diff --git a/cypress.config.ts b/cypress.config.ts
index c456d6024b..07cda5d0c6 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -42,7 +42,6 @@ export default defineConfig({
 		},
 
 		excludeSpecPattern: [
-			'cypress/component/modal.cy.ts',
 			'cypress/component/richtext.cy.ts',
 			'cypress/visual/**/*.{j,t}s',
 		],
diff --git a/cypress/component/modal.cy.ts b/cypress/component/modal.cy.ts
index 98e421f302..01ee456ebd 100644
--- a/cypress/component/modal.cy.ts
+++ b/cypress/component/modal.cy.ts
@@ -1,11 +1,12 @@
-import { mount } from 'cypress/vue2'
+import { mount } from 'cypress/vue'
 import NcModal from '../../src/components/NcModal/NcModal.vue'
 import type { Component } from 'vue'
+import { h } from 'vue'
 
 describe('NcModal', () => {
 	it('close button is visible when content is scrolled', () => {
 		mount(NcModal, {
-			propsData: {
+			props: {
 				show: true,
 				size: 'small',
 				name: 'Name',
@@ -13,10 +14,10 @@ describe('NcModal', () => {
 			slots: {
 				// Create two div as children, first is 100vh = overflows the content, second just gets some data attribute so we can scroll into view
 				default: {
-					render: (h) =>
+					render: () =>
 						h('div', [
-							h('div', { style: 'height: 100vh;' }),
-							h('div', { attrs: { 'data-cy': 'bottom' } }),
+							h('div', { style: { height: '100vh' } }),
+							h('div', { 'data-cy': 'bottom' }),
 						]),
 				} as Component,
 			},
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index fbbd86f52c..4b3b88ea21 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -21,7 +21,7 @@
   -->
 
 <docs>
-For showing the modal you can use either `:show.sync="showModal"` or `v-if` on the `NcModal`,
+For showing the modal you can use either `v-model:show="showModal"` or `v-if` on the `NcModal`,
 depending on whether you require the Modal to stay within the DOM or not. Do not mix both, as this will break the out transition animation.
 
 ```vue
@@ -29,7 +29,7 @@ depending on whether you require the Modal to stay within the DOM or not. Do not
 	<div>
 		<NcButton @click="showModal">Show Modal</NcButton>
 		<NcModal
-			:show.sync="modal"
+			v-model:show="modal"
 			@close="closeModal"
 			size="small"
 			name="Name"
@@ -79,10 +79,10 @@ export default {
 			<div class="modal__content">
 				<h2>Please enter your name</h2>
 				<div class="form-group">
-					<NcTextField label="First Name" :value.sync="firstName" />
+					<NcTextField label="First Name" v-model="firstName" />
 				</div>
 				<div class="form-group">
-					<NcTextField label="Last Name" :value.sync="lastName" />
+					<NcTextField label="Last Name" v-model="lastName" />
 				</div>
 				<div class="form-group">
 					<label for="pizza">What is the most important pizza item?</label>
@@ -582,7 +582,7 @@ export default {
 	beforeMount() {
 		window.addEventListener('keydown', this.handleKeydown)
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('keydown', this.handleKeydown)
 		this.mc.stop()
 	},
@@ -603,7 +603,7 @@ export default {
 			}
 		}
 	},
-	destroyed() {
+	unmounted() {
 		this.clearFocusTrap()
 		this.$el.remove()
 	},
@@ -1041,12 +1041,12 @@ export default {
 	transition: opacity 250ms;
 }
 
-.fade-enter,
+.fade-enter-from,
 .fade-leave-to {
 	opacity: 0;
 }
 
-.fade-visibility-enter,
+.fade-visibility-enter-from,
 .fade-visibility-leave-to {
 	visibility: hidden;
 	opacity: 0;
@@ -1059,9 +1059,9 @@ export default {
 	transition: opacity 250ms;
 }
 
-.modal-in-enter,
+.modal-in-enter-from,
 .modal-in-leave-to,
-.modal-out-enter,
+.modal-out-enter-from,
 .modal-out-leave-to {
 	opacity: 0;
 }
diff --git a/styleguide.config.js b/styleguide.config.js
index b997236d8c..25aeabeca4 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -120,7 +120,6 @@ module.exports = async () => {
 					// Not yet adjusted for vue3
 					'src/components/NcAvatar*/*.vue',
 					'src/components/NcHeaderMenu*/*.vue',
-					'src/components/NcModal*/*.vue',
 					'src/components/NcRelatedResourcesPanel*/*.vue',
 					'src/components/NcRichContenteditable*/*.vue',
 					'src/components/NcUserBubble*/*.vue',
diff --git a/vite.config.mts b/vite.config.mts
index 42887f0440..d6299a2a36 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -100,7 +100,6 @@ const overrides = defineConfig({
 			'./tests/unit/components/NcAvatar',
 			'./tests/unit/components/NcAppNavigation',
 			'./tests/unit/components/NcAppSidebar',
-			'./tests/unit/components/NcModal',
 			'./tests/unit/components/NcRichContenteditable',
 			'./tests/unit/components/NcRichText',
 			'./tests/unit/mixins/*',