Submit input + added array test

Author: pascalbaljet

app/app/Http/Controllers/FormComponentsController.php

@@ -40,6 +40,20 @@ public function arrays()
         return view('form.components.arrays');
     }
 
+    public function submitValue()
+    {
+        return view('form.components.submitValue');
+    }
+
+    public function submitValueSubmit(Request $request)
+    {
+        $data = $request->validate([
+            'approve' => ['required', 'in:0,1'],
+        ]);
+
+        return redirect()->route('form.components.submitValue', ['approved' => $data['approve']]);
+    }
+
     public function defaults()
     {
         Select::defaultChoices();

app/resources/views/form/components/simple.blade.php

@@ -12,14 +12,6 @@ class="space-y-4"
     >
         <x-splade-input name="name" label="Name" />
 
-
-
-        <x-splade-input name="disabled" label="disabled" v-bind:disabled="!form.terms">
-            @slot('append')
-                <a href class="text-indigo-600 font-medium">GO!</a>
-            @endslot
-        </x-splade-input>
-
         <x-splade-input name="password" label="Password" type="password" />
         <x-splade-input name="secret" type="hidden" />
 

app/resources/views/form/components/submitValue.blade.php

@@ -0,0 +1,14 @@
+@extends('layout')
+
+@section('content')
+
+FormComponents
+
+<div class="max-w-sm mx-auto px-4">
+    <x-splade-form class="space-y-4">
+        <x-splade-submit name="approve" value="0" label="No" />
+        <x-splade-submit name="approve" value="1" label="Yes" />
+    </x-splade-form>
+</div>
+
+@endsection

app/routes/web.php

@@ -87,6 +87,8 @@
     Route::get('form/components/unguarded', [FormComponentsController::class, 'unguarded'])->name('form.components.unguarded');
     Route::get('form/components/defaultUnguarded', [FormComponentsController::class, 'defaultUnguarded'])->name('form.components.defaultUnguarded');
     Route::post('form/components', [FormComponentsController::class, 'submit'])->name('form.components.submit');
+    Route::get('form/components/submitValue/{approved?}', [FormComponentsController::class, 'submitValue'])->name('form.components.submitValue');
+    Route::post('form/components/submitValue/{approved?}', [FormComponentsController::class, 'submitValueSubmit'])->name('form.components.submitValueSubmit');
 
     Route::get('form/relations/belongsToMany', [FormRelationsController::class, 'belongsToMany'])->name('form.relations.belongsToMany');
     Route::post('form/relations/belongsToMany', [FormRelationsController::class, 'storeBelongsToMany'])->name('form.relations.storeBelongsToMany');

app/tests/Browser/Form/AttributesTest.php

@@ -80,4 +80,22 @@ public function it_fills_undefined_attributes_from_default_php_data()
                 ->assertSeeIn('#all', '{ "name": "Test", "email": "", "description": {}, "agree": false, "options": [], "theme": "" }');
         });
     }
+
+    /** @test */
+    public function it_handles_nested_numeric_keys()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('form/components/arrays')
+                ->waitForText('FormComponents')
+                ->assertInputValue('nested.key', 'value')
+                ->assertInputValue('nested[another]', 'key')
+                ->assertInputValue('list[1]', 'one')
+                ->assertInputValue('list[2]', 'two')
+                ->assertInputValue('list[3]', 'three')
+                ->assertInputValue('another.1', 'one')
+                ->assertInputValue('another.2', 'two')
+                ->assertInputValue('another.3', 'three')
+                ->assertSeeIn('#all', '{ "options": [], "nested": { "key": "value", "another": "key" }, "list": { "1": "one", "2": "two", "3": "three" }, "another": { "1": "one", "2": "two", "3": "three" } }');
+        });
+    }
 }

app/tests/Browser/Form/SimpleTest.php

@@ -50,4 +50,18 @@ public function it_submits_the_filled_elements()
                 ->assertRouteIs('navigation.one');
         });
     }
+
+    /** @test */
+    public function it_can_submit_a_value_in_the_submit_button()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('form/components/submitValue')
+                ->waitForText('FormComponents')
+                ->press('No')
+                ->waitForRoute('form.components.submitValue', ['approved' => 0])
+                ->waitForText('FormComponents')
+                ->press('Yes')
+                ->waitForRoute('form.components.submitValue', ['approved' => 1]);
+        });
+    }
 }

lib/Components/Form.vue

@@ -164,7 +164,13 @@ export default {
             return set(this.values, key, value);
         },
 
-        submit() {
+        submit($event) {
+            const submitter = $event.submitter;
+
+            if(submitter.name) {
+                this.$put(submitter.name, submitter.value);
+            }
+
             if (!this.confirm) {
                 return this.request();
             }

resources/views/form/submit.blade.php

@@ -2,7 +2,7 @@
     'rounded-md shadow-sm bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 focus:outline-none focus:shadow-outline'
 )->merge([
     'type' => $type
-]) }}
+])->when($name, fn($attr) => $attr->merge(['name' => $name, 'value' => $value])) }}
 >
     @if(trim($slot))
         {{ $slot }}

src/Components/Form/Submit.php

@@ -14,7 +14,9 @@ class Submit extends Component
     public function __construct(
         public string $label = 'Submit',
         public string $type = 'submit',
-        public bool $spinner = true
+        public bool $spinner = true,
+        public string $name = '',
+        public $value = null,
     ) {
     }