feat: Part options support $d

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

@@ -1111,13 +1111,19 @@ export interface ComposerDateTimeFormatting<
    *
    * @returns Formatted value
    */
-  <Value extends number | Date | string = number, Key extends string = string>(
+  <
+    Value extends number | Date | string = number,
+    Key extends string = string,
+    Return extends string | Intl.DateTimeFormatPart[] =
+      | string
+      | Intl.DateTimeFormatPart[]
+  >(
     value: Value,
     keyOrOptions:
       | Key
       | ResourceKeys
       | DateTimeOptions<Key | ResourceKeys, Locales>
-  ): string
+  ): Return
   /**
    * Datetime formatting
    *
@@ -1132,14 +1138,20 @@ export interface ComposerDateTimeFormatting<
    *
    * @returns Formatted value
    */
-  <Value extends number | Date | string = number, Key extends string = string>(
+  <
+    Value extends number | Date | string = number,
+    Key extends string = string,
+    Return extends string | Intl.DateTimeFormatPart[] =
+      | string
+      | Intl.DateTimeFormatPart[]
+  >(
     value: Value,
     keyOrOptions:
       | Key
       | ResourceKeys
       | DateTimeOptions<Key | ResourceKeys, Locales>,
     locale: Locales
-  ): string
+  ): Return
 }
 
 /**
@@ -2288,14 +2300,17 @@ export function createComposer(options: any = {}): any {
   }
 
   // d
-  function d(...args: unknown[]): string {
-    return wrapWithDeps<{}, string>(
-      context => Reflect.apply(datetime, null, [context, ...args]) as string,
+  function d(...args: unknown[]): string | Intl.DateTimeFormatPart[] {
+    return wrapWithDeps<{}, string | Intl.DateTimeFormatPart[]>(
+      context =>
+        Reflect.apply(datetime, null, [context, ...args]) as
+          | string
+          | Intl.DateTimeFormatPart[],
       () => parseDateTimeArgs(...args),
       'datetime format',
       root => Reflect.apply(root.d, root, [...args]),
       () => MISSING_RESOLVE_VALUE,
-      val => isString(val)
+      val => isString(val) || isArray(val)
     )
   }
 

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

@@ -344,13 +344,23 @@ test('strict composer with direct options', () => {
   }>()
   expectTypeOf(strictDirectComposer.d(new Date())).toEqualTypeOf<string>()
   expectTypeOf(
-    strictDirectComposer.d(new Date(), 'short', 'ja-JP')
+    strictDirectComposer.d<Date, string, string>(new Date(), 'short', 'ja-JP')
   ).toEqualTypeOf<string>()
   expectTypeOf(
     strictDirectComposer.d(new Date(), { key: 'short', locale: 'zh' })
-  ).toEqualTypeOf<string>()
+  ).toEqualTypeOf<string | Intl.DateTimeFormatPart[]>()
+  expectTypeOf(
+    strictDirectComposer.d<Date, string, Intl.DateTimeFormatPart[]>(
+      new Date(),
+      {
+        key: 'short',
+        locale: 'zh',
+        part: true
+      }
+    )
+  ).toEqualTypeOf<Intl.DateTimeFormatPart[]>()
   expectTypeOf(
-    strictDirectComposer.d(new Date(), 'custom' as any)
+    strictDirectComposer.d<Date, string, string>(new Date(), 'custom' as any)
   ).toEqualTypeOf<string>()
   expectTypeOf(strictDirectComposer.n(1)).toEqualTypeOf<string>()
   expectTypeOf(strictDirectComposer.n(1, 'currency', 'zh')).toEqualTypeOf<

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

@@ -1058,6 +1058,83 @@ describe('d', () => {
       '12/20/2012, 07:00 AM'
     )
   })
+
+  test('parts formatting', () => {
+    const { d } = createComposer({
+      locale: 'en-US',
+      datetimeFormats: {
+        'en-US': {
+          short: {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            timeZone: 'America/New_York'
+          }
+        },
+        'ja-JP': {
+          long: {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            timeZone: 'America/New_York'
+          },
+          short: {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            timeZone: 'Asia/Tokyo'
+          }
+        }
+      }
+    })
+    const dt = new Date(2015, 12)
+    expect(d(dt, { key: 'short', part: true, year: '2-digit' })).toEqual([
+      { type: 'month', value: '12' },
+      { type: 'literal', value: '/' },
+      { type: 'day', value: '31' },
+      { type: 'literal', value: '/' },
+      { type: 'year', value: '15' },
+      { type: 'literal', value: ', ' },
+      { type: 'hour', value: '07' },
+      { type: 'literal', value: ':' },
+      { type: 'minute', value: '00' },
+      { type: 'literal', value: ' ' },
+      { type: 'dayPeriod', value: 'PM' }
+    ])
+    expect(d(dt, { key: 'short', locale: 'en-US', part: true })).toEqual([
+      { type: 'month', value: '12' },
+      { type: 'literal', value: '/' },
+      { type: 'day', value: '31' },
+      { type: 'literal', value: '/' },
+      { type: 'year', value: '2015' },
+      { type: 'literal', value: ', ' },
+      { type: 'hour', value: '07' },
+      { type: 'literal', value: ':' },
+      { type: 'minute', value: '00' },
+      { type: 'literal', value: ' ' },
+      { type: 'dayPeriod', value: 'PM' }
+    ])
+    expect(d(dt, { key: 'long', locale: 'ja-JP', part: true })).toEqual([
+      { type: 'year', value: '2015' },
+      { type: 'literal', value: '/' },
+      { type: 'month', value: '12' },
+      { type: 'literal', value: '/' },
+      { type: 'day', value: '31' },
+      { type: 'literal', value: ' ' },
+      { type: 'hour', value: '19' },
+      { type: 'literal', value: ':' },
+      { type: 'minute', value: '00' },
+      { type: 'literal', value: ':' },
+      { type: 'second', value: '00' }
+    ])
+  })
 })
 
 describe('n', () => {

packages/vue-i18n/src/vue.d.ts

@@ -600,8 +600,11 @@ declare module 'vue' {
      * @returns formatted value
      */
     $d<
-      Value extends number | Date | string = number,
+      Value extends number | Date = number,
       Key extends string = string,
+      Return extends string | Intl.DateTimeFormatPart[] =
+        | string
+        | Intl.DateTimeFormatPart[],
       DefinedDateTimeFormat extends
         RemovedIndexResources<DefineDateTimeFormat> = RemovedIndexResources<DefineDateTimeFormat>,
       Keys = IsEmptyObject<DefinedDateTimeFormat> extends false
@@ -614,7 +617,7 @@ declare module 'vue' {
       value: Value,
       options: DateTimeOptions<Key | ResourceKeys>,
       locale: Locale
-    ): string
+    ): Return
     /**
      * Number formatting
      *