refactor: group composables

composables/i18n.ts

@@ -0,0 +1,85 @@
+import type { MaybeRef } from '@vueuse/shared'
+import type { MaybeComputedRef, UseTimeAgoOptions } from '@vueuse/core'
+
+const formatter = Intl.NumberFormat()
+
+export const humanReadableNumber = (
+  num: number,
+  { k, m }: { k: string; m: string } = { k: 'K', m: 'M' },
+  useFormatter: Intl.NumberFormat = formatter,
+) => {
+  if (num < 10000)
+    return useFormatter.format(num)
+
+  if (num < 1000000)
+    return `${Math.floor(num / 1000)}${k}`
+
+  return `${Math.floor(num / 1000000)}${m}`
+}
+
+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
+    },
+  }
+}
+
+export const useFormattedDateTime = (
+  value: MaybeComputedRef<string | Date | undefined | null>,
+  options: Intl.DateTimeFormatOptions = { dateStyle: 'long', timeStyle: 'medium' },
+) => {
+  const { locale } = useI18n()
+  const formatter = $computed(() => Intl.DateTimeFormat(locale.value, options))
+  return computed(() => {
+    const v = resolveUnref(value)
+    return v ? formatter.format(new Date(v)) : ''
+  })
+}
+
+export const useTimeAgoOptions = (short = false): UseTimeAgoOptions<false> => {
+  const { d, t } = useI18n()
+  const prefix = short ? 'short_' : ''
+
+  return {
+    showSecond: !short,
+    updateInterval: short ? 60_000 : 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.${prefix}second_${p ? 'past' : 'future'}`, n),
+      minute: (n, p) => t(`time_ago_options.${prefix}minute_${p ? 'past' : 'future'}`, n),
+      hour: (n, p) => t(`time_ago_options.${prefix}hour_${p ? 'past' : 'future'}`, n),
+      day: (n, p) => t(`time_ago_options.${prefix}day_${p ? 'past' : 'future'}`, n),
+      week: (n, p) => t(`time_ago_options.${prefix}week_${p ? 'past' : 'future'}`, n),
+      month: (n, p) => t(`time_ago_options.${prefix}month_${p ? 'past' : 'future'}`, n),
+      year: (n, p) => t(`time_ago_options.${prefix}year_${p ? 'past' : 'future'}`, n),
+    },
+    fullDateFormatter(date) {
+      return d(date, short ? 'short' : 'long')
+    },
+  }
+}
+