fix datetime and number format fallbacking (#858)

closes #852
kazupon · Apr 25, 2020 · 4ef365e · 4ef365e
1 parent dea111b
commit 4ef365e
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 12 deletions.
diff --git a/src/index.js b/src/index.js
@@ -746,13 +746,20 @@ export default class VueI18n {
     let _locale: Locale = locale
     let formats: DateTimeFormat = dateTimeFormats[_locale]
 
-    // fallback locale
-    if (isNull(formats) || isNull(formats[key])) {
-      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
-        warn(`Fall back to '${fallback}' datetime formats from '${locale}' datetime formats.`)
+    const chain = this._getLocaleChain(locale, fallback)
+    for (let i = 0; i < chain.length; i++) {
+      const current = _locale
+      const step = chain[i]
+      formats = dateTimeFormats[step]
+      _locale = step
+      // fallback locale
+      if (isNull(formats) || isNull(formats[key])) {
+        if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
+          warn(`Fall back to '${step}' datetime formats from '${current}' datetime formats.`)
+        }
+      } else {
+        break
       }
-      _locale = fallback
-      formats = dateTimeFormats[_locale]
     }
 
     if (isNull(formats) || isNull(formats[key])) {
@@ -857,13 +864,20 @@ export default class VueI18n {
     let _locale: Locale = locale
     let formats: NumberFormat = numberFormats[_locale]
 
-    // fallback locale
-    if (isNull(formats) || isNull(formats[key])) {
-      if (process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
-        warn(`Fall back to '${fallback}' number formats from '${locale}' number formats.`)
+    const chain = this._getLocaleChain(locale, fallback)
+    for (let i = 0; i < chain.length; i++) {
+      const current = _locale
+      const step = chain[i]
+      formats = numberFormats[step]
+      _locale = step
+      // fallback locale
+      if (isNull(formats) || isNull(formats[key])) {
+        if (step !== locale && process.env.NODE_ENV !== 'production' && !this._isSilentTranslationWarn(key) && !this._isSilentFallbackWarn(key)) {
+          warn(`Fall back to '${step}' number formats from '${current}' number formats.`)
+        }
+      } else {
+        break
       }
-      _locale = fallback
-      formats = numberFormats[_locale]
     }
 
     if (isNull(formats) || isNull(formats[key])) {

diff --git a/test/unit/datetime.test.js b/test/unit/datetime.test.js
@@ -66,4 +66,34 @@ desc('datetime format', () => {
       assert.deepEqual(foo, i18n.getDateTimeFormat('en-US').foo)
     })
   })
+
+  describe('fallback', () => {
+    it('should be fallbacked', done => {
+      const i18n = new VueI18n({
+        locale: 'en-uk',
+        fallbackLocale: ['de', 'en-us'],
+        dateTimeFormats: {
+          de: {
+            short: { day: '2-digit', month: '2-digit', year: '2-digit' }
+          }
+        }
+      })
+      const el = document.createElement('div')
+      document.body.appendChild(el)
+
+      const dt = new Date(Date.UTC(2012, 11, 20, 3, 0, 0))
+      const vm = new Vue({
+        i18n,
+        render (h) {
+          return h('p', { ref: 'text' }, [this.$d(dt, 'short')])
+        }
+      }).$mount(el)
+
+      const { text } = vm.$refs
+
+      nextTick(() => {
+        assert.strictEqual(text.textContent, '20.12.12')
+      }).then(done)
+    })
+  })
 })
diff --git a/test/unit/number.test.js b/test/unit/number.test.js
@@ -72,4 +72,39 @@ desc('number format', () => {
       assert.deepEqual(percent, i18n.getNumberFormat('en-US').percent)
     })
   })
+
+  describe('fallback', () => {
+    it('should be fallback', done => {
+      const i18n = new VueI18n({
+        locale: 'en-uk',
+        fallbackLocale: ['de', 'en-us'],
+        numberFormats: {
+          de: {
+            currency: {
+              currency: 'EUR',
+              style: 'currency',
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2
+            }
+          }
+        }
+      })
+      const el = document.createElement('div')
+      document.body.appendChild(el)
+
+      const money = 101
+      const vm = new Vue({
+        i18n,
+        render (h) {
+          return h('p', { ref: 'text' }, [this.$n(money, 'currency')])
+        }
+      }).$mount(el)
+
+      const { text } = vm.$refs
+
+      nextTick(() => {
+        assert.strictEqual(text.textContent, '101,00 €')
+      }).then(done)
+    })
+  })
 })