@kubex/zinc 1.0.115 → 1.0.116

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.115",
+  "version": "1.0.116",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/scss/shared/_table.scss

@@ -1,7 +1,7 @@
 @use "../variables" as v;
 @use "../mixins" as m;
 
-table {
+table:not(.remarkd-table) {
   border-collapse: separate !important;
   border-spacing: 0;
   width: 100%;

package/src/components/page/page.component.ts

@@ -20,6 +20,7 @@ interface TabDefinition {
   sourceIndex: number;
   uri: string | null;
   slotName: string | null;
+  selected: boolean;
 }
 
 /**
@@ -156,6 +157,7 @@ export default class ZnPage extends ZnTabs {
       const priority = this.parsePriority(tab.getAttribute('priority'));
       const uri = tab.getAttribute('uri');
       const slotName = uri ? null : `page-tab-${index}`;
+      const selected = tab.hasAttribute('selected');
 
       tab.id = id;
 
@@ -163,7 +165,7 @@ export default class ZnPage extends ZnTabs {
         tab.slot = slotName!;
       }
 
-      tabs.push({id, caption, priority, sourceIndex: index, uri, slotName});
+      tabs.push({id, caption, priority, sourceIndex: index, uri, slotName, selected});
     });
 
     this.tabDefinitions = tabs.sort((a, b) => this.compareTabs(a, b));
@@ -272,6 +274,12 @@ export default class ZnPage extends ZnTabs {
   }
 
   private activateInitialPageTab() {
+    const preselected = this.tabDefinitions.find(tab => tab.selected);
+    if (preselected) {
+      this.activateTabDefinition(preselected);
+      return;
+    }
+
     const selectedPanel = this.shadowRoot?.querySelector('#content > div[selected]');
     const firstTab = this.tabDefinitions[0];
 
@@ -280,6 +288,28 @@ export default class ZnPage extends ZnTabs {
     }
   }
 
+  private activateTabDefinition(tab: TabDefinition) {
+    if (tab.uri) {
+      const navItem = this.findNavItemForUri(tab.uri);
+      if (navItem) {
+        this.clickTab(navItem, false);
+        this.syncNavigationActive(navItem);
+        return;
+      }
+    }
+    this.activateTab(tab.id, false);
+  }
+
+  private findNavItemForUri(uri: string): HTMLElement | null {
+    const items = this.shadowRoot?.querySelectorAll<HTMLElement>('zn-navbar li[tab-uri]') ?? [];
+    for (const item of Array.from(items)) {
+      if (item.getAttribute('tab-uri') === uri) {
+        return item;
+      }
+    }
+    return null;
+  }
+
   private registerPagePanels() {
     this.shadowRoot?.querySelectorAll<HTMLElement>('#content > div[id]').forEach(panel => {
       this._addPanel(panel);
@@ -394,7 +424,7 @@ export default class ZnPage extends ZnTabs {
             ${this.tabDefinitions
               .filter(tab => tab.slotName !== null)
               .map(tab => html`
-                <div id="${tab.id}">
+                <div id="${tab.id}" ?selected=${tab.selected}>
                   <slot name="${tab.slotName!}"></slot>
                 </div>
               `)}

package/src/components/page/page.test.ts

@@ -380,6 +380,23 @@ describe('<zn-page>', () => {
     expect(getComputedStyle(activeNavItem).transitionDuration).to.equal('0.1s');
   });
 
+  it('opens the tab flagged with the selected attribute instead of the first', async () => {
+    const el = await fixture<ZnPage>(html`
+      <zn-page caption="Page Title">
+        <zn-tab caption="Overview">Overview Content</zn-tab>
+        <zn-tab caption="Dynamic Tab" uri="/tab-three" selected></zn-tab>
+      </zn-page>
+    `);
+    await aTimeout(60);
+
+    const navbar = el.shadowRoot!.querySelector('zn-navbar')!;
+    const uriItem = navbar.querySelector<HTMLElement>('li[tab-uri="/tab-three"]')!;
+    const overviewItem = navbar.querySelector<HTMLElement>('li[tab=""]')!;
+
+    expect(uriItem.classList.contains('active')).to.equal(true);
+    expect(overviewItem.classList.contains('active')).to.equal(false);
+  });
+
   it('disables breadcrumbs in modal mode', async () => {
     const el = await fixture<ZnPage>(html`
       <zn-page caption="Page Title" modal>

package/src/components/tab/tab.component.ts

@@ -18,6 +18,8 @@ export default class ZnTab extends ZincElement {
   @property() caption: string;
   @property({type: Number}) priority: number;
   @property() uri: string;
+  /** When present, zn-page opens this tab on load instead of the first tab. */
+  @property({type: Boolean, reflect: true}) selected = false;
 
   render() {
     return html`<slot></slot>`;