Merge pull request #4831 from nextcloud-libraries/feat/2154/content

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

.eslintrc.js

@@ -15,14 +15,9 @@ module.exports = {
 		'cypress',
 	],
 	ignorePatterns: [
-		'src/components/NcAppContent*/*.vue',
-		'src/components/NcAppNavigation*/*.vue',
-		'src/components/NcAppSettings*/*.vue',
 		'src/components/NcAppSidebar*/*.vue',
-		'src/components/NcContent/*.vue',
 		'src/components/NcDashboard*/*.vue',
 		'src/components/NcRich*/**/*.vue',
-		'src/utils/IsMobileState.js',
 	],
 	parserOptions: {
 		babelOptions: {

src/components/NcAppContent/NcAppContent.vue

@@ -81,7 +81,7 @@ The list size must be between the min and the max width value.
 			<div v-if="isMobile"
 				:class="showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'"
 				class="app-content-wrapper app-content-wrapper--mobile">
-				<NcAppDetailsToggle v-if="hasList && showDetails" @click.native.stop.prevent="hideDetails" />
+				<NcAppDetailsToggle v-if="hasList && showDetails" @click.stop.prevent="hideDetails" />
 
 				<slot name="list" />
 				<slot />

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -59,7 +59,7 @@ export default {
 		this.toggleAppNavigationButton(true)
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.toggleAppNavigationButton(false)
 	},
 

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -95,12 +95,6 @@ export default {
 		NcAppNavigationToggle,
 	},
 
-	setup() {
-		return {
-			isMobile: useIsMobile(),
-		}
-	},
-
 	props: {
 		/**
 		 * The aria label to describe the navigation
@@ -119,6 +113,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			isMobile: useIsMobile(),
+		}
+	},
+
 	data() {
 		return {
 			open: true,

src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue

@@ -89,10 +89,9 @@
 		</h2>
 
 		<!-- Actions -->
-		<div v-if="hasActions"
+		<div v-if="!!$slots.actions"
 			class="app-navigation-caption__actions">
-			<NcActions v-bind="$attrs"
-				v-on="$listeners">
+			<NcActions v-bind="$attrs">
 				<!-- @slot Slot for the actions menu -->
 				<slot name="actions" />
 				<template #icon>
@@ -128,13 +127,6 @@ export default {
 		// eslint-disable-next-line
 		' ': {},
 	},
-
-	computed: {
-		// Check if the actions slot is populated
-		hasActions() {
-			return !!this.$slots.actions
-		},
-	},
 }
 </script>
 

src/components/NcAppNavigationItem/NcAppNavigationItem.vue

@@ -106,6 +106,11 @@ button will be automatically created.
 			OpenInNew,
 			Pencil,
 		},
+		methods: {
+			alert(msg) {
+				alert(msg)
+			},
+		},
 	}
 	</script>
 ```
@@ -172,7 +177,7 @@ prevent the user from collapsing the items.
 					</template>
 				</NcActionLink>
 			</template>
-			<template>
+			<template #default>
 				<NcAppNavigationItem name="AppNavigationItemChild1" />
 				<NcAppNavigationItem name="AppNavigationItemChild2" />
 				<NcAppNavigationItem name="AppNavigationItemChild3" />
@@ -193,6 +198,11 @@ prevent the user from collapsing the items.
 			OpenInNew,
 			Pencil,
 		},
+		methods: {
+			alert(msg) {
+				alert(msg)
+			},
+		},
 	}
 	</script>
 ```
@@ -217,16 +227,31 @@ the placeholder is the previous name of the element.
 		components: {
 			Folder,
 		},
+		methods: {
+			alert(msg) {
+				alert(msg)
+			},
+		},
 	}
 	</script>
 ```
 
 ### Undo element
 Just set the `undo` and `name` props. When clicking the undo button, an `undo` event is emitted.
 
-```
-<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')"  />
-
+```vue
+	<template>
+		<NcAppNavigationItem :undo="true" name="Deleted important entry" @undo="alert('undo delete')" />
+	</template>
+	<script>
+	export default {
+		methods: {
+			alert(msg) {
+				alert(msg)
+			},
+		},
+	}
+	</script>
 ```
 
 ### Link element
@@ -255,14 +280,12 @@ Just set the `pinned` prop.
 		:class="{
 			'app-navigation-entry--opened': opened,
 			'app-navigation-entry--pinned': pinned,
-			'app-navigation-entry--collapsible': collapsible,
+			'app-navigation-entry--collapsible': allowCollapse && !!$slots.default,
 		}"
 		class="app-navigation-entry-wrapper">
 		<component :is="isRouterLink ? 'router-link' : 'NcVNodes'"
 			v-slot="{ href: routerLinkHref, navigate, isActive }"
-			:custom="isRouterLink ? true : false"
-			:to="to"
-			:exact="isRouterLink ? exact : null">
+			v-bind="{ ...isRouterLink && { custom: true, to } }">
 			<div :class="{
 					'app-navigation-entry--editing': editingActive,
 					'app-navigation-entry--deleted': undo,
@@ -274,7 +297,7 @@ Just set the `pinned` prop.
 					class="app-navigation-entry-link"
 					:aria-current="active || (isActive && to) ? 'page' : undefined"
 					:aria-description="ariaDescription"
-					:aria-expanded="hasChildren ? opened.toString() : undefined"
+					:aria-expanded="!!$slots.default ? opened.toString() : undefined"
 					:href="href || routerLinkHref || '#'"
 					:target="isExternal(href) ? '_blank' : undefined"
 					:title="title || name"
@@ -311,14 +334,14 @@ Just set the `pinned` prop.
 				</div>
 
 				<!-- Counter and Actions -->
-				<div v-if="hasUtils && !editingActive"
+				<div v-if="(!!$slots.actions || !!$slots.counter || editable || undo) && !editingActive"
 					class="app-navigation-entry__utils"
 					:class="{'app-navigation-entry__utils--display-actions': forceDisplayActions || menuOpenLocalValue || menuOpen }">
-					<div v-if="$slots.counter"
+					<div v-if="!!$slots.counter"
 						class="app-navigation-entry__counter-wrapper">
 						<slot name="counter" />
 					</div>
-					<NcActions v-if="$slots.actions || (editable && !editingActive) || undo"
+					<NcActions v-if="!!$slots.actions || (editable && !editingActive) || undo"
 						ref="actions"
 						:inline="inlineActions"
 						class="app-navigation-entry__actions"
@@ -352,14 +375,14 @@ Just set the `pinned` prop.
 						<slot name="actions" />
 					</NcActions>
 				</div>
-				<NcAppNavigationIconCollapsible v-if="collapsible" :open="opened" @click.prevent.stop="toggleCollapse" />
+				<NcAppNavigationIconCollapsible v-if="allowCollapse && !!$slots.default" :open="opened" @click.prevent.stop="toggleCollapse" />
 
 				<!-- Anything (virtual) that should be mounted in the component, like a related modal -->
 				<slot name="extra" />
 			</div>
 		</component>
 		<!-- Children elements -->
-		<ul v-if="canHaveChildren && hasChildren" class="app-navigation-entry__children">
+		<ul v-if="canHaveChildren && !!$slots.default" class="app-navigation-entry__children">
 			<slot />
 		</ul>
 	</li>
@@ -465,14 +488,6 @@ export default {
 			default: null,
 		},
 
-		/**
-		 * Pass in `true` if you want the matching behaviour to
-		 * be non-inclusive: https://router.vuejs.org/api/#exact
-		 */
-		exact: {
-			type: Boolean,
-			default: false,
-		},
 		/**
 		 * Gives the possibility to collapse the children elements into the
 		 * parent element (true) or expands the children elements (false).
@@ -609,7 +624,6 @@ export default {
 			editingValue: '',
 			opened: this.open, // Collapsible state
 			editingActive: false,
-			hasChildren: false,
 			/**
 			 * Tracks the open state of the actions menu
 			 */
@@ -623,10 +637,6 @@ export default {
 			return this.to && !this.href
 		},
 
-		collapsible() {
-			return this.allowCollapse && !!this.$slots.default
-		},
-
 		// Checks if the component is already a children of another
 		// instance of AppNavigationItem
 		canHaveChildren() {
@@ -637,13 +647,6 @@ export default {
 			}
 		},
 
-		hasUtils() {
-			if (this.$slots.actions || this.$slots.counter || this.editable || this.undo) {
-				return true
-			}
-			return false
-		},
-
 		editButtonAriaLabel() {
 			return this.editLabel ? this.editLabel : t('Edit item')
 		},
@@ -662,14 +665,6 @@ export default {
 		},
 	},
 
-	created() {
-		this.updateSlotInfo()
-	},
-
-	beforeUpdate() {
-		this.updateSlotInfo()
-	},
-
 	methods: {
 		// sync opened menu state with prop
 		onMenuToggle(state) {
@@ -726,10 +721,6 @@ export default {
 			this.$emit('undo')
 		},
 
-		updateSlotInfo() {
-			this.hasChildren = !!this.$slots.default
-		},
-
 		/**
 		 * Show actions upon focus
 		 */

src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue

@@ -161,7 +161,7 @@ export default {
 	overflow-y: hidden !important;
 }
 
-.slide-up-enter,
+.slide-up-enter-from,
 .slide-up-leave-to {
 	max-height: 0 !important;
 	padding: 0 10px !important;

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -29,7 +29,7 @@ providing the section's name prop. You can put your settings within each
 <template>
 	<div>
 		<NcButton @click="settingsOpen = true">Show Settings</NcButton>
-		<NcAppSettingsDialog :open.sync="settingsOpen" :show-navigation="true" name="Application settings">
+		<NcAppSettingsDialog v-model:open="settingsOpen" :show-navigation="true" name="Application settings">
 			<NcAppSettingsSection id="asci-name-1" name="Example name 1">
 				Some example content
 			</NcAppSettingsSection>
@@ -81,7 +81,7 @@ You can also add icons to the section navigation:
 <template>
 	<div>
 		<NcButton @click="settingsOpen = true">Show Settings</NcButton>
-		<NcAppSettingsDialog :open.sync="settingsOpen" :show-navigation="true" name="Application settings">
+		<NcAppSettingsDialog v-model:open="settingsOpen" :show-navigation="true" name="Application settings">
 			<NcAppSettingsSection id="asci-name-1" name="Instagram">
 				<template #icon>
 					<Instagram :size="20" />
@@ -297,7 +297,7 @@ export default {
 
 	mounted() {
 		// Select first settings section
-		this.selectedSection = this.$slots.default[0].componentOptions.propsData.id
+		this.selectedSection = this.$slots.default?.()[0]?.props?.id
 	},
 
 	updated() {
@@ -333,7 +333,7 @@ export default {
 			const newSections = [...this.sections, { id, name, icon }]
 			// Sort sections by order in slots
 			this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
-				const indexOf = (id) => this.$slots.default.indexOf(vnode => vnode?.componentOptions?.propsData?.id === id)
+				const indexOf = (id) => this.$slots.default?.().indexOf(vnode => vnode?.props?.id === id)
 				return indexOf(idA) - indexOf(idB)
 			})
 		},

src/components/NcAppSettingsSection/NcAppSettingsSection.vue

@@ -61,18 +61,18 @@ export default {
 	watch: {
 		id(newId, oldId) {
 			this.unregisterSection(oldId)
-			this.registerSection(newId, this.name, this.$slots?.icon)
+			this.registerSection(newId, this.name, this.$slots?.icon?.())
 		},
 		name(newName) {
 			this.unregisterSection(this.id)
-			this.registerSection(this.id, newName, this.$slots?.icon)
+			this.registerSection(this.id, newName, this.$slots?.icon?.())
 		},
 	},
 	mounted() {
 		// register section for navigation
-		this.registerSection(this.id, this.name, this.$slots?.icon)
+		this.registerSection(this.id, this.name, this.$slots?.icon?.())
 	},
-	beforeDestroy() {
+	beforeUnmount() {
 		this.unregisterSection(this.id)
 	},
 }

src/components/NcContent/NcContent.vue

@@ -47,7 +47,9 @@ It includes the Navigation, the App content and the Sidebar.
 				<h2>Your main app content here</h2>
 				<NcButton @click="opened = !opened">Toggle sidebar</NcButton>
 			</NcAppContent>
+			<!-- Todo: Bring back once migrated
 			<NcAppSidebar v-if="opened" name="cat-picture.jpg" @close="opened=false"></NcAppSidebar>
+			-->
 		</NcContent>
 	</template>
 	<script>
@@ -90,8 +92,6 @@ export default {
 <style lang="scss" scoped>
 .content {
 	box-sizing: border-box;
-	margin: var(--body-container-margin);
-	margin-top: 50px;
 	display: flex;
 	width: calc(100% - var(--body-container-margin) * 2);
 	border-radius: var(--body-container-radius);