fix: number & datetime format options (#1017)

closes #992

Author: kazupon

packages/core-base/src/datetime.ts

@@ -62,9 +62,9 @@ import type { CoreContext, CoreInternalContext } from './context'
  *    datetime(context, value, { key: 'short', part: true })
  *
  *    // orverride context.datetimeFormats[locale] options with functino options
- *    datetime(cnotext, value, 'short', { currency: 'EUR' })
- *    datetime(cnotext, value, 'short', 'ja-JP', { currency: 'EUR' })
- *    datetime(context, value, { key: 'short', part: true }, { currency: 'EUR'})
+ *    datetime(cnotext, value, 'short', { year: '2-digit' })
+ *    datetime(cnotext, value, 'short', 'ja-JP', { year: '2-digit' })
+ *    datetime(context, value, { key: 'short', part: true, year: '2-digit' })
  */
 
 /**
@@ -75,7 +75,8 @@ import type { CoreContext, CoreInternalContext } from './context'
  *
  * @VueI18nGeneral
  */
-export interface DateTimeOptions<Key = string, Locales = Locale> {
+export interface DateTimeOptions<Key = string, Locales = Locale>
+  extends Intl.DateTimeFormatOptions {
   /**
    * @remarks
    * The target format key
@@ -295,12 +296,35 @@ export function datetime<
   return !part ? formatter.format(value) : formatter.formatToParts(value)
 }
 
+const DATETIME_FORMAT_OPTIONS_KEYS = [
+  'localeMatcher',
+  'weekday',
+  'era',
+  'year',
+  'month',
+  'day',
+  'hour',
+  'minute',
+  'second',
+  'timeZoneName',
+  'formatMatcher',
+  'hour12',
+  'timeZone',
+  'dateStyle',
+  'timeStyle',
+  'calendar',
+  'dayPeriod',
+  'numberingSystem',
+  'hourCycle',
+  'fractionalSecondDigits'
+]
+
 /** @internal */
 export function parseDateTimeArgs(
   ...args: unknown[]
 ): [string, number | Date, DateTimeOptions, Intl.DateTimeFormatOptions] {
   const [arg1, arg2, arg3, arg4] = args
-  let options = {} as DateTimeOptions
+  const options = {} as DateTimeOptions
   let overrides = {} as Intl.DateTimeFormatOptions
 
   let value: number | Date
@@ -340,7 +364,15 @@ export function parseDateTimeArgs(
   if (isString(arg2)) {
     options.key = arg2
   } else if (isPlainObject(arg2)) {
-    options = arg2
+    Object.keys(arg2).forEach(key => {
+      if (DATETIME_FORMAT_OPTIONS_KEYS.includes(key)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(overrides as any)[key] = (arg2 as any)[key]
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(options as any)[key] = (arg2 as any)[key]
+      }
+    })
   }
 
   if (isString(arg3)) {

packages/core-base/src/number.ts

@@ -62,7 +62,7 @@ import type { CoreContext, CoreInternalContext } from './context'
  *    // orverride context.numberFormats[locale] options with functino options
  *    number(cnotext, value, 'currency', { year: '2-digit' })
  *    number(cnotext, value, 'currency', 'ja-JP', { year: '2-digit' })
- *    number(context, value, { key: 'currenty', part: true }, { year: '2-digit'})
+ *    number(context, value, { key: 'currenty', locale: 'ja-JP', part: true, year: '2-digit'})
  */
 
 /**
@@ -73,7 +73,8 @@ import type { CoreContext, CoreInternalContext } from './context'
  *
  * @VueI18nGeneral
  */
-export interface NumberOptions<Key = string, Locales = Locale> {
+export interface NumberOptions<Key = string, Locales = Locale>
+  extends Intl.NumberFormatOptions {
   /**
    * @remarks
    * The target format key
@@ -290,12 +291,31 @@ export function number<
   return !part ? formatter.format(value) : formatter.formatToParts(value)
 }
 
+const NUMBER_FORMAT_OPTIONS_KEYS = [
+  'localeMatcher',
+  'style',
+  'currency',
+  'currencyDisplay',
+  'currencySign',
+  'useGrouping',
+  'minimumIntegerDigits',
+  'minimumFractionDigits',
+  'maximumFractionDigits',
+  'minimumSignificantDigits',
+  'maximumSignificantDigits',
+  'compactDisplay',
+  'notation',
+  'signDisplay',
+  'unit',
+  'unitDisplay'
+]
+
 /** @internal */
 export function parseNumberArgs(
   ...args: unknown[]
 ): [string, number, NumberOptions, Intl.NumberFormatOptions] {
   const [arg1, arg2, arg3, arg4] = args
-  let options = {} as NumberOptions
+  const options = {} as NumberOptions
   let overrides = {} as Intl.NumberFormatOptions
 
   if (!isNumber(arg1)) {
@@ -306,7 +326,15 @@ export function parseNumberArgs(
   if (isString(arg2)) {
     options.key = arg2
   } else if (isPlainObject(arg2)) {
-    options = arg2
+    Object.keys(arg2).forEach(key => {
+      if (NUMBER_FORMAT_OPTIONS_KEYS.includes(key)) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(overrides as any)[key] = (arg2 as any)[key]
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ;(options as any)[key] = (arg2 as any)[key]
+      }
+    })
   }
 
   if (isString(arg3)) {

packages/core-base/test/datetime.test.ts

@@ -188,6 +188,9 @@ test('override format options with number function options', () => {
   expect(
     datetime(ctx, dt, { key: 'short', locale: 'ja-JP' }, { year: '2-digit' })
   ).toEqual('12/12/20 12:00')
+  expect(
+    datetime(ctx, dt, { key: 'short', locale: 'ja-JP', year: '2-digit' })
+  ).toEqual('12/12/20 12:00')
 })
 
 test('fallback', () => {

packages/core-base/test/number.test.ts

@@ -155,6 +155,9 @@ test('override format options with number function options', () => {
       { currency: 'EUR' }
     )
   ).toEqual('€10,100.00')
+  expect(
+    number(ctx, 10100, { key: 'currency', locale: 'ja-JP', currency: 'EUR' })
+  ).toEqual('€10,100.00')
 })
 
 test('fallback', () => {

packages/vue-i18n-core/test/composer.test.ts

@@ -801,6 +801,9 @@ describe('d', () => {
     expect(d(dt, { key: 'long', fallbackWarn: false })).toEqual(
       '2012/12/20 12:00:00'
     )
+    expect(d(dt, { key: 'short', locale: 'ja-JP', year: '2-digit' })).toEqual(
+      '12/12/20 12:00'
+    )
   })
 
   test('missing', () => {
@@ -871,6 +874,10 @@ describe('n', () => {
       }
     })
     expect(n(0.99, { key: 'percent', fallbackWarn: false })).toEqual('99%')
+    // overrides
+    expect(
+      n(10100, { key: 'currency', locale: 'ja-JP', currency: 'EUR' })
+    ).toEqual('€10,100.00')
   })
 
   test('minimumFractionDigits, maximumFractionDigits', () => {