@kubex/zinc 2.0.3 → 2.0.4

package/src/components/key-value/key-value.component.ts

@@ -1,9 +1,11 @@
 import {classMap} from 'lit/directives/class-map.js';
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {defaultValue} from '../../internal/default-value';
 import {FormControlController} from '../../internal/form';
 import {HasSlotController} from '../../internal/slot';
 import {property, state} from 'lit/decorators.js';
 import ZincElement, {type ZincFormControl} from '../../internal/zinc-element';
+import type ZnInput from '../input';
 
 import formControlStyles from '../../form-control.scss';
 import styles from './key-value.scss';
@@ -13,6 +15,8 @@ interface KeyValueRow {
   value: string;
 }
 
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
 /**
  * @summary Edits a list of name and value pairs, submitted as a JSON object.
  * @documentation https://zinc.style/components/key-value
@@ -20,6 +24,8 @@ interface KeyValueRow {
  * @since 1.0
  *
  * @dependency zn-input
+ * @dependency zn-select
+ * @dependency zn-option
  * @dependency zn-button
  *
  * @event zn-change - Emitted when a pair is added, removed or edited.
@@ -41,9 +47,15 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
 
   @property() name = '';
 
-  /** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
+  /**
+   * The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. With `list`, the names as a JSON array,
+   * such as `["10.0.0.0/24"]`.
+   */
   @property() value = '{}';
 
+  /** The value a form reset restores, taken from the initial `value` attribute. */
+  @defaultValue() defaultValue = '{}';
+
   @property() label = '';
 
   @property({attribute: 'help-text'}) helpText = '';
@@ -57,6 +69,15 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   /** Passed to each value input, so its slash menu can insert merge fields. */
   @property({attribute: 'slash-items'}) slashItems = '';
 
+  /**
+   * Makes each value a choice instead of free text: a JSON object of option values to labels, such as
+   * `{"default": "System default", "auto": "Auto approve"}`. New rows take the first option.
+   */
+  @property({attribute: 'value-options', type: Object}) valueOptions: Record<string, string> | null = null;
+
+  /** Edits a plain list of names with no values, submitted as a JSON array. */
+  @property({type: Boolean, reflect: true}) list = false;
+
   @property({reflect: true}) form = '';
 
   @property({type: Boolean, reflect: true}) disabled = false;
@@ -87,15 +108,35 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   }
 
   protected willUpdate(changed: PropertyValues) {
+    if (this.list && this.value === '{}') {
+      this.value = '[]';
+    }
     if (changed.has('value') && this.value !== this._serialise()) {
       this._rows = this._parse(this.value);
     }
+    this._rows = this._withSpareRow(this._rows);
+  }
+
+  private get _defaultValue(): string {
+    return this.valueOptions ? Object.keys(this.valueOptions)[0] ?? '' : '';
+  }
+
+  private _emptyRow(): KeyValueRow {
+    return {key: '', value: this._defaultValue};
+  }
+
+  // There's always a row to type into, so an empty list never leaves the add button on its own
+  private _withSpareRow(rows: KeyValueRow[]): KeyValueRow[] {
+    return rows.length ? rows : [this._emptyRow()];
   }
 
   private _parse(value: string): KeyValueRow[] {
     try {
-      const parsed: unknown = JSON.parse(value || '{}');
-      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+      const parsed: unknown = JSON.parse(value || (this.list ? '[]' : '{}'));
+      if (Array.isArray(parsed)) {
+        return parsed.map(key => ({key: String(key ?? ''), value: this._defaultValue}));
+      }
+      if (parsed && typeof parsed === 'object') {
         return Object.entries(parsed as Record<string, unknown>).map(([key, v]) => ({key, value: String(v ?? '')}));
       }
     } catch {
@@ -105,8 +146,12 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
   }
 
   private _serialise(): string {
+    const named = this._rows.filter(row => row.key.trim());
+    if (this.list) {
+      return JSON.stringify(named.map(row => row.key.trim()));
+    }
     const pairs: Record<string, string> = {};
-    this._rows.filter(row => row.key.trim()).forEach(row => pairs[row.key.trim()] = row.value);
+    named.forEach(row => pairs[row.key.trim()] = row.value);
     return JSON.stringify(pairs);
   }
 
@@ -122,9 +167,70 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
     this._update(rows);
   }
 
+  private get _reduceMotion(): boolean {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  private _easing(): string {
+    return getComputedStyle(this).getPropertyValue('--zn-ease-out').trim() || EASE_OUT;
+  }
+
+  private async _add() {
+    this._update([...this._rows, this._emptyRow()]);
+    await this.updateComplete;
+    const rows = this.shadowRoot!.querySelectorAll<HTMLElement>('.key-value__row');
+    const row = rows[rows.length - 1];
+    if (!row) return;
+    // Opacity and transform only: the new inputs render for the first time during these frames
+    row.animate(
+      this._reduceMotion
+        ? [{opacity: 0}, {opacity: 1}]
+        : [{opacity: 0, transform: 'translateY(-4px)'}, {opacity: 1, transform: 'translateY(0)'}],
+      {duration: this._reduceMotion ? 150 : 180, easing: this._easing()});
+    const input = row.querySelector<ZnInput>('.key-value__key');
+    await input?.updateComplete;
+    input?.focus();
+  }
+
+  private async _remove(row: KeyValueRow, rowElement: HTMLElement) {
+    if (this._rows.length === 1) {
+      this._update([this._emptyRow()]);
+      return;
+    }
+    rowElement.style.pointerEvents = 'none';
+    rowElement.style.overflow = 'hidden';
+    const height = rowElement.getBoundingClientRect().height;
+    await rowElement.animate(
+      this._reduceMotion
+        ? [{opacity: 1}, {opacity: 0}]
+        : [{opacity: 1, transform: 'scale(1)', height: `${height}px`}, {opacity: 0, transform: 'scale(0.98)', height: '0px'}],
+      {duration: this._reduceMotion ? 150 : 220, easing: this._easing()}).finished.catch(() => undefined);
+    rowElement.style.pointerEvents = '';
+    rowElement.style.overflow = '';
+    this._update(this._rows.filter(r => r !== row));
+  }
+
+  private _renderValue(row: KeyValueRow, index: number) {
+    if (this.list) return null;
+    if (this.valueOptions) {
+      return html`
+        <zn-select class="key-value__value" .value=${row.value} ?disabled=${this.disabled} aria-label=${this.valueLabel}
+                   @zn-change=${(e: Event) => this._edit(index, 'value', e)}>
+          ${Object.entries(this.valueOptions).map(([value, label]) => html`
+            <zn-option value=${value}>${label}</zn-option>`)}
+        </zn-select>`;
+    }
+    return html`
+      <zn-input class="key-value__value" placeholder=${this.valueLabel} .value=${row.value}
+                slash-items=${this.slashItems} ?disabled=${this.disabled}
+                @zn-input=${(e: Event) => this._edit(index, 'value', e)}></zn-input>`;
+  }
+
   render() {
     const hasLabel = this.label || this.hasSlotController.test('label');
     const hasHelpText = this.helpText || this.hasSlotController.test('help-text');
+    // A lone empty row has nothing to remove; hidden rather than dropped so its inputs don't change width
+    const lonelyEmpty = this._rows.length === 1 && !this._rows[0].key.trim();
 
     return html`
       <div part="base" class=${classMap({
@@ -137,19 +243,24 @@ export default class ZnKeyValue extends ZincElement implements ZincFormControl {
           <slot name="label">${this.label}</slot>
         </label>
 
-        <div class="key-value__rows">
+        <div class=${classMap({
+          'key-value__rows': true,
+          'key-value__rows--list': this.list,
+          'key-value__rows--options': !!this.valueOptions && !this.list,
+        })}>
           ${this._rows.map((row, index) => html`
             <div part="row" class="key-value__row">
               <zn-input class="key-value__key" placeholder=${this.keyLabel} .value=${row.key}
-                        ?disabled=${this.disabled} @zn-input=${(e: Event) => this._edit(index, 'key', e)}></zn-input>
-              <zn-input class="key-value__value" placeholder=${this.valueLabel} .value=${row.value}
-                        slash-items=${this.slashItems} ?disabled=${this.disabled}
-                        @zn-input=${(e: Event) => this._edit(index, 'value', e)}></zn-input>
-              <zn-button icon="x@lu" color="transparent" size="small" title="Remove" icon-button="small" plain ?disabled=${this.disabled}
-                         @click=${() => this._update(this._rows.filter((_, i) => i !== index))}></zn-button>
+                        aria-label=${this.keyLabel} ?disabled=${this.disabled}
+                        @zn-input=${(e: Event) => this._edit(index, 'key', e)}></zn-input>
+              ${this._renderValue(row, index)}
+              <zn-button class=${classMap({'key-value__remove': true, 'key-value__remove--hidden': lonelyEmpty})}
+                         icon="x@lu" color="transparent" size="small" title="Remove" icon-button="small" plain
+                         ?disabled=${this.disabled}
+                         @click=${(e: Event) => this._remove(row, (e.currentTarget as HTMLElement).closest('.key-value__row')!)}></zn-button>
             </div>`)}
           <zn-button class="key-value__add" icon="plus@lu" color="secondary" size="small" ?disabled=${this.disabled}
-                     @click=${() => this._update([...this._rows, {key: '', value: ''}])}>${this.addText}</zn-button>
+                     @click=${() => this._add()}>${this.addText}</zn-button>
         </div>
 
         <div class="form-control__help-text" aria-hidden=${hasHelpText ? 'false' : 'true'}>

package/src/components/key-value/key-value.scss

@@ -18,3 +18,16 @@
   gap: var(--zn-spacing-x-small);
   width: 100%;
 }
+
+.key-value__rows--list .key-value__row {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.key-value__rows--options .key-value__row {
+  grid-template-columns: minmax(0, 1fr) var(--zn-key-value-option-width, 13rem) auto;
+}
+
+// Keeps its space so the inputs don't change width when it appears
+.key-value__remove--hidden {
+  visibility: hidden;
+}

package/src/components/key-value/key-value.test.ts

@@ -2,11 +2,15 @@ import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
 import type ZnKeyValue from './key-value.component';
 
+const rows = (el: ZnKeyValue) => el.shadowRoot!.querySelectorAll<HTMLElement>('.key-value__row');
+// zn-button.click() skips the click event that the row buttons listen for, so press them as a user would
+const press = (button: Element) => button.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true}));
+
 describe('<zn-key-value>', () => {
   it('should show a row per pair in its value', async () => {
     const el = await fixture<ZnKeyValue>(html`<zn-key-value value='{"1":"{{recipient.firstName}}","2":"x"}'></zn-key-value>`);
 
-    expect(el.shadowRoot!.querySelectorAll('.key-value__row').length).to.equal(2);
+    expect(rows(el).length).to.equal(2);
   });
 
   it('should submit the pairs as a JSON object, leaving out unnamed rows', async () => {
@@ -14,9 +18,68 @@ describe('<zn-key-value>', () => {
       <form><zn-key-value name="pairs" value='{"1":"a"}'></zn-key-value></form>`);
     const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
 
-    el.shadowRoot!.querySelector<HTMLElement>('.key-value__add')!.click();
+    press(el.shadowRoot!.querySelector('.key-value__add')!);
     await el.updateComplete;
 
     expect(new FormData(form).get('pairs')).to.equal('{"1":"a"}');
   });
+
+  it('keeps one empty row to type into, with nothing to remove', async () => {
+    const el = await fixture<ZnKeyValue>(html`<zn-key-value></zn-key-value>`);
+
+    expect(rows(el).length).to.equal(1);
+    expect(rows(el)[0].querySelector('.key-value__remove--hidden')).to.exist;
+  });
+
+  it('clears the last row instead of removing it', async () => {
+    const el = await fixture<ZnKeyValue>(html`<zn-key-value value='{"a":"1"}'></zn-key-value>`);
+
+    press(rows(el)[0].querySelector('.key-value__remove')!);
+    await el.updateComplete;
+
+    expect(rows(el).length).to.equal(1);
+    expect(el.value).to.equal('{}');
+  });
+
+  it('submits a list as a JSON array of names', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-key-value name="entries" list value='["10.0.0.1","10.0.0.0/24"]'></zn-key-value></form>`);
+    const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
+
+    expect(rows(el).length).to.equal(2);
+    expect(rows(el)[0].querySelector('.key-value__value')).to.not.exist;
+    expect(new FormData(form).get('entries')).to.equal('["10.0.0.1","10.0.0.0/24"]');
+  });
+
+  it('renders value options as a select, defaulting new rows to the first option', async () => {
+    const options = JSON.stringify({default: 'System default', auto: 'Auto approve'});
+    const el = await fixture<ZnKeyValue>(html`
+      <zn-key-value value-options="${options}" value='{"a.com":"auto"}'></zn-key-value>`);
+
+    expect(rows(el)[0].querySelector('zn-select.key-value__value')).to.exist;
+
+    press(el.shadowRoot!.querySelector('.key-value__add')!);
+    await el.updateComplete;
+    const key = rows(el)[1].querySelector<HTMLElement & {value: string}>('.key-value__key')!;
+    key.value = 'b.com';
+    key.dispatchEvent(new CustomEvent('zn-input', {bubbles: true, composed: true}));
+    await el.updateComplete;
+
+    expect(JSON.parse(el.value)).to.deep.equal({'a.com': 'auto', 'b.com': 'default'});
+  });
+
+  it('restores its rows on form reset', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form><zn-key-value name="pairs" value='{"a":"1"}'></zn-key-value></form>`);
+    const el = form.querySelector<ZnKeyValue>('zn-key-value')!;
+
+    press(rows(el)[0].querySelector('.key-value__remove')!);
+    await el.updateComplete;
+    expect(el.value).to.equal('{}');
+
+    form.reset();
+    await el.updateComplete;
+    expect(el.value).to.equal('{"a":"1"}');
+    expect(rows(el).length).to.equal(1);
+  });
 });

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/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/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. */