Merge pull request #197 from Foxy/beta

chore: release 1.37.0
Foxy · Jan 23, 2025 · f587538 · f587538
2 parents cc06da6 + 43ce36a
commit f587538
Show file tree

Hide file tree

Showing 44 changed files with 1,804 additions and 1,307 deletions.
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.test.ts
diff --git a/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts b/src/elements/internal/InternalAsyncListControl/InternalAsyncListControl.ts
diff --git a/src/elements/internal/InternalAsyncListControl/index.ts b/src/elements/internal/InternalAsyncListControl/index.ts
@@ -3,6 +3,8 @@ import '@vaadin/vaadin-checkbox';
 import '@vaadin/vaadin-overlay';
 import '@vaadin/vaadin-button';
 
+import '../../internal/InternalSummaryControl/index';
+
 import '../../public/CollectionPage/index';
 import '../../public/SwipeActions/index';
 import '../../public/FormDialog/index';

diff --git a/src/elements/internal/InternalDateControl/InternalDateControl.ts b/src/elements/internal/InternalDateControl/InternalDateControl.ts
@@ -43,7 +43,7 @@ export class InternalDateControl extends InternalEditableControl {
       } else if (this.format === 'iso-long') {
         value = serializeDate(new Date(this._value as string));
       } else {
-        value = this._value as string;
+        value = ((this._value as string | null) ?? '').substring(0, 10);
       }
     }
 

diff --git a/src/elements/internal/InternalEditableControl/InternalEditableControl.ts b/src/elements/internal/InternalEditableControl/InternalEditableControl.ts
@@ -100,8 +100,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set placeholder(newValue: string) {
-    this.requestUpdate('placeholder', this.__placeholder);
+    const oldValue = this.__placeholder;
     this.__placeholder = newValue;
+    this.requestUpdate('placeholder', oldValue);
   }
 
   /**
@@ -114,8 +115,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set helperText(newValue: string) {
-    this.requestUpdate('helperText', this.__helperText);
+    const oldValue = this.__helperText;
     this.__helperText = newValue;
+    this.requestUpdate('helperText', oldValue);
   }
 
   /**
@@ -130,8 +132,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set v8nPrefix(newValue: string) {
-    this.requestUpdate('v8nPrefix', this.__v8nPrefix);
+    const oldValue = this.__v8nPrefix;
     this.__v8nPrefix = newValue;
+    this.requestUpdate('v8nPrefix', oldValue);
   }
 
   /**
@@ -146,8 +149,9 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set property(newValue: string) {
-    this.requestUpdate('property', this.__property);
+    const oldValue = this.__property;
     this.__property = newValue;
+    this.requestUpdate('property', oldValue);
   }
 
   /**
@@ -159,38 +163,44 @@ export class InternalEditableControl extends InternalControl {
   }
 
   set label(newValue: string) {
-    this.requestUpdate('label', this.__label);
+    const oldValue = this.__label;
     this.__label = newValue;
+    this.requestUpdate('label', oldValue);
   }
 
   /** Restores the default placeholder translation. */
   resetPlaceholder(): void {
-    this.requestUpdate('placeholder', this.__placeholder);
+    const oldValue = this.__placeholder;
     this.__placeholder = null;
+    this.requestUpdate('placeholder', oldValue);
   }
 
   /** Restores the default helper text translation. */
   resetHelperText(): void {
-    this.requestUpdate('helperText', this.__helperText);
+    const oldValue = this.__helperText;
     this.__helperText = null;
+    this.requestUpdate('helperText', oldValue);
   }
 
   /** Restores the default v8n prefix for errors. */
   resetV8nPrefix(): void {
-    this.requestUpdate('v8nPrefix', this.__v8nPrefix);
+    const oldValue = this.__v8nPrefix;
     this.__v8nPrefix = null;
+    this.requestUpdate('v8nPrefix', oldValue);
   }
 
   /** Restores the default property name. */
   resetProperty(): void {
-    this.requestUpdate('property', this.__property);
+    const oldValue = this.__property;
     this.__property = null;
+    this.requestUpdate('property', oldValue);
   }
 
   /** Restores the default label translation. */
   resetLabel(): void {
-    this.requestUpdate('label', this.__label);
+    const oldValue = this.__label;
     this.__label = null;
+    this.requestUpdate('label', oldValue);
   }
 
   reportValidity(): void {

diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.test.ts
@@ -9,6 +9,7 @@ import { FormDialog } from '../../public/FormDialog/FormDialog';
 import { Type } from '../../public/QueryBuilder/types';
 import { stub } from 'sinon';
 import { createRouter } from '../../../server';
+import { getTestData } from '../../../testgen/getTestData';
 
 async function waitForIdle(element: Control) {
   await waitUntil(
@@ -443,12 +444,15 @@ describe('InternalResourcePickerControl', () => {
   });
 
   it('renders View link in standalone layout when value is set and getItemUrl is defined', async () => {
+    const getItemUrl = stub().returns('https://example.com/hapi/customers/0');
+    const router = createRouter();
     const control = await fixture<Control>(html`
       <foxy-internal-resource-picker-control
         infer=""
         first="https://demo.api/hapi/customers"
         item="foxy-customer-card"
-        .getItemUrl=${(value: string) => value.replace('demo.api', 'example.com')}
+        .getItemUrl=${getItemUrl}
+        @fetch=${(evt: FetchEvent) => router.handleEvent(evt)}
       >
       </foxy-internal-resource-picker-control>
     `);
@@ -458,13 +462,21 @@ describe('InternalResourcePickerControl', () => {
 
     control.getValue = () => 'https://demo.api/hapi/customers/0';
     await control.requestUpdate();
+    await waitForIdle(control);
+    await control.requestUpdate();
+
     linkText = control.renderRoot.querySelector('[key="view"]');
     expect(linkText).to.exist;
     expect(linkText).to.have.attribute('infer', '');
 
     const viewLink = linkText?.closest('a');
     expect(viewLink).to.exist;
     expect(viewLink).to.have.attribute('href', 'https://example.com/hapi/customers/0');
+
+    const customer = await getTestData('./hapi/customers/0', router);
+    getItemUrl.resetHistory();
+    await control.requestUpdate();
+    expect(getItemUrl).to.have.been.calledWith('https://demo.api/hapi/customers/0', customer);
   });
 
   it('renders Copy ID button in standalone layout when value is set and showCopyIdButton is true', async () => {

diff --git a/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts b/src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts
@@ -42,7 +42,7 @@ export class InternalResourcePickerControl extends InternalEditableControl {
 
   virtualHost = uniqueId('internal-resource-picker-control-');
 
-  getItemUrl: ((href: string) => string) | null = null;
+  getItemUrl: ((href: string, data: unknown | null) => string) | null = null;
 
   formProps: Record<string, unknown> = {};
 
@@ -185,18 +185,22 @@ export class InternalResourcePickerControl extends InternalEditableControl {
   }
 
   private __renderStandaloneLayout() {
-    const selectionUrl = typeof this._value === 'string' ? this.getItemUrl?.(this._value) : void 0;
+    const valueLoader = this.__valueLoader;
     const selectionId = typeof this._value === 'string' ? getResourceId(this._value) : void 0;
+    const selectionUrl =
+      typeof this._value === 'string'
+        ? this.getItemUrl?.(this._value, valueLoader?.data ?? null)
+        : void 0;
 
     return html`
       <div class="block group">
         <div
           class=${classMap({
-            'flex items-center gap-m transition-colors font-medium text-l': true,
+            'flex items-center gap-s transition-colors font-medium': true,
             'text-disabled': this.disabled,
           })}
         >
-          <span class="mr-auto">${this.label}</span>
+          <span class="mr-auto text-l">${this.label}</span>
           ${selectionUrl
             ? html`
                 <a
@@ -252,28 +256,36 @@ export class InternalResourcePickerControl extends InternalEditableControl {
           }}
         >
           <div class=${classMap({ 'transition-opacity': true, 'opacity-50': this.disabled })}>
-            ${this.__getItemRenderer(this.item)({
-              html,
-              data: null,
-              href: (this._value as string | undefined) || '',
-              related: [],
-              parent: '',
-              props: {},
-              spread: spread,
-              simplifyNsLoading: this.simplifyNsLoading,
-              disabled: this.disabled,
-              disabledControls: this.disabledControls,
-              readonly: this.readonly,
-              readonlyControls: this.readonlyControls,
-              hidden: this.hidden,
-              hiddenControls: this.hiddenControls,
-              templates: this.templates,
-              previous: null,
-              next: null,
-              group: this.nucleon?.group ?? '',
-              lang: this.lang,
-              ns: this.ns,
-            })}
+            <foxy-nucleon
+              class="block"
+              infer=""
+              href=${ifDefined(this._value || void 0)}
+              id="valueLoader"
+              @update=${() => this.requestUpdate()}
+            >
+              ${this.__getItemRenderer(this.item)({
+                html,
+                data: valueLoader?.data ?? null,
+                href: (this._value as string | undefined) || '',
+                related: [],
+                parent: '',
+                props: {},
+                spread: spread,
+                simplifyNsLoading: this.simplifyNsLoading,
+                disabled: this.disabled,
+                disabledControls: this.disabledControls,
+                readonly: this.readonly,
+                readonlyControls: this.readonlyControls,
+                hidden: this.hidden,
+                hiddenControls: this.hiddenControls,
+                templates: this.templates,
+                previous: null,
+                next: null,
+                group: this.nucleon?.group ?? '',
+                lang: this.lang,
+                ns: this.ns,
+              })}
+            </foxy-nucleon>
           </div>
         </button>
 
@@ -321,4 +333,9 @@ export class InternalResourcePickerControl extends InternalEditableControl {
       })
     );
   }
+
+  private get __valueLoader() {
+    type Loader = NucleonElement<any>;
+    return this.renderRoot.querySelector<Loader>('#valueLoader');
+  }
 }
diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.test.ts
@@ -25,6 +25,11 @@ describe('InternalSummaryControl', () => {
     expect(new Control()).to.have.property('layout', null);
   });
 
+  it('has a reactive property "count" that defaults to null', () => {
+    expect(Control).to.have.deep.nested.property('properties.count', { type: Number });
+    expect(new Control()).to.have.property('count', null);
+  });
+
   it('has a reactive property "open" that defaults to false', () => {
     expect(Control).to.have.deep.nested.property('properties.open', { type: Boolean });
     expect(new Control()).to.have.property('open', false);
@@ -48,6 +53,19 @@ describe('InternalSummaryControl', () => {
     expect(control.renderRoot).to.include.text('Foo bar');
   });
 
+  it('renders count in label if .count is set and layout is "details"', async () => {
+    const control = await fixture<Control>(html`
+      <foxy-internal-summary-control layout="details" label="Test"></foxy-internal-summary-control>
+    `);
+
+    expect(control.renderRoot).to.include.text('Test');
+    expect(control.renderRoot).to.not.include.text('Test (123)');
+
+    control.count = 123;
+    await control.requestUpdate();
+    expect(control.renderRoot).to.include.text('Test (123)');
+  });
+
   it('renders helper text in default layout', async () => {
     const control = await fixture<Control>(html`
       <foxy-internal-summary-control></foxy-internal-summary-control>

diff --git a/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts b/src/elements/internal/InternalSummaryControl/InternalSummaryControl.ts
@@ -9,6 +9,7 @@ export class InternalSummaryControl extends InternalEditableControl {
     return {
       ...super.properties,
       layout: {},
+      count: { type: Number },
       open: { type: Boolean },
     };
   }
@@ -35,6 +36,8 @@ export class InternalSummaryControl extends InternalEditableControl {
 
   layout: null | 'section' | 'details' = null;
 
+  count: number | null = null;
+
   open = false;
 
   renderLightDom(): void {
@@ -50,7 +53,7 @@ export class InternalSummaryControl extends InternalEditableControl {
           @toggle=${(evt: Event) => {
             const details = evt.currentTarget as HTMLDetailsElement;
             this.open = details.open;
-            if (!evt.composed) this.dispatchEvent(new CustomEvent('toggle'));
+            if (!evt.composed && !evt.bubbles) this.dispatchEvent(new CustomEvent('toggle'));
           }}
         >
           <summary class="select-none cursor-pointer focus-outline-none group">
@@ -63,7 +66,9 @@ export class InternalSummaryControl extends InternalEditableControl {
                 class="font-medium uppercase text-s tracking-wider flex items-center justify-between gap-s"
                 ?hidden=${!this.label}
               >
-                <span>${this.label}</span>
+                <span>
+                  ${this.label}${typeof this.count === 'number' ? ` (${this.count})` : ''}
+                </span>
                 <span
                   class="flex items-center justify-center transition-colors text-tertiary group-hover-text-body"
                   style="transform: scale(1.35)"

diff --git a/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts b/src/elements/public/EmailTemplateForm/EmailTemplateForm.stories.ts
@@ -30,10 +30,12 @@ const summary: Summary = {
 
 export default getMeta(summary);
 
-export const Playground = getStory({ ...summary, code: true });
-export const Empty = getStory(summary);
-export const Error = getStory(summary);
-export const Busy = getStory(summary);
+const ext = `default-subject="Receipt ({{ order_id }})"`;
+
+export const Playground = getStory({ ...summary, ext, code: true });
+export const Empty = getStory({ ...summary, ext });
+export const Error = getStory({ ...summary, ext });
+export const Busy = getStory({ ...summary, ext });
 
 Empty.args.href = '';
 Error.args.href = 'https://demo.api/virtual/empty?status=404';

diff --git a/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts b/src/elements/public/EmailTemplateForm/EmailTemplateForm.test.ts
@@ -43,6 +43,13 @@ describe('EmailTemplateForm', () => {
     expect(customElements.get('foxy-email-template-form')).to.equal(Form);
   });
 
+  it('has a reactive property "defaultSubject"', () => {
+    expect(new Form()).to.have.property('defaultSubject', null);
+    expect(Form.properties).to.have.deep.property('defaultSubject', {
+      attribute: 'default-subject',
+    });
+  });
+
   it('extends foxy-internal-form', () => {
     expect(new Form()).to.be.instanceOf(customElements.get('foxy-internal-form'));
   });
@@ -193,6 +200,15 @@ describe('EmailTemplateForm', () => {
     control?.setValue(true);
     expect(control?.getValue()).to.be.true;
     expect(form.form.subject).to.equal('general.subject.default_value');
+
+    control?.setValue(false);
+    expect(control?.getValue()).to.be.false;
+    expect(form.form.subject).to.equal('');
+
+    form.defaultSubject = 'Receipt ({{ order_id }})';
+    control?.setValue(true);
+    expect(control?.getValue()).to.be.true;
+    expect(form.form.subject).to.equal('Receipt ({{ order_id }})');
   });
 
   it('renders a text control for Subject in General summary', async () => {