deps: update nextcloud/vue 8.26.0

CHANGELOG.md

@@ -13,6 +13,8 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 - respect global `disable all keyboard shortcuts` setting
 - disable shortcuts in input fields from global overlays (e.g. Nextcloud assistant)
 - fix relative date strings
+- Switching between folders in compact mode doesn't close actual selected item
+- current selected article is removed from the list after showing details in mobile mode
 
 # Releases
 ## [25.3.1] - 2025-03-25

package.json

@@ -52,7 +52,7 @@
     "@nextcloud/moment": "^1.3.2",
     "@nextcloud/password-confirmation": "^5.3.1",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/vue": "^8.25.1",
+    "@nextcloud/vue": "^8.26.0",
     "@vue/vue2-jest": "^29.2.6",
     "lodash": "^4.17.21",
     "vue": "^2.7.16",

src/components/ContentTemplate.vue

@@ -6,7 +6,8 @@
 		@update:showDetails="showItem(false)">
 		<template #list>
 			<NcAppContentList>
-				<FeedItemDisplayList :items="items"
+				<FeedItemDisplayList ref="itemListElement"
+					:items="items"
 					:fetch-key="fetchKey"
 					role="region"
 					:aria-label="t('news', 'Article list')"
@@ -81,6 +82,8 @@ const showDetails = ref(false)
 
 const contentElement = ref()
 
+const itemListElement = ref()
+
 const layout = computed(() => {
 	switch (appStore.getters.splitmode(appStore.state)) {
 	case '1':
@@ -113,6 +116,9 @@ watch(selectedFeedItem, (newSelectedFeedItem) => {
  */
 function showItem(value) {
 	showDetails.value = value
+	if (layout.value === 'no-split' && !value) {
+		itemListElement.value?.enableNavHotkeys()
+	}
 }
 
 </script>

src/components/feed-display/FeedItemDisplay.vue

@@ -215,10 +215,6 @@ export default Vue.extend({
 	},
 	created() {
 		// create shortcuts
-		if (this.splitModeOff) {
-			useHotKey(['s', 'l', 'i'], this.toggleStarred)
-			useHotKey('u', this.toggleRead)
-		}
 		if (this.splitModeOff && !this.screenReaderMode) {
 			useHotKey('Escape', this.closeDetails)
 		}

src/components/feed-display/FeedItemDisplayList.vue

@@ -26,7 +26,7 @@
 							:item-index="index + 1"
 							:item="item"
 							:class="{ 'active': selectedItem && selectedItem.id === item.id }"
-							@show-details="$emit('show-details')" />
+							@show-details="showDetails" />
 					</template>
 				</template>
 			</VirtualScroll>
@@ -80,6 +80,8 @@ export default Vue.extend({
 			selectedItem: undefined as FeedItem | undefined,
 			debouncedClickItem: null,
 			listOrdering: this.getListOrdering(),
+			stopPrevItemHotkey: null,
+			stopNextItemHotkey: null,
 		}
 	},
 	computed: {
@@ -167,8 +169,7 @@ export default Vue.extend({
 	},
 	created() {
 		// create shortcuts
-		useHotKey(['p', 'k', 'ArrowLeft'], this.jumpToPreviousItem)
-		useHotKey(['n', 'j', 'ArrowRight'], this.jumpToNextItem)
+		this.enableNavHotkeys()
 		useHotKey('r', this.refreshApp)
 		useHotKey('a', this.markRead, { shift: true })
 		useHotKey(['s', 'l', 'i'], this.toggleStarred)
@@ -191,6 +192,9 @@ export default Vue.extend({
 		this.$root.$on('next-item', this.jumpToNextItem)
 		this.$root.$on('prev-item', this.jumpToPreviousItem)
 	},
+	destroyed() {
+		this.disableNavHotkeys()
+	},
 	methods: {
 		async refreshApp() {
 			this.$refs.virtualScroll.scrollTop = 0
@@ -231,7 +235,28 @@ export default Vue.extend({
 		markRead() {
 			this.$emit('mark-read')
 		},
+		disableNavHotkeys() {
+			if (this.stopPrevItemHotkey) {
+				this.stopPrevItemHotkey()
+			}
+			if (this.stopNextItemHotkey) {
+				this.stopNextItemHotkey()
+			}
+		},
+		enableNavHotkeys() {
+			this.disableNavHotkeys()
+			this.stopPrevItemHotkey = useHotKey(['p', 'k', 'ArrowLeft'], this.jumpToPreviousItem)
+			this.stopNextItemHotkey = useHotKey(['n', 'j', 'ArrowRight'], this.jumpToNextItem)
+		},
 		showDetails() {
+			/*
+			 * disable nav keys when showing details in no-split-mode
+			 * proper navigation (fetchMore, scroll to last item when closed)
+			 * isn't implemented yet
+			 */
+			if (this.splitModeOff) {
+				this.disableNavHotkeys()
+			}
 			this.$emit('show-details')
 		},
 		unreadFilter(item: FeedItem): boolean {