diff --git a/cli/commands/make/locale.mjs b/cli/commands/make/locale.mjs index 3d46d567..6d7d5509 100644 --- a/cli/commands/make/locale.mjs +++ b/cli/commands/make/locale.mjs @@ -17,6 +17,10 @@ export default defineCommand({ name: { description: 'Locale name to create. For example: English.', required: true + }, + dir: { + description: 'Locale direction. For example: rtl.', + default: 'ltr' } }, async setup({ args }) { @@ -32,6 +36,11 @@ export default defineCommand({ process.exit(1) } + if (!['ltr', 'rtl'].includes(args.dir)) { + consola.error(`🚨 Direction ${args.dir} not supported!`) + process.exit(1) + } + if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) { consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`) process.exit(1) @@ -45,7 +54,9 @@ export default defineCommand({ // Create new locale file await fsp.copyFile(originLocaleFilePath, newLocaleFilePath) const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8') - const rewrittenLocaleFile = localeFile.replace(/defineLocale\('(.*)'/, `defineLocale('${args.name}', '${normalizeLocale(args.code)}'`) + const rewrittenLocaleFile = localeFile + .replace(/name: '(.*)',/, `name: '${args.name}',`) + .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n dir: '${args.dir}',` : ''}`) await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile) consola.success(`🪄 Generated ${newLocaleFilePath}`) diff --git a/docs/content/1.getting-started/7.i18n/1.nuxt.md b/docs/content/1.getting-started/7.i18n/1.nuxt.md index aa797741..cf92e331 100644 --- a/docs/content/1.getting-started/7.i18n/1.nuxt.md +++ b/docs/content/1.getting-started/7.i18n/1.nuxt.md @@ -12,11 +12,13 @@ select: to: /getting-started/i18n/vue --- +## Usage + ::note{to="/components/app"} Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations. :: -## Locale +### Locale Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`: @@ -32,14 +34,36 @@ import { fr } from '@nuxt/ui/locale' ``` +### 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] + + + +``` + ### Custom locale You also have the option to add your own locale using `defineLocale`: ```vue [app.vue] @@ -51,7 +75,7 @@ const locale = defineLocale('My custom locale', 'en', { ``` ::tip -Look at the second parameter, there you need to pass the iso code of the language. Example: +Look at the `code` parameter, there you need to pass the iso code of the language. Example: * `hi` Hindi (language) * `de-AT`: German (language) as used in Austria (region) :: @@ -125,65 +149,6 @@ const { locale } = useI18n() :: -### Supported languages +## Supported languages :supported-languages - -## Direction - -Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app: - -```vue [app.vue] - -``` - -### Dynamic direction - -To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions. - -::steps{level="4"} - -#### Install the `@vueuse/core` package - -::code-group{sync="pm"} - -```bash [pnpm] -pnpm add @vueuse/core -``` - -```bash [yarn] -yarn add @vueuse/core -``` - -```bash [npm] -npm install @vueuse/core -``` - -```bash [bun] -bun add @vueuse/core -``` - -:: - -#### Set the `dir` prop using `useTextDirection` - -```vue [app.vue] - - - -``` - -:: diff --git a/docs/content/1.getting-started/7.i18n/2.vue.md b/docs/content/1.getting-started/7.i18n/2.vue.md index a2d89d05..22d8ea99 100644 --- a/docs/content/1.getting-started/7.i18n/2.vue.md +++ b/docs/content/1.getting-started/7.i18n/2.vue.md @@ -12,11 +12,13 @@ select: to: /getting-started/i18n/vue --- +## Usage + ::note{to="/components/app"} Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations. :: -## Locale +### Locale Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`: @@ -32,6 +34,24 @@ import { fr } from '@nuxt/ui/locale' ``` +### 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] + + + +``` + ### Custom locale You also have the option to add your locale using `defineLocale`: @@ -40,8 +60,12 @@ You also have the option to add your locale using `defineLocale`: @@ -53,7 +77,7 @@ const locale = defineLocale('My custom locale', 'en', { ``` ::tip -Look at the second parameter, there you need to pass the iso code of the language. Example: +Look at the `code` parameter, there you need to pass the iso code of the language. Example: * `hi` Hindi (language) * `de-AT`: German (language) as used in Austria (region) :: @@ -138,61 +162,3 @@ const { locale } = useI18n() ## Supported languages :supported-languages - -## Direction - -Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app: - -```vue [App.vue] - -``` - -### Dynamic direction - -To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions. - -::steps{level="4"} - -#### Install the `@vueuse/core` package - -::code-group{sync="pm"} - -```bash [pnpm] -pnpm add @vueuse/core -``` - -```bash [yarn] -yarn add @vueuse/core -``` - -```bash [npm] -npm install @vueuse/core -``` - -```bash [bun] -bun add @vueuse/core -``` - -:: - -#### Set the `dir` prop using `useTextDirection` - -```vue [App.vue] - - - -``` diff --git a/src/runtime/components/Alert.vue b/src/runtime/components/Alert.vue index 1389583e..a3377c0b 100644 --- a/src/runtime/components/Alert.vue +++ b/src/runtime/components/Alert.vue @@ -125,7 +125,7 @@ const ui = computed(() => alert({ size="md" color="neutral" variant="link" - :aria-label="t('ui.alert.close')" + :aria-label="t('alert.close')" v-bind="typeof close === 'object' ? close : undefined" :class="ui.close({ class: props.ui?.close })" @click="emits('update:open', false)" diff --git a/src/runtime/components/App.vue b/src/runtime/components/App.vue index d07b0bb0..bc406cec 100644 --- a/src/runtime/components/App.vue +++ b/src/runtime/components/App.vue @@ -3,6 +3,7 @@ import type { ConfigProviderProps, TooltipProviderProps } from 'radix-vue' import { localeContextInjectionKey } from '../composables/useLocale' import { extendDevtoolsMeta } from '../composables/extendDevtoolsMeta' import type { ToasterProps, Locale } from '../types' +import { en } from '../locale' export interface AppProps extends Omit { tooltip?: TooltipProviderProps @@ -32,15 +33,16 @@ import USlideoverProvider from './SlideoverProvider.vue' const props = defineProps() defineSlots() -const configProviderProps = useForwardProps(reactivePick(props, 'dir', 'scrollBody')) +const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody')) const tooltipProps = toRef(() => props.tooltip) const toasterProps = toRef(() => props.toaster) -provide(localeContextInjectionKey, computed(() => props.locale)) +const locale = computed(() => props.locale || en) +provide(localeContextInjectionKey, locale)