feat(ConfigProvider): global config for locale

Author: zernonia

packages/radix-vue/src/Calendar/CalendarRoot.vue

@@ -3,7 +3,7 @@ import { type DateValue, isEqualDay, isSameDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { type Formatter, createContext, useDirection } from '@/shared'
+import { type Formatter, createContext, useDirection, useLocale } from '@/shared'
 
 import { useCalendar, useCalendarState } from './useCalendar'
 import { type CalendarIncrement, getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
@@ -129,7 +129,6 @@ const props = withDefaults(defineProps<CalendarRootProps>(), {
   readonly: false,
   initialFocus: false,
   placeholder: undefined,
-  locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
 })
@@ -152,7 +151,6 @@ defineSlots<{
 }>()
 
 const {
-  locale,
   disabled,
   readonly,
   initialFocus,
@@ -170,10 +168,12 @@ const {
   calendarLabel,
   defaultValue,
   dir: propDir,
+  locale: propLocale,
 } = toRefs(props)
 
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
+const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
 
 const modelValue = useVModel(props, 'modelValue', emits, {

packages/radix-vue/src/ConfigProvider/ConfigProvider.vue

@@ -5,6 +5,7 @@ import { createContext } from '@/shared'
 
 interface ConfigProviderContextValue {
   dir?: Ref<Direction>
+  locale?: Ref<string>
   scrollBody?: Ref<boolean | ScrollBodyOption>
   useId?: () => string
 }
@@ -18,6 +19,11 @@ export interface ConfigProviderProps {
    * @defaultValue 'ltr'
    */
   dir?: Direction
+  /**
+   * The global locale of your application. This will be inherited by all primitives.
+   * @defaultValue 'en'
+   */
+  locale?: string
   /**
    * The global scroll body behavior of your application. This will be inherited by the related primitives.
    * @type boolean | ScrollBodyOption
@@ -35,14 +41,16 @@ import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<ConfigProviderProps>(), {
   dir: 'ltr',
+  locale: 'en',
   scrollBody: true,
   useId: undefined,
 })
 
-const { dir, scrollBody } = toRefs(props)
+const { dir, locale, scrollBody } = toRefs(props)
 
 provideConfigProviderContext({
   dir,
+  locale,
   scrollBody,
   useId: props.useId,
 })

packages/radix-vue/src/DateField/DateFieldRoot.vue

@@ -3,7 +3,7 @@ import { type DateValue, isEqualDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { type Formatter, createContext, useDateFormatter, useDirection, useKbd } from '@/shared'
+import { type Formatter, createContext, useDateFormatter, useDirection, useKbd, useLocale } from '@/shared'
 import {
   type Granularity,
   type HourCycle,
@@ -94,7 +94,6 @@ const props = withDefaults(defineProps<DateFieldRootProps>(), {
   disabled: false,
   readonly: false,
   placeholder: undefined,
-  locale: 'en',
   isDateUnavailable: undefined,
 })
 const emits = defineEmits<DateFieldRootEmits>()
@@ -109,10 +108,11 @@ defineSlots<{
   }) => any
 }>()
 
-const { locale, disabled, readonly, isDateUnavailable: propsIsDateUnavailable, granularity, defaultValue, dir: propDir } = toRefs(props)
-
-const formatter = useDateFormatter(props.locale)
+const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, granularity, defaultValue, dir: propDir, locale: propLocale } = toRefs(props)
+const locale = useLocale(propLocale)
 const dir = useDirection(propDir)
+
+const formatter = useDateFormatter(locale.value)
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const segmentElements = ref<Set<HTMLElement>>(new Set())

packages/radix-vue/src/DateRangeField/DateRangeFieldRoot.vue

@@ -3,7 +3,7 @@ import { type DateValue, isEqualDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { type Formatter, createContext, useDateFormatter, useDirection, useKbd } from '@/shared'
+import { type Formatter, createContext, useDateFormatter, useDirection, useKbd, useLocale } from '@/shared'
 import {
   type DateRange,
   type Granularity,
@@ -103,17 +103,17 @@ const props = withDefaults(defineProps<DateRangeFieldRootProps>(), {
   disabled: false,
   readonly: false,
   placeholder: undefined,
-  locale: 'en',
   isDateUnavailable: undefined,
 })
 const emits = defineEmits<DateRangeFieldRootEmits>()
-const { locale, disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: propsDir } = toRefs(props)
+const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: propDir, locale: propLocale } = toRefs(props)
+const locale = useLocale(propLocale)
+const dir = useDirection(propDir)
 
-const formatter = useDateFormatter(props.locale)
+const formatter = useDateFormatter(locale.value)
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
 const segmentElements = ref<Set<HTMLElement>>(new Set())
-const dir = useDirection(propsDir)
 
 onMounted(() => {
   Array.from(parentElement.value.querySelectorAll('[data-radix-vue-date-field-segment]')).filter(item => item.getAttribute('data-radix-vue-date-field-segment') !== 'literal').forEach(el => segmentElements.value.add(el as HTMLElement))

packages/radix-vue/src/NumberField/NumberFieldRoot.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { PrimitiveProps } from '@/Primitive'
 import { useVModel } from '@vueuse/core'
-import { clamp, createContext, snapValueToStep, useFormControl } from '@/shared'
+import { clamp, createContext, snapValueToStep, useFormControl, useLocale } from '@/shared'
 import { type HTMLAttributes, type Ref, computed, ref, toRefs } from 'vue'
 
 export interface NumberFieldRootProps extends PrimitiveProps {
@@ -64,11 +64,10 @@ defineOptions({
 const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   as: 'div',
   defaultValue: undefined,
-  locale: 'en-US',
   step: 1,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
-const { disabled, min, max, step, locale, formatOptions, id } = toRefs(props)
+const { disabled, min, max, step, formatOptions, id, locale: propLocale } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
@@ -77,6 +76,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
+const locale = useLocale(propLocale)
 const isFormControl = useFormControl(currentElement)
 const inputEl = ref<HTMLInputElement>()
 

packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue

@@ -3,7 +3,7 @@ import { type DateValue, isEqualDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
-import { type Formatter, createContext, useDirection } from '@/shared'
+import { type Formatter, createContext, useDirection, useLocale } from '@/shared'
 import { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'
 import { type Grid, type Matcher, type WeekDayFormat, isBefore } from '@/date'
 import type { CalendarIncrement, DateRange } from '@/shared/date'
@@ -122,7 +122,6 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   readonly: false,
   initialFocus: false,
   placeholder: undefined,
-  locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   initialView: 'month',
@@ -161,13 +160,14 @@ const {
   calendarLabel,
   maxValue,
   minValue,
-  locale,
-  dir: propsDir,
+  dir: propDir,
+  locale: propLocale,
 } = toRefs(props)
 
 const { primitiveElement, currentElement: parentElement }
   = usePrimitiveElement()
-const dir = useDirection(propsDir)
+const dir = useDirection(propDir)
+const locale = useLocale(propLocale)
 
 const lastPressedDateValue = ref() as Ref<DateValue | undefined>
 const focusedValue = ref() as Ref<DateValue | undefined>

packages/radix-vue/src/shared/index.ts

@@ -26,6 +26,7 @@ export { useForwardRef } from './useForwardRef'
 export { useGraceArea } from './useGraceArea'
 export { useHideOthers } from './useHideOthers'
 export { useId } from './useId'
+export { useLocale } from './useLocale'
 export { useSize } from './useSize'
 export { useStateMachine } from './useStateMachine'
 export { useTypeahead } from './useTypeahead'

packages/radix-vue/src/shared/useLocale.ts

@@ -0,0 +1,9 @@
+import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
+import { type Ref, computed, ref } from 'vue'
+
+export function useLocale(locale?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({
+    locale: ref('en'),
+  })
+  return computed(() => locale?.value || context.locale?.value || 'en')
+}