Upgrade to vue 3

babel.config.js

@@ -1,7 +1,10 @@
 module.exports = {
   'presets': [
     ['@babel/preset-env', {
-      'modules': false
+      'modules': false,
+      'targets': {
+        'node': 'current',
+      },
     }]
   ],
   'env': {

example/main.js

@@ -1,10 +1,6 @@
-import Vue from 'vue'
+import { createApp } from 'vue';
 import Demo from './Demo.vue'
 
-Vue.config.productionTip = false
+const app = createApp(Demo);
 
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  render: h => h(Demo)
-})
+app.mount("#app");

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuejs-datepicker",
-  "version": "1.6.2",
+  "version": "2.0.0",
   "description": "A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations",
   "keywords": [
     "vue",
@@ -36,9 +36,8 @@
     "lint",
     "test"
   ],
-  "dependencies": {},
   "peerDependencies": {
-    "vue": "^2.6.10"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/cli": "^7.4.4",
@@ -51,44 +50,45 @@
     "@babel/preset-stage-2": "^7.0.0",
     "@babel/register": "^7.4.4",
     "@babel/runtime": "^7.4.5",
-    "@vue/test-utils": "^1.0.0-beta.12",
-    "autoprefixer": "^8.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.4.1",
+    "@vue/vue3-jest": "^29.2.4",
+    "autoprefixer": "^10.4.14",
     "babel-eslint": "^7.1.1",
-    "babel-jest": "^24.8.0",
+    "babel-jest": "^29.6.2",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "coveralls": "^3.0.4",
     "eslint": "^3.19.0",
     "eslint-config-standard": "^6.2.1",
     "eslint-friendly-formatter": "^2.0.7",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^2.0.3",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^2.0.1",
     "eventsource-polyfill": "^0.9.6",
-    "jest": "^24.8.0",
+    "jest": "^29.6.2",
+    "jest-environment-jsdom": "^29.6.2",
     "jest-serializer-vue": "^2.0.2",
     "lolex": "^1.5.2",
     "opn": "^4.0.2",
     "ora": "^1.2.0",
     "parse5": "^2.1.0",
     "pre-commit": "^1.2.2",
     "rimraf": "^2.6.0",
-    "rollup": "^1.16.2",
-    "rollup-plugin-babel": "^4.3.3",
+    "rollup": "^2.79.1",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-livereload": "^1.0.1",
     "rollup-plugin-node-resolve": "^5.0.4",
-    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.0.0",
-    "rollup-plugin-vue": "^5.0.0",
+    "rollup-plugin-vue": "^6.0.0",
     "semver": "^5.3.0",
     "shelljs": "^0.8.3",
     "stylus": "^0.54.5",
-    "vue": "^2.6.10",
-    "vue-jest": "^4.0.0-beta.2",
-    "vue-server-renderer": "^2.6.10",
-    "vue-template-compiler": "^2.6.10"
+    "vue": "^3.3.4",
+    "vue-server-renderer": "^2.6.10"
   }
-}
+}

scripts/build-locale.js

@@ -1,7 +1,7 @@
 import fs from 'fs'
 import path from 'path'
-import {terser} from 'rollup-plugin-terser'
-import babel from 'rollup-plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+import babel from '@rollup/plugin-babel'
 import commonjs from 'rollup-plugin-commonjs'
 
 const files = fs.readdirSync('./src/locale/translations')
@@ -15,7 +15,7 @@ const config = files.map(file => {
     },
     plugins: [
       commonjs(),
-      babel({exclude: 'node_modules/**'}),
+      babel({ exclude: 'node_modules/**' }),
       terser()
     ]
   }
@@ -30,7 +30,7 @@ const index = {
   },
   plugins: [
     commonjs(),
-    babel({exclude: 'node_modules/**'}),
+    babel({ exclude: 'node_modules/**' }),
     terser()
   ]
 }

scripts/build.js

@@ -1,7 +1,7 @@
 import path from 'path'
-import {terser} from 'rollup-plugin-terser'
+import { terser } from 'rollup-plugin-terser'
 import vue from 'rollup-plugin-vue'
-import babel from 'rollup-plugin-babel'
+import babel from '@rollup/plugin-babel'
 import postcss from 'rollup-plugin-postcss'
 import autoprefixer from 'autoprefixer'
 import commonjs from 'rollup-plugin-commonjs'
@@ -24,10 +24,10 @@ export default [{
     }
   ],
   plugins: [
-    vue({css: true}),
-    postcss({plugins: [autoprefixer()]}),
+    vue({ css: true }),
+    postcss({ plugins: [autoprefixer()] }),
     commonjs(),
-    babel({exclude: 'node_modules/**'})
+    babel({ exclude: 'node_modules/**' })
   ]
 }, {
   input: path.join(__dirname, '..', 'src', 'components', 'Datepicker.vue'),
@@ -37,10 +37,10 @@ export default [{
     name: 'vuejsDatepicker'
   },
   plugins: [
-    vue({css: true}),
-    postcss({plugins: [autoprefixer()]}),
+    vue({ css: true }),
+    postcss({ plugins: [autoprefixer()] }),
     commonjs(),
     terser(),
-    babel({exclude: 'node_modules/**'})
+    babel({ exclude: 'node_modules/**' })
   ]
 }]

scripts/serve.js

@@ -2,10 +2,12 @@ import path from 'path'
 import serve from 'rollup-plugin-serve'
 import livereload from 'rollup-plugin-livereload'
 import vue from 'rollup-plugin-vue'
-import babel from 'rollup-plugin-babel'
+import babel from '@rollup/plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import replace from 'rollup-plugin-replace'
 import common from 'rollup-plugin-commonjs'
+import postcss from 'rollup-plugin-postcss'
+import autoprefixer from 'autoprefixer'
 
 export default {
   input: path.join(__dirname, '..', 'example', 'main.js'),
@@ -19,23 +21,24 @@ export default {
     vue({
       css: true
     }),
+    postcss({ plugins: [autoprefixer()] }),
     replace({
       'process.env.NODE_ENV': JSON.stringify('development')
     }),
     resolve({
       mainFields: ['module', 'main']
     }),
     common(),
-    babel({exclude: 'node_modules/**'}),
+    babel({ exclude: 'node_modules/**' }),
     serve({
       open: true,
       contentBase: path.join(__dirname, '..', 'example'),
-      host: 'localhost',
-      port: 10001
+      host: '0.0.0.0',
+      port: 3000
     }),
     livereload({
       verbose: true,
       watch: path.join(__dirname, '..', 'example')
     })
   ]
-}
+}

src/components/Datepicker.vue

@@ -108,7 +108,7 @@ export default {
     PickerYear
   },
   props: {
-    value: {
+    modelValue: {
       validator: val => utils.validateDateInput(val)
     },
     name: String,
@@ -187,7 +187,7 @@ export default {
     }
   },
   watch: {
-    value (value) {
+    modelValue (value) {
       this.setValue(value)
     },
     openDate () {
@@ -331,7 +331,7 @@ export default {
       this.selectedDate = date
       this.setPageDate(date)
       this.$emit('selected', date)
-      this.$emit('input', date)
+      this.$emit('update:modelValue', date)
     },
     /**
      * Clear the selected date
@@ -340,7 +340,7 @@ export default {
       this.selectedDate = null
       this.setPageDate()
       this.$emit('selected', null)
-      this.$emit('input', null)
+      this.$emit('update:modelValue', null)
       this.$emit('cleared')
     },
     /**
@@ -445,8 +445,8 @@ export default {
      * Initiate the component
      */
     init () {
-      if (this.value) {
-        this.setValue(this.value)
+      if (this.modelValue) {
+        this.setValue(this.modelValue)
       }
       if (this.isInline) {
         this.setInitialView()
@@ -462,4 +462,4 @@ export default {
 </script>
 <style lang="stylus">
 @import '../styles/style'
-</style>
+</style>

test/unit/jest.conf.js

@@ -1,6 +1,10 @@
 const path = require('path')
 
 module.exports = {
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
   rootDir: path.resolve(__dirname, '../../'),
   moduleFileExtensions: [
     'js',
@@ -12,7 +16,7 @@ module.exports = {
   },
   transform: {
     '^.+\\.js$': 'babel-jest',
-    '.*\\.(vue)$': 'vue-jest'
+    '.*\\.(vue)$': '@vue/vue3-jest'
   },
   setupFiles: ['<rootDir>/test/unit/setup'],
   coverageDirectory: '<rootDir>/test/unit/coverage',

test/unit/setup.js

@@ -1,3 +1 @@
 import Vue from 'vue'
-
-Vue.config.productionTip = false

test/unit/specs/DateInput/DateInput.spec.js

@@ -1,12 +1,13 @@
 import DateInput from '@/components/DateInput.vue'
-import {shallow} from '@vue/test-utils'
-import {en} from '@/locale'
+import { mount } from '@vue/test-utils'
+import { en } from '@/locale'
 
 describe('DateInput', () => {
   let wrapper
 
   beforeEach(() => {
-    wrapper = shallow(DateInput, {
+    wrapper = mount(DateInput, {
+      shallow: true,
       propsData: {
         selectedDate: new Date(2018, 2, 24),
         format: 'dd MMM yyyy',
@@ -19,8 +20,8 @@ describe('DateInput', () => {
     expect(wrapper.findAll('input')).toHaveLength(1)
   })
 
-  it('nulls date', () => {
-    wrapper.setProps({
+  it('nulls date', async () => {
+    await wrapper.setProps({
       selectedDate: null
     })
     expect(wrapper.vm.formattedValue).toBeNull()
@@ -32,8 +33,8 @@ describe('DateInput', () => {
     expect(wrapper.find('input').element.value).toEqual('24 Mar 2018')
   })
 
-  it('delegates date formatting', () => {
-    wrapper.setProps({
+  it('delegates date formatting', async () => {
+    await wrapper.setProps({
       selectedDate: new Date(2016, 1, 15),
       format: () => '2016/1/15'
     })
@@ -46,31 +47,31 @@ describe('DateInput', () => {
     expect(wrapper.emitted().showCalendar).toBeTruthy()
   })
 
-  it('adds bootstrap classes', () => {
-    wrapper.setProps({
+  it('adds bootstrap classes', async () => {
+    await wrapper.setProps({
       bootstrapStyling: true
     })
     expect(wrapper.find('input').element.classList).toContain('form-control')
   })
 
-  it('appends bootstrap classes', () => {
-    wrapper.setProps({
+  it('appends bootstrap classes', async () => {
+    await wrapper.setProps({
       inputClass: 'someClass',
       bootstrapStyling: true
     })
     expect(wrapper.find('input').element.classList).toContain('form-control')
     expect(wrapper.find('input').element.classList).toContain('someClass')
   })
 
-  it('can be disabled', () => {
-    wrapper.setProps({
+  it('can be disabled', async () => {
+    await wrapper.setProps({
       disabled: true
     })
     expect(wrapper.find('input').attributes().disabled).toBeDefined()
   })
 
-  it('accepts a function as a formatter', () => {
-    wrapper.setMethods({
+  it('accepts a function as a formatter', async () => {
+    await wrapper.setProps({
       format: () => '!'
     })
     expect(wrapper.find('input').element.value).toEqual('!')
@@ -80,4 +81,4 @@ describe('DateInput', () => {
     wrapper.find('input').trigger('blur')
     expect(wrapper.emitted('closeCalendar')).toBeTruthy()
   })
-})
+})