@siliconst/metaui 1.4.44 → 2.0.0

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

@@ -1,112 +1,137 @@
-/**
- * @file DropdownPlugin.ts
- * @description Renders a sap.m.Select utilizing the schema's valueHelp structure.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Select from "sap/m/Select";
-import Item from "sap/ui/core/Item";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering logic for dropdown inputs.
- * Maps the static `valueHelp` schema array to `sap.ui.core.Item` elements.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class DropdownPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.Select` component populated with schema-defined value help.
-     * 
-     * @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 Select 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) {
-            
-            
-            const valueHelpArray = fieldMetadata.valueHelp && Array.isArray(fieldMetadata.valueHelp) 
-                ? fieldMetadata.valueHelp 
-                : (fieldMetadata.enum ? fieldMetadata.enum.map(e => ({ key: String(e), text: String(e) })) : []);
-            
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName, undefined, {
-                    formatter: (key: string) => {
-                        const match = valueHelpArray.find(vh => vh.key === key);
-                        return match ? match.text : key;
-                    }
-                })
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        const select = new Select({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            selectedKey: this.generateBindingInfo(bindingPath, modelName),
-            enabled: !fieldMetadata.ui?.readOnly,
-            forceSelection: false,
-            change: (oEvent: sap.ui.base.Event) => {
-                const item = (oEvent as any).getParameter("selectedItem");
-                const val = item ? item.getKey() : "";
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        const valueHelpArray = fieldMetadata.valueHelp && Array.isArray(fieldMetadata.valueHelp) 
-            ? fieldMetadata.valueHelp 
-            : (fieldMetadata.enum ? fieldMetadata.enum.map(e => ({ key: String(e), text: String(e) })) : []);
-
-        if (valueHelpArray.length > 0) {
-            // Always add the empty placeholder so that 'required' checks can actually fire if the user hasn't made a choice
-            select.addItem(new Item({ key: "", text: "--- Select ---" }));
-            
-            valueHelpArray.forEach(vh => {
-                select.addItem(new Item({ key: vh.key, text: vh.text }));
-            });
-        }
-
-        this.control = select;
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the currently selected key.
-     * @returns {unknown} The selected key.
-     */
-    protected getValue(): unknown {
-        const val = this.control ? (this.control as Select).getSelectedKey() : null;
-        if (val && this.metadata && (this.metadata.type === "number" || this.metadata.type === "integer")) {
-            const parsed = parseFloat(val);
-            return isNaN(parsed) ? val : parsed;
-        }
-        return val;
-    }
-
-    /**
-     * Applies dynamic metadata state (e.g. readOnly) when the ConditionEngine fires.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            const select = this.control as Select;
-            select.setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file DropdownPlugin.ts
+ * @description Renders a sap.m.Select control for enum and valueHelp properties, preserving numeric enum types.
+ */
+
+import { OptionListPlugin } from "./OptionListPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Select from "sap/m/Select";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+
+/**
+ * Plugin responsible for rendering single-selection dropdown lists (`sap.m.Select`)
+ * populated from `metadata.enum`, `metadata.valueHelp`, or `metadata.ui.valueHelp`.
+ * Automatically coerces selected keys back to numbers when `metadata.type` is `"number"` or `"integer"`.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class DropdownPlugin extends OptionListPlugin {
+    /**
+     * Renders a `sap.m.Select` 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 Select 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.createOptionDisplayText(engineScopeId, bindingPath, modelName, metadata);
+        }
+
+        const isNumericType = metadata.type === "number" || metadata.type === "integer";
+
+        const select = new Select({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            selectedKey: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            forceSelection: false,
+            width: "100%",
+            required: this.isRequired(),
+            change: (oEvent: Event) => {
+                const src = oEvent.getSource() as Select;
+                if (isNumericType) {
+                    const rawKey = src.getSelectedKey();
+                    const numVal = Number(rawKey);
+                    if (rawKey !== "" && !Number.isNaN(numVal)) {
+                        this.commitValue(src, numVal);
+                    }
+                }
+                this.notifyChange(src.getId());
+            }
+        });
+
+        this.populateItems(select, metadata);
+
+        this.control = select;
+        this.applyCommonDirectives(this.control, metadata, modelName);
+
+        return this.control;
+    }
+
+    /**
+     * Populates the `sap.m.Select` items from `metadata.ui.valueHelp`, `metadata.valueHelp`, or `metadata.enum`.
+     *
+     * @param select The target `sap.m.Select` control.
+     * @param metadata The property metadata containing options.
+     */
+    private populateItems(select: Select, metadata: IPropertyMetadata): void {
+        this.syncOptionItems(
+            select,
+            this.buildOptionItems(metadata, metadata.enum),
+            () => {
+                const prevKey = typeof select.getSelectedKey === "function" ? select.getSelectedKey() : "";
+                return prevKey ? [prevKey] : [];
+            },
+            (keys) => {
+                if (typeof select.setSelectedKey === "function") {
+                    select.setSelectedKey(keys[0]);
+                }
+            }
+        );
+    }
+
+    /**
+     * Retrieves the currently selected key, coerced to a number if the property type is numeric.
+     *
+     * @param sourceControl Optional runtime source control (e.g., cloned table cell).
+     * @returns {unknown} The selected value.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        if (!this.isEditable) {
+            return this.getModelValue(sourceControl) ?? "";
+        }
+        const select = (sourceControl ?? this.control) as Select | undefined;
+        if (!select || typeof select.getSelectedKey !== "function") {
+            return this.getModelValue(select) ?? "";
+        }
+        const key = select.getSelectedKey();
+        if (key === "" && !select.getDomRef()) {
+            const modelVal = this.getModelValue(select);
+            if (modelVal !== undefined && modelVal !== null && modelVal !== "") {
+                return modelVal;
+            }
+        }
+        if ((this.metadata?.type === "number" || this.metadata?.type === "integer") && key !== "") {
+            const num = Number(key);
+            if (!Number.isNaN(num)) {
+                return num;
+            }
+        }
+        return key;
+    }
+
+    /**
+     * Applies dynamic `readOnly`, `required`, and item list updates to the `Select` control.
+     */
+    protected applyState(): void {
+        if (!this.control || !this.metadata || !this.isEditable) {
+            return;
+        }
+        const select = this.control as Select;
+        select.setEditable(this.isControlEditable());
+        select.setRequired(this.isRequired());
+        this.populateItems(select, this.metadata);
+    }
+}

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

@@ -1,48 +1,47 @@
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import Input from "sap/m/Input";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-export class EmailPlugin extends BasePlugin {
-    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("/", "");
-        
-        if (!this.isEditable) {
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName)
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new Input({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            type: "Email",
-            maxLength: fieldMetadata.maxLength || 0,
-            required: !!fieldMetadata.required,
-            change: (oEvent: sap.ui.base.Event) => {
-                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;
-    }
-
-    protected getValue(): unknown {
-        return this.control && this.control.getMetadata().getName() === "sap.m.Input" ? (this.control as Input).getProperty('value') : null;
-    }
-
-    protected applyState(): void {
-        if (!this.control || !this.metadata || this.control.getMetadata().getName() !== "sap.m.Input") return;
-        const input = this.control as Input;
-        input.setEditable(!this.metadata.ui?.readOnly);
-        input.setRequired(!!this.metadata.required);
-    }
-}
+/**
+ * @file EmailPlugin.ts
+ * @description Renders an email-typed sap.m.Input control.
+ */
+
+import { TextLikeInputPlugin } from "./TextLikeInputPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import Input from "sap/m/Input";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import { InputType } from "sap/m/library";
+
+/**
+ * Handles rendering logic for Email strings (`ui.widget = "email"` or `format = "email"`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class EmailPlugin extends TextLikeInputPlugin {
+    /**
+     * Constructs the editable `sap.m.Input` control with `type: InputType.Email`.
+     *
+     * @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 email Input control.
+     */
+    protected createEditableControl(
+        metadata: IPropertyMetadata,
+        bindingPath: string,
+        modelName: string,
+        engineScopeId?: string
+    ): Control {
+        return new Input({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            type: InputType.Email,
+            value: this.generateBindingInfo(bindingPath, modelName) as unknown as string,
+            placeholder: metadata.ui?.placeholder || "example@domain.com",
+            maxLength: metadata.maxLength || 0,
+            required: this.isRequired(),
+            change: (oEvent: Event) => {
+                this.notifyChange((oEvent.getSource() as Control).getId());
+            }
+        });
+    }
+}

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

@@ -1,82 +1,166 @@
-/**
- * @file FileUploaderPlugin.ts
- * @description Renders a sap.ui.unified.FileUploader.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import FileUploader from "sap/ui/unified/FileUploader";
-import Control from "sap/ui/core/Control";
-import LinkControl from "sap/m/Link";
-
-/**
- * Handles rendering logic for file uploads.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class FileUploaderPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.ui.unified.FileUploader` 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 FileUploader 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 LinkControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName),
-                href: this.generateBindingInfo(bindingPath, modelName), // Assuming the value is a URL to the file
-                target: "_blank"
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-
-        this.control = new FileUploader({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            value: this.generateBindingInfo(bindingPath, modelName),
-            enabled: !fieldMetadata.ui?.readOnly,
-            placeholder: fieldMetadata.ui?.label || "Choose a file...",
-            width: "100%",
-            change: (oEvent: sap.ui.base.Event) => {
-                const val = (oEvent as any).getParameter("newValue");
-                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 file path.
-     * @returns {unknown} The file value.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as FileUploader).getProperty('value') : null;
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            (this.control as FileUploader).setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file FileUploaderPlugin.ts
+ * @description Renders a sap.ui.unified.FileUploader control with live image preview and Base64 conversion.
+ */
+
+import { BasePlugin } from "./BasePlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import FileUploader from "sap/ui/unified/FileUploader";
+import VBox from "sap/m/VBox";
+import Image from "sap/m/Image";
+import Text from "sap/m/Text";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import { UrlValidator } from "../../utils/UrlValidator";
+import { I18n, TEXT_KEY } from "../../utils/I18n";
+
+/**
+ * Handles rendering logic for binary/byte string uploads.
+ * Converts selected files to Base64 Data URLs and binds them to the JSON model.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class FileUploaderPlugin extends BasePlugin {
+    /**
+     * Renders a `sap.ui.unified.FileUploader` paired with an image preview inside a `sap.m.VBox`.
+     *
+     * @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 VBox or Image 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);
+
+        const safeImageSrcBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+            formatter: (val: unknown) => (UrlValidator.isSafeImageSource(val) ? val.trim() : "")
+        });
+
+        const safeImageVisibleBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+            formatter: (val: unknown) => UrlValidator.isSafeImageSource(val)
+        });
+
+        if (!this.isEditable) {
+            const displayTextBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+                formatter: (val: unknown) => {
+                    if (UrlValidator.isSafeImageSource(val)) {
+                        return "";
+                    }
+                    return typeof val === "string" && val.trim() ? val.trim() : I18n.getText(TEXT_KEY.fileUploadNoFile);
+                }
+            });
+            const displayTextVisibleBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+                formatter: (val: unknown) => !UrlValidator.isSafeImageSource(val)
+            });
+            const displayImage = new Image({
+                src: safeImageSrcBinding as unknown as string,
+                visible: safeImageVisibleBinding as unknown as boolean,
+                width: "200px",
+                alt: metadata.ui?.label || I18n.getText(TEXT_KEY.fileUploadImageAlt)
+            });
+            const displayText = new Text({
+                text: displayTextBinding as unknown as string,
+                visible: displayTextVisibleBinding as unknown as boolean
+            });
+            this.control = new VBox({
+                id: this.generateStableId(engineScopeId, bindingPath),
+                items: [displayImage, displayText]
+            }).addStyleClass("sapUiSmallMarginBottom");
+            this.applyCommonDirectives(this.control, metadata, modelName);
+            return this.control;
+        }
+
+        const vBox = new VBox({
+            id: this.generateStableId(engineScopeId, bindingPath)
+        });
+
+        const previewImage = new Image({
+            src: safeImageSrcBinding as unknown as string,
+            visible: safeImageVisibleBinding as unknown as boolean,
+            width: "200px",
+            densityAware: false
+        }).addStyleClass("sapUiSmallMarginBottom");
+
+        const uploader = new FileUploader({
+            id: this.generateStableId(engineScopeId, `${bindingPath}-uploader`),
+            placeholder: metadata.ui?.placeholder || I18n.getText(TEXT_KEY.fileUploadPlaceholder),
+            enabled: this.isControlEditable(),
+            width: "100%",
+            buttonText: I18n.getText(TEXT_KEY.fileUploadBrowse),
+            change: this.onFileChange.bind(this)
+        });
+
+        vBox.addItem(previewImage);
+        vBox.addItem(uploader);
+
+        // Assign mainControl before applyCommonDirectives so enabled/valueState target the FileUploader
+        this.mainControl = uploader;
+        this.control = vBox;
+
+        this.applyCommonDirectives(this.control, metadata, modelName);
+        return this.control;
+    }
+
+    /**
+     * Reads the selected file via `FileReader.readAsDataURL` and writes the Base64 payload to the bound model path.
+     *
+     * @param oEvent The `FileUploader` change event.
+     */
+    private onFileChange(oEvent: Event): void {
+        const uploader = (oEvent.getSource() as FileUploader | undefined) ?? (this.mainControl as FileUploader | undefined);
+        const params = oEvent.getParameters() as { files?: FileList | File[] };
+        const files = params.files;
+
+        if (files && files.length > 0 && uploader) {
+            const file = files[0];
+            const reader = new FileReader();
+
+            reader.onload = (e: ProgressEvent<FileReader>) => {
+                const base64Data = e.target?.result;
+                if (typeof base64Data === "string" && !uploader.isDestroyed() && this.commitValue(uploader, base64Data)) {
+                    this.notifyChange(uploader.getId());
+                }
+            };
+
+            reader.readAsDataURL(file);
+        } else {
+            this.notifyChange(uploader?.getId());
+        }
+    }
+
+    /**
+     * Retrieves the current Base64 image data or filename from the bound model.
+     * @param sourceControl Optional cloned control instance for table rows.
+     * @returns {unknown} The stored file value.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        const target = sourceControl || this.mainControl || this.control;
+        if (!target) {
+            return null;
+        }
+        const modelVal = this.getModelValue(target);
+        if (modelVal !== undefined) {
+            return modelVal;
+        }
+        return typeof (target as FileUploader).getValue === "function" ? (target as FileUploader).getValue() : null;
+    }
+
+    /**
+     * Applies dynamic `readOnly` state to the FileUploader control.
+     */
+    protected applyState(): void {
+        if (this.mainControl && this.metadata && this.isEditable) {
+            const uploader = this.mainControl as FileUploader;
+            uploader.setEnabled(this.isControlEditable());
+        }
+    }
+}