support nova 4

composer.json

@@ -10,7 +10,8 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^8.0",
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {

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": {}
 }

resources/js/components/DetailField.vue

@@ -1,19 +1,19 @@
 <template>
-    <panel-item :field="field">
-        <template slot="value">
-            <email-field :field="field" :clickable="field.clickable"></email-field>
-        </template>
-    </panel-item>
+  <PanelItem :index="index" :field="field">
+    <template #value>
+      <EmailField :field="field" :clickable="field.clickable" />
+    </template>
+  </PanelItem>
 </template>
 
 <script>
-import Email from './Email'
+import EmailField from './EmailField'
 
 export default {
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
-    components: {
-        'email-field': Email
-    }
+  components: {
+    EmailField
+  }
 }
 </script>

resources/js/components/FormField.vue

@@ -1,41 +1,43 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-            <input
-                class="w-full form-control form-input form-input-bordered"
-                :id="field.attribute"
-                :dusk="field.attribute"
-                v-model="value"
-                v-bind="extraAttributes"
-                :disabled="isReadonly"
-            />
-        </template>
-    </default-field>
+  <DefaultField :field="currentField" :errors="errors" :show-help-text="showHelpText">
+    <template #field>
+      <input v-bind="extraAttributes" class="w-full form-control form-input form-input-bordered" @input="handleChange"
+        :value="value" :id="currentField.uniqueKey" :dusk="field.attribute" :disabled="currentlyIsReadonly"
+        :list="`${field.attribute}-list`" />
+
+      <datalist v-if="currentField.suggestions && currentField.suggestions.length > 0" :id="`${field.attribute}-list`">
+        <option :key="suggestion" v-for="suggestion in currentField.suggestions" :value="suggestion" />
+      </datalist>
+    </template>
+  </DefaultField>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
 
 export default {
-    mixins: [HandlesValidationErrors, FormField],
+  mixins: [HandlesValidationErrors, DependentFormField],
 
-    computed: {
-        defaultAttributes() {
-            return {
-                type: this.field.type || 'email',
-                placeholder: this.field.placeholder || this.field.name,
-                class: this.errorClasses,
-            }
-        },
+  computed: {
+    defaultAttributes() {
+      return {
+        type: this.currentField.type || 'email',
+        placeholder: this.currentField.placeholder || this.field.name,
+        class: this.errorClasses,
+      }
+    },
 
-        extraAttributes() {
-            const attrs = this.field.extraAttributes
+    extraAttributes() {
+      const attrs = this.field.extraAttributes
 
-            return {
-                ...this.defaultAttributes,
-                ...attrs,
-            }
-        },
+      return {
+        // Leave the default attributes even though we can now specify
+        // whatever attributes we like because the old number field still
+        // uses the old field attributes
+        ...this.defaultAttributes,
+        ...attrs,
+      }
     },
+  },
 }
 </script>

resources/js/components/IndexField.vue

@@ -1,15 +1,15 @@
 <template>
-    <email-field :field="field" :clickable="field.clickableOnIndex"></email-field>
+  <EmailField :field="field" :clickable="field.clickable" />
 </template>
 
 <script>
-import Email from './Email'
+import EmailField from './EmailField'
 
 export default {
-    props: ['resourceName', 'field'],
+  props: ['resourceName', 'field'],
 
-    components: {
-        'email-field': Email
-    }
+  components: {
+    EmailField
+  }
 }
 </script>

resources/js/field.js

@@ -1,5 +1,9 @@
-Nova.booting((Vue, router) => {
-    Vue.component('index-email-field', require('./components/IndexField'));
-    Vue.component('detail-email-field', require('./components/DetailField'));
-    Vue.component('form-email-field', 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-inspheric-email-field', IndexField)
+  app.component('detail-inspheric-email-field', DetailField)
+  app.component('form-inspheric-email-field', FormField)
 })

src/Email.php

@@ -11,7 +11,7 @@ class Email extends Text
      *
      * @var string
      */
-    public $component = 'email-field';
+    public $component = 'inspheric-email-field';
 
     /**
      * Whether the email should be displayed as a clickable

src/EmailFieldServiceProvider.php

@@ -2,9 +2,9 @@
 
 namespace Inspheric\Fields;
 
-use Laravel\Nova\Nova;
-use Laravel\Nova\Events\ServingNova;
 use Illuminate\Support\ServiceProvider;
+use Laravel\Nova\Events\ServingNova;
+use Laravel\Nova\Nova;
 
 class EmailFieldServiceProvider extends ServiceProvider
 {
@@ -16,7 +16,7 @@ class EmailFieldServiceProvider extends ServiceProvider
     public function boot()
     {
         Nova::serving(function (ServingNova $event) {
-            Nova::script('email', __DIR__.'/../dist/js/field.js');
+            Nova::script('inspheric-email-field', __DIR__.'/../dist/js/field.js');
         });
     }
 

webpack.mix.js

@@ -1,8 +1,9 @@
 let mix = require('laravel-mix')
 
-mix.js('resources/js/field.js', 'dist/js')
-    .webpackConfig({
-        resolve: {
-            symlinks: false
-        }
-    })
+require('./nova.mix')
+
+mix
+  .setPublicPath('dist')
+  .js('resources/js/field.js', 'js')
+  .vue({ version: 3 })
+  .nova('inspheric/nova-email-field')