Vue 3

.babelrc → babel.config.js

@@ -1,4 +1,4 @@
-{
+module.exports = {
   "presets": ["@babel/preset-env"],
   "plugins": [
     "@babel/plugin-proposal-object-rest-spread",

build/webpack.base.conf.js

@@ -31,7 +31,7 @@ module.exports = {
   resolve: {
     extensions: ['.js', '.vue', '.json', '.coffee', '.js', '.ts'],
     alias: {
-      'vue$': 'vue/dist/vue.esm.js',
+      'vue': '@vue/runtime-dom',
       '@': resolve('src'),
     }
   },

build/webpack.prod.conf.js

@@ -35,6 +35,9 @@ const webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
     libraryTarget: 'commonjs2'
   },
+  externals: {
+    'vue': 'vue'
+  },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
     // new webpack.DefinePlugin({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vrf",
-  "version": "0.98.2",
+  "version": "0.98.2-alpha.15",
   "description": "",
   "author": "Dmitry Sadovsky <dimailn9@gmail.com>",
   "scripts": {
@@ -12,7 +12,7 @@
     "test": "npm run unit",
     "build": "node build/build.js && npm run build:types",
     "build:types": "tsc ./src/index.ts --outDir dist/static -d --emitDeclarationOnly",
-    "pub": "npm run build && npm publish",
+    "pub": "npm run build && npm publish --tag next",
     "analyze": "webpack --config build/webpack.prod.conf.js --json > stats.json",
     "styleguide": "NODE_ENV=development vue-styleguidist server",
     "styleguide:build": "NODE_ENV=production vue-styleguidist build"
@@ -29,25 +29,26 @@
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
     "lodash.merge": "^4.6.2",
-    "pluralize": "^8.0.0",
-    "vue-provide-observable": "^3.0.2"
+    "pluralize": "^8.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.15",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-classes": "^7.13.0",
     "@babel/plugin-transform-runtime": "^7.13.15",
     "@babel/preset-env": "^7.13.15",
+    "@jest/core": "^28.1.3",
     "@testing-library/jest-dom": "^5.16.5",
-    "@vue/test-utils": "^1.1.4",
+    "@vue/test-utils": "^2.3.2",
+    "@vue/vue3-jest": "^28.1.0",
     "autoprefixer": "^7.1.2",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.1.0",
+    "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.2",
     "bdd-lazy-var": "^2.6.1",
     "chalk": "^2.0.1",
     "chromedriver": "^2.27.2",
-    "coffee-jest": "0.0.1",
+    "coffee-jest": "0.1.0",
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.5.1",
     "copy-webpack-plugin": "^4.0.1",
@@ -57,10 +58,12 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^4.5.2",
-    "jest": "^24.0.0",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-jasmine2": "^29.5.0",
     "jest-serializer-vue": "^0.3.0",
     "nightwatch": "^0.9.12",
-    "node-notifier": "^5.1.2",
+    "node-notifier": "^8.0.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -73,20 +76,18 @@
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
-    "ts-jest": "^24.3.0",
+    "ts-jest": "^28.0.8",
     "ts-loader": "^8.3.0",
-    "typescript": "^4.4.4",
+    "typescript": "^5.6.3",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
-    "vue": "^2.6.11",
-    "vue-jest": "^3.0.7",
-    "vue-loader": "^15.9.8",
+    "vue": "^3.4.21",
+    "vue-loader": "^17.0.1",
     "vue-router": "^3.0.1",
     "vue-style-loader": "^3.0.1",
     "vue-styleguidist": "^4.41.1",
-    "vue-template-compiler": "^2.6.11",
-    "vuex": "^3.6.2",
-    "webpack": "^4.46.0",
+    "vuex": "^4.1.0",
+    "webpack": "^4.47.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.0.0",

playground/index.ts

@@ -1,13 +1,11 @@
-import Vue from 'vue'
+import {createApp} from 'vue'
 import App from './App'
 import Vrf from '../src'
 import sources from './sources'
 
-Vue.config.productionTip = false
+// Vue.config.productionTip = false
 const translate = (propertyName) => propertyName
-Vue.use(Vrf, {sources, translate})
 
-new Vue({
-  el: '#app',
-  render: (h) => h(App)
-})
+createApp(App)
+  .use(Vrf, {sources, translate})
+  .mount("#app")

src/components/descriptors/action.js

@@ -29,13 +29,13 @@ export default {
     },
     $on() {
       return {
-        click: this.onClick
+        onClick: this.onClick
       }
     }
   },
   render: function(h) {
-    if (this.$scopedSlots.activator) {
-      const nodes = this.$scopedSlots['activator']({
+    if (this.$slots.activator) {
+      const nodes = this.$slots['activator']({
         humanName: this.$label,
         label: this.$label,
         on: this.$on,

src/components/descriptors/autocomplete.js

@@ -60,7 +60,7 @@ export default {
     document.addEventListener('click', this.handleDocumentClick)
   },
 
-  beforeDestroy(){
+  beforeUnmount(){
     document.removeEventListener('click', this.handleDocumentClick)
   },
   created() {
@@ -241,10 +241,10 @@ export default {
       return this.$templates[this.type] && this.$templates[this.type].item
     },
     hasItemsSlot() {
-      return !!this.$scopedSlots.items
+      return !!this.$slots.items
     },
     hasItemSlot() {
-      return !!this.$scopedSlots.item
+      return !!this.$slots.item
     },
     $idKey() {
       return this.idKey || this.titleKey
@@ -261,10 +261,7 @@ export default {
         return this.type.setup
       }
 
-      const vue = Object.getPrototypeOf(this.$root).constructor
-
-      const provider = vue.prototype.VueResourceForm.autocompletes?.find((provider) => provider.name === this.type)
-
+      const provider = this.VueResourceForm.autocompletes?.find((provider) => provider.name === this.type)
 
       if (!provider) {
         throw `[vrf] Autocomplete provider for ${this.type} not found`;

src/components/descriptors/base.js

@@ -6,6 +6,11 @@ import set from '@/utils/set'
 import Translate from '@/mixins/translate';
 
 export default {
+  props: {
+    modelValue: [Number, String, Object],
+    disabled: Boolean,
+    readonly: Boolean
+  },
   mixins: [Resource, Translate],
   methods: {
     onBlur: function(e) {
@@ -32,19 +37,20 @@ export default {
       return this.name
     },
     $valuePropSpecified() {
-      return this.value !== undefined
+      return this.modelValue !== undefined
     },
     $originalValue: {
       get() {
         if(this.$valuePropSpecified){
-          return this.value
+          return this.modelValue
         }
 
         return get(this.$resource, this.$fieldName);
       },
       set(value) {
         if(this.$valuePropSpecified){
           this.$emit('input', value)
+          this.$emit('update:modelValue', value)
 
           return
         }
@@ -57,7 +63,7 @@ export default {
 
 
         if (this.$vuex) {
-          const store = this.$store || this.VueResourceForm.store;
+          const store = this.$store || this.config.globalProperties.VueResourceForm.store;
           if (!store) {
             return console.warn("Store for VueResourceForm is not defined");
           }
@@ -67,7 +73,7 @@ export default {
             value
           });
         } else {
-          set(this.$resource, this.$fieldName, value, this.$set);
+          set(this.$resource, this.$fieldName, value);
         }
       }
     },