diff --git a/README.md b/README.md index 2227691..346f536 100644 --- a/README.md +++ b/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) ❤️** diff --git a/docs/App.vue b/docs/App.vue index 53ef1fe..89ee56a 100644 --- a/docs/App.vue +++ b/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}>` } } @@ -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 }} diff --git a/src/BetterInputTag.vue b/src/BetterInputTag.vue index ad0cba3..374cf24 100644 --- a/src/BetterInputTag.vue +++ b/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() diff --git a/test/BetterInputTag.spec.js b/test/BetterInputTag.spec.js index 029d4f3..b428f87 100644 --- a/test/BetterInputTag.spec.js +++ b/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) + }) + }) })