Some progress. Tabs with too big columns for the given window size are split into new tabs still following the schema. (have not merged the lists and toggle control yet)
// Create panel and add properties or data object with the values
const options = new _window({width: window.Width, height: window.Height, tabWidth: 'full', UI: 'material', properties: getPropertiesPairs(properties)});
options.addTab({title: 'Option 1', columns: 4, data: [
[
{title: 'Title 1', subTitle: 'Subtitle 1', values: [{name: 'This is a value This is ', pId: 'val1', pIdx: 1}, {name: 'Another value:', value: 'This is my text This is a value check 2 scripts\\SMP\\xxx-scripts\\helpers\\JSinputbox.js is is a value This is a'}]},
{subTitle: 'Subtitle 2', values: [{name: 'This is a value check 1:', value: true}]},
{values: [{name: 'Choose color:', value: 0xFFEAE4D1, mode: 'colorPicker'}]}
],
[ // If data doesn't have a pId or pIdx (associated to the previous properties object) then the value must be passed along the schema
{title: 'Title 2', subTitle: 'Subtitle 1', values: [{name: 'This is a value:', value: 20}, {name: 'Another value:', value: 30}]},
{title: 'Title 3', subTitle: 'Subtitle 2', values: [{name: 'This is a value check 2:', value: true, mode: 'checkGroup'}, {name: 'This is a value check 3:', value: false, mode: 'checkGroup'}]}
],
[
{title: 'Title 4', subTitle: 'Subtitle 1', values: [{name: 'This is a value:', value: ['Value 1', 'Value 2', 'Value 3']}]}
]
]});
options.addTab({title: 'Option 2', columns: 3, data: [
[
{title: 'Title 1', subTitle: 'Subtitle 1', values: [{name: 'This is a value:', value: 10}, {name: 'Another value:', value: 20}]},
{title: 'Title 2', subTitle: 'Subtitle 2', values: [{name: 'This is a value check 1:', value: true}]}
],
[
{title: 'Title 3', subTitle: 'Subtitle 1', values: [{name: 'This is a value:', value: 20}, {name: 'Another value:', value: 30}]},
{title: 'Title 4', subTitle: 'Subtitle 2', values: [{name: 'This is a value check 2:', value: false}]}
],
[
{title: 'Title 5', subTitle: 'Subtitle 1', values: [{name: 'This is a value:', value: 20}, {name: 'Another value:', value: 30}]},
{title: 'Title 6', subTitle: 'Subtitle 2', values: [{name: 'This is a value check 3:', value: false}, {name: 'This is a value check 4:', value: false}]}
]
]});
options.addTab({title: 'Option 3', columns: 1});
options.addTab({title: 'Option 4', columns: 2});
options.addTab({title: 'Option 5', columns: 3});
options.fitData(); // Fits the schema at start (is also done automatically on resize)
// Menus to swap panels
var menu = new _menu();
menu.newEntry({entryText: 'Show Options', func: () => {options.properties.bOptions[1] = true; overwriteProperties(options.properties); options.properties = getPropertiesPairs(properties); window.Repaint(true);}});
menu.newEntry({entryText: 'Show Main', func: () => {options.properties.bOptions[1] = false; overwriteProperties(options.properties); window.Repaint(true);}});
Tab titles would be cut to 3-4 letters if there is not enough width, and a tooltip would show fhe full name. Still deciding if the save/load part should be done manually (I do it when opening/closing the panel via menus), or via callbacks called by the options panel whenever a value changes, etc..