From 3bb2508078f730b3e17d5675eb34cce656210dc7 Mon Sep 17 00:00:00 2001 From: daryl Date: Tue, 20 Mar 2018 22:14:15 +0900 Subject: [PATCH 1/3] Add way for user to specify a min and max length of a tag --- src/BetterInputTag.vue | 19 ++++++++++++++- test/BetterInputTag.spec.js | 48 +++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+), 1 deletion(-) 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) + }) + }) }) From 362011b3c0603241cba1528cb952a48e5d0014bb Mon Sep 17 00:00:00 2001 From: daryl Date: Wed, 21 Mar 2018 15:36:07 +0900 Subject: [PATCH 2/3] Update documentation --- docs/App.vue | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) 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 }} From f47e65d0d968d55a3b67c971bc2fdcff35d3d996 Mon Sep 17 00:00:00 2001 From: daryl Date: Wed, 21 Mar 2018 15:42:36 +0900 Subject: [PATCH 3/3] Update readme --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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) ❤️**