fix(stable4): Revert nextcloud-vue to version 7.12 to support Nextcloud 27

README.md

@@ -10,6 +10,11 @@ Nextcloud dialog helpers
 npm i -S @nextcloud/dialogs
 ```
 
+### Version compatibility
+Since version 4.2 this package provides a Vue.js based file picker, so this package depends on `@nextcloud/vue`. So to not introduce style collisions version 4 of this library is only compatible with `@nextcloud/vue` version 7 (used by Nextcloud version 25, 26 and 27).
+
+For `nextcloud/vue` version 8 (Nextcloud 28+) see version 5 of this package.
+
 ## Usage
 
 ### Toasts

l10n/messages.pot

@@ -14,6 +14,10 @@ msgstr ""
 msgid "\"/\" is not allowed inside a file name."
 msgstr ""
 
+#: lib/components/FilePicker/NcDatetime.vue:34
+msgid "a few seconds ago"
+msgstr ""
+
 #: lib/components/FilePicker/FilePickerNavigation.vue:57
 msgid "All files"
 msgstr ""
@@ -56,6 +60,16 @@ msgstr ""
 msgid "Recent"
 msgstr ""
 
+#. FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+#: lib/components/FilePicker/NcDatetime.vue:36
+msgid "sec. ago"
+msgstr ""
+
+#. FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+#: lib/components/FilePicker/NcDatetime.vue:35
+msgid "seconds ago"
+msgstr ""
+
 #: lib/components/FilePicker/FileList.vue:8
 msgid "Select entry"
 msgstr ""
@@ -67,3 +81,7 @@ msgstr ""
 #: lib/toast.ts:228
 msgid "Undo"
 msgstr ""
+
+#: lib/components/FilePicker/FileListRow.vue:22
+msgid "Unset"
+msgstr ""

lib/components/FilePicker/FileListRow.vue

@@ -18,16 +18,19 @@
 			{{ formatFileSize(node.size || 0) }}
 		</td>
 		<td class="row-modified">
-			<NcDatetime :timestamp="node.mtime" :ignore-seconds="true" />
+			<NcDatetime v-if="node.mtime" :timestamp="node.mtime" :ignore-seconds="true" />
+			<span v-else>{{ t('Unset') }}</span>
 		</td>
 	</tr>
 </template>
 <script setup lang="ts">
 import { type Node, formatFileSize } from '@nextcloud/files'
-import { NcCheckboxRadioSwitch, NcDatetime } from '@nextcloud/vue'
+import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { computed } from 'vue'
 import { t } from '../../l10n'
 
+import NcDatetime from './NcDatetime.vue'
+
 const props = defineProps<{
 	/** Can directories be picked */
 	allowPickDirectory: boolean

lib/components/FilePicker/NcDatetime.vue

@@ -0,0 +1,172 @@
+<!--
+ - @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ -
+ - @author Ferdinand Thiessen <opensource@fthiessen.de>
+ -
+ - @license AGPL-3.0-or-later
+ -
+ - This program is free software: you can redistribute it and/or modify
+ - it under the terms of the GNU Affero General Public License as
+ - published by the Free Software Foundation, either version 3 of the
+ - License, or (at your option) any later version.
+ -
+ - This program is distributed in the hope that it will be useful,
+ - but WITHOUT ANY WARRANTY; without even the implied warranty of
+ - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ - GNU Affero General Public License for more details.
+ -
+ - You should have received a copy of the GNU Affero General Public License
+ - along with this program. If not, see <http://www.gnu.org/licenses/>.
+ -
+ -->
+<template>
+	<span class="nc-datetime"
+		:data-timestamp="timestamp"
+		:title="formattedFullTime">{{ formattedTime }}</span>
+</template>
+
+<script lang="ts">
+import { getCanonicalLocale } from '@nextcloud/l10n'
+import { t } from '../../l10n.js'
+import { defineComponent, type PropType } from 'vue'
+
+const FEW_SECONDS_AGO = {
+	long: t('a few seconds ago'),
+	short: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
+	narrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
+}
+
+export default defineComponent({
+	name: 'NcDatetime',
+
+	props: {
+		/**
+		 * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
+		 */
+		timestamp: {
+			type: [Date, Number] as PropType<Date | number>,
+			required: true,
+		},
+		/**
+		 * The format used for displaying, or if relative time is used the format used for the title (optional)
+		 *
+		 * @type {Intl.DateTimeFormatOptions}
+		 */
+		format: {
+			type: Object as PropType<Intl.DateTimeFormatOptions>,
+			default: () => ({ timeStyle: 'medium', dateStyle: 'short' }),
+		},
+		/**
+		 * Wether to display the timestamp as time from now (optional)
+		 *
+		 * - `false`: Disable relative time
+		 * - `'long'`: Long text, like *2 seconds ago* (default)
+		 * - `'short'`: Short text, like *2 sec. ago*
+		 * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
+		 */
+		relativeTime: {
+			type: [Boolean, String] as PropType<false | 'long' | 'short' | 'narrow'>,
+			default: 'long',
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			validator: (v: any) => v === false || ['long', 'short', 'narrow'].includes(v),
+		},
+		/**
+		 * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+		 */
+		ignoreSeconds: {
+			type: Boolean as PropType<boolean>,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			/** Current time in ms */
+			currentTime: Date.now(),
+			/** ID of the current time interval */
+			intervalId: undefined,
+		} as { currentTime: number, intervalId?: number}
+	},
+
+	computed: {
+		/** ECMA Date object of the timestamp */
+		dateObject() {
+			return new Date(this.timestamp)
+		},
+		/** Time string formatted for main text */
+		formattedTime() {
+			if (this.relativeTime !== false) {
+				const formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: this.relativeTime })
+
+				const diff = this.dateObject.valueOf() - this.currentTime
+				const seconds = diff / 1000
+				if (Math.abs(seconds) <= 90) {
+					if (this.ignoreSeconds) {
+						return FEW_SECONDS_AGO[this.relativeTime]
+					} else {
+						return formatter.format(Math.round(seconds), 'second')
+					}
+				}
+				const minutes = seconds / 60
+				if (Math.abs(minutes) <= 90) {
+					return formatter.format(Math.round(minutes), 'minute')
+				}
+				const hours = minutes / 60
+				if (Math.abs(hours) <= 72) {
+					return formatter.format(Math.round(hours), 'hour')
+				}
+				const days = hours / 24
+				if (Math.abs(days) <= 6) {
+					return formatter.format(Math.round(days), 'day')
+				}
+				const weeks = days / 7
+				if (Math.abs(weeks) <= 52) {
+					return formatter.format(Math.round(weeks), 'week')
+				}
+				return formatter.format(Math.round(days / 365), 'year')
+			}
+			return this.formattedFullTime
+		},
+		formattedFullTime() {
+			const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), this.format)
+			return formatter.format(this.dateObject)
+		},
+	},
+
+	watch: {
+		/**
+		 * Set or clear interval if relative time is dis/enabled
+		 *
+		 * @param {boolean} newValue The new value of the relativeTime property
+		 */
+		relativeTime(newValue) {
+			window.clearInterval(this.intervalId)
+			this.intervalId = undefined
+			if (newValue) {
+				this.intervalId = window.setInterval(this.setCurrentTime, 1000)
+			}
+		},
+	},
+
+	mounted() {
+		// Start the interval for setting the current time if relative time is enabled
+		if (this.relativeTime !== false) {
+			this.intervalId = window.setInterval(this.setCurrentTime, 1000)
+		}
+	},
+
+	destroyed() {
+		// ensure interval is cleared
+		window.clearInterval(this.intervalId)
+	},
+
+	methods: {
+		/**
+		 * Set `currentTime` to the current timestamp, required as Date.now() is not reactive.
+		 */
+		setCurrentTime() {
+			this.currentTime = Date.now()
+		},
+	},
+})
+</script>

package.json

@@ -53,7 +53,7 @@
     "@nextcloud/l10n": "^2.2.0",
     "@nextcloud/router": "^2.1.2",
     "@nextcloud/typings": "^1.7.0",
-    "@nextcloud/vue": "^8.0.0-beta.2",
+    "@nextcloud/vue": "^7.12.2",
     "@types/toastify-js": "^1.12.0",
     "@vueuse/core": "^10.3.0",
     "toastify-js": "^1.12.0",