feat(NcAppSidebar*): migrate to vue 3

Signed-off-by: Raimund Schlüßler <[email protected]>

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
 		'cypress',
 	],
 	ignorePatterns: [
-		'src/components/NcAppSidebar*/*.vue',
 		'src/components/NcDashboard*/*.vue',
 		'src/components/NcRich*/**/*.vue',
 	],

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -110,9 +110,9 @@ export default {
 ```vue
 <template>
 	<div>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
-		<NcCheckboxRadioSwitch :checked.sync="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[0]">Show search tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[1]">Show settings tab</NcCheckboxRadioSwitch>
+		<NcCheckboxRadioSwitch v-model:checked="showTabs[2]">Show sharing tab</NcCheckboxRadioSwitch>
 		<NcAppSidebar
 			name="cat-picture.jpg"
 			subname="last edited 3 weeks ago">
@@ -208,7 +208,7 @@ export default {
 		<NcAppSidebar
 			name="cat-picture.jpg"
 			subname="last edited 3 weeks ago"
-			:active.sync="active">
+			v-model:active="active">
 			<NcAppSidebarTab name="Search" id="search-tab">
 				<template #icon>
 					<Magnify :size="20" />
@@ -255,7 +255,7 @@ export default {
 ```vue
 <template>
 	<NcAppSidebar
-		:name.sync="name"
+		v-model:name="name"
 		:name-editable="true"
 		name-placeholder="Filename"
 		subname="last edited 3 weeks ago">
@@ -279,7 +279,7 @@ export default {
 <template>
 	<NcAppSidebar
 		:name="name"
-		:name-editable.sync="nameEditable"
+		v-model:name-editable="nameEditable"
 		:name-placeholder="namePlaceholder"
 		:subname="subname"
 		@update:name="nameUpdate">
@@ -347,14 +347,14 @@ export default {
 		@after-leave="onAfterLeave">
 		<aside id="app-sidebar-vue" class="app-sidebar">
 			<header :class="{
-					'app-sidebar-header--with-figure': hasFigure,
+					'app-sidebar-header--with-figure': isSlotPopulated($slots?.header?.()) || background,
 					'app-sidebar-header--compact': compact,
 				}"
 				class="app-sidebar-header">
 				<!-- container for figure and description, allows easy switching to compact mode -->
 				<div class="app-sidebar-header__info">
 					<!-- sidebar header illustration/figure -->
-					<div v-if="hasFigure && !empty"
+					<div v-if="(isSlotPopulated($slots?.header?.()) || background) && !empty"
 						:class="{
 							'app-sidebar-header__figure--with-action': hasFigureClickListener
 						}"
@@ -371,14 +371,14 @@ export default {
 					<!-- sidebar details -->
 					<div v-if="!empty"
 						:class="{
-							'app-sidebar-header__desc--with-tertiary-action': canStar || $slots['tertiary-actions'],
+							'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($slots?.['tertiary-actions']?.()),
 							'app-sidebar-header__desc--editable': nameEditable && !subname,
 							'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,
-							'app-sidebar-header__desc--without-actions': !$slots['secondary-actions'],
+							'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots?.['secondary-actions']?.()),
 						}"
 						class="app-sidebar-header__desc">
 						<!-- favourite icon -->
-						<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
+						<div v-if="canStar || isSlotPopulated($slots?.['tertiary-actions']?.())" class="app-sidebar-header__tertiary-actions">
 							<slot name="tertiary-actions">
 								<NcButton v-if="canStar"
 									:aria-label="favoriteTranslated"
@@ -430,7 +430,7 @@ export default {
 									</form>
 								</template>
 								<!-- header main menu -->
-								<NcActions v-if="$slots['secondary-actions']"
+								<NcActions v-if="isSlotPopulated($slots?.['secondary-actions']?.())"
 									class="app-sidebar-header__menu"
 									:force-menu="forceMenu">
 									<slot name="secondary-actions" />
@@ -457,7 +457,7 @@ export default {
 					</template>
 				</NcButton>
 
-				<div v-if="$slots['description'] && !empty" class="app-sidebar-header__description">
+				<div v-if="isSlotPopulated($slots?.description?.()) && !empty" class="app-sidebar-header__description">
 					<slot name="description" />
 				</div>
 			</header>
@@ -488,6 +488,7 @@ import Focus from '../../directives/Focus/index.js'
 import Linkify from '../../directives/Linkify/index.js'
 import Tooltip from '../../directives/Tooltip/index.js'
 import { t } from '../../l10n.js'
+import isSlotPopulated from '../../utils/isSlotPopulated.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import Close from 'vue-material-design-icons/Close.vue'
@@ -634,7 +635,7 @@ export default {
 		'opened',
 		'figure-click',
 		'update:starred',
-		'update:nameEditable',
+		'update:name-editable',
 		'update:name',
 		'update:active',
 		'submit-name',
@@ -654,11 +655,8 @@ export default {
 		canStar() {
 			return this.isStarred !== null
 		},
-		hasFigure() {
-			return this.$slots.header || this.background
-		},
 		hasFigureClickListener() {
-			return this.$listeners['figure-click']
+			return this.$attrs['figure-click']
 		},
 	},
 
@@ -668,12 +666,14 @@ export default {
 		},
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.
 		this.$emit('closed')
 	},
 
 	methods: {
+		isSlotPopulated,
+
 		onBeforeEnter(element) {
 			/**
 			 * The sidebar is opening and the transition is in progress
@@ -749,18 +749,17 @@ export default {
 			this.$emit('update:starred', this.isStarred)
 		},
 
-		editName() {
+		async editName() {
 			/**
 			 * Emitted when the nameEditable value changes
 			 *
 			 * @type {boolean}
 			 */
-			this.$emit('update:nameEditable', true)
+			await this.$emit('update:name-editable', true)
 			// Focus the name input
 			if (this.nameEditable) {
-				this.$nextTick(
-					() => this.$refs.nameInput.focus(),
-				)
+				await this.$nextTick()
+				this.$refs.nameInput.focus()
 			}
 		},
 
@@ -786,7 +785,7 @@ export default {
 		 */
 		onSubmitName(event) {
 			// Disable editing
-			this.$emit('update:nameEditable', false)
+			this.$emit('update:name-editable', false)
 			/**
 			 * Emitted when the name edit input has been submitted
 			 *
@@ -796,7 +795,7 @@ export default {
 		},
 		onDismissEditing() {
 			// Disable editing
-			this.$emit('update:nameEditable', false)
+			this.$emit('update:name-editable', false)
 			/**
 			 * Emitted when the name edit has been cancelled
 			 *

src/components/NcAppSidebar/NcAppSidebarTabs.vue

@@ -114,7 +114,7 @@ export default {
 			 */
 			tabs: [],
 			/**
-			 * Local active (open) tab's ID. It allows to use component without active.sync
+			 * Local active (open) tab's ID. It allows to use component without v-model:active
 			 */
 			activeTab: '',
 		}

src/components/NcAppSidebarTab/NcAppSidebarTab.vue

@@ -102,7 +102,7 @@ export default {
 		this.registerTab(this)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		// Unregister the tab from tabs
 		this.unregisterTab(this.id)
 	},
@@ -130,7 +130,7 @@ export default {
 		 * @return {import('vue').VNode[]}
 		 */
 		renderIcon() {
-			return this.$scopedSlots.icon?.()
+			return this.$slots.icon?.()
 		},
 	},
 }

src/components/index.js

@@ -45,8 +45,8 @@ export { default as NcAppNavigationSettings } from './NcAppNavigationSettings/in
 export { default as NcAppNavigationSpacer } from './NcAppNavigationSpacer/index.js'
 export { default as NcAppSettingsDialog } from './NcAppSettingsDialog/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 NcAppSidebar } from './NcAppSidebar/index.js'
+export { default as NcAppSidebarTab } from './NcAppSidebarTab/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'

styleguide.config.js

@@ -148,12 +148,12 @@ module.exports = async () => {
 									'src/components/NcAppContent*/*.vue',
 								],
 							},
-				// 			{
-				// 				name: 'NcAppSidebar',
-				// 				components: [
-				// 					'src/components/NcAppSidebar*/*.vue',
-				// 				],
-				// 			},
+							{
+								name: 'NcAppSidebar',
+								components: [
+									'src/components/NcAppSidebar*/*.vue',
+								],
+							},
 							{
 								name: 'NcAppSettings',
 								components: [

tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js

@@ -24,7 +24,6 @@
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import Vue from 'vue'
 import NcAppSidebarTabs from '../../../../src/components/NcAppSidebar/NcAppSidebarTabs.vue'
 import NcAppSidebarTab from '../../../../src/components/NcAppSidebarTab/NcAppSidebarTab.vue'
 import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
@@ -36,21 +35,19 @@ describe('NcAppSidebarTabs.vue', () => {
 
 	beforeEach((ctx) => {
 		ctx.onWarning = vi.fn()
-		ctx.consoleDebug = vi.fn()
-		Vue.config.warnHandler = ctx.onWarning
-		global.console = { ...console, debug: ctx.consoleDebug }
+		ctx.onDebug = vi.fn()
+		global.console = { ...console, debug: ctx.onDebug, warn: ctx.onWarning }
 	})
 
 	afterEach(() => {
-		Vue.config.warnHandler = () => null
 		global.console = initialConsole
 	})
 
 	describe('when using the component without tabs', () => {
 		describe('with only one div', () => {
 			beforeEach((ctx) => {
 				ctx.wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
+					props: {
 						name: 'Sidebar name.',
 					},
 					slots: {
@@ -59,12 +56,12 @@ describe('NcAppSidebarTabs.vue', () => {
 				})
 			})
 
-			it('does not display the nav element', ({wrapper}) => {
+			it('does not display the nav element', ({ wrapper }) => {
 				expect(wrapper.find('nav').exists()).toBe(false)
 			})
-			it('Issues no warning nor logs to console.', ({ consoleDebug, onWarning }) => {
+			it('Issues no warning nor logs to console.', ({ onDebug, onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
-				expect(consoleDebug).toHaveBeenCalledTimes(0)
+				expect(onDebug).toHaveBeenCalledTimes(0)
 			})
 			it('does not display the tablist element', ({ wrapper }) => {
 				expect(wrapper.find('div[role="tablist"]').exists()).toBe(false)
@@ -74,42 +71,42 @@ describe('NcAppSidebarTabs.vue', () => {
 		describe('with div and secondary action', () => {
 			beforeEach((ctx) => {
 				ctx.wrapper = mount(NcAppSidebarTabs, {
-					propsData: {
+					props: {
 						name: 'Sidebar name.',
 					},
 					slots: {
 						default: '<div />',
 						'secondary-actions': ['<NcActionButton icon="icon-delete">Test</NcActionButton>'],
 					},
-					stubs: {
-						// used to register custom components
-						NcActionButton,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcActionButton,
+						},
 					},
 				})
 			})
 			it('Issues no warning.', ({ onWarning }) => {
 				expect(onWarning).toHaveBeenCalledTimes(0)
 			})
 		})
-
-		it('does not display the tablist element', () => {
-			expect(wrapper.find('div[role="tablist"]').exists()).toBe(false)
-		})
 	})
 	describe('when only children of type AppSidebarTab is used', () => {
 		describe('when 3 children of type AppSidebarTab are used', () => {
-			beforeEach(() => {
-				wrapper = mount(NcAppSidebarTabs, {
+			beforeEach((ctx) => {
+				ctx.wrapper = mount(NcAppSidebarTabs, {
 					slots: {
 						default: [
 							'<nc-app-sidebar-tab id="first" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
 							'<nc-app-sidebar-tab id="second" icon="icon-details" name="Tab2">Tab2</nc-app-sidebar-tab>',
 							'<nc-app-sidebar-tab id="last" icon="icon-details" name="Tab2">Tab2</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-					// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 					attachTo: document.body,
 				})
@@ -131,12 +128,12 @@ describe('NcAppSidebarTabs.vue', () => {
 			})
 			it('emit "update:active" event with the first tab id when keydown pageup is pressed', ({ wrapper }) => {
 				const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type')
-				lastLink.trigger('keydown.pageup')
+				lastLink.trigger('keydown.page-up')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['first'])
 			})
 			it('emit "update:active" event with the last tab id when keydown pagedown is pressed', ({ wrapper }) => {
 				const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type')
-				lastLink.trigger('keydown.pagedown')
+				lastLink.trigger('keydown.page-down')
 				expect(wrapper.emitted('update:active')[0]).toEqual(['last'])
 			})
 			describe('when we select the first element', () => {
@@ -180,9 +177,11 @@ describe('NcAppSidebarTabs.vue', () => {
 							'<nc-app-sidebar-tab id="1" icon="icon-details" name="Tab1">Tab1</nc-app-sidebar-tab>',
 						],
 					},
-					stubs: {
-						// used to register custom components
-						NcAppSidebarTab,
+					global: {
+						stubs: {
+							// used to register custom components
+							NcAppSidebarTab,
+						},
 					},
 				})
 			})

vite.config.mts

@@ -105,7 +105,6 @@ const overrides = defineConfig({
 		setupFiles: resolve(__dirname, './tests/setup.js'),
 		exclude:[
 			...configDefaults.exclude,
-			'./tests/unit/components/NcAppSidebar',
 			'./tests/unit/components/NcRichContenteditable',
 			'./tests/unit/components/NcRichText',
 			'./tests/unit/mixins/*',