[stable28] chore(deps): Bump nextcloud/vue to 8.4.0

package.json

@@ -35,7 +35,7 @@
     "@nextcloud/moment": "^1.2.2",
     "@nextcloud/paths": "^2.1.0",
     "@nextcloud/router": "^2.2.0",
-    "@nextcloud/vue": "^8.3.0",
+    "@nextcloud/vue": "^8.4.0",
     "crypto-js": "^4.2.0",
     "debounce": "^1.2.1",
     "emoji-mart-vue-fast": "^15.0.0",

src/App.vue

@@ -46,7 +46,7 @@ import { generateUrl } from '@nextcloud/router'
 
 import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
 import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 
 import ConversationSettingsDialog from './components/ConversationSettings/ConversationSettingsDialog.vue'
 import LeftSidebar from './components/LeftSidebar/LeftSidebar.vue'
@@ -81,13 +81,13 @@ export default {
 
 	mixins: [
 		talkHashCheck,
-		isMobile,
 	],
 
 	setup() {
 		return {
 			isInCall: useIsInCall(),
 			isLeavingAfterSessionIssue: useSessionIssueHandler(),
+			isMobile: useIsMobile(),
 			supportSessionState: useActiveSession(),
 		}
 	},

src/components/ConversationSettings/ConversationAvatarEditor.vue

@@ -44,16 +44,15 @@
 				<div class="avatar__buttons">
 					<!-- Set emoji as avatar -->
 					<template v-if="!showCropper">
-						<NcEmojiPicker :per-line="5"
-							@select="setEmoji">
+						<NcEmojiPicker :per-line="5" :container="container" @select="setEmoji">
 							<NcButton :title="t('spreed', 'Set emoji as conversation picture')"
 								:aria-label="t('spreed', 'Set emoji as conversation picture')">
 								<template #icon>
 									<EmoticonOutline :size="20" />
 								</template>
 							</NcButton>
 						</NcEmojiPicker>
-						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor">
+						<NcColorPicker v-if="emojiAvatar" v-model="backgroundColor" :container="container">
 							<NcButton :title="t('spreed', 'Set background color for conversation picture')"
 								:aria-label="t('spreed', 'Set background color for conversation picture')">
 								<template #icon>

src/components/ConversationSettings/EditableTextField.vue

@@ -87,12 +87,12 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 export default {
 	name: 'EditableTextField',
 	components: {
-		NcRichText,
-		Pencil,
 		Check,
 		Close,
-		NcRichContenteditable,
 		NcButton,
+		NcRichContenteditable,
+		NcRichText,
+		Pencil,
 	},
 
 	directives: {
@@ -170,7 +170,6 @@ export default {
 	},
 
 	computed: {
-
 		canSubmit() {
 			return this.charactersCount <= this.maxLength && this.text !== this.initialText
 		},
@@ -200,6 +199,7 @@ export default {
 		initialText(newValue) {
 			this.text = newValue
 		},
+
 		editing(newValue) {
 			if (!newValue) {
 				this.text = this.initialText
@@ -263,11 +263,16 @@ export default {
 		margin-left: var(--default-clickable-area);
 	}
 
-  &__output {
-    width: 100%;
-    padding: 10px;
-    line-height: var(--default-line-height);
-  }
+	&__output {
+		width: 100%;
+		padding: 10px;
+		line-height: var(--default-line-height) !important;
+	}
+
+	// Restyle NcRichContenteditable component from our library.
+	:deep(.rich-contenteditable) {
+		flex-grow: 1;
+	}
 }
 
 .spinner {
@@ -288,29 +293,4 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
-
-// Restyle NcRichContenteditable component from our library.
-:deep(.rich-contenteditable__input) {
-	align-self: flex-start;
-	min-height: var(--default-line-height);
-	max-height: unset;
-	margin: 12px 0 4px 0;
-	padding: 0 0 4px 0;
-	overflow: visible;
-	width: 100% !important;
-	background-color: transparent;
-	transition: $transition;
-	&::before {
-		position: relative;
-	}
-	&[contenteditable='false'] {
-		background-color: transparent;
-		color: var(--color-main-text);
-		border-color: transparent;
-		opacity: 1;
-		border-radius: 0;
-		user-select: text;
-	}
-}
-
 </style>

src/components/LeftSidebar/LeftSidebar.vue

@@ -293,7 +293,7 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
-import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
+import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 
 import CallPhoneDialog from './CallPhoneDialog/CallPhoneDialog.vue'
 import Conversation from './ConversationsList/Conversation.vue'
@@ -358,23 +358,21 @@ export default {
 		NcEmptyContent,
 	},
 
-	mixins: [
-		isMobile,
-	],
-
 	setup() {
 		const leftSidebar = ref(null)
 		const searchBox = ref(null)
 		const list = ref(null)
 
 		const { initializeNavigation, resetNavigation } = useArrowNavigation(leftSidebar, searchBox, '.list-item')
+		const isMobile = useIsMobile()
 
 		return {
 			initializeNavigation,
 			resetNavigation,
 			leftSidebar,
 			searchBox,
 			list,
+			isMobile,
 			canModerateSipDialOut,
 		}
 	},

src/components/NewMessage/NewMessage.vue

@@ -87,7 +87,6 @@
 				</div>
 				<NcRichContenteditable ref="richContenteditable"
 					v-shortkey.once="$options.disableKeyboardShortcuts ? null : ['c']"
-					class="new-message-form__richContenteditable"
 					:value.sync="text"
 					:auto-complete="autoComplete"
 					:disabled="disabled"
@@ -406,6 +405,10 @@ export default {
 		userAbsence() {
 			return this.chatExtrasStore.absence[this.token]
 		},
+
+		isMobileDevice() {
+			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
+		}
 	},
 
 	watch: {
@@ -797,7 +800,7 @@ export default {
 		},
 
 		focusInput() {
-			if (this.isMobile()) {
+			if (this.isMobileDevice) {
 				return
 			}
 			this.$nextTick().then(() => {
@@ -817,10 +820,6 @@ export default {
 			}
 		},
 
-		isMobile() {
-			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
-		},
-
 		async checkAbsenceStatus() {
 			if (!this.isOneToOneConversation) {
 				return
@@ -865,34 +864,27 @@ export default {
 .new-message-form {
 	align-items: flex-end;
 	display: flex;
+	gap: 4px;
 	position: relative;
 	max-width: 700px;
 	margin: 0 auto;
 
 	&__emoji-picker {
 		position: absolute;
-		bottom: 1px;
+		bottom: 0;
 		z-index: 1;
 	}
 
 	&__input {
 		flex-grow: 1;
-		overflow: hidden;
 		position: relative;
 	}
 
 	// Override NcRichContenteditable styles
-	& &__richContenteditable {
-		border: 2px solid var(--color-border-dark);
+	:deep(.rich-contenteditable__input) {
 		border-radius: calc(var(--default-clickable-area) / 2);
 		padding: 8px 16px 8px 44px;
 		max-height: 180px;
-
-		&:hover,
-		&:focus,
-		&:active {
-			border: 2px solid var(--color-main-text);
-		}
 	}
 
 	&__quote {

src/stores/__tests__/sharedItems.spec.js

@@ -136,7 +136,7 @@ describe('sharedItemsStore', () => {
 
 			const responseOverview = generateOCSResponse({ payload: payloadOverview })
 			getSharedItemsOverview.mockResolvedValueOnce(responseOverview)
-			const response = generateOCSResponse({ payload: [message] })
+			const response = generateOCSResponse({ payload: { 1: message } })
 			getSharedItems.mockResolvedValueOnce(response)
 			await sharedItemsStore.getSharedItemsOverview(token)
 

src/stores/sharedItems.js

@@ -143,7 +143,7 @@ export const useSharedItemsStore = defineStore('sharedItems', {
 			const lastKnownMessageId = Math.min.apply(Math, Object.keys(this.sharedItemsPool[token][type]))
 			try {
 				const response = await getSharedItems(token, type, lastKnownMessageId, limit)
-				const messages = response.data.ocs.data
+				const messages = Object.values(response.data.ocs.data)
 				if (messages.length) {
 					this.addSharedItemsFromMessages(token, type, messages)
 				}