@kubex/zinc 1.0.111 → 1.0.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.111",
+  "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/inline-edit/inline-edit.component.ts

@@ -1,4 +1,5 @@
 import { classMap } from "lit/directives/class-map.js";
+import { ConditionalController } from "../../internal/conditional";
 import { type CSSResultGroup, html, type HTMLTemplateResult, type PropertyValues, unsafeCSS } from 'lit';
 import { defaultValue } from "../../internal/default-value";
 import { FormControlController } from "../../internal/form";
@@ -47,6 +48,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     },
   });
   private readonly hasSlotController = new HasSlotController(this, 'help-text', '[default]');
+  private readonly conditionalController = new ConditionalController(this);
 
   @property() value: string | string[] = '';
 
@@ -56,6 +58,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
 
   @property({ attribute: 'edit-text' }) editText: string;
 
+  @property() conditional = '';
+
   @property({ type: Boolean }) disabled: boolean
 
   @property({ type: Boolean }) inline: boolean
@@ -171,6 +175,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   async firstUpdated() {
     await this.updateComplete;
     this.input.addEventListener('onclick', this.handleEditClick);
+    this.conditionalController.setup();
   }
 
   protected willUpdate(changedProperties: PropertyValues) {
@@ -195,6 +200,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     if (this.input instanceof ZnSelect && !this.isEditing) {
       await this.input.hide();
     }
+    this.conditionalController.check();
   }
 
   mouseEventHandler = (e: MouseEvent) => {
@@ -468,16 +474,18 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   protected _getDataSelectInput(): HTMLTemplateResult {
     return html`
       <zn-data-select class="ai__input"
-                      name="${this.name}"
-                      value="${this.value}"
+                      clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
+                      dir="${this.dir}"
                       icon-position="${ifDefined(this.iconPosition)}"
-                      size="${this.size}"
+                      multiple=${ifDefined(this.multiple)}
+                      name="${this.name}"
                       provider="${this.selectProvider}"
-                      clearable=${ifDefined(this.isEditing ? this.clearable : undefined)}
                       required=${ifDefined(this.required)}
-                      dir="${this.dir}"
+                      size="${this.size}"
+                      value="${this.value}"
+                      @zn-blur="${this.handleBlur}"
                       @zn-input="${this.handleInput}"
-                      @zn-blur="${this.handleBlur}">
+      >
       </zn-data-select>`;
   }
 }

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/select/select.component.ts

@@ -1,6 +1,6 @@
 import {animateTo, stopAnimations} from '../../internal/animate.js';
 import {classMap} from "lit/directives/class-map.js";
-import {deepQuerySelectorAll} from "../../utilities/query";
+import {ConditionalController} from "../../internal/conditional";
 import {FormControlController} from "../../internal/form";
 import {getAnimation, setDefaultAnimation} from "../../utilities/animation-registry";
 import {HasSlotController} from "../../internal/slot";
@@ -89,6 +89,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
   protected readonly formControlController = new FormControlController(this, {
     assumeInteractionOn: ['zn-blur', 'zn-input']
   });
+  private readonly conditionalController = new ConditionalController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
   private readonly localize = new LocalizeController(this);
   private typeToSelectString = '';
@@ -1131,33 +1132,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
 
     }
 
-    if (this.conditional !== "") {
-      const ids = this.conditional.split(',').map(id => id.trim());
-      const conditionals: ZnSelect[] = [];
-
-      ids.forEach(id => {
-        const elements = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as ZnSelect[];
-        conditionals.push(...elements);
-      });
-
-      const initiallyDisabled = this.disabled;
-      const checkConditionals = () => {
-        const shouldDisable = conditionals.some(select => {
-          let linkedValues = Array.isArray(select.value) ? select.value : [select.value];
-          linkedValues = linkedValues.filter(v => v !== '');
-          return linkedValues.length > 0;
-        });
-        this.disabled = initiallyDisabled || shouldDisable;
-      };
-
-      conditionals.forEach(select => {
-        select.addEventListener('zn-change', checkConditionals);
-        select.addEventListener('zn-input', checkConditionals);
-      });
-
-      // trigger the check once to initialize
-      checkConditionals();
-    }
+    this.conditionalController.setup();
 
     if (this.dataUri && !this.searchOnly) {
       this.fetchOptions().then();

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' },

package/src/internal/conditional.ts

@@ -0,0 +1,88 @@
+import {deepQuerySelectorAll} from '../utilities/query';
+import type {ReactiveController, ReactiveControllerHost} from 'lit';
+
+export interface ConditionalHost {
+  conditional: string;
+  disabled: boolean;
+}
+
+/** A reactive controller that disables the host when linked selects have a value. */
+export class ConditionalController implements ReactiveController {
+  host: ReactiveControllerHost & Element & ConditionalHost;
+  private conditionals: (Element & { value: string | string[] })[] = [];
+  private initiallyDisabled = false;
+  private readonly handleChange = () => this.checkConditionals();
+
+  constructor(host: ReactiveControllerHost & Element & ConditionalHost) {
+    (this.host = host).addController(this);
+  }
+
+  /** Call from the host's `firstUpdated()` to parse IDs, find elements, attach listeners, and run the initial check. */
+  setup() {
+    if (this.host.conditional === '') {
+      return;
+    }
+
+    const ids = this.host.conditional.split(',').map(id => id.trim());
+
+    ids.forEach(id => {
+      const byId = deepQuerySelectorAll(`#${id}`, document.documentElement, '') as (Element & {
+        value: string | string[];
+      })[];
+      const byName = deepQuerySelectorAll(`[name="${id}"]`, document.documentElement, '') as (Element & {
+        value: string | string[];
+      })[];
+
+      // de-duplicate in case the same element matches both id and name
+      const seen = new Set<Element>();
+      [...byId, ...byName].forEach(el => {
+        if (!seen.has(el)) {
+          seen.add(el);
+          this.conditionals.push(el);
+        }
+      });
+    });
+
+    this.initiallyDisabled = this.host.disabled;
+
+    if (ids.length === 0) {
+      return;
+    }
+
+    this.conditionals.forEach(select => {
+      select.addEventListener('zn-change', this.handleChange);
+      select.addEventListener('zn-input', this.handleChange);
+    });
+
+    // trigger the check once to initialize
+    this.checkConditionals();
+  }
+
+  hostConnected() {
+    // No-op; setup is deferred to setup() which the host calls from firstUpdated()
+  }
+
+  hostDisconnected() {
+    this.conditionals.forEach(select => {
+      select.removeEventListener('zn-change', this.handleChange);
+      // select.removeEventListener('zn-input', this.handleChange);
+    });
+
+    this.conditionals = [];
+  }
+
+  /** Re-evaluate the conditional state. Call from the host when needed. */
+  check() {
+    this.checkConditionals();
+  }
+
+  private checkConditionals() {
+    const shouldDisable = this.conditionals.some(select => {
+      let linkedValues = Array.isArray(select.value) ? select.value : [select.value];
+      linkedValues = linkedValues.filter(v => (v !== '' && v !== "0"));
+      return linkedValues.length > 0;
+    });
+
+    this.host.disabled = this.initiallyDisabled || shouldDisable;
+  }
+}