Merge pull request #31 from makeupsomething/feature/tag-length-validation

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

Author: Kocal

README.md

@@ -35,7 +35,8 @@ import BetterInputTag from 'better-vue-input-tag'
 | on-paste-delimiter | String | "" | During pasting, this delimiter is used to create multiple tags |
 | read-only | Boolean | false | Set input to readonly |
 | on-change | Function | undefined | Callback to get the tags when there is a change |
-| validate | String | "" | Apply certain validator for user input. Choose from `email`, `url`, `text`, `digits` or `isodate`
+| validate | String | "" | Apply certain validator for user input. Choose from `email`, `url`, `text`, `digits` or `isodate` |
+| length | Object | undefined | Set a minimum and/or maximum length for tags `{min: 1, max: 10}` |
 
 **This project was built with [generator-vue-component](https://github.com/ianaya89/generator-vue-component) ❤️**
 

docs/App.vue

@@ -13,7 +13,8 @@
         onPasteSeparator: '',
         tags: ['Jerry', 'Kramer', 'Elaine', 'George'],
         htmlCode: '',
-        validate: ''
+        validate: '',
+        length: {min: null, max: null}
       }
     },
 
@@ -29,6 +30,7 @@
         html += this.tags ? ' :tags="tags"' : ''
         html += this.readOnly ? ' :read-only="true"' : ''
         html += this.validate ? ` validate="${this.validate}"` : ''
+        html += this.length.min || this.length.max ? ` length="{min: ${this.length.min}, max: ${this.length.max}}"` : ''
         return `${html}></input-tag>`
       }
     }
@@ -73,7 +75,8 @@
           :placeholder='placeholder',
           :on-paste-separator='onPasteSeparator',
           :read-only='readOnly',
-          :validate='validate'
+          :validate='validate',
+          :length='length'
         )
 
       h3
@@ -105,6 +108,13 @@
             option(value='digits') Digits
             option(value='isodate') ISO Date
 
+        .form-group
+          p.label min tag length:
+          input(v-model='length.min' type='number')
+          br
+          p.label max tag length:
+          input(v-model='length.max' type='number')
+
         .form-group
           p.label tags:
           code {{ tags }}

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('[email protected]')
+      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('[email protected]')
+      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('[email protected]')
+      BetterInputTagMaxOnly.addNew('https://tucci.me')
+      BetterInputTagMaxOnly.addNew('2002-04-03')
+
+      expect(BetterInputTagMaxOnly.tags.length).toEqual(2)
+    })
+  })
 })