Merge pull request #1835 from shentao/release-3.2

release(3-2): New build and doc files

Author: mattelen

dist/vue-multiselect.common.js

@@ -0,0 +1,37 @@
+const e=`<template>
+<div>
+  <label class="typo__label">Open console to see logs.</label>
+  <multiselect id="action-dispatcher" placeholder="Pick action" :options="actions" :searchable="false" :reset-after="true" @select="dispatchAction" aria-label="pick a action"></multiselect>
+</div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  data () {
+    return {
+      actions: ['alert', 'console.log', 'scrollTop']
+    }
+  },
+  methods: {
+    dispatchAction (actionName) {
+      switch (actionName) {
+        case 'alert':
+          window.alert('You just dispatched "alert" action!')
+          break
+        case 'console.log':
+          console.log('You just dispatched "console.log" action!')
+          break
+        case 'scrollTop':
+          window.scrollTo(0, 0)
+          break
+      }
+    }
+  }
+}
+<\/script>
+`;export{e as default};

dist/vue-multiselect.common.js.map

@@ -0,0 +1,44 @@
+const e=`<template>
+<div :class="{ 'invalid': isInvalid }">
+  <label class="typo__label">Customized multiselect</label>
+  <multiselect id="custom-configuration" placeholder="Pick at least one" select-label="Enter doesn’t work here!" :model-value="value" :options="options" :multiple="true" :searchable="true" :allow-empty="false" :prevent-autofocus="true" :hide-selected="true" :max-height="150" :max="3" :disabled="isDisabled" :block-keys="['Tab', 'Enter']" @update:modelValue="onChange" @close="onTouch" @select="onSelect"></multiselect>
+  <label class="typo__label form__label" v-show="isInvalid">Must have at least one value</label>
+</div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  data () {
+    return {
+      isDisabled: false,
+      isTouched: false,
+      value: [],
+      options: ['Select option', 'Disable me!', 'Reset me!', 'mulitple', 'label', 'searchable']
+    }
+  },
+  computed: {
+    isInvalid () {
+      return this.isTouched && this.value.length === 0
+    }
+  },
+  methods: {
+    onChange (value) {
+      this.value = value
+      if (value.indexOf('Reset me!') !== -1) this.value = []
+    },
+    onSelect (option) {
+      if (option === 'Disable me!') this.isDisabled = true
+    },
+    onTouch () {
+      this.isTouched = true
+    }
+  }
+}
+<\/script>
+
+`;export{e as default};

dist/vue-multiselect.esm.js

@@ -0,0 +1,66 @@
+const e=`<template>
+  <div><label class="typo__label">Custom option template</label>
+    <multiselect id="custom-options" v-model="value" placeholder="Fav No Man’s Sky path" label="title" track-by="title" :options="options"
+                 :option-height="104" :custom-label="customLabel" :show-labels="false">
+      <template #singleLabel="props"><img class="option__image" :src="props.option.img"
+                                                           alt="No Man’s Sky"/><span class="option__desc"><span
+        class="option__title">{{ props.option.title }}</span></span></template>
+      <template #option="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"/>
+        <div class="option__desc"><span class="option__title">{{ props.option.title }}</span><span
+          class="option__small">{{ props.option.desc }}</span></div>
+      </template>
+    </multiselect>
+    <pre class="language-json"><code>{{ value }}</code></pre>
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  data () {
+    return {
+      value: {title: 'Explorer', desc: 'Discovering new species!', img: 'assets/posters/creatures.png'},
+      options: [
+        {title: 'Space Pirate', desc: 'More space battles!', img: 'assets/posters/fleet.png'},
+        {title: 'Merchant', desc: 'PROFIT!', img: 'assets/posters/trading_post.png'},
+        {title: 'Explorer', desc: 'Discovering new species!', img: 'assets/posters/creatures.png'},
+        {title: 'Miner', desc: 'We need to go deeper!', img: 'assets/posters/resource_lab.png'}
+      ]
+    }
+  },
+  methods: {
+    customLabel ({title, desc}) {
+      return \`\${title} – \${desc}\`
+    }
+  }
+}
+<\/script>
+
+<style>
+.option__image {
+  max-height: 80px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.option__desc {
+  display: inline-block;
+  vertical-align: middle;
+  padding: rem(10px);
+}
+
+.option__title {
+  font-size: rem(24px);
+}
+
+.option__small {
+  margin-top: rem(10px);
+  display: block;
+}
+</style>
+`;export{e as default};

dist/vue-multiselect.js

@@ -0,0 +1,59 @@
+const e=`<template>
+  <div><label class="typo__label">Simple select / dropdown</label>
+    <multiselect id="multiselect" v-model="value" :options="options" :multiple="true" :close-on-select="false" :clear-on-select="false"
+                 :preserve-search="true" placeholder="Pick some" label="name" track-by="name" :preselect-first="true">
+      <template #selection="{ values, search, isOpen }">
+        <span class="multiselect__single"
+              v-if="values.length"
+              v-show="!isOpen">{{ values.length }} options selected</span>
+      </template>
+    </multiselect>
+    <pre class="language-json"><code>{{ value }}</code></pre>
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  data () {
+    return {
+      value: [],
+      options: [
+        {name: 'Vue.js', language: 'JavaScript'},
+        {name: 'Adonis', language: 'JavaScript'},
+        {name: 'Rails', language: 'Ruby'},
+        {name: 'Sinatra', language: 'Ruby'},
+        {name: 'Laravel', language: 'PHP'},
+        {name: 'Phoenix', language: 'Elixir'}
+      ]
+    }
+  }
+}
+<\/script>
+
+<style lang="sass">
+.custom__tag
+  display: inline-block
+  padding: 3px 12px
+  background: #d2d7ff
+  margin-right: 8px
+  margin-bottom: 8px
+  border-radius: 10px
+  cursor: pointer
+
+  &:nth-child(even)
+    background: #daffee
+
+  &:hover
+    background: #eaeaea
+
+.custom__remove
+  padding: 0px
+  font-size: 10px
+  margin-left: 5px
+</style>
+`;export{e as default};