Tidy zn-tabs

MrEssex · MrEssex · commit f473005eb8a0 · 2025-03-25T09:58:30.000Z
diff --git a/docs/pages/getting-started/example-page.md b/docs/pages/getting-started/example-page.md
@@ -39,7 +39,9 @@ for SEO purposes. We should be slotting everything in as children of the compone
   <zn-tabs flush primary-caption="Navigation" secondary-caption="Content">
 
     <!-- This is the Navigation/Header for the Inner set of tabs -->
-    <zn-header slot="top" caption="Customer" description="My Awesome Customer"
+    <zn-header slot="top"
+               caption="Customer"
+               description="My Awesome Customer"
                navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
     </zn-header>
 
@@ -64,6 +66,11 @@ for SEO purposes. We should be slotting everything in as children of the compone
   <!-- This is the content of the second tab -->
   <div id="2">
     <zn-pane>
+      <zn-header slot="top"
+                 caption="Customer"
+                 description="My Awesome Customer"
+                 navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
+      </zn-header>
       <!-- This is where your page content would be defined -->
       <zn-sp> <!-- Maybe zn-sp should be defaulted into the content? -->
         <zn-panel caption="Number 2">Something Something Darkside</zn-panel>
@@ -73,4 +80,80 @@ for SEO purposes. We should be slotting everything in as children of the compone
 
 </zn-tabs>
 
+```
+
+## What we want it to look like
+
+Ideally we want to merge `zn-panel` and `zn-tabs` into a single component, this is because they are both used to define
+the layout of the page but act in different ways.
+
+We can used `tabbed` on the `zn-panel` component to define that it should be a tabbed layout, and then use the
+`zn-navbar` component to define the navigation for the tabs. We should remove the navigation attribute from the
+`zn-header` component and instead use the `zn-navbar` component to define the navigation for the inner tabs.
+
+```html:preview
+
+<style>
+  .code-preview__preview {
+    background-color: rgb(var(--zn-body)) !important;
+    padding: 0 25px 0 0;
+  }
+</style>
+
+<zn-panel tabbed flush primary-caption="Navigation" secondary-caption="content">
+
+  <!-- This is the navigation for the first set of tabs -->
+  <!-- highlight should change from highlight to pill-bar or something similar -->
+  <zn-navbar slot="top"
+             highlight
+             navigation="[{&quot;title&quot;:&quot;John Doe&quot;,&quot;active&quot;:false,&quot;hintText&quot;:&quot;Overview&quot;,&quot;launchMode&quot;:&quot;page&quot;}]"
+             dropdown="[{&quot;tab&quot;:&quot;2&quot;,&quot;title&quot;:&quot;Some Actions&quot;,&quot;type&quot;:&quot;dropdown&quot;}]">
+  </zn-navbar>
+
+  <!-- This is the content of the first tab / default -->
+  <!-- Can probably remove flush as they should all be by default -->
+  <zn-panel flush tabbed primary-caption="Navigation" secondary-caption="Content">
+
+    <!-- This is the Navigation/Header for the Inner set of tabs -->
+    <zn-header slot="top"
+               caption="Customer"
+               description="My Awesome Customer"
+               navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
+    </zn-header>
+
+    <!--This is the content of the first tab / default inside the first tab -->
+    <div>
+      <!-- This is where your page content would be defined -->
+      <zn-sp>
+        <zn-panel caption="Something">Data Points</zn-panel>
+        <zn-panel caption="Another Thing">Other Points</zn-panel>
+      </zn-sp>
+    </div>
+
+    <!--This is the content of the second tab inside the first tab -->
+    <div id="details">
+      <!-- This is where your page content would be defined -->
+      <zn-sp>
+        <zn-panel caption="Awesome">this is an example of the details tab</zn-panel>
+      </zn-sp>
+    </div>
+  </zn-panel>
+
+  <!-- This is the content of the second tab -->
+  <div id="2">
+    <zn-pane>
+      <zn-header slot="top"
+                 caption="Customer"
+                 description="My Awesome Customer"
+                 navigation="[{&quot;title&quot;:&quot;Overview&quot;}, {&quot;title&quot;:&quot;Details&quot;, &quot;tab&quot;:&quot;details&quot;}]">
+      </zn-header>
+      <!-- This is where your page content would be defined -->
+      <zn-sp> <!-- Maybe zn-sp should be defaulted into the content? -->
+        <zn-panel caption="Number 2">Something Something Darkside</zn-panel>
+      </zn-sp>
+    </zn-pane>
+  </div>
+
+</zn-panel>
+
 ```
diff --git a/src/components/tabs/tabs.component.ts b/src/components/tabs/tabs.component.ts
@@ -7,7 +7,6 @@ import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './tabs.scss';
-import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -29,25 +28,15 @@ import {HasSlotController} from "../../internal/slot";
 export default class ZnTabs extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'actions', 'footer');
-
   private _panel: HTMLElement | any;
   private _panels: Map<string, Element[]>;
   private _tabs: HTMLElement[] = [];
   private _actions: HTMLElement[] = [];
   private _knownUri: Map<string, string> = new Map<string, string>();
-  // @ts-expect-error
-  private storage: Storage;
 
   @property({attribute: 'master-id', reflect: true}) masterId: string;
   @property({attribute: 'default-uri', type: String, reflect: true}) defaultUri = '';
 
-  @property() caption: string;
-
-  @property() description: string;
-
-  @property({attribute: 'header', type: String, reflect: true}) header = '';
-
   @property({attribute: 'active', type: String, reflect: true}) _current = '';
   @property({attribute: 'split', type: Number, reflect: true}) _split: any;
   @property({attribute: 'split-min', type: Number, reflect: true}) _splitMin = 60;
@@ -58,7 +47,7 @@ export default class ZnTabs extends ZincElement {
   @property({attribute: 'no-prefetch', type: Boolean, reflect: true}) noPrefetch = false;
   // session storage if not local
   @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
-  @property({attribute: 'store-key'}) storeKey: any = null;
+  @property({attribute: 'store-key'}) storeKey: string | null = null;
   @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 0;
 
   @property({attribute: 'padded', type: Boolean, reflect: true}) padded = false;
@@ -151,26 +140,22 @@ export default class ZnTabs extends ZincElement {
     }, 10);
 
     this.addEventListener('zn-menu-select', () => {
-      setTimeout(() => {
-        this.reRegisterTabs()
-      }, 200);
+      setTimeout(this.reRegisterTabs, 200);
     }, {passive: true});
   }
 
   _prepareTab(tabId: string) {
-    for (let i = 0; i < this._tabs.length; i++)
-      for (let i = 0; i < this._tabs.length; i++) {
-        if (this._tabs[i].getAttribute('tab') == tabId) {
-          return;
-        }
+    for (const tab of this._tabs) {
+      if (tab.getAttribute('tab') === tabId) {
+        return;
       }
+    }
 
-    const uriTabs = deepQuerySelectorAll("[tab-uri]", this, '');
-    for (let i = 0; i < uriTabs.length; i++) {
-      const uri: any = uriTabs[i].getAttribute("tab-uri");
+    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, '')) {
+      const uri: string = uriTab.getAttribute("tab-uri")!;
       const eleTabId = this._uriToId(uri);
       if (eleTabId === tabId) {
-        this._createUriPanel(uriTabs[i], uri, eleTabId);
+        this._createUriPanel(uriTab, uri, eleTabId);
         // do not break, as multiple tabs can have the same uri
       }
     }
@@ -352,13 +337,15 @@ export default class ZnTabs extends ZincElement {
     if (this._panels.has(tabId)) {
       this._panels.delete(tabId);
     }
-    for (let j = 0; j < this._tabs.length; j++) {
-      if (this._tabs[j].getAttribute('tab') == tabId) {
-        this._tabs[j].remove();
-        this._tabs.splice(j, 1);
+
+    for (const tab of this._tabs) {
+      if (tab.getAttribute('tab') === tabId) {
+        tab.remove();
+        this._tabs.splice(this._tabs.indexOf(tab), 1);
       }
     }
-    if (this._current == tabId) {
+
+    if (this._current === tabId) {
       this.setActiveTab('', true, false);
     }
   }
@@ -367,6 +354,7 @@ export default class ZnTabs extends ZincElement {
     deepQuerySelectorAll('[tab]', this, 'zn-tabs').forEach(ele => {
       this._addTab(ele as HTMLElement);
     });
+
     deepQuerySelectorAll('[tab-uri]', this, 'zn-tabs').forEach(ele => {
       if (ele.getAttribute('tab-uri') === "") {
         ele.setAttribute('tab', "");
@@ -386,13 +374,8 @@ export default class ZnTabs extends ZincElement {
   }
 
   render() {
-    const hasActionSlot = this.hasSlotController.test('actions');
-    const hasHeader = this.header && this.header.length > 0;
-    const hasCaption = this.caption && this.caption.length > 0;
-
-
     if (this._split > 0) {
-      let storeKey: any = this.storeKey;
+      let storeKey: string | null = this.storeKey;
       if (storeKey) {
         storeKey += "-split";
       }
@@ -426,15 +409,6 @@ export default class ZnTabs extends ZincElement {
     }
 
     return html`
-      ${hasHeader || hasCaption || hasActionSlot ? html`
-        <div id="header">
-          ${hasHeader ? html`<h1>${this.header}</h1>` : ''}
-          ${hasCaption ? html`<h2>${this.caption}</h2>` : ''}
-          ${hasActionSlot ? html`
-            <div id="actions">
-              <slot name="actions"></slot>
-            </div>` : ''}
-        </div>` : null}
       <slot name="top"></slot>
       <div id="mid">
         <slot name="left"></slot>
