Release: 3.0.0-alpha.1

shentao · May 3, 2021 · 1f5f38f · 1f5f38f
1 parent d9f3c38
commit 1f5f38f
Show file tree

Hide file tree

Showing 24 changed files with 5,739 additions and 189 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,41 @@
-# vue3-multiselect
-A Vue 3 upgrade of [@shentao's](https://github.com/shentao) [vue-mulitselect](https://github.com/shentao/vue-multiselect) component.
-The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work.
+# vue-multiselect
 
-Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at  [suade.org](https://suade.org/dev/a-products-vue-3-migration-a-real-life-story/)
+## Documentation
+
+> Documentation for v3.0.0 is the same as for v2.x as it is mostly backward compatible.
+
+Visit: [vue-multiselect.js.org](https://vue-multiselect.js.org/#sub-getting-started)
+
+## Sponsors
+
+### Gold
+
+<p align="center">
+  <a href="https://vuejs.amsterdam/?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/793583797454503976/793583831369646120/vuejsamsterdam.png" alt="Vuejs Amsterdam" width="380px">
+  </a>
+</p>
+<p align="center">
+  <a href="https://theroadtoenterprise.com/?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/793583797454503976/809062891420123166/logo.png" alt="Vue - The Road To Enterprise" width="380px">
+  </a>
+</p>
+
+### Silver
+
+<p align="center">
+  <a href="https://www.storyblok.com/developers?utm_source=newsletter&utm_medium=logo&utm_campaign=vuejs-newsletter" target="_blank">
+    <img src="https://a.storyblok.com/f/51376/3856x824/fea44d52a9/colored-full.png" alt="Storyblok" width="240px">
+  </a>
+</p>
+
+### Bronze
+
+<p align="center">
+  <a href="https://www.vuemastery.com/" target="_blank">
+    <img src="https://cdn.discordapp.com/attachments/258614093362102272/557267759130607630/Vue-Mastery-Big.png" alt="Vue Mastery logo" width="180px">
+  </a>
+</p>
 
 ## Features & characteristics:
 * NO dependencies
@@ -23,41 +56,41 @@ Feel free to check out our story of how we upgraded our product to Vue 3 on our
 ## Install & basic usage
 
 ```bash
-npm install @suadelabs/vue3-multiselect
+npm install vue-multiselect@next
 ```
 
 ```vue
 <template>
   <div>
-    <multiselect
+    <VueMultiselect
       v-model="selected"
       :options="options">
-    </multiselect>
+    </VueMultiselect>
   </div>
 </template>
 
 <script>
-  import Multiselect from '@suadelabs/vue3-multiselect'
-  export default {
-    components: { Multiselect },
-    data () {
-      return {
-        selected: null,
-        options: ['list', 'of', 'options']
-      }
+import VueMultiselect from 'vue-multiselect'
+export default {
+  components: { VueMultiselect },
+  data () {
+    return {
+      selected: null,
+      options: ['list', 'of', 'options']
     }
   }
+}
 </script>
 
-<style src="vue3-multiselect/dist/vue3-multiselect.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
 ```
 
 ## Examples
-in jade-lang/pug-lang
+inhtml-lang/pug-lang
 
 ### Single select / dropdown
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   :model-value="value",
   :options="source",
   :searchable="false",
@@ -67,39 +100,39 @@ multiselect(
   label="name",
   placeholder="Select one",
   track-by="name"
-)
+/>
 ```
 
 ### Single select with search
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="value",
   :options="source",
   :close-on-select="true",
   :clear-on-select="false",
   placeholder="Select one",
   label="name",
   track-by="name"
-)
+/>
 ```
 
 ### Multiple select with search
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="multiValue",
   :options="source",
   :multiple="true",
   :close-on-select="true",
   placeholder="Pick some",
   label="name",
   track-by="name"
-)
+/>
 ```
 
 ### Tagging
 with `@tag` event
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="taggingSelected",
   :options="taggingOptions",
   :multiple="true",
@@ -109,7 +142,7 @@ multiselect(
   placeholder="Type to search or add tag",
   label="name",
   track-by="code"
-)
+/>
 ```
 
 ``` javascript
@@ -125,8 +158,8 @@ addTag (newTag) {
 ```
 
 ### Asynchronous dropdown
-``` jade
-multiselect(
+```vue
+<VueMultiselect
   v-model="selectedCountries",
   :options="countries",
   :multiple="multiple",
@@ -135,9 +168,11 @@ multiselect(
   placeholder="Type to search",
   label="name"
   track-by="code"
-)
-  span(slot="noResult").
+>
+  <span slot="noResult">
     Oops! No elements found. Consider changing the search query.
+  </span>
+</VueMultiselect>
 ```
 
 ``` javascript
@@ -148,6 +183,12 @@ methods: {
 }
 ```
 
+## Special Thanks
+
+Thanks to Matt Elen for contributing this version!
+
+> A Vue 3 upgrade of [@shentao's](https://github.com/shentao) [vue-mulitselect](https://github.com/shentao/vue-multiselect) component. The idea is that when you upgrade to Vue 3, you can swap the two components out, and everything should simply work. Feel free to check out our story of how we upgraded our product to Vue 3 on our blog at  [suade.org](https://suade.org/dev/a-products-vue-3-migration-a-real-life-story/)
+
 ## Contributing
 
 ``` bash
@@ -158,4 +199,3 @@ npm run bundle
 npm run test
 
 ```
-