Merge pull request #4719 from nextcloud-libraries/feat/2154/avatar

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

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

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) {

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

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'

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

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,

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