Merge pull request #539 from TotallyInformation/v7.3.0

V7.3.0

Author: TotallyInformation

.github/prompts/update-nodejs.prompt.md

@@ -0,0 +1,47 @@
+# Updating Node.js via winget
+
+## What I want to do
+I want to update Node.js to the latest version of my currently installed major version using Windows Package Manager (winget).
+
+## Context
+- I'm using Windows 10/11
+- I have winget installed
+- I want to stay on the same major version of Node.js
+- I need to verify the update worked correctly
+
+## Expected steps
+1. Check my current Node.js version
+2. Verify Node.js is installed via winget
+3. Update Node.js using winget
+4. Verify the update was successful
+
+## References
+- Current version check command: `node -v`
+- Winget list command: `winget list nodejs-lts`
+- Winget update command: `winget upgrade nodejs-lts`
+- Alternative update with source: `winget upgrade OpenJS.NodeJS.LTS --source winget`
+- If needed, reinstall command: `winget uninstall OpenJS.NodeJS.LTS && winget install OpenJS.NodeJS.LTS`
+
+## Example solution
+```powershell
+# Check current Node.js version
+node -v
+
+# Check if Node.js is installed via winget
+winget list nodejs-lts
+
+# Update Node.js to the latest version within same major version
+winget upgrade OpenJS.NodeJS.LTS
+
+# Verify the update
+node -v
+npm -v
+
+# Optional: Check global packages
+npm list -g --depth=0
+```
+
+## Troubleshooting
+- If update fails, try specifying source with `--source winget`
+- If still failing, consider uninstalling and reinstalling
+- Remember to check global npm packages after major version changes

.gitignore

@@ -140,3 +140,4 @@ package-lock.json
 tmp/_*
 docs/docs.md
 docs/.config/doctest.md
+docs/roadmap/.~readme.md

.stylelintrc

@@ -24,7 +24,67 @@ Please see the roadmap in the docs for the backlog of future planned development
 
 <!-- ## [Unreleased](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v7.1.0...main) -->
 
-## [v7.2.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v7.1.0...v7.2.0)
+## [v7.3.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v7.3.0...v7.2.0)
+
+### 📌 Highlights
+
+* A new documentation section called "Creating Web UI's" has been added. The idea is to provide quick-reference guides on how to create common page elements and layouts using UIBUILDER. Some of the articles that were pare of the "Using UIBUILDER" section have been moved to this new section for clarity. _What else needs to go here? Please let me know in the Node-RED Forum._
+
+* UIBUILDER standard templates can now be external repositories, loaded via Degit. You could already load an arbitrary template this way but now some of the standard templates have been moved so that they can be more easily maintained. The selected template now also shows a description.
+
+  * Several templates have now been removed from core. They are now relegated to a [separate repository](https://github.com/TotallyInformation/deprecated-uibuilder-templates) and will no longer be updated. Of course, you can still copy the code yourself should you need a head-start and want to use them.
+  * Most of the remaining templates are now external. They will reside in their own repositories on GitHub and can be maintained separately to UIBUILDER.
+  * Templates now include a `tsconfig.json` file and a `/types` folder that describes the uibuilder client library. When writing front-end code, you should now get better code completion, descriptions and type checking.
+
+* The templates now all have an updated `<div id="more" uib-topic="more"></div>` element. While this has been a staple of the templates and examples for a while, the addition of the `uib-topic="more"` attribute means that you can now show the content of a msg.payload without having to write any JavaScript code. Don't forget to set `msg.topic` to `"more"` so that the uibuilder client library knows where to send the message.
+
+Don't forget to try loading the updated templates to see the improvements.
+
+### Documentation
+
+* **NEW** Section: "Creating Web UI's"
+  * **NEW** (Draft) Creating a web app - How to create a web app using UIBUILDER
+  * **NEW** Grid layouts - Creating a content-heavy grid layout using CSS Grid
+  * **NEW** Dashboard layouts - Creating a dashboard-style layout using CSS Grid
+  * **NEW** Forms: User input handling - Handling input using forms and other input elements
+  * _SOON_ Tables
+  * _SOON_ Charts
+  * _SOON_ Maps
+  * _SOON_ Articles
+  * _SOON_ Lists
+  * _SOON_ Cards
+
+Please let me know if you want to see other content in this section.
+
+### `uib-brand.css` styles & variables
+
+* Improved default font specifications based on [Modern Font Stacks](https://github.com/system-fonts/modern-font-stacks).
+
+### uibuilder client library
+
+* TypeScript definition files now included. This gives a much better experience when using the client library. It works for JavaScript not just TypeScript. All of the templates now also contain copies.
+
+### Runtime Plugin
+
+* **FIX** Error in `RED.util.uib.dp` that always returned a single decimal place if zero dp's were requested.
+* **NEW** `RED.util.uib.truthy(val)` - Returns true if the value is truthy. This is useful for checking if a value is set or not. See the details in the documentation.
+
+### Node: `uibuilder`
+
+* Updated template processing to allow standard templates to be external.
+* Templates now show a description in the Editor config.
+* Removed templates: `esm-blank-client`, `esm-vue3-nobuild`, `iife-blank-client`, `iife-vue3-nobuild`, `svelte-basic`, `vue2-bootstrap`,`vue2-simple`. Reference copies placed in the [deprecated templates repository](https://github.com/TotallyInformation/deprecated-uibuilder-templates).
+* External templates added: "Extended IIFE example", "Simple external ES module", "External Svelte", "Vie3 no build step, IIFE client". Each with a link to the corresponding GitHub repository.
+* **FIXED** The `uibuilder` node's "Node details" button now correctly opens the instance settings page in the Node-RED Editor. It was previously trying to open a non-existent page.
+* **FIXED** The `uibuilder` node's "Node details" button now correctly opens the instance details page.
+
+### Background code improvements
+
+* Moved the uibuilder node's `uib` var to `nodes/libs/uibGlobalConfig.cjs` as a module. Enables being able to require it rather than pass it in libs and other nodes. Another step towards a more modular codebase.
+* Started renaming js files to better indicate whether they use script/CommonJS (`*.cjs`), or ESM (`*.mjs`). Mostly to help with ESLINT.
+* Lots of code cleanup and linting to make the code more readable and maintainable.
+
+## [v7.2.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v7.2.0...v7.1.0)
 
 ### 📌 Highlights
 

CHANGELOG.md

@@ -0,0 +1,10 @@
+---
+title: Creating an articles view using UIBUILDER
+description: |
+  Here we see how to create a blog-style list of articles on a page.
+created: 2025-05-26 17:32:21
+updated: 2025-05-26 17:32:29
+author: Julian Knight (Totally Information)
+---
+
+> STATUS: Soon.

_.eslintrc.js

@@ -0,0 +1,10 @@
+---
+title: Creating an cards using UIBUILDER
+description: |
+  Cards are a useful form of content wrapper.
+created: 2025-05-26 17:32:21
+updated: 2025-05-26 17:32:29
+author: Julian Knight (Totally Information)
+---
+
+> STATUS: Soon.

docs/.config/creating-uis/articles.md

@@ -0,0 +1,10 @@
+---
+title: Creating a chart using UIBUILDER
+description: |
+  Here we see how to create a chart on a page using data from Node-RED and a charting library.
+created: 2025-05-26 17:32:21
+updated: 2025-05-26 17:32:29
+author: Julian Knight (Totally Information)
+---
+
+> STATUS: Soon.