teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

38
components/account/AccountPostsFollowers.vue
View file

@ -6,7 +6,8 @@ const props = defineProps<{
}>()
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 followingCountSR = $computed(() => forSR(props.account.followingCount))
const followersCount = $computed(() => formatHumanReadableNumber(props.account.followersCount))
@ -15,31 +16,48 @@ const followersCountSR = $computed(() => forSR(props.account.followersCount))
<template>
<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 }">
<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>
</template>
</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 }">
<i18n-t keypath="account.following_count">
<span v-if="followingCountSR">
<i18n-t keypath="account.following_count" :plural="account.followingCount">
<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 sr-only font-bold>{{ account.followingCount }}</span>
</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followingCount }}</span>
</i18n-t>
</template>
</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 }">
<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 sr-only font-bold>{{ account.followersCount }}</span>
</span>
</CommonTooltip>
<span v-else font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ followersCount }}</span>
</i18n-t>
</template>

6
composables/i18n.ts
View file

@ -11,10 +11,12 @@ const humanReadableNumber = (
if (num < 10000)
return useFormatter.format(num)
// show 1 decimal: we cannot use toFixed(1), it is a string
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) => {

6
locales/en-US.json
View file

@ -10,7 +10,7 @@
"follow_back": "Follow back",
"follow_requested": "Requested",
"followers": "Followers",
"followers_count": "{0} Followers",
"followers_count": "{0} Followers|{0} Follower|{0} Followers",
"following": "Following",
"following_count": "{0} Following",
"follows_you": "Follows you",
@ -21,7 +21,7 @@
"mutuals": "Mutuals",
"pinned": "Pinned",
"posts": "Posts",
"posts_count": "{0} Posts",
"posts_count": "{0} posts|{0} post|{0} posts",
"profile_description": "{0}'s profile header",
"profile_unavailable": "Profile unavailable",
"unfollow": "Unfollow"
@ -138,7 +138,7 @@
"notification": {
"favourited_post": "favourited your post",
"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:",
"reblogged_post": "reblogged your post",
"request_to_follow": "requested to follow you",