Nova 4 support; fix bugs

composer.json

@@ -6,9 +6,18 @@
         "nova"
     ],
     "license": "MIT",
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "require": {
         "php": ">=7.1.0"
     },
+    "require-dev": {
+        "laravel/nova": "~4.0"
+    },
     "autoload": {
         "psr-4": {
             "Timothyasp\\Badge\\": "src/"
@@ -22,6 +31,7 @@
         }
     },
     "config": {
+        "preferred-install": "dist",
         "sort-packages": true
     },
     "minimum-stability": "dev",

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,16 @@
+/*!
+ * vuex v4.0.2
+ * (c) 2021 Evan You
+ * @license MIT
+ */
+
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */

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,38 @@
+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'),
+            'laravel-nova-mixins': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/index.js'),
+            '@': path.join(__dirname, 'vendor/laravel/nova/resources/js/'),
+        };
+        webpackConfig.output = {
+            uniqueName: this.name,
+        };
+    }
+}
+
+mix.extend('nova', new NovaExtension());

package.json

@@ -2,19 +2,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",
+        "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",
+        "postcss": "^8.3.11",
+        "vue-loader": "^16.8.3"
     }
 }

resources/js/components/DetailField.vue

@@ -1,19 +1,18 @@
 <template>
-    <panel-item :field="field">
-        <template slot="value">
+    <PanelItem :index="index" :field="field" :field-name="field.name">
+        <template #value>
             <span class="rounded-full uppercase px-2 py-1 text-xs font-bold whitespace-no-wrap"
                   :style="{ backgroundColor: backgroundColor(), color: textColor() }"
             >{{ __(displayValue()) }}</span>
         </template>
-    </panel-item>
-
+    </PanelItem>
 </template>
 
 <script>
     import colors from '../mixins/colors';
     import display from '../mixins/display';
     export default {
-        props: ['resource', 'resourceName', 'resourceId', 'field'],
+        props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
         mixins: [colors, display]
     }
 </script>

resources/js/components/FormField.vue

@@ -1,39 +1,51 @@
 <template>
-    <default-field :field="field">
-        <template slot="field">
-            <select
-                    :id="field.name"
-                    v-model="value"
-                    class="w-full form-control form-select"
-                    :class="errorClasses"
+    <DefaultField :field="currentField" :errors="errors" :show-help-text="showHelpText">
+        <template #field>
+            <SelectControl
+                :id="field.attribute"
+                :dusk="field.attribute"
+                v-model:selected="value"
+                @change="handleChange"
+                class="w-full"
+                :select-classes="{ 'form-input-border-error': hasError }"
+                :options="currentField.options"
+                :disabled="currentlyIsReadonly"
             >
                 <option value="" selected disabled>
                     {{__('Choose an option')}}
                 </option>
 
                 <option
-                        v-for="option in field.options"
+                        v-for="option in currentField.options"
                         :value="option.value"
                         :selected="option.value == value"
                 >
                     {{ option.label }}
                 </option>
-            </select>
+            </SelectControl>
 
             <p v-if="hasError" class="help-text error-text mt-2 text-danger">
                 {{ firstError }}
             </p>
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>
     import { FormField, HandlesValidationErrors } from 'laravel-nova'
 
     export default {
         mixins: [HandlesValidationErrors, FormField],
+        props: ['resourceName', 'resourceId', 'field'],
 
         methods: {
+            /*
+             * Set the initial, internal value for the field.
+             */
+            setInitialValue() {
+                this.value = this.field.value || ''
+            },
+
             /**
              * Provide a function that fills a passed FormData object with the
              * field's internal value attribute. Here we are forcing there to be a

resources/js/field.js

@@ -1,5 +1,9 @@
-Nova.booting((Vue, router) => {
-    Vue.component('index-badge', require('./components/IndexField'));
-    Vue.component('detail-badge', require('./components/DetailField'));
-    Vue.component('form-badge', require('./components/FormField'));
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import SelectField from '../../vendor/laravel/nova/resources/js/fields/Form/SelectField'
+
+Nova.booting((app, router, store) => {
+    app.component('index-badge', IndexField);
+    app.component('detail-badge', DetailField);
+    app.component('form-badge', SelectField);
 })

src/Badge.php

@@ -30,4 +30,5 @@ public function displayUsingLabels()
 
         return $this;
     }
+
 }

webpack.mix.js

@@ -1,5 +1,14 @@
 let mix = require('laravel-mix')
+let path = require('path')
 
-mix.setPublicPath('dist')
+require('./nova.mix')
+
+mix
+    .setPublicPath('dist')
     .js('resources/js/field.js', 'js')
-    .sass('resources/sass/field.scss', 'css')
+    .vue({ version: 3 })
+    .alias({
+        'laravel-nova': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/packages.js'),
+        '@': path.join(__dirname, 'resources/js/')
+    })
+    .nova('timothyasp/nova-badge-field')