refactor: use conditional classes for input components (#4)

ArkEcosystem · Oct 8, 2021 · 9911f55 · 9911f55
1 parent c8ac7f7
commit 9911f55
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 29 deletions.
diff --git a/resources/views/inputs/checkbox.blade.php b/resources/views/inputs/checkbox.blade.php
@@ -28,7 +28,11 @@
 @endphp
 
 <div class="{{ $class }}">
-    <div class="flex relative {{ $verticalPositionClass }} @if($right) flex-row-reverse @endif">
+    <div @class([
+        $verticalPositionClass,
+        'flex relative',
+        'flex-row-reverse' => $right,
+    ])>
         <div class="flex absolute items-center h-5">
             <input
                 id="{{ $id ?? $name }}"
@@ -43,7 +47,11 @@ class="focus-visible:ring-2 form-checkbox input-checkbox focus-visible:ring-them
             />
         </div>
 
-        <div class="@if($right) pr-7 @else pl-7 @endif text-sm text-theme-secondary-700 leading-5">
+        <div @class([
+            'text-sm leading-5 theme-secondary-700',
+            'pr-7' => $right,
+            'pl-7' => ! $right,
+        ])>
             <label for="{{ $id ?? $name }}" class="{{ $labelClasses }}">
                 {{ $label ? $label : trans('forms.' . $name) }}
             </label>

diff --git a/resources/views/inputs/input-with-prefix.blade.php b/resources/views/inputs/input-with-prefix.blade.php
@@ -16,7 +16,10 @@
         @endunless
 
         <div
-            class="input-wrapper input-wrapper-with-prefix @error($name) input-text--error @enderror"
+            @class([
+                'input-wrapper input-wrapper-with-prefix',
+                'input-text--error' => $errors->has($name),
+            ])
             x-bind:class="{ 'input-wrapper-with-prefix--dirty': !! isDirty }"
         >
             @if ($icon ?? false)

diff --git a/resources/views/inputs/input-with-suffix.blade.php b/resources/views/inputs/input-with-suffix.blade.php
@@ -16,7 +16,10 @@
         @endunless
 
         <div
-            class="input-wrapper input-wrapper-with-suffix @error($name) input-text--error @enderror"
+            @class([
+                'input-wrapper input-wrapper-with-suffix',
+                'input-text--error' => $errors->has($name),
+            ])
             x-bind:class="{ 'input-wrapper-with-suffix--dirty': !! isDirty }"
         >
             @include('ark::inputs.includes.input-field', [

diff --git a/resources/views/inputs/markdown.blade.php b/resources/views/inputs/markdown.blade.php
@@ -44,7 +44,13 @@
 <div class="ark-markdown-editor ark-markdown-editor-{{ $toolbar }} {{ $class ?? '' }}">
     <div class="input-group">
         @unless ($hideLabel ?? false)
-            <label for="{{ $id ?? $name }}" class="input-label @error($name) input-label--error @enderror">
+            <label
+                for="{{ $id ?? $name }}"
+                @class([
+                    'input-label',
+                    'input-label--error' => $errors->has($name),
+                ])
+            >
                 {{ ($label ?? '') ? $label : trans('forms.' . $name) }}
             </label>
         @endunless

diff --git a/resources/views/inputs/password-toggle.blade.php b/resources/views/inputs/password-toggle.blade.php
@@ -13,7 +13,10 @@ class="{{ $class ?? '' }}"
         @if(!($hideLabel ?? false))
             <label
                 for="{{ $id ?? $name }}"
-                class="input-label @error($name) input-label--error @enderror"
+                @class([
+                    'input-label',
+                    'input-label--error' => $errors->has($name),
+                ])
             >
                 {{ ($label ?? '') ? $label : trans('forms.' . $name) }}
             </label>
@@ -26,7 +29,11 @@ class="input-label @error($name) input-label--error @enderror"
                 :type="type"
                 id="{{ $id ?? $name }}"
                 name="{{ $name }}"
-                class="input-text shifted @error($name) input-text--error @enderror {{ $inputClass ?? '' }}"
+                @class([
+                    $inputClass ?? '',
+                    'input-text shifted',
+                    'input-text--error' => $errors->has($name),
+                ])
                 wire:model="{{ $model ?? $name }}"
                 @if($max ?? false) maxlength="{{ $max }}" @endif
                 @if($value ?? false) value="{{ $value }}" @endif
@@ -40,7 +47,10 @@ class="input-text shifted @error($name) input-text--error @enderror {{ $inputCla
             {{--toggle--}}
             <button
                 type="button"
-                class="right-0 px-4 input-icon text-theme-primary-300 rounded @error($name) text-theme-danger-500 @enderror"
+                @class([
+                    'right-0 px-4 input-icon text-theme-primary-300 rounded',
+                    'text-theme-danger-500' => $errors->has($name),
+                ])
                 @click="toggle()"
             >
                 <span x-show="!show">@svg('view', 'w-5 h-5')</span>

diff --git a/resources/views/inputs/select.blade.php b/resources/views/inputs/select.blade.php
@@ -1,15 +1,24 @@
 <div class="{{ $class ?? '' }}">
     <div class="input-group">
         @if($showLabel ?? true)
-            <label for="{{ $id ?? $name }}" class="input-label @error($name) input-label--error @enderror">
+            <label
+                for="{{ $id ?? $name }}"
+                @class([
+                    'input-label',
+                    'input-label--error' => $errors->has($name),
+                ])
+            >
                 {{ ($label ?? '') ? $label : trans('forms.' . $name) }}
             </label>
         @endif
         <div class="input-wrapper">
             <select
                 id="{{ $id ?? $name }}"
                 name="{{ $name }}"
-                class="form-select block w-full pl-4 pr-8 py-3 @error($name) border-theme-danger-500 focus:border-theme-danger-300 focus:ring focus:ring-theme-danger-300 @enderror"
+                @class([
+                    'form-select block w-full pl-4 pr-8 py-3',
+                    'border-theme-danger-500 focus:border-theme-danger-300 focus:ring focus:ring-theme-danger-300' => $errors->has($name),
+                ])
                 @if(! isset($noModel)) wire:model="{{ $model ?? $name }}" @endif
                 @if($onChange ?? false) x-on:change="{{ $onChange }}" @endif
                 @if($disabled ?? '') disabled @endif

diff --git a/resources/views/inputs/tags.blade.php b/resources/views/inputs/tags.blade.php
@@ -33,7 +33,11 @@
             ])
         @endunless
 
-        <div class="input-wrapper {{ ($isDisabled || $addDisabled) ? 'disabled-tags-input' : '' }} {{ ($addDisabled) ? 'disabled-tags-input-add' : '' }}">
+        <div @class([
+            'input-wrapper',
+            'disabled-tags-input'     => $isDisabled || $addDisabled,
+            'disabled-tags-input-add' => $addDisabled,
+        ])>
             <div
                 wire:ignore
                 x-ref="input"

diff --git a/resources/views/inputs/textarea.blade.php b/resources/views/inputs/textarea.blade.php
@@ -27,7 +27,10 @@
         @endunless
 
         <div class="input-wrapper">
-            <textarea class="input-text @error($name) input-text--error @enderror"
+            <textarea @class([
+                    'input-text',
+                    'input-text--error' => $errors->has($name),
+                ])
                 {{ $attributes
                     ->merge([
                         'id'   => $id ?? $name,

diff --git a/resources/views/inputs/tile-selection.blade.php b/resources/views/inputs/tile-selection.blade.php
@@ -28,7 +28,11 @@ class="space-y-4 {{ $class }}"
     }"
 >
     <div class="{{ $wrapperClass }}">
-        <div class="flex flex-col space-y-4 md:space-y-0 md:flex-row md:justify-between {{ $description ? 'md:items-end' : 'md:items-center' }}">
+        <div @class([
+            'flex flex-col space-y-4 md:space-y-0 md:flex-row md:justify-between',
+            'md:items-end'    => $description,
+            'md:items-center' => ! $description,
+        ])>
             @if($title || $description)
                 <div class="flex flex-col">
                     @if($title)
@@ -51,7 +55,11 @@ class="space-y-4 {{ $class }}"
         </div>
 
         @unless ($hiddenOptions)
-            <div class="{{ $single ? 'tile-selection-list-single' : 'tile-selection-list' }} {{ $gridWrapperClass }}">
+            <div @class([
+                $gridWrapperClass,
+                'tile-selection-list-single' => $single,
+                'tile-selection-list' => ! $single,
+            ])>
                 @foreach ($options as $option)
                     @include('ark::inputs.includes.tile-selection-option', [
                         'option' => $option,

diff --git a/resources/views/inputs/upload-image-collection.blade.php b/resources/views/inputs/upload-image-collection.blade.php
@@ -80,18 +80,25 @@ class="flex flex-col space-y-1 text-xs font-semibold text-center sm:flex-row sm:
                         </div>
 
                         <div class="absolute inset-0 opacity-0 hover:opacity-100 transition-default">
-                            <div class="select-none rounded-xl flex flex-col items-center justify-center opacity-70 @if($sortable) cursor-pointer bg-theme-secondary-900 @else border-6 border-theme-secondary-900 @endif w-full h-full">
+                            <div @class([
+                                'select-none rounded-xl flex flex-col items-center justify-center opacity-70 w-full h-full',
+                                'cursor-pointer bg-theme-secondary-900' => $sortable,
+                                'border-6 border-theme-secondary-900'   => ! $sortable,
+                            ])>
                                 @if($sortable)
                                     <x-ark-icon name="drag" size="lg" class="text-white"/>
-                                    <p class="mt-3 text-xs font-semibold text-theme-secondary-500">Drag to
-                                        reposition</p>
+                                    <p class="mt-3 text-xs font-semibold text-theme-secondary-500">
+                                        Drag to reposition
+                                    </p>
                                 @endif
                             </div>
 
-                            <button type="button" data-action
-                                    class="absolute top-0 right-0 p-1 -mt-2 -mr-2 rounded cursor-pointer bg-theme-danger-100 text-theme-danger-500"
-                                    wire:click="deleteImage({{ $index }})"
-                                    data-tippy-hover="{{ $deleteTooltip }}"
+                            <button
+                                type="button"
+                                data-action
+                                class="absolute top-0 right-0 p-1 -mt-2 -mr-2 rounded cursor-pointer bg-theme-danger-100 text-theme-danger-500"
+                                wire:click="deleteImage({{ $index }})"
+                                data-tippy-hover="{{ $deleteTooltip }}"
                             >
                                 <x-ark-icon name="close" size="sm"/>
                             </button>

diff --git a/resources/views/inputs/upload-image-single.blade.php b/resources/views/inputs/upload-image-single.blade.php
@@ -71,12 +71,18 @@
     x-on:livewire-upload-error="isUploading = false; livewire.emit('uploadError', '{{ $uploadErrorMessage }}');"
     class="relative {{ $dimensions }}"
 >
-    <div class="rounded-xl w-full h-full @unless ($image) p-2 border-2 border-dashed border-theme-primary-100 @endif focus-within:border-theme-primary-500">
+    <div @class([
+        'rounded-xl w-full h-full focus-within:border-theme-primary-500',
+        'p-2 border-2 border-dashed border-theme-primary-100' => ! $image,
+    ])>
         <div
             @if ($image)
             style="background-image: url('{{ $image }}')"
             @endif
-            class="inline-block w-full h-full bg-center bg-no-repeat bg-cover rounded-xl bg-theme-primary-50 @unless($readonly) cursor-pointer hover:bg-theme-primary-100 transition-default @endunless"
+            @class([
+                'inline-block w-full h-full bg-center bg-no-repeat bg-cover rounded-xl bg-theme-primary-50',
+                'cursor-pointer hover:bg-theme-primary-100 transition-default' => ! $readonly,
+            ])
             @unless($readonly)
             @click.self="select"
             role="button"
@@ -122,9 +128,10 @@ class="flex absolute top-2 right-2 bottom-2 left-2 flex-col justify-center items
         @unless($readonly)
             <div
                 wire:key="delete-button-{{ $id }}"
-                class="rounded-xl absolute top-0 opacity-0 hover:opacity-100 transition-default w-full h-full
-                    @unless ($image) hidden @endunless"
-
+                @class([
+                    'rounded-xl absolute top-0 opacity-0 hover:opacity-100 transition-default w-full h-full',
+                    'hidden' => ! $image,
+                ])
             >
                 <div
                     class="absolute top-0 w-full h-full rounded-xl opacity-70 pointer-events-none border-6 border-theme-secondary-900 transition-default"></div>

diff --git a/resources/views/inputs/upload.blade.php b/resources/views/inputs/upload.blade.php
@@ -2,7 +2,13 @@
     class="flex flex-col flex-1 h-full"
     x-data="{{ $method }}({ url: '{{ $url }}', onUpload: () => { window.location.reload() }})"
 >
-    <label for="{{ $id ?? $name }}" class="input-label @error($name) input-label--error @enderror">
+    <label
+        for="{{ $id ?? $name }}"
+        @class([
+            'input-label',
+            'input-label--error' => $errors->has($name),
+        ])
+    >
         {{ ($label ?? '') ? $label : trans('forms.' . $name) }}
     </label>
 

diff --git a/resources/views/inputs/user-tagger.blade.php b/resources/views/inputs/user-tagger.blade.php
@@ -52,15 +52,21 @@ class="{{ $class }} ark-user-tagger--input"
                     wire:ignore
                     x-ref="editor"
                     style="min-height: {{ $rows * 30 }}px; word-break: break-word; white-space: pre-wrap;"
-                    class="input-text @error($name) input-text--error @enderror"
+                    @class([
+                        'input-text',
+                        'input-text--error' => $errors->has($name),
+                    ])
                     data-placeholder="{{ $placeholder }}"
                 >{{ $slot ?? '' }}</div>
             @else
                 <textarea
                     wire:ignore
                     x-ref="editor"
                     style="min-height: {{ $rows * 30 }}px; word-break: break-word; white-space: pre-wrap;"
-                    class="input-text @error($name) input-text--error @enderror"
+                    @class([
+                        'input-text',
+                        'input-text--error' => $errors->has($name),
+                    ])
                     data-placeholder="{{ $placeholder }}"
                 >{{ $slot ?? '' }}</textarea>
             @endunless