From d9c86e92baf9c9ba67049a412a6122452bef88f0 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:52:46 -0400
Subject: [PATCH 01/37] fix component form method name

---
 src/Component/Form.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Component/Form.php b/src/Component/Form.php
index a9b03a5..51c9933 100644
--- a/src/Component/Form.php
+++ b/src/Component/Form.php
@@ -186,7 +186,7 @@ public function addControl(Form\Control $control, string $layoutName = self::MAI
 
     protected function registerControl(Control $control): void
     {
-        $this->assertControlAsName($control->getControlName());
+        $this->assertControlHasName($control->getControlName());
         $this->assertControlIsUnique($control->getControlName());
         $control->formStoreId = $this->getPiniaStoreId(self::PINIA_PREFIX);
         $this->controls[$control->getControlName()] = $control;
@@ -282,7 +282,7 @@ private function assertControlIsUnique(string $controlName): void
         }
     }
 
-    private function assertControlAsName(string $controlName): void
+    private function assertControlHasName(string $controlName): void
     {
         if (!$controlName) {
             throw new Exception('Trying to add a form control without name.');

From bb174e926b492223d422c3647a82e0ccf01adaea Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:53:11 -0400
Subject: [PATCH 02/37] fix form component template

---
 template/tailwind/vue-component/form.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/template/tailwind/vue-component/form.html b/template/tailwind/vue-component/form.html
index aed6a44..640e9a4 100644
--- a/template/tailwind/vue-component/form.html
+++ b/template/tailwind/vue-component/form.html
@@ -6,7 +6,9 @@
             :can-leave="{$canLeave}"
             :submit-url="{$submitUrl}"
             :values-url="{$valuesUrl}"
-            #default="@{isSubmitting, canLeave, formErrors, submitForm, setControlValue, isDirty, storeId}" ref="root" class="invisible">
+            #default="@{isSubmitting, canLeave, formErrors, submitForm, setControlValue, isDirty, storeId}"
+            ref="root"
+            class="invisible">
         <form id="{$formId}" @submit.prevent="submitForm">
             {$Layouts}
         </form>

From d89d16e05f34fe3b915d8994cfffa196cb81ea16 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:53:24 -0400
Subject: [PATCH 03/37] Create tab.html

---
 template/tailwind/vue-component/tabs/tab.html | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 template/tailwind/vue-component/tabs/tab.html

diff --git a/template/tailwind/vue-component/tabs/tab.html b/template/tailwind/vue-component/tabs/tab.html
new file mode 100644
index 0000000..7188ba1
--- /dev/null
+++ b/template/tailwind/vue-component/tabs/tab.html
@@ -0,0 +1,15 @@
+<fohn-tab
+        :name="{$tabName}"
+        :tab-store-id="{$tabStoreId}"
+        #default="@{isActive}"
+>
+  <transition
+          enter-active-class="transition ease-linear duration-1000"
+          enter-from-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="transition ease-linear duration-0"
+          leave-from-class="opacity-100"
+          leave-to-class="opacity-0">
+    <div v-show="isActive">{$Content}</div>
+  </transition>
+</fohn-tab>

From a9c6fbaf25f6f4c6f12d1226749bd15a4d09eb35 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:53:28 -0400
Subject: [PATCH 04/37] Create tabs.html

---
 template/tailwind/vue-component/tabs.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 template/tailwind/vue-component/tabs.html

diff --git a/template/tailwind/vue-component/tabs.html b/template/tailwind/vue-component/tabs.html
new file mode 100644
index 0000000..9811dc8
--- /dev/null
+++ b/template/tailwind/vue-component/tabs.html
@@ -0,0 +1,22 @@
+<div id="{$idAttr}" {$attributes} class="{$classAttr}">
+<fohn-tabs
+        :store-id="{$storeId}"
+        :tabs-list="{$tabList}"
+        #default="@{activate, currentIndex, tabsList}"
+        ref="root"
+        class="invisible">
+    {TabMenu}
+    <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0">
+        <li v-for="(tab, index) in tabsList" :key="index" role="presentation" class="flex-auto text-center cursor-pointer">
+            <a
+                    @click="activate(index)"
+                    class="block border-x-0 border-b-2 border-t-0 border-transparent data-[active=true]:border-blue-400"
+                    :data-active="index === currentIndex"
+                    :data-name="tab.name"
+            >{{tab.caption}}</a>
+        </li>
+    </ul>
+    {/TabMenu}
+    {$tabs}
+</fohn-tabs>
+</div>

From a0d2916380fb0a8639c748c08f605fa49cf47100 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:53:38 -0400
Subject: [PATCH 05/37] Create Tabs.php

---
 src/Component/Tabs.php | 93 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 93 insertions(+)
 create mode 100644 src/Component/Tabs.php

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
new file mode 100644
index 0000000..68fcfd8
--- /dev/null
+++ b/src/Component/Tabs.php
@@ -0,0 +1,93 @@
+<?php
+
+declare(strict_types = 1);
+/**
+ * Tabs component.
+ */
+
+namespace Fohn\Ui\Component;
+
+use Fohn\Ui\Component\Tab\Tab;
+use Fohn\Ui\Core\Exception;
+use Fohn\Ui\Js\Type\Type;
+
+class Tabs extends \Fohn\Ui\View
+{
+    use VueTrait;
+
+    protected const COMP_NAME = 'fohn-tabs';
+    protected const TAB_REGION_NAME = 'tabs';
+
+    private const PINIA_PREFIX = '__tabs_';
+
+
+    public string $defaultTemplate = 'vue-component/tabs.html';
+
+    /** @var array<Tab> */
+    protected array $tabs = [];
+
+    protected function initRenderTree(): void
+    {
+        parent::initRenderTree();
+    }
+
+    public function addTab(Tab $tab): Tab
+    {
+        $this->registerTab($tab);
+        $this->addView($tab, self::TAB_REGION_NAME);
+
+        return $tab;
+    }
+
+    protected function registerTab(Tab $tab): void
+    {
+        $this->assertTabHasName($tab->getName());
+        $this->assertTabIsUnique($tab->getName());
+
+        if (!$tab->getCaption()) {
+            $tab->setCaption(ucfirst($tab->getName()));
+        }
+
+        $tab->tabStoreId = $this->getPiniaStoreId(self::PINIA_PREFIX);
+        $this->tabs[$tab->getName()] = $tab;
+    }
+
+    private function assertTabHasName(string $tabName): void
+    {
+        if (!$tabName) {
+            throw new Exception('Tab must have a name.');
+        }
+    }
+
+    private function assertTabIsUnique(string $tabName): void
+    {
+        if (array_key_exists($tabName, $this->tabs)) {
+            throw (new Exception('This tab name is already added.'))
+                ->addMoreInfo('Tab name:', $tabName);
+        }
+    }
+
+    protected function setTemplateProps(): void
+    {
+        $props['storeId'] = $this->getPiniaStoreId(self::PINIA_PREFIX);
+
+        $tabList = [];
+        foreach ($this->tabs as $tab) {
+            $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption()];
+        }
+        $props['tabList'] = $tabList;
+
+        foreach ($props as $key => $value) {
+            $this->getTemplate()->setJs($key, Type::factory($value));
+        }
+    }
+
+    protected function beforeHtmlRender(): void
+    {
+        // todo move into props
+        $this->setTemplateProps();
+
+        $this->createVueApp(self::COMP_NAME, [], $this->getDefaultSelector());
+        parent::beforeHtmlRender();
+    }
+}

From e9475896fcf8ffb5faeb5f29e5b8b84550862043 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:53:45 -0400
Subject: [PATCH 06/37] Create Tab.php

---
 src/Component/Tab/Tab.php | 64 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/Component/Tab/Tab.php

diff --git a/src/Component/Tab/Tab.php b/src/Component/Tab/Tab.php
new file mode 100644
index 0000000..9eefc2e
--- /dev/null
+++ b/src/Component/Tab/Tab.php
@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types = 1);
+/**
+ * Tab Component
+ */
+
+namespace Fohn\Ui\Component\Tab;
+
+use Fohn\Ui\Component\VueTrait;
+use Fohn\Ui\Js\Js;
+
+class Tab extends \Fohn\Ui\View
+{
+    use VueTrait;
+
+    protected const COMP_NAME = 'fohn-tab';
+
+    public string $defaultTemplate = 'vue-component/tabs/tab.html';
+
+    public string $tabStoreId;
+
+    protected string $name = '';
+    protected string $caption = '';
+
+    protected function initRenderTree(): void
+    {
+        parent::initRenderTree();
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function getCaption(): string
+    {
+        return $this->caption;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function setCaption(string $caption): self
+    {
+        $this->caption = $caption;
+
+        return $this;
+    }
+
+    protected function beforeHtmlRender(): void
+    {
+        $this->getTemplate()->trySetJs('tabName', Js::string($this->getName()));
+        $this->getTemplate()->trySetJs('tabStoreId', Js::string($this->tabStoreId));
+
+
+        parent::beforeHtmlRender();
+    }
+
+}

From 907834fd91b00a7eb652c85ca6cd2bf27539107d Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 25 Jul 2023 09:54:30 -0400
Subject: [PATCH 07/37] add demo

---
 app-test/interactive/tabs.php | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 app-test/interactive/tabs.php

diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
new file mode 100644
index 0000000..dee1f75
--- /dev/null
+++ b/app-test/interactive/tabs.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types = 1);
+
+use Fohn\Ui\Component\Tab\Tab;
+use Fohn\Ui\Component\Tabs;
+use Fohn\Ui\Service\Ui;
+use Fohn\Ui\View;
+
+require_once __DIR__ . '/../init-ui.php';
+
+$tabs = Tabs::addTo(Ui::layout());
+
+$tab = $tabs->addTab(new Tab(['name' => 'home']));
+
+$tab->addView((new View())->setTextContent('This is home tab'));
+
+$tab = $tabs->addTab(new Tab(['name' => 'profile']));
+
+
+$tab->addView((new View())->setTextContent('This is profile tab'));
+
+Ui::viewDump($tabs, 'tab');

From 4453fceebbac29e7f05c0cf81f6dc24bdb7485b8 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 26 Jul 2023 13:51:16 -0400
Subject: [PATCH 08/37] remove root ref from template

---
 template/tailwind/vue-component/form.html       | 4 +---
 template/tailwind/vue-component/navigation.html | 3 +--
 template/tailwind/vue-component/tabs.html       | 4 +---
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/template/tailwind/vue-component/form.html b/template/tailwind/vue-component/form.html
index 640e9a4..ff49153 100644
--- a/template/tailwind/vue-component/form.html
+++ b/template/tailwind/vue-component/form.html
@@ -6,9 +6,7 @@
             :can-leave="{$canLeave}"
             :submit-url="{$submitUrl}"
             :values-url="{$valuesUrl}"
-            #default="@{isSubmitting, canLeave, formErrors, submitForm, setControlValue, isDirty, storeId}"
-            ref="root"
-            class="invisible">
+            #default="@{isSubmitting, canLeave, formErrors, submitForm, setControlValue, isDirty, storeId}">
         <form id="{$formId}" @submit.prevent="submitForm">
             {$Layouts}
         </form>
diff --git a/template/tailwind/vue-component/navigation.html b/template/tailwind/vue-component/navigation.html
index 2b835bc..7a368cf 100644
--- a/template/tailwind/vue-component/navigation.html
+++ b/template/tailwind/vue-component/navigation.html
@@ -5,8 +5,7 @@
             menu-width="{width}52{/width}"
             break-point="{breakPoint}lg{/breakPoint}"
             #default="@{title, icons, groups, navigationCss, isOpen, inMobileMode, fn}"
-            class="fohn-admin-side-navigation text-sm invisible"
-            ref="root">
+            class="fohn-admin-side-navigation text-sm">
         <div class="fixed z-20 h-full top-0 left-0 bg-gray-800 z-40 text-white" :class="navigationCss">
             <!-- nav toggle -->
             <div  id="fohn-navigation-toggle" @click="fn.closeNavigation()" class="pl-4 pt-4 h-12">
diff --git a/template/tailwind/vue-component/tabs.html b/template/tailwind/vue-component/tabs.html
index 9811dc8..4400cfb 100644
--- a/template/tailwind/vue-component/tabs.html
+++ b/template/tailwind/vue-component/tabs.html
@@ -2,9 +2,7 @@
 <fohn-tabs
         :store-id="{$storeId}"
         :tabs-list="{$tabList}"
-        #default="@{activate, currentIndex, tabsList}"
-        ref="root"
-        class="invisible">
+        #default="@{activate, currentIndex, tabsList}">
     {TabMenu}
     <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0">
         <li v-for="(tab, index) in tabsList" :key="index" role="presentation" class="flex-auto text-center cursor-pointer">

From 3226792cd8358c87e4422fdf6ada808a189e4071 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 26 Jul 2023 13:51:44 -0400
Subject: [PATCH 09/37] =?UTF-8?q?set=20component=20to=20implement=20Vue?=
 =?UTF-8?q?=C3=80Interface?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Component/Tab/Tab.php | 4 +++-
 src/Component/Tabs.php    | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/Component/Tab/Tab.php b/src/Component/Tab/Tab.php
index 9eefc2e..7eb2228 100644
--- a/src/Component/Tab/Tab.php
+++ b/src/Component/Tab/Tab.php
@@ -7,10 +7,12 @@
 
 namespace Fohn\Ui\Component\Tab;
 
+use Fohn\Ui\Component\VueInterface;
 use Fohn\Ui\Component\VueTrait;
 use Fohn\Ui\Js\Js;
+use Fohn\Ui\View;
 
-class Tab extends \Fohn\Ui\View
+class Tab extends View implements VueInterface
 {
     use VueTrait;
 
diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 68fcfd8..2c2efd0 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -10,8 +10,9 @@
 use Fohn\Ui\Component\Tab\Tab;
 use Fohn\Ui\Core\Exception;
 use Fohn\Ui\Js\Type\Type;
+use Fohn\Ui\View;
 
-class Tabs extends \Fohn\Ui\View
+class Tabs extends View implements VueInterface
 {
     use VueTrait;
 

From bd42ae15c739f9bd6651c23090cafbe039927351 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 26 Jul 2023 13:52:16 -0400
Subject: [PATCH 10/37] set vue app invisible until mount

---
 src/Component/VueTrait.php | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Component/VueTrait.php b/src/Component/VueTrait.php
index 0c7c4f6..3374c4a 100644
--- a/src/Component/VueTrait.php
+++ b/src/Component/VueTrait.php
@@ -72,6 +72,8 @@ protected function createVueApp(string $component, array $rootData, string $sele
             $chain = JsChain::withUiLibrary()->vueService->createVueApp($selector, $component, $rootData); // @phpstan-ignore-line
 
             $this->unshiftJsActions($chain);
+            // make root component invisible until mounted by VueService.
+            $this->appendTailwinds(['invisible', 'data-[v-app]:visible']);
         }
 
         return $this;

From fdebaba90ab96a8f800fc6ae80888b7a29e7cbbb Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:21:12 -0400
Subject: [PATCH 11/37] add dump view

---
 app-test/form/form-model-controller.php | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app-test/form/form-model-controller.php b/app-test/form/form-model-controller.php
index 97c1cec..64fa328 100644
--- a/app-test/form/form-model-controller.php
+++ b/app-test/form/form-model-controller.php
@@ -85,8 +85,8 @@
         )
     ), 500);
 
-$c = Form\Control\Input::addTo($formContainer, ['controlName' => 'std1'])->setValue('test');
-$c->onChange(JsFunction::anonymous()
+$c1 = Form\Control\Input::addTo($formContainer, ['controlName' => 'std1'])->setValue('test');
+$c1->onChange(JsFunction::anonymous()
     ->execute(
         JsToast::notifyWithJs(
             Jquery::withSelector('input[name=\'std1\']')->val()
@@ -94,3 +94,4 @@
     ), 500);
 
 Ui::viewDump($f, 'form');
+Ui::viewDump($c, 'ctl');

From c0c9bdfc1c1bbb96552c863dd93681546d94a0b5 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:22:05 -0400
Subject: [PATCH 12/37] add method to activate tab on load

---
 src/Component/Tabs.php | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 2c2efd0..2b87270 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -27,6 +27,8 @@ class Tabs extends View implements VueInterface
     /** @var array<Tab> */
     protected array $tabs = [];
 
+    protected string $activeTabName = '';
+
     protected function initRenderTree(): void
     {
         parent::initRenderTree();
@@ -40,6 +42,13 @@ public function addTab(Tab $tab): Tab
         return $tab;
     }
 
+    public function activateTabName(string $name): self
+    {
+        $this->activeTabName = $name;
+
+        return $this;
+    }
+
     protected function registerTab(Tab $tab): void
     {
         $this->assertTabHasName($tab->getName());
@@ -77,6 +86,7 @@ protected function setTemplateProps(): void
             $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption()];
         }
         $props['tabList'] = $tabList;
+        $props['initialTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs)) ?: 0;
 
         foreach ($props as $key => $value) {
             $this->getTemplate()->setJs($key, Type::factory($value));
@@ -85,7 +95,6 @@ protected function setTemplateProps(): void
 
     protected function beforeHtmlRender(): void
     {
-        // todo move into props
         $this->setTemplateProps();
 
         $this->createVueApp(self::COMP_NAME, [], $this->getDefaultSelector());

From cd4fcf63075aa3e4be73a7309bed204380f8ad34 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:22:43 -0400
Subject: [PATCH 13/37] get out of loop early

---
 src/Component/VueTrait.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Component/VueTrait.php b/src/Component/VueTrait.php
index 3374c4a..124ca04 100644
--- a/src/Component/VueTrait.php
+++ b/src/Component/VueTrait.php
@@ -49,6 +49,7 @@ public function isRootComponent(): bool
         foreach ($this->getOwners() as $owner) {
             if ($owner instanceof VueInterface) {
                 $isRoot = false;
+                break;
             }
         }
 

From 24a1324d826241a0346332b76c73428df8901b4d Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:23:08 -0400
Subject: [PATCH 14/37] fix table paginator visibility

---
 template/tailwind/vue-component/table.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/template/tailwind/vue-component/table.html b/template/tailwind/vue-component/table.html
index affea06..5799cd5 100644
--- a/template/tailwind/vue-component/table.html
+++ b/template/tailwind/vue-component/table.html
@@ -5,8 +5,6 @@
                 data-url="{$dataUrl}"
                 :items-per-page="{$itemsPerPage}"
                 :columns="{$columns}"
-                ref="root"
-                class="invisible"
                 :actions="{$tableActions}"
                 :keep-table-state="{$keepTableState}"
                 #default="@{isFetching,
@@ -142,7 +140,7 @@
                                     </li>
                                 </ul>
                             </div>
-                            <div class="invisible md:visible pb-2">{{fromItem}} - {{toItem}} / {{totalItems}}</div>
+                            <div class="hidden md:block pb-2">{{fromItem}} - {{toItem}} / {{totalItems}}</div>
                             <div class="pb-2">
                                 <select v-model="itemsPerPage" @change="setItemsPerPage(itemsPerPage)" class=" p-1 mb-1 w-24 text-sm rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500">
                                     <option v-for="items in itemsPerPages" :value="items">{{items}}</option>

From eaee4fe53974a6540ad14e7a0803c7edebaccc0e Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:25:50 -0400
Subject: [PATCH 15/37] update props name for active tab

---
 src/Component/Tabs.php                    | 2 +-
 template/tailwind/vue-component/tabs.html | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 2b87270..355a675 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -86,7 +86,7 @@ protected function setTemplateProps(): void
             $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption()];
         }
         $props['tabList'] = $tabList;
-        $props['initialTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs)) ?: 0;
+        $props['activeTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs)) ?: 0;
 
         foreach ($props as $key => $value) {
             $this->getTemplate()->setJs($key, Type::factory($value));
diff --git a/template/tailwind/vue-component/tabs.html b/template/tailwind/vue-component/tabs.html
index 4400cfb..3d589aa 100644
--- a/template/tailwind/vue-component/tabs.html
+++ b/template/tailwind/vue-component/tabs.html
@@ -1,7 +1,9 @@
-<div id="{$idAttr}" {$attributes} class="{$classAttr}">
+
+<div id="{$idAttr}" {$attributes} class="{$classAttr} ">
 <fohn-tabs
         :store-id="{$storeId}"
         :tabs-list="{$tabList}"
+        :active-tab-idx="{$activeTabIdx}"
         #default="@{activate, currentIndex, tabsList}">
     {TabMenu}
     <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0">

From a910d2352047b3f09f39ef303f64d35d88ff8045 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:26:14 -0400
Subject: [PATCH 16/37] change transition time to 300

---
 template/tailwind/vue-component/tabs/tab.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/tailwind/vue-component/tabs/tab.html b/template/tailwind/vue-component/tabs/tab.html
index 7188ba1..c6091c6 100644
--- a/template/tailwind/vue-component/tabs/tab.html
+++ b/template/tailwind/vue-component/tabs/tab.html
@@ -4,7 +4,7 @@
         #default="@{isActive}"
 >
   <transition
-          enter-active-class="transition ease-linear duration-1000"
+          enter-active-class="transition ease-linear duration-300"
           enter-from-class="opacity-0"
           enter-to-class="opacity-100"
           leave-active-class="transition ease-linear duration-0"

From afce1e603328b36c3f66d39053bae1773a10cb89 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:26:29 -0400
Subject: [PATCH 17/37] add demo

---
 app-test/interactive/tabs.php | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
index dee1f75..c67334f 100644
--- a/app-test/interactive/tabs.php
+++ b/app-test/interactive/tabs.php
@@ -2,22 +2,47 @@
 
 declare(strict_types = 1);
 
+use Fohn\Ui\AppTest\Model\Country;
+use Fohn\Ui\Component\Form;
 use Fohn\Ui\Component\Tab\Tab;
 use Fohn\Ui\Component\Tabs;
+use Fohn\Ui\Js\Jquery;
+use Fohn\Ui\Js\JsReload;
+use Fohn\Ui\Js\JsToast;
+use Fohn\Ui\Service\Atk\FormModelController;
+use Fohn\Ui\Service\Data;
 use Fohn\Ui\Service\Ui;
 use Fohn\Ui\View;
+use Fohn\Ui\View\Button;
 
 require_once __DIR__ . '/../init-ui.php';
 
+$modelCtrl = new FormModelController(new Country(Data::db()));
+$id = (string) $modelCtrl->getModel()->tryLoadAny()->get('id');
+
 $tabs = Tabs::addTo(Ui::layout());
 
-$tab = $tabs->addTab(new Tab(['name' => 'home']));
+$homeTab = $tabs->addTab(new Tab(['name' => 'home']));
+
+View::addTo($homeTab)->setTextContent('This is home tab content.');
+
+$profileTab = $tabs->addTab(new Tab(['name' => 'profile']));
 
-$tab->addView((new View())->setTextContent('This is home tab'));
+$form = Form::addTo($profileTab);
+$form->addControls($modelCtrl->factoryFormControls($id));
+$form->onSubmit(function (Form $f) use ($modelCtrl, $id) {
+    if ($errors = $modelCtrl->saveModelUsingForm($id, $f->getControls())) {
+        $f->addValidationErrors($errors);
+    }
 
-$tab = $tabs->addTab(new Tab(['name' => 'profile']));
+    return JsToast::success('Saved!');
+});
 
+$userTab = $tabs->addTab(new Tab(['name' => 'user']));
+View::addTo($userTab)->setTextContent('This is user tab content.');
+$b = Button::addTo($userTab, ['label' => 'Reload ' . ($_GET['test'] ?? 0)]);
+Jquery::addEventTo($b, 'click')->execute(JsReload::view($b, ['test ' => random_int(0, 100)]));
 
-$tab->addView((new View())->setTextContent('This is profile tab'));
+$tabs->activateTabName('profile');
 
 Ui::viewDump($tabs, 'tab');

From 6865722201a0aae7122dd8eabdf1d483da833c17 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 28 Jul 2023 09:28:49 -0400
Subject: [PATCH 18/37] CS fix

---
 app-test/interactive/tabs.php | 2 +-
 src/Component/Tab/Tab.php     | 6 ++----
 src/Component/Tabs.php        | 5 ++---
 src/Component/VueTrait.php    | 1 +
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
index c67334f..6866f31 100644
--- a/app-test/interactive/tabs.php
+++ b/app-test/interactive/tabs.php
@@ -1,6 +1,6 @@
 <?php
 
-declare(strict_types = 1);
+declare(strict_types=1);
 
 use Fohn\Ui\AppTest\Model\Country;
 use Fohn\Ui\Component\Form;
diff --git a/src/Component/Tab/Tab.php b/src/Component/Tab/Tab.php
index 7eb2228..99c8c38 100644
--- a/src/Component/Tab/Tab.php
+++ b/src/Component/Tab/Tab.php
@@ -1,8 +1,8 @@
 <?php
 
-declare(strict_types = 1);
+declare(strict_types=1);
 /**
- * Tab Component
+ * Tab Component.
  */
 
 namespace Fohn\Ui\Component\Tab;
@@ -59,8 +59,6 @@ protected function beforeHtmlRender(): void
         $this->getTemplate()->trySetJs('tabName', Js::string($this->getName()));
         $this->getTemplate()->trySetJs('tabStoreId', Js::string($this->tabStoreId));
 
-
         parent::beforeHtmlRender();
     }
-
 }
diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 355a675..b543bec 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -1,6 +1,6 @@
 <?php
 
-declare(strict_types = 1);
+declare(strict_types=1);
 /**
  * Tabs component.
  */
@@ -21,7 +21,6 @@ class Tabs extends View implements VueInterface
 
     private const PINIA_PREFIX = '__tabs_';
 
-
     public string $defaultTemplate = 'vue-component/tabs.html';
 
     /** @var array<Tab> */
@@ -86,7 +85,7 @@ protected function setTemplateProps(): void
             $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption()];
         }
         $props['tabList'] = $tabList;
-        $props['activeTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs)) ?: 0;
+        $props['activeTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs), true) ?: 0;
 
         foreach ($props as $key => $value) {
             $this->getTemplate()->setJs($key, Type::factory($value));
diff --git a/src/Component/VueTrait.php b/src/Component/VueTrait.php
index 124ca04..4f22520 100644
--- a/src/Component/VueTrait.php
+++ b/src/Component/VueTrait.php
@@ -49,6 +49,7 @@ public function isRootComponent(): bool
         foreach ($this->getOwners() as $owner) {
             if ($owner instanceof VueInterface) {
                 $isRoot = false;
+
                 break;
             }
         }

From 6bca9da3f39c318ec757e0d10cb592dbdbb218cb Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:32:04 -0400
Subject: [PATCH 19/37] Update button.php

---
 app-test/basic/button.php | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/app-test/basic/button.php b/app-test/basic/button.php
index 19efa5b..60f735d 100644
--- a/app-test/basic/button.php
+++ b/app-test/basic/button.php
@@ -11,15 +11,39 @@
 
 require_once __DIR__ . '/../init-ui.php';
 
+
+$bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
+Button::addTo($bar, ['label' => 'Link', 'type' => 'link']);
+
+$type = 'contained';
 $bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
+Button::addTo($bar, ['label' => 'Primary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Secondary', 'color' => 'secondary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Info', 'color' => 'info', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Success', 'color' => 'success'])->setType($type);
+Button::addTo($bar, ['label' => 'Warning', 'color' => 'warning', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Error', 'color' => 'error', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Neutral', 'color' => 'neutral', 'type' => $type]);
 
-Button::addTo($bar, ['label' => 'Primary']);
-Button::addTo($bar, ['label' => 'Secondary', 'color' => 'secondary', 'type' => 'outline']);
-Button::addTo($bar, ['label' => 'Info', 'color' => 'info', 'type' => 'link']);
-Button::addTo($bar, ['label' => 'Success', 'color' => 'success'])->setType('link');
-Button::addTo($bar, ['label' => 'Warning', 'color' => 'warning']);
-Button::addTo($bar, ['label' => 'Error', 'color' => 'error']);
-Button::addTo($bar, ['label' => 'Neutral', 'color' => 'neutral']);
+$type = 'outline';
+$bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
+Button::addTo($bar, ['label' => 'Primary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Secondary', 'color' => 'secondary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Info', 'color' => 'info', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Success', 'color' => 'success'])->setType($type);
+Button::addTo($bar, ['label' => 'Warning', 'color' => 'warning', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Error', 'color' => 'error', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Neutral', 'color' => 'neutral', 'type' => $type]);
+
+$type = 'text';
+$bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
+Button::addTo($bar, ['label' => 'Primary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Secondary', 'color' => 'secondary', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Info', 'color' => 'info', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Success', 'color' => 'success'])->setType($type);
+Button::addTo($bar, ['label' => 'Warning', 'color' => 'warning', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Error', 'color' => 'error', 'type' => $type]);
+Button::addTo($bar, ['label' => 'Neutral', 'color' => 'neutral', 'type' => $type]);
 
 $bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
 Button::addTo($bar, ['label' => 'Home'])->addIcon(new Icon(['iconName' => 'bi-house-fill']));

From ef294b54b873822a285c3dbf1259ba0a0c71e55b Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:32:08 -0400
Subject: [PATCH 20/37] Update tabs.php

---
 app-test/interactive/tabs.php | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
index 6866f31..46ff5a9 100644
--- a/app-test/interactive/tabs.php
+++ b/app-test/interactive/tabs.php
@@ -20,13 +20,29 @@
 $modelCtrl = new FormModelController(new Country(Data::db()));
 $id = (string) $modelCtrl->getModel()->tryLoadAny()->get('id');
 
+$btnGoTo = Button::addTo(Ui::layout(), ['label' => 'Go to country tab']);
+$btnEnableUser = Button::addTo(Ui::layout(), ['label' => 'Enable User Tab']);
+$btnDisableUser = Button::addTo(Ui::layout(), ['label' => 'Disable User Tab']);
+
 $tabs = Tabs::addTo(Ui::layout());
+Jquery::addEventTo($btnGoTo, 'click')->execute($tabs->jsActivateTabName('country'));
+Jquery::addEventTo($btnEnableUser, 'click')->execute($tabs->jsEnableTabName('user'));
+Jquery::addEventTo($btnDisableUser, 'click')->execute($tabs->jsDisableTabName('user'));
+
 
 $homeTab = $tabs->addTab(new Tab(['name' => 'home']));
+$fn = $homeTab->jsOnInitTab(\Fohn\Ui\Js\JsFunction::arrow());
+$fn->execute(\Fohn\Ui\Js\Js::from('console.log(\'homeTab on init\')'));
+
+$fn = $homeTab->jsOnShowTab(\Fohn\Ui\Js\JsFunction::arrow());
+$fn->execute(\Fohn\Ui\Js\Js::from('console.log(\'homeTab on show\')'));
+
+$fn = $homeTab->jsOnHideTab(\Fohn\Ui\Js\JsFunction::arrow());
+$fn->execute(\Fohn\Ui\Js\Js::from('console.log(\'homeTab on hide\')'));
 
 View::addTo($homeTab)->setTextContent('This is home tab content.');
 
-$profileTab = $tabs->addTab(new Tab(['name' => 'profile']));
+$profileTab = $tabs->addTab(new Tab(['name' => 'country']));
 
 $form = Form::addTo($profileTab);
 $form->addControls($modelCtrl->factoryFormControls($id));
@@ -43,6 +59,6 @@
 $b = Button::addTo($userTab, ['label' => 'Reload ' . ($_GET['test'] ?? 0)]);
 Jquery::addEventTo($b, 'click')->execute(JsReload::view($b, ['test ' => random_int(0, 100)]));
 
-$tabs->activateTabName('profile');
+$tabs->activateTabName('user');
 
 Ui::viewDump($tabs, 'tab');

From f7875caf049b5718df68fdd3aac7e9839e7b115c Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:32:33 -0400
Subject: [PATCH 21/37] add event handler js function

---
 src/Component/Tab/Tab.php | 61 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/Component/Tab/Tab.php b/src/Component/Tab/Tab.php
index 99c8c38..d036e48 100644
--- a/src/Component/Tab/Tab.php
+++ b/src/Component/Tab/Tab.php
@@ -10,6 +10,7 @@
 use Fohn\Ui\Component\VueInterface;
 use Fohn\Ui\Component\VueTrait;
 use Fohn\Ui\Js\Js;
+use Fohn\Ui\Js\JsFunction;
 use Fohn\Ui\View;
 
 class Tab extends View implements VueInterface
@@ -17,6 +18,10 @@ class Tab extends View implements VueInterface
     use VueTrait;
 
     protected const COMP_NAME = 'fohn-tab';
+    private const FN_INIT_KEY = 'init';
+    private const FN_SHOW_KEY = 'show';
+    private const FN_HIDE_KEY = 'hide';
+
 
     public string $defaultTemplate = 'vue-component/tabs/tab.html';
 
@@ -24,6 +29,10 @@ class Tab extends View implements VueInterface
 
     protected string $name = '';
     protected string $caption = '';
+    protected bool $isDisabled = false;
+
+    /** @var array<JsFunction> JsFunction to execute when this tab become active. */
+    private array $onActiveHandlers = [];
 
     protected function initRenderTree(): void
     {
@@ -40,6 +49,25 @@ public function getCaption(): string
         return $this->caption;
     }
 
+    public function disabled(): self
+    {
+        $this->isDisabled = true;
+
+        return $this;
+    }
+
+    public function enable(): self
+    {
+        $this->isDisabled = false;
+
+        return $this;
+    }
+
+    public function isDisabled(): bool
+    {
+        return $this->isDisabled;
+    }
+
     public function setName(string $name): self
     {
         $this->name = $name;
@@ -54,10 +82,43 @@ public function setCaption(string $caption): self
         return $this;
     }
 
+    public function jsOnInitTab(JsFunction $fn): JsFunction
+    {
+        $this->appendJsActiveHandlerFn($fn, self::FN_INIT_KEY);
+
+        return $fn;
+    }
+
+    public function jsOnShowTab(JsFunction $fn): JsFunction
+    {
+        $this->appendJsActiveHandlerFn($fn, self::FN_SHOW_KEY);
+
+        return $fn;
+    }
+
+    public function jsOnHideTab(JsFunction $fn): JsFunction
+    {
+        $this->appendJsActiveHandlerFn($fn, self::FN_HIDE_KEY);
+
+        return $fn;
+    }
+
+    /**
+     * Add a Js Function to be executed when this tab become active.
+     * When $always is set to true, the Js function will run each time the tab become active,
+     * otherwise, it will run only once.
+     */
+    private function appendJsActiveHandlerFn(JsFunction $fn, string $key): void
+    {
+        $this->onActiveHandlers[] = [$key => $fn];
+    }
+
+
     protected function beforeHtmlRender(): void
     {
         $this->getTemplate()->trySetJs('tabName', Js::string($this->getName()));
         $this->getTemplate()->trySetJs('tabStoreId', Js::string($this->tabStoreId));
+        $this->getTemplate()->trySetJs('onActiveHandlers', Js::array($this->onActiveHandlers));
 
         parent::beforeHtmlRender();
     }

From db3b9656521fe91e783dc60776fa66fd48255a5a Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:32:49 -0400
Subject: [PATCH 22/37] allow enable disable tab via js

---
 src/Component/Tabs.php | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index b543bec..944d1c0 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -9,6 +9,7 @@
 
 use Fohn\Ui\Component\Tab\Tab;
 use Fohn\Ui\Core\Exception;
+use Fohn\Ui\Js\JsRenderInterface;
 use Fohn\Ui\Js\Type\Type;
 use Fohn\Ui\View;
 
@@ -48,6 +49,22 @@ public function activateTabName(string $name): self
         return $this;
     }
 
+    public function jsActivateTabName(string $name): JsRenderInterface
+    {
+        return $this->jsGetStore(self::PINIA_PREFIX)->activateByName($name);
+    }
+
+
+    public function jsEnableTabName(string $name): JsRenderInterface
+    {
+        return $this->jsGetStore(self::PINIA_PREFIX)->enableByName($name);
+    }
+
+    public function jsDisableTabName(string $name): JsRenderInterface
+    {
+        return $this->jsGetStore(self::PINIA_PREFIX)->disableByName($name);
+    }
+
     protected function registerTab(Tab $tab): void
     {
         $this->assertTabHasName($tab->getName());
@@ -82,7 +99,7 @@ protected function setTemplateProps(): void
 
         $tabList = [];
         foreach ($this->tabs as $tab) {
-            $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption()];
+            $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption(), 'disabled' => $tab->isDisabled()];
         }
         $props['tabList'] = $tabList;
         $props['activeTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs), true) ?: 0;

From d228870fb74181714ccf79065a75b5e79af761d3 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:33:06 -0400
Subject: [PATCH 23/37] Update tabs.html

---
 template/tailwind/vue-component/tabs.html | 28 ++++++++++++++---------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/template/tailwind/vue-component/tabs.html b/template/tailwind/vue-component/tabs.html
index 3d589aa..7898023 100644
--- a/template/tailwind/vue-component/tabs.html
+++ b/template/tailwind/vue-component/tabs.html
@@ -4,18 +4,24 @@
         :store-id="{$storeId}"
         :tabs-list="{$tabList}"
         :active-tab-idx="{$activeTabIdx}"
-        #default="@{activate, currentIndex, tabsList}">
+        #default="@{activate, currentIndex, tabs}">
     {TabMenu}
-    <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0">
-        <li v-for="(tab, index) in tabsList" :key="index" role="presentation" class="flex-auto text-center cursor-pointer">
-            <a
-                    @click="activate(index)"
-                    class="block border-x-0 border-b-2 border-t-0 border-transparent data-[active=true]:border-blue-400"
-                    :data-active="index === currentIndex"
-                    :data-name="tab.name"
-            >{{tab.caption}}</a>
-        </li>
-    </ul>
+    <div class="border-b border-gray-200 mb-8">
+        <ul class="flex flex-wrap -mb-px">
+            <template  v-for="(tab, index) in tabs" :key="index">
+                <li role="presentation" class="mr-4">
+                    <button
+                            @click="activate(index)"
+                            class="inline-block p-4 border-b-2  rounded-t-lg  disabled:text-gray-400 disabled:cursor-not-allowed"
+                            :class="{'border-blue-500 text-blue-500': index === currentIndex, 'border-transparent hover:text-gray-600 hover:border-gray-300': index !== currentIndex}"
+                            :data-active="index === currentIndex"
+                            :data-name="tab.name"
+                            :disabled="tab.disabled"
+                    >{{tab.caption}}</button>
+                </li>
+            </template>
+        </ul>
+    </div>
     {/TabMenu}
     {$tabs}
 </fohn-tabs>

From 19b8129b0b856ec7a470c4c9de603c47bb8e8957 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:33:23 -0400
Subject: [PATCH 24/37] Update tab.html

---
 template/tailwind/vue-component/tabs/tab.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/template/tailwind/vue-component/tabs/tab.html b/template/tailwind/vue-component/tabs/tab.html
index c6091c6..a8a93bf 100644
--- a/template/tailwind/vue-component/tabs/tab.html
+++ b/template/tailwind/vue-component/tabs/tab.html
@@ -1,7 +1,8 @@
 <fohn-tab
         :name="{$tabName}"
         :tab-store-id="{$tabStoreId}"
-        #default="@{isActive}"
+        :on-active-handlers="{$onActiveHandlers}"
+        #default="@{isActive, isDisabled}"
 >
   <transition
           enter-active-class="transition ease-linear duration-300"
@@ -10,6 +11,6 @@
           leave-active-class="transition ease-linear duration-0"
           leave-from-class="opacity-100"
           leave-to-class="opacity-0">
-    <div v-show="isActive">{$Content}</div>
+    <div v-show="isActive && ! isDisabled">{$Content}</div>
   </transition>
 </fohn-tab>

From cc40899a3b3b75a18ded28765a04434627203608 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:34:19 -0400
Subject: [PATCH 25/37] cs fix

---
 app-test/basic/button.php     | 1 -
 app-test/interactive/tabs.php | 1 -
 src/Component/Tab/Tab.php     | 2 --
 src/Component/Tabs.php        | 1 -
 4 files changed, 5 deletions(-)

diff --git a/app-test/basic/button.php b/app-test/basic/button.php
index 60f735d..f8676c8 100644
--- a/app-test/basic/button.php
+++ b/app-test/basic/button.php
@@ -11,7 +11,6 @@
 
 require_once __DIR__ . '/../init-ui.php';
 
-
 $bar = View::addTo(Ui::layout(), ['defaultTailwind' => ['inline-block, my-4']]);
 Button::addTo($bar, ['label' => 'Link', 'type' => 'link']);
 
diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
index 46ff5a9..b80b2a3 100644
--- a/app-test/interactive/tabs.php
+++ b/app-test/interactive/tabs.php
@@ -29,7 +29,6 @@
 Jquery::addEventTo($btnEnableUser, 'click')->execute($tabs->jsEnableTabName('user'));
 Jquery::addEventTo($btnDisableUser, 'click')->execute($tabs->jsDisableTabName('user'));
 
-
 $homeTab = $tabs->addTab(new Tab(['name' => 'home']));
 $fn = $homeTab->jsOnInitTab(\Fohn\Ui\Js\JsFunction::arrow());
 $fn->execute(\Fohn\Ui\Js\Js::from('console.log(\'homeTab on init\')'));
diff --git a/src/Component/Tab/Tab.php b/src/Component/Tab/Tab.php
index d036e48..9ff3d3a 100644
--- a/src/Component/Tab/Tab.php
+++ b/src/Component/Tab/Tab.php
@@ -22,7 +22,6 @@ class Tab extends View implements VueInterface
     private const FN_SHOW_KEY = 'show';
     private const FN_HIDE_KEY = 'hide';
 
-
     public string $defaultTemplate = 'vue-component/tabs/tab.html';
 
     public string $tabStoreId;
@@ -113,7 +112,6 @@ private function appendJsActiveHandlerFn(JsFunction $fn, string $key): void
         $this->onActiveHandlers[] = [$key => $fn];
     }
 
-
     protected function beforeHtmlRender(): void
     {
         $this->getTemplate()->trySetJs('tabName', Js::string($this->getName()));
diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 944d1c0..9c24432 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -54,7 +54,6 @@ public function jsActivateTabName(string $name): JsRenderInterface
         return $this->jsGetStore(self::PINIA_PREFIX)->activateByName($name);
     }
 
-
     public function jsEnableTabName(string $name): JsRenderInterface
     {
         return $this->jsGetStore(self::PINIA_PREFIX)->enableByName($name);

From 8c3a1eda6acb3bd49a753557a98e2092f07f038b Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:36:23 -0400
Subject: [PATCH 26/37] fix phpstan

---
 src/Component/Tabs.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 9c24432..fadc2f7 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -51,16 +51,19 @@ public function activateTabName(string $name): self
 
     public function jsActivateTabName(string $name): JsRenderInterface
     {
+        // @phpstan-ignore-next-line
         return $this->jsGetStore(self::PINIA_PREFIX)->activateByName($name);
     }
 
     public function jsEnableTabName(string $name): JsRenderInterface
     {
+        // @phpstan-ignore-next-line
         return $this->jsGetStore(self::PINIA_PREFIX)->enableByName($name);
     }
 
     public function jsDisableTabName(string $name): JsRenderInterface
     {
+        // @phpstan-ignore-next-line
         return $this->jsGetStore(self::PINIA_PREFIX)->disableByName($name);
     }
 

From d4fb6fa2d861b3caf4f70585f5a3adae48e3ac04 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:51:54 -0400
Subject: [PATCH 27/37] add tabs.php test page to menu

---
 app-test/_includes/AppTest.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app-test/_includes/AppTest.php b/app-test/_includes/AppTest.php
index 4d65c20..4643b12 100644
--- a/app-test/_includes/AppTest.php
+++ b/app-test/_includes/AppTest.php
@@ -110,6 +110,7 @@ private static function getNavigationGroup(string $baseUrl = '/app-test/'): arra
                 'icon' => 'bi bi-chat-left',
                 'url' => $baseUrl . 'interactive/virtual.php',
                 'items' => [
+                    new Item(['name' => 'Tabs', 'url' => $baseUrl . 'interactive/tabs.php']),
                     new Item(['name' => 'Modal', 'url' => $baseUrl . 'interactive/modal.php']),
                     new Item(['name' => 'Toast', 'url' => $baseUrl . 'interactive/toast.php']),
                     new Item(['name' => 'Virtual Page', 'url' => $baseUrl . 'interactive/virtual.php']),

From 7ef350344d11e6908760df33d0cd1bde06af2130 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Tue, 1 Aug 2023 15:52:08 -0400
Subject: [PATCH 28/37] update Page for proper package version

---
 src/Page.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Page.php b/src/Page.php
index 4a4d8f7..2a6eded 100644
--- a/src/Page.php
+++ b/src/Page.php
@@ -37,7 +37,7 @@ class Page extends View
             'url' => 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js',
         ],
         'fohn-js' => [
-            'url' => 'https://unpkg.com/fohn-ui@1.3.1/dist/fohn-ui.min.js',
+            'url' => 'https://unpkg.com/fohn-ui@1.4.0/dist/fohn-ui.min.js',
         ],
     ];
 
@@ -50,7 +50,7 @@ class Page extends View
             'url' => 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css',
         ],
         'fohn-css' => [
-            'url' => 'https://unpkg.com/fohn-ui-css@1.2.0/dist/fohn-ui.min.css',
+            'url' => 'https://unpkg.com/fohn-ui-css@1.3.0/dist/fohn-ui.min.css',
         ],
     ];
 

From afeb8bcf0c8c9f1c845f535b2fcdbadd48929778 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 2 Aug 2023 11:42:13 -0400
Subject: [PATCH 29/37] use bootstrap icon v1.10

---
 src/Page.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Page.php b/src/Page.php
index 2a6eded..b5f846f 100644
--- a/src/Page.php
+++ b/src/Page.php
@@ -47,7 +47,7 @@ class Page extends View
             'url' => 'https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.6/flatpickr.min.css',
         ],
         'icons' => [
-            'url' => 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css',
+            'url' => 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css',
         ],
         'fohn-css' => [
             'url' => 'https://unpkg.com/fohn-ui-css@1.3.0/dist/fohn-ui.min.css',

From 52f5e1d42a03f71bfb5698390e98a239410496c9 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 2 Aug 2023 11:42:40 -0400
Subject: [PATCH 30/37] rename dir

---
 src/Component/{Tab => Tabs}/Tab.php | 44 ++++++++++++++++++++++-------
 1 file changed, 34 insertions(+), 10 deletions(-)
 rename src/Component/{Tab => Tabs}/Tab.php (61%)

diff --git a/src/Component/Tab/Tab.php b/src/Component/Tabs/Tab.php
similarity index 61%
rename from src/Component/Tab/Tab.php
rename to src/Component/Tabs/Tab.php
index 9ff3d3a..d37b71e 100644
--- a/src/Component/Tab/Tab.php
+++ b/src/Component/Tabs/Tab.php
@@ -3,21 +3,23 @@
 declare(strict_types=1);
 /**
  * Tab Component.
+ * Tab view is a direct children of Tabs component.
+ * It should be inserted within <fohn-tabs></fohn-tabs>.
  */
 
-namespace Fohn\Ui\Component\Tab;
+namespace Fohn\Ui\Component\Tabs;
 
 use Fohn\Ui\Component\VueInterface;
 use Fohn\Ui\Component\VueTrait;
 use Fohn\Ui\Js\Js;
 use Fohn\Ui\Js\JsFunction;
+use Fohn\Ui\Js\JsRenderInterface;
 use Fohn\Ui\View;
 
 class Tab extends View implements VueInterface
 {
     use VueTrait;
 
-    protected const COMP_NAME = 'fohn-tab';
     private const FN_INIT_KEY = 'init';
     private const FN_SHOW_KEY = 'show';
     private const FN_HIDE_KEY = 'hide';
@@ -30,7 +32,10 @@ class Tab extends View implements VueInterface
     protected string $caption = '';
     protected bool $isDisabled = false;
 
-    /** @var array<JsFunction> JsFunction to execute when this tab become active. */
+    /** @var array<string, string> Tab properties that can be used in template within parent tabs property. */
+    protected array $properties = [];
+
+    /** @var array<string, JsFunction> JsFunction to execute when corresponding event occurs. */
     private array $onActiveHandlers = [];
 
     protected function initRenderTree(): void
@@ -81,33 +86,52 @@ public function setCaption(string $caption): self
         return $this;
     }
 
+    public function addProperty(string $key, string $value): self
+    {
+        $this->properties[$key] = $value;
+
+        return $this;
+    }
+
+    /**
+     * Execute javascript when tab is initialised (mount) by Vue.
+     */
     public function jsOnInitTab(JsFunction $fn): JsFunction
     {
-        $this->appendJsActiveHandlerFn($fn, self::FN_INIT_KEY);
+        $this->appendJsActiveHandlerFn(self::FN_INIT_KEY, $fn);
 
         return $fn;
     }
 
+    /**
+     * Execute javascript each time tab is show, i.e. become active.
+     */
     public function jsOnShowTab(JsFunction $fn): JsFunction
     {
-        $this->appendJsActiveHandlerFn($fn, self::FN_SHOW_KEY);
+        $this->appendJsActiveHandlerFn(self::FN_SHOW_KEY, $fn);
 
         return $fn;
     }
 
+    /**
+     * Execute javascript each time tab is hide, i.e. become inactive.
+     */
     public function jsOnHideTab(JsFunction $fn): JsFunction
     {
-        $this->appendJsActiveHandlerFn($fn, self::FN_HIDE_KEY);
+        $this->appendJsActiveHandlerFn(self::FN_HIDE_KEY, $fn);
 
         return $fn;
     }
 
+    public function getProperties(): array
+    {
+        return array_merge($this->properties, ['name' => $this->getName(), 'caption' => $this->getCaption(), 'disabled' => $this->isDisabled()]);
+    }
+
     /**
-     * Add a Js Function to be executed when this tab become active.
-     * When $always is set to true, the Js function will run each time the tab become active,
-     * otherwise, it will run only once.
+     * Add a Js Function to be executed when associate event occur.
      */
-    private function appendJsActiveHandlerFn(JsFunction $fn, string $key): void
+    private function appendJsActiveHandlerFn(string $key, JsFunction $fn): void
     {
         $this->onActiveHandlers[] = [$key => $fn];
     }

From 50543f3d87cd9533cdc5a4eed9410705d2dcfb21 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 2 Aug 2023 11:43:08 -0400
Subject: [PATCH 31/37] allow replacing tabs menu template

---
 src/Component/Tabs.php | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index fadc2f7..7a08cc5 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -7,8 +7,9 @@
 
 namespace Fohn\Ui\Component;
 
-use Fohn\Ui\Component\Tab\Tab;
+use Fohn\Ui\Component\Tabs\Tab;
 use Fohn\Ui\Core\Exception;
+use Fohn\Ui\HtmlTemplate;
 use Fohn\Ui\Js\JsRenderInterface;
 use Fohn\Ui\Js\Type\Type;
 use Fohn\Ui\View;
@@ -67,6 +68,20 @@ public function jsDisableTabName(string $name): JsRenderInterface
         return $this->jsGetStore(self::PINIA_PREFIX)->disableByName($name);
     }
 
+    /**
+     * Replace Tabs menu template.
+     * The $view template must use Tab component template props:
+     *  - tabs, an array of {name: '', caption: '', disabled: false...}
+     *  - currentIndex, an integer value representing the current activated tab.
+     *  - activate, a function with an index argument that activate the tab.
+     */
+    public function setTabsMenuTemplate(HtmlTemplate $template, string $region = 'TabMenu'): self
+    {
+        $this->getTemplate()->dangerouslySetHtml($region, $template->renderToHtml());
+
+        return $this;
+    }
+
     protected function registerTab(Tab $tab): void
     {
         $this->assertTabHasName($tab->getName());
@@ -101,7 +116,7 @@ protected function setTemplateProps(): void
 
         $tabList = [];
         foreach ($this->tabs as $tab) {
-            $tabList[] = ['name' => $tab->getName(), 'caption' => $tab->getCaption(), 'disabled' => $tab->isDisabled()];
+            $tabList[] = $tab->getProperties();
         }
         $props['tabList'] = $tabList;
         $props['activeTabIdx'] = array_search($this->activeTabName, array_keys($this->tabs), true) ?: 0;

From 0d753c2e6cb8f1902eb8bc4828deea69442a0caf Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 2 Aug 2023 11:43:38 -0400
Subject: [PATCH 32/37] add new tab menu template demo

---
 app-test/interactive/tabs-menu.php            | 50 +++++++++++++++++++
 .../interactive/template/tabs-menu-icon.html  | 16 ++++++
 app-test/interactive/template/tabs-menu.html  | 16 ++++++
 3 files changed, 82 insertions(+)
 create mode 100644 app-test/interactive/tabs-menu.php
 create mode 100644 app-test/interactive/template/tabs-menu-icon.html
 create mode 100644 app-test/interactive/template/tabs-menu.html

diff --git a/app-test/interactive/tabs-menu.php b/app-test/interactive/tabs-menu.php
new file mode 100644
index 0000000..36d87f0
--- /dev/null
+++ b/app-test/interactive/tabs-menu.php
@@ -0,0 +1,50 @@
+<?php
+
+declare(strict_types=1);
+
+use Fohn\Ui\AppTest\Model\Country;
+use Fohn\Ui\Component\Form;
+use Fohn\Ui\Component\Tabs\Tab;
+use Fohn\Ui\Component\Tabs;
+use Fohn\Ui\Js\Jquery;
+use Fohn\Ui\Js\JsReload;
+use Fohn\Ui\Js\JsToast;
+use Fohn\Ui\Service\Atk\FormModelController;
+use Fohn\Ui\Service\Data;
+use Fohn\Ui\Service\Ui;
+use Fohn\Ui\View;
+use Fohn\Ui\View\Button;
+
+require_once __DIR__ . '/../init-ui.php';
+
+$tabs = Tabs::addTo(Ui::layout());
+$tabs->setTabsMenuTemplate(Ui::templateFromFile(__DIR__ . '/template/tabs-menu.html'));
+
+$homeTab = $tabs->addTab(new Tab(['name' => 'home']));
+View::addTo($homeTab)->setTextContent('This is Home content.');
+
+$profileTab = $tabs->addTab(new Tab(['name' => 'profile']));
+View::addTo($profileTab)->setTextContent('This is Profile content.');
+
+$userTab = $tabs->addTab(new Tab(['name' => 'preferences']));
+View::addTo($userTab)->setTextContent('This is Preferences content.');
+
+$adminTab = $tabs->addTab(new Tab(['name' => 'admin']))->disabled();
+View::addTo($adminTab)->setTextContent('This is Admin content.');
+
+View\Divider::addTo(Ui::layout());
+
+$tabs = Tabs::addTo(Ui::layout());
+$tabs->setTabsMenuTemplate(Ui::templateFromFile(__DIR__ . '/template/tabs-menu-icon.html'));
+
+$homeTab = $tabs->addTab(new Tab(['name' => 'home']))->addProperty('icon', 'bi-house-fill');
+View::addTo($homeTab)->setTextContent('This is Home content.');
+
+$profileTab = $tabs->addTab(new Tab(['name' => 'profile']))->addProperty('icon', 'bi-person-fill');
+View::addTo($profileTab)->setTextContent('This is Profile content.');
+
+$userTab = $tabs->addTab(new Tab(['name' => 'preferences']))->addProperty('icon', 'bi-gear-fill');
+View::addTo($userTab)->setTextContent('This is Preferences content.');
+
+$adminTab = $tabs->addTab(new Tab(['name' => 'admin']))->disabled()->addProperty('icon', 'bi-person-fill-lock');
+View::addTo($adminTab)->setTextContent('This is Admin content.');
\ No newline at end of file
diff --git a/app-test/interactive/template/tabs-menu-icon.html b/app-test/interactive/template/tabs-menu-icon.html
new file mode 100644
index 0000000..212caae
--- /dev/null
+++ b/app-test/interactive/template/tabs-menu-icon.html
@@ -0,0 +1,16 @@
+<div class="border-b border-gray-200 mb-8">
+  <ul class="flex flex-wrap -mb-px">
+    <template  v-for="(tab, index) in tabs" :key="index">
+      <li role="presentation" class="mr-4">
+        <button
+                @click="activate(index)"
+                class="inline-block p-4 border-b-2 rounded-t-lg disabled:text-gray-400 disabled:cursor-not-allowed"
+                :class="{'border-blue-500 text-blue-500': index === currentIndex, 'border-transparent hover:text-gray-600 hover:border-gray-300': index !== currentIndex}"
+                :data-active="index === currentIndex"
+                :data-name="tab.name"
+                :disabled="tab.disabled"
+        ><i class="mx-2" :class="tab.icon"></i>{{tab.caption}}</button>
+      </li>
+    </template>
+  </ul>
+</div>
diff --git a/app-test/interactive/template/tabs-menu.html b/app-test/interactive/template/tabs-menu.html
new file mode 100644
index 0000000..321363e
--- /dev/null
+++ b/app-test/interactive/template/tabs-menu.html
@@ -0,0 +1,16 @@
+<div class="mb-8 border-b border-gray-200">
+  <ul class="flex flex-wrap text-sm font-medium text-center text-gray-500">
+    <template  v-for="(tab, index) in tabs" :key="index">
+      <li role="presentation" class="mr-4">
+        <button
+                @click="activate(index)"
+                class="inline-block p-4 rounded-t-lg disabled:text-gray-400 disabled:cursor-not-allowed"
+                :class="{'bg-gray-300 text-blue-500': index === currentIndex, 'hover:bg-gray-100': index !== currentIndex}"
+                :data-active="index === currentIndex"
+                :data-name="tab.name"
+                :disabled="tab.disabled"
+        >{{tab.caption}}</button>
+      </li>
+    </template>
+  </ul>
+</div>

From ad673ae6121ff97094eb1f816ec92595abfabde7 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Wed, 2 Aug 2023 11:44:03 -0400
Subject: [PATCH 33/37] Update tabs.html

---
 template/tailwind/vue-component/tabs.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/template/tailwind/vue-component/tabs.html b/template/tailwind/vue-component/tabs.html
index 7898023..01e3c3c 100644
--- a/template/tailwind/vue-component/tabs.html
+++ b/template/tailwind/vue-component/tabs.html
@@ -12,7 +12,7 @@
                 <li role="presentation" class="mr-4">
                     <button
                             @click="activate(index)"
-                            class="inline-block p-4 border-b-2  rounded-t-lg  disabled:text-gray-400 disabled:cursor-not-allowed"
+                            class="inline-block p-4 border-b-2 rounded-t-lg disabled:text-gray-400 disabled:cursor-not-allowed"
                             :class="{'border-blue-500 text-blue-500': index === currentIndex, 'border-transparent hover:text-gray-600 hover:border-gray-300': index !== currentIndex}"
                             :data-active="index === currentIndex"
                             :data-name="tab.name"

From 583d9bd326763af87c28d76cc73f32f335f96233 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 4 Aug 2023 09:14:34 -0400
Subject: [PATCH 34/37] Update Divider.php

---
 src/View/Divider.php | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/View/Divider.php b/src/View/Divider.php
index 56b4ba3..5a79623 100644
--- a/src/View/Divider.php
+++ b/src/View/Divider.php
@@ -8,17 +8,24 @@
 
 class Divider extends View
 {
+    public string $verticalSpace = '4';
+
     protected function initRenderTree(): void
     {
         parent::initRenderTree();
 
         $this->htmlTag = 'hr';
         $this->setIdAttribute('');
+    }
 
+    public function beforeHtmlRender(): void
+    {
         $this->appendTailwinds(
             [
-                'my-4',
+                'my-' . $this->verticalSpace,
             ]
         );
+
+        parent::beforeHtmlRender();
     }
 }

From 329f7fea0117fcb21c089565ce06559f44b4cd25 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 4 Aug 2023 09:14:51 -0400
Subject: [PATCH 35/37] minor ehnancement

---
 app-test/_includes/AppTest.php     |  1 +
 app-test/interactive/tabs-menu.php | 14 +++-----------
 app-test/interactive/tabs.php      | 10 +++++-----
 src/Component/Tabs/Tab.php         |  1 -
 4 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/app-test/_includes/AppTest.php b/app-test/_includes/AppTest.php
index 4643b12..6053f37 100644
--- a/app-test/_includes/AppTest.php
+++ b/app-test/_includes/AppTest.php
@@ -111,6 +111,7 @@ private static function getNavigationGroup(string $baseUrl = '/app-test/'): arra
                 'url' => $baseUrl . 'interactive/virtual.php',
                 'items' => [
                     new Item(['name' => 'Tabs', 'url' => $baseUrl . 'interactive/tabs.php']),
+                    new Item(['name' => 'Tabs Menu', 'url' => $baseUrl . 'interactive/tabs-menu.php']),
                     new Item(['name' => 'Modal', 'url' => $baseUrl . 'interactive/modal.php']),
                     new Item(['name' => 'Toast', 'url' => $baseUrl . 'interactive/toast.php']),
                     new Item(['name' => 'Virtual Page', 'url' => $baseUrl . 'interactive/virtual.php']),
diff --git a/app-test/interactive/tabs-menu.php b/app-test/interactive/tabs-menu.php
index 36d87f0..e2a2d9c 100644
--- a/app-test/interactive/tabs-menu.php
+++ b/app-test/interactive/tabs-menu.php
@@ -2,18 +2,10 @@
 
 declare(strict_types=1);
 
-use Fohn\Ui\AppTest\Model\Country;
-use Fohn\Ui\Component\Form;
-use Fohn\Ui\Component\Tabs\Tab;
 use Fohn\Ui\Component\Tabs;
-use Fohn\Ui\Js\Jquery;
-use Fohn\Ui\Js\JsReload;
-use Fohn\Ui\Js\JsToast;
-use Fohn\Ui\Service\Atk\FormModelController;
-use Fohn\Ui\Service\Data;
+use Fohn\Ui\Component\Tabs\Tab;
 use Fohn\Ui\Service\Ui;
 use Fohn\Ui\View;
-use Fohn\Ui\View\Button;
 
 require_once __DIR__ . '/../init-ui.php';
 
@@ -32,7 +24,7 @@
 $adminTab = $tabs->addTab(new Tab(['name' => 'admin']))->disabled();
 View::addTo($adminTab)->setTextContent('This is Admin content.');
 
-View\Divider::addTo(Ui::layout());
+View\Divider::addTo(Ui::layout(), ['verticalSpace' => '12']);
 
 $tabs = Tabs::addTo(Ui::layout());
 $tabs->setTabsMenuTemplate(Ui::templateFromFile(__DIR__ . '/template/tabs-menu-icon.html'));
@@ -47,4 +39,4 @@
 View::addTo($userTab)->setTextContent('This is Preferences content.');
 
 $adminTab = $tabs->addTab(new Tab(['name' => 'admin']))->disabled()->addProperty('icon', 'bi-person-fill-lock');
-View::addTo($adminTab)->setTextContent('This is Admin content.');
\ No newline at end of file
+View::addTo($adminTab)->setTextContent('This is Admin content.');
diff --git a/app-test/interactive/tabs.php b/app-test/interactive/tabs.php
index b80b2a3..d2ddae2 100644
--- a/app-test/interactive/tabs.php
+++ b/app-test/interactive/tabs.php
@@ -4,8 +4,8 @@
 
 use Fohn\Ui\AppTest\Model\Country;
 use Fohn\Ui\Component\Form;
-use Fohn\Ui\Component\Tab\Tab;
 use Fohn\Ui\Component\Tabs;
+use Fohn\Ui\Component\Tabs\Tab;
 use Fohn\Ui\Js\Jquery;
 use Fohn\Ui\Js\JsReload;
 use Fohn\Ui\Js\JsToast;
@@ -20,9 +20,9 @@
 $modelCtrl = new FormModelController(new Country(Data::db()));
 $id = (string) $modelCtrl->getModel()->tryLoadAny()->get('id');
 
-$btnGoTo = Button::addTo(Ui::layout(), ['label' => 'Go to country tab']);
-$btnEnableUser = Button::addTo(Ui::layout(), ['label' => 'Enable User Tab']);
-$btnDisableUser = Button::addTo(Ui::layout(), ['label' => 'Disable User Tab']);
+$btnGoTo = Button::addTo(Ui::layout(), ['label' => 'Go to country tab', 'type' => 'text']);
+$btnEnableUser = Button::addTo(Ui::layout(), ['label' => 'Enable User Tab', 'type' => 'text']);
+$btnDisableUser = Button::addTo(Ui::layout(), ['label' => 'Disable User Tab', 'type' => 'text']);
 
 $tabs = Tabs::addTo(Ui::layout());
 Jquery::addEventTo($btnGoTo, 'click')->execute($tabs->jsActivateTabName('country'));
@@ -55,7 +55,7 @@
 
 $userTab = $tabs->addTab(new Tab(['name' => 'user']));
 View::addTo($userTab)->setTextContent('This is user tab content.');
-$b = Button::addTo($userTab, ['label' => 'Reload ' . ($_GET['test'] ?? 0)]);
+$b = Button::addTo($userTab, ['label' => 'Reload ' . ($_GET['test'] ?? 0), 'type' => 'text', 'size' => 'small']);
 Jquery::addEventTo($b, 'click')->execute(JsReload::view($b, ['test ' => random_int(0, 100)]));
 
 $tabs->activateTabName('user');
diff --git a/src/Component/Tabs/Tab.php b/src/Component/Tabs/Tab.php
index d37b71e..c788fd1 100644
--- a/src/Component/Tabs/Tab.php
+++ b/src/Component/Tabs/Tab.php
@@ -13,7 +13,6 @@
 use Fohn\Ui\Component\VueTrait;
 use Fohn\Ui\Js\Js;
 use Fohn\Ui\Js\JsFunction;
-use Fohn\Ui\Js\JsRenderInterface;
 use Fohn\Ui\View;
 
 class Tab extends View implements VueInterface

From ccc52bd332754921194571604a097cb6d73d074e Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 4 Aug 2023 09:21:39 -0400
Subject: [PATCH 36/37] Update tabs-menu.php

---
 app-test/interactive/tabs-menu.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app-test/interactive/tabs-menu.php b/app-test/interactive/tabs-menu.php
index e2a2d9c..ceb8e6b 100644
--- a/app-test/interactive/tabs-menu.php
+++ b/app-test/interactive/tabs-menu.php
@@ -26,6 +26,9 @@
 
 View\Divider::addTo(Ui::layout(), ['verticalSpace' => '12']);
 
+View::addTo(Ui::layout())->setTextContent('Show how a Vue property, like an icon name, can be added to Tab component and be available
+within the menu template.');
+
 $tabs = Tabs::addTo(Ui::layout());
 $tabs->setTabsMenuTemplate(Ui::templateFromFile(__DIR__ . '/template/tabs-menu-icon.html'));
 

From 075c31dfbc919cfab0c136ed7d8c1c489314de01 Mon Sep 17 00:00:00 2001
From: Alain Belair <belair.alain@gmail.com>
Date: Fri, 4 Aug 2023 09:32:55 -0400
Subject: [PATCH 37/37] minor fix

---
 src/Component/Tabs.php | 2 +-
 src/View/Divider.php   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Component/Tabs.php b/src/Component/Tabs.php
index 7a08cc5..07eb8fe 100644
--- a/src/Component/Tabs.php
+++ b/src/Component/Tabs.php
@@ -70,7 +70,7 @@ public function jsDisableTabName(string $name): JsRenderInterface
 
     /**
      * Replace Tabs menu template.
-     * The $view template must use Tab component template props:
+     * The template must use Tab component template props:
      *  - tabs, an array of {name: '', caption: '', disabled: false...}
      *  - currentIndex, an integer value representing the current activated tab.
      *  - activate, a function with an index argument that activate the tab.
diff --git a/src/View/Divider.php b/src/View/Divider.php
index 5a79623..91c74eb 100644
--- a/src/View/Divider.php
+++ b/src/View/Divider.php
@@ -18,7 +18,7 @@ protected function initRenderTree(): void
         $this->setIdAttribute('');
     }
 
-    public function beforeHtmlRender(): void
+    protected function beforeHtmlRender(): void
     {
         $this->appendTailwinds(
             [