Widget: Text Input updates

docs/.vitepress/config.js

@@ -43,10 +43,11 @@ export default {
               text: 'Widgets',
               collapsed: false,
               items: [
-                { 
-                  text: 'ui-button',
-                  link: '/nodes/widgets/ui-button'
-                }
+                { text: 'ui-button', link: '/nodes/widgets/ui-button' },
+                { text: 'ui-dropdown', link: '/nodes/widgets/ui-dropdown' },
+                { text: 'ui-slider', link: '/nodes/widgets/ui-slider' },
+                { text: 'ui-text-input', link: '/nodes/widgets/ui-text-input' },
+                { text: 'ui-markdown', link: '/nodes/widgets/ui-markdown' },
               ]
             }
           ]

docs/contributing/guides/layouts.md

@@ -19,7 +19,7 @@ This list of layouts will grow in time, and for now, just includes a _very_ basi
 
 This is a simple flexbox layout, with a single row of widgets, and our only functional layout currently. It will automatically move widgets to the next row if they don't fit within a given screen width. The height of each row is determined by the tallest widget in that row.
 
-![Flex Layout](../../assets/images/layout-eg-flex.png)
+![Flex Layout](../../assets/images/layout-eg-flex.png){data-zoomable}
 *An example UI rendered using the "Flex" Layout Manager*
 
 Currently, each widget is rendered directly inside a `v-card` (from Vuetify), however, plans for widgets to be grouped, as per Dashboard 1.0 are on the horizon, as well as controlling widget width and height.

docs/getting-started.md

@@ -2,10 +2,22 @@
 
 ## Installation
 
-Currently this project is in a pre-release state, and is not yet available on the [Node-RED flows library](https://flows.nodered.org/).
 
-If you would like to run this set of nodes locally, and specifically to help contribute to the development efforts, you can read the Contributing documentation.
+FlowForge's Node-RED Dashbaord 2.0 is available in the Node-RED Palette Manager. To install it:
 
-## How it Works
+- Open the menu in the top-right of Node-RED
+- Click "Manage Palette"
+- Switch to the "Install" tab
+- Search `node-red-dashboard`
+- Install the `@flowforge/node-red-dashboard` package (not `node-red-dashboard`)
 
-If you'd like to learn more about the project, and how it works, you can read the various Guides available in the left navigation, under the "Contributing" section.
+![Install via "Manage Palette"](../../assets/images/install-palette.png){data-zoomable}
+*Screenshot showing the nodes available in the Node-RED Palette Manager*
+
+The nodes will then be available in your editor for you to get started.
+
+If you want to use `npm` to install your nodes, you can instead [follow these instructions](https://nodered.org/docs/user-guide/runtime/adding-nodes)
+
+## Contributing
+
+If you would like to run this set of nodes locally, and specifically to help contribute to the development efforts, you can read the [Contributing](./contributing/index.md) documentation.

docs/nodes/config/ui-theme.md

@@ -20,10 +20,10 @@ Each page can be assigned a theme, which will be used to render the page. The th
 
 ## Example
 
-Example Config of ui-theme in Node-RED:
+Example Config of `ui-theme` in Node-RED:
 
-<img src="/images/theme-config.png" alt="Example config for a Theme" width="450"/>
+<img src="/images/theme-config.png" alt="Example config for a Theme" width="350"/>
 
 Resulting Dashboard with the theme applied:
 
-![Resulting Dashboard with applied theme](/images/theme-example.png "Resulting Dashboard with applied theme")
+![Resulting Dashboard with applied theme](/images/theme-example.png "Resulting Dashboard with applied theme"){data-zoomable}

docs/nodes/widgets/ui-button.md

@@ -1,25 +1,30 @@
 ---
 props:
-    Page: Defines with page of the UI Dashboard this widget will render on
+    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.
 controls:
     enabled:
         example: true | false
-        description: Lorum Ipsum
+        description: Allow control over whether or not the button is clickable.
 ---
 
 <script setup>
 </script>
 
 # Button `ui-button`
 
-Some details here about the ui-button widget
-
+Adds a clickable button to your dashboard.
 
 ## Properties
 
 <PropsTable/>
 
 ## Controls
 
-<ControlsTable/>
+<ControlsTable/>
+
+## Example
+
+![Example of a Button](../../assets/images/node-examples/ui-button.png "Example of a Button"){data-zoomable}
+*Example of a rendered button in a Dashboard.*

docs/nodes/widgets/ui-dropdown.md

@@ -0,0 +1,24 @@
+---
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width of the dropdown with respect to the parent group. Maximum value is the width of the group.
+    Label: The text shown to the left of the dropdown.
+    Options: A list of the options available in the dropdown. Each row defines a `label` (shown in the dropdown) and `value` (emitted on selection) property.
+    Allow Multiple: Whether or not a user can select multiple options, if so, checkboxes are shown, and value is emitted in an array.
+---
+
+<script setup>
+</script>
+
+# dropdown `ui-dropdown`
+
+Adds a dropdown to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
+
+## Properties
+
+<PropsTable/>
+
+## Example
+
+![Example of a dropdown](../../assets/images/node-examples/ui-dropdown.png "Example of a dropdown"){data-zoomable}
+*Example of a rendered dropdown in a Dashboard.*

docs/nodes/widgets/ui-markdown.md

@@ -1,9 +1,7 @@
-https://flowforge.com/handbook/development/markdown-how-to/#markdown-how-to
-
 ---
 props:
-    Page: Defines with page of the UI Dashboard this widget will render on
-    Contents: The markdown to be passed to the UI and rendered
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Content: The markdown to be passed to the UI and rendered
 ---
 
 <script setup>
@@ -13,6 +11,38 @@ props:
 
 Allows for markdown to be defined within Node-RED editor and rendered into the UI. Can be use for rendering labels, headers or even full blog articles.
 
+If you're looking for a quick cheat sheet on how to write Markdown, you can check out FlowForge's guide [here](https://flowforge.com/handbook/development/markdown-how-to/#markdown-how-to).
+
 ## Properties
 
-<PropsTable/>
+<PropsTable/>
+
+## Example
+
+![Example of rendered Markdown](../../assets/images/node-examples/ui-markdown.png "Example of rendered Markdown"){data-zoomable}
+*Example of rendered markdown in a Dashboard.*
+
+The above example is rendered using the following markdown:
+
+```md
+# Markdown Content
+
+## Secondary header
+
+### Third Header
+
+Goes here...
+
+`<code-example />`
+
+- List Item 1
+- List Item 1
+- List Item 1
+- List Item 1
+
+[Hyperlink](https://url.here)
+
+---
+
+> Lorum Ipsum Quotation Over two lines 
+```

docs/nodes/widgets/ui-slider.md

@@ -0,0 +1,22 @@
+---
+props:
+    Group: Defines which group of the UI Dashboard this widget will render in.
+    Size: Controls the width of the slider with respect to the parent group. Maximum value is the width of the group.
+    Label: The text shown to the left of the slider.
+---
+
+<script setup>
+</script>
+
+# Slider `ui-slider`
+
+Adds a slider to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
+
+## Properties
+
+<PropsTable/>
+
+## Example
+
+![Example of a slider](../../assets/images/node-examples/ui-slider.png "Example of a slider"){data-zoomable}
+*Example of a rendered slider in a Dashboard.*

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

@@ -0,0 +1,24 @@
+---
+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.
+    Mode: The type of HTML input to display. Options - text | password | email | number | tel | color | date | time | week | month | datetime-local
+    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?
+---
+
+<script setup>
+</script>
+
+# Button `ui-text-input`
+
+Adds a single text input row to your dashboard, with a configurable "type" (text, password, etc).
+
+## Properties
+
+<PropsTable/>
+
+## Example
+
+![Example of a Button](../../assets/images/node-examples/ui-text-input.png "Example of a Button"){data-zoomable}
+*Example of a rendered button in a Dashboard.*

nodes/widgets/ui_text_input.html

@@ -16,7 +16,9 @@
                     return valid;
                 }
             },
-            height: {value: 0}
+            height: { value: 0 },
+            mode: { value: 'text', required: true},
+            passthru: { value: true }
         },
         inputs: 1,
         outputs: 1,
@@ -52,33 +54,27 @@
         <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
         <input type="text" id="node-input-label">
     </div>
-    <div class="form-row">
-        <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
-        <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
-    </div>
     <div class="form-row">
         <label for="node-input-mode"><i class="fa fa-keyboard-o"></i> Mode</label>
-        <select style="width:128px" id="node-input-mode">
+        <select id="node-input-mode">
             <option value="text">text input</option>
             <option value="email">email address</option>
             <option value="password">password</option>
             <option value="number">number</option>
-            <option value="tel">telephone input</option>
             <option value="color">color picker</option>
             <option value="time">time picker</option>
-            <option value="datetime-local">datetime picker</option>
             <option value="week">week picker</option>
             <option value="month">month picker</option>
-            <!-- <option value="date">date picker</option> -->
+            <option value="datetime-local">datetime picker</option>
         </select>
-        <label for="node-input-delay" style="text-align:right; width:100px"><i class="fa fa-clock-o"></i> Delay (ms)</label>
-        <input type="text" style="width:58px" id="node-input-delay">
+        <!--<label for="node-input-delay" style="text-align:right; width:100px"><i class="fa fa-clock-o"></i> Delay (ms)</label>
+        <input type="text" style="width:58px" id="node-input-delay">-->
     </div>
     <div class="form-row">
         <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
-        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
+        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; margin-top: 0; margin-left: 3px;">
     </div>
-    <div class="form-row">
+    <!--<div class="form-row">
         <label style="width:auto" for="node-input-sendOnBlur">Send value on focus leave: </label>
         <input type="checkbox" checked id="node-input-sendOnBlur" style="display:inline-block; width:auto; vertical-align:top;">
     </div>
@@ -93,11 +89,7 @@
         <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px">Topic</label>
         <input type="text" id="node-input-topic">
         <input type="hidden" id="node-input-topicType">
-    </div>
-    <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i>  Class</label>
-        <input type="text" id="node-input-className" placeholder="Optional CSS class name(s) for widget"/>
-    </div>
+    </div>-->
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
         <input type="text" id="node-input-name">

nodes/widgets/ui_text_input.js

@@ -14,7 +14,9 @@ module.exports = function(RED) {
         const evts = {
             onChange: true,
             onInput: function (msg, send) {
-                send(msg)
+                if (config.passthru) {
+                    send(msg)
+                }
             }
         }
 

ui/src/widgets/ui-text-input/UITextInput.vue

@@ -1,7 +1,7 @@
 
 <template>
     <v-text-field v-model="values[id]" class="nrdb-ui-widget nrdb-ui-text-field"
-        :label="label" variant="outlined" hide-details="auto" @blur="onBlur"></v-text-field>
+        :label="label" :type="type" :rules="validation" variant="outlined" hide-details="auto" @blur="onBlur"></v-text-field>
 </template>
 
 <script>
@@ -19,6 +19,16 @@
             ...mapState('data', ['values']),
             label: function () {
                 return this.props.label
+            },
+            type: function () {
+                return this.props.mode || 'text'
+            },
+            validation: function () {
+                if (this.type === 'email') {
+                    return [v => !v || /^[^\s@]+@[^\s@]+$/.test(v) || 'E-mail must be valid']
+                } else {
+                    return []
+                }
             }
         },
         setup (props) {