Add way for user to specify a min and max length of a tag

Author: makeupsomething

src/BetterInputTag.vue

@@ -62,6 +62,10 @@
       onPasteSeparator: {
         type: String,
         default: null
+      },
+      length: {
+        type: Object,
+        default: null
       }
     },
 
@@ -86,7 +90,7 @@
           return
         }
 
-        if (tag && this.tags.indexOf(tag) === -1 && this.validateIfNeeded(tag)) {
+        if (tag && this.tags.indexOf(tag) === -1 && this.validateIfNeeded(tag) && this.validateLengthIfNeeded(tag)) {
           this.tags.push(tag)
           this.tagChange()
         }
@@ -102,6 +106,19 @@
         return true
       },
 
+      validateLengthIfNeeded (tagValue) {
+        if (this.length === null || this.length === undefined) {
+          return true
+        } else if (this.length.min && this.length.max) {
+          return tagValue.length >= this.length.min && tagValue.length <= this.length.max
+        } else if (this.length.min) {
+          return tagValue.length >= this.length.min
+        } else if (this.length.max) {
+          return tagValue.length <= this.length.max
+        }
+        return true
+      },
+
       remove (index) {
         this.tags.splice(index, 1)
         this.tagChange()

test/BetterInputTag.spec.js

@@ -207,4 +207,52 @@ describe('BetterInputTag.vue', () => {
       expect(BetterInputTagISODateOnly.tags.length).toEqual(1)
     })
   })
+
+  describe('validate length of tag', () => {
+    const BetterInputTagMinMaxOnly = new ClonedComponent({
+      propsData: { length: {min: 1, max: 5} }
+    }).$mount()
+
+    it('should only tags with length >= 1 and <= 5 characters', () => {
+      BetterInputTagMinMaxOnly.addNew('foo')
+      BetterInputTagMinMaxOnly.addNew('123')
+      BetterInputTagMinMaxOnly.addNew('mati@tucci.me')
+      BetterInputTagMinMaxOnly.addNew('https://tucci.me')
+      BetterInputTagMinMaxOnly.addNew('2002-04-03')
+
+      expect(BetterInputTagMinMaxOnly.tags.length).toEqual(2)
+    })
+  })
+
+  describe('validate length of tag', () => {
+    const BetterInputTagMinOnly = new ClonedComponent({
+      propsData: { length: {min: 1} }
+    }).$mount()
+
+    it('should only tags with length >= to 1 characters', () => {
+      BetterInputTagMinOnly.addNew('foo')
+      BetterInputTagMinOnly.addNew('123')
+      BetterInputTagMinOnly.addNew('mati@tucci.me')
+      BetterInputTagMinOnly.addNew('https://tucci.me')
+      BetterInputTagMinOnly.addNew('2002-04-03')
+
+      expect(BetterInputTagMinOnly.tags.length).toEqual(5)
+    })
+  })
+
+  describe('validate length of tag', () => {
+    const BetterInputTagMaxOnly = new ClonedComponent({
+      propsData: { length: {max: 7} }
+    }).$mount()
+
+    it('should only tags with length <= 5 characters', () => {
+      BetterInputTagMaxOnly.addNew('foo')
+      BetterInputTagMaxOnly.addNew('123')
+      BetterInputTagMaxOnly.addNew('mati@tucci.me')
+      BetterInputTagMaxOnly.addNew('https://tucci.me')
+      BetterInputTagMaxOnly.addNew('2002-04-03')
+
+      expect(BetterInputTagMaxOnly.tags.length).toEqual(2)
+    })
+  })
 })