Merge pull request #1764 from shentao/1762-httpsvue-multiselectjsorg-…

…docs-arent-working

docs(3.0.0): Update docs to work with Github pages

docs/assets/ActionDispatcher-09ad388b.js

@@ -0,0 +1,37 @@
+const e=`<template>
+<div>
+  <label class="typo__label">Open console to see logs.</label>
+  <multiselect placeholder="Pick action" :options="actions" :searchable="false" :reset-after="true" @select="dispatchAction"></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};

docs/assets/AjaxSearch-d09df4ab.js

@@ -0,0 +1,82 @@
+const e=`<template>
+  <div><label class="typo__label" for="ajax">Async multiselect</label>
+    <multiselect v-model="selectedCountries" id="ajax" label="name" track-by="code" placeholder="Type to search"
+                 open-direction="bottom" :options="countries" :multiple="true" :searchable="true" :loading="isLoading"
+                 :internal-search="false" :clear-on-select="false" :close-on-select="false" :options-limit="300"
+                 :limit="3" :limit-text="limitText" :max-height="600" :show-no-results="false" :hide-selected="true"
+                 @search-change="asyncFind">
+      <template #tag="{ option, remove }"><span class="custom__tag"><span>{{ option.name }}</span><span
+        class="custom__remove" @click="remove(option)">❌</span></span></template>
+      <template #clear="props">
+        <div class="multiselect__clear" v-if="selectedCountries.length"
+             @mousedown.prevent.stop="clearAll(props.search)"></div>
+      </template>
+      <template #noResult>
+        <span>Oops! No elements found. Consider changing the search query.</span>
+      </template>
+    </multiselect>
+    <pre class="language-json"><code>{{ selectedCountries }}</code></pre>
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect'
+import {ajaxFindCountry} from './js/countriesApi.js'
+
+export default {
+  components: {
+    Multiselect
+  },
+  data () {
+    return {
+      selectedCountries: [],
+      countries: [],
+      isLoading: false
+    }
+  },
+  methods: {
+    limitText (count) {
+      return \`and \${count} other countries\`
+    },
+    asyncFind (query) {
+      this.isLoading = true
+      ajaxFindCountry(query).then(response => {
+        this.countries = response
+        this.isLoading = false
+      })
+    },
+    clearAll () {
+      this.selectedCountries = []
+    }
+  }
+}
+<\/script>
+
+<style lang="sass">
+.multiselect__clear
+  position: absolute
+  right: 41px
+  height: 40px
+  width: 40px
+  display: block
+  cursor: pointer
+  z-index: 3
+
+  &:before,
+  &:after
+    content: ""
+    display: block
+    position: absolute
+    width: 3px
+    height: 16px
+    background: #aaa
+    top: 12px
+    right: 4px
+
+  &:before
+    transform: rotate(45deg)
+
+  &:after
+    transform: rotate(-45deg)
+</style>
+`;export{e as default};

docs/assets/CustomConfiguration-50bb04e4.js

@@ -0,0 +1,44 @@
+const e=`<template>
+<div :class="{ 'invalid': isInvalid }">
+  <label class="typo__label">Customized multiselect</label>
+  <multiselect 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};

docs/assets/CustomOptions-0768cd7a.js

@@ -0,0 +1,66 @@
+const e=`<template>
+  <div><label class="typo__label">Custom option template</label>
+    <multiselect 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};