[next] feat(NcModal): migrate to vue 3

.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',

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',
 		],

cypress/component/modal.cy.ts

@@ -1,22 +1,23 @@
-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',
 			},
 			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,
 			},

src/components/NcModal/NcModal.vue

@@ -21,15 +21,15 @@
   -->
 
 <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
 <template>
 	<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;
 }

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',

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/*',