fix: number and datetime options override formatting (#1056)

Author: kazupon

packages/core-base/src/datetime.ts

@@ -226,7 +226,7 @@ export function datetime<
   )
 
   if (!isString(key) || key === '') {
-    return new Intl.DateTimeFormat(locale).format(value)
+    return new Intl.DateTimeFormat(locale, overrides).format(value)
   }
 
   // resolve format
@@ -296,7 +296,8 @@ export function datetime<
   return !part ? formatter.format(value) : formatter.formatToParts(value)
 }
 
-const DATETIME_FORMAT_OPTIONS_KEYS = [
+/** @internal */
+export const DATETIME_FORMAT_OPTIONS_KEYS = [
   'localeMatcher',
   'weekday',
   'era',

packages/core-base/src/number.ts

@@ -221,7 +221,7 @@ export function number<
   )
 
   if (!isString(key) || key === '') {
-    return new Intl.NumberFormat(locale).format(value)
+    return new Intl.NumberFormat(locale, overrides).format(value)
   }
 
   // resolve format
@@ -291,7 +291,8 @@ export function number<
   return !part ? formatter.format(value) : formatter.formatToParts(value)
 }
 
-const NUMBER_FORMAT_OPTIONS_KEYS = [
+/** @internal */
+export const NUMBER_FORMAT_OPTIONS_KEYS = [
   'localeMatcher',
   'style',
   'currency',
@@ -307,7 +308,11 @@ const NUMBER_FORMAT_OPTIONS_KEYS = [
   'notation',
   'signDisplay',
   'unit',
-  'unitDisplay'
+  'unitDisplay',
+  'roundingMode',
+  'roundingPriority',
+  'roundingIncrement',
+  'trailingZeroDisplay'
 ]
 
 /** @internal */

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

@@ -158,6 +158,13 @@ test('override format options with number function options', () => {
   expect(
     number(ctx, 10100, { key: 'currency', locale: 'ja-JP', currency: 'EUR' })
   ).toEqual('€10,100.00')
+  expect(
+    number(ctx, 123456.789, {
+      style: 'currency',
+      currency: 'USD',
+      signDisplay: 'always'
+    })
+  ).toEqual('+$123,456.79')
 })
 
 test('fallback', () => {

packages/vue-i18n-core/src/components/DatetimeFormat.ts

@@ -3,6 +3,7 @@ import { DatetimePartsSymbol } from '../symbols'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
 import { assign } from '@intlify/shared'
+import { DATETIME_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 
 /* eslint-enable @typescript-eslint/no-unused-vars */
 import type { DateTimeOptions } from '@intlify/core-base'
@@ -19,29 +20,6 @@ export type DatetimeFormatProps = FormattableProps<
   Intl.DateTimeFormatOptions
 >
 
-const DATETIME_FORMAT_KEYS = [
-  'dateStyle',
-  'timeStyle',
-  'fractionalSecondDigits',
-  'calendar',
-  'dayPeriod',
-  'numberingSystem',
-  'localeMatcher',
-  'timeZone',
-  'hour12',
-  'hourCycle',
-  'formatMatcher',
-  'weekday',
-  'era',
-  'year',
-  'month',
-  'day',
-  'hour',
-  'minute',
-  'second',
-  'timeZoneName'
-]
-
 /**
  * Datetime Format Component
  *
@@ -91,7 +69,7 @@ export const DatetimeFormat = /* #__PURE__*/ /*defineComponent */ {
     >(
       props as DatetimeFormatProps,
       context,
-      DATETIME_FORMAT_KEYS,
+      DATETIME_FORMAT_OPTIONS_KEYS,
       (...args: unknown[]) =>
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (i18n as any)[DatetimePartsSymbol](...args)

packages/vue-i18n-core/src/components/NumberFormat.ts

@@ -3,6 +3,7 @@ import { NumberPartsSymbol } from '../symbols'
 import { renderFormatter } from './formatRenderer'
 import { baseFormatProps } from './base'
 import { assign } from '@intlify/shared'
+import { NUMBER_FORMAT_OPTIONS_KEYS } from '@intlify/core-base'
 
 import type { NumberOptions } from '@intlify/core-base'
 import type { Composer, ComposerInternal } from '../composer'
@@ -18,24 +19,6 @@ export type NumberFormatProps = FormattableProps<
   Intl.NumberFormatOptions
 >
 
-const NUMBER_FORMAT_KEYS = [
-  'localeMatcher',
-  'style',
-  'unit',
-  'unitDisplay',
-  'currency',
-  'currencyDisplay',
-  'useGrouping',
-  'numberingSystem',
-  'minimumIntegerDigits',
-  'minimumFractionDigits',
-  'maximumFractionDigits',
-  'minimumSignificantDigits',
-  'maximumSignificantDigits',
-  'notation',
-  'formatMatcher'
-]
-
 /**
  * Number Format Component
  *
@@ -85,7 +68,7 @@ export const NumberFormat = /* #__PURE__*/ /* defineComponent */ {
     >(
       props as NumberFormatProps,
       context,
-      NUMBER_FORMAT_KEYS,
+      NUMBER_FORMAT_OPTIONS_KEYS,
       (...args: unknown[]) =>
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (i18n as any)[NumberPartsSymbol](...args)

packages/vue-i18n-core/test/__snapshots__/issues.test.ts.snap

@@ -3,3 +3,5 @@
 exports[`issue #968 1`] = `"<div class=\\"col-auto text-h6\\">£</div><div class=\\"col-auto text-h3\\">1</div><div class=\\"col-auto text-subtitle1 self-end text-amber\\">,</div><div class=\\"col-auto text-h3\\">150</div><div class=\\"col-auto text-subtitle1 self-end text-amber\\">,</div><div class=\\"col-auto text-h3\\">001</div><div class=\\"col-auto text-subtitle2 self-end text-primary\\">.</div><div class=\\"col-auto text-subtitle1 self-end text-red\\">20</div>"`;
 
 exports[`issue #1014 1`] = `"<span>Add</span>"`;
+
+exports[`issue #1054, #1053 1`] = `"<p>+$123,456.79</p><span>+$123,456.79</span>"`;

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

@@ -558,3 +558,31 @@ test('issue #1014', async () => {
 
   expect(wrapper.html()).toMatchSnapshot()
 })
+
+test('issue #1054, #1053', async () => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en-US',
+    datetimeFormats: {}
+  })
+  const App = defineComponent({
+    setup() {
+      return {
+        amount: 123456.789,
+        format: {
+          style: 'currency',
+          currency: 'USD',
+          signDisplay: 'always'
+        }
+      }
+    },
+    template: `
+    <p>{{ $n(amount, format) }}</p>
+    <i18n-n tag="span" :value="amount" :format="format" scope="global"></i18n-n>
+    `
+  })
+
+  const wrapper = await mount(App, i18n)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})