feat: Vue 2.7 compatibility

vueform · Jul 11, 2022 · 3673d4b · 3673d4b
1 parent 4e85520
commit 3673d4b
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## v2.1.0
+
+> `2022-07-11`
+
+### 🎉 Features
+  - Vue.js `2.7` compatibility
+
 ## v2.0.10
 
 > `2022-05-11`

diff --git a/README.md b/README.md
@@ -93,7 +93,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)
@@ -147,52 +146,34 @@ npm install @vueform/slider
 
 ### 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 Slider module to:
-
-``` js
-import Slider from '@vueform/slider/dist/slider.vue2.js'
-```
-
-### Using with Nuxt.js
-
-First you need install [@nuxtjs/composition-api](https://composition-api.nuxtjs.org/getting-started/setup):
+``` vue
+<template>
+  <div>
+    <Slider v-model="value" />
+  </div>
+</template>
 
-``` bash
-npm i @nuxtjs/composition-api --save
-```
+<script>
+  import Slider from '@vueform/slider/dist/slider.vue2.js'
 
-Then you need to enable it as a module in `nuxt.config.js`:
+  export default {
+    components: {
+      Slider,
+    },
+    data() {
+      return {
+        value: 20
+      }
+    }
+  }
+</script>
 
-``` js
-{
-  buildModules: [
-    '@nuxtjs/composition-api/module'
-  ]
-}
+<style src="@vueform/slider/themes/default.css"></style>
 ```
 
-After that make sure to change the imported module to Vue 2 version of Slider:
-
-``` js
-import Slider from '@vueform/slider/dist/slider.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.0.10`](https://github.com/vueform/slider/tree/2.0.10) to use the Slider with Vue.js `< 2.7`.
 
 ## Support
 

diff --git a/build/vue2.rollup.config.js b/build/vue2.rollup.config.js
@@ -16,7 +16,7 @@ export default [
       vue(),
       alias({
         entries: [
-          { find: 'composition-api', replacement: '@vue/composition-api' },
+          { find: 'composition-api', replacement: 'vue' },
         ]
       }),
       nodeResolve({
@@ -29,7 +29,7 @@ export default [
       }),
       terser(),
     ],
-    external: ['@vue/composition-api'],
+    external: ['vue'],
   },
   {
     input: 'src/Slider.vue',
@@ -38,7 +38,7 @@ export default [
       format: 'iife',
       name: 'VueformSlider',
       globals: {
-        'composition-api': 'VueCompositionAPI',
+        'composition-api': 'Vue',
         'vue': 'Vue',
       }
     },

diff --git a/dist/slider.global.js b/dist/slider.global.js
diff --git a/dist/slider.js b/dist/slider.js
diff --git a/dist/slider.vue2.global.js b/dist/slider.vue2.global.js
diff --git a/dist/slider.vue2.js b/dist/slider.vue2.js
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",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vueform/slider",
-  "version": "2.0.10",
+  "version": "2.1.0",
   "private": false,
   "description": "Vue 3 slider component with multihandles, tooltips merging and formatting.",
   "license": "MIT",

diff --git a/src/composables/useValue.js b/src/composables/useValue.js
@@ -8,7 +8,7 @@ export default function useValue (props, context, dependencies)
   // ================ DATA ================
 
   /* istanbul ignore next */
-  const value = context.expose !== undefined ? modelValue : baseValue
+  const value = modelValue && modelValue.value !== undefined ? modelValue : baseValue
 
   const initialValue = ref(value.value)
 

diff --git a/tests/unit/helpers/vue2.js b/tests/unit/helpers/vue2.js
@@ -1,10 +1,8 @@
 import { mount, createLocalVue } from '@vue/test-utils'
-import CompositionApi from 'composition-api'
 import Slider from './../../../src/Slider'
 
 export const createSlider = (props = {}, options = {}) => {
   const localVue = createLocalVue()
-  localVue.use(CompositionApi)
 
   let config = {
     localVue,

diff --git a/themes/default.css b/themes/default.css