broadcast again for listerner field, emit db values on start..

resources/js/components/Form/BroadcasterBelongsToField.vue

@@ -33,7 +33,7 @@
               class="flex items-center"
           >
             <div v-if="option.avatar" class="mr-3">
-              <img :src="option.avatar" class="w-8 h-8 rounded-full block" />
+              <img :src="option.avatar" class="w-8 h-8 rounded-full block"/>
             </div>
 
             <div>
@@ -114,12 +114,7 @@
 <script>
 import _ from 'lodash'
 import storage from '../../storage/BelongsToFieldStorage'
-import {
-  FormField,
-  TogglesTrashed,
-  PerformsSearches,
-  HandlesValidationErrors,
-} from 'laravel-nova'
+import {FormField, HandlesValidationErrors, PerformsSearches, TogglesTrashed,} from 'laravel-nova'
 
 export default {
   mixins: [
@@ -152,7 +147,7 @@ export default {
   },
   // watch added
   watch: {
-    'selectedResource': function(val, oldVal){
+    'selectedResource': function (val, oldVal) {
       if (val != oldVal) {
         this.setFieldAndMessage()
       }
@@ -236,7 +231,7 @@ export default {
               this.field.attribute,
               this.queryParams
           )
-          .then(({ data: { resources, softDeletes, withTrashed } }) => {
+          .then(({data: {resources, softDeletes, withTrashed}}) => {
             if (this.initializingWithExistingResource || !this.isSearchable) {
               this.withTrashed = withTrashed
             }
@@ -296,32 +291,36 @@ export default {
       this.relationModalOpen = false
     },
 
-    handleSetResource({ id }) {
+    handleSetResource({id}) {
       this.closeRelationModal()
       this.selectedResourceId = id
       this.getAvailableResources().then(() => this.selectInitialResource())
     },
 
-    // added
-    setFieldAndMessage(el) {
-      // const rawValue = el.target.value;
-      const rawValue = this.selectedResource.value;
-      let parsedValue = rawValue;
+    emitValue(value) {
+      if (this.field.broadcastTo == null) return;
 
       let attribute = this.field.attribute
       if (Array.isArray(this.field.broadcastTo)) {
         this.field.broadcastTo.forEach(function (broadcastChannel) {
           Nova.$emit(broadcastChannel, {
             'field_name': attribute,
-            'value': parsedValue
+            'value': value
           })
         });
       } else {
         Nova.$emit(this.field.broadcastTo, {
           'field_name': attribute,
-          'value': parsedValue
+          'value': value
         })
       }
+    },
+
+    // added
+    setFieldAndMessage(el) {
+      let parsedValue = this.selectedResource.value;
+
+      this.emitValue(parsedValue);
 
       this.selectedResource.value = parsedValue;
     },

resources/js/components/Form/BroadcasterField.vue

@@ -1,74 +1,84 @@
 <template>
-    <default-field :field="field" :errors="errors">
-        <template slot="field">
-            <input
-                :id="field.name"
-                :type="this.field.type"
-                class="w-full form-control form-input form-input-bordered"
-                :class="errorClasses"
-                :placeholder="field.name"
-                :value="value"
-                @input="setFieldAndMessage"
-            />
-        </template>
-    </default-field>
+  <default-field :field="field" :errors="errors">
+    <template slot="field">
+      <input
+          :id="field.name"
+          :type="this.field.type"
+          class="w-full form-control form-input form-input-bordered"
+          :class="errorClasses"
+          :placeholder="field.name"
+          :step="field.step"
+          :min="field.min"
+          :max="field.max"
+          :value="value"
+          @input="setFieldAndMessage"
+      />
+    </template>
+  </default-field>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import {FormField, HandlesValidationErrors} from 'laravel-nova'
 
 export default {
-    mixins: [FormField, HandlesValidationErrors],
+  mixins: [FormField, HandlesValidationErrors],
 
-    props: ['resourceName', 'resourceId', 'field'],
+  props: ['resourceName', 'resourceId', 'field'],
 
-    methods: {
-        setFieldAndMessage(el) {
-            const rawValue = el.target.value;
-            let parsedValue = rawValue;
+  methods: {
+    setFieldAndMessage(el) {
+      const rawValue = el.target.value;
+      let parsedValue = rawValue;
 
-            if (this.field.type === 'number') {
-                parsedValue = Number(rawValue)
-            }
+      if (this.field.type === 'number') {
+        parsedValue = Number(rawValue)
+      }
 
-            let attribute = this.field.attribute
-            if (Array.isArray(this.field.broadcastTo)) {
-              this.field.broadcastTo.forEach(function (broadcastChannel) {
-                Nova.$emit(broadcastChannel, {
-                  'field_name': attribute,
-                  'value': parsedValue
-                })
-              });
-            } else {
-              Nova.$emit(this.field.broadcastTo, {
-                'field_name': attribute,
-                'value': parsedValue
-              })
-            }
+      this.emitValue(parsedValue);
 
-            this.value = parsedValue;
-        },
+      this.value = parsedValue;
+    },
+
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || ''
+      this.emitValue(this.value);
+    },
 
-        /*
-         * Set the initial, internal value for the field.
-         */
-        setInitialValue() {
-            this.value = this.field.value || ''
-        },
+    emitValue(value) {
+      if (this.field.broadcastTo == null) return;
 
-        /**
-         * Fill the given FormData object with the field's internal value.
-         */
-        fill(formData) {
-            formData.append(this.field.attribute, this.value || '')
-        },
+      let attribute = this.field.attribute
+      if (Array.isArray(this.field.broadcastTo)) {
+        this.field.broadcastTo.forEach(function (broadcastChannel) {
+          Nova.$emit(broadcastChannel, {
+            'field_name': attribute,
+            'value': value
+          })
+        });
+      } else {
+        Nova.$emit(this.field.broadcastTo, {
+          'field_name': attribute,
+          'value': value
+        })
+      }
+    },
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.field.attribute, this.value || '')
+    },
 
-        /**
-         * Update the field's internal value.
-         */
-        handleChange(value) {
-            this.value = value
-        },
+    /**
+     * Update the field's internal value.
+     */
+    handleChange(value) {
+      this.value = value
     },
+  },
 }
 </script>

resources/js/components/Form/BroadcasterSelectField.vue

@@ -114,29 +114,34 @@ export default {
         Nova.$emit(this.field.attribute + '-change', this.value)
       }
 
-      this.setMessage()
+      this.emitValue(this.value)
     },
 
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || ''
+      this.emitValue(this.value);
+    },
 
-    setMessage() {
-      let parsedValue = this.value;
+    emitValue(value) {
+      if (this.field.broadcastTo == null) return;
 
       let attribute = this.field.attribute
       if (Array.isArray(this.field.broadcastTo)) {
         this.field.broadcastTo.forEach(function (broadcastChannel) {
           Nova.$emit(broadcastChannel, {
             'field_name': attribute,
-            'value': parsedValue
+            'value': value
           })
         });
       } else {
         Nova.$emit(this.field.broadcastTo, {
           'field_name': attribute,
-          'value': parsedValue
+          'value': value
         })
       }
-
-      // this.value = parsedValue;
     },
   },
 

resources/js/components/Form/ListenerField.vue

@@ -9,6 +9,7 @@
             :id="field.attribute"
             :dusk="field.attribute"
             v-bind="extraAttributes"
+            :step="field.step"
             :disabled="isReadonly"
             :list="`${field.attribute}-list`"
         />
@@ -23,14 +24,18 @@
               :value="suggestion"
           />
         </datalist>
-          <input type="button" class="btn btn-default btn-primary ml-3 cursor-pointer" value="Calculate" :id="field.attribute.concat('CalculateButton')" v-on:click="calculateValue(true);">
+          <input type="button"
+                 v-if="this.field.buttonVisible"
+                 class="btn btn-default btn-primary ml-3 cursor-pointer"
+                 value="Calculate" :id="field.attribute.concat('CalculateButton')"
+                 v-on:click="calculateValue(true);">
       </div>
     </template>
   </default-field>
 </template>
 
 <script>
-import { FormField, HandlesValidationErrors } from 'laravel-nova'
+import {FormField, HandlesValidationErrors} from 'laravel-nova'
 
 export default {
   mixins: [HandlesValidationErrors, FormField],
@@ -50,6 +55,25 @@ export default {
       this.calculateValue()
     },
 
+    emitValue(value) {
+      if (this.field.broadcastTo == null) return;
+
+      let attribute = this.field.attribute
+      if (Array.isArray(this.field.broadcastTo)) {
+        this.field.broadcastTo.forEach(function (broadcastChannel) {
+          Nova.$emit(broadcastChannel, {
+            'field_name': attribute,
+            'value': value
+          })
+        });
+      } else {
+        Nova.$emit(this.field.broadcastTo, {
+          'field_name': attribute,
+          'value': value
+        })
+      }
+    },
+
     calculateValue: _.debounce(function (force = false) {
       this.calculating = true;
 
@@ -63,6 +87,7 @@ export default {
             force
         ) {
           this.value = response.data.value
+          this.emitValue(this.value);
         }
         this.calculating = false;
       }).catch(() => {
@@ -79,6 +104,7 @@ export default {
      */
     setInitialValue() {
       this.value = this.field.value || ''
+      this.emitValue(this.value);
     },
 
     /**