refactor(App): remove default locale handling

[AnOrdinaryPeople]

🔗 Linked issue

Resolves #2759

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR removes the default locale handling from the App component, as this functionality is already managed by the useLocale composable at:

ui/src/runtime/composables/useLocale.ts

Line 16 in ba874c9

return buildLocaleContext(computed(() => locale.value || en))

Additionally, the value of dir prop is set to be optional because current default language is English, and Radix Vue already provides a default ltr value for it: https://www.radix-vue.com/utilities/config-provider.html#config-provider-1

Example results of locale prop from App component:

• With undefined value
  
• With fr value
  
• With ar value
  

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@2760

commit: ba1d3d4

[hywax]

This is a valid point. Only you need to delete the comment in useLocale.ts from line 13-15

[AnOrdinaryPeople]

Got it, I'll remove the comment

[Abassion]

is toRef here necessary? locale is already reactive (since it is a prop)

[benjamincanac]

I think you can remove it!

[AnOrdinaryPeople]

Well, its because the localeContextInjectionKey accepts ref type, you can see it at:

ui/src/runtime/composables/useLocale.ts

Line 8 in e7b69b7

export const localeContextInjectionKey: InjectionKey<Ref<Locale | undefined>> = Symbol('nuxt-ui.locale-context')

And about replacement from computed to toRef just only for consistency like the code above (tooltipProps and toasterProps), or should I revert to the computed then?

[AnOrdinaryPeople]

I think I've got a problem here, the reactivity does working for dir but for any attributes for aria-* doesn't updating. For example:

And here's the updated code:

• App.vue

  provide(localeContextInjectionKey, props.locale)

• useLocale.ts

  export const localeContextInjectionKey: InjectionKey<Locale | undefined> = Symbol('nuxt-ui.locale-context')
  
  const _useLocale = (localeOverrides?: Locale | undefined) => {
    const locale = localeOverrides || inject(localeContextInjectionKey, undefined)!
  
    return buildLocaleContext(computed(() => locale || en))
  }

[hywax]

@benjamincanac I'll see what the problem might be today or tomorrow and I'll report back

[AnOrdinaryPeople]

I think we should keep the toRef on App component since it works as expected, similar to what's described in the PR 🤔