Nova 4 update (untested)

composer.json

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

dist/css/field.css

@@ -0,0 +1 @@
+

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,7 @@
+/*!
+ * 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 */

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,30 @@
+const mix = require('laravel-mix');
+const webpack = require('webpack');
+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

@@ -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"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "cross-env": "^5.2.1",
+        "laravel-mix": "^6.0.41",
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "vue": "^3.0"
     }
 }

resources/js/components/FormField.vue

@@ -3,11 +3,11 @@
         <template slot="field">
             <div v-if="hasValue" class="mb-6">
                 <template v-if="shouldShowLoader">
-                    <ImageLoader :src="field.thumbnailUrl" class="max-w-xs" @missing="(value) => missing = value" />
+                    <ImageLoader :src="field.thumbnailUrl" class="max-w-xs" @missing="(value) => (missing = value)" />
                 </template>
 
                 <template v-if="field.value && !field.thumbnailUrl">
-                    <card class="flex item-center relative border border-lg border-50 overflow-hidden p-4">
+                    <card class="item-center border-lg border-50 relative flex overflow-hidden border p-4">
                         {{ field.value }}
 
                         <DeleteButton
@@ -19,28 +19,17 @@
                     </card>
                 </template>
 
-                <p
-                    v-if="field.thumbnailUrl"
-                    class="mt-3 flex items-center text-sm"
-                >
-                    <DeleteButton
-                        :dusk="field.attribute + '-delete-link'"
-                        v-if="shouldShowRemoveButton"
-                        @click="confirmRemoval"
-                    >
+                <p v-if="field.thumbnailUrl" class="mt-3 flex items-center text-sm">
+                    <DeleteButton :dusk="field.attribute + '-delete-link'" v-if="shouldShowRemoveButton" @click="confirmRemoval">
                         <span class="class ml-2 mt-1">
-                            {{__('Delete')}}
+                            {{ __('Delete') }}
                         </span>
                     </DeleteButton>
                 </p>
 
                 <portal to="modals">
                     <transition name="fade">
-                        <confirm-upload-removal-modal
-                            v-if="removeModalOpen"
-                            @confirm="removeFile"
-                            @close="closeRemoveModal"
-                        />
+                        <confirm-upload-removal-modal v-if="removeModalOpen" @confirm="removeFile" @close="closeRemoveModal" />
                     </transition>
                 </portal>
             </div>
@@ -56,23 +45,25 @@
                     @change="fileChange"
                 />
                 <label :for="labelFor" class="form-file-btn btn btn-default btn-primary">
-                    {{__('Choose File')}}
+                    {{ __('Choose File') }}
                 </label>
             </span>
 
             <span class="text-gray-50">
                 {{ currentLabel }}
             </span>
 
-            <p v-if="hasError" class="mt-4 text-danger">
+            <p v-if="hasError" class="text-danger mt-4">
                 {{ firstError }}
             </p>
         </template>
     </default-field>
 </template>
 
 <script>
-import { DeleteButton, ImageLoader, FormField, HandlesValidationErrors, Errors } from 'laravel-nova'
+import DeleteButton from '@/components/DeleteButton';
+import ImageLoader from '@/components/ImageLoader';
+import { FormField, HandlesValidationErrors, Errors } from '@/mixins';
 
 export default {
     props: ['resourceId', 'relatedResourceName', 'relatedResourceId', 'viaRelationship'],
@@ -92,134 +83,119 @@ export default {
     }),
 
     mounted() {
-        this.field.fill = formData => {
+        this.field.fill = (formData) => {
             if (this.file) {
-                formData.append(this.field.attribute, this.file, this.fileName)
+                formData.append(this.field.attribute, this.file, this.fileName);
             }
-        }
+        };
     },
 
     methods: {
         /**
          * Responsd to the file change
          */
         fileChange(event) {
-            let path = event.target.value
-            let fileName = path.match(/[^\\/]*$/)[0]
-            this.fileName = fileName
-            this.file = this.$refs.fileField.files[0]
+            let path = event.target.value;
+            let fileName = path.match(/[^\\/]*$/)[0];
+            this.fileName = fileName;
+            this.file = this.$refs.fileField.files[0];
         },
 
         /**
          * Confirm removal of the linked file
          */
         confirmRemoval() {
-            this.removeModalOpen = true
+            this.removeModalOpen = true;
         },
 
         /**
          * Close the upload removal modal
          */
         closeRemoveModal() {
-            this.removeModalOpen = false
+            this.removeModalOpen = false;
         },
 
         /**
          * Remove the linked file from storage
          */
         async removeFile() {
-            this.uploadErrors = new Errors()
+            this.uploadErrors = new Errors();
 
-            const {
-                resourceName,
-                resourceId,
-                relatedResourceName,
-                relatedResourceId,
-                viaRelationship,
-            } = this
-            const attribute = this.field.attribute
+            const { resourceName, resourceId, relatedResourceName, relatedResourceId, viaRelationship } = this;
+            const attribute = this.field.attribute;
 
             const uri = this.viaRelationship
                 ? `/nova-api/${resourceName}/${resourceId}/${relatedResourceName}/${relatedResourceId}/field/${attribute}?viaRelationship=${viaRelationship}`
-                : `/nova-api/${resourceName}/${resourceId}/field/${attribute}`
+                : `/nova-api/${resourceName}/${resourceId}/field/${attribute}`;
 
             try {
-                await Nova.request().delete(uri)
-                this.closeRemoveModal()
-                this.deleted = true
-                this.$emit('file-deleted')
+                await Nova.request().delete(uri);
+                this.closeRemoveModal();
+                this.deleted = true;
+                this.$emit('file-deleted');
             } catch (error) {
-                this.closeRemoveModal()
+                this.closeRemoveModal();
 
                 if (error.response.status == 422) {
-                    this.uploadErrors = new Errors(error.response.data.errors)
+                    this.uploadErrors = new Errors(error.response.data.errors);
                 }
             }
         },
     },
 
     computed: {
         hasError() {
-            return (
-                this.errors.has(this.fieldAttribute) || this.uploadErrors.has(this.fieldAttribute)
-            )
+            return this.errors.has(this.fieldAttribute) || this.uploadErrors.has(this.fieldAttribute);
         },
 
         firstError() {
             if (this.hasError) {
-                return (
-                    this.errors.first(this.fieldAttribute) ||
-                    this.uploadErrors.first(this.fieldAttribute)
-                )
+                return this.errors.first(this.fieldAttribute) || this.uploadErrors.first(this.fieldAttribute);
             }
         },
 
         /**
          * The current label of the file field
          */
         currentLabel() {
-            return this.fileName || this.label
+            return this.fileName || this.label;
         },
 
         /**
          * The ID attribute to use for the file field
          */
         idAttr() {
-            return this.labelFor
+            return this.labelFor;
         },
 
         /**
          * The label attribute to use for the file field
          * @return {[type]} [description]
          */
         labelFor() {
-            return `file-${this.field.attribute}`
+            return `file-${this.field.attribute}`;
         },
 
         /**
          * Determine whether the field has a value
          */
         hasValue() {
-            return (
-                Boolean(this.field.value || this.field.thumbnailUrl) &&
-                !Boolean(this.deleted) &&
-                !Boolean(this.missing)
-            )
+            return Boolean(this.field.value || this.field.thumbnailUrl) && !Boolean(this.deleted) && !Boolean(this.missing);
         },
 
         /**
          * Determine whether the field should show the loader component
          */
         shouldShowLoader() {
-            return !Boolean(this.deleted) && Boolean(this.field.thumbnailUrl)
+            return !Boolean(this.deleted) && Boolean(this.field.thumbnailUrl);
         },
 
         /**
          * Determine whether the field should show the remove button
          */
         shouldShowRemoveButton() {
-            return Boolean(this.field.deletable)
+            return Boolean(this.field.deletable);
         },
     },
-}
+};
 </script>

resources/js/field.js

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

vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+    chainWebpack: (config) => {
+        config.resolve.alias.set('vue', '@vue/compat');
+
+        config.module
+            .rule('vue')
+            .use('vue-loader')
+            .tap((options) => {
+                return {
+                    ...options,
+                    compilerOptions: {
+                        compatConfig: {
+                            MODE: 2,
+                        },
+                    },
+                };
+            });
+    },
+};

webpack.mix.js

@@ -1,9 +1,19 @@
-let mix = require('laravel-mix')
+let mix = require('laravel-mix');
+let path = require('path');
+require('./nova.mix');
 
-mix.js('resources/js/field.js', 'dist/js')
-   .sass('resources/sass/field.scss', 'dist/css')
+mix.setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+    .sass('resources/sass/field.scss', 'dist/css')
     .webpackConfig({
         resolve: {
-            symlinks: false
-        }
+            symlinks: false,
+        },
     })
+    .vue({ version: 3 })
+    .nova('davidpiesse/nova-audio');
+
+mix.alias({
+    'laravel-nova': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/packages.js'),
+    '@': path.join(__dirname, '../../vendor/laravel/nova/resources/js'),
+});