Nova 4 Support

README.md

@@ -192,6 +192,6 @@ The field is displayed similarly to the built-in `Laravel\Nova\Fields\Boolean` f
 ### Form
 (Same as detail.)
 
-The indicator is not displayed on forms by default. If you choose to display it as a form field with `showOnUpdate()`, the indicator is not editable and does not write back to the server, as it is intended to come from a read-only or derived model attribute.
+The indicator is not displayed on forms by default. If you choose to display it as a form field with `showOnUpdating()`, the indicator is not editable and does not write back to the server, as it is intended to come from a read-only or derived model attribute.
 
 If you do need an editable status field, you might want to add your own additional `Laravel\Nova\Fields\Select` field to your resource, referencing the same attribute name, and with `onlyOnForms()` set.

composer.json

@@ -4,13 +4,15 @@
     "keywords": [
         "laravel",
         "nova",
+        "nova-4",
         "field",
         "status",
         "indicator"
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^8.0",
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {

dist/mix-manifest.json

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

nova.mix.js

@@ -0,0 +1,37 @@
+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

@@ -2,19 +2,20 @@
     "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"
-    },
-    "dependencies": {
-        "vue": "^2.5.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "laravel-mix": "^6.0.41",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.51.0",
+        "sass-loader": "^12.6.0",
+        "vue-loader": "^16.8.3"
     }
 }

resources/js/components/DetailField.vue

@@ -1,9 +1,9 @@
 <template>
-    <panel-item :field="field">
-        <template slot="value">
-            <indicator-field :field="field"></indicator-field>
+    <PanelItem :field="field">
+        <template #value>
+            <Indicator :field="field"></Indicator>
         </template>
-    </panel-item>
+    </PanelItem>
 </template>
 
 <script>
@@ -13,7 +13,7 @@ export default {
     props: ['resource', 'resourceName', 'resourceId', 'field'],
 
     components: {
-        'indicator-field': Indicator
+        Indicator,
     }
 }
 </script>

resources/js/components/FormField.vue

@@ -1,9 +1,9 @@
 <template>
-    <default-field :field="field">
-        <template slot="field">
-            <indicator-field :field="field"></indicator-field>
+    <DefaultField :field="field">
+        <template #field>
+            <Indicator :field="field"></Indicator>
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>
@@ -14,7 +14,7 @@ export default {
     mixins: [FormField],
 
     components: {
-        'indicator-field': Indicator
+        Indicator
     }
 }
 </script>

resources/js/components/IndexField.vue

@@ -1,5 +1,5 @@
 <template>
-    <indicator-field :field="field"></indicator-field>
+    <Indicator :field="field"></Indicator>
 </template>
 
 <script>
@@ -9,7 +9,7 @@ export default {
     props: ['resourceName', 'field'],
 
     components: {
-        'indicator-field': Indicator
+        Indicator
     }
 }
 </script>

resources/js/components/Indicator.vue

@@ -1,7 +1,7 @@
 <template>
     <span class="whitespace-no-wrap" v-if="!field.shouldHide">
         <span
-            class="inline-block indicator-grey rounded-full w-2 h-2 mr-1"
+            class="inline-block indicator-grey rounded-full w-2 h-2 mr-2"
             v-bind="colorClassStyle"
         />
         <span v-if="labelText">

resources/js/field.js

@@ -1,5 +1,5 @@
 Nova.booting((Vue, router) => {
-    Vue.component('index-indicator-field', require('./components/IndexField'));
-    Vue.component('detail-indicator-field', require('./components/DetailField'));
-    Vue.component('form-indicator-field', require('./components/FormField'));
+    Vue.component('index-indicator-field', require('./components/IndexField').default);
+    Vue.component('detail-indicator-field', require('./components/DetailField').default);
+    Vue.component('form-indicator-field', require('./components/FormField').default);
 })

webpack.mix.js

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