Merge pull request #1240 from livewire/josh/native-inputs

Add support for native form submissions

Author: calebporzio

stubs/resources/views/flux/checkbox/variants/default.blade.php

@@ -1,15 +1,23 @@
 @props([
-    'name' => $attributes->whereStartsWith('wire:model')->first(),
+    'name' => null,
 ])
 
 @php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
 $classes = Flux::classes()
     ->add('flex size-[1.125rem] rounded-[.3rem] mt-px outline-offset-2')
     ;
 @endphp
 
 <flux:with-inline-field :$attributes>
-    <ui-checkbox {{ $attributes->class($classes) }} data-flux-control data-flux-checkbox>
+    <ui-checkbox {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-checkbox>
         <flux:checkbox.indicator />
     </ui-checkbox>
 </flux:with-inline-field>

stubs/resources/views/flux/radio/group/variants/default.blade.php

@@ -1,9 +1,16 @@
 @props([
-    'name' => $attributes->whereStartsWith('wire:model')->first(),
+    'name' => null,
     'variant' => null,
 ])
 
 @php
+// We only want to show the name attribute it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
 $classes = Flux::classes()
     // Adjust spacing between fields...
     ->add('*:data-flux-field:mb-3')
@@ -13,7 +20,7 @@
 @endphp
 
 <flux:with-field :$attributes>
-    <ui-radio-group {{ $attributes->class($classes) }} data-flux-radio-group>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group>
         {{ $slot }}
     </ui-radio-group>
 </flux:with-field>

stubs/resources/views/flux/radio/group/variants/segmented.blade.php

@@ -1,10 +1,18 @@
 @props([
-    'name' => $attributes->whereStartsWith('wire:model')->first(),
+    'name' => null,
     'variant' => null,
     'size' => null,
 ])
 
 @php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
 $classes = Flux::classes()
     ->add('block flex p-1')
     ->add('rounded-lg bg-zinc-800/5 dark:bg-white/10')
@@ -14,7 +22,7 @@
 @endphp
 
 <flux:with-field :$attributes>
-    <ui-radio-group {{ $attributes->class($classes) }} data-flux-radio-group-segmented>
+    <ui-radio-group {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-segmented>
         {{ $slot }}
     </ui-radio-group>
 </flux:with-field>

stubs/resources/views/flux/switch.blade.php

@@ -1,9 +1,16 @@
 @props([
-    'name' => $attributes->whereStartsWith('wire:model')->first(),
+    'name' => null,
     'align' => 'right',
 ])
 
 @php
+// We only want to show the name attribute it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+    $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
 $classes = Flux::classes()
     ->add('group h-5 w-8 min-w-8 relative inline-flex items-center outline-offset-2')
     ->add('rounded-full')
@@ -29,13 +36,13 @@
 
 @if ($align === 'left' || $align === 'start')
     <flux:with-inline-field :$attributes>
-        <ui-switch {{ $attributes->class($classes) }} data-flux-control data-flux-switch>
+        <ui-switch {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-switch>
             <span class="{{ \Illuminate\Support\Arr::toCssClasses($indicatorClasses) }}"></span>
         </ui-switch>
     </flux:with-inline-field>
 @else
     <flux:with-reversed-inline-field :$attributes>
-        <ui-switch {{ $attributes->class($classes) }} data-flux-control data-flux-switch>
+        <ui-switch {{ $attributes->class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-switch>
             <span class="{{ \Illuminate\Support\Arr::toCssClasses($indicatorClasses) }}"></span>
         </ui-switch>
     </flux:with-reversed-inline-field>