@dargmuesli/nuxt-vio 20.0.0-beta.6 → 20.0.0-beta.8

package/app/components/vio/_/VioTime.vue

@@ -1,14 +1,12 @@
 <template>
   <NuxtTime
-    v-bind="{ datetime: props.datetime, ...delegatedProps }"
+    v-bind="forwardedProps"
     :locale="props.options.locale || defaultLocale"
     :time-zone="props.options.timeZone || defaultTimeZone"
   />
 </template>
 
 <script setup lang="ts">
-import { reactiveOmit } from '@vueuse/core'
-
 import type { NuxtTimeProps } from 'nuxt/app'
 
 const { locale: defaultLocale } = useI18n()
@@ -27,5 +25,9 @@ const props = withDefaults(
   },
 )
 
-const delegatedProps = reactiveOmit(props.options, 'locale', 'timeZone')
+const forwardedProps = computed(() => {
+  const { locale, timeZone, ...delegated } = props.options
+
+  return { datetime: props.datetime, ...delegated }
+})
 </script>

package/app/composables/dateTime.ts

@@ -0,0 +1,23 @@
+export const useTimeZone = () =>
+  useNuxtApp().ssrContext?.event.context.$timeZone ||
+  useCookie(TIMEZONE_COOKIE_NAME, {
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: true,
+  }).value ||
+  (import.meta.client
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : undefined)
+
+export const useNow = () => useState(STATE_KEY_NOW, () => new Date())
+
+export const useFromNow = () => {
+  const { locale } = useI18n()
+  const now = useNow()
+
+  const formatter = new Intl.RelativeTimeFormat(locale.value, {
+    numeric: 'auto',
+  })
+
+  return (to: Date) => getFromTo(now.value, to, formatter)
+}

package/package.json

@@ -114,5 +114,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "20.0.0-beta.6"
+  "version": "20.0.0-beta.8"
 }

package/shared/utils/constants.ts

@@ -156,6 +156,7 @@ export const POLYFILLS = [
 ]
 export const REGEX_UUID =
   /^[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}$/
+export const STATE_KEY_NOW = 'dateTimeNow'
 export const TESTING_COOKIE_NAME = 'vio_is-testing'
 export const TIMEZONE_COOKIE_NAME = [COOKIE_PREFIX, 'tz'].join(COOKIE_SEPARATOR)
 export const TIMEZONE_HEADER_KEY = `X-${VIO_SITE_NAME}-Timezone`

package/shared/utils/dateTime.ts

@@ -116,3 +116,28 @@ export const getEmailDateTimeFormatter = (
     ...dateTimeFormatOptions,
     timeZone: 'UTC',
   })
+
+export const getFromTo = (
+  from: Date,
+  to: Date,
+  formatter: Intl.RelativeTimeFormat,
+) => {
+  const difference = (to.getTime() - from.getTime()) / 1000
+  const units = [
+    { unit: 'year' as const, seconds: 365 * 24 * 3600 },
+    { unit: 'month' as const, seconds: 30 * 24 * 3600 },
+    { unit: 'week' as const, seconds: 7 * 24 * 3600 },
+    { unit: 'day' as const, seconds: 24 * 3600 },
+    { unit: 'hour' as const, seconds: 3600 },
+    { unit: 'minute' as const, seconds: 60 },
+    { unit: 'second' as const, seconds: 1 },
+  ]
+
+  for (const { unit, seconds } of units) {
+    const delta = difference / seconds
+
+    if (Math.abs(delta) >= 1 || unit === 'second') {
+      return formatter.format(Math.round(delta), unit)
+    }
+  }
+}

package/app/composables/timeZone.ts

@@ -1,10 +0,0 @@
-export const useTimeZone = () =>
-  useNuxtApp().ssrContext?.event.context.$timeZone ||
-  useCookie(TIMEZONE_COOKIE_NAME, {
-    httpOnly: false,
-    sameSite: 'strict',
-    secure: true,
-  }).value ||
-  (import.meta.client
-    ? Intl.DateTimeFormat().resolvedOptions().timeZone
-    : undefined)