Skip to content

Commit e42957e

Browse files
author
Damian Dulisz
committed
Introduce maximum options one can select
1 parent 829961e commit e42957e

18 files changed

+203
-113
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -394,6 +394,15 @@ props: {
394394
tagPlaceholder: {
395395
type: String,
396396
default: 'Press enter to create a tag'
397+
},
398+
/**
399+
* Number of allowed selected options. No limit if false.
400+
* @default False
401+
* @type {Number}
402+
*/
403+
max: {
404+
type: Number,
405+
default: false
397406
}
398407
}
399408

‎docs/App.vue‎

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ div
1717
:selected="selected",
1818
:multiple="multiple",
1919
:searchable="searchable",
20-
:placeholder="placeholder",
20+
placeholder="Select option",
2121
:on-change="afterChange",
2222
:show-labels="true",
2323
:limit="3",
@@ -371,7 +371,7 @@ div
371371
hr.typo__hr
372372

373373
h2.typo__h2 Custom configuration
374-
p.typo__p Can’t remove the last value.
374+
p.typo__p Can’t remove the last value and only allow up to 5 selected options.
375375
p.typo__p Hides already selected options.
376376
p.typo__p Shows error when touched, but nothing is selected.
377377
.grid__row
@@ -386,25 +386,47 @@ div
386386
:allow-empty="false",
387387
:hide-selected="true",
388388
:touched.sync="isTouched",
389-
:max-height="400"
389+
:max-height="400",
390+
:max="5"
390391
placeholder="Pick at least one"
391392
)
392393

393394
.grid__column.grid__unit--md-7
394395
label.typo__label Code sample
395396
pre.language-jade
396397
code.
397-
multiselect(
398-
:options="options",
399-
:selected.sync="exampleValue6",
400-
:multiple="true",
401-
:searchable="true",
402-
:allow-empty="false",
403-
:hide-selected="true",
404-
:touched.sync="isTouched",
405-
:max-height="400"
406-
placeholder="Pick at least one"
407-
)
398+
// Template
399+
div(:class="{ 'invalid': isInvalid }")
400+
label.typo__label Must have at least one value
401+
multiselect(
402+
:options="options",
403+
:selected.sync="exampleValue6",
404+
:multiple="true",
405+
:searchable="true",
406+
:allow-empty="false",
407+
:hide-selected="true",
408+
:touched.sync="isTouched",
409+
:max-height="400",
410+
:max="5"
411+
placeholder="Pick at least one"
412+
)
413+
414+
// Script
415+
computed: {
416+
isInvalid () {
417+
return this.isTouched && this.exampleValue6.length === 0
418+
}
419+
}
420+
421+
// Styles
422+
.invalid {
423+
.typo__label {
424+
color: $error-color;
425+
}
426+
.multiselect__tags {
427+
border-color: $error-color !important;
428+
}
429+
}
408430

409431
hr.typo__hr
410432

@@ -612,6 +634,15 @@ div
612634
tagPlaceholder: {
613635
type: String,
614636
default: 'Press enter to create a tag'
637+
},
638+
/**
639+
* Number of allowed selected options. No limit if false.
640+
* @default False
641+
* @type {Number}
642+
*/
643+
max: {
644+
type: Number,
645+
default: false
615646
}
616647
}
617648

‎gh-pages/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue-Multiselect | A Vue.js library</title><link rel=icon href=static/vue-logo.png type=image/x-icon><meta name=description content="Probably the most complete selecting solution for Vue.js, without jQuery."><meta property=og:title content="Vue-Multiselect | A Vue.js library."><meta property=og:site_name content="Vue-Multiselect | A Vue.js library."><meta property=og:url content=http://monterail.github.io/vue-multiselect><meta property=og:description content="Probably the most complete selecting solution for Vue.js, without jQuery."><meta property=og:image content=http://monterail.github.io/vue-multiselect/static/vue-logo.png><meta property=twitter:image content=http://monterail.github.io/vue-multiselect/static/vue-logo.png><meta property=twitter:title content="Vue-Multiselect | A Vue.js library."><meta property=twitter:description content="Probably the most complete selecting solution for Vue.js, without jQuery."><link href=static/css/app.d4ff647754fd1cb93f4599eec2601557.css rel=stylesheet></head><body><app></app><section class=utils--center><hr class=typo__hr><h4 class=typo__h4>Created by Damian Dulisz <strong><a href=https://twitter.com/DamianDulisz target=_BLANK class=typo__link>@DamianDulisz</a></strong></h4><h4 class=typo__h4>With love from <strong><a href=http://monterail.com target=_BLANK class="typo__link monterail-link">Monterail</a></strong></h4><a href=http://monterail.com target=_BLANK><img src=static/img/monterail-logo.da236ce.png class=monterail-logo></a></section><script src=static/prism.js></script><script>/*eslint-disable */
1+
<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>Vue-Multiselect | A Vue.js library</title><link rel=icon href=static/vue-logo.png type=image/x-icon><meta name=description content="Probably the most complete selecting solution for Vue.js, without jQuery."><meta property=og:title content="Vue-Multiselect | A Vue.js library."><meta property=og:site_name content="Vue-Multiselect | A Vue.js library."><meta property=og:url content=http://monterail.github.io/vue-multiselect><meta property=og:description content="Probably the most complete selecting solution for Vue.js, without jQuery."><meta property=og:image content=http://monterail.github.io/vue-multiselect/static/vue-logo.png><meta property=twitter:image content=http://monterail.github.io/vue-multiselect/static/vue-logo.png><meta property=twitter:title content="Vue-Multiselect | A Vue.js library."><meta property=twitter:description content="Probably the most complete selecting solution for Vue.js, without jQuery."><link href=static/css/app.f6bd194aba36a675ee07c3dbec176001.css rel=stylesheet></head><body><app></app><section class=utils--center><hr class=typo__hr><h4 class=typo__h4>Created by Damian Dulisz <strong><a href=https://twitter.com/DamianDulisz target=_BLANK class=typo__link>@DamianDulisz</a></strong></h4><h4 class=typo__h4>With love from <strong><a href=http://monterail.com target=_BLANK class="typo__link monterail-link">Monterail</a></strong></h4><a href=http://monterail.com target=_BLANK><img src=static/img/monterail-logo.da236ce.png class=monterail-logo></a></section><script src=static/prism.js></script><script>/*eslint-disable */
22
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
33
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
44
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
55
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
66

77
ga('create', 'UA-78373326-1', 'auto');
88
ga('send', 'pageview');
9-
/*eslint-enable */</script><script type=text/javascript src=static/js/app.f0d165e235cdc74c9187.js></script></body></html>
9+
/*eslint-enable */</script><script type=text/javascript src=static/js/app.11cb3829ba6fcf283edb.js></script></body></html>

‎gh-pages/static/css/app.d4ff647754fd1cb93f4599eec2601557.css.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

gh-pages/static/css/app.d4ff647754fd1cb93f4599eec2601557.css renamed to gh-pages/static/css/app.f6bd194aba36a675ee07c3dbec176001.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gh-pages/static/css/app.f6bd194aba36a675ee07c3dbec176001.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gh-pages/static/js/app.11cb3829ba6fcf283edb.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gh-pages/static/js/app.11cb3829ba6fcf283edb.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gh-pages/static/js/app.f0d165e235cdc74c9187.js‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎gh-pages/static/js/app.f0d165e235cdc74c9187.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)