Support Nova V4

composer.json

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

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

dist/mix-manifest.json

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

nova.mix.js

@@ -0,0 +1,40 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackPlugins() {
+    return new webpack.ProvidePlugin({
+      _: 'lodash',
+      Errors: 'form-backend-validation',
+    })
+  }
+
+  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

@@ -1,20 +1,22 @@
 {
-    "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",
-        "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"
-    },
-    "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
-    },
-    "dependencies": {
-        "vue": "^2.5.0"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.22",
+    "form-backend-validation": "^2.3.3",
+    "laravel-mix": "^6.0.41",
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.11",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {}
 }

postcss.config.js

@@ -0,0 +1 @@
+module.exports = {}

resources/js/components/DetailField.vue

@@ -1,9 +1,9 @@
 <template>
-    <panel-item :field="field" />
+    <PanelItem :index="index" :field="field" />
 </template>
 
 <script>
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+    props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 }
 </script>

resources/js/components/FormField.vue

@@ -1,16 +1,21 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
+    <DefaultField
+        :field="field"
+        :errors="errors"
+        :show-help-text="showHelpText"
+        :full-width-content="fullWidthContent"
+    >
+        <template #field>
             <input
-                :id="field.name"
+                :id="field.attribute"
                 type="text"
-                class="w-full form-control form-input form-input-bordered"
+                class="w-full form-control form-input form-control-bordered"
                 :class="errorClasses"
                 :placeholder="field.name"
                 v-model="value"
             />
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>
@@ -33,14 +38,7 @@ export default {
          * Fill the given FormData object with the field's internal value.
          */
         fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
-        },
-
-        /**
-         * Update the field's internal value.
-         */
-        handleChange(value) {
-            this.value = value
+            formData.append(this.fieldAttribute, this.value || '')
         },
     },
 }

resources/js/components/IndexField.vue

@@ -37,13 +37,13 @@ export default {
         )
         .then(
           () => {
-            this.$toasted.show(`${this.field.name} updated`, {
-              type: 'success',
-            });
+              Nova.success(this.field.successMessage ? this.field.successMessage : `${this.field.name} updated`);
 
             this.refreshTable();
           },
-          (response) => this.$toasted.show(response, { type: 'error' })
+          (response) => {
+              Nova.error(response?.response?.data?.message ?? response)
+          }
         );
     },
 

resources/js/field.js

@@ -1,5 +1,9 @@
-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'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
+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)
+})

src/InlineText.php

@@ -31,6 +31,13 @@ class InlineText extends Field
      */
     protected $event = 'keyup.enter';
 
+    /**
+     * The message to be displayed when the field is saved.
+     *
+     * @var string|null
+     */
+    protected $successMessage = null;
+
     /**
      * Allows field to be editable on index view.
      *
@@ -63,8 +70,17 @@ public function refreshOnSaving()
     }
 
     /**
+     * Set the message to be displayed when the field is saved.
      *
+     * @return self
      */
+    public function successMessage(string $message)
+    {
+        $this->successMessage = $message;
+
+        return $this;
+    }
+
     public function saveOn(string $event)
     {
         $this->event = $event;
@@ -86,6 +102,7 @@ public function resolve($resource, $attribute = null)
         $this->withMeta([
             'inlineOnIndex' => $this->inlineOnIndex,
             'refreshOnSaving' => $this->refreshOnSaving,
+            'successMessage' => $this->successMessage,
             'event' => $this->event,
         ]);
     }

src/InlineTextFieldServiceProvider.php

@@ -17,7 +17,6 @@ public function boot()
     {
         Nova::serving(function (ServingNova $event) {
             Nova::script('nova-inline-text', __DIR__ . '/../dist/js/field.js');
-            Nova::style('nova-inline-text', __DIR__ . '/../dist/css/field.css');
         });
     }
 

webpack.mix.js

@@ -1,6 +1,9 @@
 let mix = require('laravel-mix')
 
+require('./nova.mix')
+
 mix
   .setPublicPath('dist')
   .js('resources/js/field.js', 'js')
-  .sass('resources/sass/field.scss', 'css')
+  .vue({ version: 3 })
+  .nova('pdmfc/nova-inline-text')