Merge pull request #1445 from cgjgh/Docs-Fixes

Minor Documentation Fixes

docs/nodes/widgets/ui-control.md

@@ -37,11 +37,11 @@ Currently, we support the following controls:
 
 ### Navigation
 
-You can programmaticaly force navigation with the following payloads with `ui-control`:
+You can programmatically force navigation with the following payloads with `ui-control`:
 
 #### Change Page
 
-Explicitely choose the page you want to navigate to:
+Explicitly choose the page you want to navigate to:
 
 ```js
 // String
@@ -98,7 +98,7 @@ msg.payload = {
 
 ### Show/Hide
 
-You can programmaticaly show/hide groups and pages with the following payload into `ui-control`:
+You can programmatically show/hide groups and pages with the following payload into `ui-control`:
 
 ```js
 msg.payload = {
@@ -117,7 +117,7 @@ _Note:_ `pages` can be subbed with `tabs` as per Dashboard 1.0 and `groups` can
 
 ### Enable/Disable
 
-You can programmaticaly disable/enable groups and pages with the following payload into `ui-control`:
+You can programmatically disable/enable groups and pages with the following payload into `ui-control`:
 
 ```js
 msg.payload = {

docs/nodes/widgets/ui-event.md

@@ -60,7 +60,7 @@ msg = {
 
 ## Custom Events
 
-In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embeded `$socket` operator directly. 
+In your own `ui-template` nodes, you can emit custom events that will get captured by any `ui-event` node calling the embedded `$socket` operator directly. 
 
 The `$socket.emit` function takes in 3 arguments:
 
@@ -74,7 +74,7 @@ So in the case where we want to send to a specific `ui-event` node:
 <v-btn @click="$socket.emit('ui-event', 'ui-event-node-id', msg)">Send Custom Event</v-btn>
 ```
 
-Or, in the case where we brodcast to _all_ `ui-event` nodes:
+Or, in the case where we broadcast to _all_ `ui-event` nodes:
 
 ```vue
 <v-btn @click="$socket.emit('ui-event', 'all', msg)">Send Custom Event</v-btn>

docs/nodes/widgets/ui-markdown.md

@@ -106,7 +106,7 @@ graph TD;
 
 ### Dynamic Mermaid Charts
 
-It is also possible to inject `msg` values into the mermaid chart definition using mustache templating as with the standard Makrdown definition, e.g:
+It is also possible to inject `msg` values into the mermaid chart definition using mustache templating as with the standard Markdown definition, e.g:
 
 ````md
 # Here is some Markdown

docs/nodes/widgets/ui-notification.md

@@ -2,7 +2,7 @@
 description: Notify users of important updates and alerts with ui-notification in Node-RED Dashboard 2.0.
 props:
     UI: Unlike most widgets, notifications are owned by a "UI", not Group. This allows for notifications to be displayed across all pages.
-    Position: The position on the screen whethere the notification will appear.
+    Position: The position on the screen where the the notification will appear.
     Color: The color that should be used for the notification border.
     Timeout: Number of seconds before the notification will automatically close.
     Show Countdown Bar: Whether or not to show a reducing progress bar to indicate the time remaining before the notification will close.

docs/nodes/widgets/ui-number-input.md

@@ -31,7 +31,7 @@ props:
         description: The number shown when hovering over the number input field.
     Passthrough: If this node receives a msg in Node-RED, should it be passed through to the output as if a new value was inserted to the input?
     Clear selection with button:
-        description: If true, a clear icon/button appears on the rigth side to clear the number input.
+        description: If true, a clear icon/button appears on the right side to clear the number input.
         dynamic: true
     Send On "Clear Button": Send a msg when the user clear the number input using the clear button, the "Clear Selection" button must be enabled.
 controls:
@@ -102,4 +102,4 @@ Adds a single number input row to your dashboard.
 ## Example
 
 ![Example of Number Inputs Types](/images/node-examples/ui-number-input.png "Example of Number Inputs Types"){data-zoomable}
-*Example of severall Number Inputs Types rendered in a Dashboard.*
+*Example of several Number Inputs Types rendered in a Dashboard.*

docs/nodes/widgets/ui-radio-group.md

@@ -6,10 +6,10 @@ props:
         description: The text shown above the radio group to inform the user of what options are available.  Html content is allowed.
         dynamic: true
     Options:
-        description: A list of the options available in the radio group. Each row defines a `label` (shown alongisde each radio button) and `value` (emitted on selection) property.
+        description: A list of the options available in the radio group. Each row defines a `label` (shown alongside each radio button) and `value` (emitted on selection) property.
         dynamic: true
     Columns:
-        description: The number of grid columns within which to render the radio group. This is useful for when you want to render the options horizontally, or if you have many ptions and want to save vertical space.
+        description: The number of grid columns within which to render the radio group. This is useful for when you want to render the options horizontally, or if you have many options and want to save vertical space.
         dynamic: true
     Topic: The `msg.topic` that will be included in any emitted values
 dynamic:

docs/nodes/widgets/ui-spacer.md

@@ -27,7 +27,7 @@ This widget allows users to add a simple spacer to their dashboard groups, aidin
 
 _Currently_
 * the spacer widgets belong to the global flow and are not exported along with the group unless the entire flow is exported. This means that if you want to export a group with spacer widgets, you will need to either export the entire flow or add the spacer widgets manually after importing the group.
-* Editing a spacer is only possible on the Dashboard 2.0 sidbar and not from the the Node-RED config sidebar.
+* Editing a spacer is only possible on the Dashboard 2.0 sidebar and not from the the Node-RED config sidebar.
 
 ## Using the Spacer Widget
 

docs/nodes/widgets/ui-table.md

@@ -53,7 +53,7 @@ Renders a set of data in a tabular format. Expects an input (`msg.payload`) in t
 }]
 ```
 
-The table will be rendered with colums `colA`, `colB` and `colC`, unless "Columns" are explicitely defined on the node, with "Auto Columns" toggled off.
+The table will be rendered with columns `colA`, `colB` and `colC`, unless "Columns" are explicitly defined on the node, with "Auto Columns" toggled off.
 
 You can also send a single piece of data to append to the existing table, in this case, the `ui-table` expects an input (`msg.payload`) in the format of:
 

docs/nodes/widgets/ui-template.md

@@ -2,7 +2,7 @@
 description: Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.
 props:
     Group: Defines which group of the UI Dashboard this widget will render in.
-    Scope: "Template nodes can be used  for 3 purposes/scopes: <ul><li><b>Widget (Group-Scoped):</b>A standard HTML/Vue widget rendered in a group in the Dashboard.</li><li><b>Widget (Page-Scoped):</b>A HTML/Vue widget that will render on a page, outside of any existing groups. Note that these widgets will render after any Groups. An example use case for this would be if you wanted to have a fixed footer on a given page.</li><li><b>Widget (UI-Scoped):</b>A HTML/Vue widget rendered on every page of the Dashboard. Most commonly used in conjuction with <a href=\"#teleports\">Teleports</a></li><li><b>CSS (All Pages):</b>Define custom CSS classes/styling that applies to the entire Dashboard.</li><li><b>CSS (Single Page):</b>Define custom CSS classes/styling that applies just a single page of your Dashboard.</li></ul>"
+    Scope: "Template nodes can be used  for 3 purposes/scopes: <ul><li><b>Widget (Group-Scoped):</b>A standard HTML/Vue widget rendered in a group in the Dashboard.</li><li><b>Widget (Page-Scoped):</b>A HTML/Vue widget that will render on a page, outside of any existing groups. Note that these widgets will render after any Groups. An example use case for this would be if you wanted to have a fixed footer on a given page.</li><li><b>Widget (UI-Scoped):</b>A HTML/Vue widget rendered on every page of the Dashboard. Most commonly used in conjunction with <a href=\"#teleports\">Teleports</a></li><li><b>CSS (All Pages):</b>Define custom CSS classes/styling that applies to the entire Dashboard.</li><li><b>CSS (Single Page):</b>Define custom CSS classes/styling that applies just a single page of your Dashboard.</li></ul>"
     Class: Appends CSS classes to the widget
     Template: The content of the widget or CSS &lt;style&gt;. If using this for CSS, you do not need to include any &lt;style&gt; tags, as these will be automatically added.
 ---
@@ -89,7 +89,7 @@ You have access to a number of built-in variables in your `ui-template` node:
 
 When accessing the `msg` variable inside a `<script />` tag, you need to prefix the variable name with `this.` (e.g. `this.msg.payload`) so that it knows you're accessing the component-bound `msg` variable.
 
-***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the **optional chaining** (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occuring.
+***Important Note:*** On first load, `msg.payload` may be `null` or `undefined`, and trying to access a nested property will throw an error. Using the **optional chaining** (?.) operator, e.g. `msg.payload?.nested?.property` will prevent these errors occurring.
 
 #### Accessing Node-RED Global/Flow Context
 
@@ -436,7 +436,7 @@ Whenever a `ui-template` receives a `msg` in Node-RED, that is automatically ass
 Two exposed methods, `send` and `submit`, allow you to send messages from the Dashboard to the Node-RED flow. 
 
 - `send` - Outputs a message (defined by the input to this function call) from this node in the Node-RED flow. 
-- `submit` - Send a `FormData` object when attached to a `<form>` element. The created object will consnist of the `name` attributes for each form element, corresponding to their respective `value` attributes.
+- `submit` - Send a `FormData` object when attached to a `<form>` element. The created object will consist of the `name` attributes for each form element, corresponding to their respective `value` attributes.
 
 #### Sending on Click
 Here, we call it when someone clicks our "Send Hello World" button:

docs/nodes/widgets/ui-text-input.md

@@ -23,7 +23,7 @@ props:
     Send On "Delay": If true, then a msg will be emitted will be sent after the delay specified in "Delay (ms)".
     Delay: If "Send on Delay" is true, then the value in the text input will be send after this (ms) delay.
     Clear selection with button:
-        description: If true, a clear icon/button appears on the rigth side to clear the text input
+        description: If true, a clear icon/button appears on the right side to clear the text input
         dynamic: true
     Send On "Focus Leave": Sends a msg when the text input loses focus. Will always send, even if the value has not changed.
     Send On "Press Enter": Sends a msg when the user presses the enter key. Will always send, even if the value has not changed.
@@ -86,4 +86,4 @@ Adds a single text input row to your dashboard, with a configurable "type" (text
 ## Example
 
 ![Example of Text Inputs Types](/images/node-examples/ui-text-input.png "Example of Text Inputs Types"){data-zoomable}
-*Example of severall Text Inputs Types rendered in a Dashboard.*
+*Example of several Text Inputs Types rendered in a Dashboard.*

docs/nodes/widgets/ui-text.md

@@ -4,7 +4,7 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group.
     Label: The text shown within the button.  Html content is allowed.
-    Layout: Choose how to layout your label (if deifned) & value.
+    Layout: Choose how to layout your label (if defined) & value.
     Style: Checkbox to define whether or not to include custom styling for the text. Enabling this will then show the below options.
     Font: If "style" is enabled, this will define the font of the text.
     Text Size: If "style" is enabled, this will define the size of the text.
@@ -58,7 +58,7 @@ Displays a non-editable text field on the user interface. Each received `msg.pay
 
 ## Adding Prefixes & Suffixes
 
-In Dashboard 1.0 an option existed called `valueFormat` which allowed you to add a prefix or suffix to a `ui-text` widget witin the node's configuration. Whilst valuable, this had a lot of security vulnerabilities, so with Dashboard 2.0 we made the decision to remove it..
+In Dashboard 1.0 an option existed called `valueFormat` which allowed you to add a prefix or suffix to a `ui-text` widget within the node's configuration. Whilst valuable, this had a lot of security vulnerabilities, so with Dashboard 2.0 we made the decision to remove it..
 
 Instead, we take a different approach, and use Node-RED's built-in "template" node: