I am working on some updates on one of my Nodes.
I have created a list of options for my type.
Nodes.push({
value: `ZWJS-LOC:${location}`,
label: `${location.toUpperCase()}`,
});
const input = $('#node-input-filteredNodeId');
input.typedInput({
type: 'nodes',
types: [{
value: 'nodes',
multiple: true,
options: Nodes,
}]
});
I have a need to create separators.
Now, I am managing this with some very hacky methods (I am not happy with my self)
is there a native way to do this with typedInput using a custom list of options.
I,e using some type of optgroup support?
I couldn't see anything in docs, but understand this can sometimes be outdated
You can use the icon property to inject HTML content, just like the conf-types type does. But I don't know if you'll be able to get the desired final result.
options: function () {
if (this._optionsCache) {
return this._optionsCache
}
const configNodes = RED.nodes.registry.getNodeDefinitions({configOnly: true, filter: (def) => def.type !== "global-config"}).map((def) => {
// create a container with with 2 rows (row 1 for the name, row 2 for the module name in smaller, lighter font)
const container = $('<div style="display: flex; flex-direction: column; justify-content: space-between; row-gap: 1px;">')
const row1Name = $('<div>').text(def.type)
const row2Module = $('<div style="font-size: 0.8em; color: var(--red-ui-tertiary-text-color);">').text(def.set.module)
container.append(row1Name, row2Module)
return {
value: def.type,
name: def.type,
enabled: def.set.enabled ?? true,
local: def.set.local,
title: def.set.id, // tooltip e.g. "node-red-contrib-foo/bar"
module: def.set.module,
icon: container[0].outerHTML.trim(), // the typeInput will interpret this as html text and render it in the anchor
}
afficher l'original
Thanks - but not sure that is what I am after..
Indeed
Something like:
// options =
Array<{ value: string; label: string; group?: string }>
// or
Array<{ value?: string; label: string; group?: Array<{ value: string; label: string }> }>
Its based on this...
$("#node-input-example5").typedInput({type:"fruit", types:[{
value: "fruit",
multiple: true,
options: [
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
]
}]})
I have used it for a while.optgroup, so something like
$("#node-input-example5").typedInput({type:"foods", types:[{
value: "foods",
multiple: true,
options: [
{ value: "apple", label: "Apple", group: "Fruit"},
{ value: "banana", label: "Banana", group: "Fruit"},
{ value: "cherry", label: "Cherry", group: "Fruit"},
{ value: "twix", label: "Apple", group: "Chocolate"},
{ value: "chomp", label: "Banana", group: "Chocolate"},
{ value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
]
}]})
I think will be a great upgrade?
Note: Im going to move this to an FR.
Yep
The question is: can the appearance of the separator be customized? The data format will depend on this. Using custom optgroup.
I think if this is seen as an accepted feature.
$("#node-input-example5").typedInput({type:"foods", types:[{
value: "foods",
multiple: true,
grouped: true, /* <-- Here */
options: [
{ value: "apple", label: "Apple", group: "Fruit"},
{ value: "banana", label: "Banana", group: "Fruit"},
{ value: "cherry", label: "Cherry", group: "Fruit"},
{ value: "twix", label: "Apple", group: "Chocolate"},
{ value: "chomp", label: "Banana", group: "Chocolate"},
{ value: "Curley-wirly", label: "Cherry", group: "Chocolate"},
]
}]})
Example...
Devs might group certain options - but not all.
grouped:true
Options are only visible if they have a group
grouped:false | undefined
group is ignored - A flat list
+1 for groups!
When working on version 3 of CronPlus, I went hunting in the source code for group support after finding that separators were not a thing.
If anyone does pick this up, I would hope that on top of group support, it would add simple line separator support too.
In the mean time,
When I know something in my list is a separator.value has a maker : ZWJS-LOC:XXXX
Then css it out
a[value^="ZWJS-LOC:"] {
font-weight: bold;
pointer-events: none;
background-color: var(--red-ui-form-button-background);
}
a[value^="ZWJS-LOC:"] input[type="checkbox"] {
display: none;
}
Seems to work well for the interim.
using this...isSeparator to an option as apart of the native support, I think will allow great control of this..
$("#node-input-example5").typedInput({type:"foods", types:[{
value: "foods",
multiple: true,
options: [
{ label: "Fuit", isSeparator: true},
{ value: "apple", label: "Apple"},
{ value: "banana", label: "Banana"},
{ value: "cherry", label: "Cherry"},
{ label: "Chocolate", isSeparator: true},
{ value: "twix", label: "twix"},
{ value: "chomp", label: "chomp"},
{ value: "Curley-wirly", label: "Curley-wirly"},
]
}]})
I'll look into a way to integrate it.
