From 937585cb3f8bc902d60a4b5904711598204aee2d Mon Sep 17 00:00:00 2001 From: Alex Date: Wed, 13 Nov 2024 16:19:21 +0500 Subject: [PATCH] feat(locale): provide `dir` on `defineLocale` (#2620) Co-authored-by: Benjamin Canac --- cli/commands/make/locale.mjs | 13 ++- .../1.getting-started/7.i18n/1.nuxt.md | 93 ++++++------------- .../content/1.getting-started/7.i18n/2.vue.md | 90 ++++++------------ src/runtime/components/Alert.vue | 2 +- src/runtime/components/App.vue | 8 +- src/runtime/components/Carousel.vue | 6 +- src/runtime/components/CommandPalette.vue | 4 +- src/runtime/components/InputMenu.vue | 4 +- src/runtime/components/Modal.vue | 2 +- src/runtime/components/SelectMenu.vue | 4 +- src/runtime/components/Slideover.vue | 2 +- src/runtime/components/Table.vue | 2 +- src/runtime/components/Toast.vue | 2 +- src/runtime/composables/defineLocale.ts | 18 ++-- src/runtime/composables/useLocale.ts | 8 +- src/runtime/locale/ar.ts | 75 ++++++++------- src/runtime/locale/cs.ts | 74 ++++++++------- src/runtime/locale/de.ts | 74 ++++++++------- src/runtime/locale/en.ts | 74 ++++++++------- src/runtime/locale/fr.ts | 74 ++++++++------- src/runtime/locale/it.ts | 74 ++++++++------- src/runtime/locale/ru.ts | 74 ++++++++------- src/runtime/locale/zh_hans.ts | 74 ++++++++------- src/runtime/locale/zh_hant.ts | 74 ++++++++------- src/runtime/types/locale.ts | 7 +- src/runtime/utils/locale.ts | 5 +- 26 files changed, 467 insertions(+), 470 deletions(-) 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)