Merge pull request #235 from TotallyInformation/v6.8

V6.8
TotallyInformation · Jan 1, 2024 · 88543da · 88543da
2 parents d9da99e + f139628
commit 88543da
Show file tree

Hide file tree

Showing 197 changed files with 12,285 additions and 8,326 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/docs/_404.md → docs/.config/404.md b/docs/_404.md → docs/.config/404.md
diff --git a/docs/_coverpage.md → docs/.config/coverpage.md b/docs/_coverpage.md → docs/.config/coverpage.md
diff --git a/docs/-sidebar.md → docs/.config/sidebar.md b/docs/-sidebar.md → docs/.config/sidebar.md
@@ -1,14 +1,14 @@
 * [Home](/)
 * Using <span class="uib-name"><span class="uib-red">ui</span>builder</span>
   * [A first-timers walkthough](walkthrough1.md "Let's get started!")
-  * [Did you know?](did-you-know.md "Things you might not know about UIBUILDER")
-  * [Creating data-driven web apps](web-app-workflow.md "Different styles and workflows you can use")
+  * [Browser auto-refresh](browser-refresh.md "Automatically reload your page after a change")
   * [Configuring <span class="uib-name"><span class="uib-red">ui</span>builder</span>](uib-configuration.md "Configure the UIBUILDER platform. Affects all uibuilder nodes")
-  * [Standard messages](pre-defined-msgs.md "Catalogue of messages and properties")
+  * [Creating data-driven web apps](web-app-workflow.md "Different styles and workflows you can use")
   * [Creating Templates](creating-templates "Pre-defined and reusable front-end code, dependencies, and optional build steps")
-  * [Browser auto-refresh](browser-refresh.md "Automatically reload your page after a change")
-  * [Zero-code UI creation](using/zero-code-ui.md "Dynamically creating web UI's")
+  * [Did you know?](did-you-know.md "Things you might not know about UIBUILDER")
+  * [Standard messages](pre-defined-msgs.md "Catalogue of messages and properties")
   * [Why <span class="uib-name"><span class="uib-red">ui</span>builder</span>?](using/why-uibuilder.md "Why would I want to use UIBUILDER?")
+  * [Zero-code UI creation](using/zero-code-ui.md "Dynamically creating web UI's")
 * [The nodes](nodes/README.md)
   * [`uib-cache`](nodes/uib-cache.md "Cache data so that (re)loaded pages get the latest")
   * [`uib-element`](nodes/uib-element.md "no-code creation of page elements")
@@ -19,51 +19,51 @@
   * [`uib-update`](nodes/uib-update.md "no-code update of any existing HTML page element")
   * [`uibuilder`](nodes/uibuilder.md "The main node")
 * The front-end client
-  * [Introduction](client-docs/readme.md)
-  * [Features](client-docs/features.md)
   * [Controlling from Node-RED](client-docs/control-from-node-red.md)
+  * [Custom Components](client-docs/custom-components.md "The built-in uib-var component, using external components")
+  * [Custom Events](client-docs/custom-events.md)
   * [Dynamic, config-driven UI's](client-docs/config-driven-ui.md)
+  * [Features](client-docs/features.md)
   * [Functions](client-docs/functions.md)
-  * [Variables](client-docs/variables.md)
-  * [Custom Components](client-docs/custom-components.md "The built-in uib-var component, using external components")
+  * [Introduction](client-docs/readme.md)
   * [Routing Library](client-docs/fe-router.md "A full-featured front-end router for Single Page Apps and other use")
-  * [Custom Events](client-docs/custom-events.md)
-  * [uib-brand Style Sheet](client-docs/uib-brand-css.md "How to use the UIBUILDER standard style sheet uib-brand.css")
   * [Troubleshooting](client-docs/troubleshooting.md)
+  * [uib-brand Style Sheet](client-docs/uib-brand-css.md "How to use the UIBUILDER standard style sheet uib-brand.css")
+  * [Variables](client-docs/variables.md)
   * [Old uibuilderfe client library](front-end-library.md)
 * Zero-code element types
-  * [Tables](elements/tables.md)
   * [Forms](elements/forms.md)
-  * [Lists](elements/lists.md)
+  * [Headings, text boxes, etc.](elements/other.md)
   * [HTML](elements/html.md)
+  * [Lists](elements/lists.md)
   * [Markdown](elements/Markdown.md)
-  * [Headings, text boxes, etc.](elements/other.md)
+  * [Tables](elements/tables.md)
 * UI frameworks & builds
-  * [VueJS complexities](vue-complexities.md)
-  * [VueJS components](vue-component-handling.md)
-  * [Svelte](svelte.md)
   * [Avoiding a build step](front-end-no-build.md)
   * [Optimise & transpile (build)](front-end-builds.md)
   * [Snowpack as build tool](front-end-build-snowpack.md)
+  * [Svelte](svelte.md)
+  * [VueJS complexities](vue-complexities.md)
+  * [VueJS components](vue-component-handling.md)
 * How to
-  * [Use Fn nodes to change msg._ui](how-to/function-node.md)
-  * [How & why to use the list node](how-to/list-node.md)
-  * [Use the cache node](how-to/cache-node.md)
-  * [CSS Selectors](how-to/css-selectors.md)
   * [Change the root folder (uibRoot)](how-to/changing-uibroot.md)
   * [Create instance-specific API's](how-to/instance-apis.md)
+  * [CSS Selectors](how-to/css-selectors.md)
+  * [How & why to use the list node](how-to/list-node.md)
   * [How & why to use the sender node](how-to/sender-node.md)
   * [How to use low-code in the browser](how-to/use-low-code-in-fe.md "Define and update elements in the browser using low-code")
   * [Other How-To's](how-to/README.md)
+  * [Use Fn nodes to change msg._ui](how-to/function-node.md)
+  * [Use the cache node](how-to/cache-node.md)
 * Security
-  * [Securing uib web apps](security/security.md "Overview of general web app security with some specifics for Node-RED and UIBUILDER")
-  * [Securing Data](security/securing-data.md "How to use flows and uibiulder middleware to secure your data")
   * [Securing apps using NGINX](security/uib-security-nginx.md "How to use NGINX as a reverse proxy with TLS and identity authentication")
+  * [Securing Data](security/securing-data.md "How to use flows and uibiulder middleware to secure your data")
+  * [Securing uib web apps](security/security.md "Overview of general web app security with some specifics for Node-RED and UIBUILDER")
 * [Developer documentation](dev/README.md)
 * [REST API's](apis/)
 * [Glossary of terms](glossary.md)
 * [Changelog <sup>🔗</sup>](changelog)
-* [Roadmap](roadmap)
+* [Roadmap](roadmap/)
 * [Main readme <sup>🔗</sup>](uibhome)
 * Archives
   * [v5 Changelog](archived/CHANGELOG-v5)

diff --git a/docs/README.md b/docs/README.md
@@ -1,9 +1,10 @@
 ---
 title: UIBUILDER Documentation
-description: >
+description: |
   UIBUILDER provides a stand-alone web server that allows for interfacing with Node-RED, while giving you help and complete freedom to create custom web interfaces.
 created: 2019-06-16 16:16:00
 lastUpdated: 2023-09-30 13:06:56
+updated: 2023-12-30 20:02:01
 ---
 
 It includes many helper features that can reduce or eliminate the need to write code for building data-driven web applications and user interfaces for Node-RED.
@@ -47,7 +48,7 @@ WIKI, code (PR's), documentation, and examples are all welcome contributions and
 
 ## Content Index
 
-[index](-sidebar.md ':include')
+[index](.config/sidebar.md ':include')
 
 ## Additional Links
 

diff --git a/docs/UPDATES/2302131 README.md.md b/docs/UPDATES/2302131 README.md.md
@@ -1,9 +1,10 @@
 ---
 title: uibuilder Documentation
-description: >
+description: |
   uibuilder provides a stand-alone web server that allows for interfacing with Node-RED, while giving you help and complete freedom to create custom web interfaces.
 created: 2019-06-16 16:16:00
 lastUpdated: 2023-02-08 10:17:10
+updated: 2023-12-30 17:01:42
 ---
 
 It includes many helper features that can reduce or eliminate the need to write code for building data-driven web applications and user interfaces for Node-RED.  <font color="#2DC26B">[ Here is a diagram(Link to diagram)]** that gives an overview of how the various uibuilder components work together.</font>

diff --git a/docs/UPDATES/2302141 walkthrough1.md b/docs/UPDATES/2302141 walkthrough1.md
@@ -1,10 +1,10 @@
 ---
 title: A first-timers walkthrough of using uibuilder
-description: >
-   If you haven't used uibuilder before, it can be a little confusing as it brings together concepts from
-   several different worlds. This walkthrough takes you from nothing to a basic data-driven web page.
+description: |
+  If you haven't used uibuilder before, it can be a little confusing as it brings together concepts from several different worlds. This walkthrough takes you from nothing to a basic data-driven web page.
 created: 2021-09-24 11:02:56
 lastUpdated: 2023-02-12 02:25:49
+updated: 2023-12-30 17:01:42
 ---
 
 Like uibuilder itself, this walkthrough may look complex. But you should bear in mind that if you follow the 7 <font color="#2DC26B">(or is it 4?)</font> steps in the [How to get started](#how-to-get-started-4-steps-to-a-data-driven-web-app) section, that is basically it.

diff --git a/docs/UPDATES/2302151msg.md b/docs/UPDATES/2302151msg.md
@@ -1,3 +1,7 @@
+---
+created: 2023-03-06 10:59:23
+updated: 2023-12-30 17:01:42
+---
 Hi Julian,
 
 I have gone through Readme and Walkthrough1, the results are attached.

diff --git a/docs/UPDATES/2302201 uibuilder.md b/docs/UPDATES/2302201 uibuilder.md
@@ -1,9 +1,10 @@
 ---
 title: The main uibuilder node
-description: >
-   Usage and configuration.
+description: |
+  Usage and configuration.
 created: 2023-02-05 16:31:39
 lastUpdated: 2023-02-05 16:31:46
+updated: 2023-12-30 17:01:42
 ---
 
 > [!note]

diff --git a/docs/apis/readme.md b/docs/apis/readme.md
@@ -1,9 +1,10 @@
 ---
 title: UIBUILDER REST API's
-description: >
+description: |
   UIBUILDER exposes a number of REST API's. This is an index of them.
 created: 2023-09-14 19:39:52
 lastUpdated: 2023-09-16 12:36:36
+updated: 2023-12-30 17:01:41
 ---
 
 Most of UIBUILDER's standard REST API's are common across all instances of `uibuilder` nodes added to your Node-RED flows. However, see below for the instance API's features.

diff --git a/docs/archived/CHANGELOG-v1.md b/docs/archived/CHANGELOG-v1.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 ## Changelog Archive for v1
 
 Current major version changelog can be found in the root of this package: `../CHANGELOG.md`.

diff --git a/docs/archived/CHANGELOG-v2.md b/docs/archived/CHANGELOG-v2.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 ## Changelog Archive for v2
 
 Current major version changelog can be found in the root of this package: `../CHANGELOG.md`.

diff --git a/docs/archived/CHANGELOG-v3-v4.md b/docs/archived/CHANGELOG-v3-v4.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 # Changelog Archive for v3 and v4
 
 Current major version changelog can be found in the root of this package: `../CHANGELOG.md`.

diff --git a/docs/archived/CHANGELOG-v5.md b/docs/archived/CHANGELOG-v5.md
@@ -1,5 +1,7 @@
 ---
 typora-root-url: docs/images
+created: 2023-03-06 10:59:23
+updated: 2023-12-30 17:01:41
 ---
 
 # Changelog archive for uibuilder v5

diff --git a/docs/archived/README-v1.md b/docs/archived/README-v1.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 [![NPM Version](https://img.shields.io/npm/v/node-red-contrib-uibuilder.svg)](https://www.npmjs.com/package/node-red-contrib-uibuilder)
 [![NPM Total Downloads](https://img.shields.io/npm/dt/node-red-contrib-uibuilder.svg)](https://www.npmjs.com/package/node-red-contrib-uibuilder)
 [![NPM Downloads per month](https://img.shields.io/npm/dm/node-red-contrib-uibuilder.svg)](https://www.npmjs.com/package/node-red-contrib-uibuilder)

diff --git a/docs/archived/V2-PROGRESS.md b/docs/archived/V2-PROGRESS.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 This is the design note for part 2 of enabling source file editing from the Node-RED admin ui.
 
 The [main To Do list is now in the WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/To-Do).

diff --git a/docs/archived/sec-process.md b/docs/archived/sec-process.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 
 Changes
 

diff --git a/docs/archived/security.md b/docs/archived/security.md
@@ -1,9 +1,10 @@
 ---
 title: uibuilder Security Documentation
-description: >
-   Some thoughts on how to correctly and safely secure a uibuilder app.
+description: |
+  Some thoughts on how to correctly and safely secure a uibuilder app.
 created: 2020-01-05 20:45:00
 lastUpdated: 2021-06-27 18:19:13
+updated: 2023-12-30 17:01:41
 ---
 
 uibuilder provides its own security process based on simple standards.

diff --git a/docs/archived/securityjs.md b/docs/archived/securityjs.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 # security.js Technical Documentation
 
 The `security.js` file is the custom part of uibuilder's security architecture. 

diff --git a/docs/archived/v2-breaking-changes.md b/docs/archived/v2-breaking-changes.md
@@ -1,3 +1,7 @@
+---
+created: 2022-04-02 19:09:31
+updated: 2023-12-30 17:01:41
+---
 This page aims to document all of the breaking and potentially breaking changes in v2.0.0 since v1.2.6.
 
 While this may seem like a lot of breaking changes. In reality it breaks down to just a few and you only need to do them on existing installations that you have altered from the defaults.

diff --git a/docs/browser-refresh.md b/docs/browser-refresh.md
@@ -1,9 +1,10 @@
 ---
 title: Auto-refresh the browser when developing
-description: >
-   Describes how to make your page refresh automatically when developing front-end code.
+description: |
+  Describes how to make your page refresh automatically when developing front-end code.
 created: 2022-02-15 20:56:20
 lastUpdated: 2023-09-30 13:03:51
+updated: 2023-12-30 17:01:41
 ---
 
 ## Reload message

diff --git a/docs/client-docs/config-driven-ui.md b/docs/client-docs/config-driven-ui.md
@@ -1,10 +1,10 @@
 ---
 title: Dynamic, configuration-driven UI's (low-code)
-description: >
-   This version of the uibuilder front-end library supports the dynamic manipulation of your web pages. This is achieved either by loading a JSON file describing the layout and/or by sending messages from Node-RED via a `uibuilder` node where the messages contain a `msg._ui` property.
-   This is known as "configuration-driven" design since you send the configuration information and not the actual HTML. It is considered a low-code approach.
+description: |
+  This version of the uibuilder front-end library supports the dynamic manipulation of your web pages. This is achieved either by loading a JSON file describing the layout and/or by sending messages from Node-RED via a `uibuilder` node where the messages contain a `msg._ui` property. This is known as "configuration-driven" design since you send the configuration information and not the actual HTML. It is considered a low-code approach.
 created: 2022-06-11 14:15:26
 lastUpdated: 2023-09-30 13:02:29
+updated: 2023-12-30 17:01:41
 ---
 
 - [Restricting actions to specific pages, users, tabs](#restricting-actions-to-specific-pages-users-tabs)
@@ -491,8 +491,9 @@ This is the method used by the `uib-update` node. Dump output from that node to
         // List of component instances to update on the page - results in 1 or more HTML custom elements being selected and updated
         "components": [
             {
-                // Only 1 of these four properties will be used to search. 
-                // In the order of preference id > selector > name > type
+                /** Only 1 of these four properties will be used to search. 
+                 *  In the order of preference id > selector > name > type
+                 */
 
                 // The most direct way to select a single element
                 "id": "...",
@@ -503,6 +504,10 @@ This is the method used by the `uib-update` node. Dump output from that node to
                 // A generic CSS selector can be specified here as well. e.g. "div" or "p#classname", etc.
                 "type": "...",
 
+                /** You can use as many or as few of the following as you like in an update.
+                 *  For example, only updating a single attribute.
+                 */
+
                 // Optional. Text or HTML to add to slot - if not present, the contents of msg.payload will be used. 
                 // This allows multi-components to have their own slot content. 
                 // However, the payload is not passed on to sub-components
@@ -518,6 +523,23 @@ This is the method used by the `uib-update` node. Dump output from that node to
                     // ... not recommended to include `onClick or similar event handlers, specify those in the events property below ...
                 },
 
+                // Optional. Update the elements classes - USE ONLY ONE STYLE (object or array)
+                "classes": {
+                    // Optional. Add a set of classes - processed in order with remove
+                    "add": [
+                        "myclass1", "myclass2",
+                    ],
+                    // Optional. Remove a set of classes - processed in order with add
+                    "remove": [
+                        "myclass2", "myclass3",
+                    ],
+                }
+                // OR - use an array to replace all existing classes
+                //      a convenient alternative to setting a class attribute string
+                // "classes": [
+                //     "myclass1", "myclass3",
+                // ],
+
                 // Optional. properties to be added to/replaced on the element. Unlike attributes, these can contain any data.
                 // Take care to avoid name clashes with internal properties or bad things are likely to happen!
                 // Most useful when working with ECMA Components though will work with custom front-end code as well.
@@ -557,9 +579,13 @@ Same as sending `msg._uib.reload`. But this method is preferred.
 
 Overlay a pop-over notification.
 
-Old-style `msg._uib.componentRef = 'globalNotification'` also works. But this method is preferred.
+Old-style `msg._uib.componentRef = 'globalNotification'` also works. But this method is preferred. Note that this is different to the `notification` command which shows an OS toast notification, this shows an on-page notification. Also note that you can use `uibuilder.showDialog(type, ui, msg)` in front-end code for the same effect.
+
+Defaults to auto-timeout after a 10 seconds.
 
-Defaults to auto-timeout.
+For accessibility, the wrapper element for all notifications is given `role="dialog"` and `aria-label="Toast message`. The wrapper element for each individual notification is given `role="alertdialog"` and `aria-modal="true"`.
+
+Note that the "alert" method (see next section) is similar but does not autohide and has an additional warning icon.
 
 ### HTML Tags
 
@@ -569,16 +595,38 @@ A new `<div id="toast">` element is added to `toaster`.
 
 #### Schema
 
-variant, title/topic, payload/content, autohide, noAutoHide/autohide, autoHideDelay/delay, appendToast, modal
+```jsonc
+{
+    "_ui": {
+        // REQUIRED
+        "method": "notify",
+
+        // Colour variant: error, warn, info, success, etc - can be ANY class name
+        "variant": "warn",
+
+        // Overrides msg.topic which is used if this isn't specified
+        "title": "My Title",
+        // msg.payload is used as message content, this is appended
+        "content": "Some content to show",
+        // Defaults to true, set to false to require user to cancel
+        "autohide": true,
+        // Delay time in milliseconds for autohide, default is 10s
+        // If present, automatically turns on `autohide`
+        "autoHideDelay": 10000,
+    }
+}
+```
 
 ## Method: alert
 
-Overlay an alert notification
+Overlay an alert notification. Alerts can be stacked. Click anywhere on-page to dismiss all alerts, on an individual alert to dismiss only it.
 
 Old-style `msg._uib.componentRef = 'globalAlert'` also works. But this method is preferred.
 
 Uses the same schema and styles as the `notify` method. Except that autohide is set to false, modal is set to true and the content is prefixed by an alert symbol.
 
+For accessibility, the wrapper element for all notifications is given `role="dialog"` and `aria-label="Toast message`. The wrapper element for each individual notification is given `role="alertdialog"` and `aria-modal="true"`.
+
 ---
 
 ## Manipulating `msg._ui`