feat(i18n): update plurals support (#433)

zio/stable
Joaquín Sánchez 2022-12-14 16:56:48 +01:00 committed by GitHub
parent 9899cd0661
commit e4b7b8061a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 15 deletions

View File

@ -6,7 +6,8 @@ const props = defineProps<{
}>() }>()
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber() const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const statusesCount = $computed(() => formatNumber(props.account.statusesCount)) const statusesCount = $computed(() => formatHumanReadableNumber(props.account.statusesCount))
const statusesCountSR = $computed(() => forSR(props.account.statusesCount))
const followingCount = $computed(() => formatHumanReadableNumber(props.account.followingCount)) const followingCount = $computed(() => formatHumanReadableNumber(props.account.followingCount))
const followingCountSR = $computed(() => forSR(props.account.followingCount)) const followingCountSR = $computed(() => forSR(props.account.followingCount))
const followersCount = $computed(() => formatHumanReadableNumber(props.account.followersCount)) const followersCount = $computed(() => formatHumanReadableNumber(props.account.followersCount))
@ -15,31 +16,48 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
<template> <template>
<div flex gap-5> <div flex gap-5>
<NuxtLink :to="getAccountRoute(account)" text-secondary exact-active-class="text-primary"> <NuxtLink
:to="getAccountRoute(account)"
text-secondary
exact-active-class="text-primary"
:class="statusesCountSR ? 'flex gap-x-1' : null"
>
<template #default="{ isExactActive }"> <template #default="{ isExactActive }">
<i18n-t keypath="account.posts_count" :plural="account.statusesCount"> <i18n-t keypath="account.posts_count" :plural="account.statusesCount">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span> <CommonTooltip v-if="statusesCountSR" :content="formatNumber(account.statusesCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
<span sr-only font-bold>{{ account.statusesCount }}</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ statusesCount }}</span>
</i18n-t> </i18n-t>
</template> </template>
</NuxtLink> </NuxtLink>
<NuxtLink :to="getAccountFollowingRoute(account)" text-secondary exact-active-class="text-primary"> <NuxtLink
:to="getAccountFollowingRoute(account)"
text-secondary exact-active-class="text-primary"
:class="followingCountSR ? 'flex gap-x-1' : null"
>
<template #default="{ isExactActive }"> <template #default="{ isExactActive }">
<i18n-t keypath="account.following_count"> <i18n-t keypath="account.following_count" :plural="account.followingCount">
<span v-if="followingCountSR"> <CommonTooltip v-if="followingCountSR" :content="formatNumber(account.followingCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span> <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
<span sr-only font-bold>{{ account.followingCount }}</span> <span sr-only font-bold>{{ account.followingCount }}</span>
</span> </CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span> <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
</i18n-t> </i18n-t>
</template> </template>
</NuxtLink> </NuxtLink>
<NuxtLink :to="getAccountFollowersRoute(account)" text-secondary exact-active-class="text-primary"> <NuxtLink
:to="getAccountFollowersRoute(account)"
text-secondary exact-active-class="text-primary"
:class="followersCountSR ? 'flex gap-x-1' : null"
>
<template #default="{ isExactActive }"> <template #default="{ isExactActive }">
<i18n-t keypath="account.followers_count" :plural="account.followersCount"> <i18n-t keypath="account.followers_count" :plural="account.followersCount">
<span v-if="followersCountSR"> <CommonTooltip v-if="followersCountSR" :content="formatNumber(account.followersCount)" placement="bottom">
<span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span> <span aria-hidden="true" font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
<span sr-only font-bold>{{ account.followersCount }}</span> <span sr-only font-bold>{{ account.followersCount }}</span>
</span> </CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span> <span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
</i18n-t> </i18n-t>
</template> </template>

View File

@ -11,10 +11,12 @@ const humanReadableNumber = (
if (num < 10000) if (num < 10000)
return useFormatter.format(num) return useFormatter.format(num)
// show 1 decimal: we cannot use toFixed(1), it is a string
if (num < 1000000) if (num < 1000000)
return `${Math.floor(num / 1000)}${k}` return `${useFormatter.format(Math.floor(num / 100) / 10)}${k}`
return `${Math.floor(num / 1000000)}${m}` // show 2 decimals: we cannot use toFixed(2), it is a string
return `${useFormatter.format(Math.floor(num / 10000) / 100)}${m}`
} }
export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => { export const formattedNumber = (num: number, useFormatter: Intl.NumberFormat = formatter) => {

View File

@ -10,7 +10,7 @@
"follow_back": "Follow back", "follow_back": "Follow back",
"follow_requested": "Requested", "follow_requested": "Requested",
"followers": "Followers", "followers": "Followers",
"followers_count": "{0} Followers", "followers_count": "{0} Followers|{0} Follower|{0} Followers",
"following": "Following", "following": "Following",
"following_count": "{0} Following", "following_count": "{0} Following",
"follows_you": "Follows you", "follows_you": "Follows you",
@ -21,7 +21,7 @@
"mutuals": "Mutuals", "mutuals": "Mutuals",
"pinned": "Pinned", "pinned": "Pinned",
"posts": "Posts", "posts": "Posts",
"posts_count": "{0} Posts", "posts_count": "{0} posts|{0} post|{0} posts",
"profile_description": "{0}'s profile header", "profile_description": "{0}'s profile header",
"profile_unavailable": "Profile unavailable", "profile_unavailable": "Profile unavailable",
"unfollow": "Unfollow" "unfollow": "Unfollow"
@ -138,7 +138,7 @@
"notification": { "notification": {
"favourited_post": "favourited your post", "favourited_post": "favourited your post",
"followed_you": "followed you", "followed_you": "followed you",
"followed_you_count": "{n} person followed you|{n} people followed you", "followed_you_count": "{followers} people followed you|{followers} person followed you|{followers} people followed you",
"missing_type": "MISSING notification.type:", "missing_type": "MISSING notification.type:",
"reblogged_post": "reblogged your post", "reblogged_post": "reblogged your post",
"request_to_follow": "requested to follow you", "request_to_follow": "requested to follow you",