Sync changes

dist/js/field.js.LICENSE.txt

@@ -0,0 +1,14 @@
+/*!
+ * The buffer module from node.js, for the browser.
+ *
+ * @author   Feross Aboukhadijeh <http://feross.org>
+ * @license  MIT
+ */
+
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */
+
+/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

dist/mix-manifest.json

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

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,19 +2,21 @@
     "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.0.0",
-        "laravel-mix": "^1.0",
-        "laravel-nova": "^1.0"
+        "@vue/compiler-sfc": "^3.2.22",
+        "form-backend-validation": "^2.3.3",
+        "laravel-mix": "^6.0.41",
+        "lodash": "^4.17.21",
+        "postcss": "^8.3.11",
+        "vue-loader": "^16.8.3"
     },
-    "dependencies": {
-        "vue": "^2.5.0"
-    }
+    "dependencies": {}
 }

resources/js/components/FormField.vue

@@ -1,17 +1,20 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-             <select v-model="value" class="w-full form-control form-select" :disabled="disabled">
-                <option :value="null">Choose an option</option>
-                <option
-                    :key="option.value"
-                    :value="option.value"
-                    v-for="option in options">
-                    {{ option.display }}
-                </option>
-            </select>
+    <DefaultField :field="field" :errors="errors" v-show="!isFieldHidden" :show-help-text="showHelpText" >
+        <template #field>
+            <div class="flex relative w-full">
+                <select v-model="value" class="w-full block form-control form-control-bordered form-input" :disabled="disabled" :dusk="field.attribute">
+                    <option :value="null">Choose an option</option>
+                    <option
+                        :key="option.value"
+                        :value="option.value"
+                        v-for="option in options">
+                        {{ option.display }}
+                    </option>
+                </select>
+                <svg class="flex-shrink-0 pointer-events-none form-select-arrow" xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path class="fill-current" d="M8.292893.292893c.390525-.390524 1.023689-.390524 1.414214 0 .390524.390525.390524 1.023689 0 1.414214l-4 4c-.390525.390524-1.023689.390524-1.414214 0l-4-4c-.390524-.390525-.390524-1.023689 0-1.414214.390525-.390524 1.023689-.390524 1.414214 0L5 3.585786 8.292893.292893z"></path></svg>
+            </div>
         </template>
-    </default-field>
+    </DefaultField>
 </template>
 
 <script>
@@ -26,47 +29,67 @@ export default {
         return {
             options: [],
             loaded: false,
-            parentValue: null
+            parentValue: null,
+            operator: null,
         }
     },
 
     mounted() {
-        this.watchedComponents.forEach(component => {
+        this.operator = this.field.operator;
+        this.parentValue = this.field.parent_value;
 
-            let attribute = 'value'
-
-            if(component.field.component === 'belongs-to-field') {
-                attribute = 'selectedResource';
-            }
-
-            component.$watch(attribute, (value) => {
+        if (this.field.options) {
+          this.options = this.field.options;
+        } else {
+            this.updateOptions();
+        }
 
-                this.parentValue = (value && attribute == 'selectedResource') ? value.value : value;
+        Nova.$on(this.field.parent_attribute+'-change', (value) => {
+            this.parentValue = value
+            this.updateOptions()
+        });
 
-                this.updateOptions();
-            }, { immediate: true });
+        Nova.$on('operator-change', (value) => {
+            this.operator = value
+            this.updateOptions()
         });
     },
 
     computed: {
-        watchedComponents() {
-            return this.$parent.$children.filter(component => {
-                return this.isWatchingComponent(component);
-            })
-        },
         endpoint() {
-            return this.field.endpoint
+            const result = this.field.endpoint
                 .replace('{resource-name}', this.resourceName)
                 .replace('{resource-id}', this.resourceId ? this.resourceId : '')
+                .replace('{operator}', this.operator ? this.operator : '')
                 .replace('{'+ this.field.parent_attribute +'}', this.parentValue ? this.parentValue : '')
+
+            return result;
         },
         empty() {
             return this.loaded && this.options.length == 0;
         },
 
         disabled() {
+            if(this.field.alwaysShow === true) {
+                return false;
+            }
             return this.loaded == false && (this.field.parent_attribute != undefined && this.parentValue == null) || this.options.length == 0;
+        },
+
+      isFieldHidden(){
+        if(this.field.alwaysShow === true) {
+            return false;
+        }
+
+        if(this.disabled){
+          return true;
         }
+        if(this.field.hideIfSingleResultOrParentNotSelected != undefined && this.field.hideIfSingleResultOrParentNotSelected == true) {
+          return this.options.length <= 1;
+        }
+
+        return false;
+      },
     },
 
     methods: {
@@ -75,7 +98,7 @@ export default {
         },
 
         fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
+            formData.append(this.field.attribute, this.getFieldvalue() || '')
         },
 
         updateOptions() {
@@ -105,9 +128,12 @@ export default {
             return this.field.parent_attribute == undefined;
         },
 
-        isWatchingComponent(component) {
-            return component.field !== undefined
-                && component.field.attribute == this.field.parent_attribute;
+        getFieldvalue() {
+          if(this.field.hideIfSingleResultOrParentNotSelected && this.options.length == 1){
+            return this.options[0].value;
+          }
+
+          return this.value;
         }
     },
 }

resources/js/field.js

@@ -1,3 +1,3 @@
 Nova.booting((Vue, router, store) => {
-    Vue.component('form-nova-ajax-select', require('./components/FormField'))
+    Vue.component('form-nova-ajax-select', require('./components/FormField').default)
 })

src/AjaxSelect.php

@@ -19,10 +19,46 @@ public function get($endpoint)
         return $this;
     }
 
-    public function parent($attribute)
+    public function parent($attribute, $parentValue = null)
     {
-        $this->withMeta(['parent_attribute' => $attribute]);
+        $this->withMeta([
+            'parent_attribute' => $attribute,
+            'parent_value' => $parentValue,
+        ]);
 
         return $this;
     }
+
+    public function selectedAttribute($attribute)
+    {
+        $this->withMeta(['selectedAttribute' => $attribute]);
+
+        return $this;
+    }
+
+    public function hideIfSingleResultOrParentNotSelected()
+    {
+        $this->withMeta(['hideIfSingleResultOrParentNotSelected' => true]);
+
+        return $this;
+    }
+
+    public function alwaysShow()
+    {
+        $this->withMeta(['alwaysShow' => true]);
+
+        return $this;
+    }
+
+    public function options(array $options)
+    {
+        $this->withMeta(['options' => $options]);
+
+        return $this;
+    }
+
+    public function operator(int $operator) {
+        $this->withMeta(['operator' => $operator]);
+        return $this;
+    }
 }

src/FieldServiceProvider.php

@@ -16,7 +16,7 @@ class FieldServiceProvider extends ServiceProvider
     public function boot()
     {
         Nova::serving(function (ServingNova $event) {
-            Nova::script('nova-ajax-select', __DIR__.'/../dist/js/field.js');
+            Nova::script('nova-ajax-select-2024-05-20', __DIR__.'/../dist/js/field.js');
         });
     }
 

webpack.mix.js

@@ -1,3 +1,9 @@
 let mix = require('laravel-mix')
 
-mix.setPublicPath('dist').js('resources/js/field.js', 'js')
+require('./nova.mix')
+
+mix
+    .setPublicPath('dist')
+    .js('resources/js/field.js', 'js')
+    .vue({ version: 3 })
+    .nova('{{ name }}')