Add "extra-attributes" property to inputs

rawilk · rawilk · commit 03f62b68ce4e · 2021-02-24T08:24:24.000-06:00
diff --git a/resources/views/components/choice/checkbox-or-radio.blade.php b/resources/views/components/choice/checkbox-or-radio.blade.php
@@ -6,6 +6,7 @@
                type="{{ $type }}"
                @if ($value) value="{{ $value }}" @endif
                @if ($checked && ! $attributes->whereStartsWith('wire:model')->first()) checked @endif
+               {{ $extraAttributes }}
         />
     </div>
 
diff --git a/resources/views/components/choice/switch-toggle.blade.php b/resources/views/components/choice/switch-toggle.blade.php
@@ -15,6 +15,7 @@
      }"
      wire:ignore.self
      class="{{ $getContainerClass() }}"
+     {{ $extraAttributes }}
 >
     @if ($label && $labelPosition === 'left')
         <span x-on:click="$refs.button.click(); $refs.button.focus();"
diff --git a/resources/views/components/files/file-pond.blade.php b/resources/views/components/files/file-pond.blade.php
@@ -1,4 +1,5 @@
 <div wire:ignore
+     {{ $extraAttributes }}
      x-data="{ pond: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"
      x-cloak
      x-on:file-pond-clear.window="
diff --git a/resources/views/components/files/file-upload.blade.php b/resources/views/components/files/file-upload.blade.php
@@ -29,6 +29,7 @@ class="sr-only"
                    @endif
 
                    {{ $attributes->except('class') }}
+                   {{ $extraAttributes }}
             />
 
             <label for="{{ $id }}"
diff --git a/resources/views/components/inputs/custom-select.blade.php b/resources/views/components/inputs/custom-select.blade.php
@@ -20,6 +20,7 @@
      x-on:keydown.tab="close()"
      wire:ignore.self
      class="{{ $getContainerClass() }}"
+     {{ $extraAttributes }}
 >
     @include('form-components::partials.leading-addons')
     @include('form-components::partials.custom-select-button')
diff --git a/resources/views/components/inputs/date-picker.blade.php b/resources/views/components/inputs/date-picker.blade.php
@@ -15,6 +15,7 @@
      })"
      x-on:change="value = $event.target.value; fp.setDate(value)"
      class="{{ $getContainerClass() }}"
+     {{ $extraAttributes }}
 >
     @if ($toggleIcon !== false)
         <span x-on:click="fp.open()"
diff --git a/resources/views/components/inputs/input.blade.php b/resources/views/components/inputs/input.blade.php
@@ -2,7 +2,8 @@
     @include('form-components::partials.leading-addons')
 
     <input
-        {{ $attributes->merge(['class' => $inputClass()]) }}
+        {{ $attributes->class($inputClass()) }}
+        {{ $extraAttributes }}
 
         @if ($name) name="{{ $name }}" @endif
         @if ($id) id="{{ $id }}" @endif
diff --git a/resources/views/components/inputs/password.blade.php b/resources/views/components/inputs/password.blade.php
@@ -7,6 +7,7 @@ class="{{ $containerClass() }}"
 
     <input
         {{ $attributes->merge(['class' => $inputClass()]) }}
+        {{ $extraAttributes }}
 
         @if ($name) name="{{ $name }}" @endif
         @if ($id) id="{{ $id }}" @endif
diff --git a/resources/views/components/inputs/select.blade.php b/resources/views/components/inputs/select.blade.php
@@ -4,6 +4,7 @@
     <select @if ($name) name="{{ $name }}" @endif
             @if ($id) id="{{ $id }}" @endif
             @if ($multiple) multiple @endif
+            {{ $extraAttributes }}
 
             @if ($hasErrorsAndShow($name))
                 aria-invalid="true"
diff --git a/resources/views/components/inputs/textarea.blade.php b/resources/views/components/inputs/textarea.blade.php
@@ -3,6 +3,7 @@
 
     <textarea @if ($name) name="{{ $name }}" @endif
               @if ($id) id="{{ $id }}" @endif
+              {{ $extraAttributes }}
               @if ($hasErrorsAndShow($name))
                   aria-invalid="true"
 
diff --git a/resources/views/partials/timezone-select-custom.blade.php b/resources/views/partials/timezone-select-custom.blade.php
@@ -6,5 +6,6 @@
                  :max-width="$maxWidth"
                  :options="$optionsForCustomSelect()"
                  :container-class="$containerClass"
+                 :extra-attributes="$extraAttributes"
                  {{ $attributes }}
 />
diff --git a/resources/views/partials/timezone-select-native.blade.php b/resources/views/partials/timezone-select-native.blade.php
@@ -13,7 +13,8 @@
                 @endif
             @endif
 
-            {{ $attributes->merge(['class' => $inputClass()]) }}
+            {{ $attributes->class($inputClass()) }}
+            {{ $extraAttributes }}
     >
         {{ $slot }}
 
diff --git a/src/Components/Choice/Checkbox.php b/src/Components/Choice/Checkbox.php
@@ -18,6 +18,7 @@ public function __construct(
         public null|string $label = null,
         public null|string $description = '',
         public bool $checked = false,
+        public $extraAttributes = '',
     ) {
         $this->id = $this->id ?? $this->name;
 
diff --git a/src/Components/Choice/SwitchToggle.php b/src/Components/Choice/SwitchToggle.php
@@ -31,6 +31,7 @@ public function __construct(
         public null|string $buttonLabel = 'form-components::messages.switch_button_label',
         public null|string $size = null,
         public bool $disabled = false,
+        public $extraAttributes = '',
     ) {
         $this->id = $this->id ?? $this->name;
         $this->labelId = $this->id ?? Str::random(8);
diff --git a/src/Components/Files/FilePond.php b/src/Components/Files/FilePond.php
@@ -30,7 +30,8 @@ public function __construct(
          * still present.
          */
         public bool $watchValue = true,
-        bool $showErrors = true
+        bool $showErrors = true,
+        public $extraAttributes = '',
     ) {
         $this->type = $type;
         $this->showErrors = $showErrors;
diff --git a/src/Components/Files/FileUpload.php b/src/Components/Files/FileUpload.php
@@ -27,7 +27,8 @@ public function __construct(
         // Display the file upload progress if using livewire.
         // Only applies if a "wire:model" attribute is set.
         public bool $displayUploadProgress = true,
-        bool $showErrors = true
+        bool $showErrors = true,
+        public $extraAttributes = '',
     ) {
         $this->id = $this->id ?? $this->name;
         $this->showErrors = $showErrors;
diff --git a/src/Components/Inputs/CustomSelect.php b/src/Components/Inputs/CustomSelect.php
@@ -44,6 +44,7 @@ public function __construct(
         null|string $emptyText = 'form-components::messages.custom_select_empty_text',
         public bool $convertValuesToString = false,
         public null|string $containerClass = null,
+        public $extraAttributes = '',
     ) {
         parent::__construct(
             name: $name,
@@ -58,6 +59,7 @@ public function __construct(
             inlineAddonPadding: $inlineAddonPadding,
             leadingIcon: $leadingIcon,
             containerClass: $containerClass,
+            extraAttributes: $extraAttributes,
         );
 
         $this->resolveIcons();
diff --git a/src/Components/Inputs/DatePicker.php b/src/Components/Inputs/DatePicker.php
@@ -33,6 +33,7 @@ public function __construct(
         public null|string  $toggleIcon = null,
         public null|string $clearIcon = null,
         public null|string $containerClass = null,
+        public $extraAttributes = '',
     ) {
         parent::__construct(
             name: $name,
@@ -47,7 +48,8 @@ public function __construct(
             leadingIcon: $leadingIcon,
             trailingAddon: $trailingAddon,
             trailingAddonPadding: $trailingAddonPadding,
-            trailingIcon: $trailingIcon
+            trailingIcon: $trailingIcon,
+            extraAttributes: $extraAttributes,
         );
 
         $this->resolveIcons();
diff --git a/src/Components/Inputs/Input.php b/src/Components/Inputs/Input.php
@@ -33,7 +33,8 @@ public function __construct(
         $leadingIcon = false,
         $trailingAddon = false,
         $trailingAddonPadding = self::DEFAULT_TRAILING_ADDON_PADDING,
-        $trailingIcon = false
+        $trailingIcon = false,
+        public $extraAttributes = '',
     ) {
         $this->id = $this->id ?? $this->name;
         $this->value = old($this->name, $this->value);
diff --git a/src/Components/Inputs/Password.php b/src/Components/Inputs/Password.php
@@ -23,6 +23,7 @@ public function __construct(
         public null|string $showPasswordIcon = null,
         public null|string $hidePasswordIcon = null,
         public null|string $containerClass = null,
+        public $extraAttributes = '',
     ) {
         parent::__construct(
             name: $name,
@@ -36,6 +37,7 @@ public function __construct(
             inlineAddon: $inlineAddon,
             inlineAddonPadding: $inlineAddonPadding,
             leadingIcon: $leadingIcon,
+            extraAttributes: $extraAttributes,
         );
 
         $this->showPasswordIcon = $this->showPasswordIcon ?? config('form-components.components.password.show_password_icon');
diff --git a/src/Components/Inputs/Select.php b/src/Components/Inputs/Select.php
@@ -27,6 +27,7 @@ public function __construct(
         $trailingAddonPadding = self::DEFAULT_TRAILING_ADDON_PADDING,
         $trailingIcon = false,
         public null|string $containerClass = null,
+        public $extraAttributes = '',
     ) {
         parent::__construct(
             name: $name,
@@ -42,6 +43,7 @@ public function __construct(
             trailingAddon: $trailingAddon,
             trailingAddonPadding: $trailingAddonPadding,
             trailingIcon: $trailingIcon,
+            extraAttributes: $extraAttributes,
         );
 
         $this->selectedKey = old($this->name, $this->value);
diff --git a/src/Components/Inputs/TimezoneSelect.php b/src/Components/Inputs/TimezoneSelect.php
@@ -29,6 +29,7 @@ public function __construct(
         null|string $placeholder = 'form-components::messages.timezone_select_placeholder',
         public bool $fixedPosition = false,
         public null|string $containerClass = null,
+        public $extraAttributes = '',
     ) {
         parent::__construct(
             name: $name,
@@ -45,6 +46,7 @@ public function __construct(
             trailingAddonPadding: $trailingAddonPadding,
             trailingIcon: $trailingIcon,
             containerClass: $containerClass,
+            extraAttributes: $extraAttributes,
         );
 
         $this->only = is_null($only) ? config('form-components.timezone_subset', false) : $only;
diff --git a/tests/Components/Inputs/InputTest.php b/tests/Components/Inputs/InputTest.php
@@ -4,6 +4,7 @@
 
 namespace Rawilk\FormComponents\Tests\Components\Inputs;
 
+use Illuminate\Support\HtmlString;
 use Rawilk\FormComponents\Components\Inputs\Input;
 use Rawilk\FormComponents\Tests\Components\ComponentTestCase;
 
@@ -443,4 +444,28 @@ public function name_can_be_omitted(): void
 
         $this->assertComponentRenders($expected, '<x-input />');
     }
+
+    /** @test */
+    public function can_have_extra_attributes(): void
+    {
+        $this->withViewErrors([]);
+
+        $attributes = new HtmlString(implode(PHP_EOL, [
+            'x-data',
+            'x-ref="foo"',
+            'x-on:keydown="$wire.submit()"',
+        ]));
+
+        $template = <<<HTML
+        <x-input name="foo" :extra-attributes="\$attributes" />
+        HTML;
+
+        $expected = <<<HTML
+        <div class="form-text-container">
+            <input class="form-input form-text" x-data x-ref="foo" x-on:keydown="\$wire.submit()" name="foo" id="foo" type="text" />
+        </div>
+        HTML;
+
+        $this->assertComponentRenders($expected, $template, ['attributes' => $attributes]);
+    }
 }

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`	`}"`
`16`	`16`	`wire:ignore.self`
`17`	`17`	`class="{{ $getContainerClass() }}"`
	`18`	`+ {{ $extraAttributes }}`
`18`	`19`	`>`
`19`	`20`	`@if ($label && $labelPosition === 'left')`
`20`	`21`	`<span x-on:click="$refs.button.click(); $refs.button.focus();"`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`<div wire:ignore`
	`2`	`+ {{ $extraAttributes }}`
`2`	`3`	`x-data="{ pond: null, @if ($shouldWatch($attributes)) value: @entangle($attributes->wire('model')), oldValue: undefined @endif }"`
`3`	`4`	`x-cloak`
`4`	`5`	`x-on:file-pond-clear.window="`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@`
`20`	`20`	`x-on:keydown.tab="close()"`
`21`	`21`	`wire:ignore.self`
`22`	`22`	`class="{{ $getContainerClass() }}"`
	`23`	`+ {{ $extraAttributes }}`
`23`	`24`	`>`
`24`	`25`	`@include('form-components::partials.leading-addons')`
`25`	`26`	`@include('form-components::partials.custom-select-button')`