feat: Vue 2.7 compatibility

vueform · Jul 11, 2022 · 013e2d8 · 013e2d8
1 parent 8355c8a
commit 013e2d8
Show file tree

Hide file tree

Showing 12 changed files with 1,314 additions and 827 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## v2.5.0.
+
+> `2022-07-11`
+
+### 🎉 Feature
+  - Vue `2.7` compatibility.
+
 ## v2.4.2
 
 > `2022-05-31`

diff --git a/README.md b/README.md
@@ -136,7 +136,6 @@ Learn more: [https://vueform.com](https://vueform.com)
 - [Installation](#installation)
 - [Using with Vue 3](#using-with-vue-3)
 - [Using with Vue 2](#using-with-vue-2)
-- [Using with Nuxt.js](#using-with-nuxtjs)
 - [Support](#support)
 - [Configuration](#configuration)
   - [Basic props](#basic-props)
@@ -212,52 +211,42 @@ npm install @vueform/multiselect
 
 ## Using with Vue 2
 
-When using Vue 2 install [@vue/composition-api](https://github.com/vuejs/composition-api#npm) via npm/yarn first:
-
-``` bash
-npm i @vue/composition-api --save-dev
-```
-
-Then install the plugin for Vue:
-
-``` js
-import Vue from 'vue'
-import VueCompositionAPI from '@vue/composition-api'
-
-Vue.use(VueCompositionAPI)
-```
-
-After that make sure to change the imported Multiselect module to:
-
-``` js
-import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js'
-```
-
-## Using with Nuxt.js
-
-First you need install [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/getting-started/setup):
+``` vue
+<template>
+  <div>
+    <Multiselect
+      v-model="value"
+      :options="options"
+    />
+  </div>
+</template>
 
-``` bash
-npm i @nuxtjs/composition-api --save
-```
+<script>
+  import Multiselect from '@vueform/multiselect/multiselect.vue2.js'
 
-Then you need to enable it as a module in `nuxt.config.js`:
+  export default {
+    components: {
+      Multiselect,
+    },
+    data() {
+      return {
+        value: null,
+        options: [
+          'Batman',
+          'Robin',
+          'Joker',
+        ]
+      }
+    }
+  }
+</script>
 
-``` js
-{
-  buildModules: [
-    '@nuxtjs/composition-api/module'
-  ]
-}
+<style src="@vueform/multiselect/themes/default.css"></style>
 ```
 
-After that make sure to change the imported module to Vue 2 version of Multiselect:
-
-``` js
-import Multiselect from '@vueform/multiselect/dist/multiselect.vue2'
-```
+#### Using with < Vue 2.7
 
-For more information on using `@nuxtjs/composition-api` read [their documentation](https://composition-api.nuxtjs.org/).
+Switch to [`<= 2.4.2`](https://github.com/vueform/multiselect/tree/2.4.2) to use the Multiselect with Vue.js `< 2.7`.
 
 ## Support
 

diff --git a/build/vue2.rollup.config.js b/build/vue2.rollup.config.js
@@ -12,12 +12,12 @@ export default [
     plugins: [
       alias({
         entries: [
-          { find: 'composition-api', replacement: '@vue/composition-api' },
+          { find: 'composition-api', replacement: 'vue' },
         ]
       }),
       vue(),
     ],
-    external: ['@vue/composition-api'],
+    external: ['vue'],
   },
   {
     input: 'src/Multiselect.vue',
@@ -27,18 +27,17 @@ export default [
       name: 'VueformMultiselect',
       globals: {
         'vue': 'Vue',
-        '@vue/composition-api': 'VueCompositionAPI',
       }
     },
     plugins: [
       alias({
         entries: [
-          { find: 'composition-api', replacement: '@vue/composition-api' },
+          { find: 'composition-api', replacement: 'vue' },
         ]
       }),
       vue(),
       terser()
     ],
-    external: ['@vue/composition-api', 'vue'],
+    external: ['vue'],
   }
 ]
diff --git a/dist/multiselect.global.js b/dist/multiselect.global.js
diff --git a/dist/multiselect.js b/dist/multiselect.js
@@ -74,7 +74,7 @@ function useValue (props, context)
 
   /* istanbul ignore next */
   // externalValue
-  const ev = context.expose !== undefined ? modelValue : value;
+  const ev = modelValue && modelValue.value !== undefined ? modelValue : value;
 
   const plainValue = computed(() => {
     return mode.value === 'single' ? iv.value[valueProp.value] : iv.value.map(v=>v[valueProp.value])

diff --git a/dist/multiselect.vue2.global.js b/dist/multiselect.vue2.global.js
diff --git a/dist/multiselect.vue2.js b/dist/multiselect.vue2.js
@@ -1,4 +1,4 @@
-import { toRefs, getCurrentInstance, ref, computed, watch, nextTick, onMounted } from '@vue/composition-api';
+import { toRefs, getCurrentInstance, ref, computed, watch, nextTick, onMounted } from 'vue';
 
 function isNullish (val) {
   return [null, undefined].indexOf(val) !== -1
@@ -74,7 +74,7 @@ function useValue (props, context)
 
   /* istanbul ignore next */
   // externalValue
-  const ev = context.expose !== undefined ? modelValue : value;
+  const ev = modelValue && modelValue.value !== undefined ? modelValue : value;
 
   const plainValue = computed(() => {
     return mode.value === 'single' ? iv.value[valueProp.value] : iv.value.map(v=>v[valueProp.value])

diff --git a/jest/jest.config.vue2.js b/jest/jest.config.vue2.js
@@ -15,7 +15,7 @@ module.exports = {
       "/node_modules/"
   ],
   "moduleNameMapper": {
-      "^composition-api$": "<rootDir>/node_modules/vue-prev-composition-api",
+      "^composition-api$": "<rootDir>/node_modules/vue-prev",
       "^@vue/test-utils$": "<rootDir>/node_modules/vue-prev-test-utils",
       "^vue$": "<rootDir>/node_modules/vue-prev",
       '^vue-jest$': "<rootDir>/node_modules/vue-prev-jest",