Introduce maximum options one can select

shentao · Jun 18, 2016 · e42957e · e42957e
1 parent 829961e
commit e42957e
Show file tree

Hide file tree

Showing 18 changed files with 203 additions and 113 deletions.
diff --git a/README.md b/README.md
@@ -394,6 +394,15 @@ props: {
   tagPlaceholder: {
     type: String,
     default: 'Press enter to create a tag'
+  },
+  /**
+   * Number of allowed selected options. No limit if false.
+   * @default False
+   * @type {Number}
+  */
+  max: {
+    type: Number,
+    default: false
   }
 }
 

diff --git a/docs/App.vue b/docs/App.vue
@@ -17,7 +17,7 @@ div
               :selected="selected",
               :multiple="multiple",
               :searchable="searchable",
-              :placeholder="placeholder",
+              placeholder="Select option",
               :on-change="afterChange",
               :show-labels="true",
               :limit="3",
@@ -371,7 +371,7 @@ div
         hr.typo__hr
 
         h2.typo__h2 Custom configuration
-        p.typo__p Can’t remove the last value.
+        p.typo__p Can’t remove the last value and only allow up to 5 selected options.
         p.typo__p Hides already selected options.
         p.typo__p Shows error when touched, but nothing is selected.
         .grid__row
@@ -386,25 +386,47 @@ div
                 :allow-empty="false",
                 :hide-selected="true",
                 :touched.sync="isTouched",
-                :max-height="400"
+                :max-height="400",
+                :max="5"
                 placeholder="Pick at least one"
               )
 
           .grid__column.grid__unit--md-7
             label.typo__label Code sample
             pre.language-jade
               code.
-                multiselect(
-                  :options="options",
-                  :selected.sync="exampleValue6",
-                  :multiple="true",
-                  :searchable="true",
-                  :allow-empty="false",
-                  :hide-selected="true",
-                  :touched.sync="isTouched",
-                  :max-height="400"
-                  placeholder="Pick at least one"
-                )
+                // Template
+                div(:class="{ 'invalid': isInvalid }")
+                  label.typo__label Must have at least one value
+                  multiselect(
+                    :options="options",
+                    :selected.sync="exampleValue6",
+                    :multiple="true",
+                    :searchable="true",
+                    :allow-empty="false",
+                    :hide-selected="true",
+                    :touched.sync="isTouched",
+                    :max-height="400",
+                    :max="5"
+                    placeholder="Pick at least one"
+                  )
+
+                // Script
+                computed: {
+                  isInvalid () {
+                    return this.isTouched && this.exampleValue6.length === 0
+                  }
+                }
+
+                // Styles
+                .invalid {
+                  .typo__label {
+                    color: $error-color;
+                  }
+                  .multiselect__tags {
+                    border-color: $error-color !important;
+                  }
+                }
 
         hr.typo__hr
 
@@ -612,6 +634,15 @@ div
                   tagPlaceholder: {
                     type: String,
                     default: 'Press enter to create a tag'
+                  },
+                  /**
+                   * Number of allowed selected options. No limit if false.
+                   * @default False
+                   * @type {Number}
+                  */
+                  max: {
+                    type: Number,
+                    default: false
                   }
                 }
 

diff --git a/gh-pages/index.html b/gh-pages/index.html
@@ -1,9 +1,9 @@
-<!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 */
+<!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 */
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
 
       ga('create', 'UA-78373326-1', 'auto');
       ga('send', 'pageview');
-      /*eslint-enable */</script><script type=text/javascript src=static/js/app.f0d165e235cdc74c9187.js></script></body></html>
+      /*eslint-enable */</script><script type=text/javascript src=static/js/app.11cb3829ba6fcf283edb.js></script></body></html>
diff --git a/gh-pages/static/css/app.d4ff647754fd1cb93f4599eec2601557.css.map b/gh-pages/static/css/app.d4ff647754fd1cb93f4599eec2601557.css.map
diff --git a/.../app.d4ff647754fd1cb93f4599eec2601557.css → .../app.f6bd194aba36a675ee07c3dbec176001.css b/.../app.d4ff647754fd1cb93f4599eec2601557.css → .../app.f6bd194aba36a675ee07c3dbec176001.css
diff --git a/gh-pages/static/css/app.f6bd194aba36a675ee07c3dbec176001.css.map b/gh-pages/static/css/app.f6bd194aba36a675ee07c3dbec176001.css.map
diff --git a/gh-pages/static/js/app.11cb3829ba6fcf283edb.js b/gh-pages/static/js/app.11cb3829ba6fcf283edb.js
diff --git a/gh-pages/static/js/app.11cb3829ba6fcf283edb.js.map b/gh-pages/static/js/app.11cb3829ba6fcf283edb.js.map
diff --git a/gh-pages/static/js/app.f0d165e235cdc74c9187.js b/gh-pages/static/js/app.f0d165e235cdc74c9187.js
diff --git a/gh-pages/static/js/app.f0d165e235cdc74c9187.js.map b/gh-pages/static/js/app.f0d165e235cdc74c9187.js.map