Migrate ABViewForm

[benthongtiang]

Moved the form system to a more modern structure and fixed several display and data bugs.

1. Moved to Plugin System

• Moved all Form files (Buttons, Textboxes, dropdowns, etc.) into a new "Plugin" folder.
• Separated the code into Core (logic) and Components (the UI you see).

2. Visual & UI Fixes

• Tree Fields: Fixed the Tree view in forms to look exactly like the old version.
• JSON Fields: Fixed the issue where it showed [object Object]. Now it shows readable text.
• Grid Editing: You can now click and edit JSON data directly in the data grid.
• Text Formatting: Fixed long text and JSON to keep their line breaks and spacing in the Detail view.

3. Bug Fixes

• Data Protection: Fixed a bug where data in the Grid would disappear after opening a Detail view.
• Tree Data: Improved how the system reads Tree values so they don't get lost when you edit a record.
• Broken Code: Fixed several "undefined variable" errors found during code testing (linting).

4. Code Cleanup

• Removed old, unused code.
• Simplified how different parts of the form talk to each other to make the system faster.

Relate PR.
CruGlobal/appbuilder_class_core#339
CruGlobal/plugin_ABDesigner#348

[github-actions]

Please add one release label:
major (for breaking changes), minor (for new features), patch (for bug fixes) or skip-release (to skip the auto release process).

[johnny-hausman]

You are definitely tackling a big project and you are off to a good start.

OK, So I have a thought about how we might make this a little less verbose.

What if we do two things:

1. make each of our Form items manage their own Core version. For example we let ABViewFormButton internally prepare it's ABViewFormButtonCore value.

2. we make a FormAPI value, that packages the necessary objects that all our related form items need.

If we do that, then we could simplify some of this setup to be like:

First, create a "barrel" file:
view_form/FormComponents.js:

export { default as FNAbviewformButton } from "./FNAbviewformButton.js";
export { default as FNAbviewformCheckbox } from "./FNAbviewformCheckbox.js";
export { default as FNAbviewformConnect } from "./FNAbviewformConnect.js";
export { default as FNAbviewformCustom } from "./FNAbviewformCustom.js";
export { default as FNAbviewformDatepicker } from "./FNAbviewformDatepicker.js";
export { default as FNAbviewformItem } from "./FNAbviewformItem.js";
export { default as FNAbviewformJson } from "./FNAbviewformJson.js";
export { default as FNAbviewformNumber } from "./FNAbviewformNumber.js";
export { default as FNAbviewformReadonly } from "./FNAbviewformReadonly.js";
export { default as FNAbviewformSelectMultiple } from "./FNAbviewformSelectMultiple.js";
export { default as FNAbviewformSelectSingle } from "./FNAbviewformSelectSingle.js";
export { default as FNAbviewformTree } from "./FNAbviewformTree.js";
export { default as FNAbviewformTextbox } from "./FNAbviewformTextbox.js";
export { default as FNAbviewformURL } from "./FNAbviewformURL.js";

Then your view_form/ABviewform.js would have:

let FormAPI = {
	ABViewComponentPlugin,
    ABViewFormItemComponent,
	ABViewPropertyAddPage,
	ABViewPropertyEditPage,
	ABFieldImage,
	FocusableTemplate,
}


import * as fObjs from "./FormComponents.js";
let views = Object.values(fObjs).map((FNv) => FNv(FormAPI));

views.forEach((v) => {
  v.getPluginKey = () => v.common().key;
  v.getPluginType = () => "view";
});

This could reduce some of the code in the main file and make things easier to read/follow.

[github-actions]

Lighthouse Performance Report

Metrics

📄Full Report
Note: Above values are an average of 3 reports, only the last report was uploaded.