You've already forked AstralRinth
forked from didirus/AstralRinth
Add translation keys for Badge Component & improve documentation (#137)
* Begin Work * Ordering * Add all keys to JSON file * Add accepted, approved, archived & closed keys to vue component * Add draft, failed, listed keys to vue component * Format (fix lint) & improve documentation * Finish the work
This commit is contained in:
Mysterious_Dev
@@ -1,5 +1,7 @@
|
||||
# Badge
|
||||
|
||||
## Colored badge
|
||||
|
||||
<DemoContainer>
|
||||
<Badge color="red" type="Tomato" />
|
||||
<Badge color="orange" type="Squash" />
|
||||
@@ -13,3 +15,58 @@
|
||||
<Badge color="green" type="Lettuce" />
|
||||
<Badge type="Onion" />
|
||||
```
|
||||
|
||||
## Badge with icon
|
||||
|
||||
<DemoContainer>
|
||||
<Badge type="admin" />
|
||||
<Badge type="moderator" />
|
||||
<Badge type="creator" />
|
||||
|
||||
<Badge type="approved" />
|
||||
<Badge type="approved-general" />
|
||||
<Badge type="unlisted" />
|
||||
<Badge type="withheld" />
|
||||
<Badge type="private" />
|
||||
<Badge type="scheduled" />
|
||||
<Badge type="draft" />
|
||||
<Badge type="archived" />
|
||||
<Badge type="rejected" />
|
||||
<Badge type="processing" />
|
||||
|
||||
<Badge type="accepted" />
|
||||
<Badge type="pending" />
|
||||
|
||||
<Badge type="processed" />
|
||||
<Badge type="failed" />
|
||||
<Badge type="returned" />
|
||||
|
||||
<Badge type="closed" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Badge type="admin" />
|
||||
<Badge type="moderator" />
|
||||
<Badge type="creator" />
|
||||
|
||||
<Badge type="approved" />
|
||||
<Badge type="approved-general" />
|
||||
<Badge type="unlisted" />
|
||||
<Badge type="withheld" />
|
||||
<Badge type="private" />
|
||||
<Badge type="scheduled" />
|
||||
<Badge type="draft" />
|
||||
<Badge type="archived" />
|
||||
<Badge type="rejected" />
|
||||
<Badge type="processing" />
|
||||
|
||||
<Badge type="accepted" />
|
||||
<Badge type="pending" />
|
||||
|
||||
<Badge type="processed" />
|
||||
<Badge type="failed" />
|
||||
<Badge type="returned" />
|
||||
|
||||
<Badge type="closed" />
|
||||
```
|
||||
|
||||
|
||||
@@ -3,33 +3,71 @@
|
||||
<template v-if="color"> <span class="circle" /> {{ capitalizeString(type) }}</template>
|
||||
|
||||
<!-- User roles -->
|
||||
<template v-else-if="type === 'admin'"> <ModrinthIcon /> Modrinth Team</template>
|
||||
<template v-else-if="type === 'moderator'"> <ScaleIcon /> Moderator</template>
|
||||
<template v-else-if="type === 'creator'"><BoxIcon /> Creator</template>
|
||||
<template v-else-if="type === 'admin'">
|
||||
<ModrinthIcon /> {{ formatMessage(messages.modrinthTeamLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'moderator'">
|
||||
<ScaleIcon /> {{ formatMessage(messages.moderatorLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'creator'">
|
||||
<BoxIcon /> {{ formatMessage(messages.creatorLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Project statuses -->
|
||||
<template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
|
||||
<template v-else-if="type === 'approved-general'"><CheckIcon /> Approved</template>
|
||||
<template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
|
||||
<template v-else-if="type === 'withheld'"><EyeOffIcon /> Withheld</template>
|
||||
<template v-else-if="type === 'private'"><LockIcon /> Private</template>
|
||||
<template v-else-if="type === 'scheduled'"> <CalendarIcon /> Scheduled</template>
|
||||
<template v-else-if="type === 'draft'"><FileTextIcon /> Draft</template>
|
||||
<template v-else-if="type === 'archived'"> <ArchiveIcon /> Archived</template>
|
||||
<template v-else-if="type === 'rejected'"><XIcon /> Rejected</template>
|
||||
<template v-else-if="type === 'processing'"> <UpdatedIcon /> Under review</template>
|
||||
<template v-else-if="type === 'approved'">
|
||||
<ListIcon /> {{ formatMessage(messages.listedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'approved-general'">
|
||||
<CheckIcon /> {{ formatMessage(messages.approvedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'unlisted'">
|
||||
<EyeOffIcon /> {{ formatMessage(messages.unlistedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'withheld'">
|
||||
<EyeOffIcon /> {{ formatMessage(messages.withheldLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'private'">
|
||||
<LockIcon /> {{ formatMessage(messages.privateLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'scheduled'">
|
||||
<CalendarIcon /> {{ formatMessage(messages.scheduledLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'draft'">
|
||||
<FileTextIcon /> {{ formatMessage(messages.draftLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'archived'">
|
||||
<ArchiveIcon /> {{ formatMessage(messages.archivedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'rejected'">
|
||||
<XIcon /> {{ formatMessage(messages.rejectedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'processing'">
|
||||
<UpdatedIcon /> {{ formatMessage(messages.underReviewLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Team members -->
|
||||
<template v-else-if="type === 'accepted'"><CheckIcon /> Accepted</template>
|
||||
<template v-else-if="type === 'pending'"> <UpdatedIcon /> Pending</template>
|
||||
<template v-else-if="type === 'accepted'">
|
||||
<CheckIcon /> {{ formatMessage(messages.acceptedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'pending'">
|
||||
<UpdatedIcon /> {{ formatMessage(messages.pendingLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Transaction statuses (pending, processing reused) -->
|
||||
<template v-else-if="type === 'processed'"><CheckIcon /> Processed</template>
|
||||
<template v-else-if="type === 'failed'"><XIcon /> Failed</template>
|
||||
<template v-else-if="type === 'returned'"><XIcon /> Returned</template>
|
||||
<template v-else-if="type === 'processed'">
|
||||
<CheckIcon /> {{ formatMessage(messages.processedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'failed'">
|
||||
<XIcon /> {{ formatMessage(messages.failedLabel) }}
|
||||
</template>
|
||||
<template v-else-if="type === 'returned'">
|
||||
<XIcon /> {{ formatMessage(messages.returnedLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Report status -->
|
||||
<template v-else-if="type === 'closed'"> <XIcon /> Closed</template>
|
||||
<template v-else-if="type === 'closed'">
|
||||
<XIcon /> {{ formatMessage(messages.closedLabel) }}
|
||||
</template>
|
||||
|
||||
<!-- Other -->
|
||||
<template v-else> <span class="circle" /> {{ capitalizeString(type) }} </template>
|
||||
@@ -53,6 +91,87 @@ import {
|
||||
capitalizeString,
|
||||
} from '@'
|
||||
|
||||
import { useVIntl, defineMessages } from '@vintl/vintl'
|
||||
const messages = defineMessages({
|
||||
acceptedLabel: {
|
||||
id: 'omorphia.component.badge.label.accepted',
|
||||
defaultMessage: 'Accepted',
|
||||
},
|
||||
approvedLabel: {
|
||||
id: 'omorphia.component.badge.label.approved',
|
||||
defaultMessage: 'Approved',
|
||||
},
|
||||
archivedLabel: {
|
||||
id: 'omorphia.component.badge.label.archived',
|
||||
defaultMessage: 'Archived',
|
||||
},
|
||||
closedLabel: {
|
||||
id: 'omorphia.component.badge.label.closed',
|
||||
defaultMessage: 'Closed',
|
||||
},
|
||||
creatorLabel: {
|
||||
id: 'omorphia.component.badge.label.creator',
|
||||
defaultMessage: 'Creator',
|
||||
},
|
||||
draftLabel: {
|
||||
id: 'omorphia.component.badge.label.draft',
|
||||
defaultMessage: 'Draft',
|
||||
},
|
||||
failedLabel: {
|
||||
id: 'omorphia.component.badge.label.failed',
|
||||
defaultMessage: 'Failed',
|
||||
},
|
||||
listedLabel: {
|
||||
id: 'omorphia.component.badge.label.listed',
|
||||
defaultMessage: 'Listed',
|
||||
},
|
||||
moderatorLabel: {
|
||||
id: 'omorphia.component.badge.label.moderator',
|
||||
defaultMessage: 'Moderator',
|
||||
},
|
||||
modrinthTeamLabel: {
|
||||
id: 'omorphia.component.badge.label.modrinth-team',
|
||||
defaultMessage: 'Modrinth Team',
|
||||
},
|
||||
pendingLabel: {
|
||||
id: 'omorphia.component.badge.label.pending',
|
||||
defaultMessage: 'Pending',
|
||||
},
|
||||
privateLabel: {
|
||||
id: 'omorphia.component.badge.label.private',
|
||||
defaultMessage: 'Private',
|
||||
},
|
||||
processedLabel: {
|
||||
id: 'omorphia.component.badge.label.processed',
|
||||
defaultMessage: 'Processed',
|
||||
},
|
||||
rejectedLabel: {
|
||||
id: 'omorphia.component.badge.label.rejected',
|
||||
defaultMessage: 'Rejected',
|
||||
},
|
||||
returnedLabel: {
|
||||
id: 'omorphia.component.badge.label.returned',
|
||||
defaultMessage: 'Returned',
|
||||
},
|
||||
scheduledLabel: {
|
||||
id: 'omorphia.component.badge.label.scheduled',
|
||||
defaultMessage: 'Scheduled',
|
||||
},
|
||||
underReviewLabel: {
|
||||
id: 'omorphia.component.badge.label.under-review',
|
||||
defaultMessage: 'Under review',
|
||||
},
|
||||
unlistedLabel: {
|
||||
id: 'omorphia.component.badge.label.unlisted',
|
||||
defaultMessage: 'Unlisted',
|
||||
},
|
||||
withheldLabel: {
|
||||
id: 'omorphia.component.badge.label.withheld',
|
||||
defaultMessage: 'Withheld',
|
||||
},
|
||||
})
|
||||
const { formatMessage } = useVIntl()
|
||||
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
|
||||
@@ -1,4 +1,61 @@
|
||||
{
|
||||
"omorphia.component.badge.label.accepted": {
|
||||
"defaultMessage": "Accepted"
|
||||
},
|
||||
"omorphia.component.badge.label.approved": {
|
||||
"defaultMessage": "Approved"
|
||||
},
|
||||
"omorphia.component.badge.label.archived": {
|
||||
"defaultMessage": "Archived"
|
||||
},
|
||||
"omorphia.component.badge.label.closed": {
|
||||
"defaultMessage": "Closed"
|
||||
},
|
||||
"omorphia.component.badge.label.creator": {
|
||||
"defaultMessage": "Creator"
|
||||
},
|
||||
"omorphia.component.badge.label.draft": {
|
||||
"defaultMessage": "Draft"
|
||||
},
|
||||
"omorphia.component.badge.label.failed": {
|
||||
"defaultMessage": "Failed"
|
||||
},
|
||||
"omorphia.component.badge.label.listed": {
|
||||
"defaultMessage": "Listed"
|
||||
},
|
||||
"omorphia.component.badge.label.moderator": {
|
||||
"defaultMessage": "Moderator"
|
||||
},
|
||||
"omorphia.component.badge.label.modrinth-team": {
|
||||
"defaultMessage": "Modrinth Team"
|
||||
},
|
||||
"omorphia.component.badge.label.pending": {
|
||||
"defaultMessage": "Pending"
|
||||
},
|
||||
"omorphia.component.badge.label.private": {
|
||||
"defaultMessage": "Private"
|
||||
},
|
||||
"omorphia.component.badge.label.processed": {
|
||||
"defaultMessage": "Processed"
|
||||
},
|
||||
"omorphia.component.badge.label.rejected": {
|
||||
"defaultMessage": "Rejected"
|
||||
},
|
||||
"omorphia.component.badge.label.returned": {
|
||||
"defaultMessage": "Returned"
|
||||
},
|
||||
"omorphia.component.badge.label.scheduled": {
|
||||
"defaultMessage": "Scheduled"
|
||||
},
|
||||
"omorphia.component.badge.label.under-review": {
|
||||
"defaultMessage": "Under review"
|
||||
},
|
||||
"omorphia.component.badge.label.unlisted": {
|
||||
"defaultMessage": "Unlisted"
|
||||
},
|
||||
"omorphia.component.badge.label.withheld": {
|
||||
"defaultMessage": "Withheld"
|
||||
},
|
||||
"omorphia.component.copy.action.copy": {
|
||||
"defaultMessage": "Copy code to clipboard"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user