some clean up, add confirmation dialogue #7

README.md

@@ -12,17 +12,39 @@ composer require trin4ik/nova-switcher
 ## Usage
 ```php
 use Trin4ik\NovaSwitcher\NovaSwitcher;
+...
+NovaSwitcher::make('Active');
 ```
+### Labels
 ```php
+use Trin4ik\NovaSwitcher\NovaSwitcher;
+...
 NovaSwitcher::make('Active')
     ->trueLabel('On')
     ->falseLabel('Off');
+...
+NovaSwitcher::make('Active')
+    ->withLabels(true: 'On', false: 'Off');
 ```
-or
+### Confirmation
 ```php
+use Trin4ik\NovaSwitcher\NovaSwitcher;
+...
 NovaSwitcher::make('Active')
-    ->withLabels(true: 'On', false: 'Off');
+    ->confirmToTrue('enable?')
+    ->confirmToFalse('disable?');
+...
+NovaSwitcher::make('Active')
+    ->confirm(toTrue: 'enable?', toFalse: 'disable?');
+```
+of couse, you can only use confirmation dialogue to enable, or disable:
+```php
+use Trin4ik\NovaSwitcher\NovaSwitcher;
+...
+NovaSwitcher::make('Active')
+    ->confirmToFalse('Turn it off?');
 ```
+### Reverse
 Also, you can use reverse value (if switcher checked, value is false and vice versa)
 ```php
 NovaSwitcher::make('Active')

resources/js/components/IndexField.vue

@@ -3,7 +3,7 @@
     <input
         class="input"
         type="checkbox"
-        :checked="value"
+        v-model="value"
         @change="toggle"
     />
     <span class="switch"></span>
@@ -28,17 +28,19 @@ export default {
 
   methods: {
     toggle() {
-      this.value = !this.value
-      this.$emit('change', this.reverse ? !this.value : this.value)
+      if (this.confirm[!this.value] && !confirm(this.confirm[!this.value])) {
+        this.$nextTick(() => {
+          this.value = !this.value
+        })
+        return;
+      }
       if (this.withoutRequest) return
       Nova.request().post('/nova-vendor/nova-switcher/toggle/' + this.resourceName, {
         value: this.reverse ? !this.value : this.value,
         fieldName: this.field.attribute,
         resourceId: this.id,
       }).then((res) => {
-        if (res.data.success) {
-          this.field.value = this.reverse ? !this.value : this.value;
-        } else {
+        if (!res.data.success) {
           setTimeout(() => {
             this.value = !this.value
           }, 250)
@@ -62,7 +64,14 @@ export default {
     reverse() {
       return this.field.reverse ?? false
     },
-  },
+
+    confirm() {
+      return {
+        'true': this.field.confirm_to_false ?? false,
+        'false': this.field.confirm_to_true ?? false,
+      }
+    }
+  }
 }
 </script>
 <style>

src/NovaSwitcher.php

@@ -15,6 +15,8 @@ class NovaSwitcher extends Boolean
 
     public $textAlign = 'center';
 
+    public $defaultConfirm = 'Are you sure?';
+
     public function trueLabel (string $label): self
     {
         $this->textAlign = 'left';
@@ -45,4 +47,25 @@ public function reverse (): self
             'reverse' => true,
         ]);
     }
+
+    public function confirmToTrue (string $confirm): self
+    {
+        return $this->withMeta([
+            'confirm_to_true' => $confirm,
+        ]);
+    }
+
+    public function confirmToFalse (string $confirm): self
+    {
+        return $this->withMeta([
+            'confirm_to_false' => $confirm,
+        ]);
+    }
+
+    public function confirm (null|string $toTrue = null, null|string $toFalse = null): self
+    {
+        $this->confirmToTrue($toTrue ?? $this->defaultConfirm);
+        $this->confirmToFalse($toFalse ?? $toTrue ?? $this->defaultConfirm);
+        return $this;
+    }
 }