riophae · terax6669 · Jan 20, 2021
diff --git a/.babelrc.js b/.babelrc.js
@@ -5,7 +5,7 @@ module.exports = api => {
     [ '@babel/preset-env', { modules: false } ],
   ]
   const plugins = [
-    'transform-vue-jsx',
+    '@vue/babel-plugin-jsx',
     '@babel/plugin-transform-runtime',
   ]
 

diff --git a/.gitignore b/.gitignore
@@ -12,3 +12,4 @@ dist
 gh-pages
 
 test/unit/coverage
+nbproject
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@
 - Supports a wide range of browsers (see [below](#browser-compatibility))
 - RTL support
 
-*Requires Vue 2.2+*
+*Requires Vue 3.0+*
 
 ### Getting Started
 
@@ -80,8 +80,8 @@ If you just don't want to use webpack or any other bundlers, you can simply incl
 ```html
 <html>
   <head>
-    <!-- include Vue 2.x -->
-    <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
+    <!-- include Vue 3.x -->
+    <script src="https://cdn.jsdelivr.net/npm/vue@^3"></script>
     <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
     <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">

diff --git a/build/webpack-configs/base.js b/build/webpack-configs/base.js
@@ -9,9 +9,6 @@ module.exports = {
   resolve: {
     extensions: [ '.js', '.json', '.vue' ],
     alias: {
-      // use the full development build of Vue
-      // see: https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds
-      'vue$': 'vue/dist/vue',
       // for consistent docs
       '@riophae/vue-treeselect': utils.resolve('src'),
       // for shorter import path in tests

diff --git a/docs/components/DocEvents.vue b/docs/components/DocEvents.vue
@@ -31,7 +31,7 @@
         attributes: makeArgNameList([ 'value', 'instanceId' ]),
         description: 'Emitted when the menu closes.',
       }, {
-        name: 'input',
+        name: 'update:modelValue',
         attributes: makeArgNameList([ 'value', 'instanceId' ]),
         description: 'Emitted after value changes.',
       }, {

diff --git a/docs/components/DocProps.vue b/docs/components/DocProps.vue
@@ -222,6 +222,11 @@
         type: 'Number',
         defaultValue: code('300'),
         description: `Sets ${code('maxHeight')} style value of the menu.`,
+      }, {
+        name: 'modelValue',
+        type: `${code('id')} | ${code('node')} | ${code('id[]')} | ${code('node[]')}`,
+        defaultValue: NO_DEFAULT_VALUE,
+        description: `The value of the control. <br>Should be ${code('id')} or ${code('node')} object when ${code(':multiple="false"')}, or an array of ${code('id')} or ${code('node')} object when ${code(':multiple="true"')}. Its format depends on the ${code('valueFormat')} prop. <br>For most cases, just use ${code('v-model')} instead.`,
       }, {
         name: 'multiple',
         type: 'Boolean',
@@ -332,11 +337,6 @@
         type: 'Number',
         defaultValue: code('0'),
         description: 'Tab index of the control.',
-      }, {
-        name: 'value',
-        type: `${code('id')} | ${code('node')} | ${code('id[]')} | ${code('node[]')}`,
-        defaultValue: NO_DEFAULT_VALUE,
-        description: `The value of the control. <br>Should be ${code('id')} or ${code('node')} object when ${code(':multiple="false"')}, or an array of ${code('id')} or ${code('node')} object when ${code(':multiple="true"')}. Its format depends on the ${code('valueFormat')} prop. <br>For most cases, just use ${code('v-model')} instead.`,
       }, {
         name: 'valueConsistsOf',
         type: 'String',

diff --git a/docs/components/VuexSupport.vue b/docs/components/VuexSupport.vue
@@ -4,7 +4,7 @@
       :options="options"
       :value="value"
       :searchable="false"
-      @input="updateValue"
+      @update:modelValue="updateValue"
       />
     <treeselect-value :value="value" />
   </div>

diff --git a/docs/partials/getting-started.pug b/docs/partials/getting-started.pug
@@ -61,8 +61,8 @@ section
     ```html
     <html>
       <head>
-        <!-- include Vue 2.x -->
-        <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
+        <!-- include Vue 3.x -->
+        <script src="https://cdn.jsdelivr.net/npm/vue@^3"></script>
         <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
         <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">

diff --git a/docs/partials/guides.pug b/docs/partials/guides.pug
@@ -132,7 +132,7 @@
 
 +subsection('Vuex Support')
   :markdown-it
-      In all previous examples, we used `v-model` to sync value between application state and vue-treeselect, a.k.a two-way data binding. If you are using Vuex, we could make use of `:value` and `@input`, since `v-model` is just a syntax sugar for them in Vue 2.
+      In all previous examples, we used `v-model` to sync value between application state and vue-treeselect, a.k.a two-way data binding. If you are using Vuex, we could make use of `:modelValue` and `@update:modelValue`, since `v-model` is just a syntax sugar for them in Vue 3.
 
-      Concretely speaking, we can bind `getter` to `:value` to make vue-treeselect reflect any changes in your Vuex state, and bind `action` or `mutation` to `@input` to update your Vuex state whenever the value changes.
+      Concretely speaking, we can bind `getter` to `:modelValue` to make vue-treeselect reflect any changes in your Vuex state, and bind `action` or `mutation` to `@update:modelValue` to update your Vuex state whenever the value changes.
   +demo('VuexSupport')
diff --git a/docs/partials/introduction.pug b/docs/partials/introduction.pug
@@ -12,4 +12,4 @@ section
     - Rich options & highly customizable
     - Supports [a wide range of browsers](https://github.com/riophae/vue-treeselect#browser-compatibility)
 
-    *Requires Vue 2.2+*
+    *Requires Vue 3.0+*
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
   "pre-commit": "lint",
   "dependencies": {
     "@babel/runtime": "^7.3.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "easings-css": "^1.0.0",
     "fuzzysearch": "^1.0.3",
     "is-promise": "^2.1.0",
@@ -43,16 +43,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
-    "@babel/plugin-syntax-jsx": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.3.1",
     "@size-limit/preset-big-lib": "^2.0.2",
+    "@vue/babel-plugin-jsx": "^1.0.2",
+    "@vue/compiler-sfc": "^3.0.5",
     "@vue/test-utils": "1.0.0-beta.16",
     "autoprefixer": "^9.4.6",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.0",
     "babel-plugin-istanbul": "^5.0.1",
-    "babel-plugin-transform-vue-jsx": "^4.0.1",
     "cache-loader": "^4.0.1",
     "chalk": "^2.3.2",
     "codecov": "^3.0.0",
@@ -110,11 +110,9 @@
     "terser-webpack-plugin": "^2.1.0",
     "url-loader": "^2.0.1",
     "vodal": "^2.3.3",
-    "vue": "^2.2.0",
-    "vue-loader": "^15.6.0",
-    "vue-style-loader": "^4.0.2",
-    "vue-template-compiler": "^2.4.4",
-    "vuex": "^3.0.1",
+    "vue": "^3.0.0",
+    "vue-loader": "^16.1.2",
+    "vuex": "^4.0.0-0",
     "webpack": "^4.6.0",
     "webpack-bundle-analyzer": "^3.0.2",
     "webpack-cdn-plugin": "^3.1.4",
@@ -125,7 +123,7 @@
     "yaku": "^0.19.3"
   },
   "peerDependencies": {
-    "vue": "^2.2.0"
+    "vue": "^3.0.0"
   },
   "keywords": [
     "vue",

diff --git a/src/components/HiddenFields.vue b/src/components/HiddenFields.vue
@@ -15,7 +15,7 @@
     functional: true,
 
     render(_, context) {
-      const { instance } = context.injections
+      const instance = this.instance
 
       if (!instance.name || instance.disabled || !instance.hasValue) return null
 

diff --git a/src/components/Menu.vue b/src/components/Menu.vue
@@ -55,7 +55,7 @@
       if (instance.menu.isOpen) this.$nextTick(this.onMenuOpen)
     },
 
-    destroyed() {
+    unmounted() {
       this.onMenuClose()
     },
 
@@ -80,7 +80,7 @@
 
       renderBeforeList() {
         const { instance } = this
-        const beforeListRenderer = instance.$scopedSlots['before-list']
+        const beforeListRenderer = instance.$slots['before-list']
 
         return beforeListRenderer
           ? beforeListRenderer()
@@ -89,7 +89,7 @@
 
       renderAfterList() {
         const { instance } = this
-        const afterListRenderer = instance.$scopedSlots['after-list']
+        const afterListRenderer = instance.$slots['after-list']
 
         return afterListRenderer
           ? afterListRenderer()

diff --git a/src/components/MenuPortal.vue b/src/components/MenuPortal.vue
@@ -125,7 +125,7 @@
       )
     },
 
-    destroyed() {
+    unmounted() {
       this.removeHandlers()
     },
   }

diff --git a/src/components/MultiValueItem.vue b/src/components/MultiValueItem.vue
@@ -29,7 +29,7 @@
         'vue-treeselect__multi-value-item-disabled': node.isDisabled,
         'vue-treeselect__multi-value-item-new': node.isNew,
       }
-      const customValueLabelRenderer = instance.$scopedSlots['value-label']
+      const customValueLabelRenderer = instance.$slots['value-label']
       const labelRenderer = customValueLabelRenderer ? customValueLabelRenderer({ node }) : node.label
 
       return (

diff --git a/src/components/Option.vue b/src/components/Option.vue
@@ -171,7 +171,7 @@
           : NaN
         const labelClassName = 'vue-treeselect__label'
         const countClassName = 'vue-treeselect__count'
-        const customLabelRenderer = instance.$scopedSlots['option-label']
+        const customLabelRenderer = instance.$slots['option-label']
 
         if (customLabelRenderer) return customLabelRenderer({
           node,

diff --git a/src/components/SingleValue.vue b/src/components/SingleValue.vue
@@ -10,7 +10,7 @@
         const { instance } = this
         const node = instance.selectedNodes[0]
 
-        const customValueLabelRenderer = instance.$scopedSlots['value-label']
+        const customValueLabelRenderer = instance.$slots['value-label']
         return customValueLabelRenderer
           ? customValueLabelRenderer({ node })
           : node.label

diff --git a/src/components/Treeselect.vue b/src/components/Treeselect.vue
@@ -10,22 +10,22 @@
     mixins: [ treeselectMixin ],
 
     computed: {
-      wrapperClass() {
-        return {
-          'vue-treeselect': true,
-          'vue-treeselect--single': this.single,
-          'vue-treeselect--multi': this.multiple,
-          'vue-treeselect--searchable': this.searchable,
-          'vue-treeselect--disabled': this.disabled,
-          'vue-treeselect--focused': this.trigger.isFocused,
-          'vue-treeselect--has-value': this.hasValue,
-          'vue-treeselect--open': this.menu.isOpen,
-          'vue-treeselect--open-above': this.menu.placement === 'top',
-          'vue-treeselect--open-below': this.menu.placement === 'bottom',
-          'vue-treeselect--branch-nodes-disabled': this.disableBranchNodes,
-          'vue-treeselect--append-to-body': this.appendToBody,
-        }
-      },
+        wrapperClass() {
+          return {
+            'vue-treeselect': true,
+            'vue-treeselect--single': this.single,
+            'vue-treeselect--multi': this.multiple,
+            'vue-treeselect--searchable': this.searchable,
+            'vue-treeselect--disabled': this.disabled,
+            'vue-treeselect--focused': this.trigger.isFocused,
+            'vue-treeselect--has-value': this.hasValue,
+            'vue-treeselect--open': this.menu.isOpen,
+            'vue-treeselect--open-above': this.menu.placement === 'top',
+            'vue-treeselect--open-below': this.menu.placement === 'bottom',
+            'vue-treeselect--branch-nodes-disabled': this.disableBranchNodes,
+            'vue-treeselect--append-to-body': this.appendToBody,
+          }
+        },
     },
 
     render() {