Bug fixes

Author: Templarian

src/pg/tab/tab.ts

@@ -3,13 +3,6 @@ import { Component, Prop, Part } from '@pictogrammers/element';
 import template from './tab.html';
 import style from './tab.css';
 
-function uuid() {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
-    return v.toString(16);
-  });
-}
-
 @Component({
   selector: 'pg-tab',
   style,
@@ -21,8 +14,6 @@ export default class PgTab extends HTMLElement {
 
   @Part() $tab: HTMLDivElement;
 
-  uuid = uuid();
-
   connectedCallback() {
 
   }
@@ -40,7 +31,6 @@ export default class PgTab extends HTMLElement {
       this.dispatchEvent(
         new CustomEvent('tab', {
           detail: {
-            id: this.uuid,
             label: this.label
           },
           bubbles: true

src/pg/tabs/partials/tab.ts

@@ -1,23 +1,66 @@
 import { Component, Prop, Part, node, forEach } from '@pictogrammers/element';
 
 import template from './tab.html';
-// import style from './tabs.css';
 
 @Component({
   selector: 'pg-partial-tab',
   template
 })
 export default class PgPartialTab extends HTMLElement {
 
+  @Prop() index: number;
   @Prop() label: string = '';
+  @Prop() selected: boolean = false;
 
   @Part() $tab: HTMLLIElement;
   @Part() $button: HTMLButtonElement;
 
+  connectedCallback() {
+    this.$button.addEventListener('click', this.#handleClick.bind(this));
+    this.$button.addEventListener('keydown', this.#handleKeyDown.bind(this));
+  }
+
   render(changes) {
     if (changes.label) {
       this.$button.textContent = this.label;
     }
+    if (changes.selected) {
+      this.$button.classList.toggle('selected', this.selected);
+    }
+  }
+
+  #handleClick() {
+    const selectEvent = new CustomEvent('select', {
+      detail: {
+        index: this.index
+      }
+    });
+    this.dispatchEvent(selectEvent);
+  }
+
+  #handleKeyDown(e: KeyboardEvent) {
+    switch(e.key) {
+      case 'ArrowLeft':
+        const arrowLeftEvent = new CustomEvent('arrowleft', {
+          detail: {
+            index: this.index
+          }
+        });
+        this.dispatchEvent(arrowLeftEvent);
+        break;
+      case 'ArrowRight':
+        const arrowRightEvent = new CustomEvent('arrowright', {
+          detail: {
+            index: this.index
+          }
+        });
+        this.dispatchEvent(arrowRightEvent);
+        break;
+    }
+  }
+
+  focus() {
+    this.$button.focus();
   }
 
 }

src/pg/tabs/tabs.ts

@@ -15,78 +15,60 @@ export default class PgTabs extends HTMLElement {
   @Part() $tabset: HTMLUListElement;
   @Part() $slot: HTMLSlotElement;
 
-  tabs: any[] = [];
+  @Prop()
+  #tabs: any[] = [];
+
+  #selectedTab: number = 0;
 
   connectedCallback() {
-    this.addEventListener('tab', this.handleTab.bind(this));
+    this.addEventListener('tab', this.#handleTab.bind(this));
     this.$slot.addEventListener('slotchange', this.handleSlotChange.bind(this));
     forEach({
       container: this.$tabset,
-      items: this.tabs,
+      items: this.#tabs,
       type: (tab: any) => {
         return PgPartialTab;
-      }
-    });
-  }
-
-  handleTab(e: CustomEvent) {
-    const { detail } = e;
-    this.tabs.push(detail);
-
-    /*list(
-      this.$tabset,
-      this.tabs,
-      'id',
-      (tab: any) => {
-        const n = node<HTMLDivElement>(partialTab, {
-          button: {
-            innerText: tab.label
+      },
+      // @ts-ignore
+      connect: ($tab, tab, $tabs) => {
+        $tab.addEventListener('select', (e: any) => {
+          const { index } = e.detail;
+          console.log(index, this.#tabs[e.detail.index]);
+          const elements = this.$slot.assignedElements() as PgTab[];
+          elements[this.#selectedTab].hide();
+          elements[index].show();
+          this.#selectedTab = index;
+        });
+        $tab.addEventListener('arrowleft',  (e: any) => {
+          const { index } = e.detail;
+          if (this.#tabs.length > 1) {
+            if (index === 0) {
+              this.#selectedTab = this.#tabs.length - 1;
+            } else {
+              this.#selectedTab = index - 1;
+            }
+            $tabs[this.#selectedTab].focus();
           }
         });
-        const button = n.querySelector<HTMLDivElement>('[part="tab"]');
-        button?.addEventListener('click', (e) => {
-          this.selectTab(tab.id);
-          this.dispatchEvent(new CustomEvent<any>('select', { detail: tab }));
+        $tab.addEventListener('arrowright',  (e: any) => {
+          const { index } = e.detail;
+          if (this.#tabs.length > 1) {
+            if (index === this.#tabs.length - 1) {
+              this.#selectedTab = 0;
+            } else {
+              this.#selectedTab++;
+            }
+            $tabs[this.#selectedTab].focus();
+          }
         });
-        button?.addEventListener('keydown', this.handleTabKeypress.bind(this));
-        if (this.tabs[0].id === tab.id) {
-          button?.classList.add('active');
-        }
-        return n;
-      },
-      (tab, $item) => {
-
       }
-    );*/
-    e.stopPropagation();
+    });
   }
 
-  handleTabKeypress(e) {
-    const tabs = Array.from(this.$tabset.children, x => x.children[0]);
-    if (tabs.length === 1) {
-      return;
-    }
-    const index = tabs.findIndex(x => x === e.target);
-    const previousIndex = index === 0 ? tabs.length - 1 : index - 1;
-    const nextIndex = index === tabs.length - 1 ? 0 : index + 1;
-    const previousTab = this.tabs[previousIndex];
-    const previousButton = tabs[previousIndex] as HTMLButtonElement;
-    const nextTab = this.tabs[nextIndex];
-    const nextButton = tabs[nextIndex] as HTMLButtonElement;
-    switch(e.key) {
-      case 'ArrowLeft':
-        if (previousTab) {
-          previousButton.focus();
-          this.selectTab(previousTab.id);
-        }
-        break;
-      case 'ArrowRight':
-        if (nextTab) {
-          nextButton.focus();
-          this.selectTab(nextTab.id);
-        }
-        break;
-    }
+  #handleTab(e: CustomEvent) {
+    const { detail } = e;
+    this.#tabs.push(detail);
+    e.stopPropagation();
   }
 
   handleSlotChange(e) {
@@ -96,14 +78,4 @@ export default class PgTabs extends HTMLElement {
     }
   }
 
-  selectTab(id: string) {
-    const tabs = Array.from(this.$tabset.children) as HTMLElement[];
-    for (let tab of tabs) {
-      tab.classList.toggle('active', tab.dataset['key'] === id);
-    }
-    const elements = this.$slot.assignedElements() as PgTab[];
-    elements.forEach(e => e.hide());
-    const tab = elements.find(e => e.uuid === id) as PgTab;
-    tab.show();
-  }
 }