docs(i18n): display supported languages in a table (#2684)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Alex
2024-11-19 19:33:01 +05:00
committed by GitHub
parent d75f47419d
commit 143c015bbd

View File

@@ -1,5 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import * as locales from '@nuxt/ui/locale' import * as locales from '@nuxt/ui/locale'
import type { Locale } from '@nuxt/ui'
type LocaleKey = keyof typeof locales
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
default?: string default?: string
@@ -7,21 +10,48 @@ const props = withDefaults(defineProps<{
default: 'en' default: 'en'
}) })
const getLocaleKeys = () => Object.keys(locales) as Array<keyof typeof locales> const getLocaleKeys = Object.keys(locales) as LocaleKey[]
const localesList = getLocaleKeys().map(locale => [locale, locales[locale].name]) const localesList = getLocaleKeys.map<[LocaleKey, Locale]>(locale => [locale, locales[locale]])
</script> </script>
<!-- eslint-disable vue/singleline-html-element-content-newline --> <!-- eslint-disable vue/singleline-html-element-content-newline -->
<template> <template>
<div> <div>
<ProseUl> <ProseP>
<ProseLi v-for="[key, label] in localesList" :key="key"> By default, the <ProseCode>{{ props.default }}</ProseCode> locale is used.
<ProseCode>{{ key }}</ProseCode> - {{ label }} </ProseP>
<template v-if="key === props.default"> <ProseTable>
(default) <ProseThead>
</template> <ProseTr>
</ProseLi> <ProseTh>
</ProseUl> Language
</ProseTh>
<ProseTh>
Code
</ProseTh>
<ProseTh>
Direction
</ProseTh>
</ProseTr>
</ProseThead>
<ProseTbody>
<ProseTr v-for="[key, locale] in localesList" :key="key">
<ProseTd>
{{ locale.name }}
</ProseTd>
<ProseTd>
<ProseCode>
{{ locale.code }}
</ProseCode>
</ProseTd>
<ProseTd>
<ProseCode>
{{ locale.dir }}
</ProseCode>
</ProseTd>
</ProseTr>
</ProseTbody>
</ProseTable>
<Note to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank"> <Note to="https://github.com/nuxt/ui/tree/v3/src/runtime/locale" target="_blank">
If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>. If you need additional languages, you can contribute by creating a PR to add a new locale in <ProseCode>src/runtime/locale/</ProseCode>.
</Note> </Note>