Comaptible with Nova 4

README.md

@@ -1,3 +1,5 @@
+#This is a fork compatible with Nova 4
+
 *NOTE*
 
 There is now a native field in Nova called Boolean Group that replicates this field when using the `saveUncheckedValues` option.  It is recommended that if you are using this package with that option enabled that you switch to the native Nova field as this package is only sporadically maintained.

composer.json

@@ -16,9 +16,7 @@
         "php": ">=7.1.0"
     },
     "require-dev": {
-        "laravel/nova": "^1.0",
-        "orchestra/testbench": "3.7.*",
-        "phpunit/phpunit": "^7.0"
+        "laravel/nova": "^4.0"
     },
     "autoload": {
         "psr-4": {

dist/css/field.css

@@ -0,0 +1 @@
+

dist/js/field.js.LICENSE.txt

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

dist/mix-manifest.json

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

package.json

@@ -2,19 +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",
+        "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",
+        "watch": "mix watch",
+        "watch-poll": "mix watch -- --watch-options-poll=1000"
     },
     "devDependencies": {
-        "cross-env": "^5.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
+        "@inertiajs/inertia": "^0.11.0",
+        "@vue/babel-plugin-jsx": "^1.1.1",
+        "axios": "^0.26.1",
+        "form-backend-validation": "^2.4.0",
+        "js-beautify": "^1.14.3",
+        "laravel-mix": "^6.0.41",
+        "postcss": "^8.3.11",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.51.0",
+        "sass-loader": "^12.1.0",
+        "vue-loader": "^16.8.3",
+        "vuex": "^4.0.2"
     },
     "dependencies": {
-        "vue": "^2.5.0"
+        "vue": "^3.2.33"
     }
 }

resources/js/components/DetailField.vue

@@ -1,6 +1,7 @@
 <template>
-    <panel-item :field="field">
-        <div class="flex" slot="value">
+  <PanelItem :index="index" :field="field">
+    <template #value>
+      <div class="flex" slot="value">
             <ul :class="['list-reset', 'items-top', width]" v-for="options in chunkedOptions">
                 <component
                     v-for="option in options"
@@ -10,7 +11,8 @@
                 ></component>
             </ul>
         </div>
-    </panel-item>
+    </template>
+  </PanelItem>
 </template>
 
 <script>
@@ -19,7 +21,7 @@ import CheckboxDisplay from '../mixins/CheckboxDisplay';
 export default {
     mixins: [CheckboxDisplay],
 
-    props: ['resource', 'resourceName', 'resourceId', 'field'],
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
 
     data() {
         return {

resources/js/components/FormField.vue

@@ -1,8 +1,8 @@
 <template>
-    <default-field :field="field">
-        <template slot="field">
+    <DefaultField :field="field">
+        <template #field>
             <ul class="list-reset">
-                <li class="flex items-center mb-4" v-for="option in field.options">
+                <li class="flex items-center mb-4" v-for="(option, index) in field.options" :key="index">
                     <checkbox
                         class="py-2 mr-4"
                         @input="handleChange(option.value)"
@@ -16,11 +16,11 @@
                 </li>
             </ul>
 
-            <p v-if="hasError" class="my-2 text-danger">
+            <p v-if="hasError" class="my-2 text-red-500">
                 {{ firstError }}
             </p>
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>

resources/js/components/list-items/CheckedItem.vue

@@ -1,6 +1,6 @@
 <template>
     <li class="flex items-center mb-2">
-        <span class="text-success inline-block mr-4">
+        <span class="text-green-500 inline-block mr-4">
             <svg
                 class="block fill-current h-4 w-4"
                 version="1.1"
@@ -23,4 +23,4 @@
         props: ['option'],
 
     }
-</script>
+</script>

resources/js/components/list-items/UncheckedItem.vue

@@ -1,6 +1,6 @@
 <template>
     <li class="flex items-center mb-2">
-        <span class="text-danger inline-block mr-4">
+        <span class="text-red-500 inline-block mr-4">
             <svg
                 class="block fill-current h-4 w-4"
                 version="1.1"
@@ -23,4 +23,4 @@
         props: ['option'],
 
     }
-</script>
+</script>

resources/js/field.js

@@ -1,5 +1,5 @@
 Nova.booting((Vue, router) => {
-    Vue.component('index-nova-checkboxes', require('./components/IndexField'));
-    Vue.component('detail-nova-checkboxes', require('./components/DetailField'));
-    Vue.component('form-nova-checkboxes', require('./components/FormField'));
-})
+  Vue.component("index-nova-checkboxes", require("./components/IndexField").default);
+  Vue.component("detail-nova-checkboxes", require("./components/DetailField").default);
+  Vue.component("form-nova-checkboxes", require("./components/FormField").default);
+});

webpack.mix.js

@@ -1,9 +1,19 @@
-let mix = require('laravel-mix')
+let mix = require("laravel-mix");
+let path = require("path");
 
-mix.js('resources/js/field.js', 'dist/js')
-   .sass('resources/sass/field.scss', 'dist/css')
-    .webpackConfig({
-        resolve: {
-            symlinks: false
-        }
-    })
+mix
+  .setPublicPath("dist")
+  .js("resources/js/field.js", "js")
+  .vue({ version: 3 })
+  .sass("resources/sass/field.scss", "css")
+  .webpackConfig({
+    externals: {
+      vue: "Vue",
+    },
+    output: {
+      uniqueName: "fourstacks/nova-checkboxes",
+    },
+  })
+  .alias({
+    "laravel-nova": path.join(__dirname, "../../vendor/laravel/nova/resources/js/mixins/packages.js"),
+  });