ability to choose trigger event

README.md

@@ -1,7 +1,7 @@
 # Nova Inline Text
 
 [![Latest Version on Packagist](https://img.shields.io/packagist/v/pdmfc/nova-inline-text.svg?style=flat-square)](https://packagist.org/packages/pdmfc/nova-inline-text)
-![Licencse](https://img.shields.io/github/license/pdmfc/nova-inline-text)
+![License](https://img.shields.io/github/license/pdmfc/nova-inline-text.svg?style=flat-square)
 
 This package lets you edit text fields directly on your resources pages.
 
@@ -56,6 +56,36 @@ public function fields()
 }
 ```
 
+### Updating field value
+
+The default trigger to save the value is by pressing the `Enter` key (`keyup.enter`). If you wish to use a different event trigger to update the value you can use the `saveOn()` method that accepts an argument corresponding to a javascript event:
+
+```php
+public function fields()
+{
+    return [
+        InlineText::make('Name')
+            ->inlineOnIndex()
+            ->saveOn('blur'),
+    ];
+}
+```
+
+### Key event modifiers
+
+You can also specify the key event modifier:
+
+```php
+public function fields()
+{
+    return [
+        InlineText::make('Name')
+            ->inlineOnIndex()
+            ->saveOn('keyup.shift'),
+    ];
+}
+```
+
 ### Refreshing resource table
 
 When saving the current field value, it will not refresh the table.

resources/js/components/IndexField.vue

@@ -8,7 +8,7 @@
       :class="errorClasses"
       :placeholder="field.name"
       v-model="value"
-      @keyup.enter="submit"
+      v-on="listener"
     />
     <span v-else class="whitespace-no-wrap">{{ field.value }}</span>
   </div>
@@ -45,10 +45,15 @@ export default {
           response => this.$toasted.show(response, { type: "error" })
         );
     },
+
     refreshTable() {
       if (this.shouldRefresh) {
         this.$parent.$parent.$parent.$parent.$parent.$parent.getResources();
       }
+    },
+
+    capitalize(string) {
+      return string.charAt(0).toUpperCase() + string.substr(1);
     }
   },
 
@@ -63,6 +68,26 @@ export default {
 
     shouldRefresh() {
       return this.field.refreshOnSaving;
+    },
+
+    listener() {
+      const event = this.field.event.split(".");
+      const name = event[0];
+      const modifier = event[1] ? this.capitalize(event[1]) : null;
+
+      return {
+        [name]: e => {
+          if (this.valueWasNotChanged) return;
+
+          if (modifier && modifier === e.key) this.submit();
+
+          if (!modifier) this.submit();
+        }
+      };
+    },
+
+    valueWasNotChanged() {
+      return this.value === this.field.value;
     }
   }
 };

resources/js/field.js

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

src/InlineText.php

@@ -24,6 +24,13 @@ class InlineText extends Field
      */
     public $component = 'nova-inline-text';
 
+    /**
+     * The event trigger used to save the field value,
+     *
+     * @var string
+     */
+    protected $event = 'keyup.enter';
+
     /**
      * Allows field to be editable on index view.
      *
@@ -55,6 +62,16 @@ public function refreshOnSaving()
         return $this;
     }
 
+    /**
+     *
+     */
+    public function saveOn(string $event)
+    {
+        $this->event = $event;
+
+        return $this;
+    }
+
     /**
      * Resolve the field's value.
      *
@@ -69,6 +86,7 @@ public function resolve($resource, $attribute = null)
         $this->withMeta([
             'inlineOnIndex' => $this->inlineOnIndex,
             'refreshOnSaving' => $this->refreshOnSaving,
+            'event' => $this->event,
         ]);
     }
 }