diff --git a/gitbook/en/messages.md b/gitbook/en/messages.md index a3d6fc3c8..e4ddcfbce 100644 --- a/gitbook/en/messages.md +++ b/gitbook/en/messages.md @@ -103,6 +103,43 @@ Output the below:
DIO: the world !!!!
``` +### Formatting linked locale messages + +If the language distinguish cases of character, you may need control the case of the linked locale messages. +Linked messages can be formatted with modifier `@.MODIFIER:key` + +The below modifiers are available currently. + +* `upper`: Uppercase all characters in the linked message. +* `lower`: Lowercase all characters in the linked message. + +Locale messages the below: + +```javascript +const messages = { + en: { + message: { + homeAddress: 'Home address', + missingHomeAddress: 'Please provide @.lower:message.homeAddress' + } + } +} +``` + +```html + + +{{ $t('message.missingHomeAddress') }}
+``` + +Output the below: + +```html + + +Please provide home address
+``` + ### Grouping by brackets A translation key of linked locale message can also have the form of `@:(message.foo.bar.baz)` in which the link to another translation key is within brackets `()`. @@ -132,4 +169,4 @@ Output the below: ```htmlThere's a reason, you lost, DIO.
-``` +``` \ No newline at end of file diff --git a/src/index.js b/src/index.js index 891c39104..7888cb26b 100644 --- a/src/index.js +++ b/src/index.js @@ -31,8 +31,13 @@ const numberFormatKeys = [ 'localeMatcher', 'formatMatcher' ] -const linkKeyMatcher = /(?:@:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g +const linkKeyMatcher = /(?:@(?:\.[a-z]+)?:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g +const linkKeyPrefixMatcher = /^@(?:\.([a-z]+))?:/ const bracketsMatcher = /[()]/g +const formatters = { + 'upper': (str) => str.toLocaleUpperCase(), + 'lower': (str) => str.toLocaleLowerCase() +} export default class VueI18n { static install: () => void @@ -234,7 +239,7 @@ export default class VueI18n { } // Check for the existence of links within the translated string - if (ret.indexOf('@:') >= 0) { + if (ret.indexOf('@:') >= 0 || ret.indexOf('@.') >= 0) { ret = this._link(locale, message, ret, host, interpolateMode, values, visitedLinkStack) } @@ -263,8 +268,11 @@ export default class VueI18n { continue } const link: string = matches[idx] - // Remove the leading @: and the brackets - const linkPlaceholder: string = link.substr(2).replace(bracketsMatcher, '') + const linkKeyPrefixMatches: any = link.match(linkKeyPrefixMatcher) + const [linkPrefix, formatterName] = linkKeyPrefixMatches + + // Remove the leading @:, @.case: and the brackets + const linkPlaceholder: string = link.replace(linkPrefix, '').replace(bracketsMatcher, '') if (visitedLinkStack.includes(linkPlaceholder)) { if (process.env.NODE_ENV !== 'production') { @@ -298,6 +306,9 @@ export default class VueI18n { locale, linkPlaceholder, translated, host, Array.isArray(values) ? values : [values] ) + if (formatters.hasOwnProperty(formatterName)) { + translated = formatters[formatterName](translated) + } visitedLinkStack.pop() diff --git a/test/unit/basic.test.js b/test/unit/basic.test.js index 7342d84fa..d03119762 100644 --- a/test/unit/basic.test.js +++ b/test/unit/basic.test.js @@ -29,30 +29,34 @@ describe('basic', () => { it('should translate simple link', () => { assert.equal(i18n.t('message.link'), messages.en.message.hello) }) - }) - describe('linked translation', () => { it('should translate link at the end of locale', () => { assert.equal(i18n.t('message.linkEnd'), 'This is a linked translation to the world') }) - }) - describe('linked translation', () => { it('should translate link within a locale', () => { assert.equal(i18n.t('message.linkWithin'), 'Isn\'t the world we live in great?') }) - }) - describe('linked translation', () => { it('should translate multiple links within a locale', () => { assert.equal(i18n.t('message.linkMultiple'), 'Hello hoge!, isn\'t the world great?') }) - }) - describe('linked translation', () => { it('should translate link with braces ', () => { assert.strictEqual(i18n.t('message.linkBrackets'), 'Hello hoge. Isn\'t the world great?') }) + + it('should translate link with lower-case formatting', () => { + assert.strictEqual(i18n.t('message.linkCaseLower'), 'Please provide home address') + }) + + it('should translate link with upper-case formatting', () => { + assert.strictEqual(i18n.t('message.linkCaseUpper'), 'HOME ADDRESS') + }) + + it('should translate link without formatting if modifier is not known.', () => { + assert.strictEqual(i18n.t('message.linkCaseUnknown'), 'Home address') + }) }) describe('ja locale', () => { diff --git a/test/unit/fixture/index.js b/test/unit/fixture/index.js index 986e1de07..6e12dc185 100644 --- a/test/unit/fixture/index.js +++ b/test/unit/fixture/index.js @@ -17,6 +17,10 @@ export default { linkHyphen: '@:hyphen-hello', linkUnderscore: '@:underscore_hello', linkList: '@:message.hello: {0} {1}', + linkCaseLower: 'Please provide @.lower:message.homeAddress', + linkCaseUpper: '@.upper:message.homeAddress', + linkCaseUnknown: '@.unknown:message.homeAddress', + homeAddress: 'Home address', circular1: 'Foo @:message.circular2', circular2: 'Bar @:message.circular3', circular3: 'Buz @:message.circular1',