@nuraly/runtime 0.1.7 → 0.1.9

package/components/ui/components/base/FormRegisterable.ts

@@ -0,0 +1,83 @@
+/**
+ * @file FormRegisterable.ts
+ * @description Mixin for input blocks that need to register with parent forms.
+ * This enables form field discovery across Shadow DOM boundaries.
+ */
+
+import { LitElement } from "lit";
+
+export interface FormRegisterableElement extends LitElement {
+  inputHandlersValue?: any;
+  inputRef?: { value: HTMLElement | null };
+}
+
+/**
+ * Dispatches a field registration event to the parent form-block.
+ * Uses composed: true to cross Shadow DOM boundaries.
+ */
+export function registerWithParentForm(
+  element: FormRegisterableElement,
+  nrElement: HTMLElement | null
+): void {
+  const name = element.inputHandlersValue?.name;
+
+  if (!name || !nrElement) {
+    return;
+  }
+
+  element.dispatchEvent(new CustomEvent('nr-field-register', {
+    bubbles: true,
+    composed: true,
+    detail: {
+      element: nrElement,
+      name: name,
+      blockElement: element
+    }
+  }));
+}
+
+/**
+ * Dispatches a field unregistration event to the parent form-block.
+ */
+export function unregisterFromParentForm(
+  element: FormRegisterableElement
+): void {
+  const name = element.inputHandlersValue?.name;
+
+  if (!name) {
+    return;
+  }
+
+  element.dispatchEvent(new CustomEvent('nr-field-unregister', {
+    bubbles: true,
+    composed: true,
+    detail: {
+      name: name,
+      blockElement: element
+    }
+  }));
+}
+
+/**
+ * Dispatches a field value change event to the parent form-block.
+ */
+export function notifyFieldValueChange(
+  element: FormRegisterableElement,
+  value: any
+): void {
+  const name = element.inputHandlersValue?.name;
+
+  if (!name) {
+    return;
+  }
+
+  element.dispatchEvent(new CustomEvent('nr-field-value-change', {
+    bubbles: true,
+    composed: true,
+    detail: {
+      name: name,
+      value: value,
+      blockElement: element
+    }
+  }));
+}

package/components/ui/components/base/controllers/DragDropController.ts

@@ -0,0 +1,175 @@
+/**
+ * @file DragDropController.ts
+ * @description Controller for handling drag and drop interactions in editor mode
+ * Manages drag wrappers and drop zone indicators
+ */
+
+import type { ReactiveController } from "lit";
+import { html, nothing } from "lit";
+import type { DragDropHost, Disposable, Activatable, DragWrapperPosition } from "../types/base-element.types";
+
+// Import drag wrapper component
+import "../../wrappers/GenerikWrapper/DragWrapper/DragWrapper";
+
+/**
+ * Controller responsible for drag and drop functionality
+ * Only active in editor mode (not view mode)
+ */
+export class DragDropController implements ReactiveController, Disposable, Activatable {
+  private host: DragDropHost;
+  private isActive = false;
+
+  // Bound event handlers for proper cleanup
+  private boundDragEnter: (e: DragEvent) => void;
+  private boundDrop: (e: DragEvent) => void;
+  private boundDragLeave: (e: DragEvent) => void;
+
+  constructor(host: DragDropHost) {
+    this.host = host;
+    host.addController(this);
+
+    // Bind handlers
+    this.boundDragEnter = this.handleDragEnter.bind(this);
+    this.boundDrop = this.handleDrop.bind(this);
+    this.boundDragLeave = this.handleDragLeave.bind(this);
+  }
+
+  hostConnected(): void {
+    // Controller is activated separately via activate()
+  }
+
+  hostDisconnected(): void {
+    this.deactivate();
+  }
+
+  /**
+   * Activate drag-drop controller (editor mode only)
+   */
+  activate(): void {
+    if (this.isActive || this.host.isViewMode) return;
+    this.isActive = true;
+
+    // Find closest wrapper
+    this.host.closestGenericComponentWrapper = this.host.closest?.(
+      "generik-component-wrapper"
+    ) as HTMLElement | null;
+
+    // Add DOM event listeners
+    this.host.addEventListener("dragenter", this.boundDragEnter);
+    this.host.addEventListener("drop", this.boundDrop);
+    this.host.addEventListener("dragleave", this.boundDragLeave);
+  }
+
+  /**
+   * Deactivate drag-drop controller
+   */
+  deactivate(): void {
+    if (!this.isActive) return;
+    this.isActive = false;
+
+    // Remove DOM event listeners
+    this.host.removeEventListener("dragenter", this.boundDragEnter);
+    this.host.removeEventListener("drop", this.boundDrop);
+    this.host.removeEventListener("dragleave", this.boundDragLeave);
+  }
+
+  /**
+   * Handle drag enter event
+   */
+  private handleDragEnter(_e: DragEvent): void {
+    this.notifyDragWrappers("drag-over-component");
+  }
+
+  /**
+   * Handle drop event
+   */
+  private handleDrop(_e: DragEvent): void {
+    this.notifyDragWrappers("drag-leave-component");
+  }
+
+  /**
+   * Handle drag leave event
+   */
+  private handleDragLeave(_e: DragEvent): void {
+    this.notifyDragWrappers("drag-leave-component");
+  }
+
+  /**
+   * Notify drag wrappers of drag events
+   */
+  private notifyDragWrappers(eventType: string): void {
+    const wrappers = this.host.shadowRoot?.querySelectorAll("drag-wrapper");
+    wrappers?.forEach((wrapper) => {
+      wrapper.dispatchEvent(
+        new CustomEvent(eventType, {
+          bubbles: true,
+          composed: true,
+        })
+      );
+    });
+  }
+
+  /**
+   * Render drag wrappers for editor mode
+   */
+  renderWrappers(itemIndex?: number) {
+    if (!this.isActive) return nothing;
+
+    const { component, inputRef, isDragInitiator } = this.host;
+    const componentData = { ...component };
+
+    return html`
+      ${[0, undefined].includes(itemIndex)
+        ? html`
+            <drag-wrapper
+              .where=${"before" as DragWrapperPosition}
+              .message=${"Drop before"}
+              .component=${componentData}
+              .inputRef=${inputRef}
+              .isDragInitiator=${isDragInitiator}
+            ></drag-wrapper>
+          `
+        : nothing}
+    `;
+  }
+
+  /**
+   * Render after drag wrapper
+   */
+  renderAfterWrapper() {
+    if (!this.isActive) return nothing;
+
+    const { component, inputRef, isDragInitiator } = this.host;
+
+    return html`
+      <drag-wrapper
+        .where=${"after" as DragWrapperPosition}
+        .message=${"Drop after"}
+        .component=${{ ...component }}
+        .inputRef=${inputRef}
+        .isDragInitiator=${isDragInitiator}
+      ></drag-wrapper>
+    `;
+  }
+
+  /**
+   * Set drag initiator state
+   */
+  setDragInitiator(isInitiator: boolean): void {
+    this.host.isDragInitiator = isInitiator;
+  }
+
+  /**
+   * Check if this component is the drag initiator
+   */
+  isDragInitiator(): boolean {
+    return this.host.isDragInitiator;
+  }
+
+  /**
+   * Clean up all resources
+   */
+  dispose(): void {
+    this.deactivate();
+  }
+}

package/components/ui/components/base/controllers/ErrorController.ts

@@ -0,0 +1,180 @@
+/**
+ * @file ErrorController.ts
+ * @description Controller for managing and displaying component errors
+ * Handles error tracking, display, and user interactions
+ */
+
+import type { ReactiveController } from "lit";
+import { html, nothing } from "lit";
+import { $debug } from "../../../../../redux/store/debug";
+import { hasOnlyEmptyObjects } from "../../../../../utils/object.utils";
+import type { ErrorHost, Disposable, Activatable } from "../types/base-element.types";
+
+// Import error display component
+import "../BaseElement/handler-component-error";
+
+/**
+ * Controller responsible for error management and display
+ * Only active in editor mode (not view mode)
+ */
+export class ErrorController implements ReactiveController, Disposable, Activatable {
+  private host: ErrorHost;
+  private isActive = false;
+
+  constructor(host: ErrorHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    // Controller is activated separately via activate()
+  }
+
+  hostDisconnected(): void {
+    this.deactivate();
+  }
+
+  /**
+   * Activate error controller (editor mode only)
+   */
+  activate(): void {
+    if (this.isActive || this.host.isViewMode) return;
+    this.isActive = true;
+  }
+
+  /**
+   * Deactivate error controller
+   */
+  deactivate(): void {
+    if (!this.isActive) return;
+    this.isActive = false;
+    this.host.displayErrorPanel = false;
+  }
+
+  /**
+   * Get current component errors from debug store
+   */
+  getErrors(): Record<string, any> | null {
+    const debugState = $debug.get();
+    return debugState?.error?.components?.[this.host.component.uuid]?.errors ?? null;
+  }
+
+  /**
+   * Check if component has any errors
+   */
+  hasErrors(): boolean {
+    const errors = this.getErrors();
+    return errors !== null && !hasOnlyEmptyObjects(errors);
+  }
+
+  /**
+   * Show error panel
+   */
+  showPanel(): void {
+    this.host.displayErrorPanel = true;
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Hide error panel
+   */
+  hidePanel(): void {
+    this.host.displayErrorPanel = false;
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Toggle error panel visibility
+   */
+  togglePanel(): void {
+    this.host.displayErrorPanel = !this.host.displayErrorPanel;
+    this.host.requestUpdate();
+  }
+
+  /**
+   * Render error indicator and panel
+   */
+  renderError() {
+    if (!this.isActive) return nothing;
+
+    const errors = this.getErrors();
+    if (!errors || hasOnlyEmptyObjects(errors)) return nothing;
+
+    return html`
+      <div
+        @mouseenter=${() => this.showPanel()}
+        @mouseleave=${() => this.hidePanel()}
+        style="position: absolute; z-index: 1000;"
+      >
+        <nr-icon
+          name="info-circle"
+          style="
+            z-index: 1000;
+            --nuraly-icon-width: 20px;
+            --nuraly-icon-height: 25px;
+            --nuraly-icon-color: red;
+            position: absolute;
+            cursor: pointer;
+          "
+        >
+          Error
+        </nr-icon>
+        ${this.host.displayErrorPanel
+          ? html`
+              <handler-component-error-block
+                .error=${errors}
+              ></handler-component-error-block>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  /**
+   * Get error summary for display
+   */
+  getErrorSummary(): { count: number; messages: string[] } {
+    const errors = this.getErrors();
+    if (!errors) return { count: 0, messages: [] };
+
+    const messages: string[] = [];
+    let count = 0;
+
+    for (const [key, value] of Object.entries(errors)) {
+      if (value && typeof value === "object" && "error" in value) {
+        count++;
+        messages.push(`${key}: ${value.error}`);
+      }
+    }
+
+    return { count, messages };
+  }
+
+  /**
+   * Clear all errors for this component
+   */
+  clearErrors(): void {
+    this.host.errors = {};
+  }
+
+  /**
+   * Add an error for a specific input
+   */
+  addError(inputName: string, message: string): void {
+    this.host.errors[inputName] = { error: message };
+  }
+
+  /**
+   * Remove an error for a specific input
+   */
+  removeError(inputName: string): void {
+    delete this.host.errors[inputName];
+  }
+
+  /**
+   * Clean up all resources
+   */
+  dispose(): void {
+    this.deactivate();
+  }
+}

package/components/ui/components/base/controllers/EventController.ts

@@ -0,0 +1,112 @@
+/**
+ * @file EventController.ts
+ * @description Controller for handling component event execution
+ * Manages event dispatching and handler execution
+ */
+
+import type { ReactiveController } from "lit";
+import { getNestedAttribute } from "../../../../../utils/object.utils";
+import { executeHandler } from "../../../../../state/runtime-context";
+import type { EventHandlerHost, Disposable, EventExecutionOptions } from "../types/base-element.types";
+
+/**
+ * Controller responsible for component event handling
+ * Extracts event execution logic from BaseElement for better separation of concerns
+ */
+export class EventController implements ReactiveController, Disposable {
+  private host: EventHandlerHost;
+  private isConnected = false;
+
+  constructor(host: EventHandlerHost) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  hostConnected(): void {
+    this.isConnected = true;
+    this.executeOnInit();
+  }
+
+  hostDisconnected(): void {
+    this.isConnected = false;
+  }
+
+  /**
+   * Execute the onInit event handler if present
+   */
+  executeOnInit(): void {
+    const code = getNestedAttribute(this.host.component, "event.onInit");
+    if (code) {
+      try {
+        executeHandler(
+          this.host.component,
+          code,
+          {},
+          { ...this.host.item }
+        );
+      } catch (error) {
+        console.error("Error executing onInit handler:", error);
+      }
+    }
+  }
+
+  /**
+   * Execute a component event handler
+   */
+  execute(eventName: string, event?: Event, data: Record<string, any> = {}): void {
+    if (!this.isConnected) return;
+
+    const { component, item, uniqueUUID } = this.host;
+    const code = component.event?.[eventName];
+
+    if (!code) return;
+
+    try {
+      const eventData = {
+        ...data,
+        event,
+      };
+
+      executeHandler(
+        { ...component, uniqueUUID },
+        getNestedAttribute(component, `event.${eventName}`),
+        eventData,
+        item
+      );
+    } catch (error) {
+      console.error(`Error executing event "${eventName}":`, error);
+    }
+  }
+
+  /**
+   * Execute multiple events in sequence
+   */
+  executeMultiple(events: EventExecutionOptions[]): void {
+    for (const { eventName, event, data } of events) {
+      this.execute(eventName, event, data);
+    }
+  }
+
+  /**
+   * Check if component has a specific event handler
+   */
+  hasEventHandler(eventName: string): boolean {
+    return !!this.host.component.event?.[eventName];
+  }
+
+  /**
+   * Get list of all event handler names
+   */
+  getEventHandlerNames(): string[] {
+    const events = this.host.component.event;
+    if (!events) return [];
+    return Object.keys(events).filter((key) => !!events[key]);
+  }
+
+  /**
+   * Clean up resources
+   */
+  dispose(): void {
+    this.isConnected = false;
+  }
+}