Laravel Nova 4 compatibility

composer.json

@@ -13,7 +13,7 @@
         "name": "Ahmed Kandel"
     }],
     "require": {
-        "laravel/nova": "^3.12"
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {

dist/js/tool.js.LICENSE.txt

@@ -21,12 +21,6 @@
  * @license  MIT
  */
 
-/*!
- * Vue.js v2.6.14
- * (c) 2014-2021 Evan You
- * Released under the MIT License.
- */
-
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
 /**

nova.mix.js

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

@@ -1,34 +1,37 @@
 {
     "private": true,
     "scripts": {
+        "development": "mix",
+        "watch-poll": "mix watch -- --watch-options-poll=1000",
+        "production": "mix --production",
+        "nova:install": "npm --prefix='../../vendor/laravel/nova' ci",
         "dev": "mix",
         "watch": "mix watch",
         "hot": "mix watch --hot",
         "prod": "mix --production",
         "format": "prettier --write 'resources/**/*.{css,js,vue}'"
     },
     "devDependencies": {
+        "@vue/compiler-sfc": "^3.2.22",
         "autoprefixer": "^10.4.0",
         "cross-env": "^7.0.3",
-        "laravel-mix": "^6.0.39",
-        "postcss": "^8.4.5",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
         "postcss-dir-pseudo-class": "^6.0.1",
         "postcss-import": "^14.0.1",
         "postcss-logical": "^5.0.1",
         "prettier": "^2.5.1",
         "resolve-url-loader": "^4.0.0",
         "sass": "^1.47.0",
         "sass-loader": "^12.4.0",
-        "vue": "^2.6.14",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.14"
+        "vue-loader": "^16.8.3"
     },
     "dependencies": {
         "@uppy/aws-s3-multipart": "^2.2.0",
+        "@uppy/core": "^2.2.0",
         "@uppy/image-editor": "^1.1.1",
         "@uppy/screen-capture": "^2.0.6",
         "@uppy/vue": "^0.4.5",
-        "@uppy/webcam": "^2.0.5",
-        "laravel-nova": "^1.12.3"
+        "@uppy/webcam": "^2.0.5"
     }
 }

resources/js/components/FileCard.vue

@@ -9,14 +9,14 @@
 
         <div class="flex flex-col justify-center truncate">
             <div>
-                {{fileName || fileKey}}
+                {{ fileName || fileKey }}
             </div>
 
             <div
                 v-if="fileSize"
                 class="mt-2 text-80 text-xs font-semibold"
             >
-                {{formatedFileSize}}
+                {{ formatedFileSize }}
             </div>
         </div>
 
@@ -25,46 +25,45 @@
             class="flex item-center ml-auto"
         >
             <button
-                type="button"
                 v-if="withMeta.canDownload && withMeta.contentDisposition.includes('inline')"
                 v-tooltip.click="__('View')"
+                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
+                type="button"
                 @keydown.enter.prevent="downloadFile('inline')"
                 @click.prevent="downloadFile('inline')"
-                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
             >
-                <icon type="view" view-box="0 0 22 16" width="16" height="16" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" viewBox="0 0 22 16" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
             </button>
 
             <button
-                type="button"
                 v-if="withMeta.canDownload && withMeta.contentDisposition.includes('attachment')"
                 v-tooltip.click="__('Download')"
+                type="button"
+                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
                 @keydown.enter.prevent="downloadFile('attachment')"
                 @click.prevent="downloadFile('attachment')"
-                class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
             >
-                <icon type="download" view-box="2 2 20 20" width="16" height="16" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" viewBox="2 2 20 20" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
             </button>
 
             <button
-                type="button"
                 v-if="withMeta.canDelete"
                 v-tooltip.click="__('Delete')"
-                @keydown.enter.prevent="openRemoveModal"
-                @click.prevent="openRemoveModal"
+                type="button"
                 class="cursor-pointer dim btn btn-link text-primary inline-flex items-center ml-3"
+                @keydown.enter.prevent="removeFile"
+                @click.prevent="removeFile"
             >
-                <icon type="delete" view-box="0 0 20 20" width="16" height="16" />
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="none" viewBox="0 0 20 20" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
             </button>
         </div>
-
-        <portal to="modals">
-            <confirm-upload-removal-modal
-                v-if="removeModalOpen"
-                @confirm="removeFile"
-                @close="closeRemoveModal"
-            />
-        </portal>
     </card>
 </template>
 
@@ -76,13 +75,6 @@ import getFileTypeIcon from "@uppy/dashboard/lib/utils/getFileTypeIcon";
 export default {
     props: ["fileKey", "fileName", "fileSize", "fileMeta", "apiUri", "withMeta"],
 
-    data()
-    {
-        return {
-            removeModalOpen: false,
-        };
-    },
-
     mounted()
     {
         render(
@@ -142,18 +134,12 @@ export default {
                 );
         },
 
-        openRemoveModal()
-        {
-            this.removeModalOpen = true;
-        },
-
-        closeRemoveModal()
-        {
-            this.removeModalOpen = false;
-        },
-
         removeFile()
         {
+            if(!confirm("Are you sure you want to delete this file?")){
+                return;
+            }
+
             Nova.request()
                 .delete(`${this.apiUri}/${this.fileKey}`)
                 .then((response) =>
@@ -172,11 +158,6 @@ export default {
                     {
                         Nova.error(error.message);
                     }
-                )
-                .then(() =>
-                    {
-                        this.closeRemoveModal();
-                    }
                 );
         },
     }

resources/js/components/Tool.vue

@@ -39,12 +39,14 @@ export default {
 
     watch:
     {
-        filesQueue: function ()
-        {
-            if (!this.isSaving && this.filesQueue.length)
-            {
-                this.processQueue();
-            }
+        filesQueue: {
+            handler: function (){
+                if (!this.isSaving && this.filesQueue.length)
+                {
+                    this.processQueue();
+                }
+            },
+            deep: true
         },
     },
 

resources/sass/tool.scss

@@ -50,6 +50,14 @@ $zIndex-5: 15 !default;
 @import '@uppy/image-editor/src/style.scss';
 @import '@uppy/dashboard/src/style.scss';
 
+.uppy-Root {
+    color: rgb(var(--colors-gray-500));
+}
+
+.dark .uppy-Root {
+    color: rgb(var(--colors-gray-400));
+}
+
 // Override Uppy
 .uppy-panel .uppy-Dashboard-inner {
     width: 100%;
@@ -60,21 +68,24 @@ $zIndex-5: 15 !default;
 .uppy-panel .uppy-size--md .uppy-Dashboard-AddFiles-title {
     font-size: 1.5rem;
     max-width: none;
+    color: rgba(var(--colors-gray-500));
+}
+.dark .uppy-Dashboard-AddFiles-title {
+    color: rgba(var(--colors-gray-400));
 }
-
 .uppy-panel .uppy-size--md .uppy-DashboardContent-title,
 .uppy-panel .uppy-size--md .uppy-DashboardContent-back,
 .uppy-panel .uppy-size--md .uppy-DashboardContent-addMore {
     font-size: 1rem;
 }
 
 .uppy-panel .uppy-DashboardContent-back {
-    color: #{"var(--danger)"};
+    color: rgb(var(--colors-rose-600));
     font-weight: 800;
 }
 
 .uppy-panel .uppy-DashboardContent-addMore {
-    color: #{"var(--primary)"};
+    color: rgb(var(--colors-primary-600));
     font-weight: 800;
 }
 
@@ -109,20 +120,32 @@ $zIndex-5: 15 !default;
 
 .uppy-panel .uppy-c-btn-primary,
 .uppy-panel .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
-    background-color: #{"var(--primary)"};
+    background-color: rgb(var(--colors-primary-600));
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
 .uppy-panel .uppy-c-btn-primary:hover,
 .uppy-panel .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload:hover {
-    background-color: #{"var(--primary-dark)"};
+    background-color: rgba(var(--colors-gray-900), 0.6)
 }
 
 .uppy-panel .uppy-DashboardContent-bar,
-.uppy-panel .uppy-StatusBar.is-waiting {
-    border-color: #{"var(--50)"};
+.uppy-panel .uppy-StatusBar.is-waiting,
+.uppy-StatusBar {
+    background-color: var(--colors-gray-100);
+    border-color: rgb(var(--colors-primary-600));
+}
+
+.dark .uppy-panel .uppy-DashboardContent-bar,
+.dark .uppy-panel .uppy-StatusBar.is-waiting,
+.dark .uppy-StatusBar,
+.dark .uppy-StatusBar::before {
+    background-color: rgba(var(--colors-gray-900), 0.6);
 }
 
+.uppy-StatusBar.is-waiting .uppy-StatusBar-actions {
+    background-color:transparent;
+}
 // FilesGrid
 .files-grid {
     display: grid;

src/Http/Controllers/FilesController.php

@@ -5,6 +5,7 @@
 use Ahmedkandel\NovaS3MultipartUpload\NovaS3MultipartUpload;
 use Illuminate\Support\Facades\Storage;
 use Laravel\Nova\Http\Requests\NovaRequest;
+use Laravel\Nova\ResourceToolElement;
 
 class FilesController
 {
@@ -34,13 +35,19 @@ private function init($request)
 
         $this->model = $resource->model();
 
-        $this->tool = collect($resource->availablePanelsForDetail($request, $resource))
+        $fields = $resource->availableFields($request)
+            ->map(
+                fn ($field) => $field instanceof ResourceToolElement
+                    ? $field->assignedPanel
+                    : $field
+            );
+
+        $this->tool = $fields
             ->whereInstanceOf(NovaS3MultipartUpload::class)
             ->firstWhere('attribute', $request->route('field'));
 
         abort_unless($this->tool, 404);
     }
-
     /**
      * Authorize user action.
      *
@@ -234,23 +241,17 @@ public function destroy(NovaRequest $request)
     private function prepareDataForRemoval($fileKey)
     {
         if ($this->tool->isArray) {
-
             return [$this->tool->attribute => null];
-
         } elseif ($this->tool->isMultipleArray) {
-
             return [
                 $this->tool->attribute => collect($this->model->{$this->tool->attribute})->reject(function ($file) use ($fileKey) {
                     return $file[$this->tool->fileKeyColumn] === $fileKey;
                 })->values(),
             ];
-
         } else {
-
             return collect($this->tool->fileInfoColumns())->concat($this->tool->fileMetaColumns())->mapWithKeys(function ($column) {
                 return [$column => null];
             })->all();
-
         }
     }
 }