Merge branch 'main' of https://github.com/bartbutenaers/node-red-dash…

…board

docs/nodes/widgets/ui-audio.md

@@ -37,24 +37,19 @@ 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`
 
 </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 +62,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.*

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"

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))`

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
                 )