Tabs

Field loop moved to separate file. Reused in Tabs.
New prop allowed_in_tab
Icon methods moved to Trait

config/tall-forms.php

@@ -99,6 +99,7 @@
     'plus-icon' => 'icons.add-outline',//Repeater
     'file-icon' => 'icons.', //FileUpload field, all icons with "file-" prefix.
     'file-upload' => 'icons.upload', //FileUpload
+    'exclamation' => 'icons.exclamation', //Tab, validation errors notification
 
     //Column span classes for the fields ->colspan() method
     'col-span-classes' => [

resources/css/tall-theme.css

@@ -492,4 +492,29 @@
         @apply list-decimal list-outside ml-4;
     }
 
+    /* Tabs */
+    .tf-tab-active {
+        @apply text-blue-800 bg-blue-100;
+    }
+    .tf-tab-inactive {
+        @apply text-gray-700 bg-gray-100 hover:bg-gray-200;
+    }
+    .tf-tab {
+        @apply flex flex-row items-center rounded mr-2 px-4 py-2;
+    }
+    .tf-tab-icon {
+        @apply h-5 w-5;
+    }
+    .tf-tab-label {
+        @apply ml-2;
+    }
+    .tf-tab-errors-callout {
+        @apply rounded-md bg-red-100 p-4 mx-auto text-white mb-2;
+    }
+    .tf-tab-error-icon {
+        @apply text-red-700 h-8 w-8;
+    }
+    .tf-tab-error-ul {
+        @apply text-sm text-red-900 list-disc pl-5 space-y-1;
+    }
 }

resources/css/tall-theme1x.css

@@ -472,4 +472,29 @@
         @apply list-decimal list-outside ml-4;
     }
 
+    /* Tabs */
+    .tf-tab-active {
+        @apply text-blue-800 bg-blue-100;
+    }
+    .tf-tab-inactive {
+        @apply text-gray-700 bg-gray-100 hover:bg-gray-200;
+    }
+    .tf-tab {
+        @apply flex flex-row items-center rounded mr-2 px-4 py-2;
+    }
+    .tf-tab-icon {
+        @apply h-5 w-5;
+    }
+    .tf-tab-label {
+        @apply ml-2;
+    }
+    .tf-tab-errors-callout {
+        @apply rounded-md bg-red-100 p-4 mx-auto text-white mb-2;
+    }
+    .tf-tab-error-icon {
+        @apply text-red-700 h-8 w-8;
+    }
+    .tf-tab-error-ul {
+        @apply text-sm text-red-900 list-disc pl-5 space-y-1;
+    }
 }

resources/views/fields/tabs.blade.php

@@ -0,0 +1 @@
+<div>{{-- sponsor field --}}</div>

resources/views/form.blade.php

@@ -3,13 +3,11 @@
 @endif
 <x-tall-form :onKeyDownEnter="$onKeyDownEnter" :attr="[]">
     @include('tall-forms::includes.form-head')
-    <x-tall-attr :attr="\Tanthammar\TallForms\ConfigAttr::key('fields-wrapper')">
-    @foreach($fields as $field)
-        @if(filled($field))
-            @include('tall-forms::includes.field-root')
-        @endif
-    @endforeach
-    </x-tall-attr>
+    @if(isset($isTabs) && $isTabs)
+        @include('tall-forms::fields.tabs')
+    @else
+        @include('tall-forms::includes.field-loop')
+    @endif
     @include('tall-forms::includes.form-footer')
     @include('tall-forms::includes.buttons-root')
 </x-tall-form>

resources/views/icons/exclamation.blade.php

@@ -0,0 +1,3 @@
+<svg class="{{ $class }}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="fill: none !important;">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+</svg>

resources/views/includes/field-loop.blade.php

@@ -0,0 +1,8 @@
+{{-- used by views.includes.tabs and views.form --}}
+<x-tall-attr :attr="\Tanthammar\TallForms\ConfigAttr::key('fields-wrapper')">
+    @foreach($fields as $field)
+        @if(filled($field))
+            @include('tall-forms::includes.field-root')
+        @endif
+    @endforeach
+</x-tall-attr>

src/BaseField.php

@@ -34,6 +34,7 @@ class BaseField
 
     public $allowed_in_repeater = true;
     public $allowed_in_keyval = true;
+    public $allowed_in_tab = true;
 
     public function __construct($label, $key)
     {

src/Exceptions/InvalidArrayFieldType.php

@@ -10,7 +10,8 @@ public function __construct($fieldname, $fieldtype, $parenttype)
     {
         $lookup = [
             'array' => 'Repeater',
-            'keyval' => 'Keyval'
+            'keyval' => 'Keyval',
+            'tab' => 'Tab',
         ];
 
         parent::__construct(

src/ImageCropper.php

@@ -19,6 +19,7 @@ class ImageCropper extends BaseField
     public $align_label_top = true;
     public $allowed_in_repeater = false;
     public $allowed_in_keyval = false;
+    public $allowed_in_tab = false;
 
 
     public function dropZoneHelp(string $text): self

src/Input.php

@@ -4,24 +4,22 @@
 namespace Tanthammar\TallForms;
 
 
-use Illuminate\Support\Str;
+use Tanthammar\TallForms\Traits\HasIcons;
 
 class Input extends BaseField
 {
+    use HasIcons;
+
     public $type = 'input';
     public $input_type = 'text';
     public $autocomplete;
     public $placeholder;
     public $prefix;
-    public $icon;
-    public $tallIcon;
-    public $htmlIcon;
     public $step = 1;
     public $min = 0;
     public $max = 100;
     public $required = false;
     public $class = 'tf-input-wrapper';
-    public bool $hasIcon = false;
 
 
     public function type(string $type): self
@@ -62,42 +60,6 @@ public function placeholder(string $placeholder): self
         return $this;
     }
 
-    /**
-     * Requires Blade UI Icons
-     * @param string $blade_ui_icon_path
-     * @return $this
-     */
-    public function icon(string $blade_ui_icon_path): self
-    {
-        $this->icon = $blade_ui_icon_path;
-        $this->hasIcon = true;
-        return $this;
-    }
-
-    /**
-     * Requires you to create a blade file on the defined path
-     * @param string $blade_file_path
-     * @return $this
-     */
-    public function tallIcon(string $blade_file_path): self
-    {
-        $this->tallIcon = $blade_file_path;
-        $this->hasIcon = true;
-        return $this;
-    }
-
-    /**
-     * Any valid html, example: fontawesome <i></i>
-     * @param string $html
-     * @return $this
-     */
-    public function htmlIcon(string $html): self
-    {
-        $this->htmlIcon = $html;
-        $this->hasIcon = true;
-        return $this;
-    }
-
     /**
      * @param float|string $step
      * @return $this

src/KeyVal.php

@@ -12,4 +12,5 @@ class KeyVal extends BaseField
     public $align_label_top = true;
     public $allowed_in_repeater = false;
     public $allowed_in_keyval = true;
+    public $allowed_in_tab = true;
 }

src/Repeater.php

@@ -15,6 +15,7 @@ class Repeater extends BaseField
     public $align_label_top = true;
     public $allowed_in_repeater = false;
     public $allowed_in_keyval = false;
+    public $allowed_in_tab = false;
 
     public function sortable(): self
     {

src/SpatieTags.php

@@ -15,6 +15,7 @@ class SpatieTags extends BaseField
     public $align_label_top = true;
     public $allowed_in_repeater = false;
     public $allowed_in_keyval = false;
+    public $allowed_in_tab = false;
 
     public function type(string $tagType = ""): self
     {

src/Traits/HasIcons.php

@@ -0,0 +1,50 @@
+<?php
+
+
+namespace Tanthammar\TallForms\Traits;
+
+
+trait HasIcons
+{
+    public $icon;
+    public $tallIcon;
+    public $htmlIcon;
+    public bool $hasIcon = false;
+
+    /**
+     * Requires Blade UI Icons
+     * @param string $blade_ui_icon_path
+     * @return $this
+     */
+    public function icon(string $blade_ui_icon_path): self
+    {
+        $this->icon = $blade_ui_icon_path;
+        $this->hasIcon = true;
+        return $this;
+    }
+
+    /**
+     * Requires you to create a blade file on the defined path
+     * @param string $blade_file_path
+     * @return $this
+     */
+    public function tallIcon(string $blade_file_path): self
+    {
+        $this->tallIcon = $blade_file_path;
+        $this->hasIcon = true;
+        return $this;
+    }
+
+    /**
+     * Any valid html, example: fontawesome <i></i>
+     * @param string $html
+     * @return $this
+     */
+    public function htmlIcon(string $html): self
+    {
+        $this->htmlIcon = $html;
+        $this->hasIcon = true;
+        return $this;
+    }
+
+}

src/Traits/IsArrayField.php

@@ -22,14 +22,17 @@ public function fields($fields = []): self
             throw_if($this->type == 'keyval' && !$field->allowed_in_keyval,
                 new InvalidArrayFieldType($field->name, $field->type, $this->type)
             );
+            throw_if($this->type == 'tab' && !$field->allowed_in_tab,
+                new InvalidArrayFieldType($field->name, $field->type, $this->type)
+            );
         }
         $this->fields = $fields;
         return $this;
     }
 
     /**
-     * Applied to the outer wrapper surrounding Array and KeyVal field groups
-     *
+     * Applied to the outer wrapper
+     * <br>Only Repeater and Keyval
      * @param string $classes
      * @return $this
      */
@@ -39,6 +42,11 @@ public function wrapperClass(string $classes): self
         return $this;
     }
 
+    /**
+     * Only applied to Repeater and KeyVal
+     * @param string $classes
+     * @return $this
+     */
     public function wrapperGrid(string $classes): self
     {
         $this->array_wrapper_grid_class = $classes;

src/Traits/ValidatesFields.php

@@ -20,7 +20,7 @@ protected function get_rules($fields = null, string $prefix = 'form_data'): arra
 
         foreach ($fields as $field) {
             if (filled($field)) {
-                if (in_array($field->type, ['array', 'keyval'])) {
+                if (in_array($field->type, ['array', 'keyval', 'tab'])) {
                     if (property_exists($field, 'fields') && is_array($field->fields) && 0 < count($field->fields)) {
                         $ruleName = $field->type === 'array' ? "{$prefix}.{$field->name}.*" : "{$prefix}.{$field->name}";
                         $rules = array_merge($rules, $this->get_rules($field->fields, $ruleName));
@@ -50,7 +50,7 @@ protected function validationAttributes()
         if ($this->labelsAsAttributes) {
             foreach ($this->getFieldsFlat() as $field) {
                 if ($field != null && $field->labelAsAttribute) {
-                    if (in_array($field->type, ['array', 'keyval'])) {
+                    if (in_array($field->type, ['array', 'keyval', 'tab'])) {
                         foreach ($field->fields as $array_field) {
                             $key = $field->type === 'array'
                                 ? "$field->key.*.$array_field->name"