@siliconst/metaui 1.4.44 → 2.0.0

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/BooleanPlugin.ts

@@ -1,103 +1,26 @@
-/**
- * @file BooleanPlugin.ts
- * @description Renders a sap.m.Switch for boolean states.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import CheckBox from "sap/m/CheckBox";
-import Switch from "sap/m/Switch";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering logic for toggleable booleans using `sap.m.CheckBox`.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class BooleanPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.CheckBox` component for boolean evaluation.
-     * 
-     * @param fieldMetadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @returns {Control} The configured CheckBox control.
-     */
-    public render(fieldMetadata: IPropertyMetadata,  bindingPath: string,  modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        // text is safe for Boolean controls
-        this.BLOCKED_PROPS = this.BLOCKED_PROPS.filter(p => p !== "text");
-
-        this.onChange = onChange;
-        this.metadata = fieldMetadata;
-        this.fieldKey = bindingPath.startsWith('/') ? bindingPath.substring(1) : bindingPath;
-        
-        if (!this.isEditable) {
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName, undefined, {
-                    formatter: (val: boolean) => val ? "Yes" : "No"
-                })
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        const onChangeFn = (oEvent: sap.ui.base.Event) => {
-            const val = (oEvent as any).getParameter("state") ?? (oEvent as any).getParameter("selected");
-            const result = this.validate();
-            if (this.onChange) {
-                this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-            }
-        };
-
-        if (fieldMetadata.ui?.widget === "switch") {
-            this.control = new Switch({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                state: this.generateBindingInfo(bindingPath, modelName),
-                enabled: !fieldMetadata.ui?.readOnly,
-                change: onChangeFn
-            });
-        } else {
-            this.control = new CheckBox({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                width: "100%",
-                selected: this.generateBindingInfo(bindingPath, modelName),
-                enabled: !fieldMetadata.ui?.readOnly,
-                select: onChangeFn
-            });
-        }
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current boolean state.
-     * @returns {boolean} The selected state.
-     */
-    protected getValue(): unknown {
-        if (!this.control) return false;
-        if (this.control instanceof Switch) {
-            return (this.control as Switch).getState();
-        }
-        return (this.control as CheckBox).getSelected();
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            if (this.control instanceof Switch) {
-                (this.control as Switch).setEnabled(!this.metadata.ui?.readOnly);
-            } else {
-                (this.control as CheckBox).setEnabled(!this.metadata.ui?.readOnly);
-            }
-        }
-    }
-}
+/**
+ * @file BooleanPlugin.ts
+ * @description Renders a sap.m.CheckBox control for boolean properties.
+ */
+
+import { ISingleBoundWidgetConfig, SingleBoundWidgetPlugin } from "./SingleBoundWidgetPlugin";
+import CheckBox from "sap/m/CheckBox";
+import Control from "sap/ui/core/Control";
+
+/**
+ * Plugin responsible for rendering boolean checkboxes (`sap.m.CheckBox`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class BooleanPlugin extends SingleBoundWidgetPlugin {
+    protected readonly widgetConfig: ISingleBoundWidgetConfig = {
+        ControlClass: CheckBox,
+        valueProperty: "selected",
+        changeEvent: "select",
+        editableProperty: "editable",
+        readValue: (control: Control) =>
+            typeof (control as CheckBox).getSelected === "function" ? (control as CheckBox).getSelected() : undefined,
+        coerceModelValue: (modelValue: unknown) => Boolean(modelValue)
+    };
+}

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/CameraPlugin.ts

@@ -1,73 +1,38 @@
-import { BasePlugin } from "../controls/BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Control from "sap/ui/core/Control";
-import CameraControl from "../../controls/CameraControl";
-import ImageControl from "sap/m/Image";
-
-export class CameraPlugin extends BasePlugin {
-    /**
-     * Renders a `CameraControl` component.
-     * 
-     * @param metadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @param engineScopeId The deterministic scope ID.
-     * @param onChange The callback fired on value change.
-     * @returns {Control} The configured CameraControl.
-     */
-    public render(metadata: IPropertyMetadata,  bindingPath: string,  modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        this.onChange = onChange;
-        this.metadata = metadata;
-        this.fieldKey = bindingPath.replace('/', '');
-        this.modelName = modelName;
-
-        if (!this.isEditable) {
-            
-            this.control = new ImageControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                src: this.generateBindingInfo(bindingPath, modelName),
-                width: "400px",
-                alt: metadata.ui?.label || "Image"
-            });
-            this.applyCommonDirectives(this.control, metadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new CameraControl({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            schemaMetadata: metadata,
-            readOnly: !!metadata.ui?.readOnly
-        });
-
-        this.applyCommonDirectives(this.control, metadata, modelName);
-
-        // Validation mapping could be hooked into the 'capture' event if needed, but Two-Way binding updates the model naturally.
-        (this.control as CameraControl).attachEvent('capture', () => {
-            const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-        });
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current base64 image state.
-     * @returns {unknown} The image value.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as CameraControl).getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            (this.control as sap.ui.core.Control).setProperty("readOnly", !!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file CameraPlugin.ts
+ * @description Renders a CameraControl component in edit mode and an Image in display mode.
+ */
+
+import { HardwareControlPlugin } from "./HardwareControlPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Control from "sap/ui/core/Control";
+import CameraControl from "../../controls/CameraControl";
+import { I18n, TEXT_KEY } from "../../utils/I18n";
+
+/**
+ * Plugin responsible for rendering the hardware `CameraControl` widget.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class CameraPlugin extends HardwareControlPlugin<CameraControl> {
+    protected readonly HardwareControlClass = CameraControl;
+
+    /**
+     * Renders a URL-validated `sap.m.Image` in display mode.
+     *
+     * @param metadata The property metadata.
+     * @param bindingPath The JSON path bound to this control.
+     * @param modelName The UI5 JSONModel name.
+     * @param engineScopeId The deterministic scope ID.
+     * @returns {Control} The configured Image control.
+     */
+    protected renderDisplayControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        return this.renderSafeImageDisplay(metadata, bindingPath, modelName, engineScopeId, I18n.getText(TEXT_KEY.hardwareImageAlt));
+    }
+}

package/src/nz/co/siliconst/ui5/metaui/plugins/controls/CodeEditorPlugin.ts

@@ -1,213 +1,125 @@
-/**
- * @file CodeEditorPlugin.ts
- * @description Renders a sap.ui.codeeditor.CodeEditor for editing source code/JSON.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Control from "sap/ui/core/Control";
-import CodeEditor from "sap/ui/codeeditor/CodeEditor";
-import HBox from "sap/m/HBox";
-import Button from "sap/m/Button";
-import Dialog from "sap/m/Dialog";
-import FlexItemData from "sap/m/FlexItemData";
-
-/**
- * Handles rendering logic for code editing.
- * Requires the `sap.ui.codeeditor` library to be loaded.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class CodeEditorPlugin extends BasePlugin {
-    private codeEditorRef?: CodeEditor;
-
-    /**
-     * Infers the language type from the content.
-     * @param value The raw string.
-     * @returns The language string.
-     */
-    private detectLanguage(value: string): string {
-        if (!value || typeof value !== "string") return "javascript";
-        
-        const trimmed = value.trim();
-        if (trimmed === "") return "javascript";
-
-        // 1. JSON
-        if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
-            try {
-                JSON.parse(trimmed);
-                return "json";
-            } catch (e) {
-                // Not valid JSON, continue testing
-            }
-        }
-
-        // 2. XML / HTML
-        if (/^\s*<[\s\S]*>\s*$/.test(trimmed)) {
-            return "xml";
-        }
-
-        // 3. Fallback to JavaScript
-        return "javascript";
-    }
-
-    /**
-     * Dynamically adjusts the height of the editor based on content lines.
-     */
-    private adjustHeight(): void {
-        if (!this.codeEditorRef) return;
-        
-        // If a static height was requested via ui.rows, do not auto-adjust
-        if (this.metadata?.ui?.rows) return;
-        
-        const val = this.codeEditorRef.getProperty('value') || "";
-        const lines = val.split(/\r\n|\r|\n/).length;
-        // 18px per line + 20px padding, minimum 100px
-        const newHeight = Math.max(100, (lines * 18) + 20);
-        this.codeEditorRef.setHeight(newHeight + "px");
-    }
-
-    /**
-     * Renders a `sap.ui.codeeditor.CodeEditor` component.
-     * 
-     * @param fieldMetadata The specific JSON schema properties for this field.
-     * @param bindingPath The JSON path bound to this control.
-     * @param modelName The UI5 JSONModel name.
-     * @param engineScopeId The deterministic scope ID.
-     * @param onChange The callback fired on value change.
-     * @returns {Control} The configured CodeEditor control.
-     */
-    public render(fieldMetadata: IPropertyMetadata, bindingPath: string, modelName: string = "meta", engineScopeId?: string, onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void): Control {
-        this.onChange = onChange;
-        this.metadata = fieldMetadata;
-        this.fieldKey = bindingPath.replace("/", ""); // For EventBus
-        
-        const schemaRows = fieldMetadata.ui?.rows;
-        const useDialog = fieldMetadata.ui?.expandable !== false;
-        const baseHeight = schemaRows ? (schemaRows * 18 + 20) + "px" : "200px"; // 200px is ~10 rows
-        
-        const codeEditor = new CodeEditor({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            type: fieldMetadata.ui?.args || "javascript", // will be dynamically overridden if args is missing
-            editable: !this.isEditable ? false : !fieldMetadata.ui?.readOnly,
-            height: baseHeight, // Initial minimum height
-            width: "100%",
-            change: () => {
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-                
-                // If language isn't explicitly defined, try to guess it dynamically
-                if (!fieldMetadata.ui?.args) {
-                    const currentVal = this.codeEditorRef!.getProperty('value');
-                    const detectedType = this.detectLanguage(currentVal);
-                    if (this.codeEditorRef!.getType() !== detectedType) {
-                        this.codeEditorRef!.setType(detectedType);
-                    }
-                }
-                
-                this.adjustHeight();
-            }
-        });
-        
-        this.codeEditorRef = codeEditor;
-        this.mainControl = codeEditor;
-
-        if (useDialog) {
-            const expandBtn = new Button({
-                icon: "sap-icon://full-screen",
-                type: "Transparent",
-                tooltip: "Expand Code Editor",
-                press: () => {
-                    const dlg = new Dialog({
-                        title: fieldMetadata.title || fieldMetadata.ui?.label || "Edit Code",
-                        contentWidth: "80%",
-                        contentHeight: "80%",
-                        verticalScrolling: false,
-                        resizable: true,
-                        content: new CodeEditor({
-                            value: this.generateBindingInfo(bindingPath, modelName),
-                            type: this.codeEditorRef!.getType(),
-                            width: "100%",
-                            height: "100%",
-                            editable: !this.isEditable ? false : !fieldMetadata.ui?.readOnly
-                        }),
-                        beginButton: new Button({
-                            text: "Close",
-                            press: () => dlg.close()
-                        }),
-                        afterClose: () => dlg.destroy()
-                    });
-                    this.control?.addDependent(dlg);
-                    dlg.open();
-                }
-            });
-
-            codeEditor.setLayoutData(new FlexItemData({ growFactor: 1 }));
-
-            this.control = new HBox({
-                width: "100%",
-                alignItems: "Start",
-                items: [codeEditor, expandBtn]
-            });
-        } else {
-            this.control = codeEditor;
-        }
-
-        // Clean architecture: Wait for the model context, then attach safely to the binding itself.
-        // No timeouts, no DOM hacks, pure UI5 Eventing.
-        this.codeEditorRef.attachEventOnce("modelContextChange", () => {
-            const oBinding = this.codeEditorRef!.getBinding("value");
-            
-            const initLogic = () => {
-                if (this.codeEditorRef) {
-                    const currentVal = this.codeEditorRef.getProperty('value');
-                    if (!fieldMetadata.ui?.args) {
-                        this.codeEditorRef.setType(this.detectLanguage(currentVal));
-                    }
-                    this.adjustHeight();
-                    // CRITICAL: Ace Editor sometimes loses its constructor `editable` flag 
-                    // when the model asynchronously injects a new value string. 
-                    // We must forcefully re-apply the correct state after binding.
-                    this.applyState();
-                }
-            };
-
-            if (oBinding) {
-                // Attach for future model changes
-                oBinding.attachChange(initLogic);
-            }
-            
-            // Execute immediately in case the model is synchronous (JSONModel)
-            initLogic();
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current code string.
-     * @returns {unknown} The code value.
-     */
-    protected getValue(): unknown {
-        return this.codeEditorRef ? this.codeEditorRef.getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.codeEditorRef && this.metadata) {
-            if (!this.isEditable) {
-                this.codeEditorRef.setEditable(false);
-            } else {
-                this.codeEditorRef.setEditable(!this.metadata.ui?.readOnly);
-            }
-        }
-    }
-}
+/**
+ * @file CodeEditorPlugin.ts
+ * @description Renders a sap.ui.codeeditor.CodeEditor control for source code or raw JSON editing.
+ */
+
+import { TextLikeInputPlugin } from "./TextLikeInputPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import CodeEditor from "sap/ui/codeeditor/CodeEditor";
+
+/** Pixel height of one rendered editor line, used to translate `ui.rows` into a CSS height. */
+const LINE_HEIGHT_PX = 18;
+
+/** Vertical padding added on top of the `ui.rows` line budget. */
+const EDITOR_PADDING_PX = 20;
+
+/** Height applied when neither `ui.options.height` nor `ui.rows` is supplied. */
+const DEFAULT_EDITOR_HEIGHT = "250px";
+
+/**
+ * Plugin responsible for rendering syntax-highlighted code editors (`sap.ui.codeeditor.CodeEditor`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class CodeEditorPlugin extends TextLikeInputPlugin {
+    protected override readonly supportsExpandDialog: boolean = true;
+
+    /**
+     * Resolves the Ace syntax mode from `ui.options.language`, falling back to the generic `ui.args`
+     * directive that the same widget documents, and finally to `json`.
+     *
+     * @param metadata The specific JSON schema properties for this field.
+     * @returns {string} The Ace language identifier.
+     */
+    private resolveLanguage(metadata: IPropertyMetadata): string {
+        if (metadata.ui?.options && typeof metadata.ui.options.language === "string") {
+            return metadata.ui.options.language;
+        }
+        return typeof metadata.ui?.args === "string" ? metadata.ui.args : "json";
+    }
+
+    /**
+     * Resolves the editor height from `ui.options.height`, or from the shared `ui.rows` directive that
+     * `TextAreaPlugin` honours, so a row count sizes both multi-line widgets identically.
+     *
+     * @param metadata The specific JSON schema properties for this field.
+     * @returns {string} The CSS height for the editor.
+     */
+    private resolveHeight(metadata: IPropertyMetadata): string {
+        if (metadata.ui?.options && typeof metadata.ui.options.height === "string") {
+            return metadata.ui.options.height;
+        }
+        const rows =
+            typeof metadata.ui?.rows === "number"
+                ? metadata.ui.rows
+                : metadata.ui?.options && typeof metadata.ui.options.rows === "number"
+                  ? metadata.ui.options.rows
+                  : undefined;
+        return typeof rows === "number" && rows > 0
+            ? `${rows * LINE_HEIGHT_PX + EDITOR_PADDING_PX}px`
+            : DEFAULT_EDITOR_HEIGHT;
+    }
+
+    /**
+     * Constructs the editable `sap.ui.codeeditor.CodeEditor` component.
+     *
+     * @param metadata The specific JSON schema properties for this field.
+     * @param bindingPath The JSON path bound to this control.
+     * @param modelName The UI5 JSONModel name.
+     * @param engineScopeId The deterministic scope ID.
+     * @returns {Control} The configured CodeEditor control.
+     */
+    protected createEditableControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        return new CodeEditor({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            value: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            type: this.resolveLanguage(metadata),
+            height: this.resolveHeight(metadata),
+            width: "100%",
+            editable: this.isControlEditable(),
+            change: (oEvent: Event) => {
+                this.notifyChange((oEvent.getSource() as Control).getId());
+            }
+        });
+    }
+
+    /**
+     * Renders a non-editable `sap.ui.codeeditor.CodeEditor` in display mode. The inherited `sap.m.Text`
+     * collapses a multi-line document onto a single unformatted line and drops syntax highlighting, which
+     * makes a read-only form unable to show the payload it is displaying.
+     *
+     * @param metadata The property metadata.
+     * @param bindingPath The property binding path.
+     * @param modelName The UI5 JSONModel alias.
+     * @param engineScopeId The deterministic scope ID.
+     * @returns {Control} The read-only CodeEditor control.
+     */
+    protected override renderDisplayControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        this.control = new CodeEditor({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            value: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            type: this.resolveLanguage(metadata),
+            height: this.resolveHeight(metadata),
+            width: "100%",
+            editable: false,
+            // A read-only viewer must not nag about syntax errors in data the user cannot fix. This also keeps
+            // the Ace background worker out of display mode, which is pure overhead when nothing is edited.
+            syntaxHints: false
+        });
+        this.applyCommonDirectives(this.control, metadata, modelName);
+        return this.control;
+    }
+}