@dargmuesli/nuxt-vio 20.1.0 → 21.0.0-beta.1

package/app/components/vio/button/VioButtonShare.vue

@@ -1,7 +1,7 @@
 <template>
   <span v-if="url" class="flex items-center gap-2">
     <slot />
-    <VioButtonColored :aria-label="t('share')" @click="copy(url)">
+    <VioButtonColored :aria-label="t('share')" @click="copy2(url)">
       <template #prefix>
         <VioIconShare />
       </template>
@@ -19,17 +19,21 @@ interface Props {
 withDefaults(defineProps<Props>(), {})
 
 const { t } = useI18n()
+const { copy } = useCopy()
+const alertError = useAlertError()
 
 // methods
-const copy = async (string: string) => {
+const copy2 = async (string: string) => {
   if (typeof window === 'undefined') return
 
   try {
-    await copyText(string)
+    await copy(string)
     toast.success(t('donationUrlCopySuccess'))
   } catch (error: unknown) {
-    console.error(error)
-    alert(t('donationUrlCopyError'))
+    alertError({
+      ...(error instanceof Error ? { error } : {}),
+      messageI18n: t('donationUrlCopyError'),
+    })
   }
 }
 </script>

package/app/composables/dateTime.ts

@@ -1,3 +1,5 @@
+import { useNow as useNowVueUse, syncRef } from '@vueuse/core'
+
 export const useTimeZone = () =>
   useNuxtApp().ssrContext?.event.context.$timeZone ||
   useCookie(TIMEZONE_COOKIE_NAME, {
@@ -9,15 +11,47 @@ export const useTimeZone = () =>
     ? Intl.DateTimeFormat().resolvedOptions().timeZone
     : undefined)
 
-export const useNow = () => useState(STATE_KEY_NOW, () => new Date())
+// TODO: evaluate custom scheduler (https://github.com/vueuse/vueuse/pull/5129)
+export const useNow = (options?: { live?: boolean }) => {
+  const { live = true } = options || {}
+
+  const nowState = useState(STATE_KEY_NOW, () => new Date())
+
+  if (live) {
+    const now = useNowVueUse()
+    syncRef(now, nowState, { direction: 'ltr', immediate: false })
+  }
+
+  return nowState
+}
+
+// TODO: import from vueuse once reactive locale can be passed in (no issue or PR created yet)
+export const useTimeAgoIntl = (options: {
+  live?: boolean
+  to: MaybeRef<Date>
+}) => {
+  const { live = true, to } = options
+
+  const { locale } = useI18n({ useScope: 'global' })
+  const now = useNow({ live })
+
+  const formatter = computed(
+    () =>
+      new Intl.RelativeTimeFormat(locale.value, {
+        numeric: 'auto',
+      }),
+  )
+
+  const toAsRef = toRef(to)
+  const fromTo = computed(() =>
+    getFromTo(now.value, toAsRef.value, formatter.value),
+  )
 
-export const useFromNow = () => {
-  const { locale } = useI18n()
-  const now = useNow()
+  const fromToState = useState(STATE_KEY_FROM_TO, () => fromTo)
 
-  const formatter = new Intl.RelativeTimeFormat(locale.value, {
-    numeric: 'auto',
-  })
+  if (live) {
+    syncRef(fromTo, fromToState, { direction: 'ltr', immediate: false })
+  }
 
-  return (to: Date) => getFromTo(now.value, to, formatter)
+  return fromToState
 }

package/package.json

@@ -23,7 +23,6 @@
     "@vuelidate/validators": "2.0.4",
     "@vueuse/core": "14.1.0",
     "class-variance-authority": "0.7.1",
-    "clipboardy": "5.0.1",
     "clsx": "2.1.1",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
@@ -114,5 +113,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "20.1.0"
+  "version": "21.0.0-beta.1"
 }

package/shared/utils/constants.ts

@@ -157,6 +157,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 STATE_KEY_FROM_TO = 'dateTimeFromTo'
 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/text.ts

@@ -1,2 +0,0 @@
-export const copyText = async (text: string) =>
-  (await import('clipboardy')).default.write(text)