Fix problems with Nova 4 and add compatibility with Laravel 10.

composer.json

@@ -1,15 +1,22 @@
 {
-    "name": "dillingham/nova-attach-many",
+    "name": "letsgoi/nova-attach-many",
+    "type": "library",
     "description": "Attach Many Nova field",
     "keywords": [
         "laravel",
         "nova"
     ],
     "license": "MIT",
+    "repositories": [
+        {
+            "type": "composer",
+            "url": "https://nova.laravel.com"
+        }
+    ],
     "require": {
         "php": "^7.3|^8.0",
-        "laravel/nova": "^4",
-        "laravel/framework": "^8.0|^9.0"
+        "laravel/nova": "^4.0",
+        "laravel/framework": "^8.0|^9.0|^10.0"
     },
     "autoload": {
         "psr-4": {

dist/js/field.js.LICENSE.txt

@@ -1,6 +1,6 @@
 /*!
- * vuex v4.0.2
- * (c) 2021 Evan You
+ * vuex v4.1.0
+ * (c) 2022 Evan You
  * @license MIT
  */
 

dist/mix-manifest.json

@@ -1,3 +1,4 @@
 {
-    "/js/field.js": "/js/field.js"
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
 }

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3'
+services:
+    node:
+        image: node:20-alpine
+        working_dir: /var/www
+        volumes:
+            - ./:/var/www:cached
+    composer:
+        image: composer
+        working_dir: /var/www
+        volumes:
+            - ./:/var/www:cached
+            - ~/.ssh:/root/.ssh:cached
+            - ~/.composer:/root/.composer:delegated

mix.js

@@ -27,7 +27,7 @@ class NovaExtension {
       ...(webpackConfig.resolve.alias || {}),
       'laravel-nova': path.join(
         __dirname,
-        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+        'vendor/laravel/nova/resources/js/mixins/packages.js'
       ),
     }
 

package.json

@@ -7,13 +7,14 @@
         "watch-poll": "mix watch -- --watch-options-poll=1000",
         "hot": "mix watch --hot",
         "prod": "npm run production",
-        "production": "mix --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": {}
+        "tailwindcss": "^3.3.3",
+        "vue-loader": "^17.2.2"
+    }
 }

readme.md

@@ -10,7 +10,7 @@ Belongs To Many create & edit form UI for Nova. Enables attaching relationships
 ### Installation
 
 ```bash
-composer require dillingham/nova-attach-many
+composer require letsgoi/nova-attach-many
 ```
 
 ### Usage
@@ -113,6 +113,18 @@ This field also respects policies: ie Role / Permission
 
 ---
 
+# Development
+Install dependencies:
+```bash
+docker compose run node npm install
+docker compose run composer install
+docker compose run node npm run nova:install
+```
+Compile assets for production:
+```bash
+docker compose run node npm run production
+```
+
 # Author
 
 Hi 👋, Im Brian D. I created this Nova package [and others](https://novapackages.com/collaborators/dillingham)

resources/css/field.css

@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;

resources/js/components/FormField.vue

@@ -1,7 +1,7 @@
 <template>
     <DefaultField :field="currentField" :full-width-content="currentField.fullWidth" :show-help-text="false">
         <template #field :class="{'border-danger border': hasErrors}">
-            <div class="attach-many-container" :class="{'border-danger border': hasErrors}">
+            <div class="nova-attach-many" :class="{'border-danger border': hasErrors}">
                 <div v-if="currentField.showToolbar" class="flex items-center border border-b-0 border-gray-100 dark:border-gray-700">
                     <div v-if="preview" class="flex justify-center p-3 w-full">
                         <div class="text-xl">{{ __('Selected Items') }} ({{ selected.length  }})</div>

src/Providers/FieldServiceProvider.php

@@ -23,6 +23,7 @@ public function boot()
 
         Nova::serving(function (ServingNova $event) {
             Nova::script('nova-attach-many', __DIR__.'/../../dist/js/field.js');
+            Nova::style('nova-attach-many', __DIR__.'/../../dist/css/field.css');
         });
     }
 

tailwind.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  content: [
+    "./resources/**/*.blade.php",
+    "./resources/**/*.js",
+    './resources/js/**/*.vue',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  important: '.nova-attach-many'
+}

webpack.mix.js

@@ -5,5 +5,8 @@ require('./mix')
 mix
     .setPublicPath('dist')
     .js('resources/js/field.js', 'js')
-    .vue({ version: 3 })
-    .nova("dillingham/nova-attach-many")
+    .vue({version: 3})
+    .postCss('resources/css/field.css', 'css', [
+        require("tailwindcss"),
+    ])
+    .nova('letsgoi/nova-attach-many')