Nova 4 support (needs testing)

composer.json

@@ -13,8 +13,8 @@
         }
     ],
     "require": {
-        "illuminate/support": "^9.0",
-        "laravel/nova": "^3.31",
+        "illuminate/support": "^8.0|^9.0",
+        "laravel/nova": "^4.0",
         "symfony/thanks": "^1.1"
     },
     "autoload": {

nova.mix.js

@@ -0,0 +1,40 @@
+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'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

package.json

@@ -2,27 +2,28 @@
     "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.2.1",
-        "laravel-mix": "^4.1.4",
-        "laravel-nova": "^1.0",
-        "leaflet": "^1.5.1",
-        "resolve-url-loader": "2.3.1",
-        "sass": "^1.23.0",
-        "sass-loader": "^7.3.1",
-        "vue": "^2.5.0",
-        "vue-template-compiler": "^2.6.10",
-        "vue2-leaflet": "^2.2.1"
+        "@vue-leaflet/vue-leaflet": "^0.6.1",
+        "cross-env": "^7.0.3",
+        "laravel-mix": "^6.0.43",
+        "laravel-nova": "^1.12.3",
+        "leaflet": "^1.8.0",
+        "leaflet-geosearch": "^3.6.0",
+        "resolve-url-loader": "5.0.0",
+        "sass": "^1.52.1",
+        "sass-loader": "^13.0.0",
+        "vue": "^3.2.36",
+        "vue-loader": "^17.0.0",
+        "vue-template-compiler": "^2.6.14"
     },
     "dependencies": {
-        "leaflet-geosearch": "^2.7.0",
-        "vue2-leaflet-geosearch": "^1.0.6"
     }
 }

resources/js/components/DetailField.vue

@@ -1,7 +1,7 @@
 <script>
     import {FormField, HandlesValidationErrors} from 'laravel-nova';
     import L from "leaflet";
-    import {LCircle, LMap, LMarker, LTileLayer} from 'vue2-leaflet';
+    import {LCircle, LMap, LMarker, LTileLayer} from '@vue-leaflet/vue-leaflet';
 
     export default {
         components: {
@@ -13,16 +13,16 @@
 
         mixins: [FormField, HandlesValidationErrors],
 
-        props: ['resourceName', 'resourceId', 'field'],
+        props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
         data: function () {
             return {
                 iconRetina: this.field.iconRetinaUrl
-                    || '/vendor/leaflet/dist/images/marker-icon-2x.png',
+                    || 'images/vendor/leaflet/dist/marker-icon-2x.png',
                 icon: this.field.iconUrl
-                    || '/vendor/leaflet/dist/images/marker-icon.png',
+                    || 'images/vendor/leaflet/dist/marker-icon.png',
                 shadow: this.field.shadowUrl
-                    || '/vendor/leaflet/dist/images/marker-shadow.png',
+                    || 'images/vendor/leaflet/dist/marker-shadow.png',
                 tileUrl: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
                 mapOptions: {
                     boxZoom: false,
@@ -146,40 +146,43 @@
 </script>
 
 <template>
-    <panel-item :field="field">
-        <div slot="value">
+    <panel-item :field="field" :label="field.name">
+        <template #value>
             <span
                 v-if="locationIsNotSet"
             >
                 &#8212;
             </span>
-            <l-map
-                v-if="locationIsSet"
-                class="z-10 map-field w-full form-control form-input-bordered overflow-hidden relative"
-                ref="map"
-                :center="mapCenter"
-                :options="mapOptions"
-                :zoom="defaultZoom"
-                @move="mapMoved"
-            >
-                <l-tile-layer
-                    :url="tileUrl"
-                ></l-tile-layer>
-                <l-marker
-                    :options="markerOptions"
-                    :lat-lng="mapCenter"
-                ></l-marker>
-                <l-circle
-                    v-if="circleHasRadius"
-                    :lat-lng="mapCenter"
-                    :radius="circleRadius"
-                    :color="circleColor"
-                    :fillColor="circleColor"
-                    :weight="circleStroke"
-                    :fillOpacity="circleOpacity"
-                />
-            </l-map>
-        </div>
+            <div class="map-field">
+                <l-map
+                    v-if="locationIsSet"
+                    class="z-10 w-full form-control form-input-bordered overflow-hidden relative"
+                    ref="map"
+                    :center="mapCenter"
+                    :options="mapOptions"
+                    :zoom="defaultZoom"
+                    @move="mapMoved"
+                    useGlobalLeaflet="true"
+                >
+                    <l-tile-layer
+                        :url="tileUrl"
+                    ></l-tile-layer>
+                    <l-marker
+                        :options="markerOptions"
+                        :lat-lng="mapCenter"
+                    ></l-marker>
+                    <l-circle
+                        v-if="circleHasRadius"
+                        :lat-lng="mapCenter"
+                        :radius="circleRadius"
+                        :color="circleColor"
+                        :fillColor="circleColor"
+                        :weight="circleStroke"
+                        :fillOpacity="circleOpacity"
+                    />
+                </l-map>
+            </div>
+        </template>
     </panel-item>
 </template>
 

resources/js/components/FormField.vue

@@ -1,9 +1,9 @@
 <script>
     import { FormField, HandlesValidationErrors } from 'laravel-nova';
     import L from "leaflet";
-    import { LCircle, LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
-    import { BingProvider, EsriProvider, GoogleProvider, LocationIQProvider, OpenCageProvider, OpenStreetMapProvider } from 'leaflet-geosearch';
-    import VGeosearch from 'vue2-leaflet-geosearch';
+    import { LCircle, LMap, LTileLayer, LMarker } from '@vue-leaflet/vue-leaflet';
+    import { BingProvider, EsriProvider, GoogleProvider, OpenStreetMapProvider } from 'leaflet-geosearch';
+    import VGeosearch from './LeafletGeosearch';
 
     export default {
         components: {
@@ -190,21 +190,20 @@
             },
 
             mapNewCenter: function (event) {
-                var center = [event.lat, event.long];
+                const center = [event.lat, event.long];
                 this.setValue(event.lat, event.long);
                 this.map.panTo(center, {animate:true});
             },
         },
     };
 </script>
-
 <template>
     <default-field
         :errors="errors"
         :field="field"
         :full-width-content="true"
     >
-        <template slot="field">
+        <template #field>
             <div class="map-field z-10 p-0 w-full form-control form-input-bordered overflow-hidden relative"
                 :class="mapErrorClasses"
             >

resources/js/components/IndexField.vue

@@ -4,7 +4,7 @@ export default {
 
     data: function () {
         return {
-            value: JSON.parse(this.field.value || {}),
+            value: JSON.parse(this.field.value || '{}'),
         };
     },
 

resources/js/components/LeafletGeosearch.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+// Credit: fega https://www.npmjs.com/package/vue2-leaflet-geosearch
+import { GeoSearchControl } from 'leaflet-geosearch';
+
+export default {
+  props: {
+    options: {
+      required: true,
+    },
+  },
+  name: 'v-geosearch',
+  mounted() {
+    this.add();
+  },
+  beforeDestroy() {
+    this.remove();
+  },
+  methods: {
+    deferredMountedTo(parent) {
+      const searchControl = new GeoSearchControl(this.options);
+      parent.addControl(searchControl);
+      searchControl.getContainer().onclick = e => { e.stopPropagation(); };
+    },
+    remove() {
+      if (this.markerCluster) {
+        this.$parent.removeLayer(this.markerCluster);
+      }
+    },
+    add() {
+      if (this.$parent._isMounted) {
+        this.deferredMountedTo(this.$parent.mapObject);
+      }
+    },
+  },
+};
+</script>

resources/js/field.js

@@ -1,5 +1,9 @@
-Nova.booting((Vue, router, store) => {
-    Vue.component('index-nova-map-marker-field', require('./components/IndexField').default);
-    Vue.component('detail-nova-map-marker-field', require('./components/DetailField').default);
-    Vue.component('form-nova-map-marker-field', require('./components/FormField').default);
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
+Nova.booting((Vue) => {
+    Vue.component('index-nova-map-marker-field', IndexField);
+    Vue.component('detail-nova-map-marker-field', DetailField);
+    Vue.component('form-nova-map-marker-field', FormField);
 });

webpack.mix.js

@@ -1,7 +1,9 @@
 let mix = require('laravel-mix')
 
+require('./nova.mix')
+
 mix
-    .setPublicPath('dist')
-    .js('resources/js/field.js', 'js')
-    .copy("./node_modules/leaflet/dist/images", "dist/vendor/leaflet/dist/images")
-;
+  .setPublicPath('dist')
+  .js('resources/js/field.js', 'js')
+  .vue({ version: 3 })
+  .nova('genealabs/nova-map-marker-field')