typo3-typescript-sources 14.3.5 → 14.3.6

package/dashboard/dashboard-wizard.ts

@@ -0,0 +1,86 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+import { customElement, query, state } from 'lit/decorators.js';
+import { html, LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import type { SubmissionServiceInterface } from '@typo3/backend/wizard/finisher/submission-service-interface';
+import type { WizardStepInterface } from '@typo3/backend/wizard/steps/wizard-step-interface';
+import type { DataStore, Wizard } from '@typo3/backend/wizard/wizard';
+import { AutoAdvanceEvent } from '@typo3/backend/wizard/events/auto-advance-event';
+import PresetStep from '@typo3/dashboard/wizard/steps/preset-step';
+import TitleStep from '@typo3/dashboard/wizard/steps/title-step';
+import { DashboardWizardSubmissionService } from '@typo3/dashboard/wizard/finisher/dashboard-wizard-submission-service';
+
+export interface DashboardWizardDataStore extends DataStore {
+  preset?: string;
+  title?: string;
+}
+
+type DashboardWizardDataStoreKey = keyof DashboardWizardDataStore;
+
+export interface DashboardWizardContext {
+  wizard: Wizard;
+  getStoreData: <T extends DashboardWizardDataStoreKey>(key: T) => NoInfer<DashboardWizardDataStore[T]>;
+  setStoreData: <T extends DashboardWizardDataStoreKey>(key: T, value: NoInfer<DashboardWizardDataStore[T]>) => void;
+  clearStoreData: <T extends DashboardWizardDataStoreKey>(key: T) => void;
+  getDataStore: () => Readonly<DashboardWizardDataStore>;
+  dispatchAutoAdvance: () => void;
+}
+
+@customElement('typo3-dashboard-wizard')
+export class DashboardWizard extends LitElement {
+  @state() steps: WizardStepInterface[] = [];
+  @state() submissionService: SubmissionServiceInterface;
+
+  @query('typo3-backend-wizard') wizard!: Wizard;
+
+  private context: DashboardWizardContext;
+
+  protected override firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+
+    this.context = {
+      wizard: this.wizard,
+      getStoreData: this.wizard.getStoreData.bind(this.wizard),
+      setStoreData: this.wizard.setStoreData.bind(this.wizard),
+      clearStoreData: this.wizard.clearStoreData.bind(this.wizard),
+      getDataStore: this.wizard.getDataStore.bind(this.wizard),
+      dispatchAutoAdvance: () => this.wizard.dispatchEvent(new AutoAdvanceEvent())
+    };
+
+    this.steps = [
+      new PresetStep(this.context),
+      new TitleStep(this.context),
+    ];
+
+    this.submissionService = new DashboardWizardSubmissionService(this.context);
+  }
+
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <typo3-backend-wizard .steps="${this.steps}"
+                            .submissionService="${this.submissionService}"
+                            skip-summary
+      ></typo3-backend-wizard>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'typo3-dashboard-wizard': DashboardWizard;
+  }
+}

package/dashboard/dashboard.ts

@@ -22,7 +22,7 @@ import '@typo3/backend/element/icon-element';
 import AjaxRequest from '@typo3/core/ajax/ajax-request';
 import ClientStorage from '@typo3/backend/storage/client';
 import { delay } from '@typo3/core/lit-helper';
-import Modal, { type ModalElement } from '@typo3/backend/modal';
+import Modal, { type ModalElement, Size } from '@typo3/backend/modal';
 import { SeverityEnum } from '@typo3/backend/enum/severity';
 import { AjaxResponse } from '@typo3/core/ajax/ajax-response';
 import { Categories, type DataCategoriesInterface, type NewRecordWizardItemSelectedEventInterface } from '@typo3/backend/new-record-wizard';
@@ -49,7 +49,7 @@ interface DashboardInterface {
   widgetPositions: Record<number, DashboardWidgetPosition[]>
 }
 
-interface DashboardPresetInterface {
+export interface DashboardPresetInterface {
   identifier: string;
   title: string;
   description: string;
@@ -154,7 +154,7 @@ class DashboardWidgetRefreshEvent extends Event {
   }
 }
 
-class DashboardAddEvent extends Event {
+export class DashboardAddEvent extends Event {
   static readonly eventName = 'typo3:dashboard:dashboard:add';
 
   constructor(
@@ -446,6 +446,8 @@ export class Dashboard extends LitElement {
     this.mql = window.matchMedia('(prefers-reduced-motion: reduce)');
     this.mqListener(this.mql);
     this.mql.addEventListener('change', this.mqListener);
+
+    document.addEventListener(DashboardAddEvent.eventName, this.relayAddDashboardEvent);
   }
 
   public override disconnectedCallback() {
@@ -456,6 +458,8 @@ export class Dashboard extends LitElement {
 
     this.mql?.removeEventListener('change', this.mqListener);
     this.mql = null;
+
+    document.removeEventListener(DashboardAddEvent.eventName, this.relayAddDashboardEvent);
   }
 
   protected readonly mqListener = (mql: MediaQueryList|MediaQueryListEvent): void => {
@@ -496,6 +500,16 @@ export class Dashboard extends LitElement {
     `;
   }
 
+  /**
+   * Relays the cross-frame add broadcast (dispatched on `document` by the
+   * wizard finisher) onto the element, so it is handled alongside the other
+   * dashboard events. A fresh event is created because an in-flight event
+   * cannot be re-dispatched.
+   */
+  private readonly relayAddDashboardEvent = (event: DashboardAddEvent): void => {
+    this.dispatchEvent(new DashboardAddEvent(event.preset, event.title));
+  };
+
   private async load(): Promise<void> {
     this.loading = true;
     this.dashboards = await this.fetchDashboards();
@@ -514,11 +528,6 @@ export class Dashboard extends LitElement {
     }
   }
 
-  private async fetchPresets(): Promise<DashboardPresetInterface[]> {
-    const data = await this.fetchData(TYPO3.settings.ajaxUrls.dashboard_presets_get);
-    return Object.values(data);
-  }
-
   private async fetchCategories(): Promise<Categories> {
     const data = await this.fetchData(TYPO3.settings.ajaxUrls.dashboard_categories_get);
     return Categories.fromData(data as DataCategoriesInterface);
@@ -538,79 +547,19 @@ export class Dashboard extends LitElement {
   }
 
   private async createDashboard(): Promise<void> {
-    const presets = await this.fetchPresets();
-    const filteredPresets = presets.filter(preset => preset.showInWizard);
-
-    const content = html`
-      <form>
-        <div class="form-group">
-          <label class="form-label" for="dashboard-form-add-title">${labels.get('dashboard.title')}</label>
-          <input class="form-control" id="dashboard-form-add-title" type="text" name="title" required="required">
-        </div>
-        <div class="dashboard-modal-items">
-          ${repeat(filteredPresets, (preset: DashboardPresetInterface) => preset.identifier, (preset: DashboardPresetInterface, index: number) => html`
-            <div class="dashboard-modal-item">
-              <input
-                type="radio"
-                name="preset"
-                value=${preset.identifier}
-                class="dashboard-modal-item-checkbox"
-                id="dashboard-form-add-preset-${preset.identifier}"
-                ?checked=${index === 0}
-              >
-              <label for="dashboard-form-add-preset-${preset.identifier}" class="dashboard-modal-item-block">
-                <span class="dashboard-modal-item-icon">
-                  <typo3-backend-icon identifier=${preset.icon} size="medium"></typo3-backend-icon>
-                </span>
-                <span class="dashboard-modal-item-details">
-                  <span class="dashboard-modal-item-title">${preset.title}</span>
-                  <span class="dashboard-modal-item-description">${preset.description}</span>
-                </span>
-              </label>
-            </div>
-          `)}
-        </div>
-      </form>
-    `;
+    await topLevelModuleImport('@typo3/dashboard/dashboard-wizard.js');
 
     Modal.advanced({
       type: Modal.types.default,
       title: labels.get('dashboard.add'),
-      size: Modal.sizes.medium,
-      severity: SeverityEnum.notice,
-      content,
-      callback: (currentModal: ModalElement): void => {
-
-        currentModal.addEventListener('typo3-modal-shown', (): void => {
-          (currentModal.querySelector('#dashboard-form-add-title') as HTMLInputElement)?.focus();
-        });
-
-        currentModal.querySelector('form').addEventListener('submit', (e: Event): void => {
-          e.preventDefault();
-          const form = e.target as HTMLFormElement;
-          const formData = new FormData(form);
-          this.dispatchEvent(new DashboardAddEvent(
-            formData.get('preset') as string,
-            formData.get('title') as string,
-          ));
-          currentModal.hideModal();
-        });
-
+      size: {
+        width: Size.default,
+        height: Size.small,
       },
-      buttons: [
-        {
-          text: labels.get('dashboard.add.button.close'),
-          btnClass: 'btn-default',
-          name: 'cancel',
-          trigger: (e, modal) => modal.hideModal(),
-        },
-        {
-          text: labels.get('dashboard.add.button.ok'),
-          btnClass: 'btn-primary',
-          name: 'save',
-          trigger: (e, modal) => modal.querySelector('form').requestSubmit(),
-        },
-      ]
+      severity: SeverityEnum.notice,
+      staticBackdrop: true,
+      content: html`<typo3-dashboard-wizard></typo3-dashboard-wizard>`,
+      buttons: [],
     });
   }
 
@@ -1566,6 +1515,9 @@ declare global {
     'typo3-dashboard': Dashboard;
     'typo3-dashboard-widget': DashboardWidget;
   }
+  interface DocumentEventMap {
+    [DashboardAddEvent.eventName]: DashboardAddEvent;
+  }
   interface HTMLElementEventMap {
     [DashboardWidgetContentRenderedEvent.eventName]: DashboardWidgetContentRenderedEvent;
     [DashboardWidgetMoveIntendEvent.eventName]: DashboardWidgetMoveIntendEvent;

package/dashboard/wizard/finisher/dashboard-wizard-submission-service.ts

@@ -0,0 +1,43 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import type { SubmissionServiceInterface } from '@typo3/backend/wizard/finisher/submission-service-interface';
+import type { FinisherResult } from '@typo3/backend/wizard/finisher/finisher-result';
+import type { DashboardWizardContext } from '@typo3/dashboard/dashboard-wizard';
+import { DashboardAddEvent } from '@typo3/dashboard/dashboard';
+import labels from '~labels/dashboard.messages';
+
+export class DashboardWizardSubmissionService implements SubmissionServiceInterface {
+
+  constructor(private readonly context: DashboardWizardContext) {
+  }
+
+  async execute(): Promise<FinisherResult> {
+    const { preset, title } = this.context.getDataStore();
+
+    return {
+      success: true,
+      finisher: {
+        identifier: 'event',
+        module: '@typo3/backend/wizard/finisher/event-finisher.js',
+        data: {
+          event: new DashboardAddEvent(preset ?? '', title ?? ''),
+        },
+        labels: {
+          successTitle: labels.get('dashboard.wizard.success.title'),
+          successDescription: labels.get('dashboard.wizard.success.message'),
+        }
+      }
+    };
+  }
+}

package/dashboard/wizard/steps/preset-step.ts

@@ -0,0 +1,164 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, type TemplateResult } from 'lit';
+import { live } from 'lit/directives/live.js';
+import { Task, TaskStatus } from '@lit/task';
+import type { WizardStepInterface } from '@typo3/backend/wizard/steps/wizard-step-interface';
+import type { WizardStepValueInterface } from '@typo3/backend/wizard/steps/wizard-step-value-interface';
+import type { WizardStepSummaryInterface } from '@typo3/backend/wizard/steps/wizard-step-summary-interface';
+import type { WizardStepAfterRenderInterface } from '@typo3/backend/wizard/steps/wizard-step-after-render-interface';
+import type { SummaryItem } from '@typo3/backend/wizard/steps/summary-item-interface';
+import AjaxRequest from '@typo3/core/ajax/ajax-request';
+import type { DashboardWizardContext } from '@typo3/dashboard/dashboard-wizard';
+import type { DashboardPresetInterface } from '@typo3/dashboard/dashboard';
+import labels from '~labels/dashboard.messages';
+
+export class PresetStep implements WizardStepInterface, WizardStepValueInterface, WizardStepSummaryInterface, WizardStepAfterRenderInterface {
+  readonly key = 'preset';
+  readonly title = labels.get('dashboard.wizard.preset.title');
+  readonly autoAdvance = true;
+
+  private task: Task<[], DashboardPresetInterface[]>;
+  private selectedPreset: string | null = null;
+  private hasDispatchedAutoAdvance: boolean = false;
+
+  constructor(private readonly context: DashboardWizardContext) {
+    this.initPresetsTask();
+  }
+
+  public isComplete(): boolean {
+    return this.getValue() !== null;
+  }
+
+  public render(): TemplateResult {
+    if (this.task.status === TaskStatus.INITIAL) {
+      this.task.run();
+    }
+
+    return this.task.render({
+      complete: (presets: DashboardPresetInterface[]) => {
+        let shouldAutoAdvance = false;
+
+        // Initialize from store, otherwise preselect the first preset
+        if (this.getValue() === null) {
+          const storedValue = this.context.getStoreData(this.key);
+          if (storedValue != null) {
+            this.setValue(storedValue);
+          } else if (presets.length > 0) {
+            this.setValue(presets[0].identifier);
+            shouldAutoAdvance = presets.length === 1;
+          }
+        }
+
+        if (shouldAutoAdvance && !this.hasDispatchedAutoAdvance) {
+          this.hasDispatchedAutoAdvance = true;
+          this.context.dispatchAutoAdvance();
+          return this.context.wizard.renderLoader();
+        }
+
+        return html`
+          <div class="dashboard-wizard-preset">
+            <h2 class="h4">${labels.get('dashboard.wizard.preset.headline')}</h2>
+            <div class="form-check-card-container">
+              ${presets.map((preset: DashboardPresetInterface) => html`
+                <div class="form-check form-check-type-card">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="preset"
+                    id="preset-${preset.identifier}"
+                    value="${preset.identifier}"
+                    .checked="${live(this.getValue() === preset.identifier)}"
+                    @change="${() => this.setValue(preset.identifier)}"
+                  >
+                  <label class="form-check-label" for="preset-${preset.identifier}">
+                    <span class="form-check-label-header form-check-label-header-inherit">
+                      <typo3-backend-icon identifier="${preset.icon}" size="small"></typo3-backend-icon>
+                      ${preset.title}
+                    </span>
+                    <span class="form-check-label-body">${preset.description}</span>
+                  </label>
+                </div>
+              `)}
+            </div>
+          </div>
+        `;
+      },
+      error: (error: unknown) => this.context.wizard.renderError(labels.get('dashboard.wizard.preset.loadError'), error),
+      pending: () => this.context.wizard.renderLoader()
+    });
+  }
+
+  public reset(): void {
+    this.selectedPreset = null;
+    this.context.clearStoreData(this.key);
+    this.initPresetsTask();
+  }
+
+  public getValue(): string {
+    return this.selectedPreset;
+  }
+
+  public setValue(value: string): void {
+    this.selectedPreset = value;
+    this.context.wizard.requestUpdate();
+  }
+
+  public beforeAdvance(): void {
+    this.context.setStoreData(this.key, this.getValue());
+  }
+
+  public getSummaryData(): SummaryItem[] {
+    const selectedIdentifier = this.context.getStoreData(this.key);
+    if (!selectedIdentifier || !this.task.value) {
+      return [];
+    }
+
+    const selectedPreset = this.task.value.find((preset: DashboardPresetInterface) => preset.identifier === selectedIdentifier);
+    if (!selectedPreset) {
+      return [];
+    }
+
+    return [{
+      label: this.title,
+      value: html`
+        <typo3-backend-icon identifier="${selectedPreset.icon}" size="small" class="me-1"></typo3-backend-icon>
+        ${selectedPreset.title}
+      `
+    }];
+  }
+
+  public async afterRender(): Promise<void> {
+    // Presets load asynchronously; signal readiness so the wizard moves focus
+    // (onto the selected preset) only once they are rendered.
+    try {
+      await this.task.taskComplete;
+    } catch {
+      // ignore — the error state is rendered by the step
+    }
+  }
+
+  private initPresetsTask(): void {
+    this.task = new Task(this.context.wizard, {
+      task: async (): Promise<DashboardPresetInterface[]> => {
+        const response = await new AjaxRequest(TYPO3.settings.ajaxUrls.dashboard_presets_get).get({ cache: 'no-cache' });
+        const data = await response.resolve();
+        return Object.values(data as Record<string, DashboardPresetInterface>).filter((preset: DashboardPresetInterface) => preset.showInWizard);
+      },
+      autoRun: false
+    });
+  }
+}
+
+export default PresetStep;

package/dashboard/wizard/steps/title-step.ts

@@ -0,0 +1,90 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with this source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+import { html, type TemplateResult } from 'lit';
+import { live } from 'lit/directives/live.js';
+import type { WizardStepInterface } from '@typo3/backend/wizard/steps/wizard-step-interface';
+import type { WizardStepValueInterface } from '@typo3/backend/wizard/steps/wizard-step-value-interface';
+import type { WizardStepSummaryInterface } from '@typo3/backend/wizard/steps/wizard-step-summary-interface';
+import type { SummaryItem } from '@typo3/backend/wizard/steps/summary-item-interface';
+import type { DashboardWizardContext } from '@typo3/dashboard/dashboard-wizard';
+import labels from '~labels/dashboard.messages';
+
+export class TitleStep implements WizardStepInterface, WizardStepValueInterface, WizardStepSummaryInterface {
+  readonly key = 'title';
+  readonly title = labels.get('dashboard.wizard.title.title');
+  readonly autoAdvance = false;
+
+  private titleValue: string = '';
+
+  constructor(private readonly context: DashboardWizardContext) {
+  }
+
+  public isComplete(): boolean {
+    return this.getValue().trim() !== '';
+  }
+
+  public render(): TemplateResult {
+    if (this.titleValue === '') {
+      this.titleValue = this.context.getStoreData(this.key) ?? '';
+    }
+
+    return html`
+      <div class="dashboard-wizard-title">
+        <div class="form-group">
+          <label class="form-label" for="dashboard-wizard-title-input">${labels.get('dashboard.title')}</label>
+          <input
+            type="text"
+            id="dashboard-wizard-title-input"
+            class="form-control"
+            required="required"
+            .value="${live(this.titleValue)}"
+            @input="${(event: InputEvent) => this.setValue((event.target as HTMLInputElement).value)}"
+          >
+        </div>
+      </div>
+    `;
+  }
+
+  public reset(): void {
+    this.titleValue = '';
+    this.context.clearStoreData(this.key);
+  }
+
+  public getValue(): string {
+    return this.titleValue;
+  }
+
+  public setValue(value: string): void {
+    this.titleValue = value;
+    this.context.wizard.requestUpdate();
+  }
+
+  public beforeAdvance(): void {
+    this.context.setStoreData(this.key, this.getValue());
+  }
+
+  public getSummaryData(): SummaryItem[] {
+    const title = this.context.getStoreData(this.key);
+    if (!title) {
+      return [];
+    }
+
+    return [{
+      label: this.title,
+      value: title
+    }];
+  }
+}
+
+export default TitleStep;

package/form/backend/form-editor/core.ts

@@ -720,17 +720,30 @@ function extendModel<D extends object, T extends ModelData<D>>(
     modelToExtend.set(pathPrefix, modelExtension, disablePublishersOnSet);
   } else {
     const _modelExtension = { ...modelExtension } as Record<string, T | [] | Record<string, never>>;
-    for (const key of Object.keys(_modelExtension)) {
-      const path = (pathPrefix === '') ? key : pathPrefix + '.' + key;
 
-      modelToExtend.on(path, 'core/formElement/somePropertyChanged');
+    // A "leaf map" is an object whose values are all scalars (e.g. select
+    // options or finisher recipients keyed by their value). Its keys may
+    // contain dots (e.g. email addresses used as recipient keys) and must
+    // therefore be stored as a whole, otherwise Model.set() would split the
+    // key into a nested object path and thus corrupt the data.
+    const isLeafMap = pathPrefix !== '' && Object.values(_modelExtension).every(
+      (value) => value === null || typeof value !== 'object'
+    );
 
-      if (_modelExtension[key] !== null && (typeof (_modelExtension[key]) === 'object' || Array.isArray(_modelExtension[key]))) {
-        extendModel(modelToExtend, _modelExtension[key], path, disablePublishersOnSet);
-      } else if (pathPrefix === 'properties.options') {
-        modelToExtend.set(pathPrefix, modelExtension, disablePublishersOnSet);
-      } else {
-        modelToExtend.set(path, _modelExtension[key], disablePublishersOnSet);
+    if (isLeafMap) {
+      modelToExtend.on(pathPrefix, 'core/formElement/somePropertyChanged');
+      modelToExtend.set(pathPrefix, modelExtension, disablePublishersOnSet);
+    } else {
+      for (const key of Object.keys(_modelExtension)) {
+        const path = (pathPrefix === '') ? key : pathPrefix + '.' + key;
+
+        modelToExtend.on(path, 'core/formElement/somePropertyChanged');
+
+        if (_modelExtension[key] !== null && (typeof (_modelExtension[key]) === 'object' || Array.isArray(_modelExtension[key]))) {
+          extendModel(modelToExtend, _modelExtension[key], path, disablePublishersOnSet);
+        } else {
+          modelToExtend.set(path, _modelExtension[key], disablePublishersOnSet);
+        }
       }
     }
   }