@siliconst/metaui 1.4.51 → 2.0.0

package/src/nz/co/siliconst/ui5/metaui/layouts/CompactLayout.ts

@@ -1,148 +1,189 @@
-/**
- * @file CompactLayout.ts
- * @description Generates a lightweight, dense VBox layout for use inside tight spaces like table cells.
- */
-
-import VBox from "sap/m/VBox";
-import Label from "sap/m/Label";
-import Title from "sap/ui/core/Title";
-import { IPropertyMetadata, ISchema, ILayoutElement } from "../interfaces/ISchema";
-import { ILayoutManager } from "../interfaces/ILayoutManager";
-import { Engine } from "../core/Engine";
-import { SchemaNormalizer } from "../core/SchemaNormalizer";
-import { Logger } from "../utils/Logger";
-import Control from "sap/ui/core/Control";
-
-/**
- * Layout Manager responsible for generating a dense, lightweight layout (no SimpleForm padding).
- * Ideal for rendering objects dynamically inside table cells or side-panels.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.layouts
- * @public
- */
-export class CompactLayout implements ILayoutManager {
-    /**
-     * Renders the JSON Schema properties into a dense VBox layout.
-     * 
-     * @param schema The active JSON schema subset.
-     * @param modelName The bound UI5 model name.
-     * @param engine The central orchestrator for delegating plugin generation.
-     * @param onSubmit Optional submit hook.
-     * @returns {Control} The VBox wrapper containing the generated compact form.
-     */
-    public render(schema: ISchema, modelName: string, engine: Engine, onSubmit?: () => void): Control {
-        const container = new VBox({ renderType: "Bare" });
-        container.addStyleClass("sapUiTinyMargin");
-
-        if (!schema.uiLayout || !Array.isArray(schema.uiLayout)) {
-            Logger.warn("[MetaUI] Missing 'uiLayout' array in schema. CompactLayout will not render any fields.");
-            return container;
-        }
-
-        const tableElements: { scope: string, meta: IPropertyMetadata, label?: string }[] = [];
-
-        // Recursively render layout elements
-        const renderElement = (element: ILayoutElement) => {
-            if (element.type === "Group") {
-                if (element.label) {
-                    const title = new sap.m.Title({ text: element.label, level: "H5" });
-                    title.addStyleClass("sapUiTinyMarginTop sapUiTinyMarginBottom");
-                    container.addItem(title);
-                }
-                
-                if (element.elements && Array.isArray(element.elements)) {
-                    element.elements.forEach(renderElement);
-                }
-            } else if (element.type === "Control") {
-                if (!element.scope || !element.scope.startsWith("#/properties/")) {
-                    Logger.error(`[MetaUI] Invalid scope '${element.scope}' in uiLayout Control.`, "", "CompactLayout");
-                    return;
-                }
-                
-                const { meta, bindingPath, propKey } = SchemaNormalizer.resolveScope(schema, element.scope);
-                
-                if (!meta) {
-                    Logger.error(`[MetaUI] Property '${propKey}' not found in schema definitions.`, "", "CompactLayout");
-                    return;
-                }
-
-                const isCollectionOfRecords = meta.items?.type === "object" || meta.items?.properties;
-                const hasExplicitWidget = !!meta.ui?.widget;
-                const isSubLayout = meta.type === "array" && isCollectionOfRecords && !hasExplicitWidget;
-
-                if (isSubLayout) {
-                    Logger.debug("[MetaUI CompactLayout]", `Routing property '${propKey}' to Table Sub-Layout.`, "CompactLayout");
-                    tableElements.push({ scope: bindingPath, meta, label: element.label });
-                } else {
-                    Logger.debug("[MetaUI CompactLayout]", `Rendering scalar field '${bindingPath}'.`, "CompactLayout");
-                    this._renderScalarField(container, element, bindingPath, meta, modelName, engine);
-                }
-            } else {
-                Logger.warn(`[MetaUI] Unsupported layout element type '${element.type}'.`, "", "CompactLayout");
-            }
-        };
-
-        // Render everything defined in the layout
-        schema.uiLayout.forEach(renderElement);
-
-        // Render array/table sub-layouts full width below the fields
-        tableElements.forEach(field => {
-            try {
-                const subSchema = {
-                    type: "array",
-                    title: field.label || field.meta.ui?.label || field.scope,
-                    items: field.meta.items || { type: "object", properties: {} },
-                    uiLayout: field.meta.items?.uiLayout
-                };
-                
-                const control = engine.generateLayout(subSchema as ISchema, modelName, `/${field.scope}`);
-                if (control) {
-                    control.addStyleClass("sapUiTinyMarginTop");
-                    container.addItem(control);
-                }
-            } catch (error) {
-                const msg = (error as Error).message;
-                Logger.error(`[MetaUI] Failed to render array field ${field.scope}`, msg, "CompactLayout");
-                Logger.showErrorPopup(`Failed to render array field '${field.scope}'.\n\nDetails: ${msg}`);
-            }
-        });
-
-        return container;
-    }
-
-    /**
-     * Synthesizes a primitive field into the layout.
-     * @param container The VBox container.
-     * @param element The layout element definition.
-     * @param propKey The bound property key.
-     * @param meta The inferred metadata schema.
-     * @param modelName The UI5 data model name.
-     * @param engine The core Engine instance.
-     */
-    private _renderScalarField(container: VBox, element: ILayoutElement, propKey: string, meta: IPropertyMetadata, modelName: string, engine: Engine): void {
-        try {
-            const labelText = element.label || meta.ui?.label || propKey;
-            const label = new Label({
-                text: labelText,
-                required: meta.required
-            });
-            label.addStyleClass("sapUiTinyMarginTop");
-
-            const effectiveMeta = { ...meta };
-            if (element.widget) {
-                effectiveMeta.ui = { ...meta.ui, widget: element.widget };
-            }
-
-            const control = engine.generateField(effectiveMeta, `/${propKey}`, modelName);
-            control.addStyleClass("sapUiTinyMarginBottom");
-
-            // Wrap label and field tightly
-            const fieldBox = new VBox({ renderType: "Bare", items: [label, control] });
-            container.addItem(fieldBox);
-        } catch (error) {
-            const msg = (error as Error).message;
-            Logger.error(`[MetaUI] Failed to render field ${propKey}`, msg, "CompactLayout");
-            Logger.showErrorPopup(`Failed to render field '${propKey}'.\n\nDetails: ${msg}`);
-        }
-    }
-}
+/**
+ * @file CompactLayout.ts
+ * @description Generates a lightweight, dense VBox layout for use inside tight spaces like table cells.
+ */
+
+import VBox from "sap/m/VBox";
+import HBox from "sap/m/HBox";
+import FlexItemData from "sap/m/FlexItemData";
+import MTitle from "sap/m/Title";
+import { TitleLevel } from "sap/ui/core/library";
+import { FlexRendertype } from "sap/m/library";
+import { IPropertyMetadata, ISchema, ILayoutElement } from "../interfaces/ISchema";
+import { ILayoutManager } from "../interfaces/ILayoutManager";
+import { Engine } from "../core/Engine";
+import { ControlDirectiveUtil } from "../utils/ControlDirectiveUtil";
+import { Logger } from "../utils/Logger";
+import Control from "sap/ui/core/Control";
+import { ArraySubSchemaFactory, LayoutElementWalker, LayoutFieldFactory } from "./LayoutElementWalker";
+
+/**
+ * Layout Manager responsible for generating a dense, lightweight layout (no SimpleForm padding).
+ * Ideal for rendering objects dynamically inside table cells or side-panels.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.layouts
+ * @internal
+ */
+export class CompactLayout implements ILayoutManager {
+    /**
+     * Renders the JSON Schema properties into a dense VBox layout.
+     *
+     * @param schema The active JSON schema subset.
+     * @param modelName The bound UI5 model name.
+     * @param engine The central orchestrator for delegating plugin generation.
+     * @param _onSubmit Optional submit hook.
+     * @returns {Control} The VBox wrapper containing the generated compact form.
+     */
+    public render(schema: ISchema, modelName: string, engine: Engine, _onSubmit?: () => void): Control {
+        const container = new VBox({ renderType: FlexRendertype.Bare });
+        container.addStyleClass("sapUiTinyMargin");
+
+        if (!schema.uiLayout || !Array.isArray(schema.uiLayout)) {
+            Logger.warn("[MetaUI] Missing 'uiLayout' array in schema. CompactLayout will not render any fields.");
+            return container;
+        }
+
+        const boxStack: (VBox | HBox)[] = [container];
+        const currentBox = (): VBox | HBox => boxStack[boxStack.length - 1];
+
+        LayoutElementWalker.walk(
+            schema.uiLayout,
+            schema,
+            engine,
+            {
+                onSectionHeader: (label: string) => {
+                    const title = new MTitle({ text: label, level: TitleLevel.H5 });
+                    title.addStyleClass("sapUiTinyMarginTop sapUiTinyMarginBottom");
+                    currentBox().addItem(title);
+                },
+                onEnterContainer: (element: ILayoutElement) => {
+                    const parentBox = currentBox();
+                    if (element.type === "VerticalLayout") {
+                        const colBox = new VBox({
+                            renderType: FlexRendertype.Bare,
+                            width: "100%",
+                            layoutData:
+                                parentBox.getMetadata().getName() === "sap.m.HBox"
+                                    ? new FlexItemData({ growFactor: 1, baseSize: "0%" })
+                                    : undefined
+                        });
+                        parentBox.addItem(colBox);
+                        boxStack.push(colBox);
+                    } else if (element.type === "HorizontalLayout") {
+                        const rowBox = new HBox({ renderType: FlexRendertype.Bare, width: "100%" });
+                        parentBox.addItem(rowBox);
+                        boxStack.push(rowBox);
+                    }
+                },
+                onExitContainer: (element: ILayoutElement) => {
+                    if (element.type === "VerticalLayout" || element.type === "HorizontalLayout") {
+                        boxStack.pop();
+                    }
+                },
+                onTableSubLayout: (element: ILayoutElement, bindingPath: string, _propKey: string, meta: IPropertyMetadata) => {
+                    this._renderArrayTable(currentBox(), element, bindingPath, meta, modelName, engine);
+                },
+                onScalarField: (element: ILayoutElement, bindingPath: string, meta: IPropertyMetadata) => {
+                    this._renderScalarField(currentBox(), element, bindingPath, meta, modelName, engine);
+                }
+            },
+            "CompactLayout"
+        );
+
+        return container;
+    }
+
+    /**
+     * Synthesizes an inline array table into the container that is open at the element's declared position.
+     * Deferring these to the root container after the walk dropped every inline table out of its row and out
+     * of its declared order, which `FormLayout` never did.
+     *
+     * @param container The VBox or HBox container currently open in the walk.
+     * @param element The layout element definition.
+     * @param bindingPath The resolved relative binding path of the array property.
+     * @param meta The array property metadata.
+     * @param modelName The UI5 data model name.
+     * @param engine The core Engine instance.
+     */
+    private _renderArrayTable(
+        container: VBox | HBox,
+        element: ILayoutElement,
+        bindingPath: string,
+        meta: IPropertyMetadata,
+        modelName: string,
+        engine: Engine
+    ): void {
+        try {
+            const subSchema = ArraySubSchemaFactory.build(element.label, bindingPath, meta);
+            const control = engine.generateLayout(subSchema, modelName, `/${bindingPath}`);
+            if (!control) {
+                return;
+            }
+            control.addStyleClass("sapUiTinyMarginTop");
+            if (container.getMetadata().getName() === "sap.m.HBox") {
+                control.setLayoutData(new FlexItemData({ growFactor: 1, baseSize: "0%" }));
+                control.addStyleClass("sapUiTinyMarginEnd");
+            }
+            container.addItem(control);
+        } catch (error) {
+            engine.hasPartialRenderingErrors = true;
+            const msg = (error as Error).message;
+            Logger.error(`[MetaUI] Failed to render array field ${bindingPath}`, msg, "CompactLayout");
+            Logger.showErrorPopup(`Failed to render array field '${bindingPath}'.\n\nDetails: ${msg}`);
+        }
+    }
+
+    /**
+     * Synthesizes a primitive field into the layout.
+     *
+     * @param container The VBox or HBox container.
+     * @param element The layout element definition.
+     * @param propKey The bound property key.
+     * @param meta The inferred metadata schema.
+     * @param modelName The UI5 data model name.
+     * @param engine The core Engine instance.
+     */
+    private _renderScalarField(
+        container: VBox | HBox,
+        element: ILayoutElement,
+        propKey: string,
+        meta: IPropertyMetadata,
+        modelName: string,
+        engine: Engine
+    ): void {
+        try {
+            const { label, control, effectiveMeta, absolutePath } = LayoutFieldFactory.createLabelledField(
+                element,
+                propKey,
+                meta,
+                modelName,
+                engine
+            );
+            label.addStyleClass("sapUiTinyMarginTop");
+            control.addStyleClass("sapUiTinyMarginBottom");
+
+            const fieldBox = new VBox({ renderType: FlexRendertype.Bare, items: [label, control] });
+            fieldBox.data("metauiFieldWrapper", true);
+            if (effectiveMeta.ui?.visible === false || effectiveMeta.ui?.visibleOn) {
+                ControlDirectiveUtil.applyCommonDirectives(
+                    fieldBox,
+                    fieldBox,
+                    { type: "string", ui: { visible: effectiveMeta.ui.visible, visibleOn: effectiveMeta.ui.visibleOn } },
+                    absolutePath,
+                    true,
+                    modelName
+                );
+            }
+            if (container.getMetadata().getName() === "sap.m.HBox") {
+                fieldBox.setLayoutData(new FlexItemData({ growFactor: 1, baseSize: "0%" }));
+                fieldBox.addStyleClass("sapUiTinyMarginEnd");
+            }
+            container.addItem(fieldBox);
+        } catch (error) {
+            engine.hasPartialRenderingErrors = true;
+            const msg = (error as Error).message;
+            Logger.error(`[MetaUI] Failed to render field ${propKey}`, msg, "CompactLayout");
+            Logger.showErrorPopup(`Failed to render field '${propKey}'.\n\nDetails: ${msg}`);
+        }
+    }
+}

package/src/nz/co/siliconst/ui5/metaui/layouts/FormLayout.ts

@@ -1,172 +1,62 @@
-/**
- * @file FormLayout.ts
- * @description Generates a fully responsive SAP Fiori Form layout (SimpleForm).
- */
-
-import SimpleForm from "sap/ui/layout/form/SimpleForm";
-import Label from "sap/m/Label";
-import Title from "sap/ui/core/Title";
-import VBox from "sap/m/VBox";
-import { IPropertyMetadata, ISchema, ILayoutElement } from "../interfaces/ISchema";
-import { ILayoutManager } from "../interfaces/ILayoutManager";
-import { Engine } from "../core/Engine";
-import { SchemaNormalizer } from "../core/SchemaNormalizer";
-import { Logger } from "../utils/Logger";
-import Control from "sap/ui/core/Control";
-import { PluginRegistry } from "../core/PluginRegistry";
-
-/**
- * Layout Manager responsible for generating a fully responsive SAP Fiori SimpleForm.
- * It traverses the `uiLayout` tree defined in the schema to build the form groups and fields,
- * completely separating visual orchestration from data modeling.
- * @namespace nz.co.siliconst.ui5.metaui.layouts
- * @public
- */
-export class FormLayout implements ILayoutManager {
-    /**
-     * Renders the JSON Schema properties into a UI5 SimpleForm using the uiLayout definitions.
-     * 
-     * @param schema The active JSON schema subset.
-     * @param modelName The bound UI5 model name.
-     * @param engine The central orchestrator for delegating plugin generation.
-     * @param onSubmit Optional submit hook.
-     * @returns {Control} The VBox wrapper containing the generated form.
-     */
-    public render(schema: ISchema, modelName: string, engine: Engine, onSubmit?: () => void): Control {
-        const container = new VBox({ renderType: "Bare" });
-        const form = new SimpleForm({
-            editable: true,
-            title: schema.title,
-            layout: "ResponsiveGridLayout",
-            labelSpanXL: 4, labelSpanL: 4, labelSpanM: 4, labelSpanS: 12,
-            adjustLabelSpan: false,
-            emptySpanXL: 0, emptySpanL: 0, emptySpanM: 0, emptySpanS: 0,
-            columnsXL: 1, columnsL: 1, columnsM: 1,
-            singleContainerFullSize: false
-        });
-
-        if (!schema.uiLayout || !Array.isArray(schema.uiLayout)) {
-            Logger.warn("[MetaUI] Missing 'uiLayout' array in schema. Form will not render any fields.");
-            container.addItem(form);
-            return container;
-        }
-
-        let hasFormFields = false;
-
-        // Recursively render layout elements
-        const renderElement = (element: ILayoutElement) => {
-            if (element.type === "Group") {
-                if (element.label) {
-                    form.addContent(new Title({ text: element.label }));
-                }
-                
-                if (element.elements && Array.isArray(element.elements)) {
-                    element.elements.forEach(renderElement);
-                }
-            } else if (element.type === "Control") {
-                if (!element.scope || !element.scope.startsWith("#/properties/")) {
-                    Logger.error(`[MetaUI] Invalid scope '${element.scope}' in uiLayout Control.`, "", "FormLayout");
-                    return;
-                }
-                
-                const { meta, bindingPath, propKey } = SchemaNormalizer.resolveScope(schema, element.scope);
-                
-                if (!meta) {
-                    Logger.error(`[MetaUI] Property '${propKey}' not found in schema definitions.`, "", "FormLayout");
-                    return;
-                }
-
-                // Architectural Boundary: Separate Field Controls (Plugins) from Sub-Layouts (LayoutManagers)
-                // A property is delegated to a Sub-Layout Manager (Table) ONLY if it represents a collection of complex objects.
-                // Collections of primitives, or explicitly assigned widgets (like multiSelect), remain in the Form as Field Plugins.
-                const isCollectionOfRecords = meta.items?.type === "object" || meta.items?.properties;
-                const hasExplicitWidget = !!meta.ui?.widget;
-                const isTableSubLayout = meta.type === "array" && isCollectionOfRecords && !hasExplicitWidget;
-
-                if (isTableSubLayout) {
-                    Logger.debug("[MetaUI FormLayout]", `Routing property '${propKey}' to Table Sub-Layout inline.`, "FormLayout");
-                    hasFormFields = true;
-                    try {
-                        const subSchema = {
-                            type: "array",
-                            title: element.label || meta.ui?.label || propKey,
-                            items: meta.items || { type: "object", properties: {} },
-                            uiLayout: meta.items?.uiLayout // Pass down sub-layout if available
-                        };
-                        
-                        const control = engine.generateLayout(subSchema as ISchema, modelName, `/${bindingPath}`);
-                        if (control) {
-                            sap.ui.require(["sap/ui/layout/GridData"], (GridData: typeof import("sap/ui/layout/GridData").default) => {
-                                control.setLayoutData(new GridData({ span: "XL12 L12 M12 S12" }));
-                            });
-                            form.addContent(control);
-                        }
-                    } catch (error) {
-                        const msg = (error as Error).message;
-                        Logger.error(`[MetaUI] Failed to render inline array field ${bindingPath}`, msg, "FormLayout");
-                        Logger.showErrorPopup(`Failed to render array field '${bindingPath}'.\n\nDetails: ${msg}`);
-                    }
-                } else {
-                    hasFormFields = true;
-                    Logger.debug("[MetaUI FormLayout]", `Rendering scalar field '${bindingPath}'.`, "FormLayout");
-                    this._renderScalarField(form, element, bindingPath, meta, modelName, engine);
-                }
-            } else {
-                Logger.warn(`[MetaUI] Unsupported layout element type '${element.type}'.`, "", "FormLayout");
-            }
-        };
-
-        // Render everything defined in the layout
-        schema.uiLayout.forEach(renderElement);
-
-        if (hasFormFields) {
-            container.addItem(form);
-        }
-
-        return container;
-    }
-
-    /**
-     * Synthesizes a primitive field into the Form.
-     * @param form The SimpleForm instance.
-     * @param element The layout element definition.
-     * @param propKey The bound property key.
-     * @param meta The inferred metadata schema.
-     * @param modelName The UI5 data model name.
-     * @param engine The core Engine instance.
-     */
-    private _renderScalarField(form: SimpleForm, element: ILayoutElement, propKey: string, meta: IPropertyMetadata, modelName: string, engine: Engine): void {
-        try {
-            const labelText = element.label || meta.ui?.label || propKey;
-            const label = new Label({
-                text: labelText,
-                required: meta.required
-            });
-
-            // Override widget if specified in the layout element
-            const effectiveMeta = { ...meta };
-            if (element.widget) {
-                effectiveMeta.ui = { ...meta.ui, widget: element.widget };
-            }
-
-            const control = engine.generateField(effectiveMeta, `/${propKey}`, modelName);
-
-            // Automatically apply fullWidth layout data if natively wide or explicitly requested
-            const isNativelyWide = PluginRegistry.getInstance().isPluginNativelyWide(effectiveMeta.type || "string", effectiveMeta.ui?.widget);
-            const isFullWidth = effectiveMeta.ui?.fullWidth !== undefined ? effectiveMeta.ui?.fullWidth : isNativelyWide;
-
-            if (isFullWidth) {
-                sap.ui.require(["sap/ui/layout/GridData"], (GridData: typeof import("sap/ui/layout/GridData").default) => {
-                    control.setLayoutData(new GridData({ span: "XL12 L12 M12 S12" }));
-                });
-            }
-
-            form.addContent(label);
-            form.addContent(control);
-        } catch (error) {
-            const msg = (error as Error).message;
-            Logger.error(`[MetaUI] Failed to render field ${propKey}`, msg, "FormLayout");
-            Logger.showErrorPopup(`Failed to render field '${propKey}'.\n\nDetails: ${msg}`);
-        }
-    }
-}
+/**
+ * @file FormLayout.ts
+ * @description Generates a fully responsive SAP Fiori Form layout (SimpleForm).
+ */
+
+import VBox from "sap/m/VBox";
+import { FlexRendertype } from "sap/m/library";
+import { ISchema } from "../interfaces/ISchema";
+import { ILayoutManager } from "../interfaces/ILayoutManager";
+import { Engine } from "../core/Engine";
+import { Logger } from "../utils/Logger";
+import Control from "sap/ui/core/Control";
+import { LayoutElementWalker, LayoutFieldFactory } from "./LayoutElementWalker";
+
+/**
+ * Layout Manager responsible for generating a fully responsive SAP Fiori SimpleForm.
+ * It traverses the `uiLayout` tree defined in the schema to build the form groups and fields,
+ * completely separating visual orchestration from data modeling.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.layouts
+ * @internal
+ */
+export class FormLayout implements ILayoutManager {
+    /**
+     * Renders the JSON Schema properties into a UI5 SimpleForm using the `uiLayout` definitions.
+     *
+     * @param schema The active JSON schema subset.
+     * @param modelName The bound UI5 model name.
+     * @param engine The central orchestrator for delegating plugin generation.
+     * @param _onSubmit Optional submit hook.
+     * @returns {Control} The VBox wrapper containing the generated form.
+     */
+    public render(schema: ISchema, modelName: string, engine: Engine, _onSubmit?: () => void): Control {
+        const container = new VBox({ renderType: FlexRendertype.Bare });
+        const form = LayoutFieldFactory.createSimpleForm(schema.title, schema.ui);
+
+        if (!schema.uiLayout || !Array.isArray(schema.uiLayout)) {
+            Logger.warn("[MetaUI] Missing 'uiLayout' array in schema. Form will not render any fields.");
+            container.addItem(form);
+            return container;
+        }
+
+        let hasFormFields = false;
+        LayoutElementWalker.walk(
+            schema.uiLayout,
+            schema,
+            engine,
+            LayoutElementWalker.createSimpleFormSink(form, schema, modelName, engine, "FormLayout", undefined, () => {
+                hasFormFields = true;
+            }),
+            "FormLayout"
+        );
+
+        if (hasFormFields) {
+            container.addItem(form);
+        } else {
+            form.destroy();
+        }
+
+        return container;
+    }
+}