Merge pull request #56544 from nextcloud/chore/user_status--vue3

refactor(user_status): migrate to Vue 3

Author: nickvergessen

apps/user_status/css/user-status-menu.css

@@ -70,6 +70,6 @@ public function handle(Event $event): void {
 		});
 
 		Util::addScript('user_status', 'menu');
-		Util::addStyle('user_status', 'user-status-menu');
+		Util::addStyle('user_status', 'menu');
 	}
 }

apps/user_status/css/user-status-menu.css.map

@@ -4,46 +4,44 @@
 -->
 
 <template>
-	<Fragment>
-		<NcListItem
-			v-if="!inline"
-			class="user-status-menu-item"
-			compact
-			:name="visibleMessage"
-			@click.stop="openModal">
+	<NcListItem
+		v-if="!inline"
+		:class="$style.userStatusMenuItem"
+		compact
+		:name="visibleMessage"
+		@click.stop="openModal">
+		<template #icon>
+			<NcUserStatusIcon
+				:class="$style.userStatusIcon"
+				:status="statusType"
+				aria-hidden="true" />
+		</template>
+	</NcListItem>
+
+	<div v-else>
+		<!-- Dashboard Status -->
+		<NcButton @click.stop="openModal">
 			<template #icon>
 				<NcUserStatusIcon
-					class="user-status-icon"
+					:class="$style.userStatusIcon"
 					:status="statusType"
 					aria-hidden="true" />
 			</template>
-		</NcListItem>
-
-		<div v-else>
-			<!-- Dashboard Status -->
-			<NcButton @click.stop="openModal">
-				<template #icon>
-					<NcUserStatusIcon
-						class="user-status-icon"
-						:status="statusType"
-						aria-hidden="true" />
-				</template>
-				{{ visibleMessage }}
-			</NcButton>
-		</div>
-		<!-- Status management modal -->
-		<SetStatusModal
-			v-if="isModalOpen"
-			:inline="inline"
-			@close="closeModal" />
-	</Fragment>
+			{{ visibleMessage }}
+		</NcButton>
+	</div>
+	<!-- Status management modal -->
+	<SetStatusModal
+		v-if="isModalOpen"
+		:inline="inline"
+		@close="closeModal" />
 </template>
 
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import debounce from 'debounce'
-import { Fragment } from 'vue-frag'
+import { defineAsyncComponent } from 'vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcUserStatusIcon from '@nextcloud/vue/components/NcUserStatusIcon'
@@ -55,11 +53,10 @@ export default {
 	name: 'UserStatus',
 
 	components: {
-		Fragment,
 		NcButton,
 		NcListItem,
 		NcUserStatusIcon,
-		SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
+		SetStatusModal: defineAsyncComponent(() => import('./components/SetStatusModal.vue')),
 	},
 
 	mixins: [OnlineStatusMixin],
@@ -126,7 +123,7 @@ export default {
 	/**
 	 * Some housekeeping before destroying the component
 	 */
-	beforeDestroy() {
+	beforeUnmount() {
 		window.removeEventListener('mouseMove', this.mouseMoveListener)
 		clearInterval(this.heartbeatInterval)
 		unsubscribe('user_status:status.updated', this.handleUserStatusUpdated)
@@ -179,8 +176,15 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.user-status-icon {
+<style lang="scss" module>
+// Note: As for v9.3.0 NcListItem does not support <style scoped>
+.userStatusMenuItem,
+.userStatusMenuItem * {
+	// TODO: Vue 3 migration - add box-sizing to core menu component
+	box-sizing: border-box;
+}
+
+.userStatusIcon {
 	width: 20px;
 	height: 20px;
 	margin: calc((var(--default-clickable-area) - 20px) / 2); // 20px icon size

apps/user_status/css/user-status-menu.css.map.license

@@ -6,7 +6,7 @@
 <template>
 	<div class="clear-at-select">
 		<label class="clear-at-select__label" for="clearStatus">
-			{{ $t('user_status', 'Clear status after') }}
+			{{ t('user_status', 'Clear status after') }}
 		</label>
 		<NcSelect
 			input-id="clearStatus"
@@ -21,9 +21,10 @@
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
-import { clearAtFilter } from '../filters/clearAtFilter.js'
 import { getAllClearAtOptions } from '../services/clearAtOptionsService.js'
+import { clearAtFormat } from '../services/clearAtService.js'
 
 export default {
 	name: 'ClearAtSelect',
@@ -38,6 +39,8 @@ export default {
 		},
 	},
 
+	emits: ['selectClearAt'],
+
 	data() {
 		return {
 			options: getAllClearAtOptions(),
@@ -53,12 +56,14 @@ export default {
 		option() {
 			return {
 				clearAt: this.clearAt,
-				label: clearAtFilter(this.clearAt),
+				label: clearAtFormat(this.clearAt),
 			}
 		},
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Triggered when the user selects a new option.
 		 *
@@ -69,7 +74,7 @@ export default {
 				return
 			}
 
-			this.$emit('select-clear-at', option.clearAt)
+			this.$emit('selectClearAt', option.clearAt)
 		},
 	},
 }

apps/user_status/lib/Listener/BeforeTemplateRenderedListener.php

@@ -22,12 +22,13 @@
 				:model-value="message"
 				type="text"
 				:label="t('user_status', 'What is your status?')"
-				@input="onChange" />
+				@update:model-value="onChange" />
 		</div>
 	</div>
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcEmojiPicker from '@nextcloud/vue/components/NcEmojiPicker'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
@@ -60,7 +61,7 @@ export default {
 
 	emits: [
 		'change',
-		'select-icon',
+		'selectIcon',
 	],
 
 	computed: {
@@ -75,21 +76,23 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		focus() {
 			this.$refs.input.focus()
 		},
 
 		/**
 		 * Notifies the parent component about a changed input
 		 *
-		 * @param {Event} event The Change Event
+		 * @param {string} value The new input value
 		 */
-		onChange(event) {
-			this.$emit('change', event.target.value)
+		onChange(value) {
+			this.$emit('change', value)
 		},
 
 		setIcon(icon) {
-			this.$emit('select-icon', icon)
+			this.$emit('selectIcon', icon)
 		},
 	},
 }

apps/user_status/src/UserStatus.vue

@@ -12,10 +12,12 @@
 			name="user-status-online"
 			@change="onChange">
 		<label :for="id" class="user-status-online-select__label">
-			<NcUserStatusIcon
-				:status="type"
-				class="user-status-online-select__icon"
-				aria-hidden="true" />
+			<span class="user-status-online-select__icon-wrapper">
+				<NcUserStatusIcon
+					:status="type"
+					class="user-status-online-select__icon"
+					aria-hidden="true" />
+			</span>
 			{{ label }}
 			<em class="user-status-online-select__subline">{{ subline }}</em>
 		</label>
@@ -54,6 +56,8 @@ export default {
 		},
 	},
 
+	emits: ['select'],
+
 	computed: {
 		id() {
 			return `user-status-online-status-${this.type}`
@@ -90,10 +94,17 @@ export default {
 		}
 	}
 
+	&__icon-wrapper {
+		height: var(--default-clickable-area);
+		width: var(--default-clickable-area);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	&__icon {
 		height: 20px;
 		width: 20px;
-		padding: calc((var(--default-clickable-area) - 20px) / 2);
 	}
 
 	&__input:checked + &__label {

apps/user_status/src/components/ClearAtSelect.vue

@@ -19,20 +19,17 @@
 				{{ message }}
 			</span>
 			<span class="predefined-status__label--clear-at">
-				{{ clearAt | clearAtFilter }}
+				{{ formattedClearAt }}
 			</span>
 		</label>
 	</li>
 </template>
 
 <script>
-import { clearAtFilter } from '../filters/clearAtFilter.js'
+import { clearAtFormat } from '../services/clearAtService.js'
 
 export default {
 	name: 'PredefinedStatus',
-	filters: {
-		clearAtFilter,
-	},
 
 	props: {
 		messageId: {
@@ -63,10 +60,16 @@ export default {
 		},
 	},
 
+	emits: ['select'],
+
 	computed: {
 		id() {
 			return `user-status-predefined-status-${this.messageId}`
 		},
+
+		formattedClearAt() {
+			return clearAtFormat(this.clearAt)
+		},
 	},
 
 	methods: {

apps/user_status/src/components/CustomMessageInput.vue

@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import { mapGetters, mapState } from 'vuex'
 import PredefinedStatus from './PredefinedStatus.vue'
 
@@ -35,6 +36,8 @@ export default {
 		PredefinedStatus,
 	},
 
+	emits: ['selectStatus'],
+
 	data() {
 		return {
 			lastSelected: null,
@@ -68,14 +71,16 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Emits an event when the user selects a status
 		 *
 		 * @param {object} status The selected status
 		 */
 		selectStatus(status) {
 			this.lastSelected = status.id
-			this.$emit('select-status', status)
+			this.$emit('selectStatus', status)
 		},
 	},
 }