From 31bdf5481c3dafc9a2c51b851e052dee184b9a3a 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 07:51:59 +0100
Subject: [PATCH] feat(NcAvatar): 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 -
 src/components/NcAvatar/NcAvatar.vue             | 4 ++--
 src/components/NcListItemIcon/NcListItemIcon.vue | 9 ++++-----
 src/components/index.js                          | 2 +-
 styleguide.config.js                             | 1 -
 tests/unit/components/NcAvatar/NcAvatar.spec.ts  | 7 ++++---
 vite.config.mts                                  | 1 -
 7 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 99b3bc3b1d..5989476b16 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,7 +22,6 @@ module.exports = {
 		'src/components/NcBreadcrumb*/*.vue',
 		'src/components/NcContent/*.vue',
 		'src/components/NcDashboard*/*.vue',
-		'src/components/NcAvatar*/*.vue',
 		'src/components/NcHeaderMenu*/*.vue',
 		'src/components/NcRelatedResourcesPanel*/*.vue',
 		'src/components/NcRich*/**/*.vue',
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index b382953731..589c0cdca8 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -124,7 +124,7 @@ export default {
 		v-on="hasMenu ? {
 			click: toggleMenu,
 			keydown: toggleMenu,
-		} : null">
+		} : {}">
 		<!-- @slot Icon slot -->
 		<slot name="icon">
 			<!-- Avatar icon or image -->
@@ -558,7 +558,7 @@ export default {
 		}
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		unsubscribe('settings:avatar:updated', this.loadAvatarUrl)
 		unsubscribe('settings:display-name:updated', this.loadAvatarUrl)
 		if (this.showUserStatus && this.user && !this.isNoUser) {
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index 77838dd6c7..dbeaf3340e 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -122,13 +122,13 @@ It might be used for list rendering or within the multiselect for example
 	<span :id="id"
 		class="option"
 		:style="cssVars">
-		<!-- <NcAvatar v-bind="$attrs"
+		<NcAvatar v-bind="$attrs"
 			:disable-menu="true"
 			:disable-tooltip="true"
 			:display-name="displayName || name"
 			:is-no-user="isNoUser"
 			:size="avatarSize"
-			class="option__avatar" /> -->
+			class="option__avatar" />
 		<div class="option__details">
 			<NcHighlight class="option__lineone"
 				:text="name"
@@ -158,8 +158,7 @@ It might be used for list rendering or within the multiselect for example
 </template>
 
 <script>
-// TODO: bring back avatar once migrated
-// import NcAvatar from '../NcAvatar/index.js'
+import NcAvatar from '../NcAvatar/index.js'
 import NcHighlight from '../NcHighlight/index.js'
 import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
@@ -173,7 +172,7 @@ export default {
 	name: 'NcListItemIcon',
 
 	components: {
-		// NcAvatar,
+		NcAvatar,
 		NcHighlight,
 		NcIconSvgWrapper,
 	},
diff --git a/src/components/index.js b/src/components/index.js
index a2df6bdfeb..e3985c8553 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -47,7 +47,7 @@ export { default as NcActionTextEditable } from './NcActionTextEditable/index.js
 // export { default as NcAppSettingsSection } from './NcAppSettingsSection/index.js'
 // export { default as NcAppSidebar } from './NcAppSidebar/index.js'
 // export { default as NcAppSidebarTab } from './NcAppSidebarTab/index.js'
-// export { default as NcAvatar } from './NcAvatar/index.js'
+export { default as NcAvatar } from './NcAvatar/index.js'
 // export { default as NcBreadcrumb } from './NcBreadcrumb/index.js'
 // export { default as NcBreadcrumbs } from './NcBreadcrumbs/index.js'
 export { default as NcButton } from './NcButton/index.js'
diff --git a/styleguide.config.js b/styleguide.config.js
index 25aeabeca4..6fe553e0a8 100644
--- a/styleguide.config.js
+++ b/styleguide.config.js
@@ -118,7 +118,6 @@ module.exports = async () => {
 					'src/components/NcUserBubble/NcUserBubbleDiv.vue',
 
 					// Not yet adjusted for vue3
-					'src/components/NcAvatar*/*.vue',
 					'src/components/NcHeaderMenu*/*.vue',
 					'src/components/NcRelatedResourcesPanel*/*.vue',
 					'src/components/NcRichContenteditable*/*.vue',
diff --git a/tests/unit/components/NcAvatar/NcAvatar.spec.ts b/tests/unit/components/NcAvatar/NcAvatar.spec.ts
index 669d7a1b32..7229fda376 100644
--- a/tests/unit/components/NcAvatar/NcAvatar.spec.ts
+++ b/tests/unit/components/NcAvatar/NcAvatar.spec.ts
@@ -21,6 +21,7 @@
  */
 
 import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import NcAvatar from '../../../../src/components/NcAvatar/NcAvatar.vue'
 
@@ -33,7 +34,7 @@ describe('NcAvatar.vue', () => {
 		}
 
 		const wrapper = mount(NcAvatar, {
-			propsData: {
+			props: {
 				user: 'janedoe',
 				displayName: 'J. Doe',
 				preloadedUserStatus: status,
@@ -53,7 +54,7 @@ describe('NcAvatar.vue', () => {
 		}
 
 		const wrapper = mount(NcAvatar, {
-			propsData: {
+			props: {
 				user: 'janedoe',
 				displayName: 'J. Doe',
 				preloadedUserStatus: status,
@@ -74,7 +75,7 @@ describe('NcAvatar.vue', () => {
 		}
 
 		const wrapper = mount(NcAvatar, {
-			propsData: {
+			props: {
 				user: 'janedoe',
 				displayName: 'J. Doe',
 				preloadedUserStatus: status,
diff --git a/vite.config.mts b/vite.config.mts
index d6299a2a36..8cdd0a2db0 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -97,7 +97,6 @@ const overrides = defineConfig({
 		setupFiles: resolve(__dirname, './tests/setup.js'),
 		exclude:[
 			...configDefaults.exclude,
-			'./tests/unit/components/NcAvatar',
 			'./tests/unit/components/NcAppNavigation',
 			'./tests/unit/components/NcAppSidebar',
 			'./tests/unit/components/NcRichContenteditable',