feat(i18n): plurals support (#278)

composables/numbers.ts

@@ -1,15 +1,44 @@
+import type { MaybeRef } from '@vueuse/shared'
+
 const formatter = Intl.NumberFormat()
 
-export const humanReadableNumber = (num: number) => {
+export const humanReadableNumber = (
+  num: number,
+  { k, m }: { k: string; m: string } = { k: 'K', m: 'M' },
+  useFormatter: Intl.NumberFormat = formatter,
+) => {
   if (num < 10000)
-    return formatter.format(num)
+    return useFormatter.format(num)
 
   if (num < 1000000)
-    return `${Math.floor(num / 1000)}K`
+    return `${Math.floor(num / 1000)}${k}`
 
-  return `${Math.floor(num / 1000000)}M`
+  return `${Math.floor(num / 1000000)}${m}`
 }
 
-export const formattedNumber = (num: number) => {
-  return formatter.format(num)
+export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {
+  return useFormatter.format(num)
+}
+
+export const useHumanReadableNumber = () => {
+  const i18n = useI18n()
+  const numberFormatter = $computed(() => Intl.NumberFormat(i18n.locale.value))
+  return {
+    formatHumanReadableNumber: (num: MaybeRef<number>) => {
+      return humanReadableNumber(
+        unref(num),
+        { k: i18n.t('common.kiloSuffix'), m: i18n.t('common.megaSuffix') },
+        numberFormatter,
+      )
+    },
+    formatNumber: (num: MaybeRef<number>) => {
+      return formattedNumber(
+        unref(num),
+        numberFormatter,
+      )
+    },
+    forSR: (num: MaybeRef<number>) => {
+      return unref(num) > 10000
+    },
+  }
 }

composables/time.ts

@@ -12,34 +12,28 @@ export const useFormattedDateTime = (
   })
 }
 
-export const timeAgoOptions: UseTimeAgoOptions<false> = {
-  showSecond: true,
-  messages: {
-    justNow: 'just now',
-    past: n => n,
-    future: n => n.match(/\d/) ? `in ${n}` : n,
-    month: (n, past) => n === 1
-      ? past
-        ? 'last month'
-        : 'next month'
-      : `${n}m`,
-    year: (n, past) => n === 1
-      ? past
-        ? 'last year'
-        : 'next year'
-      : `${n}y`,
-    day: (n, past) => n === 1
-      ? past
-        ? 'yesterday'
-        : 'tomorrow'
-      : `${n}d`,
-    week: (n, past) => n === 1
-      ? past
-        ? 'last week'
-        : 'next week'
-      : `${n} week${n > 1 ? 's' : ''}`,
-    hour: n => `${n}h`,
-    minute: n => `${n}min`,
-    second: n => `${n}s`,
-  },
+export const useTimeAgoOptions = (): UseTimeAgoOptions<false> => {
+  const { d, t } = useI18n()
+
+  return {
+    showSecond: true,
+    updateInterval: 1_000,
+    messages: {
+      justNow: t('time_ago_options.just_now'),
+      // just return the value
+      past: n => n,
+      // just return the value
+      future: n => n,
+      second: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_second`, n),
+      minute: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_minute`, n),
+      hour: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_hour`, n),
+      day: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_day`, n),
+      week: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_week`, n),
+      month: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_month`, n),
+      year: (n, p) => t(`time_ago_options.${p ? 'past' : 'future'}_year`, n),
+    },
+    fullDateFormatter(date) {
+      return d(date, 'long')
+    },
+  }
 }