Compatability fix for Nova 4 🏄

oleg.khalin · oleg.khalin · commit e897e86822ed · 2022-04-18T11:52:45.000+02:00
Minor design changes
diff --git a/.github/images/demo.png b/.github/images/demo.png
diff --git a/README.md b/README.md
@@ -3,15 +3,15 @@ Searchable Nova filter for belongsTo relationships.
 
 ### Demo
 
-![demo](https://user-images.githubusercontent.com/4764281/69803436-76184200-11dc-11ea-9c19-4eacf1ba3b4c.gif)
+![demo](./.github/images/demo.png)
 
 ### Prerequisites
 
 This package assumes you have a text-search setup for your Eloquent models. See [Laravel Scout](https://laravel.com/docs/master/scout).
 
 ### Installation
 
-`composer require suenerds/nova-searchable-belongs-to-filter`
+`composer require khalin/nova4-searchable-belongs-to-filter`
 
 ### Usage
 
@@ -23,7 +23,7 @@ By default the filter will display the name of the `fieldAttribute` you passed o
 ```php
 // app/Nova/User.php
 
-use Suenerds\NovaSearchableBelongsToFilter\NovaSearchableBelongsToFilter
+use Khalin\Nova4SearchableBelongsToFilter\NovaSearchableBelongsToFilter
 
 public function filters(Request $request)
 {
diff --git a/composer.json b/composer.json
@@ -1,25 +1,27 @@
 {
-    "name": "suenerds/nova-searchable-belongs-to-filter",
-    "description": "Searchable Nova filter for belongsTo relationships.",
+    "name": "khalin/nova4-searchable-belongs-to-filter",
+    "description": "Searchable Nova 4 filter for belongsTo relationships.",
     "keywords": [
         "laravel",
         "nova",
-	"filter",
-	"belongs-to"
+        "nova-4",
+        "filter",
+        "belongs-to"
     ],
     "license": "MIT",
     "require": {
-        "php": ">=7.1.0"
+        "php": ">=7.1.0",
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {
-            "Suenerds\\NovaSearchableBelongsToFilter\\": "src/"
+            "Khalin\\Nova4SearchableBelongsToFilter\\": "src/"
         }
     },
     "extra": {
         "laravel": {
             "providers": [
-                "Suenerds\\NovaSearchableBelongsToFilter\\FilterServiceProvider"
+                "Khalin\\Nova4SearchableBelongsToFilter\\FilterServiceProvider"
             ]
         }
     },
diff --git a/dist/css/filter.css b/dist/css/filter.css
diff --git a/dist/js/filter.js b/dist/js/filter.js
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
diff --git a/package.json b/package.json
@@ -2,19 +2,23 @@
     "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",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --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",
         "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": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@vue/compiler-sfc": "^3.2.33",
         "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
+        "laravel-mix": "^4.0.7|^6.0",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.50.0",
+        "sass-loader": "^12.1.0",
+        "vue-loader": "^16.2.0"
     },
     "dependencies": {
-        "laravel-nova": "^1.0.9",
         "vue": "^2.5.0"
     }
 }
diff --git a/resources/js/components/Filter.vue b/resources/js/components/Filter.vue
@@ -1,6 +1,6 @@
 <template>
-    <div>
-        <h3 class="text-sm uppercase tracking-wide text-80 bg-30 p-3">
+    <div class="pt-2 pb-3">
+        <h3 class="px-3 text-xs uppercase font-bold tracking-wide">
             {{ filter.name }}
         </h3>
 
@@ -15,49 +15,50 @@
                 trackBy="value"
                 searchBy="display"
             >
-                <div
-                    slot="default"
-                    v-if="value"
-                    class="flex items-center"
+                <template
+                    #default
                 >
-                    <div
-                        v-if="value.avatar"
-                        class="mr-3"
-                    >
-                        <img
-                            :src="value.avatar"
-                            class="w-8 h-8 rounded-full block"
-                        />
-                    </div>
+                    <div v-if="value"
+                         class="flex items-center">
+                        <div
+                            v-if="value.avatar"
+                            class="mr-3"
+                        >
+                            <img
+                                :src="value.avatar"
+                                class="w-8 h-8 rounded-full block"
+                            />
+                        </div>
 
-                    {{ value.display }}
-                </div>
+                        {{ value.display }}
+                    </div>
+                </template>
 
-                <div
-                    slot="option"
-                    slot-scope="{ option, selected }"
-                    class="flex items-center"
-                >
+                <template #option="{ option, selected }">
                     <div
-                        v-if="option.avatar"
-                        class="mr-3"
+                        class="flex items-center"
                     >
-                        <img
-                            :src="option.avatar"
-                            class="w-8 h-8 rounded-full block"
-                        />
-                    </div>
+                        <div
+                            v-if="option.avatar"
+                            class="mr-3"
+                        >
+                            <img
+                                :src="option.avatar"
+                                class="w-8 h-8 rounded-full block"
+                            />
+                        </div>
 
-                    {{ option.display }}
-                </div>
+                        {{ option.display }}
+                    </div>
+                </template>
             </search-input>
 
         </div>
     </div>
 </template>
 
 <script>
-import { PerformsSearches } from "laravel-nova"
+import PerformsSearches from "laravel-nova-performs-searches"
 import storage from '../storage/BelongsToFieldStorage'
 
 export default {
@@ -84,7 +85,7 @@ export default {
                         search: this.search,
                     },
                 }
-            ).then(({ data: { resources } }) => {
+            ).then(({data: {resources}}) => {
                 this.availableResources = resources;
             });
         },
diff --git a/resources/js/filter.js b/resources/js/filter.js
@@ -1,3 +1,5 @@
+import Filter from "./components/Filter"
+
 Nova.booting((Vue, router, store) => {
-  Vue.component('nova-searchable-belongs-to-filter', require('./components/Filter'))
+  Vue.component('nova-searchable-belongs-to-filter', Filter)
 })
diff --git a/src/FilterServiceProvider.php b/src/FilterServiceProvider.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Suenerds\NovaSearchableBelongsToFilter;
+namespace Khalin\Nova4SearchableBelongsToFilter;
 
 use Illuminate\Support\ServiceProvider;
 use Laravel\Nova\Events\ServingNova;
diff --git a/src/NovaSearchableBelongsToFilter.php b/src/NovaSearchableBelongsToFilter.php
@@ -1,6 +1,6 @@
 <?php
 
-namespace Suenerds\NovaSearchableBelongsToFilter;
+namespace Khalin\Nova4SearchableBelongsToFilter;
 
 use Illuminate\Http\Request;
 use Laravel\Nova\Filters\Filter;
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -1,6 +1,20 @@
 let mix = require('laravel-mix')
+let path = require('path')
 
 mix
-  .setPublicPath('dist')
-  .js('resources/js/filter.js', 'js')
-  .sass('resources/sass/filter.scss', 'css')
+    .setPublicPath('dist')
+    .alias({
+        'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
+        'laravel-nova-performs-searches': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/PerformsSearches.js'),
+    })
+    .vue({version: 3})
+    .webpackConfig({
+        externals: {
+            vue: 'Vue',
+        },
+        output: {
+            uniqueName: 'vendor/package',
+        }
+    })
+    .js('resources/js/filter.js', 'js')
+    .sass('resources/sass/filter.scss', 'css')
