@kubex/zinc 1.0.112 → 1.0.113

package/package.json

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

package/src/components/chart/builders.ts

@@ -45,6 +45,7 @@ function commonOption(props: BuilderProps): EChartsOption {
     textStyle: { color: textColor },
     tooltip: {
       trigger: 'axis',
+      appendTo: 'body',
       valueFormatter: props.yAxisAppend
         ? (v: number | string) => `${v}${props.yAxisAppend}`
         : undefined,
@@ -201,7 +202,7 @@ export function buildSankeyOption(props: BuilderProps): EChartsOption {
     animationEasing: 'cubicOut',
     ...(props.colors ? { color: props.colors } : {}),
     textStyle: { color: textColor },
-    tooltip: { trigger: 'item' },
+    tooltip: { trigger: 'item', appendTo: 'body' },
     series: [{
       type: 'sankey',
       name: first.name,

package/src/components/navbar/navbar.component.ts

@@ -69,12 +69,12 @@ export default class ZnNavbar extends ZincElement {
   private _navItemsGap: number = 0;
   private _expandableMargin: number = 0;
   private _totalItemWidth: number = 0;
+  private _itemsObserver: MutationObserver | null = null;
 
   protected _store: Store;
 
   appendItem(item: Element) {
-    this._appended = this._appended || [];
-    this._appended.push(item);
+    this._appended = [...(this._appended || []), item];
   }
 
   connectedCallback() {
@@ -97,6 +97,27 @@ export default class ZnNavbar extends ZincElement {
     this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "znnav:", this.storeTtl);
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._itemsObserver?.disconnect();
+    this._itemsObserver = null;
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+  }
+
+  private _updateVisibility = () => {
+    if (this._expanding.length > 0) {
+      this.style.display = '';
+      return;
+    }
+    const items = this._navItems?.querySelectorAll(':scope > li:not(.more):not(#dropdown-item)') || [];
+    const itemCount = items.length;
+    if (itemCount === 0 || (itemCount < 2 && this.hideOne)) {
+      this.style.display = 'none';
+    } else {
+      this.style.display = '';
+    }
+  };
 
   handleResize = () => {
     if (this._totalItemWidth === 0 || this._extendedMenu === null || this.iconBar || this.stacked) {
@@ -204,6 +225,12 @@ export default class ZnNavbar extends ZincElement {
     // Load persisted tabs before calculating widths
     this._loadStoredTabs();
 
+    if (this._navItems) {
+      this._itemsObserver = new MutationObserver(this._updateVisibility);
+      this._itemsObserver.observe(this._navItems, {childList: true});
+    }
+    this._updateVisibility();
+
     setTimeout(() => {
       const items = this._navItems?.querySelectorAll('li') || [];
       for (const item of items) {
@@ -297,16 +324,17 @@ export default class ZnNavbar extends ZincElement {
     }
   };
 
+  protected updated(_changedProperties: PropertyValues) {
+    super.updated(_changedProperties);
+    if (_changedProperties.has('hideOne') || _changedProperties.has('navigation') || _changedProperties.has('_appended')) {
+      this._updateVisibility();
+    }
+  }
+
   render() {
     if (!this.navigation) {
       this.navigation = [];
     }
-    const itemCount = this.navigation?.length + this._preItems?.length + this._postItems?.length;
-    if (this._expanding.length === 0) {
-      if (itemCount === 0 || (itemCount < 2 && this.hideOne)) {
-        this.style.display = 'none';
-      }
-    }
 
     return html`
       <div class="${classMap({

package/src/components/navbar/navbar.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {aTimeout, expect, fixture, html} from '@open-wc/testing';
+import type ZnNavbar from './navbar.component';
 
 describe('<zn-navbar>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,54 @@ describe('<zn-navbar>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('hide-one', () => {
+    it('hides when only one item is present', async () => {
+      const el = await fixture<ZnNavbar>(html`
+        <zn-navbar hide-one>
+          <li>Only</li>
+        </zn-navbar>
+      `);
+      await aTimeout(0);
+
+      expect(getComputedStyle(el).display).to.equal('none');
+    });
+
+    it('reveals when a second item is added dynamically', async () => {
+      const el = await fixture<ZnNavbar>(html`
+        <zn-navbar hide-one>
+          <li>First</li>
+        </zn-navbar>
+      `);
+      await aTimeout(0);
+      expect(getComputedStyle(el).display).to.equal('none');
+
+      const li = document.createElement('li');
+      li.setAttribute('tab-uri', '/two');
+      li.textContent = 'Second';
+      el.addItem(li, false);
+      await aTimeout(0);
+
+      expect(getComputedStyle(el).display).to.not.equal('none');
+    });
+
+    it('hides again when items drop back to one', async () => {
+      const el = await fixture<ZnNavbar>(html`
+        <zn-navbar hide-one>
+          <li>First</li>
+        </zn-navbar>
+      `);
+      const second = document.createElement('li');
+      second.setAttribute('tab-uri', '/two');
+      second.textContent = 'Second';
+      el.addItem(second, false);
+      await aTimeout(0);
+      expect(getComputedStyle(el).display).to.not.equal('none');
+
+      second.remove();
+      await aTimeout(0);
+
+      expect(getComputedStyle(el).display).to.equal('none');
+    });
+  });
 });

package/src/components/simple-chart/simple-chart.component.ts

@@ -56,6 +56,7 @@ export default class ZnSimpleChart extends ZincElement {
       animationEasing: 'cubicOut',
       tooltip: {
         trigger: 'axis',
+        appendTo: 'body',
         backgroundColor: 'rgba(0,0,0,0.7)',
         borderWidth: 0,
         textStyle: { color: '#fff' },