Merge pull request #21 from suenerds/20-upgrade-to-nova-4

20 upgrade to nova 4
suenerds · Jan 24, 2024 · 98b6ae2 · 98b6ae2
2 parents e9cbb26 + c45675f
commit 98b6ae2
Show file tree

Hide file tree

Showing 11 changed files with 173 additions and 154 deletions.
diff --git a/composer.json b/composer.json
@@ -1,31 +1,33 @@
 {
-    "name": "suenerds/nova-searchable-belongs-to-filter",
-    "description": "Searchable Nova filter for belongsTo relationships.",
-    "keywords": [
-        "laravel",
-        "nova",
-	"filter",
-	"belongs-to"
-    ],
-    "license": "MIT",
-    "require": {
-        "php": ">=7.1.0"
-    },
-    "autoload": {
-        "psr-4": {
-            "Suenerds\\NovaSearchableBelongsToFilter\\": "src/"
-        }
-    },
-    "extra": {
-        "laravel": {
-            "providers": [
-                "Suenerds\\NovaSearchableBelongsToFilter\\FilterServiceProvider"
-            ]
-        }
-    },
-    "config": {
-        "sort-packages": true
-    },
-    "minimum-stability": "dev",
-    "prefer-stable": true
+  "name": "suenerds/nova-searchable-belongs-to-filter",
+  "description": "Searchable Nova filter for belongsTo relationships.",
+  "keywords": [
+    "laravel",
+    "nova",
+    "filter",
+    "belongs-to"
+  ],
+  "license": "MIT",
+  "require": {
+    "php": ">=8.0",
+    "laravel/framework": "^9.0",
+    "laravel/nova": "^4.0"
+  },
+  "autoload": {
+    "psr-4": {
+      "Suenerds\\NovaSearchableBelongsToFilter\\": "src/"
+    }
+  },
+  "extra": {
+    "laravel": {
+      "providers": [
+        "Suenerds\\NovaSearchableBelongsToFilter\\FilterServiceProvider"
+      ]
+    }
+  },
+  "config": {
+    "sort-packages": true
+  },
+  "minimum-stability": "dev",
+  "prefer-stable": true
 }
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
@@ -1,4 +1,3 @@
 {
-    "/js/filter.js": "/js/filter.js",
-    "/css/filter.css": "/css/filter.css"
-}
+    "/js/filter.js": "/js/filter.js"
+}
diff --git a/nova.mix.js b/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 || {}),
+      "performs-searches": path.join(
+        __dirname,
+        "vendor/laravel/nova/resources/js/mixins/PerformsSearches.js"
+      ),
+    };
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    };
+  }
+}
+
+mix.extend("nova", new NovaExtension());
diff --git a/package.json b/package.json
@@ -1,20 +1,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",
-        "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"
-    },
-    "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0"
-    },
-    "dependencies": {
-        "laravel-nova": "^1.0.9",
-        "vue": "^2.5.0"
-    }
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.22",
+    "laravel-mix": "^6.0.41",
+    "postcss": "^8.3.11",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {}
 }
diff --git a/resources/css/filter.css b/resources/css/filter.css
@@ -0,0 +1 @@
+/* Nova Filter CSS */
diff --git a/resources/js/components/Filter.vue b/resources/js/components/Filter.vue
@@ -1,118 +1,97 @@
 <template>
-    <div>
-        <h3 class="text-sm uppercase tracking-wide text-80 bg-30 p-3">
-            {{ filter.name }}
-        </h3>
+  <div class="pt-2 pb-3">
+    <h3 class="px-3 text-xs uppercase font-bold tracking-wide">
+      {{ filter.name }}
+    </h3>
 
-        <div class="p-2">
-            <search-input
-                @input="performSearch"
-                @clear="clearSelection"
-                @selected="handleChange"
-                :value="value"
-                :data="availableResources"
-                :clearable="false"
-                trackBy="value"
-                searchBy="display"
-            >
-                <div
-                    slot="default"
-                    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>
+    <div class="mt-1 px-3">
+      <SearchInput
+        @input="performSearch"
+        @clear="clearSelection"
+        @selected="handleChange"
+        :value="value"
+        :data="availableResources"
+        :clearable="false"
+        trackBy="value"
+        searchBy="display"
+      >
+        <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>
-
-                <div
-                    slot="option"
-                    slot-scope="{ option, selected }"
-                    class="flex items-center"
-                >
-                    <div
-                        v-if="option.avatar"
-                        class="mr-3"
-                    >
-                        <img
-                            :src="option.avatar"
-                            class="w-8 h-8 rounded-full block"
-                        />
-                    </div>
+          {{ value.display }}
+        </div>
 
-                    {{ option.display }}
-                </div>
-            </search-input>
+        <template #option="{ selected, option }">
+          <div class="flex items-center">
+            <div v-if="option.avatar" class="mr-3">
+              <img :src="option.avatar" class="w-8 h-8 rounded-full block" />
+            </div>
 
-        </div>
+            {{ option.display }}
+          </div>
+        </template>
+      </SearchInput>
     </div>
+  </div>
 </template>
 
 <script>
-import { PerformsSearches } from "laravel-nova"
-import storage from '../storage/BelongsToFieldStorage'
+import PerformsSearches from "performs-searches";
+import storage from "../storage/BelongsToFieldStorage";
 
 export default {
-    mixins: [PerformsSearches],
+  mixins: [PerformsSearches],
 
-    props: {
-        resourceName: {
-            type: String,
-            required: true,
-        },
-        filterKey: {
-            type: String,
-            required: true,
-        },
+  props: {
+    resourceName: {
+      type: String,
+      required: true,
+    },
+    filterKey: {
+      type: String,
+      required: true,
     },
+  },
 
-    methods: {
-        getAvailableResources() {
-            return storage.fetchAvailableResources(
-                this.resourceName,
-                this.fieldAttribute,
-                {
-                    params: {
-                        search: this.search,
-                    },
-                }
-            ).then(({ data: { resources } }) => {
-                this.availableResources = resources;
-            });
-        },
+  methods: {
+    getAvailableResources() {
+      return storage
+        .fetchAvailableResources(this.resourceName, this.fieldAttribute, {
+          params: {
+            search: this.search,
+          },
+        })
+        .then(({ data: { resources } }) => {
+          this.availableResources = resources;
+        });
+    },
 
-        handleChange(resource) {
-            this.$store.commit(`${this.resourceName}/updateFilterState`, {
-                filterClass: this.filterKey,
-                value: resource
-            });
+    handleChange(resource) {
+      this.$store.commit(`${this.resourceName}/updateFilterState`, {
+        filterClass: this.filterKey,
+        value: resource,
+      });
 
-            this.$emit("change");
-        },
+      this.$emit("change");
     },
+  },
 
-    computed: {
-        filter() {
-            return this.$store.getters[`${this.resourceName}/getFilter`](
-                this.filterKey
-            );
-        },
+  computed: {
+    filter() {
+      return this.$store.getters[`${this.resourceName}/getFilter`](
+        this.filterKey
+      );
+    },
 
-        fieldAttribute() {
-            return this.filter.fieldAttribute;
-        },
+    fieldAttribute() {
+      return this.filter.fieldAttribute;
+    },
 
-        value() {
-            return this.filter.currentValue;
-        },
+    value() {
+      return this.filter.currentValue;
     },
+  },
 };
 </script>
diff --git a/resources/js/filter.js b/resources/js/filter.js
@@ -1,3 +1,6 @@
-Nova.booting((Vue, router, store) => {
-  Vue.component('nova-searchable-belongs-to-filter', require('./components/Filter'))
-})
+Nova.booting((Vue) => {
+  Vue.component(
+    "nova-searchable-belongs-to-filter",
+    require("./components/Filter").default
+  );
+});
diff --git a/resources/sass/filter.scss b/resources/sass/filter.scss
diff --git a/webpack.mix.js b/webpack.mix.js
@@ -1,6 +1,9 @@
-let mix = require('laravel-mix')
+let mix = require("laravel-mix");
+
+require("./nova.mix");
 
 mix
-  .setPublicPath('dist')
-  .js('resources/js/filter.js', 'js')
-  .sass('resources/sass/filter.scss', 'css')
+  .setPublicPath("dist")
+  .js("resources/js/filter.js", "js")
+  .vue({ version: 3 })
+  .nova("suenerds/nova-searchable-belongs-to-filter");