@kubex/zinc 1.1.183 → 1.1.185

package/docs/pages/components/filter-wrapper.md

@@ -98,6 +98,26 @@ Provide your own submit button by adding the `submit` attribute to a button.
 </zn-filter-wrapper>
 ```
 
+### Submit on Enter
+
+Add the `submit-on-enter` attribute to submit the filters when Enter is pressed in a text field.
+
+```html:preview
+<zn-filter-wrapper submit-on-enter>
+  <zn-input name="email" label="Email" placeholder="Press Enter to search"></zn-input>
+</zn-filter-wrapper>
+```
+
+### Loading Text
+
+While results load, the submit button shows a spinner and "Searching...". Change the text with `loading-text`.
+
+```html:preview
+<zn-filter-wrapper loading-text="Filtering...">
+  <zn-input name="search" label="Search"></zn-input>
+</zn-filter-wrapper>
+```
+
 ### Omit Empty Values
 
 Use the `omit-empty` attribute on inputs to exclude them from the filter when empty.

package/package.json

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

package/src/components/button/button.component.ts

@@ -141,6 +141,12 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   }) loadingTextPosition: 'left' | 'right' | 'center' | string = 'center';
   @property({type: Boolean}) loading = false;
 
+  /** Shows a spinner and ignores clicks, e.g. while a request is in flight. */
+  @property({type: Boolean, reflect: true}) processing = false;
+
+  /** Replaces the label while processing. */
+  @property({attribute: 'processing-text'}) processingText = '';
+
   get validity() {
     if (this._isButton() && this.button) {
       return (this.button as HTMLButtonElement).validity;
@@ -242,7 +248,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
   }
 
   handleClick = () => {
-    if (this.disabled) {
+    if (this.disabled || this.processing) {
       return;
     }
 
@@ -378,7 +384,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
     const isLink = this._isLink();
     const showCancel = this.loading && this.autoClick;
     const resolvedIconSize = this.iconSize ? this.iconSize : 20;
-    const icon = this.icon && !this.loading ? html`
+    const icon = this.icon && !this.loading && !this.processing ? html`
         <zn-icon part="icon" src="${this.icon}" id="xy2" size="${resolvedIconSize}"
                  color="${ifDefined(this.iconColor)}" fill="${ifDefined(this.iconFill)}"
                  library="${ifDefined(this.iconLibrary)}"></zn-icon>`
@@ -431,6 +437,7 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
           'button--has-notification': notification !== undefined && notification !== 0,
           'button--muted-notification': this.mutedNotifications || notification === -2,
           'button--notification-dot': notification !== undefined && notification < 0,
+          'button--processing': this.processing,
         })}"
         type="${ifDefined(this.type)}"
         href="${ifDefined(this.href)}"
@@ -440,15 +447,19 @@ export default class ZnButton extends ZincElement implements ZincFormControl {
         gaid="${ifDefined(this.gaid)}"
         aria-label="${ifDefined(ariaLabel)}"
         aria-pressed="${ifDefined(isLink ? undefined : this.pressed)}"
+        aria-busy="${this.processing ? 'true' : nothing}"
         data-notification="${ifDefined(notification)}"
         disabled="${this.disabled || nothing}"
         style=${styleMap(buttonStyles)}
         @click="${this.handleClick}">
         ${this.iconPosition === 'left' ? icon : ''}
+        ${this.processing ? html`<span part="spinner" class="button__spinner"></span>` : ''}
+        ${this.processing && this.processingText ? html`<span class="button__processing-text">${this.processingText}</span>` : ''}
         <slot part="label"
               class="${classMap({
                 'button__label': true,
-                'button__label--hidden': this.loading
+                'button__label--hidden': this.loading,
+                'button__label--replaced': this.processing && !!this.processingText
               })}"
               style="--loading-duration: ${this.autoClickDelay / 1000}s">
           ${this.content}

package/src/components/button/button.scss

@@ -424,6 +424,31 @@
   }
 }
 
+.button--processing {
+  cursor: progress;
+}
+
+.button__spinner {
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 8px;
+  flex-shrink: 0;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: button-spin .7s linear infinite;
+}
+
+.button__label--replaced {
+  display: none;
+}
+
+@keyframes button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .button--relative-wrapper {
   position: relative;
   display: inline-flex;

package/src/components/cols/cols.component.ts

@@ -85,13 +85,16 @@ export default class ZnCols extends ZincElement {
   }
 
   /**
-   * Flags each child that ends its row as laid out, so `divide` only draws between neighbours on the same row
-   * however the columns have wrapped.
+   * Flags each child that ends its row, and each child on the last row, as laid out, so `divide` only draws
+   * between neighbours however the columns have wrapped.
    */
   private markRowEnds() {
     const children = Array.from(this.querySelectorAll(':scope > *:not([slot])'));
     if (!this.divide) {
-      children.forEach((child) => child.removeAttribute('data-row-end'));
+      children.forEach((child) => {
+        child.removeAttribute('data-row-end');
+        child.removeAttribute('data-last-row');
+      });
       return;
     }
 
@@ -101,6 +104,7 @@ export default class ZnCols extends ZincElement {
       const rowEnd = !rects.some((other) =>
         other !== rect && other.top < rect.bottom && other.bottom > rect.top && other.left > rect.left);
       child.toggleAttribute('data-row-end', rowEnd);
+      child.toggleAttribute('data-last-row', !rects.some((other) => other.top >= rect.bottom));
     });
   }
 

package/src/components/cols/cols.scss

@@ -67,6 +67,22 @@
     ::slotted([data-row-end]):after {
       display: none;
     }
+
+    ::slotted(:not([data-last-row])) {
+      position: relative;
+    }
+  }
+
+  // Border mode owns :before for its own row rules.
+  &--divide:not(.cols--border) ::slotted(:not([data-last-row])):before {
+    content: "";
+    position: absolute;
+    display: block;
+    height: 1px;
+    left: 0;
+    right: 0;
+    bottom: calc((var(--zn-spacing-small) / 2) * -1);
+    background-color: rgb(var(--zn-border-color));
   }
 
   &--no-gap {
@@ -74,8 +90,14 @@
   }
 
   // Without a gap to sit in, the divider goes on the column's own edge.
-  &--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
-    right: 0;
+  &--no-gap.cols--divide {
+    ::slotted(*:not(:last-child)):after {
+      right: 0;
+    }
+
+    ::slotted(:not([data-last-row])):before {
+      bottom: 0;
+    }
   }
 
   // The row rule below each child is drawn by a pseudo reaching to -100vw, so border mode has to clip. Clipping
@@ -155,17 +177,6 @@ $stack-sizes: (sm, smp, ph, md, lg, hd, '3k', '4k');
       .cols--divide ::slotted(*:not(:last-child)):after {
         display: none;
       }
-
-      // Edge-to-edge columns keep their separation as a rule between the stacked rows
-      .cols--no-gap.cols--divide ::slotted(*:not(:last-child)):after {
-        display: block;
-        top: auto;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: auto;
-        height: 1px;
-      }
     }
   }
 }

package/src/components/cols/cols.test.ts

@@ -165,5 +165,21 @@ describe('<zn-cols>', () => {
 
       expect(dividerOf(el.querySelector('#a'))).to.equal('none');
     });
+
+    it('should rule between wrapped rows', async () => {
+      const el = await cols(`
+        <zn-cols layout="1,1" divide style="width: 600px">
+          <div id="a" style="height: 20px"></div>
+          <div id="b" style="height: 20px"></div>
+          <div id="c" style="height: 20px"></div>
+          <div id="d" style="height: 20px"></div>
+        </zn-cols>`);
+      const ruleOf = (id: string) => getComputedStyle(el.querySelector(id)!, '::before').content;
+
+      expect(ruleOf('#a')).to.not.equal('none');
+      expect(ruleOf('#b')).to.not.equal('none');
+      expect(ruleOf('#c')).to.equal('none');
+      expect(ruleOf('#d')).to.equal('none');
+    });
   });
 });

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

@@ -431,10 +431,10 @@ export default class ZnDataTable extends ZincElement {
 
   requestParams: Record<string, any> = {};
 
-  refresh() {
+  refresh(): Promise<void> {
     // Allow manual refresh to trigger the first data load when no-initial-load is set
     this._initialLoad = false;
-    this._dataTask.run().then(r => r);
+    return this._dataTask.run();
   }
 
   // Headers that make up the visible columns, in header order

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -1,9 +1,10 @@
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {property} from "lit/decorators.js";
+import {property, state} from "lit/decorators.js";
 import {trimControlValue} from '../../internal/form';
 import ZincElement from '../../internal/zinc-element';
 
 import type ZnDataSelect from "../data-select";
+import type ZnButton from "../button";
 import type ZnDataTable from "../data-table";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";
@@ -42,12 +43,20 @@ export default class ZnFilterWrapper extends ZincElement {
 
   @property() button: string = 'Filter';
 
-  private hasSubmitButton: boolean = false;
+  /** Submits the filters when Enter is pressed in a text field. */
+  @property({attribute: 'submit-on-enter', type: Boolean}) submitOnEnter = false;
+
+  /** Shown on the submit button while results load. */
+  @property({attribute: 'loading-text'}) loadingText = 'Searching...';
+
+  @state() private loading = false;
+
+  private submitButton: ZnButton | null = null;
 
   handleSubmit = (event: Event) => {
     event.preventDefault();
     const dataTable: ZnDataTable | null = this.closest('zn-data-table');
-    if (dataTable) {
+    if (dataTable && !this.loading) {
       const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-data-select', 'zn-datepicker', 'input', 'select', 'textarea'];
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
@@ -60,17 +69,41 @@ export default class ZnFilterWrapper extends ZincElement {
       });
 
       dataTable.requestParams = params;
-      dataTable.refresh();
+      this.setLoading(true);
+      Promise.resolve(dataTable.refresh()).finally(() => this.setLoading(false));
+    }
+  }
+
+  private setLoading(loading: boolean) {
+    this.loading = loading;
+    if (this.submitButton) {
+      this.submitButton.processingText = this.loadingText;
+      this.submitButton.processing = loading;
+    }
+  }
+
+  handleKeyDown = (event: KeyboardEvent) => {
+    if (!this.submitOnEnter || event.key !== 'Enter' || event.defaultPrevented || event.isComposing
+      || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+      return;
+    }
+
+    // Only plain text fields: selects, buttons and textareas use Enter themselves
+    if (event.composedPath()[0] instanceof HTMLInputElement) {
+      this.handleSubmit(event);
     }
   }
 
   connectedCallback() {
     super.connectedCallback();
-    const button: HTMLElement | null = this.querySelector('zn-button[submit]');
-    if (button) {
-      this.hasSubmitButton = true;
-      button.addEventListener('click', this.handleSubmit);
-    }
+    this.addEventListener('keydown', this.handleKeyDown);
+    this.submitButton = this.querySelector('zn-button[submit]');
+    this.submitButton?.addEventListener('click', this.handleSubmit);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('keydown', this.handleKeyDown);
   }
 
   private renderDefaultButton() {
@@ -78,6 +111,8 @@ export default class ZnFilterWrapper extends ZincElement {
       <zn-button part="search-button"
                  class="filter-wrapper__submit"
                  type="submit"
+                 ?processing="${this.loading}"
+                 processing-text="${this.loadingText}"
                  @click="${this.handleSubmit}">
         ${this.button}
       </zn-button>
@@ -87,7 +122,7 @@ export default class ZnFilterWrapper extends ZincElement {
   render() {
     return html`
       <slot></slot>
-      ${this.hasSubmitButton ? '' : this.renderDefaultButton()}
+      ${this.submitButton ? '' : this.renderDefaultButton()}
     `;
   }
 }

package/src/components/filter-wrapper/filter-wrapper.test.ts

@@ -1,6 +1,7 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
+import type ZnButton from '../button';
 import type ZnDataTable from '../data-table';
 import type ZnFilterWrapper from './filter-wrapper.component';
 import type ZnInput from '../input';
@@ -20,7 +21,7 @@ describe('<zn-filter-wrapper>', () => {
         </zn-filter-wrapper>
       </zn-data-table>
     `);
-    table.refresh = () => undefined;
+    table.refresh = async () => undefined;
     const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
     const input = table.querySelector<ZnInput>('zn-input')!;
     await input.updateComplete;
@@ -40,7 +41,7 @@ describe('<zn-filter-wrapper>', () => {
         </zn-filter-wrapper>
       </zn-data-table>
     `);
-    table.refresh = () => undefined;
+    table.refresh = async () => undefined;
     const [input, clean] = table.querySelectorAll<ZnInput>('zn-input');
     await input.updateComplete;
 
@@ -53,4 +54,59 @@ describe('<zn-filter-wrapper>', () => {
     expect(table.requestParams.email).to.equal('a@b.com');
     expect(input.input.scrollWidth).to.equal(clean.input.scrollWidth);
   });
+
+  it('submits on Enter only when submit-on-enter is set', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email"></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    let refreshes = 0;
+    table.refresh = async () => { refreshes++; };
+    const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
+    const input = table.querySelector<ZnInput>('zn-input')!;
+    await input.updateComplete;
+
+    input.focus();
+    await sendKeys({type: 'a@b.com'});
+    await sendKeys({press: 'Enter'});
+    expect(refreshes).to.equal(0);
+
+    wrapper.submitOnEnter = true;
+    await sendKeys({press: 'Enter'});
+    expect(refreshes).to.equal(1);
+    expect(table.requestParams).to.deep.equal({email: 'a@b.com'});
+  });
+
+  it('shows the submit button as processing until results load', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email"></zn-input>
+          <zn-button submit>Submit</zn-button>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    let finish!: () => void;
+    let refreshes = 0;
+    table.refresh = () => {
+      refreshes++;
+      return new Promise<void>(resolve => { finish = resolve; });
+    };
+    const button = table.querySelector<ZnButton>('zn-button')!;
+    await button.updateComplete;
+    const base = button.shadowRoot!.querySelector<HTMLButtonElement>('[part="base"]')!;
+
+    base.click();
+    base.click();
+    expect(refreshes).to.equal(1);
+    expect(button.processing).to.be.true;
+    expect(button.processingText).to.equal('Searching...');
+
+    finish();
+    await new Promise(resolve => setTimeout(resolve));
+    expect(button.processing).to.be.false;
+  });
 });

package/src/components/tile/tile.component.ts

@@ -28,7 +28,7 @@ import styles from './tile.scss';
 export default class ZnTile extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  private readonly hasSlotController = new HasSlotController(this, '[default]', 'properties', 'actions', 'image');
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description', 'properties', 'actions', 'image');
 
   @property({attribute: 'caption'}) caption: string;
 
@@ -84,8 +84,9 @@ export default class ZnTile extends ZincElement {
   render() {
     const isLink = this._isLink();
     const tag = isLink ? literal`a` : literal`div`;
-    const hasCaption = this.caption && this.caption.length > 0;
-    const hasDescription = this.description && this.description.length > 0;
+    const hasCaption = (this.caption && this.caption.length > 0) || this.hasSlotController.test('caption');
+    const hasDescriptionAttr = this.description && this.description.length > 0;
+    const hasDescription = hasDescriptionAttr || this.hasSlotController.test('description');
     const hasProperties = this.hasSlotController.test('properties');
     const hasActions = this.hasSlotController.test('actions');
     const hasImage = this.hasSlotController.test('image');
@@ -122,7 +123,7 @@ export default class ZnTile extends ZincElement {
                 <p part="caption" class="tile__caption">
                   <slot name="caption">${this.caption}</slot>
                 </p>
-                ${hasDescription ? html`
+                ${hasDescriptionAttr ? html`
                   <p part="description" class="tile__description">
                     ${this.description}</p>` : html`<slot name="description" class="tile__description"></slot>`}
               </div>

package/src/components/tile/tile.test.ts

@@ -9,6 +9,17 @@ describe('<zn-tile>', () => {
     expect(el).to.exist;
   });
 
+  it('should render a slotted caption and image without caption or description attributes', async () => {
+    const el = await fixture<ZnTile>(html`
+      <zn-tile>
+        <zn-icon slot="image" src="user@lu"></zn-icon>
+        <span slot="caption">Leslie Alexander</span>
+      </zn-tile>`);
+
+    expect(el.shadowRoot!.querySelector('slot[name="caption"]')).to.exist;
+    expect(el.shadowRoot!.querySelector('slot[name="image"]')).to.exist;
+  });
+
   it('should render its content as a link when href is set', async () => {
     const el = await fixture<ZnTile>(html`
       <zn-tile href="/users/leslie" caption="Leslie Alexander"></zn-tile>`);