refactor(comp:locales): use useGlobalConfig instead of useI18n (#764)

BREAKING CHANGE: `useI18n` was removed.

.ls-lint.yml

@@ -27,5 +27,5 @@ ignore:
   - packages/pro/node_modules
   - packages/site/node_modules
   - packages/cdk/forms/src/messages
-  - packages/components/i18n/src/locales
+  - packages/components/locales/src/langs
   - packages/site/components.d.ts

packages/components/_private/date-panel/src/DatePanel.tsx

@@ -8,7 +8,6 @@
 import { computed, defineComponent, provide } from 'vue'
 
 import { useDateConfig, useGlobalConfig } from '@idux/components/config'
-import { getLocale } from '@idux/components/i18n'
 
 import { useActiveDate } from './composables/useActiveDate'
 import { useActiveType } from './composables/useActiveType'
@@ -21,8 +20,8 @@ import { datePanelProps } from './types'
 export default defineComponent({
   props: datePanelProps,
   setup(props, { slots }) {
-    const locale = getLocale('datePicker')
     const common = useGlobalConfig('common')
+    const locale = useGlobalConfig('locale')
     const mergedPrefixCls = computed(() => `${common.prefixCls}-date-panel`)
     const dateConfig = useDateConfig()
     const { activeType, setActiveType } = useActiveType(props)

packages/components/_private/date-panel/src/panel-header/PanelHeader.tsx

@@ -7,7 +7,7 @@
 
 import type { DatePanelType } from '../types'
 import type { DateConfig } from '@idux/components/config'
-import type { DatePickerLocale } from '@idux/components/i18n'
+import type { Locale } from '@idux/components/locales'
 import type { ComputedRef } from 'vue'
 
 import { computed, defineComponent, inject } from 'vue'
@@ -44,7 +44,7 @@ export default defineComponent({
     }
 
     return () => {
-      const { previousDecade, previousYear, previousMonth, nextDecade, nextYear, nextMonth } = locale.value
+      const { previousDecade, previousYear, previousMonth, nextDecade, nextYear, nextMonth } = locale.datePicker
       const currType = activeType.value
       const superPrev = true
       const prev = !hidePrevNextTypes.includes(activeType.value)
@@ -109,7 +109,7 @@ export default defineComponent({
 function useContents(
   activeType: ComputedRef<DatePanelType>,
   activeDate: ComputedRef<Date>,
-  locale: ComputedRef<DatePickerLocale>,
+  locale: Locale,
   dateConfig: DateConfig,
   setActiveType: (type: DatePanelType) => void,
 ) {
@@ -120,7 +120,7 @@ function useContents(
   return computed(() => {
     const currType = activeType.value
     const currDate = activeDate.value
-    const { yearSelect, monthSelect, yearFormat, monthFormat } = locale.value
+    const { yearSelect, monthSelect, yearFormat, monthFormat } = locale.datePicker
     const { format, get } = dateConfig
     switch (currType) {
       case 'date':

packages/components/_private/date-panel/src/token.ts

@@ -12,13 +12,13 @@ import type { ActiveTypeContext } from './composables/useActiveType'
 import type { MaxIndexContext } from './composables/useMaxIndex'
 import type { DatePanelProps } from './types'
 import type { DateConfig } from '@idux/components/config'
-import type { DatePickerLocale } from '@idux/components/i18n'
+import type { Locale } from '@idux/components/locales'
 import type { ComputedRef, InjectionKey, Slots } from 'vue'
 
 export interface DatePanelContext extends ActiveTypeContext, ActiveDateContext, MaxIndexContext {
   props: DatePanelProps
   slots: Slots
-  locale: ComputedRef<DatePickerLocale>
+  locale: Locale
   mergedPrefixCls: ComputedRef<string>
   dateConfig: DateConfig
 }

packages/components/config/src/dateConfig.ts

@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { InjectionKey, inject } from 'vue'
+import { type InjectionKey, inject } from 'vue'
 
 import { isNil, isString } from 'lodash-es'
 
@@ -57,7 +57,7 @@ import {
   toDate,
 } from 'date-fns'
 
-import { getLocale } from '@idux/components/i18n'
+import { useGlobalConfig } from './globalConfig'
 
 export type TimeConfigType = 'hour' | 'minute' | 'second'
 export type DateConfigType = 'year' | 'quarter' | 'month' | 'week' | 'date' | 'day'
@@ -101,12 +101,12 @@ export function useDateConfig(): DateConfig<number | Date, Date> {
 }
 
 function createDefaultDateConfig(): DateConfig<number | Date, Date> {
-  const locale = getLocale('date')
+  const locale = useGlobalConfig('locale')
   const now = () => new Date()
-  const parse = (dateString: string, format: string) => parseDate(dateString, format, now(), { locale: locale.value })
+  const parse = (dateString: string, format: string) => parseDate(dateString, format, now(), { locale: locale.date })
   return {
     now,
-    weekStartsOn: () => locale.value.options?.weekStartsOn || 1,
+    weekStartsOn: () => locale.date.options?.weekStartsOn || 1,
     get: (date, type) => {
       switch (type) {
         case 'year':
@@ -116,7 +116,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
         case 'month':
           return getMonth(date)
         case 'week':
-          return getWeek(date, { locale: locale.value })
+          return getWeek(date, { locale: locale.date })
         case 'date':
           return getDate(date)
         case 'day':
@@ -138,11 +138,11 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
         case 'month':
           return setMonth(date, amount)
         case 'week':
-          return setWeek(date, amount, { locale: locale.value })
+          return setWeek(date, amount, { locale: locale.date })
         case 'date':
           return setDate(date, amount)
         case 'day':
-          return setDay(date, amount, { locale: locale.value })
+          return setDay(date, amount, { locale: locale.date })
         case 'hour':
           return setHours(date, amount)
         case 'minute':
@@ -175,7 +175,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
         case 'month':
           return startOfMonth(date)
         case 'week':
-          return startOfWeek(date, { locale: locale.value })
+          return startOfWeek(date, { locale: locale.date })
         case 'date':
         case 'day':
           return startOfDay(date)
@@ -190,7 +190,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
         case 'month':
           return endOfMonth(date)
         case 'week':
-          return endOfWeek(date, { locale: locale.value })
+          return endOfWeek(date, { locale: locale.date })
         case 'date':
         case 'day':
           return endOfDay(date)
@@ -206,7 +206,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
         case 'month':
           return isSameMonth(date, dateToCompare)
         case 'week':
-          return isSameWeek(date, dateToCompare, { locale: locale.value })
+          return isSameWeek(date, dateToCompare, { locale: locale.date })
         case 'date':
         case 'day':
           return isSameDay(date, dateToCompare)
@@ -220,7 +220,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
     },
     isValid: date => isValid(date),
 
-    format: (date, format) => formatDate(date, format, { locale: locale.value }),
+    format: (date, format) => formatDate(date, format, { locale: locale.date }),
     parse: parse,
     convert: (date, format) => {
       if (isNil(date)) {
@@ -229,7 +229,7 @@ function createDefaultDateConfig(): DateConfig<number | Date, Date> {
       return isString(date) ? parse(date, format!) : toDate(date as number | Date)
     },
     getLocalizedLabels: (type, length, width) => {
-      const localize = locale.value.localize!
+      const localize = locale.date.localize!
       switch (type) {
         case 'month':
           return Array.from({ length }).map((_, i) => localize.month(i, { width }))