@siliconst/metaui 1.4.44 → 2.0.0

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

@@ -1,206 +1,154 @@
-/**
- * @file MultiInputPlugin.ts
- * @description Renders a sap.m.MultiInput for primitive arrays (e.g. arrays of strings).
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import { UI5_EVENT, UI5_AGGREGATION } from "../../constants/MetaUIConstants";
-import MultiInput from "sap/m/MultiInput";
-import Token from "sap/m/Token";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-import JSONModel from "sap/ui/model/json/JSONModel";
-import Event from "sap/ui/base/Event";
-import ListBinding from "sap/ui/model/ListBinding";
-import { Logger } from "../../utils/Logger";
-
-/**
- * Handles rendering logic for arrays of primitive strings.
- * Users can type custom strings and press Enter to add them as tokens.
- * Adheres strictly to native UI5 Model-View-Controller ListBinding principles.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class MultiInputPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.MultiInput` component natively bound to a JSONModel array.
-     * 
-     * @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 MultiInput 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;
-        this.modelName = modelName;
-
-        if (!this.isEditable) {
-            this.control = new TextControl({
-                id: this.generateStableId(engineScopeId, bindingPath),
-                text: this.generateBindingInfo(bindingPath, modelName, undefined, {
-                    formatter: (val: unknown[]) => Array.isArray(val) ? val.join(", ") : ""
-                })
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-        const plugin = this;
-
-        const mi = new MultiInput({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            enabled: !fieldMetadata.ui?.readOnly,
-            placeholder: fieldMetadata.ui?.label || "Type and press Enter...",
-            showValueHelp: false, // We don't have a list of options for primitive tags
-            tokenUpdate: (oEvent: Event) => {
-                const type = (oEvent.getParameter("type") as unknown) as string;
-                const sourceMi = oEvent.getSource() as MultiInput;
-                
-                // Native UI5 tokens removed via the 'x' icon. We sync this directly back to the model.
-                if (type === "removed") {
-                    const removedTokens = (oEvent.getParameter("removedTokens") as unknown) as Token[];
-                    const removedTexts = removedTokens.map(t => t.getText());
-                    
-                    const bindingInfo = plugin.getNativeBindingContext(sourceMi);
-                    if (bindingInfo) {
-                        const { model, absPath } = bindingInfo;
-                        const currentArray = (model.getProperty(absPath) || []) as string[];
-                        const newArray = currentArray.filter(text => !removedTexts.includes(text));
-                        
-                        Logger.debug(`[MultiInputPlugin] Removing tokens from absolute path: ${absPath}`, removedTexts.join(", "), "MultiInputPlugin");
-                        plugin.syncTokensToModel(sourceMi, newArray);
-                    }
-                }
-            }
-        });
-
-        // The native addValidator pipeline is notoriously unreliable when there is no suggestion list bound,
-        // often completely dropping the 'Enter' key event. Therefore, we use the standard `submit` event 
-        // inherited from InputBase to robustly capture when the user presses Enter.
-        if (typeof mi.attachSubmit === "function") {
-            mi.attachSubmit((oEvent: Event) => {
-                const sourceMi = oEvent.getSource() as MultiInput;
-                const val = ((oEvent.getParameter("value") as unknown) as string || sourceMi.getProperty('value')).trim();
-                
-                if (val) {
-                    const bindingInfo = plugin.getNativeBindingContext(sourceMi);
-                    if (bindingInfo) {
-                        const { model, absPath } = bindingInfo;
-                        const currentArray = (model.getProperty(absPath) || []) as string[];
-                        
-                        if (!currentArray.includes(val)) { // Prevent exact duplicates in primitive arrays
-                            const newArray = [...currentArray, val];
-                            Logger.debug(`[MultiInputPlugin] submit (Enter) fired. Adding token to absolute path: ${absPath}`, val, "MultiInputPlugin");
-                            
-                            // Natively clear the text input
-                            sourceMi.setValue("");
-                            
-                            // Synchronize natively to the JSON model
-                            plugin.syncTokensToModel(sourceMi, newArray);
-                        } else {
-                            sourceMi.setValue("");
-                        }
-                    }
-                }
-            });
-        }
-
-        // We must still register an addValidator returning null.
-        // If UI5 *does* sporadically trigger the validator pipeline, this prevents the control 
-        // from attempting to natively mutate the bound ListBinding aggregation, which causes a core crash.
-        mi.addValidator(function(args: { text: string }) {
-            return null;
-        });
-
-        // Bind existing strings to tokens using a factory function
-        mi.bindAggregation(UI5_AGGREGATION.TOKENS, this.generateBindingInfo(bindingPath, modelName, undefined, {
-            factory: (sId: string, oContext: sap.ui.model.Context) => {
-                const text = (oContext.getObject() as string) || "";
-                return new Token(sId, { key: text, text: text });
-            }
-        }));
-
-        this.control = mi;
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-        return this.control as Control;
-    }
-
-    /**
-     * Extracts the native UI5 ListBinding, its absolute path, and underlying JSONModel.
-     * 
-     * @param sourceMi The live, cloned MultiInput control instance inside the DOM tree.
-     * @returns Object containing model and absolute path, or null if resolution fails.
-     */
-    private getNativeBindingContext(sourceMi: MultiInput): { model: JSONModel, absPath: string } | null {
-        const binding = sourceMi.getBinding(UI5_AGGREGATION.TOKENS) as ListBinding;
-        if (!binding) {
-            Logger.error("[MultiInputPlugin] token list binding is completely missing on the source clone.");
-            return null;
-        }
-
-        const model = binding.getModel() as JSONModel;
-        if (!model) {
-            Logger.error("[MultiInputPlugin] Failed to resolve underlying JSONModel from ListBinding.");
-            return null;
-        }
-
-        let absPath: string;
-        const ctx = binding.getContext();
-        const bindingPath = binding.getPath();
-
-        if (ctx) {
-            const cp = ctx.getPath();
-            absPath = cp.endsWith("/") ? cp + bindingPath : (cp === "/" ? "/" + bindingPath : cp + "/" + bindingPath);
-        } else {
-            absPath = bindingPath.startsWith("/") ? bindingPath : "/" + bindingPath;
-        }
-
-        return { model, absPath };
-    }
-
-    /**
-     * Synchronizes the primitive string array derived from the MultiInput tokens directly back into the Model.
-     * 
-     * @param sourceMi The live MultiInput clone.
-     * @param newArray The final array of string values to save.
-     */
-    private syncTokensToModel(sourceMi: MultiInput, newArray: string[]): void {
-        const bindingInfo = this.getNativeBindingContext(sourceMi);
-        if (!bindingInfo) return;
-
-        const { model, absPath } = bindingInfo;
-        
-        model.setProperty(absPath, newArray);
-        model.refresh(true); // Force UI5 to sync bindings down the tree
-
-        if (this.onChange) {
-            const result = this.validate();
-            this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-        }
-    }
-
-    /**
-     * Retrieves the current primitive array from the control.
-     * @returns {unknown} The array of string tokens.
-     */
-    protected getValue(): unknown {
-        if (!this.control) return [];
-        const tokens = (this.control as MultiInput).getTokens();
-        return tokens.map(t => t.getText());
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            (this.control as MultiInput).setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file MultiInputPlugin.ts
+ * @description Renders a sap.m.MultiInput control for primitive array tokenization.
+ */
+
+import { BasePlugin } from "./BasePlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import MultiInput from "sap/m/MultiInput";
+import Token from "sap/m/Token";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+import { I18n, TEXT_KEY } from "../../utils/I18n";
+
+/**
+ * Plugin responsible for rendering tokenized primitive arrays (`sap.m.MultiInput`).
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class MultiInputPlugin extends BasePlugin {
+    /**
+     * Renders a `sap.m.MultiInput` component bound to a primitive array in the `JSONModel`.
+     * The token entry field honours `items.maxLength` (the JSON-Schema-correct per-entry limit) and falls back
+     * to the property-level `maxLength` so the directive behaves as it does on every other text entry control.
+     *
+     * @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 MultiInput 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) {
+            const arrayFormatterBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+                formatter: (val: unknown) => (Array.isArray(val) ? val.join(", ") : "")
+            }) as PropertyBindingInfo;
+            return this.createDisplayText(engineScopeId, bindingPath, arrayFormatterBinding);
+        }
+
+        const isNumericItems =
+            metadata.items?.type === "number" || metadata.items?.type === "integer";
+
+        const multiInput = new MultiInput({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            width: "100%",
+            showValueHelp: false,
+            placeholder: metadata.ui?.placeholder || I18n.getText(TEXT_KEY.multiInputPlaceholder),
+            maxLength: metadata.items?.maxLength ?? metadata.maxLength ?? 0,
+            required: this.isRequired(),
+            tokenUpdate: (oEvent: Event) => {
+                const params = oEvent.getParameters() as {
+                    type?: string;
+                    addedTokens?: Token[];
+                    removedTokens?: Token[];
+                };
+                const src = oEvent.getSource() as MultiInput;
+                const currentTokens = src.getTokens();
+                const removedSet = new Set(params.removedTokens || []);
+                const survivingKeys = currentTokens
+                    .filter((t) => !removedSet.has(t))
+                    .map((t) => t.getKey());
+                if (Array.isArray(params.addedTokens)) {
+                    for (const added of params.addedTokens) {
+                        const addedKey = added.getKey();
+                        if (!survivingKeys.includes(addedKey)) {
+                            survivingKeys.push(addedKey);
+                        }
+                    }
+                }
+                const finalValues = isNumericItems
+                    ? survivingKeys.map((v) => Number(v)).filter((n) => !Number.isNaN(n))
+                    : survivingKeys;
+
+                this.commitValue(src, finalValues);
+                this.notifyChange(src.getId());
+            }
+        });
+
+        multiInput.addValidator((args: { text: string }) => {
+            const text = args.text.trim();
+            if (!text) {
+                return null;
+            }
+            if (isNumericItems && Number.isNaN(Number(text))) {
+                return null;
+            }
+            return new Token({ key: text, text });
+        });
+
+        multiInput.bindAggregation("tokens", {
+            path: `${modelName}>${bindingPath}`,
+            template: new Token({
+                key: `{${modelName}>}`,
+                text: `{${modelName}>}`
+            }),
+            templateShareable: true
+        });
+
+        this.control = multiInput;
+        this.applyCommonDirectives(this.control, metadata, modelName);
+
+        return this.control;
+    }
+
+    /**
+     * Retrieves the current array of token values from the bound model or `MultiInput` tokens.
+     *
+     * @param sourceControl Optional runtime source control (e.g., cloned table cell).
+     * @returns {unknown} The array of primitive values.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        if (!this.isEditable) {
+            const modelVal = this.getModelValue(sourceControl);
+            return Array.isArray(modelVal) ? modelVal : [];
+        }
+        const mi = (sourceControl ?? this.control) as MultiInput | undefined;
+        if (!mi) {
+            return [];
+        }
+        if (typeof mi.getTokens === "function") {
+            const keys = mi.getTokens().map((t) => t.getKey());
+            if (keys.length > 0 || mi.getDomRef()) {
+                if (this.metadata?.items?.type === "number" || this.metadata?.items?.type === "integer") {
+                    return keys.map((k) => Number(k)).filter((n) => !Number.isNaN(n));
+                }
+                return keys;
+            }
+        }
+        const modelVal = this.getModelValue(mi);
+        return Array.isArray(modelVal) ? modelVal : [];
+    }
+
+    /**
+     * Applies dynamic `readOnly` and `required` state updates to the `MultiInput`.
+     */
+    protected applyState(): void {
+        if (!this.control || !this.metadata || !this.isEditable) {
+            return;
+        }
+        const mi = this.control as MultiInput;
+        mi.setEditable(this.isControlEditable());
+        mi.setRequired(this.isRequired());
+    }
+}

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

@@ -1,90 +1,154 @@
-/**
- * @file MultiSelectPlugin.ts
- * @description Renders a sap.m.MultiComboBox for selecting multiple string values.
- */
-
-import { BasePlugin } from "./BasePlugin";
-import { IPropertyMetadata } from "../../interfaces/ISchema";
-import MultiComboBox from "sap/m/MultiComboBox";
-import Item from "sap/ui/core/Item";
-import Control from "sap/ui/core/Control";
-import TextControl from "sap/m/Text";
-
-/**
- * Handles rendering logic for selecting multiple strings from a predefined list.
- * Expects the payload to be an array of strings.
- * 
- * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
- * @public
- */
-export class MultiSelectPlugin extends BasePlugin {
-    /**
-     * Renders a `sap.m.MultiComboBox` 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 MultiComboBox 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: unknown[]) => Array.isArray(val) ? val.join(", ") : ""
-                })
-            });
-            this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-            return this.control as Control;
-        }
-        
-        const mcb = new MultiComboBox({
-            id: this.generateStableId(engineScopeId, bindingPath),
-            selectedKeys: this.generateBindingInfo(bindingPath, modelName),
-            enabled: !fieldMetadata.ui?.readOnly,
-            placeholder: fieldMetadata.ui?.label || "Select items...",
-            selectionChange: (oEvent: sap.ui.base.Event) => {
-                const keys = (this.control as MultiComboBox).getSelectedKeys();
-                const result = this.validate();
-                if (this.onChange) {
-                    this.onChange(result.isValid, this.fieldKey, result.errorMessage);
-                }
-            }
-        });
-
-        if (fieldMetadata.enum) {
-            fieldMetadata.enum.forEach((val: string | number) => {
-                mcb.addItem(new Item({ key: val.toString(), text: val.toString() }));
-            });
-        }
-
-        this.control = mcb;
-        this.applyCommonDirectives(this.control, fieldMetadata, modelName);
-        return this.control as Control;
-    }
-
-    /**
-     * Retrieves the current selection keys.
-     * @returns {unknown} The selected keys.
-     */
-    protected getValue(): unknown {
-        return this.control ? (this.control as MultiComboBox).getSelectedKeys() : [];
-    }
-
-    /**
-     * Applies dynamic read-only state.
-     */
-    protected applyState(): void {
-        if (this.control && this.metadata) {
-            if (!this.isEditable) return;
-            (this.control as MultiComboBox).setEnabled(!this.metadata.ui?.readOnly);
-        }
-    }
-}
+/**
+ * @file MultiSelectPlugin.ts
+ * @description Renders a sap.m.MultiComboBox control for array properties with enum or valueHelp options.
+ */
+
+import { OptionListPlugin } from "./OptionListPlugin";
+import { IPropertyMetadata } from "../../interfaces/ISchema";
+import MultiComboBox from "sap/m/MultiComboBox";
+import Control from "sap/ui/core/Control";
+import Event from "sap/ui/base/Event";
+import { PropertyBindingInfo } from "sap/ui/base/ManagedObject";
+
+/**
+ * Plugin responsible for rendering multi-selection combo boxes (`sap.m.MultiComboBox`)
+ * populated from `metadata.items.enum`, `metadata.enum`, `metadata.valueHelp`, or `metadata.ui.valueHelp`.
+ *
+ * @namespace nz.co.siliconst.ui5.metaui.plugins.controls
+ * @internal
+ */
+export class MultiSelectPlugin extends OptionListPlugin {
+    /**
+     * Renders a `sap.m.MultiComboBox` 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 MultiComboBox 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) {
+            const vhList = this.resolveValueHelpList(metadata);
+            const arrayFormatterBinding = this.generateBindingInfo(bindingPath, modelName, undefined, {
+                formatter: (val: unknown) => {
+                    if (!Array.isArray(val)) {
+                        return "";
+                    }
+                    if (vhList && vhList.length > 0) {
+                        return val
+                            .map((item) => {
+                                const matched = vhList.find((opt) => String(opt.key) === String(item));
+                                return matched ? String(matched.text) : String(item);
+                            })
+                            .join(", ");
+                    }
+                    return val.join(", ");
+                }
+            }) as PropertyBindingInfo;
+            return this.createDisplayText(engineScopeId, bindingPath, arrayFormatterBinding);
+        }
+
+        const isNumericItems =
+            metadata.items?.type === "number" || metadata.items?.type === "integer";
+
+        const selectedKeysBinding = isNumericItems
+            ? this.generateBindingInfo(bindingPath, modelName, undefined, {
+                  formatter: (val: unknown) => (Array.isArray(val) ? val.map((v) => String(v)) : [])
+              })
+            : this.generateBindingInfo(bindingPath, modelName);
+
+        const mcb = new MultiComboBox({
+            id: this.generateStableId(engineScopeId, bindingPath),
+            selectedKeys: selectedKeysBinding as unknown as string[],
+            width: "100%",
+            placeholder: metadata.ui?.placeholder || "",
+            required: this.isRequired(),
+            selectionFinish: (oEvent: Event) => {
+                const src = oEvent.getSource() as MultiComboBox;
+                const keys = src.getSelectedKeys();
+                const finalVals = isNumericItems
+                    ? keys.map((k) => Number(k)).filter((n) => !Number.isNaN(n))
+                    : keys;
+                this.commitValue(src, finalVals);
+                this.notifyChange(src.getId());
+            }
+        });
+
+        this.populateItems(mcb, metadata);
+
+        this.control = mcb;
+        this.applyCommonDirectives(this.control, metadata, modelName);
+
+        return this.control;
+    }
+
+    /**
+     * Populates the `MultiComboBox` items from `metadata.ui.valueHelp`, `metadata.valueHelp`, `metadata.items.enum`, or `metadata.enum`.
+     *
+     * @param mcb The target `sap.m.MultiComboBox` control.
+     * @param metadata The property metadata containing options.
+     */
+    private populateItems(mcb: MultiComboBox, metadata: IPropertyMetadata): void {
+        this.syncOptionItems(
+            mcb,
+            this.buildOptionItems(metadata, metadata.items?.enum || metadata.enum),
+            () => (typeof mcb.getSelectedKeys === "function" ? mcb.getSelectedKeys() : []),
+            (keys) => {
+                if (typeof mcb.setSelectedKeys === "function") {
+                    mcb.setSelectedKeys(keys);
+                }
+            }
+        );
+    }
+
+    /**
+     * Retrieves the array of selected keys from the `MultiComboBox`, coerced to numbers if `items.type` is numeric.
+     *
+     * @param sourceControl Optional runtime source control (e.g., cloned table cell).
+     * @returns {unknown} The selected keys array.
+     */
+    protected getValue(sourceControl?: Control): unknown {
+        if (!this.isEditable) {
+            const modelVal = this.getModelValue(sourceControl);
+            return Array.isArray(modelVal) ? modelVal : [];
+        }
+        const mcb = (sourceControl ?? this.control) as MultiComboBox | undefined;
+        if (!mcb || typeof mcb.getSelectedKeys !== "function") {
+            return [];
+        }
+        const keys = mcb.getSelectedKeys();
+        if (keys.length === 0 && !mcb.getDomRef()) {
+            const modelVal = this.getModelValue(mcb);
+            if (Array.isArray(modelVal)) {
+                return modelVal;
+            }
+        }
+        if (this.metadata?.items?.type === "number" || this.metadata?.items?.type === "integer") {
+            return keys.map((k) => Number(k)).filter((n) => !Number.isNaN(n));
+        }
+        return keys;
+    }
+
+    /**
+     * Applies dynamic `readOnly`, `required`, and item list updates to the `MultiComboBox`.
+     */
+    protected applyState(): void {
+        if (!this.control || !this.metadata || !this.isEditable) {
+            return;
+        }
+        const mcb = this.control as MultiComboBox;
+        mcb.setEditable(this.isControlEditable());
+        mcb.setRequired(this.isRequired());
+        this.populateItems(mcb, this.metadata);
+    }
+}