make changes for nova 4 version

composer.json

@@ -15,7 +15,7 @@
         }
     ],
     "require": {
-        "php": ">=7.1.0"
+        "php": "^7.3|^8.0"
     },
     "autoload": {
         "psr-4": {

dist/css/field.css

@@ -0,0 +1 @@
+

dist/mix-manifest.json

@@ -1,4 +1,4 @@
 {
     "/js/field.js": "/js/field.js",
     "/css/field.css": "/css/field.css"
-}
+}

nova.mix.js

@@ -0,0 +1,33 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+    name() {
+        return 'nova-extension'
+    }
+
+    register(name) {
+        this.name = name
+    }
+
+    webpackConfig(webpackConfig) {
+        webpackConfig.externals = {
+            vue: 'Vue',
+        }
+
+        webpackConfig.resolve.alias = {
+            ...(webpackConfig.resolve.alias || {}),
+            'laravel-nova': path.join(
+                __dirname,
+                '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+            ),
+        }
+
+        webpackConfig.output = {
+            uniqueName: this.name,
+        }
+    }
+}
+
+mix.extend('nova', new NovaExtension())

package.json

@@ -2,19 +2,28 @@
     "private": true,
     "scripts": {
         "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "development": "mix",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "production": "mix --production",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "form-backend-validation": "^2.3.3",
+        "laravel-mix": "^6.0.41",
+        "laravel-nova": "^1.12.3",
+        "lodash": "^4.17.21",
+        "postcss": "^8.3.11",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.32.8",
+        "sass-loader": "10.*",
+        "vue-loader": "^17.0.1"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "cross-env": "^7.0.3",
+        "vue": "^3.2.45"
     }
 }

resources/js/components/FormField.vue

@@ -1,6 +1,6 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
+    <DefaultField :field="field" :errors="errors">
+        <template #field>
             <input
                 :id="field.name"
                 type="text"
@@ -10,7 +10,7 @@
                 v-model="value"
             />
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>

resources/js/components/IndexField.vue

@@ -11,7 +11,7 @@
           v-on="listener"
           :disabled="field.readonly"
       />
-      <span @click="field.editableField = false"
+      <span @click="value = defaultValue; field.editableField = false"
             class="inline-flex cursor-pointer text-danger has-tooltip">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -34,6 +34,27 @@ export default {
   mixins: [FormField, HandlesValidationErrors],
 
   props: ['resourceName', 'field'],
+
+  data() {
+    return {
+      defaultValue: null, 
+    };
+  },
+
+  mounted() {
+    this.defaultValue = this.value;
+  },
+
+  watch: {
+    'field.editableField'(newVal) {
+      if (newVal) {
+        this.value = this.field.value;
+        this.defaultValue = this.field.value;
+      }
+    },
+  },
+
+
   methods: {
     submit() {
       if (this.valueWasNotChanged){
@@ -54,19 +75,33 @@ export default {
           )
           .then(
               (response) => {
-                this.$toasted.show(`${this.field.name} updated`, {
-                  type: 'success',
-                });
+                Nova.success(this.__(`${this.field.name} updated`), { type: 'success' });
+                this.field.value = this.value;
+                this.defaultValue = this.value;
                 if(response.data != undefined){
                   this.refreshTable(response.data);
-                }else{
-                  this.$toasted.show(`Please refresh the page`, {
-                    type: 'success',
+                  this.$inertia.visit(`/resources/${this.resourceName}`, {
+                    only: ['resources'],
+                    preserveScroll: true,
+                    replace: true,
                   });
+                }else{
+                  Nova.success(this.__('Please refresh the page'), { type: 'success' });
                 }
                 this.field.editableField = false;
               },
-              (response) => this.$toasted.show(response, { type: 'error' })
+              (error) => {
+                if (error.response && error.response.status === 422) {
+                  const errors = error.response.data.errors;
+                  const fieldName = this.field.attribute;
+
+                  if (errors[fieldName]) {
+                    Nova.error(this.__(errors[fieldName][0]), { type: 'error' });
+                  }
+                } else {
+                  Nova.error(this.__('Something went wrong'), { type: 'error' });
+                }
+              }
           );
     },
 

resources/js/field.js

@@ -1,5 +1,8 @@
-Nova.booting((Vue, router, store) => {
-  Vue.component('index-nova-inline-text', require('./components/IndexField'));
-  Vue.component('detail-nova-inline-text', require('./components/DetailField'));
-  Vue.component('form-nova-inline-text', require('./components/FormField'));
+import IndexField from './components/IndexField.vue';
+import DetailField from './components/DetailField.vue';
+import FormField from './components/FormField.vue';
+Nova.booting((app, store) => {
+  app.component('index-nova-inline-text', IndexField);
+  app.component('detail-nova-inline-text', DetailField);
+  app.component('form-nova-inline-text', FormField);
 });

webpack.mix.js

@@ -1,6 +1,20 @@
 let mix = require('laravel-mix')
+const path = require('path')
+require('./nova.mix')
 
 mix
-  .setPublicPath('dist')
-  .js('resources/js/field.js', 'js')
-  .sass('resources/sass/field.scss', 'css')
+    .setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+    .vue({ version: 3 })
+    .sass('resources/sass/field.scss', 'css')
+    .nova('pdmfc/nova-inline-text')
+    .alias({
+        '@': 'vendor/laravel/nova/resources/js/',
+    })
+    .webpackConfig({
+        resolve: {
+            alias: {
+                'laravel-nova': path.resolve(__dirname, './node_modules/laravel-nova/dist/index.js'),
+            },
+        },
+    });