From 14da3473ab6a505edb93bccd7bbdc4b7ec8ea590 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 19 Dec 2024 19:35:25 +0000
Subject: [PATCH 1/5] prevent exceptions rendering empty table

---
 ui/src/widgets/ui-table/UITable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index 9d293b7b..49af4b73 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -193,7 +193,7 @@ export default {
         calculatePaginatedRows () {
             if (this.itemsPerPage > 0) {
                 this.pagination.pages = Math.ceil(this.localData?.length / this.props.maxrows)
-                this.pagination.rows = this.localData.slice(
+                this.pagination.rows = (this.localData || []).slice(
                     (this.pagination.page - 1) * this.props.maxrows,
                     (this.pagination.page) * this.props.maxrows
                 )

From 3de169cbd18972fd5a4cca0619de563e2ee26a9c Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Thu, 19 Dec 2024 19:36:53 +0000
Subject: [PATCH 2/5] only use props.width/height in group layout css

---
 ui/src/layouts/Group.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/layouts/Group.vue b/ui/src/layouts/Group.vue
index af0a7fa1..913276bc 100644
--- a/ui/src/layouts/Group.vue
+++ b/ui/src/layouts/Group.vue
@@ -117,8 +117,8 @@ export default {
         widgetStyles () {
             return (widget) => {
                 const styles = {}
-                const height = widget.props.height || widget.layout.height
-                const width = widget.props.width || widget.layout.width
+                const height = widget.props.height
+                const width = widget.props.width
                 styles['grid-row-end'] = `span ${height}`
                 styles['grid-template-rows'] = `repeat(${height}, minmax(var(--widget-row-height), auto))`
                 styles['grid-column-end'] = `span min(${this.getWidgetWidth(+width)}, var(--layout-columns))`

From e495ed795a66a8f31709a629e04a72c6ca73ed6e Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 20 Dec 2024 11:17:20 +0000
Subject: [PATCH 3/5] bump for release

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 276e9771..5a33d5f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.20.1",
+    "version": "1.21.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@flowfuse/node-red-dashboard",
-            "version": "1.20.1",
+            "version": "1.21.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "acorn": "^8.11.2",
diff --git a/package.json b/package.json
index 30cde2f3..8e8529b7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.20.1",
+    "version": "1.21.0",
     "description": "Dashboard 2.0 - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"

From beab2aa4fbbe16b28b8ba6353cc46d83fb8fe9f9 Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Fri, 20 Dec 2024 14:59:14 +0000
Subject: [PATCH 4/5] Update ui-audio doc

---
 docs/nodes/widgets/ui-audio.md | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/docs/nodes/widgets/ui-audio.md b/docs/nodes/widgets/ui-audio.md
index 976bdd33..7d985c2e 100644
--- a/docs/nodes/widgets/ui-audio.md
+++ b/docs/nodes/widgets/ui-audio.md
@@ -54,7 +54,8 @@ dynamic:
 
 </TryDemo>
 
-Adds a clickable button to your dashboard.
+Adds an audio player to the dashboard.
+The audio player can be controlled by the user or by control messages.
 
 ## Properties
 
@@ -67,10 +68,3 @@ Adds a clickable button to your dashboard.
 ## Controls
 
 <ControlsTable/>
-
-## Example
-
-### Simple Button
-
-![Example of a Button](/images/node-examples/ui-button.png "Example of a Button"){data-zoomable}
-*Example of a rendered button in a Dashboard.*

From d29cffc7529e90e006f6a18925cb4c41d051c7cf Mon Sep 17 00:00:00 2001
From: Stephen McLaughlin <44235289+Steve-Mcl@users.noreply.github.com>
Date: Fri, 20 Dec 2024 15:07:20 +0000
Subject: [PATCH 5/5] Update ui-audio.md

---
 docs/nodes/widgets/ui-audio.md | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/docs/nodes/widgets/ui-audio.md b/docs/nodes/widgets/ui-audio.md
index 7d985c2e..72bfa15e 100644
--- a/docs/nodes/widgets/ui-audio.md
+++ b/docs/nodes/widgets/ui-audio.md
@@ -37,18 +37,12 @@ dynamic:
 <script setup>
     import { ref } from 'vue'
 
-    import ExampleButtonHold from '../../examples/ui-button-hold.json'
-
     import TryDemo from "./../../components/TryDemo.vue"
-    import FlowViewer from '../../components/FlowViewer.vue'
     
-    const examples = ref({
-      'hold': ExampleButtonHold
-    })
 </script>
 
 
-<TryDemo href="button-example">
+<TryDemo href="audio-example">
 
 # Audio `ui-audio`