Nova 4 support

composer.json

@@ -13,7 +13,7 @@
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": "^7.3|^8.0"
     },
     "autoload": {
         "psr-4": {
@@ -30,6 +30,15 @@
     "config": {
         "sort-packages": true
     },
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
+    "require-dev": {
+        "laravel/nova": "^4.1"
+    },
     "minimum-stability": "dev",
     "prefer-stable": true
 }

dist/mix-manifest.json

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

nova.mix.js

@@ -0,0 +1,32 @@
+const mix = require('laravel-mix')
+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

@@ -4,19 +4,18 @@
     "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"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
-    },
-    "dependencies": {
-        "vue": "^2.5.0"
+        "@vue/babel-plugin-jsx": "^1.1.1",
+        "@vue/compiler-sfc": "^3.2.22",
+        "laravel-mix": "^6.0.41",
+        "laravel-nova": "^1.12.3",
+        "vue-loader": "^16.8.3"
     }
 }

resources/js/components/DetailField.vue

@@ -12,7 +12,7 @@
                 >
                     <span
                         class="inline-block rounded-full w-2 h-2 mr-1"
-                        :class="optionClass(option)"
+                        :style="optionStyle(option)"
                     />
                     <span>{{ label }}</span>
                 </div>
@@ -26,12 +26,11 @@ export default {
     props: ['resource', 'resourceName', 'resourceId', 'field'],
 
     methods: {
-        optionClass(option) {
-            return {
-                'bg-success': this.field.value ? this.field.value.includes(option) : false,
-                'bg-danger': this.field.value ? !this.field.value.includes(option) : true,
-            }
-        },
+      optionStyle(option) {
+          return {
+            'background': this.field.value && this.field.value.includes(option) ? 'rgba(var(--colors-green-500),var(--tw-text-opacity))' : 'rgba(var(--colors-red-500),var(--tw-text-opacity))',
+          }
+      },
     },
 }
 </script>

resources/js/components/FormField.vue

@@ -1,6 +1,6 @@
 <template>
     <default-field :field="field" full-width-content>
-        <template slot="field">
+        <template #field>
             <div
                 :style="{columnCount: this.field.columns}"
                 class="w-full max-col-2"

resources/js/components/IndexField.vue

@@ -1,11 +1,11 @@
 <template>
-    <span class="w-full">
+    <span class="w-full" style="max-width: 400px; display: flex; flex-wrap: wrap; gap: .25rem;">
         <span
             v-for="(value, option) in availableOptions"
             :key="option"
-            :class="optionClass(option)"
             :title="value"
-            class="inline-block rounded-full w-2 h-2 mr-1"
+            class="inline-block rounded-full w-2 h-2"
+            :style="optionStyle(option)"
         />
     </span>
 </template>
@@ -21,10 +21,10 @@ export default {
     },
 
     methods: {
-        optionClass(option) {
+        optionStyle(option) {
+            const color  = this.field.value && this.field.value.includes(option) ? 'green' : 'red'
             return {
-                'bg-success': this.field.value ? this.field.value.includes(option) : false,
-                'bg-danger': this.field.value ? !this.field.value.includes(option) : true,
+                'background': `rgba(var(--colors-${color}-500),var(--tw-text-opacity))`
             }
         },
     },

resources/js/field.js

@@ -1,9 +1,9 @@
-import Vue from 'vue'
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
 
-Vue.config.devtools = true
-
-Nova.booting((Vue, router) => {
-    Vue.component('index-novafieldcheckboxes', require('./components/IndexField'));
-    Vue.component('detail-novafieldcheckboxes', require('./components/DetailField'));
-    Vue.component('form-novafieldcheckboxes', require('./components/FormField'));
+Nova.booting((Vue) => {
+    Vue.component('index-novafieldcheckboxes', IndexField)
+    Vue.component('detail-novafieldcheckboxes', DetailField)
+    Vue.component('form-novafieldcheckboxes', FormField)
 })

src/FieldServiceProvider.php

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

webpack.mix.js

@@ -1,9 +1,8 @@
-let mix = require('laravel-mix')
+const mix = require('laravel-mix')
+require('./nova.mix')
 
-mix.js('resources/js/field.js', 'dist/js')
-   .sass('resources/sass/field.scss', 'dist/css')
-    .webpackConfig({
-        resolve: {
-            symlinks: false
-        }
-    })
+mix
+  .setPublicPath("dist")
+  .js("resources/js/field.js", "js")
+  .vue({ version: 3 })
+  .nova("silvanite/novafieldcheckboxes");