@kubex/zinc 2.0.2 → 2.0.4

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

@@ -1,10 +1,10 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {ifDefined} from "lit/directives/if-defined.js";
+import {type IndicatorEdges, slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
 import {property} from 'lit/decorators.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
-import {type IndicatorEdges, slideTabIndicator, squishTabIndicator} from "../../internal/tab-indicator";
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 import ZnDropdown from "../dropdown";
@@ -111,6 +111,7 @@ export default class ZnNavbar extends ZincElement {
   private _indicator: HTMLElement | null = null;
   private _indicatorFrame: number | null = null;
   private _indicatorTab: HTMLElement | null = null;
+  private _indicatorStripWidth = 0;
   private _indicatorTarget: IndicatorEdges | null = null;
   private _expandable: HTMLElement | null = null;
   private readonly _lightDomClones = new WeakMap<HTMLElement, HTMLElement>();
@@ -242,18 +243,23 @@ export default class ZnNavbar extends ZincElement {
 
     // The indicator scrolls with the tabs, so it is placed in the strip's content coordinates
     const box = container.getBoundingClientRect();
-    const originLeft = box.left - container.scrollLeft;
-    const target = {left: tab.left - originLeft, right: tab.right - originLeft};
+    // An ancestor mid scale-in (e.g. a modal opening) shrinks every rect, and its end fires no resize to re-measure
+    const scaleX = box.width / container.offsetWidth || 1;
+    const scaleY = box.height / container.offsetHeight || 1;
+    const toStrip = (x: number) => (x - box.left) / scaleX + container.scrollLeft;
+    const target = {left: toStrip(tab.left), right: toStrip(tab.right)};
     const previous = this._indicatorTarget;
     const tabChanged = active !== this._indicatorTab;
     const ready = indicator.classList.contains('navbar__indicator--ready');
     this._indicatorTab = active ?? null;
-    if (tabChanged && active) {
-      this._revealTab(active, ready);
+    const stripResized = container.clientWidth !== this._indicatorStripWidth;
+    this._indicatorStripWidth = container.clientWidth;
+    if (active && (tabChanged || stripResized)) {
+      this._revealTab(active, ready && tabChanged);
     }
     // Exposed for ::part(indicator) styles that fill the tab rather than underline it.
-    setStyle(indicator, '--zn-navbar-indicator-top', `${tab.top - box.top}px`);
-    setStyle(indicator, '--zn-navbar-indicator-height', `${tab.height}px`);
+    setStyle(indicator, '--zn-navbar-indicator-top', `${(tab.top - box.top) / scaleY}px`);
+    setStyle(indicator, '--zn-navbar-indicator-height', `${tab.height / scaleY}px`);
     indicator.classList.toggle('navbar__indicator--shown', true);
     if (previous && Math.abs(previous.left - target.left) < 0.5 && Math.abs(previous.right - target.right) < 0.5) {
       return;
@@ -271,7 +277,7 @@ export default class ZnNavbar extends ZincElement {
     indicator.style.width = `${target.right - target.left}px`;
     this._indicatorTarget = target;
     if (slide) {
-      slideTabIndicator(indicator, {left: drawn.left - originLeft, right: drawn.right - originLeft}, target);
+      slideTabIndicator(indicator, {left: toStrip(drawn.left), right: toStrip(drawn.right)}, target);
     }
 
     // The first placement jumps into position; only later moves animate.

package/src/components/panel/panel.component.ts

@@ -1,7 +1,7 @@
-import {ifDefined} from "lit/directives/if-defined.js";
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {property, state} from 'lit/decorators.js';
 import {registerCosmicBorder} from "../../internal/cosmic-border";
 import ZincElement from '../../internal/zinc-element';

package/src/components/priority-list/priority-list.test.ts

@@ -1,6 +1,6 @@
 import '../../../dist/zn.min.js';
 import {aTimeout, expect, fixture, html} from '@open-wc/testing';
-import {centre, drop, dragTo, startDrag} from '../../internal/test-drag';
+import {centre, dragTo, drop, startDrag} from '../../internal/test-drag';
 
 describe('<zn-priority-list>', () => {
   it('should render a component', async () => {

package/src/components/select/select.test.ts

@@ -989,6 +989,30 @@ describe('<zn-select> requires', () => {
     await c.updateComplete;
     expect(c.disabled, 'both filled').to.be.false;
   });
+
+  it('re-enables a conditional select when the form resets', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form>
+        <zn-select id="allowed" name="allowed" multiple value="" provider="conditional" conditional="blocked">
+          <zn-option value="a">A</zn-option>
+        </zn-select>
+        <zn-select id="blocked" name="blocked" multiple value="" provider="conditional" conditional="allowed">
+          <zn-option value="a">A</zn-option>
+        </zn-select>
+      </form>
+    `);
+    const allowed = form.querySelector<ZnSelect>('#allowed')!;
+    const blocked = form.querySelector<ZnSelect>('#blocked')!;
+
+    blocked.value = ['a'];
+    blocked.dispatchEvent(new Event('zn-change'));
+    expect(allowed.disabled).to.be.true;
+
+    form.reset();
+
+    await waitUntil(() => !allowed.disabled);
+    expect(allowed.disabled).to.be.false;
+  });
 });
 
 describe('<zn-select> empty state', () => {

package/src/components/split-pane/split-pane.component.ts

@@ -4,8 +4,8 @@ import {on} from "../../utilities/on";
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
-import styles from './split-pane.scss';
 import { PropertyValues } from "@lit/reactive-element";
+import styles from './split-pane.scss';
 
 type NavigationItem = {
   caption: string;

package/src/components/table/table.component.ts

@@ -150,6 +150,7 @@ export default class ZnTable extends ZincElement {
   tableBody() {
     const rows: any = [];
     this.hasActions = false;
+    const anyRowHasActions = this.rows.some((row: any) => Array.isArray(row?.actions) && row.actions.length > 0);
     this.rows.forEach((row: any, _: any) => {
       const rowHtml = [];
       const basicData = !row.hasOwnProperty('caption') && !row.hasOwnProperty('data');
@@ -185,8 +186,10 @@ export default class ZnTable extends ZincElement {
         iconHtml = html`
           <zn-icon size="${iconSize}" src="${icon}"></zn-icon>`;
       }
-      let actionsHtml = html`
-        <div class="actions"></div>`;
+      // An invisible menu icon keeps captions aligned with rows that do have a menu.
+      let actionsHtml = anyRowHasActions
+        ? html`<div class="actions actions--placeholder" aria-hidden="true"><zn-icon src="more_vert"></zn-icon></div>`
+        : html`<div class="actions"></div>`;
       if (actions && actions.length > 0) {
         actionsHtml = html`
           <div class="actions">

package/src/components/table/table.scss

@@ -90,6 +90,10 @@ td.capcol {
     display: none;
   }
 
+  .actions--placeholder {
+    visibility: hidden;
+  }
+
   .actions button {
     display: flex;
     padding: 0;

package/src/components/table/table.test.ts

@@ -24,4 +24,17 @@ describe('<zn-table>', () => {
     link.click();
     expect(clicks).to.equal(2);
   });
+
+  it('reserves the menu column on rows without actions when another row has them', async () => {
+    const data = {header: ['Name'], items: [
+      {caption: 'Me', data: []},
+      {caption: 'Them', actions: [{title: 'Edit', path: '/edit'}], data: []},
+    ]};
+    const el = await fixture<HTMLElement>(html`<zn-table data="${JSON.stringify(data)}"></zn-table>`);
+    await (el as unknown as {updateComplete: Promise<unknown>}).updateComplete;
+
+    const cells = el.shadowRoot!.querySelectorAll<HTMLElement>('td.capcol .actions');
+    expect(cells[0].classList.contains('actions--placeholder')).to.be.true;
+    expect(cells[0].getBoundingClientRect().width).to.equal(cells[1].getBoundingClientRect().width);
+  });
 });

package/src/components/tabs/tabs.component.ts

@@ -14,11 +14,11 @@ import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {md5} from "../../utilities/md5";
 import {MutationController} from '@lit-labs/observers/mutation-controller.js';
+import {onHoverIntent} from '../../internal/hover-intent';
+import {pointerInitiated} from '../../internal/input-modality';
 import {property} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
-import {onHoverIntent} from '../../internal/hover-intent';
-import {pointerInitiated} from '../../internal/input-modality';
 
 // Tabs load in such a way that the global sheet has to be re-applied inside the shadow root.
 import bootStyles from '../../../scss/boot.scss';

package/src/internal/conditional.ts

@@ -24,7 +24,10 @@ export class ConditionalController implements ReactiveController {
   private conditionals: ValuedElement[] = [];
   private required: ValuedElement[] = [];
   private initiallyDisabled = false;
+  private forms = new Set<HTMLFormElement>();
   private readonly handleChange = () => this.checkConditionals();
+  // Controls restore their values in their own reset listeners, so check once they all have
+  private readonly handleReset = () => setTimeout(this.handleChange);
 
   constructor(host: ReactiveControllerHost & Element & ConditionalHost) {
     (this.host = host).addController(this);
@@ -45,7 +48,10 @@ export class ConditionalController implements ReactiveController {
     watched.forEach(el => {
       el.addEventListener('zn-change', this.handleChange);
       el.addEventListener('zn-input', this.handleChange);
+      const form = el.closest('form');
+      if (form) this.forms.add(form);
     });
+    this.forms.forEach(form => form.addEventListener('reset', this.handleReset));
 
     // trigger the check once to initialize
     this.checkConditionals();
@@ -86,8 +92,11 @@ export class ConditionalController implements ReactiveController {
       el.removeEventListener('zn-input', this.handleChange);
     });
 
+    this.forms.forEach(form => form.removeEventListener('reset', this.handleReset));
+
     this.conditionals = [];
     this.required = [];
+    this.forms.clear();
   }
 
   /** Re-evaluate the conditional state. Call from the host when needed. */