⭐ new(directive): Add pluralization feature to directive (kazupon#304)…

… by @SirLamer

* Add "choice" quantity support to v-t directive

* Add unit tests

* Revert dist changes

src/directive.js

@@ -39,7 +39,7 @@ function localeEqual (el: any, vnode: any): boolean {
 function t (el: any, binding: Object, vnode: any): void {
   const value: any = binding.value
 
-  const { path, locale, args } = parseValue(value)
+  const { path, locale, args, choice } = parseValue(value)
   if (!path && !locale && !args) {
     warn('not support value type')
     return
@@ -51,24 +51,30 @@ function t (el: any, binding: Object, vnode: any): void {
   }
 
   const vm: any = vnode.context
-  el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))
+  if (choice) {
+    el._vt = el.textContent = vm.$i18n.tc(path, choice, ...makeParams(locale, args))
+  } else {
+    el._vt = el.textContent = vm.$i18n.t(path, ...makeParams(locale, args))
+  }
   el._locale = vm.$i18n.locale
 }
 
 function parseValue (value: any): Object {
   let path: ?string
   let locale: ?Locale
   let args: any
+  let choice: ?number
 
   if (typeof value === 'string') {
     path = value
   } else if (isPlainObject(value)) {
     path = value.path
     locale = value.locale
     args = value.args
+    choice = value.choice
   }
 
-  return { path, locale, args }
+  return { path, locale, args, choice }
 }
 
 function makeParams (locale: Locale, args: any): Array<any> {

test/unit/directive.test.js

@@ -157,5 +157,47 @@ describe('custom directive', () => {
         }).then(done)
       })
     })
+
+    describe('pluralize', () => {
+      it('should be singular', done => {
+        const vm = createVM({
+          i18n,
+          render (h) {
+            // <p ref="text" v-t="{path: 'plurals.car', choice: 1}"></p>
+            return h('p', { ref: 'text', directives: [{
+              name: 't', rawName: 'v-t', value: ({ path: 'plurals.car', choice: 1 }), expression: { path: 'plurals.car', choice: 1 }
+            }] })
+          }
+        })
+        nextTick(() => {
+          assert.equal(vm.$refs.text.textContent, 'car')
+          assert.equal(vm.$refs.text._vt, 'car')
+          vm.$forceUpdate()
+        }).then(() => {
+          assert.equal(vm.$refs.text.textContent, 'car')
+          assert.equal(vm.$refs.text._vt, 'car')
+        }).then(done)
+      })
+
+      it('should be plural', done => {
+        const vm = createVM({
+          i18n,
+          render (h) {
+            // <p ref="text" v-t="{path: 'plurals.car', choice: 2}"></p>
+            return h('p', { ref: 'text', directives: [{
+              name: 't', rawName: 'v-t', value: ({ path: 'plurals.car', choice: 2 }), expression: { path: 'plurals.car', choice: 2 }
+            }] })
+          }
+        })
+        nextTick(() => {
+          assert.equal(vm.$refs.text.textContent, 'cars')
+          assert.equal(vm.$refs.text._vt, 'cars')
+          vm.$forceUpdate()
+        }).then(() => {
+          assert.equal(vm.$refs.text.textContent, 'cars')
+          assert.equal(vm.$refs.text._vt, 'cars')
+        }).then(done)
+      })
+    })
   })
 })