From 8ac6d7993dccf7a3adea149619bf23c93e9b9cb7 Mon Sep 17 00:00:00 2001
From: tanthammar <tinahammar@gmail.com>
Date: Thu, 6 Aug 2020 18:06:55 +0200
Subject: [PATCH] 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

---
 config/tall-forms.php                         | 23 ++++++++++++-
 resources/stubs/create-component.stub         |  2 ++
 resources/stubs/update-component.stub         |  2 ++
 resources/views/array-fields/input.blade.php  |  5 +--
 resources/views/array-fields/range.blade.php  |  5 +++
 .../views/components/error-icon.blade.php     |  4 +--
 .../views/components/field-wrapper.blade.php  |  2 +-
 resources/views/components/input.blade.php    |  7 ++--
 .../views/components/notification.blade.php   |  2 +-
 resources/views/components/range.blade.php    | 33 +++++++++++++++++++
 resources/views/fields/array.blade.php        |  6 ++--
 resources/views/fields/input.blade.php        |  8 ++---
 resources/views/fields/range.blade.php        |  3 ++
 src/BaseField.php                             | 29 ++++++++++++++++
 src/Field.php                                 | 13 ++++----
 src/FormComponent.php                         |  9 ++++-
 src/FormServiceProvider.php                   |  1 +
 17 files changed, 131 insertions(+), 23 deletions(-)
 create mode 100644 resources/views/array-fields/range.blade.php
 create mode 100644 resources/views/components/range.blade.php
 create mode 100644 resources/views/fields/range.blade.php

diff --git a/config/tall-forms.php b/config/tall-forms.php
index 632403c..22beff9 100644
--- 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
index 304009c..f94c407 100644
--- 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
index c22dfac..d90a10c 100644
--- 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
index d792ce6..d39b97d 100644
--- 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
new file mode 100644
index 0000000..3bde4df
--- /dev/null
+++ 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
index 767cc49..c954075 100644
--- 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>
\ No newline at end of file
+</div>
diff --git a/resources/views/components/field-wrapper.blade.php b/resources/views/components/field-wrapper.blade.php
index aea390f..8326e01 100644
--- 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
index 077bb8b..6f4bfbf 100644
--- 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
index 3881829..b3e951f 100644
--- 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
new file mode 100644
index 0000000..7ff8826
--- /dev/null
+++ 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
index e8f3bb2..94d962e 100644
--- 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
index a35fbd4..1485cbd 100644
--- 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
new file mode 100644
index 0000000..dc38d42
--- /dev/null
+++ 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
index e66eba0..bff61f4 100644
--- 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
index 997fbf9..f57272b 100644
--- a/src/Field.php
+++ b/src/Field.php
@@ -13,6 +13,7 @@ class Field extends BaseField
     protected $keyval_fields = [];
     protected $array_sortable = false;
 
+
     public function __construct($label, $name)
     {
         $this->label = $label;
@@ -20,40 +21,40 @@ public function __construct($label, $name)
         $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
index 785b5dc..08a956f 100644
--- 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
index 20f41a7..084c9d3 100644
--- 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');