Added text colors to config

Added spa-layout to config Added default traits to stubs Fix array field icon did not show New Range slider Fix error icon text color Fix styling horizontal alignment of array icons New min, max, step, option to inputs of type number, range, date, datetime-local, month, time, week Fix background color in notification trait Fix background color of delete button in array fields New Honeypot field support New fields_updated() method in Form Component New Laravel 7 Blade component for range input sliders Fix default path for mime_type icons
tanthammar · Aug 6, 2020 · 8ac6d79 · 8ac6d79
1 parent c7e8e24
commit 8ac6d79
Show file tree

Hide file tree

Showing 17 changed files with 131 additions and 23 deletions.
diff --git a/config/tall-forms.php b/config/tall-forms.php
@@ -1,32 +1,53 @@
 <?php
 
 return [
+    //note that the word dummymodel is auto replaced with the lower case value of --model option in the make command
     'form-title' => "trans('global.create').' '.trans('crud.dummymodel.title_singular')",
+
+    //A Laravel 7 blade component to wrap your form if $spaMode = true, see documentation
+    'spa-layout' => 'tall-forms::spa-layout',
+
+
     //form buttons translations
     'saved' => 'global.saved',
     'delete' => 'global.delete',
     'save-and-stay' =>'global.save',
     'save-go-back' => 'global.save_go_back',
     'message-updated-success' => 'messages.updated_success',
+
+
     //notification trait popup bg colors
     'positive' => 'bg-green-500',
     'negative' => 'bg-red-500',
     'info' => 'bg-blue-500',
     'warning' => 'bg-orange-500',
     'default' => 'bg-teal-500',
+
+    //text colors
+    'text-positive' => 'text-aurora-green',
+    'text-negative' => 'text-aurora-red',
+    'text-info' => 'text-frost-dimmed',
+    'text-warning' => 'text-orange-800',
+    'text-primary' => 'text-teal-800',
+
+
     //button component classes
     'button-info' => 'text-white bg-frost-dimmed hover:bg-frost-blue focus:border-blue-700 focus:shadow-outline-blue active:bg-frost-dimmed',
     'button-positive' => 'text-white bg-aurora-green hover:bg-green-500 focus:border-green-600 focus:shadow-outline-green active:bg-aurora-green',
     'button-negative' => 'text-red-100 bg-aurora-red hover:bg-red-500 focus:border-red-600 focus:shadow-outline-red active:bg-aurora-red',
     'button-warning' => 'text-orange-100 bg-aurora-orange hover:bg-orange-600 focus:border-orange-700 focus:shadow-outline-orange active:bg-orange-700',
     'button-primary' => 'text-blue-100 bg-night-lighter hover:bg-night-dark focus:border-night-light focus:shadow-outline-blue active:bg-night-dark',
+
+
     //file uploads
     'storage_disk' => env('FORM_STORAGE_DISK', 'public'),
     'storage_path' => env('FORM_STORAGE_PATH', 'uploads'),
+
+
     //icons
     'arrow-up-icon' => 'light/arrow-up', //used as @svg('light/arrow-up', 'classes')
     'arrow-down-icon' => 'light/arrow-down',
     'trash-icon' => 'light/trash-alt',
     'plus-icon' => 'light/plus-circle',
-    'file-icon' => 'light/' //used as light/{$mime_type}
+    'file-icon' => 'light/' //used as @svg('light/{$mime_type}', 'classes')
 ];
diff --git a/resources/stubs/create-component.stub b/resources/stubs/create-component.stub
@@ -3,8 +3,10 @@
 namespace App\Http\Livewire\Namespace;
 
 use App\ModelsPathDummyModel;
+use Tanthammar\TallForms\ArrayField;
 use Tanthammar\TallForms\Field;
 use Tanthammar\TallForms\FormComponent;
+use Tanthammar\TallForms\KeyValField;
 
 class DummyComponent extends FormComponent
 {

diff --git a/resources/stubs/update-component.stub b/resources/stubs/update-component.stub
@@ -3,8 +3,10 @@
 namespace App\Http\Livewire\Namespace;
 
 use App\ModelsPathDummyModel;
+use Tanthammar\TallForms\ArrayField;
 use Tanthammar\TallForms\Field;
 use Tanthammar\TallForms\FormComponent;
+use Tanthammar\TallForms\KeyValField;
 
 class DummyComponent extends FormComponent
 {

diff --git a/resources/views/array-fields/input.blade.php b/resources/views/array-fields/input.blade.php
@@ -1,4 +1,5 @@
 <x-tall-input :field="$bind" :colspan="$array_field->colspan ?? 6" :type="$array_field->input_type"
-    :prefix="$array_field->prefix ?? null" :prefix="$array_field->icon ?? null" :autocomplete="$array_field->autocomplete" :fieldClass="$array_field->class"
+    :prefix="$array_field->prefix ?? null" :icon="$array_field->icon ?? null" :autocomplete="$array_field->autocomplete" :fieldClass="$array_field->class"
     :placeholder="$array_field->placeholder" :help="$array_field->help"
-    :label="($array_field->show_label) ? $array_field->label : null" :errorMsg="$array_field->errorMsg" />
+    :label="($array_field->show_label) ? $array_field->label : null" :errorMsg="$array_field->errorMsg"
+    :step="$array_field->step" :min="$array_field->min" :max="$array_field->max"/>
diff --git a/resources/views/array-fields/range.blade.php b/resources/views/array-fields/range.blade.php
@@ -0,0 +1,5 @@
+<x-tall-range :field="$bind" :colspan="$array_field->colspan ?? 6"
+              :fieldClass="$array_field->class"
+              :help="$array_field->help"
+              :label="($array_field->show_label) ? $array_field->label : null" :errorMsg="$array_field->errorMsg"
+              :step="$array_field->step" :min="$array_field->min" :max="$array_field->max" />
diff --git a/resources/views/components/error-icon.blade.php b/resources/views/components/error-icon.blade.php
@@ -2,9 +2,9 @@
     'right' => 'right-0'
 ])
 <div class="absolute inset-y-0 {{ $right }} pr-3 flex items-center pointer-events-none">
-    <svg class="h-5 w-5 text-aurora-red" fill="currentColor" viewBox="0 0 20 20">
+    <svg class="h-5 w-5 config('tall-forms.text-negative')" fill="currentColor" viewBox="0 0 20 20">
         <path fill-rule="evenodd"
             d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
             clip-rule="evenodd" />
     </svg>
-</div>
+</div>
diff --git a/resources/views/components/field-wrapper.blade.php b/resources/views/components/field-wrapper.blade.php
@@ -4,7 +4,7 @@
     'label' => "",
     'labelW' => 'sm:w-1/3',
     'fieldW' => 'sm:w-2/3',
-    'align' => 'items-center'
+    'align' => 'items-baseline'
 ])
 <div class="col-span-{{ $colspan }} {{ $this->inline ? 'sm:flex' : 'w-full'}} {{$align}}">
     <label for="{{ $field }}" class="w-full form-label {{ $this->inline ? $labelW : null }} {{ $this->inline ? 'sm:text-right' : 'text-left' }} pr-4">

diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
@@ -11,6 +11,9 @@
     'help' => null,
     'errorMsg' => null,
     'fieldClass' => null,
+    'step' => null,
+    'min' => null,
+    'max' => null,
 ])
 <div {{ $attributes->merge(['class' => "sm:col-span-{$colspan}"]) }}>
     @if($label)
@@ -32,8 +35,8 @@ class="inline-flex items-center px-1 rounded-l-md border border-r-0 border-gray-
         @endif
     <input x-ref="{{ $field }}" wire:model.lazy="{{ $field }}" value="{{ old($field) }}" name="{{ $id ?? $field }}" type="{{ $type }}" @if($autocomplete)autocomplete="{{ $autocomplete }}"@endif
             @if($placeholder) placeholder="{{ $placeholder }}" @endif class="flex-1 form-input block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5
-            {{ ($prefix || $icon) ? ' rounded-none rounded-r-md ' : ' rounded ' }}
-            @error($field) error placeholder-red-300 @enderror" />
+            {{ ($prefix || $icon) ? ' rounded-none rounded-r-md ' : ' rounded ' }} @error($field) error placeholder-red-300 @enderror"
+           @if(in_array($type, ['number', 'range', 'date', 'datetime-local', 'month', 'time', 'week'])) min="{{ $min }}" max="{{ $max }}" step="{{ $step }}" @endif/>
         @error($field)
         <x-tall-error-icon :right="($type == 'date' || $type == 'datetime-local' || $type == 'time') ? 'right-6' : 'right-0'" @endif />
         @enderror

diff --git a/resources/views/components/notification.blade.php b/resources/views/components/notification.blade.php
@@ -2,7 +2,7 @@
     class="fixed inset-0 flex items-end justify-center px-4 py-6 pointer-events-none sm:p-6 sm:items-start sm:justify-end"
     style="margin-top: 50px" xmlns:x-bind="http://www.w3.org/1999/xhtml"
     xmlns:x-transition="http://www.w3.org/1999/xhtml" xmlns:x-on="http://www.w3.org/1999/xhtml">
-    <div x-cloak x-data="{ show: {{ $show ?? 'false' }}, message: '{{ $message ?? '' }}', bg: '{{ $bg ?? 'bg-aurora-green'}}' }"
+    <div x-cloak x-data="{ show: {{ $show ?? 'false' }}, message: '{{ $message ?? '' }}', bg: '{{ $bg ?? config('tall-forms.positive')}}' }"
          x-on:notify.window="
     show = true;
     message = $event.detail.message;

diff --git a/resources/views/components/range.blade.php b/resources/views/components/range.blade.php
@@ -0,0 +1,33 @@
+@props([
+'colspan' => 6,
+'field' => "",
+'label' => "",
+'id' => null,
+'type' => 'range',
+'help' => null,
+'errorMsg' => null,
+'fieldClass' => null,
+'step' => null,
+'min' => null,
+'max' => null,
+])
+<div {{ $attributes->merge(['class' => "sm:col-span-{$colspan}"]) }}>
+
+        <label for="{{ $id ?? $field }}">
+            <span class="block text-sm font-medium leading-5 text-gray-500">{{ $label ?? ''}}</span>
+            <div class="flex space-x-2 py-2 {{$fieldClass}}">
+                <div class="rounded border px-2 font-bold">{{ data_get($this, $field) ?? $min }}</div>
+                <div>{{$min}}</div>
+                <input x-ref="{{ $field }}" wire:model="{{ $field }}"
+                       value="{{ old($field) }}"
+                       name="{{ $id ?? $field }}"
+                       type="range"
+                       min="{{ $min }}" max="{{ $max }}" step="{{ $step }}"
+                       class="form-range mt-1 block w-full" />
+                <div>{{$max}}</div>
+            </div>
+
+        </label>
+    @if($help)<p class="help">{{ $help }}</p>@endif
+    @error($field)<p class="error">{{ $errorMsg ?? $message }}</p>@enderror
+</div>
diff --git a/resources/views/fields/array.blade.php b/resources/views/fields/array.blade.php
@@ -8,7 +8,7 @@
         <div class="flex flex-col divide-y mb-2 {{ $field->group_class }}">
             @foreach($form_data[$field->name] as $key => $value)
             <div class="py-2">
-                <div class="flex px-2 space-x-3">
+                <div class="flex px-2 space-x-3 items-center">
                     <div class="flex-1 sm:grid sm:grid-cols-12 col-gap-2 row-gap-4">
                         @foreach($field->array_fields as $array_field)
                         @php $bind = "{$field->key}.{$key}.{$array_field->name}" @endphp
@@ -28,7 +28,7 @@
                         </button>
                         @endif
 
-                        <button class="rounded bg-aurora-red shadow px-1 text-white"
+                        <button class="{{config('tall-forms.negative')}} rounded shadow px-1 text-white"
                             onclick="confirm('{{ __('Are you sure?') }}') || event.stopImmediatePropagation();"
                             wire:click="arrayRemove('{{ $field->name }}', '{{ $key }}')">
                             @svg(config('tall-forms.trash-icon'), 'h-4 w-4')
@@ -39,7 +39,7 @@
             @endforeach
         </div>
         @endif
-        <button class="rounded-md shadow-sm text-white bg-aurora-green" wire:click="arrayAdd('{{ $field->name }}')" style="width:fit-content">
+        <button class="rounded-md shadow-sm text-white {{config('tall-forms.positive')}}" wire:click="arrayAdd('{{ $field->name }}')" style="width:fit-content">
             @svg(config('tall-forms.plus-icon'), 'h-5 w-5 m-2')
         </button>
     </div>

diff --git a/resources/views/fields/input.blade.php b/resources/views/fields/input.blade.php
@@ -1,7 +1,7 @@
 @if($field->input_type === 'hidden')
-    <input x-ref="{{ $field->key }}" wire:model.lazy="{{ $field->key }}" name="{{ $field->key }}" type="hidden"/>
+    <input x-ref="{{ $field->key }}" wire:model="{{ $field->key }}" name="{{ $field->key }}" type="hidden" autocomplete="{{ $field->autocomplete }}" class="nosy" />
 @else
-<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
-    <x-tall-input :field="$field->key" :id="$field->name" :type="$field->input_type" :prefix="$field->prefix" :icon="$field->icon" :fieldClass="$field->class" :autocomplete="$field->autocomplete" :placeholder="$field->placeholder" :help="$field->help" :errorMsg="$field->errorMsg" />
-</x-tall-field-wrapper>
+    <x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+        <x-tall-input :field="$field->key" :id="$field->name" :type="$field->input_type" :prefix="$field->prefix" :icon="$field->icon" :fieldClass="$field->class" :autocomplete="$field->autocomplete" :placeholder="$field->placeholder" :help="$field->help" :errorMsg="$field->errorMsg" :step="$field->step" :min="$field->min" :max="$field->max"/>
+    </x-tall-field-wrapper>
 @endif
diff --git a/resources/views/fields/range.blade.php b/resources/views/fields/range.blade.php
@@ -0,0 +1,3 @@
+<x-tall-field-wrapper :inline="$field->inline" :colspan="$field->colspan" :field="$field->name" :label="$field->label" :labelW="$field->labelW" :fieldW="$field->fieldW">
+    <x-tall-range :field="$field->key" :id="$field->name" :fieldClass="$field->class" :help="$field->help" :errorMsg="$field->errorMsg" :step="$field->step" :min="$field->min" :max="$field->max"/>
+</x-tall-field-wrapper>
diff --git a/src/BaseField.php b/src/BaseField.php
@@ -28,6 +28,9 @@ class BaseField
     protected $inline = true;
     protected $is_relation = false;
     protected $is_custom = false;
+    protected $step = 1;
+    protected $min = 0;
+    protected $max;
 
     public function __get($property)
     {
@@ -61,6 +64,13 @@ public function checkbox(): BaseField
         return $this;
     }
 
+
+    public function range(): BaseField
+    {
+        $this->type = 'range';
+        return $this;
+    }
+
     public function checkboxes(array $options = []): BaseField
     {
         $this->type = 'checkboxes';
@@ -242,4 +252,23 @@ public function errorMsg(string $string): BaseField
         $this->errorMsg = $string;
         return $this;
     }
+
+    public function step(float $step): BaseField
+    {
+        $this->step = $step;
+        return $this;
+    }
+
+
+    public function min(float $min): BaseField
+    {
+        $this->min = $min;
+        return $this;
+    }
+
+    public function max(float $max): BaseField
+    {
+        $this->max = $max;
+        return $this;
+    }
 }
diff --git a/src/Field.php b/src/Field.php
@@ -13,47 +13,48 @@ class Field extends BaseField
     protected $keyval_fields = [];
     protected $array_sortable = false;
 
+
     public function __construct($label, $name)
     {
         $this->label = $label;
         $this->name = $name ?? Str::snake(Str::lower($label));
         $this->key = 'form_data.' . $this->name;
     }
 
+
     public static function make($label, $name = null)
     {
         return new static($label, $name);
     }
 
-    public function file()
+    public function file(): Field
     {
         $this->type = 'file';
         return $this;
     }
 
-    public function multiple()
+    public function multiple(): Field
     {
         $this->file_multiple = true;
         return $this;
     }
 
-    public function array($fields = [])
+    public function array($fields = []): Field
     {
         $this->type = 'array';
         $this->array_fields = $fields;
         return $this;
     }
-    public function keyval($fields = [])
+    public function keyval($fields = []): Field
     {
         $this->type = 'keyval';
         $this->keyval_fields = $fields;
         return $this;
     }
 
-    public function sortable()
+    public function sortable(): Field
     {
         $this->array_sortable = true;
         return $this;
     }
-
 }
diff --git a/src/FormComponent.php b/src/FormComponent.php
@@ -23,7 +23,7 @@ class FormComponent extends Component
     public $showGoBack = true;
     public $inline = true;
     public $spaMode = false;
-    public $spaLayout = 'tall-forms::spa-layout';
+    public $spaLayout;
     private static $storage_disk;
     private static $storage_path;
     public $form_wrapper = 'max-w-screen-lg mx-auto';
@@ -38,6 +38,7 @@ public function mount_form($model = null)
         $this->setFormProperties($this->model);
         $this->afterFormProperties();
         $this->previous = \URL::previous();  //used for saveAndGoBack
+        $this->spaLayout = config('tall-forms.spa-layout');
     }
 
 
@@ -93,9 +94,15 @@ public function fields()
 
     public function updated($field)
     {
+        $this->fields_updated($field);
         $this->validateOnly($field, $this->rules(true));
     }
 
+    public function fields_updated($field)
+    {
+        return null;
+    }
+
     public function submit()
     {
         $this->validate($this->rules());

diff --git a/src/FormServiceProvider.php b/src/FormServiceProvider.php
@@ -32,6 +32,7 @@ protected function bootViews()
         Blade::component('tall-forms::components.button', 'button');
         Blade::component('tall-forms::components.spinners.button', 'tall-spinner');
         Blade::component('tall-forms::components.input', 'tall-input');
+        Blade::component('tall-forms::components.range', 'tall-range');
         Blade::component('tall-forms::components.checkbox', 'tall-checkbox');
         Blade::component('tall-forms::components.radio', 'tall-radio');
         Blade::component('tall-forms::components.select', 'tall-select');