# New: suffix icons and text for input fields

### If you published the views, please review and merge the changes to the `input.blade.php` and `Components/Input.php`.
tanthammar · Feb 3, 2021 · 89e5d02 · 89e5d02
1 parent 054bdbf
commit 89e5d02
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 13 deletions.
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
@@ -1,6 +1,6 @@
 <div class="{{$field->class}}">
     @if($field->prefix || $field->hasIcon)
-        <span class="{{ $icon_span }}">
+        <span class="{{ $icon_span }} {{ $left_border }}">
             @if($field->icon)
                 <span class="mx-1">@svg($field->icon, 'h-6 w-6')</span>
             @endif
@@ -15,14 +15,31 @@
             @endif
         </span>
     @endif
-    <input
-        value="{{ old($field->key) }}"
-        @if($required) required @endif
-        @foreach($options() as $key => $value) {{$key}}="{{$value}}" @endforeach
-        {{ $attributes->merge(['class' => $errors->has($field->key) ? $error() : $class() ]) }}
-    />
-    @error($field->key)
-    <x-tall-error-icon
-        :right="in_array($field->input_type, ['date', 'datetime-local', 'time']) ? 'right-6' : 'right-0'"/>
-    @enderror
+    <div class="relative w-full">
+        <input
+            value="{{ old($field->key) }}"
+            @if($required) required @endif
+            @foreach($options() as $key => $value) {{$key}}="{{$value}}" @endforeach
+            {{ $attributes->merge(['class' => $errors->has($field->key) ? $error() : $class() ]) }}
+        />
+        @error($field->key)
+            <x-tall-error-icon :right="in_array($field->input_type, ['date', 'datetime-local', 'time']) ? 'right-6' : 'right-0'"/>
+        @enderror
+    </div>
+    @if($field->suffix || $field->sfxHasIcon)
+        <span class="{{ $icon_span }} {{ $right_border }}">
+            @if($field->sfxIcon)
+                <span class="mx-1">@svg($field->sfxIcon, 'h-6 w-6')</span>
+            @endif
+            @if($field->sfxTallIcon)
+                <span class="mx-1"><x-tall-svg :path="$field->sfxTallIcon" class="h-6 w-6" /></span>
+            @endif
+            @if($field->sfxHtmlIcon)
+                <span class="mx-1">{!! $field->sfxHtmlIcon !!}</span>
+            @endif
+            @if($field->suffix)
+                <span class="mx-1 whitespace-no-wrap">{{ $field->suffix }}</span>
+            @endif
+        </span>
+    @endif
 </div>
diff --git a/src/Components/Input.php b/src/Components/Input.php
@@ -14,7 +14,9 @@ class Input extends Component
 
     public Field $field;
     public bool $required;
-    public string $icon_span = 'flex items-center justify-center px-2 rounded-l border border-r-0 border-gray-300 bg-gray-100 text-gray-600 sm:text-sm leading-normal';
+    public string $icon_span = 'flex items-center justify-center px-2 border border-gray-300 bg-gray-100 text-gray-600 sm:text-sm leading-normal';
+    public string $left_border = 'rounded-l border-r-0';
+    public string $right_border = 'rounded-r border-l-0';
 
     public function __construct(Field $field)
     {
@@ -48,7 +50,20 @@ public function class(): string
     {
         $class = "form-input block w-full shadow-inner ";
         $class .= $this->field->input_type == 'color' ? "h-11 p-1 " : null;
-        $class .= ($this->field->prefix || $this->field->hasIcon) ? " rounded-none rounded-r" : " rounded";
+//        $class .= ($this->field->prefix || $this->field->hasIcon) ? " rounded-none rounded-r" : " rounded";
+        $leftRounded = ($this->field->prefix || $this->field->hasIcon);
+        $rightRounded = ($this->field->suffix || $this->field->sfxHasIcon);
+
+        if($leftRounded || $rightRounded){
+            $class .= " rounded-none";
+            if($leftRounded && !$rightRounded){
+                $class .= " rounded-r";
+            } else if(!$leftRounded && $rightRounded){
+                $class .= " rounded-l";
+            }
+        } else {
+            $class .= " rounded";
+        }
         return $class;
     }
 

diff --git a/src/Input.php b/src/Input.php
@@ -20,6 +20,12 @@ class Input extends BaseField
     public $required = false;
     public $class = 'tf-input-wrapper';
 
+    public $suffix;
+    public $sfxIcon;
+    public $sfxTallIcon;
+    public $sfxHtmlIcon;
+    public bool $sfxHasIcon = false;
+
     protected function overrides(): self
     {
         $this->type = 'input';
@@ -52,6 +58,12 @@ public function prefix(string $prefix): self
         return $this;
     }
 
+    public function suffix(string $suffix): self
+    {
+        $this->suffix = $suffix;
+        return $this;
+    }
+
     public function required(): self
     {
         $this->required = true;
@@ -101,4 +113,40 @@ public function inputAttr(array $attributes): self
         return $this;
     }
 
+    /**
+     * Requires Blade UI Icons
+     * @param string $blade_ui_icon_path
+     * @return $this
+     */
+    public function suffixIcon(string $blade_ui_icon_path): self
+    {
+        $this->sfxIcon = $blade_ui_icon_path;
+        $this->sfxHasIcon = true;
+        return $this;
+    }
+
+    /**
+     * Requires you to create a blade file on the defined path
+     * @param string $blade_file_path
+     * @return $this
+     */
+    public function suffixTallIcon(string $blade_file_path): self
+    {
+        $this->sfxTallIcon = $blade_file_path;
+        $this->sfxHasIcon = true;
+        return $this;
+    }
+
+    /**
+     * Any valid html, example: fontawesome <i></i>
+     * @param string $html
+     * @return $this
+     */
+    public function suffixHtmlIcon(string $html): self
+    {
+        $this->sfxHtmlIcon = $html;
+        $this->sfxHasIcon = true;
+        return $this;
+    }
+
 }