sharing a couple of smallish but visually relevant things Ive come across. 1) props table, and setting a bg / fg color for values; There were no props that I could see would allow me to set a BG color to hilite say an alarm condition. So I added them and shoved the propstable.vue into the custom node and hell it works.
the other thing that I did was to put the edit icon, and the edit submit / cancel icons on the bottom of the props table. This is due to using two props tables side by side in a panel, One is showing the elements of an object mapped to a tank object for the Hi and Low Alarm and shut down events. This is the table I wanted to change the BG value on. The other props table in that same panel arrangement is displaying and allowing edit of the Alarm Set Points Object allowing the operator to see alarms, and adjust setpoints as necessary from a solid panel display.
I did not add the props or make the edit icon dynamic or user set-able. I just made it work on the bottom of the table so all the values lined up and deployed in a custom node.
I am sure this is likely out of the scope of what a props table is meant to do. It just made sense to me because the table type was perfect for my use and my data model was already aligned. However I am happy to share my changes if anyone wants them. and I can easily send a PR to review if it would be helpful.
It's awesome that you were able to paste the code into the custom widget: that's what I had hoped would work. I'm divided about the level of functionality to provide in the core widgets: the more they do, the more complex the code becomes, and the harder it gets to make the kind of custom tweak you did.
The custom widget has certainly been a swiss army knife for this project. And I am learning to appreciate the seemingly wonky installation of the core widgets. But keeping the main repo as just a vue project with just component files and vue files makes hacking on any one of the widgets super easy.
Question about the custom widget node, and please understand I am not at all a front end developer, Does the custom widget allow for CSS application similar to the template node? where css can be dropped in and applied at the header level to the whole view? or what are the options? can I decorate say a gauge node using a custom widget in my back end? or would I have to put the gauge vue into a custom node and write the scoped styles?
If you want to change the core widgets for your entire project you can clone the repo, change the stuff you want, and use the result instead of the provided core widgets. Is that what you're doing? To build there's a script in the scripts directory to generate the nodes. You need to have the node-red-flexdash repo as a 'sibling' dir.
WRT CSS, unfortunately Vuetify is not very CSS friendly: a lot of stuff gets computed and the customizable stuff is generally exposed as attributes, not CSS. If you want to hack the CSS you can include CSS in any custom widget and since CSS is global... there you go.
I don't quite know what to do about the CSS situation. In a different project I fell in love with MasterCSS, which kind'a is TailwindCSS on steroids, and I'm thinking that the next big FlexDash round may drop a lot of Vuetify use in favor of more CSS-friendly constructs.
