Add x-model support to inputs

Author: rawilk

resources/views/components/choice/checkbox-or-radio.blade.php

@@ -5,7 +5,7 @@
                @if ($id) id="{{ $id }}" @endif
                type="{{ $type }}"
                @if ($value) value="{{ $value }}" @endif
-               @if ($checked && ! $attributes->hasStartsWith('wire:model')) checked @endif
+               @if ($checked && ! $hasBoundModel()) checked @endif
                {{ $extraAttributes }}
                {!! $ariaDescribedBy() !!}
                @if ($hasErrorsAndShow($name))

resources/views/components/choice/switch-toggle.blade.php

@@ -1,8 +1,10 @@
 <div x-data="{
         onValue: {{ json_encode($onValue) }},
         offValue: {{ json_encode($offValue) }},
-        @if ($attributes->hasStartsWith('wire:model'))
+        @if ($hasWireModel())
             value: @entangle($attributes->wire('model')),
+        @elseif ($hasXModel())
+            value: {{ $attributes->first('x-model') }},
         @else
             value: {{ json_encode($value) }},
         @endif
@@ -15,6 +17,9 @@
      }"
      wire:ignore.self
      class="{{ $getContainerClass() }}"
+     @if ($hasXModel())
+         x-init="$watch(value, newValue => { {{ $attributes->first('x-model') }} = newValue })"
+     @endif
      {{ $extraAttributes }}
 >
     @if ($label && $labelPosition === 'left')
@@ -33,7 +38,7 @@ class="flex-grow switch-toggle-label form-label block text-sm font-medium leadin
             type="button"
             @if ($id) id="{{ $id }}" @endif
             @if ($label) aria-labelledby="{{ $labelId() }}" @endif
-            {{ $attributes->except(['type', 'wire:model', 'wire:model.defer', 'wire:model.lazy'])->merge(['class' => $buttonClass()]) }}
+            {{ $attributes->except(['type', 'wire:model', 'wire:model.defer', 'wire:model.lazy', 'x-model'])->merge(['class' => $buttonClass()]) }}
             x-bind:class="{ 'pressed': isPressed }"
             @if ($disabled) disabled @endif
     >

resources/views/components/inputs/custom-select.blade.php

@@ -1,8 +1,10 @@
 <div x-data="customSelect({
         {{ $configToJson() }}
-        @if ($attributes->hasStartsWith('wire:model'))
+        @if ($hasWireModel())
             value: @entangle($attributes->wire('model')),
             _wire: $wire,
+        @elseif ($hasXModel())
+            value: {{ $attributes->first('x-model') }},
         @else
             value: {{ $selectedKeyToJS() }},
         @endif

resources/views/components/inputs/date-picker.blade.php

@@ -1,24 +1,37 @@
 <div x-data="{
         fp: null,
-        @if ($value && ! $attributes->hasStartsWith('wire:model'))
-            value: '{{ $value }}',
-        @elseif ($attributes->hasStartsWith('wire:model'))
+        @if ($hasWireModel())
             value: @entangle($attributes->wire('model')),
+        @elseif ($hasXModel())
+            value: {{ $attributes->first('x-model') }},
         @else
-            value: null,
+            value: {{ $value ? "'{$value}'" : 'null' }},
         @endif
+        updateValue(newValue) {
+            this.value = newValue;
+            $dispatch('input', newValue);
+
+            try {
+                this.fp.setDate(newValue);
+            } catch {}
+
+            @if ($hasXModel())
+                {{ $attributes->first('x-model') }} = newValue;
+            @endif
+        },
      }"
      x-init="fp = flatpickr($refs.input, {
         defaultDate: value,
         onOpen: [
             function (selectedDates, dateStr, instance) {
                 instance.setDate(value);
             },
+            {{ $onOpen ?? '' }}
         ],
         {{ $jsonOptions() }}
         {{ $optionsSlot ?? '' }}
      })"
-     x-on:change="value = $event.target.value; fp.setDate(value)"
+     x-on:change="updateValue($event.target.value)"
      class="{{ $getContainerClass() }}"
      {{ $extraAttributes }}
 >
@@ -43,10 +56,14 @@ class="leading-addon cursor-pointer inline-flex items-center px-3 rounded-l-md b
         @if ($name) name="{{ $name }}" @endif
         @if ($id) id="{{ $id }}" @endif
         x-ref="input"
-        x-bind:value="value"
+
+        @unless ($hasXModel())
+            x-bind:value="value"
+        @endunless
+
         placeholder="{{ $placeholder }}"
 
-        @if ($value && ! $attributes->hasStartsWith('wire:model')) value="{{ $value }}" @endif
+        @if ($value && ! $hasBoundModel()) value="{{ $value }}" @endif
 
         {!! $ariaDescribedBy() !!}
         @if ($hasErrorsAndShow($name))
@@ -59,7 +76,7 @@ class="leading-addon cursor-pointer inline-flex items-center px-3 rounded-l-md b
             <button x-show="Boolean(value)"
                     x-transition
                     x-cloak
-                    x-on:click="value = null; fp.setDate(value)"
+                    x-on:click="updateValue(null)"
                     class="form-input-clear h-6 w-6 group rounded-full p-1 hover:bg-blue-gray-200 focus:outline-blue-gray transition-colors"
                     type="button"
             >

resources/views/components/inputs/input.blade.php

@@ -10,7 +10,7 @@
         @if ($id) id="{{ $id }}" @endif
         type="{{ $type }}"
 
-        @if (! is_null($value) && ! $attributes->hasStartsWith('wire:model')) value="{{ $value }}" @endif
+        @if (! is_null($value) && ! $hasBoundModel()) value="{{ $value }}" @endif
 
         @if ($hasErrorsAndShow($name))
             aria-invalid="true"

resources/views/components/inputs/password.blade.php

@@ -19,7 +19,7 @@ class="{{ $containerClass() }}"
             type="password"
         @endif
 
-        @if ($value && ! $attributes->hasStartsWith('wire:model')) value="{{ $value }}" @endif
+        @if ($value && ! $hasBoundModel()) value="{{ $value }}" @endif
 
         @if ($hasErrorsAndShow($name))
             aria-invalid="true"

resources/views/components/inputs/textarea.blade.php

@@ -10,7 +10,7 @@
               @endif
 
               {!! $attributes->merge(['class' => $inputClass(), 'rows' => 3]) !!}
-    >@if (! is_null($value) && ! $attributes->hasStartsWith('wire:model')){!! $value !!}@elseif ($slot->isNotEmpty()){!! $slot !!}@endif</textarea>
+    >@if (! is_null($value) && ! $hasBoundModel()){!! $value !!}@elseif ($slot->isNotEmpty()){!! $slot !!}@endif</textarea>
 
     @include('form-components::partials.trailing-addons')
 </div>

src/Components/Choice/Checkbox.php

@@ -4,10 +4,12 @@
 
 use Rawilk\FormComponents\Components\BladeComponent;
 use Rawilk\FormComponents\Concerns\HandlesValidationErrors;
+use Rawilk\FormComponents\Concerns\HasModels;
 
 class Checkbox extends BladeComponent
 {
     use HandlesValidationErrors;
+    use HasModels;
 
     public string $type = 'checkbox';
 

src/Components/Choice/SwitchToggle.php

@@ -8,10 +8,12 @@
 use Illuminate\Support\Str;
 use Rawilk\FormComponents\Components\BladeComponent;
 use Rawilk\FormComponents\Concerns\HandlesValidationErrors;
+use Rawilk\FormComponents\Concerns\HasModels;
 
 class SwitchToggle extends BladeComponent
 {
     use HandlesValidationErrors;
+    use HasModels;
 
     protected static array $assets = ['alpine'];
 

src/Components/Files/FileUpload.php

@@ -7,11 +7,13 @@
 use Rawilk\FormComponents\Components\BladeComponent;
 use Rawilk\FormComponents\Concerns\AcceptsFiles;
 use Rawilk\FormComponents\Concerns\HandlesValidationErrors;
+use Rawilk\FormComponents\Concerns\HasModels;
 
 class FileUpload extends BladeComponent
 {
     use HandlesValidationErrors;
     use AcceptsFiles;
+    use HasModels;
 
     protected static array $assets = ['alpine'];
 
@@ -47,7 +49,7 @@ public function canShowUploadProgress($attributes): bool
             return $this->canShowUploadProgress = false;
         }
 
-        if (! $attributes->hasStartsWith('wire:model')) {
+        if (! $this->hasWireModel()) {
             return $this->canShowUploadProgress = false;
         }
 

src/Components/Inputs/Input.php

@@ -8,11 +8,13 @@
 use Rawilk\FormComponents\Components\BladeComponent;
 use Rawilk\FormComponents\Concerns\HandlesValidationErrors;
 use Rawilk\FormComponents\Concerns\HasAddons;
+use Rawilk\FormComponents\Concerns\HasModels;
 
 class Input extends BladeComponent
 {
     use HandlesValidationErrors;
     use HasAddons;
+    use HasModels;
 
     /*
      * Normally we want arrays to be encoded, but some components don't need that, like CustomSelect.

src/Concerns/HasModels.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Rawilk\FormComponents\Concerns;
+
+trait HasModels
+{
+    protected $hasWireModel;
+    protected $hasXModel;
+
+    public function hasBoundModel(): bool
+    {
+        return $this->hasWireModel() || $this->hasXModel();
+    }
+
+    public function hasWireModel(): bool
+    {
+        if ($this->hasWireModel !== null) {
+            return $this->hasWireModel;
+        }
+
+        return $this->hasWireModel = $this->attributes->hasStartsWith('wire:model');
+    }
+
+    public function hasXModel(): bool
+    {
+        if ($this->hasXModel !== null) {
+            return $this->hasXModel;
+        }
+
+        return $this->hasXModel = $this->attributes->hasStartsWith('x-model');
+    }
+}

tests/Components/Choice/__snapshots__/SwitchToggleTest__custom_attributes_are_applied_to_the_button__1.txt

@@ -11,7 +11,7 @@
      }"
      wire:ignore.self
      class="flex items-center "
-     
+          
 >
 
     <button x-bind:aria-pressed="JSON.stringify(isPressed)"