fix(NcDateTime): When relative time is disabled return a string and n…

…ot the reference to it

The `.value` call was missing in case of disabled relative time. This causes the string to be quoted (because of stringification of the computed value).

To prevent similar issues the file is now migrated to Typescript, also fixed some other issues discovered by type checking.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

[skip ci]

src/components/NcDateTime/NcDateTime.vue

@@ -109,12 +109,13 @@ h4 {
 <template>
 	<span class="nc-datetime"
 		:data-timestamp="timestamp"
-		:title="formattedFullTime">{{ formattedTime }}</span>
+		:title="formattedFullTime"
+		v-text="formattedTime" />
 </template>
 
 <script>
 import { computed } from 'vue'
-import { useFormatDateTime } from '../../composables/useFormatDateTime.js'
+import { useFormatDateTime } from '../../composables/useFormatDateTime.ts'
 
 export default {
 	name: 'NcDateTime',

src/composables/index.js

@@ -22,4 +22,4 @@
 
 export * from './useIsFullscreen/index.js'
 export * from './useIsMobile/index.js'
-export * from './useFormatDateTime.js'
+export * from './useFormatDateTime.ts'

src/composables/useFormatDateTime.js → src/composables/useFormatDateTime.ts

@@ -21,7 +21,7 @@
  */
 
 import { getCanonicalLocale } from '@nextcloud/l10n'
-import { computed, onUnmounted, ref, onMounted, watch, unref } from 'vue'
+import { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'
 import { t } from '../l10n.js'
 
 const FEW_SECONDS_AGO = {
@@ -30,6 +30,23 @@ const FEW_SECONDS_AGO = {
 	narrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
 }
 
+interface FormatDateOptions {
+	/**
+	 * The format used for displaying, or if relative time is used the format used for the title
+	 */
+	format?: Intl.DateTimeFormatOptions
+	/**
+	 * Ignore seconds when displaying the relative time and just show `a few seconds ago`
+	 */
+	ignoreSeconds?: boolean
+	/**
+	 * Wether to display the timestamp as time from now
+	 */
+	relativeTime?: false | 'long' | 'short' | 'narrow'
+}
+
+type MaybeRef<T> = T | Ref<T>
+
 /**
  * Composable for formatting time stamps using current users locale
  *
@@ -39,35 +56,40 @@ const FEW_SECONDS_AGO = {
  * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`
  * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)
  */
-export function useFormatDateTime(timestamp = Date.now(), opts = {}) {
+export function useFormatDateTime(
+	timestamp: MaybeRef<Date|number> = Date.now(),
+	opts: MaybeRef<FormatDateOptions> = {},
+) {
 	// Current time as Date.now is not reactive
 	const currentTime = ref(Date.now())
 	// The interval ID for the window
-	let intervalId = null
+	let intervalId: number|undefined
 
 	const options = ref({
-		timeStyle: 'medium',
-		dateStyle: 'short',
-		relativeTime: 'long',
+		format: {
+			timeStyle: 'medium',
+			dateStyle: 'short',
+		} as Intl.DateTimeFormatOptions,
+		relativeTime: 'long' as const,
 		ignoreSeconds: false,
 		...unref(opts),
 	})
-	const wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }))
+	const wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))
 
 	/** ECMA Date object of the timestamp */
 	const date = computed(() => new Date(unref(timestamp)))
 
-	const formattedFullTime = computed(() => {
+	const formattedFullTime = computed<string>(() => {
 		const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)
 		return formatter.format(date.value)
 	})
 
 	/** Time string formatted for main text */
-	const formattedTime = computed(() => {
+	const formattedTime = computed<string>(() => {
 		if (wrappedOptions.value.relativeTime !== false) {
 			const formatter = new Intl.RelativeTimeFormat(getCanonicalLocale(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })
 
-			const diff = date.value - currentTime.value
+			const diff = date.value.getTime() - currentTime.value
 			const seconds = diff / 1000
 			if (Math.abs(seconds) <= 90) {
 				if (wrappedOptions.value.ignoreSeconds) {
@@ -98,22 +120,22 @@ export function useFormatDateTime(timestamp = Date.now(), opts = {}) {
 			}
 			return formatter.format(Math.round(days / 365), 'year')
 		}
-		return formattedFullTime
+		return formattedFullTime.value
 	})
 
 	// Set or clear interval if relative time is dis/enabled
-	watch([wrappedOptions], (opts) => {
+	watch([wrappedOptions], () => {
 		window.clearInterval(intervalId)
 		intervalId = undefined
-		if (opts.relativeTime) {
-			intervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)
+		if (wrappedOptions.value.relativeTime) {
+			intervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)
 		}
 	})
 
 	// Start the interval for setting the current time if relative time is enabled
 	onMounted(() => {
 		if (wrappedOptions.value.relativeTime !== false) {
-			intervalId = window.setInterval(() => { currentTime.value = new Date() }, 1000)
+			intervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)
 		}
 	})
 

tests/unit/composables/useFormatDateTime.spec.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { useFormatDateTime } from '../../../src/composables/useFormatDateTime.js'
+import { useFormatDateTime } from '../../../src/composables/useFormatDateTime.ts'
 import { isRef, nextTick, ref } from 'vue'
 
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'