@kubex/zinc 1.1.142 → 1.1.144

package/docs/pages/components/form-actions.md

@@ -61,6 +61,21 @@ Extra buttons placed in the default slot appear before the standard buttons.
 </form>
 ```
 
+### Start-Aligned Actions
+
+`align="start"` on a slotted child moves it to the start of the row; any number can sit on either side. Write the
+buttons in the order they should be read — the sides are set by CSS ordering, so markup order is what a keyboard
+follows.
+
+```html:preview
+<form>
+  <zn-form-actions with-cancel>
+    <zn-button align="start" color="transparent" icon="languages@lu">Translate Missing</zn-button>
+    <zn-button align="start" color="transparent" icon="refresh-cw@lu">Regenerate Slug</zn-button>
+  </zn-form-actions>
+</form>
+```
+
 ### Targeting a Form by Id
 
 When the component can't live inside the form, point it at one with the `form` attribute.

package/package.json

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

package/scss/_global-spacing.scss

@@ -82,6 +82,13 @@ zn-form-group ~ zn-form-group {
   border-top: 1px solid rgb(var(--zn-border-color));
 }
 
+// zn-sp's divide draws its own line between the groups.
+zn-sp[divide] > zn-form-group ~ zn-form-group {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+
 
 .form-spacing > * {
   grid-column: span 6 / span 6;

package/src/components/confirm/confirm.component.ts

@@ -9,6 +9,17 @@ import ZnDialog from "../dialog";
 
 import styles from './confirm.scss';
 
+interface PageletAlert {
+  action?: string;
+  style?: string;
+  title?: string;
+}
+
+interface PageletResponse {
+  status?: number;
+  actions?: PageletAlert[];
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/confirm-modal
@@ -83,6 +94,12 @@ export default class ZnConfirm extends ZincElement {
   /** Internal loading state used when showLoading is enabled */
   @state() private loading: boolean = false;
 
+  @state() private failed: boolean = false;
+
+  @state() private failure: string = '';
+
+  private submitted: HTMLFormElement | null = null;
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
     if (this.open) {
@@ -116,15 +133,66 @@ export default class ZnConfirm extends ZincElement {
   show = (event: Event | undefined = undefined) => {
     const trigger = event?.target as HTMLButtonElement
     if (trigger?.disabled) return;
-    this.loading = false;
+    this.reset();
     this.dialog.show();
   }
 
   hide() {
-    this.loading = false;
+    this.reset();
     this.dialog.hide();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopWatching();
+  }
+
+  private reset() {
+    this.stopWatching();
+    this.loading = false;
+    this.failed = false;
+    this.failure = '';
+    if (this.dialog?.closer) {
+      this.dialog.closer.disabled = false;
+    }
+  }
+
+  private stopWatching() {
+    this.submitted?.removeEventListener('complete', this.settle);
+    this.submitted?.removeEventListener('error', this.settle);
+    this.submitted = null;
+  }
+
+  /**
+   * The console dispatches the pagelet lifecycle on the form it submitted. Without it the loading
+   * state only ends when a response happens to reload the page, so every failure hangs the dialog.
+   */
+  private settle = (event: Event) => {
+    const response = (event as CustomEvent<{ response?: PageletResponse }>).detail?.response;
+    this.stopWatching();
+    if (event.type === 'error' || this.responseFailed(response)) {
+      this.loading = false;
+      this.failed = true;
+      this.failure = this.alertTitle(response);
+      if (this.dialog?.closer) {
+        this.dialog.closer.disabled = false;
+      }
+      return;
+    }
+    this.hide();
+  }
+
+  private responseFailed(response?: PageletResponse): boolean {
+    if (!response) return true;
+    if ((response.status ?? 0) >= 400) return true;
+    return (response.actions ?? []).some(action => action.action === 'alert' && action.style === 'error');
+  }
+
+  private alertTitle(response?: PageletResponse): string {
+    const alert = (response?.actions ?? []).find(action => action.action === 'alert' && action.style === 'error');
+    return alert?.title ?? '';
+  }
+
 
   render() {
     const src = {
@@ -153,10 +221,11 @@ export default class ZnConfirm extends ZincElement {
           : ''}
 
         <div class="confirm-dialog__content">
-          ${!this.loading ? html`
+          ${this.loading ? html`Loading...` : this.failed ? html`
+            <strong>Failed</strong>
+            ${this.failure ? html`<p>${this.failure}</p>` : ''}` : html`
             ${this.content ? html`${this.content}` : ''}
-            <slot></slot>` : html`
-            Loading...`}
+            <slot></slot>`}
         </div>
 
         <zn-button outline color="${this.type}" slot="footer" dialog-closer disabled=${this.loading || nothing}>
@@ -196,12 +265,18 @@ export default class ZnConfirm extends ZincElement {
       document.dispatchEvent(new CustomEvent('zn-register-element', {
         detail: {element: form}
       }))
+      if (this.showLoading) {
+        this.failed = false;
+        this.failure = '';
+        this.loading = true;
+        this.dialog.closer.disabled = true;
+        this.submitted = form;
+        form.addEventListener('complete', this.settle);
+        form.addEventListener('error', this.settle);
+      }
       form.requestSubmit();
       if (!this.showLoading) {
         this.hide();
-      } else {
-        this.loading = true;
-        this.dialog.closer.disabled = true;
       }
     }
   }

package/src/components/confirm/confirm.test.ts

@@ -1,6 +1,38 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
 
+const click = (el: Element) => el.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+
+const settle = (form: HTMLFormElement, type: string, detail: unknown) =>
+  form.dispatchEvent(new CustomEvent(type, {detail}));
+
+async function submittedConfirm() {
+  const el = await fixture<HTMLElement>(html`
+    <div>
+      <zn-confirm caption="Deploy" show-loading>
+        <form action="/deploy" method="post"></form>
+      </zn-confirm>
+    </div>
+  `);
+  const confirm = el.querySelector('zn-confirm')!;
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  const form = confirm.querySelector('form')!;
+  form.addEventListener('submit', e => e.preventDefault());
+
+  (confirm as never as {show: () => void}).show();
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  const dialog = confirm.shadowRoot!.querySelector('zn-dialog')!;
+  const buttons = confirm.shadowRoot!.querySelectorAll('zn-button[slot="footer"]');
+  click(buttons[1]);
+  await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+  return {confirm, form, dialog, cancel: buttons[0] as HTMLElement & {disabled: boolean}};
+}
+
+const closer = (dialog: Element) => dialog.shadowRoot!.querySelector('.dialog__close')!;
+
 describe('<zn-confirm-modal>', () => {
   it('should render a component', async () => {
     const el = await fixture(html` <zn-confirm-modal></zn-confirm-modal> `);
@@ -22,4 +54,56 @@ describe('<zn-confirm-modal>', () => {
     // An unescaped `#id` selector throws a SyntaxError here, leaving the component unrendered.
     expect(confirm.shadowRoot!.querySelector('zn-dialog')).to.exist;
   });
+
+  it('shows loading until the submitted request settles', async () => {
+    const {confirm} = await submittedConfirm();
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Loading');
+  });
+
+  it('reports failure when the response carries a danger alert', async () => {
+    const {confirm, form, dialog, cancel} = await submittedConfirm();
+
+    settle(form, 'complete', {
+      response: {status: 200, actions: [{action: 'alert', style: 'error', title: 'Deployment stopped'}]}
+    });
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Failed');
+    expect(confirm.shadowRoot!.textContent).to.contain('Deployment stopped');
+    expect(confirm.shadowRoot!.textContent).to.not.contain('Loading');
+    expect(cancel.disabled).to.be.false;
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('reports failure when the request errors', async () => {
+    const {confirm, form, dialog} = await submittedConfirm();
+
+    settle(form, 'error', {});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.contain('Failed');
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('closes when the submitted request succeeds', async () => {
+    const {confirm, form, dialog} = await submittedConfirm();
+
+    settle(form, 'complete', {response: {status: 200, actions: [{action: 'alert', style: 'success', title: 'Deployed'}]}});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect((dialog as HTMLElement & {open: boolean}).open).to.be.false;
+    expect(closer(dialog).disabled).to.be.false;
+  });
+
+  it('clears a previous failure when reopened', async () => {
+    const {confirm, form} = await submittedConfirm();
+    settle(form, 'error', {});
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    (confirm as never as {show: () => void}).show();
+    await (confirm as never as {updateComplete: Promise<void>}).updateComplete;
+
+    expect(confirm.shadowRoot!.textContent).to.not.contain('Failed');
+  });
 });

package/src/components/form-actions/form-actions.component.ts

@@ -17,7 +17,9 @@ import styles from './form-actions.scss';
  *
  * @event zn-cancel - Emitted when the cancel button is clicked.
  *
- * @slot - Extra actions, placed before the buttons.
+ * @slot - Extra actions, placed before the buttons. `align="start"` on a child moves it to the start of the row; any
+ * number can sit on either side. Write them in the order they should be read — the sides are set by CSS ordering, so
+ * markup order is what a keyboard follows.
  *
  * @csspart cancel-button - The cancel button.
  * @csspart reset-button - The reset button.
@@ -81,6 +83,7 @@ export default class ZnFormActions extends ZincElement {
   render() {
     return html`
       <slot></slot>
+      <span class="form-actions__spacer"></span>
       ${this.withCancel ? html`
         <zn-button part="cancel-button" panel-bg modal-closer icon="${this.cancelIcon}" @click="${this.handleCancel}">
           ${this.cancelText}

package/src/components/form-actions/form-actions.scss

@@ -7,3 +7,20 @@
   align-items: center;
   gap: var(--zn-spacing-small);
 }
+
+// The spacer, not an auto margin, is what splits the two sides: an auto margin on every left-hand action would open
+// a gap between each of them, where one flexing element in the middle holds any number on either side together.
+.form-actions__spacer {
+  order: 1;
+  flex: 1 1 auto;
+}
+
+// Slotted extras and the built-in buttons share an order, so the two keep their markup order between them.
+::slotted(*),
+zn-button {
+  order: 2;
+}
+
+::slotted([align='start']) {
+  order: 0;
+}

package/src/components/form-actions/form-actions.test.ts

@@ -22,6 +22,26 @@ describe('<zn-form-actions>', () => {
     expect(await listener).to.exist;
   });
 
+  it('holds align="start" children left and the rest right, one gap apart on each side', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-form-actions with-cancel style="width: 600px">
+        <zn-button align="start" id="translate">Translate</zn-button>
+        <zn-button align="start" id="slug">Slug</zn-button>
+      </zn-form-actions>
+    `);
+    const row = el.getBoundingClientRect();
+    const translate = el.querySelector<HTMLElement>('#translate')!.getBoundingClientRect();
+    const slug = el.querySelector<HTMLElement>('#slug')!.getBoundingClientRect();
+    const cancel = el.shadowRoot!.querySelector<HTMLElement>('[part="cancel-button"]')!.getBoundingClientRect();
+    const submit = el.shadowRoot!.querySelector<HTMLElement>('[part="submit-button"]')!.getBoundingClientRect();
+
+    expect(translate.left).to.be.closeTo(row.left, 1);
+    expect(submit.right).to.be.closeTo(row.right, 1);
+    // Each side stays one gap apart rather than spreading across the free space.
+    expect(slug.left).to.be.closeTo(translate.right + 16, 1);
+    expect(submit.left).to.be.closeTo(cancel.right + 16, 1);
+  });
+
   it('should close a containing dialog when the cancel button is clicked', async () => {
     const dialog = await fixture<HTMLElement & { open: boolean }>(html`
       <zn-dialog open label="Test">