arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-30 03:38:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(App): remove dir prop (#2630)

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-13 16:23:08 +01:00
committed by GitHub
parent 9241ba1230
commit 7cc26d098d
6 changed files with 71 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/content/1.getting-started/7.i18n/.navigation.yml Normal file
View File

@@ -0,0 +1 @@
badge: New

51
docs/content/1.getting-started/7.i18n/1.nuxt.md
View File

@@ -1,7 +1,7 @@
--- ---
navigation.title: Nuxt navigation.title: Nuxt
title: Internationalization (i18n) in a Nuxt app title: Internationalization (i18n) in a Nuxt app
description: 'Learn how to internationalize your Nuxt app and support multi-directional support (LTR/RTL).' description: 'Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).'
select: select:
items: items:
- label: Nuxt - label: Nuxt
@@ -34,24 +34,6 @@ import { fr } from '@nuxt/ui/locale'
</template> </template>
``` ```
### Direction
Each locale has a default direction, but you can override it using the `dir` prop if needed.
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
```vue [app.vue]
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp dir="rtl" :locale="fr">
<NuxtPage />
</UApp>
</template>
```
### Custom locale ### Custom locale
You also have the option to add your own locale using `defineLocale`: You also have the option to add your own locale using `defineLocale`:
@@ -61,6 +43,7 @@ You also have the option to add your own locale using `defineLocale`:
const locale = defineLocale({ const locale = defineLocale({
name: 'My custom locale', name: 'My custom locale',
code: 'en', code: 'en',
dir: 'ltr',
messages: { messages: {
// implement pairs // implement pairs
} }
@@ -149,6 +132,36 @@ const { locale } = useI18n()
:: ::
### Dynamic direction
Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.
In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://nuxt.com/docs/api/composables/use-head) composable:
```vue [app.vue]
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
```
## Supported languages ## Supported languages
:supported-languages :supported-languages

54
docs/content/1.getting-started/7.i18n/2.vue.md
View File

@@ -1,7 +1,7 @@
--- ---
navigation.title: Vue navigation.title: Vue
title: Internationalization (i18n) in a Vue app title: Internationalization (i18n) in a Vue app
description: 'Learn how to internationalize your Vue app and support multi-directional support (LTR/RTL).' description: 'Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).'
select: select:
items: items:
- label: Nuxt - label: Nuxt
@@ -34,24 +34,6 @@ import { fr } from '@nuxt/ui/locale'
</template> </template>
``` ```
### Direction
Each locale has a default direction, but you can override it using the `dir` prop if needed.
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
```vue [App.vue]
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp dir="rtl" :locale="fr">
<RouterView />
</UApp>
</template>
```
### Custom locale ### Custom locale
You also have the option to add your locale using `defineLocale`: You also have the option to add your locale using `defineLocale`:
@@ -63,6 +45,7 @@ import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'
const locale = defineLocale({ const locale = defineLocale({
name: 'My custom locale', name: 'My custom locale',
code: 'en', code: 'en',
dir: 'ltr',
messages: { messages: {
// implement pairs // implement pairs
} }
@@ -159,6 +142,39 @@ const { locale } = useI18n()
:: ::
### Dynamic direction
Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.
In a multilingual application, you might want to set the `lang` and `dir` attributes on the `<html>` element dynamically based on the user's locale, which you can do with the [useHead](https://unhead.unjs.io/usage/composables/use-head) composable:
```vue [App.vue]
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<RouterView />
</UApp>
</template>
```
## Supported languages ## Supported languages
:supported-languages :supported-languages

4
docs/content/3.components/0.app.md
View File

@@ -31,10 +31,6 @@ Use it as at the root of your app:
Learn how to use the `locale` prop to change the locale of your app. Learn how to use the `locale` prop to change the locale of your app.
:: ::
::tip{to="/getting-started/i18n/nuxt#direction"}
Learn how to use the `dir` prop to change the global reading direction of your app.
::
## API ## API
### Props ### Props

4
src/runtime/components/App.vue
View File

@@ -5,7 +5,7 @@ import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta'
import type { ToasterProps, Locale } from '../types' import type { ToasterProps, Locale } from '../types'
import { en } from '../locale' import { en } from '../locale'
export interface AppProps extends Omit<ConfigProviderProps, 'useId'> { export interface AppProps extends Omit<ConfigProviderProps, 'useId' | 'dir'> {
tooltip?: TooltipProviderProps tooltip?: TooltipProviderProps
toaster?: ToasterProps | null toaster?: ToasterProps | null
locale?: Locale locale?: Locale
@@ -42,7 +42,7 @@ provide(localeContextInjectionKey, locale)
</script> </script>
<template> <template>
<ConfigProvider :use-id="() => (useId() as string)" :dir="dir || locale.dir" v-bind="configProviderProps"> <ConfigProvider :use-id="() => (useId() as string)" :dir="locale.dir" v-bind="configProviderProps">
<TooltipProvider v-bind="tooltipProps"> <TooltipProvider v-bind="tooltipProps">
<UToaster v-if="toaster !== null" v-bind="toasterProps"> <UToaster v-if="toaster !== null" v-bind="toasterProps">
<slot /> <slot />

2
src/runtime/composables/defineLocale.ts
View File

@@ -1,5 +1,5 @@
import type { Locale, Direction, Messages } from '../types/locale'
import { defu } from 'defu' import { defu } from 'defu'
import type { Locale, Direction, Messages } from '../types/locale'
interface DefineLocaleOptions { interface DefineLocaleOptions {
name: string name: string