From 12fe69553adb015932e8f14249885306e52782cf Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Sun, 8 May 2016 22:52:08 +0900 Subject: [PATCH] :star: new: component locales Closes #29 --- src/extend.js | 63 +++++++++++++++++++++++------------------ test/specs/component.js | 50 ++++++++++++++++++++++++++++++++ test/specs/index.js | 1 + 3 files changed, 86 insertions(+), 28 deletions(-) create mode 100644 test/specs/component.js diff --git a/src/extend.js b/src/extend.js index b8bb7fbf4..b39231835 100644 --- a/src/extend.js +++ b/src/extend.js @@ -12,16 +12,33 @@ import { getValue } from './path' export default function (Vue) { const { isArray, isObject } = Vue.util - function getVal (key, lang, args) { - let value = key - try { - let locale = Vue.locale(lang) - let val = getValue(locale, key) || locale[key] - value = (args ? format(val, args) : val) || key - } catch (e) { - value = key + function parseArgs (...args) { + let lang = Vue.config.lang + if (args.length === 1) { + if (isObject(args[0]) || isArray(args[0])) { + args = args[0] + } else if (typeof args[0] === 'string') { + lang = args[0] + } + } else if (args.length === 2) { + if (typeof args[0] === 'string') { + lang = args[0] + } + if (isObject(args[1]) || isArray(args[1])) { + args = args[1] + } } - return value + + return { lang, params: args } + } + + function translate (locale, key, args) { + if (!locale) { return null } + + let val = getValue(locale, key) || locale[key] + if (!val) { return null } + + return args ? format(val, args) : val } @@ -36,23 +53,8 @@ export default function (Vue) { Vue.t = (key, ...args) => { if (!key) { return '' } - let language = Vue.config.lang - if (args.length === 1) { - if (isObject(args[0]) || isArray(args[0])) { - args = args[0] - } else if (typeof args[0] === 'string') { - language = args[0] - } - } else if (args.length === 2) { - if (typeof args[0] === 'string') { - language = args[0] - } - if (isObject(args[1]) || isArray(args[1])) { - args = args[1] - } - } - - return getVal(key, language, args) + const { lang, params } = parseArgs(...args) + return translate(Vue.locale(lang), key, params) || key } @@ -64,8 +66,13 @@ export default function (Vue) { * @return {String} */ - Vue.prototype.$t = (key, ...args) => { - return Vue.t(key, ...args) + Vue.prototype.$t = function (key, ...args) { + if (!key) { return '' } + + const { lang, params } = parseArgs(...args) + return translate(this.$options.locales && this.$options.locales[lang], key, params) + || translate(Vue.locale(lang), key, params) + || key } return Vue diff --git a/test/specs/component.js b/test/specs/component.js new file mode 100644 index 000000000..83ebf3ceb --- /dev/null +++ b/test/specs/component.js @@ -0,0 +1,50 @@ +import assert from 'power-assert' +import Vue from 'vue' +import locales from './fixture/locales' + + +describe('component locales', () => { + before((done) => { + Object.keys(locales).forEach((lang) => { + Vue.locale(lang, locales[lang]) + }) + Vue.config.lang = 'en' + Vue.nextTick(done) + }) + + let vm + beforeEach((done) => { + vm = new Vue({ + el: document.createElement('div'), + template: '
', + components: { + component1: { + locales: { + en: { + foo: { + bar: { + buz: 'hello world' + } + } + } + } + } + } + }) + vm.$nextTick(done) + }) + + describe('local', () => { + it('should be translated', () => { + const comp1 = vm.$children[0] // component1 + assert(comp1.$t('foo.bar.buz') === 'hello world') + }) + }) + + describe('global', () => { + it('should be translated', () => { + const comp1 = vm.$children[0] // component1 + assert(comp1.$t('message.hello') === 'the world') + }) + }) +}) diff --git a/test/specs/index.js b/test/specs/index.js index 59fb52a3d..a7cf8c02b 100644 --- a/test/specs/index.js +++ b/test/specs/index.js @@ -10,3 +10,4 @@ Vue.use(plugin) require('./i18n') require('./asset') +require('./component')