refactor(user_status): prepare for Vue 3 migration

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

apps/user_status/src/components/ClearAtSelect.vue

@@ -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: ['select-clear-at'],
+
 	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.
 		 *

apps/user_status/src/components/CustomMessageInput.vue

@@ -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'
@@ -75,6 +76,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		focus() {
 			this.$refs.input.focus()
 		},

apps/user_status/src/components/OnlineStatusSelect.vue

@@ -54,6 +54,8 @@ export default {
 		},
 	},
 
+	emits: ['select'],
+
 	computed: {
 		id() {
 			return `user-status-online-status-${this.type}`

apps/user_status/src/components/PredefinedStatus.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/PredefinedStatusesList.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: ['select-status'],
+
 	data() {
 		return {
 			lastSelected: null,
@@ -68,6 +71,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Emits an event when the user selects a status
 		 *

apps/user_status/src/components/PreviousStatus.vue

@@ -16,18 +16,19 @@
 			{{ message }}
 		</span>
 		<span class="predefined-status__clear-at">
-			{{ $t('user_status', 'Previously set') }}
+			{{ t('user_status', 'Previously set') }}
 		</span>
 
 		<div class="backup-status__reset-button">
 			<NcButton @click="select">
-				{{ $t('user_status', 'Reset status') }}
+				{{ t('user_status', 'Reset status') }}
 			</NcButton>
 		</div>
 	</div>
 </template>
 
 <script>
+import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/components/NcButton'
 
 export default {
@@ -49,7 +50,11 @@ export default {
 		},
 	},
 
+	emits: ['select'],
+
 	methods: {
+		t,
+
 		/**
 		 * Emits an event when the user clicks the row
 		 */

apps/user_status/src/components/SetStatusModal.vue

@@ -13,12 +13,12 @@
 		<div class="set-status-modal">
 			<!-- Status selector -->
 			<h2 id="user_status-set-dialog" class="set-status-modal__header">
-				{{ $t('user_status', 'Online status') }}
+				{{ t('user_status', 'Online status') }}
 			</h2>
 			<div
 				class="set-status-modal__online-status"
 				role="radiogroup"
-				:aria-label="$t('user_status', 'Online status')">
+				:aria-label="t('user_status', 'Online status')">
 				<OnlineStatusSelect
 					v-for="status in statuses"
 					:key="status.type"
@@ -30,7 +30,7 @@
 			<!-- Status message form -->
 			<form @submit.prevent="saveStatus" @reset="clearStatus">
 				<h3 class="set-status-modal__header">
-					{{ $t('user_status', 'Status message') }}
+					{{ t('user_status', 'Status message') }}
 				</h3>
 				<div class="set-status-modal__custom-input">
 					<CustomMessageInput
@@ -44,14 +44,14 @@
 						:href="absencePageUrl"
 						target="_blank"
 						variant="secondary"
-						:aria-label="$t('user_status', 'Set absence period')">
-						{{ $t('user_status', 'Set absence period and replacement') + ' ↗' }}
+						:aria-label="t('user_status', 'Set absence period')">
+						{{ t('user_status', 'Set absence period and replacement') + ' ↗' }}
 					</NcButton>
 				</div>
 				<div
 					v-if="hasBackupStatus"
 					class="set-status-modal__automation-hint">
-					{{ $t('user_status', 'Your status was set automatically') }}
+					{{ t('user_status', 'Your status was set automatically') }}
 				</div>
 				<PreviousStatus
 					v-if="hasBackupStatus"
@@ -67,17 +67,17 @@
 						:wide="true"
 						variant="tertiary"
 						type="reset"
-						:aria-label="$t('user_status', 'Clear status message')"
+						:aria-label="t('user_status', 'Clear status message')"
 						:disabled="isSavingStatus">
-						{{ $t('user_status', 'Clear status message') }}
+						{{ t('user_status', 'Clear status message') }}
 					</NcButton>
 					<NcButton
 						:wide="true"
 						variant="primary"
 						type="submit"
-						:aria-label="$t('user_status', 'Set status message')"
+						:aria-label="t('user_status', 'Set status message')"
 						:disabled="isSavingStatus">
-						{{ $t('user_status', 'Set status message') }}
+						{{ t('user_status', 'Set status message') }}
 					</NcButton>
 				</div>
 			</form>
@@ -127,6 +127,8 @@ export default {
 		},
 	},
 
+	emits: ['close'],
+
 	data() {
 		return {
 			clearAt: null,
@@ -218,6 +220,8 @@ export default {
 	},
 
 	methods: {
+		t,
+
 		/**
 		 * Closes the Set Status modal
 		 */

apps/user_status/src/filters/clearAtFilter.js

@@ -1,52 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { translate as t } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
-import { dateFactory } from '../services/dateService.js'
-
-/**
- * Formats a clearAt object to be human readable
- *
- * @param {object} clearAt The clearAt object
- * @return {string|null}
- */
-function clearAtFilter(clearAt) {
-	if (clearAt === null) {
-		return t('user_status', 'Don\'t clear')
-	}
-
-	if (clearAt.type === 'end-of') {
-		switch (clearAt.time) {
-			case 'day':
-				return t('user_status', 'Today')
-			case 'week':
-				return t('user_status', 'This week')
-
-			default:
-				return null
-		}
-	}
-
-	if (clearAt.type === 'period') {
-		return moment.duration(clearAt.time * 1000).humanize()
-	}
-
-	// This is not an officially supported type
-	// but only used internally to show the remaining time
-	// in the Set Status Modal
-	if (clearAt.type === '_time') {
-		const momentNow = moment(dateFactory())
-		const momentClearAt = moment(clearAt.time, 'X')
-
-		return moment.duration(momentNow.diff(momentClearAt)).humanize()
-	}
-
-	return null
-}
-
-export {
-	clearAtFilter,
-}

apps/user_status/src/menu.js

@@ -11,9 +11,6 @@ import store from './store/index.js'
 
 __webpack_nonce__ = getCSPNonce()
 
-Vue.prototype.t = t
-Vue.prototype.$t = t
-
 const mountPoint = document.getElementById('user_status-menu-entry')
 
 /**

apps/user_status/src/services/clearAtOptionsService.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 
 /**
  * Returns an array

apps/user_status/src/services/clearAtService.js

@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { t } from '@nextcloud/l10n'
 import moment from '@nextcloud/moment'
-import {
-	dateFactory,
-} from './dateService.js'
+import { dateFactory } from './dateService.js'
 
 /**
  * Calculates the actual clearAt timestamp
@@ -42,6 +41,47 @@ function getTimestampForClearAt(clearAt) {
 	return null
 }
 
+/**
+ * Formats a clearAt object to be human readable
+ *
+ * @param {object} clearAt The clearAt object
+ * @return {string|null}
+ */
+function clearAtFormat(clearAt) {
+	if (clearAt === null) {
+		return t('user_status', 'Don\'t clear')
+	}
+
+	if (clearAt.type === 'end-of') {
+		switch (clearAt.time) {
+			case 'day':
+				return t('user_status', 'Today')
+			case 'week':
+				return t('user_status', 'This week')
+
+			default:
+				return null
+		}
+	}
+
+	if (clearAt.type === 'period') {
+		return moment.duration(clearAt.time * 1000).humanize()
+	}
+
+	// This is not an officially supported type
+	// but only used internally to show the remaining time
+	// in the Set Status Modal
+	if (clearAt.type === '_time') {
+		const momentNow = moment(dateFactory())
+		const momentClearAt = moment(clearAt.time, 'X')
+
+		return moment.duration(momentNow.diff(momentClearAt)).humanize()
+	}
+
+	return null
+}
+
 export {
+	clearAtFormat,
 	getTimestampForClearAt,
 }

apps/user_status/src/services/statusOptionsService.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { translate as t } from '@nextcloud/l10n'
+import { t } from '@nextcloud/l10n'
 
 /**
  * Returns a list of all user-definable statuses

apps/user_status/src/store/predefinedStatuses.js

@@ -5,9 +5,10 @@
 
 import { fetchAllPredefinedStatuses } from '../services/predefinedStatusService.js'
 
-const state = {
+// eslint-disable-next-line antfu/top-level-function
+const state = () => ({
 	predefinedStatuses: [],
-}
+})
 
 const mutations = {
 

apps/user_status/src/store/userBackupStatus.js

@@ -10,7 +10,8 @@ import {
 	revertToBackupStatus,
 } from '../services/statusService.js'
 
-const state = {
+// eslint-disable-next-line antfu/top-level-function
+const state = () => ({
 	// Status (online / away / dnd / invisible / offline)
 	status: null,
 	// Whether the status is user-defined
@@ -26,7 +27,7 @@ const state = {
 	messageIsPredefined: null,
 	// The id of the message in case it's predefined
 	messageId: null,
-}
+})
 
 const mutations = {
 	/**

apps/user_status/src/store/userStatus.js

@@ -15,7 +15,8 @@ import {
 	setStatus,
 } from '../services/statusService.js'
 
-const state = {
+// eslint-disable-next-line antfu/top-level-function
+const state = () => ({
 	// Status (online / away / dnd / invisible / offline)
 	status: null,
 	// Whether the status is user-defined
@@ -31,7 +32,7 @@ const state = {
 	messageIsPredefined: null,
 	// The id of the message in case it's predefined
 	messageId: null,
-}
+})
 
 const mutations = {