@siliconst/metaui 1.4.51 → 2.0.0

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

@@ -1,79 +1,26 @@
-/**
- * @file SwitchPlugin.ts
- * @description Renders a sap.m.Switch for boolean data specifically marked with the switch widget.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Switch from "sap/m/Switch";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering logic for toggleable boolean switches.
- */
-export class SwitchPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.Switch` 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 Switch 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.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;
-        }
-
-        this.control = new Switch({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            state: this.generateBindingInfo(bindingPath, modelName),
-            enabled: !fieldMetadata.ui?.readOnly,
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent as sap.ui.base.Event).getParameter("state");
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current switch state.
-     * @returns {unknown} The boolean state.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as Switch).getState() : false;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            const sw = this.control as Switch;
-            sw.setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file SwitchPlugin.ts
+ * @description Renders a sap.m.Switch control for boolean toggle properties.
+ */
+
+import { ISingleBoundWidgetConfig, SingleBoundWidgetPlugin } from "./SingleBoundWidgetPlugin";
+import Switch from "sap/m/Switch";
+import Control from "sap/ui/core/Control";
+
+/**
+ * Plugin responsible for rendering boolean toggle switches (`sap.m.Switch`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class SwitchPlugin extends SingleBoundWidgetPlugin {
+    protected readonly widgetConfig: ISingleBoundWidgetConfig = {
+        ControlClass: Switch,
+        valueProperty: "state",
+        changeEvent: "change",
+        editableProperty: "enabled",
+        readValue: (control: Control) =>
+            typeof (control as Switch).getState === "function" ? (control as Switch).getState() : undefined,
+        coerceModelValue: (modelValue: unknown) => Boolean(modelValue)
+    };
+}

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

@@ -1,129 +1,57 @@
-/**
- * @file TextAreaPlugin.ts
- * @description Renders a sap.m.TextArea for string data specifically marked with the textArea widget.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import TextArea from "sap/m/TextArea";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-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 and logic for multi-line text areas.
- */
-export class TextAreaPlugin extends BasePlugin {
-    private textAreaRef?: TextArea;
-    
-    /**
-     * Renders a `sap.m.TextArea` 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 TextArea 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 textArea = new TextArea({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            maxLength: fieldMetadata.maxLength || 0,
-            required: !!fieldMetadata.required,
-            editable: !this.isEditable ? false : !fieldMetadata.ui?.readOnly,
-            rows: schemaRows || 10,
-            growing: true,
-            growingMaxLines: schemaRows || 15,
-            width: "100%",
-            change: () => {
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-        this.textAreaRef = textArea;
-        this.mainControl = textArea;
-
-        if (useDialog) {
-            const expandBtn = new Button({
-                icon: "sap-icon://full-screen",
-                type: "Transparent",
-                tooltip: "Expand Editor",
-                press: () => {
-                    const dlg = new Dialog({
-                        title: fieldMetadata.title || fieldMetadata.ui?.label || "Edit Text",
-                        contentWidth: "80%",
-                        contentHeight: "80%",
-                        verticalScrolling: false,
-                        resizable: true,
-                        content: new TextArea({
-                            value: this.generateBindingInfo(bindingPath, modelName),
-                            width: "100%",
-                            height: "100%",
-                            editable: !this.isEditable ? false : !fieldMetadata.ui?.readOnly,
-                            growing: false
-                        }),
-                        beginButton: new Button({
-                            text: "Close",
-                            press: () => dlg.close()
-                        }),
-                        afterClose: () => dlg.destroy()
-                    });
-                    this.control?.addDependent(dlg);
-                    dlg.open();
-                }
-            });
-
-            textArea.setLayoutData(new FlexItemData({ growFactor: 1 }));
-
-            this.control = new HBox({
-                width: "100%",
-                alignItems: "Start",
-                items: [textArea, expandBtn]
-            });
-        } else {
-            this.control = textArea;
-        }
-
-        this.mainControl = textArea;
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-
-
-    /**
-     * Retrieves the current text string.
-     * @returns {unknown} The text string.
-     */
-    protected getValue(): unknown {
-        return this.textAreaRef ? this.textAreaRef.getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.textAreaRef && this.metadata) {
-            if (!this.isEditable) return;
-            this.textAreaRef.setEditable(!this.metadata.ui?.readOnly);
-            this.textAreaRef.setRequired(!!this.metadata.required);
-        }
-    }
-}
+/**
+ * @file TextAreaPlugin.ts
+ * @description Renders a multi-line sap.m.TextArea control.
+ */
+
+import { TextLikeInputPlugin } from "./TextLikeInputPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import TextArea from "sap/m/TextArea";
+import Control from "sap/ui/core/Control";
+
+/**
+ * Plugin responsible for rendering multi-line text areas (`sap.m.TextArea`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class TextAreaPlugin extends TextLikeInputPlugin {
+    protected override readonly syncPlaceholderAndMaxLength: boolean = true;
+    protected override readonly supportsExpandDialog: boolean = true;
+
+    /**
+     * Constructs the editable `sap.m.TextArea` 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 TextArea control.
+     */
+    protected createEditableControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        const rows =
+            typeof metadata.ui?.rows === "number"
+                ? metadata.ui.rows
+                : metadata.ui?.options && typeof metadata.ui.options.rows === "number"
+                  ? metadata.ui.options.rows
+                  : 4;
+
+        return new TextArea({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            value: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            rows,
+            width: "100%",
+            placeholder: metadata.ui?.placeholder || "",
+            maxLength: metadata.maxLength || 0,
+            required: this.isRequired(),
+            change: (oEvent) => {
+                const src = oEvent.getSource() as Control;
+                this.notifyChange(src.getId());
+            }
+        });
+    }
+}

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

@@ -0,0 +1,234 @@
+/**
+ * @file TextLikeInputPlugin.ts
+ * @description Shared abstract base class for text-input control plugins (String, Email, Password, TextArea, CodeEditor, LiveSearch, RemoteValueHelp).
+ */
+
+import { BasePlugin } from "./BasePlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Control from "sap/ui/core/Control";
+import HBox from "sap/m/HBox";
+import Button from "sap/m/Button";
+import Dialog from "sap/m/Dialog";
+import FlexItemData from "sap/m/FlexItemData";
+import { ButtonType, FlexAlignItems } from "sap/m/library";
+import { I18n, TEXT_KEY } from "../../utils/I18n";
+
+/**
+ * Structural interface for SAPUI5 text-like controls (`sap.m.Input`, `sap.m.TextArea`, `sap.ui.codeeditor.CodeEditor`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export interface ITextLikeControl extends Control {
+    getValue?(): string;
+    setEditable?(bEditable: boolean): this;
+    setRequired?(bRequired: boolean): this;
+    setPlaceholder?(sPlaceholder: string): this;
+    setMaxLength?(iMaxLength: number): this;
+}
+
+/**
+ * Shared abstract base class for text-input control plugins.
+ * Consolidates the `render` skeleton, `getValue` (including the unmounted DOM model-value fallback),
+ * and `applyState` across all text-based inputs.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export abstract class TextLikeInputPlugin extends BasePlugin {
+    protected readonly syncPlaceholderAndMaxLength: boolean = false;
+
+    /**
+     * Opts the concrete plugin into the `ui.expandable` full-screen editor. Only the two multi-line widgets
+     * (`TextAreaPlugin`, `CodeEditorPlugin`) declare it; a single-line `sap.m.Input` gains nothing from an
+     * 80% x 80% dialog, so the directive stays inert everywhere else.
+     */
+    protected readonly supportsExpandDialog: boolean = false;
+
+    /**
+     * Renders the editable text control in edit mode or a display control in read-only host mode.
+     *
+     * @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 editable or display control.
+     */
+    public render(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string = "meta",
+        engineScopeId?: string,
+        onChange?: (isValid: boolean, fieldKey?: string, errorMessage?: string, controlId?: string) => void
+    ): Control {
+        this.initialize(metadata, bindingPath, modelName, onChange);
+
+        if (!this.isEditable) {
+            return this.renderDisplayControl(metadata, bindingPath, modelName, engineScopeId);
+        }
+
+        this.control = this.createEditableControl(metadata, bindingPath, modelName, engineScopeId);
+        if (this.supportsExpandDialog && metadata.ui?.expandable === true) {
+            this.control = this.wrapWithExpandButton(this.control, metadata, bindingPath, modelName);
+        }
+        this.applyCommonDirectives(this.control, metadata, modelName);
+        return this.control;
+    }
+
+    /**
+     * Wraps the editable control in an `sap.m.HBox` next to a full-screen trigger `sap.m.Button`, keeping the
+     * inner widget as `mainControl` so editability, validation state and value reads still target it.
+     *
+     * @param inner The editable control produced by `createEditableControl`.
+     * @param metadata The property metadata.
+     * @param bindingPath The property binding path.
+     * @param modelName The UI5 JSONModel alias.
+     * @returns {Control} The `HBox` wrapper holding the editor and its expand button.
+     */
+    private wrapWithExpandButton(
+        inner: Control,
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string
+    ): Control {
+        this.mainControl = this.mainControl ?? inner;
+        inner.setLayoutData(new FlexItemData({ growFactor: 1 }));
+        const expandBtn = new Button({
+            icon: "sap-icon://full-screen",
+            type: ButtonType.Transparent,
+            tooltip: I18n.getText(TEXT_KEY.editorExpand),
+            press: () => {
+                this.openExpandDialog(metadata, bindingPath, modelName);
+            }
+        });
+        return new HBox({
+            width: "100%",
+            alignItems: FlexAlignItems.Start,
+            items: [inner, expandBtn]
+        });
+    }
+
+    /**
+     * Opens a resizable 80% x 80% modal holding a second instance of the same editor bound to the same path,
+     * so edits made full-screen flow back through the shared two-way binding.
+     *
+     * @param metadata The property metadata.
+     * @param bindingPath The property binding path.
+     * @param modelName The UI5 JSONModel alias.
+     */
+    private openExpandDialog(metadata: IPropertyMetadata, bindingPath: string, modelName: string): void {
+        const expanded = this.createEditableControl(metadata, bindingPath, modelName);
+        if (expanded.getMetadata().hasProperty("height")) {
+            expanded.setProperty("height", "100%");
+        }
+        if (expanded.getMetadata().hasProperty("growing")) {
+            expanded.setProperty("growing", false);
+        }
+        const dialog = new Dialog({
+            title: metadata.ui?.label || metadata.title || I18n.getText(TEXT_KEY.editorDialogTitle),
+            contentWidth: "80%",
+            contentHeight: "80%",
+            verticalScrolling: false,
+            resizable: true,
+            content: [expanded],
+            beginButton: new Button({
+                text: I18n.getText(TEXT_KEY.editorClose),
+                press: () => {
+                    dialog.close();
+                }
+            }),
+            afterClose: () => {
+                dialog.destroy();
+            }
+        });
+        this.control?.addDependent(dialog);
+        dialog.open();
+    }
+
+    /**
+     * Creates the display-mode control when `this.isEditable === false`.
+     * Subclasses such as `PasswordPlugin` can override this to mask or format the display text.
+     *
+     * @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 display-mode `sap.m.Text` control.
+     */
+    protected renderDisplayControl(
+        _metadata: IPropertyMetadata,
+        bindingPath: string,
+        _modelName: string,
+        engineScopeId?: string
+    ): Control {
+        return this.createDisplayText(engineScopeId, bindingPath);
+    }
+
+    /**
+     * Constructs the concrete editable UI5 control (`Input`, `TextArea`, `CodeEditor`, etc.).
+     *
+     * @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 constructed editable control.
+     */
+    protected abstract createEditableControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control;
+
+    /**
+     * Retrieves the current string value from the text-like control, falling back to the bound model
+     * when the control has not yet been mounted into the DOM.
+     *
+     * @param sourceControl Optional runtime source control (e.g., cloned table cell).
+     * @returns {unknown} The current text value.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        if (!this.isEditable) {
+            return this.getModelValue(sourceControl) ?? "";
+        }
+        let target: Control | undefined = sourceControl ?? this.mainControl ?? this.control;
+        if (target instanceof HBox) {
+            target = target.getItems()[0];
+        }
+        const textControl = target as ITextLikeControl | undefined;
+        if (!textControl || typeof textControl.getValue !== "function") {
+            return this.getModelValue(target) ?? "";
+        }
+        const val = textControl.getValue();
+        if (val === "" && !textControl.getDomRef()) {
+            return this.getModelValue(textControl) ?? "";
+        }
+        return val;
+    }
+
+    /**
+     * Applies dynamic `readOnly`, `required`, and (when enabled) `placeholder`/`maxLength` state updates.
+     */
+    protected applyState(): void {
+        const target = (this.mainControl ?? this.control) as ITextLikeControl | undefined;
+        if (!target || !this.metadata || !this.isEditable) {
+            return;
+        }
+        if (typeof target.setEditable === "function") {
+            target.setEditable(this.isControlEditable());
+        }
+        if (typeof target.setRequired === "function") {
+            target.setRequired(this.isRequired());
+        }
+        if (this.syncPlaceholderAndMaxLength) {
+            if (typeof target.setPlaceholder === "function") {
+                target.setPlaceholder(this.metadata.ui?.placeholder || "");
+            }
+            if (typeof target.setMaxLength === "function") {
+                target.setMaxLength(this.metadata.maxLength || 0);
+            }
+        }
+    }
+}
+

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

@@ -1,90 +1,24 @@
-/**
- * @file TimePlugin.ts
- * @description Handles rendering logic for Time strings.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import TimePicker from "sap/m/TimePicker";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering and logic for time inputs.
- */
-export class TimePlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.TimePicker` 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 TimePicker 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.startsWith('/') ? bindingPath.substring(1) : bindingPath;
-        
-        if (!this.isEditable) {
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName, "sap.ui.model.type.Time", {
-                    formatOptions: {
-                        source: { pattern: "HH:mm:ss" },
-                        pattern: "HH:mm:ss"
-                    }
-                })
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new TimePicker({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName, "sap.ui.model.type.Time", {
-                formatOptions: {
-                    source: { pattern: "HH:mm:ss" },
-                    pattern: "HH:mm:ss"
-                }
-            }),
-            displayFormat: "HH:mm:ss",
-            editable: !fieldMetadata.ui?.readOnly,
-            required: fieldMetadata.required,
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent as sap.ui.base.Event).getParameter("value");
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current time string.
-     * @returns {unknown} The time string.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as TimePicker).getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            const input = this.control as TimePicker;
-            input.setEditable(!this.metadata.ui?.readOnly);
-            input.setRequired(this.metadata.required);
-        }
-    }
-}
+/**
+ * @file TimePlugin.ts
+ * @description Handles rendering logic for Time strings.
+ */
+
+import TimePicker from "sap/m/TimePicker";
+import { IPickerPluginConfig, PickerPlugin } from "./PickerPlugin";
+import { TEXT_KEY } from "../../utils/I18n";
+
+/**
+ * Handles rendering and logic for time inputs (`HH:mm:ss`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class TimePlugin extends PickerPlugin {
+    protected readonly pickerConfig: IPickerPluginConfig = {
+        ControlClass: TimePicker,
+        bindingType: "sap.ui.model.type.Time",
+        sourcePattern: "HH:mm:ss",
+        displayFormat: "HH:mm:ss",
+        parseErrorMessageKey: TEXT_KEY.timeParseError
+    };
+}