Form fixes + added additional test

Author: pascalbaljet

app/app/Http/Controllers/FormComponentsController.php

@@ -87,6 +87,22 @@ public function libraryDefaults()
         ]);
     }
 
+    public function libraryChange()
+    {
+        return view('form.components.libraryChange', [
+            'defaults' => [
+                'biography' => 'Voluptate ea culpa proident proident qui nostrud non ea irure ullamco in non reprehenderit.',
+                'country'   => 'NL',
+                'countries' => ['BE', 'NL'],
+                'date'      => '2022-07-22',
+                'time'      => '13:37',
+                'datetime'  => '2022-07-22 13:37',
+                'daterange' => '2022-07-22 to 2022-08-22',
+            ],
+            'countries' => $this->countries(),
+        ]);
+    }
+
     public function custom()
     {
         return view('form.components.custom', ['countries' => $this->countries()]);

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

@@ -0,0 +1,40 @@
+@extends('layout')
+
+@section('content')
+
+FormComponents
+
+<div class="max-w-sm mx-auto px-4">
+    <x-splade-form
+        class="space-y-4"
+        :action="route('form.components.submit')"
+        :default="$defaults"
+    >
+        <x-splade-textarea name="biography" placeholder="Your Bio" autosize />
+
+        <x-splade-select name="country" :options="$countries" placeholder="Select your country" choices />
+        <p class="mb-4" v-if="form.country">Selected country: <span v-text="form.country"></span></p>
+
+        <x-splade-select name="countries[]" :options="$countries" placeholder="Select your countries" multiple choices />
+        <p class="mb-4" v-if="form.countries.length">Selected countries: <span v-text="form.countries.join(', ')"></span></p>
+
+        <x-splade-input placeholder="Date" name="date" date />
+        <x-splade-input placeholder="Time" name="time" time />
+        <x-splade-input placeholder="Datetime" name="datetime" date time />
+        <x-splade-input placeholder="Date Range" name="daterange" date range />
+
+        <x-splade-submit />
+
+        <button @click.prevent="
+            form.biography = 'Changed!';
+            form.country = 'BE';
+            form.countries = ['DE', 'IT'];
+            form.date = '2022-08-22';
+            form.time = '3:14';
+            form.datetime = '2022-08-22 3:14';
+            form.daterange = '2022-08-22 to 2022-09-22';
+        ">Change!</button>
+    </x-splade-form>
+</div>
+
+@endsection

app/routes/web.php

@@ -82,6 +82,7 @@
     Route::get('form/components/simple', [FormComponentsController::class, 'simple'])->name('form.components.simple');
     Route::get('form/components/libraries', [FormComponentsController::class, 'libraries'])->name('form.components.libraries');
     Route::get('form/components/libraryDefaults', [FormComponentsController::class, 'libraryDefaults'])->name('form.components.libraryDefaults');
+    Route::get('form/components/libraryChange', [FormComponentsController::class, 'libraryChange'])->name('form.components.libraryChange');
     Route::get('form/components/custom', [FormComponentsController::class, 'custom'])->name('form.components.custom');
     Route::get('form/components/defaults', [FormComponentsController::class, 'defaults'])->name('form.components.defaults');
     Route::get('form/components/defaultJson', [FormComponentsController::class, 'defaultJson'])->name('form.components.defaultJson');

app/tests/Browser/Form/LibrariesTest.php

@@ -9,7 +9,7 @@
 class LibrariesTest extends DuskTestCase
 {
     /** @test */
-    public function it_select_the_default_values()
+    public function it_selects_the_default_values()
     {
         $this->browse(function (Browser $browser) {
             $browser->visit('form/components/libraryDefaults')
@@ -25,6 +25,24 @@ public function it_select_the_default_values()
         });
     }
 
+    /** @test */
+    public function it_can_change_the_default_bound_values()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('form/components/libraryChange')
+                ->waitForText('FormComponents')
+                ->press('Change!')
+                ->assertInputValue('biography', 'Changed!')
+                ->assertSeeIn('div[data-select-name="country"] .choices__item--selectable', 'Belgium')
+                ->assertSeeIn('div[data-select-name="countries[]"] .choices__list--multiple', 'Germany')
+                ->assertSeeIn('div[data-select-name="countries[]"] .choices__list--multiple', 'Italy')
+                ->assertInputValue('date', '2022-08-22')
+                ->assertInputValue('time', '3:14')
+                ->assertInputValue('datetime', '2022-08-22 3:14')
+                ->assertInputValue('daterange', '2022-08-22 to 2022-09-22');
+        });
+    }
+
     /** @test */
     public function it_can_autosize_the_textarea()
     {

resources/views/form.blade.php

@@ -5,7 +5,7 @@
     :splade-id="@js($spladeId)"
 >
     <template #default="{!! $scope !!}">
-        <form data-splade-id="{{ $spladeId }}" v-bind="form.$attrs" @submit.prevent="form.submit">
+        <form data-splade-id="{{ $spladeId }}" v-bind="form.$attrs" @submit.prevent="form.submit" {!! $attributes->only('method')->merge(['method' => 'POST']) !!}>
             <fieldset v-bind:disabled="form.processing" {!! $attributes->only('class') !!}>
                 {{ $slot }}
             </fieldset>

resources/views/form/input.blade.php

@@ -24,7 +24,7 @@
             ])->merge([
                 'name' => $name,
                 'type' => $type,
-                'v-model' => $flatpickrOptions() ? null : $vueModel()
+                'v-model' => $vueModel()
             ]) }}
             />
 

resources/views/form/select.blade.php

@@ -14,7 +14,7 @@
         ])->merge([
             'multiple' => $multiple,
             'name' => $name,
-            'v-model' => $choicesOptions() ? null : $vueModel()
+            'v-model' => $vueModel()
         ]) }}
         >
             @if(trim($slot))