From e6d08b4f8787cc58b344933b8fc06272325b59ea Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Thu, 14 Nov 2024 19:31:50 +0000
Subject: [PATCH 1/7] reset table selection

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

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index 85e817ef..9d293b7b 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -173,6 +173,7 @@ export default {
             if (this.props.action === 'append') {
                 this.localData = value && value?.length > 0 ? [...this.localData || [], ...value] : value
             } else {
+                this.selected = null
                 this.localData = value
             }
 

From dfc3c0cbbfb7867970bab24c5415fddef0de04e6 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 22:18:50 +0000
Subject: [PATCH 2/7] dynamic ui-template format

---
 docs/nodes/widgets/ui-template.md         |   8 +
 nodes/widgets/ui_template.js              |  44 ++-
 ui/src/widgets/ui-template/UITemplate.vue | 380 ++++++++++++----------
 3 files changed, 240 insertions(+), 192 deletions(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 77857a14..6971687e 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -5,6 +5,10 @@ props:
     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.
+dynamic:
+    Format:
+        payload: msg.ui_update.format
+        structure: ["String"]
 ---
 
 <script setup>
@@ -30,6 +34,10 @@ Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs
 
 <PropsTable/>
 
+## Dynamic Properties
+
+<DynamicPropsTable/>
+
 ## Writing Custom Widgets
 
 UI Template will parse different tags and render them into Dashboard. The available tags are:
diff --git a/nodes/widgets/ui_template.js b/nodes/widgets/ui_template.js
index 3090fbda..f92f5e3c 100644
--- a/nodes/widgets/ui_template.js
+++ b/nodes/widgets/ui_template.js
@@ -1,3 +1,5 @@
+const statestore = require('../store/state.js')
+
 module.exports = function (RED) {
     function TemplateNode (config) {
         const node = this
@@ -5,10 +7,6 @@ module.exports = function (RED) {
         // create node in Node-RED
         RED.nodes.createNode(this, config)
 
-        const evts = {
-            onAction: true // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
-        }
-
         if (config.templateScope === 'local') {
             config.page = ''
             config.ui = ''
@@ -31,18 +29,38 @@ module.exports = function (RED) {
             config.passthru = true
         }
 
-        // which group are we rendering this widget
+        // determine which group/page/ui are we rendering this widget
+        let group, page, ui
         if (config.group) {
-            const group = RED.nodes.getNode(config.group)
-            // inform the dashboard UI that we are adding this node
-            group.register(node, config, evts)
+            group = RED.nodes.getNode(config.group)
         } else if (config.page) {
-            const page = RED.nodes.getNode(config.page)
-            // inform the dashboard UI that we are adding this node
-            page.register(null, node, config, evts)
+            page = RED.nodes.getNode(config.page)
         } else if (config.ui) {
-            const ui = RED.nodes.getNode(config.ui)
-            // inform the dashboard UI that we are adding this node
+            ui = RED.nodes.getNode(config.ui)
+        }
+
+        const evts = {
+            onAction: true, // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
+            beforeSend: function (msg) {
+                if (msg.ui_update) {
+                    const update = msg.ui_update
+                    if (typeof update.format !== 'undefined') {
+                        // dynamically set "format" property
+                        const parent = group || page || ui
+                        statestore.set(parent.getBase(), node, msg, 'format', update.format)
+                    }
+                }
+                return msg
+            }
+        }
+
+
+        // inform the dashboard group/page/ui that we are adding this node
+        if (group) {
+            group.register(node, config, evts)
+        } else if (page) {
+            page.register(null, node, config, evts)
+        } else if (ui) {
             ui.register(null, null, node, config, evts)
         }
     }
diff --git a/ui/src/widgets/ui-template/UITemplate.vue b/ui/src/widgets/ui-template/UITemplate.vue
index 4b479fdb..d388e60f 100644
--- a/ui/src/widgets/ui-template/UITemplate.vue
+++ b/ui/src/widgets/ui-template/UITemplate.vue
@@ -1,9 +1,7 @@
 <script>
 
-import { h } from 'vue'
-
+import { h, ref } from 'vue'
 import VueParser from '../../util/vue.acorn.js'
-
 import { mapState } from 'vuex' // eslint-disable-line import/order
 
 export default {
@@ -11,189 +9,36 @@ export default {
     inject: ['$socket', '$dataTracker'],
     props: {
         id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) }
+        props: { type: Object, default: () => ({}) },
+        state: { type: Object, default: () => ({}) }
     },
-    setup (props) {
-        const parser = new DOMParser()
-        const htmlDoc = parser.parseFromString(props.props.format, 'text/html')
-
-        // check whether we have a fully defined Vue component, or _just_ HTML
-        const templates = htmlDoc.getElementsByTagName('template')
-        const template = templates.length ? templates[0] : props.props.format
-
-        let head
-
-        /* Check for any CSS <style> tags */
-        const styles = htmlDoc.getElementsByTagName('style')
-
-        if (styles.length) {
-            // parse the CSS and add to the head
-            for (let s = 0; s < styles.length; s++) {
-                const style = styles[s]
-                head = head || []
-                head.push({
-                    type: 'style',
-                    data: {
-                        innerHTML: style.innerHTML
-                    }
-                })
-            }
-        }
-
-        /* Check for any <script> elements */
-        const scripts = htmlDoc.getElementsByTagName('script')
-        let component
-
-        if (scripts.length) {
-            // parse the Vue component, which is mostly stringified
-            for (let s = 0; s < scripts.length; s++) {
-                const script = scripts[s]
-                // check we're loading of a script file or if it's raw JS/Vue, or a
-                if (script.getAttribute('src')) {
-                    head = head || []
-                    head.push({
-                        type: 'script',
-                        data: {
-                            src: script.getAttribute('src'),
-                            defer: script.getAttribute('defer'),
-                            async: script.getAttribute('async')
-                        }
-                    })
-                } else {
-                    const parsed = VueParser.parse(script.innerHTML)
-                    if (parsed.js) {
-                        component = {
-                            ...component,
-                            js: parsed.js
-                        }
-                    } else {
-                        component = {
-                            ...component,
-                            ...parsed
-                        }
-                    }
-                }
-            }
-        }
-
-        // here we inject the UI Template Vue Template code into our own, in order to extend base functionality
-        return () => h({
-            props: ['id', 'props'],
-            inject: ['$socket', '$dataTracker'],
-            errorCaptured: (err, vm, info) => {
-                console.error('errorCaptured', err, vm, info)
-                return false
-            },
-            head () {
-                let _props = this.props || props
-                if (_props.props) { _props = _props.props }
-
-                const setup = {}
-
-                if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
-                    if (!head) {
-                        return {}
-                    } else if (Array.isArray(head) && head.length > 0) {
-                        // loop through the head items and add them to the setup config
-                        head.forEach((item) => {
-                            // check that we have a data object defining the properties of the tag
-                            if (item.data) {
-                                // types supported by @unhead/vue:
-                                //      script, link, meta, style
-                                setup[item.type] = setup[item.type] || []
-
-                                // add meta data for debugging and auditing
-                                item.data['data-template-name'] = _props.name
-                                item.data['data-template-scope'] = _props.templateScope
-                                item.data['data-template-id'] = this.id
-                                if (_props.innerHTML) {
-                                    item.data.innerHTML = _props.innerHTML
-                                }
-
-                                setup[item.type].push(item.data)
-                            }
-                        })
-                    }
-                }
-                if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
-                    setup.style = [
-                        {
-                            innerHTML: _props.format,
-                            'data-template-name': _props.name,
-                            'data-template-scope': _props.templateScope,
-                            'data-template-id': this.id
-                        }
-                    ]
-                }
-                return setup
-            },
-            template: ['local', 'widget:page', 'widget:ui'].includes(props.props.templateScope) ? template : undefined,
-            watch: {
-                ...component?.watch
-            },
-            computed: {
-                ...mapState('data', ['messages']),
-                ...mapState('setup', ['setup']),
-                msg () {
-                    return this.messages[this.id] || {}
-                },
-                value: {
-                    get () {
-                        return this.messages[this.id]?.payload
-                    },
-                    set (val) {
-                        if (this.value === val) {
-                            return // no change
-                        }
-                        const msg = this.messages[this.id] || {}
-                        msg.payload = val
-                        this.messages[this.id] = msg
-                    }
-                },
-                ...component?.computed
-            },
-            methods: {
-                send (msg) {
-                    if (msg) {
-                        this.$parent.send(this, msg)
-                    }
-                },
-                submit ($evt) {
-                    this.$parent.submit(this, $evt)
-                },
-                ...component?.methods
-            },
-            created () {
-                this.$dataTracker(props.id)
-            },
-            mounted () {
-                if (component?.js) {
-                    // run any generic JS code user has defined outside of a VueJS component
-                    // eslint-disable-next-line no-eval
-                    eval(component.js)
-                }
-                if (component?.mounted) {
-                    component.mounted.call(this)
-                }
-            },
-            unmounted () {
-                // eslint-disable-next-line no-eval
-                this.$socket.off(`msg-input:${this.id}`)
-                if (component?.unmounted) {
-                    component.unmounted.call(this)
-                }
-            },
-            data: component ? component.data : null
-        }, {
-            id: props.id,
-            props: props.props
-        })
+    created () {
+        this.$dataTracker(this.id, null, null, this.onDynamicProperties)
+    },
+    render() {
+        // Call the method to parse the input (template or raw HTML) specified by the user
+        const { head, component, template } = this.parseCustomTemplate()
+
+        // Create a virtual node which can be loaded by VueJs in the virtual DOM.
+        // VueJs will detect automatically all changes to the previous virtual DOM,
+        // and only do the necessary updates (avoiding a slow full refresh that way).
+        // The custom Vue template will be injected in the core ui-template, in
+        // in order to extend base functionality.
+        return this.createVNode(head, component, template, this)
     },
     errorCaptured: (err, vm, info) => {
         console.error('errorCaptured', err, vm, info)
         return false
     },
     methods: {
+        onDynamicProperties (msg) {
+            const updates = msg.ui_update
+            if (!updates) {
+                return
+            }
+            this.updateDynamicProperty('format', updates.format)
+            this.$forceUpdate()
+        },
         send (component, msg) {
             if (typeof (msg) !== 'object') {
                 msg = { payload: msg }
@@ -216,6 +61,183 @@ export default {
             msg._dashboard.sourceId = component.id
             msg._dashboard.templateId = this.id
             this.$socket.emit('widget-action', this.id, msg) // TODO: should we have a widget-send emitter to differentiate from action?
+        },
+        parseCustomTemplate() {
+            const parser = new DOMParser()
+            const htmlDoc = parser.parseFromString(this.getProperty('format'), 'text/html')
+
+            // Check whether the user has specified a fully defined Vue component, or _just_ raw HTML
+            const templates = htmlDoc.getElementsByTagName('template')
+            const template = templates.length ? templates[0] : this.getProperty('format')
+
+            let head = []
+
+            // Check whether the user has specifed any CSS <style> tags
+            const styles = htmlDoc.getElementsByTagName('style')
+
+            if (styles.length) {
+                // parse the CSS and add to the head
+                for (let s = 0; s < styles.length; s++) {
+                    const style = styles[s]
+                    head.push({
+                        type: 'style',
+                        data: {
+                            innerHTML: style.innerHTML
+                        }
+                    })
+                }
+            }
+
+            let component = {}
+
+            // Check whether the user has specifed any javascript <script> tags
+            const scripts = htmlDoc.getElementsByTagName('script')
+
+            if (scripts.length) {
+                // parse the Vue component, which is mostly stringified
+                for (let s = 0; s < scripts.length; s++) {
+                    const script = scripts[s]
+                    if (script.getAttribute('src')) {
+                        head.push({
+                            type: 'script',
+                            data: {
+                                src: script.getAttribute('src'),
+                                defer: script.getAttribute('defer'),
+                                async: script.getAttribute('async')
+                            }
+                        })
+                    } else {
+                        const parsed = VueParser.parse(script.innerHTML)
+                        if (parsed.js) {
+                            component = {
+                                ...component,
+                                js: parsed.js
+                            }
+                        } else {
+                            component = {
+                                ...component,
+                                ...parsed
+                            }
+                        }
+                    }
+                }
+            }
+
+            return { head, component, template }
+        },
+        createVNode(head, component, template, parent) {
+            // Return a (VueJs VNode directly to create a virtual DOM.
+            // A VueJs template will created here, even when the user specified raw HTML. 
+            return h({
+                props: ['id', 'props'],
+                inject: ['$socket', '$dataTracker'],
+                errorCaptured: (err, vm, info) => {
+                    console.error('errorCaptured', err, vm, info)
+                    return false
+                },
+                head() {
+                    let _props = this.props || parent.props
+                    if (_props.props) { _props = _props.props }
+
+                    const setup = {}
+
+                    if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
+                        if (!head) {
+                            return {}
+                        } else if (Array.isArray(head) && head.length > 0) {
+                            // loop through the head items and add them to the setup config
+                            head.forEach((item) => {
+                                // check that we have a data object defining the properties of the tag
+                                if (item.data) {
+                                    // types supported by @unhead/vue:
+                                    //      script, link, meta, style
+                                    setup[item.type] = setup[item.type] || []
+                                    
+                                    // add meta data for debugging and auditing
+                                    item.data['data-template-name'] = _props.name
+                                    item.data['data-template-scope'] = _props.templateScope
+                                    item.data['data-template-id'] = this.id
+                                    if (_props.innerHTML) {
+                                        item.data.innerHTML = _props.innerHTML
+                                    }
+                                    setup[item.type].push(item.data)
+                                }
+                            })
+                        }
+                    }
+                    if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
+                        setup.style = [
+                            {
+                                innerHTML: _props.format,
+                                'data-template-name': _props.name,
+                                'data-template-scope': _props.templateScope,
+                                'data-template-id': this.id
+                            }
+                        ]
+                    }
+                    return setup
+                },
+                template: ['local', 'widget:page', 'widget:ui'].includes(parent.props.templateScope) ? template : undefined,
+                watch: {
+                    ...component?.watch
+                },
+                computed: {
+                    ...mapState('data', ['messages']),
+                    ...mapState('setup', ['setup']),
+                    msg() {
+                        return this.messages[this.id] || {}
+                    },
+                    value: {
+                        get() {
+                            return this.messages[this.id]?.payload
+                        },
+                        set(val) {
+                            if (this.value === val) {
+                                return // no change
+                            }
+                            const msg = this.messages[this.id] || {}
+                            msg.payload = val
+                            this.messages[this.id] = msg
+                        }
+                    },
+                    ...component?.computed
+                },
+                methods: {
+                    send(msg) {
+                        if (msg) {
+                            this.$parent.send(this, msg)
+                        }
+                    },
+                    submit($evt) {
+                        this.$parent.submit(this, $evt)
+                    },
+                    ...component?.methods
+                },
+                created() {
+                    this.$dataTracker(parent.id, null, null, parent.onDynamicProperties)
+                },
+                mounted() {
+                    if (component?.js) {
+                        // run any generic JS code user has defined outside of a VueJS component
+                        // eslint-disable-next-line no-eval
+                        eval(component.js)
+                    }
+                    if (component?.mounted) {
+                        component.mounted.call(this)
+                    }
+                },
+                unmounted() {
+                    // eslint-disable-next-line no-eval
+                    this.$socket.off(`msg-input:${this.id}`)
+                    if (component?.unmounted) {
+                        component.unmounted.call(this)
+                    }
+                },
+                data: component ? component.data : null
+            }, {
+                id: parent.id,
+                props: parent.props
+            })
         }
     }
 }

From 9edb01cb2044da73f2aa58db6fe090c030a9d3e2 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 23:25:24 +0100
Subject: [PATCH 3/7] Revert pr changes

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

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index 9d293b7b..85e817ef 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -173,7 +173,6 @@ export default {
             if (this.props.action === 'append') {
                 this.localData = value && value?.length > 0 ? [...this.localData || [], ...value] : value
             } else {
-                this.selected = null
                 this.localData = value
             }
 

From a4baef97d913c6e9d3c422d8c4d95036c2cd3b35 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 23:42:06 +0100
Subject: [PATCH 4/7] revert commit

---
 ui/src/widgets/ui-template/UITemplate.vue | 380 ++++++++++------------
 1 file changed, 179 insertions(+), 201 deletions(-)

diff --git a/ui/src/widgets/ui-template/UITemplate.vue b/ui/src/widgets/ui-template/UITemplate.vue
index d388e60f..4b479fdb 100644
--- a/ui/src/widgets/ui-template/UITemplate.vue
+++ b/ui/src/widgets/ui-template/UITemplate.vue
@@ -1,7 +1,9 @@
 <script>
 
-import { h, ref } from 'vue'
+import { h } from 'vue'
+
 import VueParser from '../../util/vue.acorn.js'
+
 import { mapState } from 'vuex' // eslint-disable-line import/order
 
 export default {
@@ -9,36 +11,189 @@ export default {
     inject: ['$socket', '$dataTracker'],
     props: {
         id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) },
-        state: { type: Object, default: () => ({}) }
-    },
-    created () {
-        this.$dataTracker(this.id, null, null, this.onDynamicProperties)
+        props: { type: Object, default: () => ({}) }
     },
-    render() {
-        // Call the method to parse the input (template or raw HTML) specified by the user
-        const { head, component, template } = this.parseCustomTemplate()
-
-        // Create a virtual node which can be loaded by VueJs in the virtual DOM.
-        // VueJs will detect automatically all changes to the previous virtual DOM,
-        // and only do the necessary updates (avoiding a slow full refresh that way).
-        // The custom Vue template will be injected in the core ui-template, in
-        // in order to extend base functionality.
-        return this.createVNode(head, component, template, this)
+    setup (props) {
+        const parser = new DOMParser()
+        const htmlDoc = parser.parseFromString(props.props.format, 'text/html')
+
+        // check whether we have a fully defined Vue component, or _just_ HTML
+        const templates = htmlDoc.getElementsByTagName('template')
+        const template = templates.length ? templates[0] : props.props.format
+
+        let head
+
+        /* Check for any CSS <style> tags */
+        const styles = htmlDoc.getElementsByTagName('style')
+
+        if (styles.length) {
+            // parse the CSS and add to the head
+            for (let s = 0; s < styles.length; s++) {
+                const style = styles[s]
+                head = head || []
+                head.push({
+                    type: 'style',
+                    data: {
+                        innerHTML: style.innerHTML
+                    }
+                })
+            }
+        }
+
+        /* Check for any <script> elements */
+        const scripts = htmlDoc.getElementsByTagName('script')
+        let component
+
+        if (scripts.length) {
+            // parse the Vue component, which is mostly stringified
+            for (let s = 0; s < scripts.length; s++) {
+                const script = scripts[s]
+                // check we're loading of a script file or if it's raw JS/Vue, or a
+                if (script.getAttribute('src')) {
+                    head = head || []
+                    head.push({
+                        type: 'script',
+                        data: {
+                            src: script.getAttribute('src'),
+                            defer: script.getAttribute('defer'),
+                            async: script.getAttribute('async')
+                        }
+                    })
+                } else {
+                    const parsed = VueParser.parse(script.innerHTML)
+                    if (parsed.js) {
+                        component = {
+                            ...component,
+                            js: parsed.js
+                        }
+                    } else {
+                        component = {
+                            ...component,
+                            ...parsed
+                        }
+                    }
+                }
+            }
+        }
+
+        // here we inject the UI Template Vue Template code into our own, in order to extend base functionality
+        return () => h({
+            props: ['id', 'props'],
+            inject: ['$socket', '$dataTracker'],
+            errorCaptured: (err, vm, info) => {
+                console.error('errorCaptured', err, vm, info)
+                return false
+            },
+            head () {
+                let _props = this.props || props
+                if (_props.props) { _props = _props.props }
+
+                const setup = {}
+
+                if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
+                    if (!head) {
+                        return {}
+                    } else if (Array.isArray(head) && head.length > 0) {
+                        // loop through the head items and add them to the setup config
+                        head.forEach((item) => {
+                            // check that we have a data object defining the properties of the tag
+                            if (item.data) {
+                                // types supported by @unhead/vue:
+                                //      script, link, meta, style
+                                setup[item.type] = setup[item.type] || []
+
+                                // add meta data for debugging and auditing
+                                item.data['data-template-name'] = _props.name
+                                item.data['data-template-scope'] = _props.templateScope
+                                item.data['data-template-id'] = this.id
+                                if (_props.innerHTML) {
+                                    item.data.innerHTML = _props.innerHTML
+                                }
+
+                                setup[item.type].push(item.data)
+                            }
+                        })
+                    }
+                }
+                if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
+                    setup.style = [
+                        {
+                            innerHTML: _props.format,
+                            'data-template-name': _props.name,
+                            'data-template-scope': _props.templateScope,
+                            'data-template-id': this.id
+                        }
+                    ]
+                }
+                return setup
+            },
+            template: ['local', 'widget:page', 'widget:ui'].includes(props.props.templateScope) ? template : undefined,
+            watch: {
+                ...component?.watch
+            },
+            computed: {
+                ...mapState('data', ['messages']),
+                ...mapState('setup', ['setup']),
+                msg () {
+                    return this.messages[this.id] || {}
+                },
+                value: {
+                    get () {
+                        return this.messages[this.id]?.payload
+                    },
+                    set (val) {
+                        if (this.value === val) {
+                            return // no change
+                        }
+                        const msg = this.messages[this.id] || {}
+                        msg.payload = val
+                        this.messages[this.id] = msg
+                    }
+                },
+                ...component?.computed
+            },
+            methods: {
+                send (msg) {
+                    if (msg) {
+                        this.$parent.send(this, msg)
+                    }
+                },
+                submit ($evt) {
+                    this.$parent.submit(this, $evt)
+                },
+                ...component?.methods
+            },
+            created () {
+                this.$dataTracker(props.id)
+            },
+            mounted () {
+                if (component?.js) {
+                    // run any generic JS code user has defined outside of a VueJS component
+                    // eslint-disable-next-line no-eval
+                    eval(component.js)
+                }
+                if (component?.mounted) {
+                    component.mounted.call(this)
+                }
+            },
+            unmounted () {
+                // eslint-disable-next-line no-eval
+                this.$socket.off(`msg-input:${this.id}`)
+                if (component?.unmounted) {
+                    component.unmounted.call(this)
+                }
+            },
+            data: component ? component.data : null
+        }, {
+            id: props.id,
+            props: props.props
+        })
     },
     errorCaptured: (err, vm, info) => {
         console.error('errorCaptured', err, vm, info)
         return false
     },
     methods: {
-        onDynamicProperties (msg) {
-            const updates = msg.ui_update
-            if (!updates) {
-                return
-            }
-            this.updateDynamicProperty('format', updates.format)
-            this.$forceUpdate()
-        },
         send (component, msg) {
             if (typeof (msg) !== 'object') {
                 msg = { payload: msg }
@@ -61,183 +216,6 @@ export default {
             msg._dashboard.sourceId = component.id
             msg._dashboard.templateId = this.id
             this.$socket.emit('widget-action', this.id, msg) // TODO: should we have a widget-send emitter to differentiate from action?
-        },
-        parseCustomTemplate() {
-            const parser = new DOMParser()
-            const htmlDoc = parser.parseFromString(this.getProperty('format'), 'text/html')
-
-            // Check whether the user has specified a fully defined Vue component, or _just_ raw HTML
-            const templates = htmlDoc.getElementsByTagName('template')
-            const template = templates.length ? templates[0] : this.getProperty('format')
-
-            let head = []
-
-            // Check whether the user has specifed any CSS <style> tags
-            const styles = htmlDoc.getElementsByTagName('style')
-
-            if (styles.length) {
-                // parse the CSS and add to the head
-                for (let s = 0; s < styles.length; s++) {
-                    const style = styles[s]
-                    head.push({
-                        type: 'style',
-                        data: {
-                            innerHTML: style.innerHTML
-                        }
-                    })
-                }
-            }
-
-            let component = {}
-
-            // Check whether the user has specifed any javascript <script> tags
-            const scripts = htmlDoc.getElementsByTagName('script')
-
-            if (scripts.length) {
-                // parse the Vue component, which is mostly stringified
-                for (let s = 0; s < scripts.length; s++) {
-                    const script = scripts[s]
-                    if (script.getAttribute('src')) {
-                        head.push({
-                            type: 'script',
-                            data: {
-                                src: script.getAttribute('src'),
-                                defer: script.getAttribute('defer'),
-                                async: script.getAttribute('async')
-                            }
-                        })
-                    } else {
-                        const parsed = VueParser.parse(script.innerHTML)
-                        if (parsed.js) {
-                            component = {
-                                ...component,
-                                js: parsed.js
-                            }
-                        } else {
-                            component = {
-                                ...component,
-                                ...parsed
-                            }
-                        }
-                    }
-                }
-            }
-
-            return { head, component, template }
-        },
-        createVNode(head, component, template, parent) {
-            // Return a (VueJs VNode directly to create a virtual DOM.
-            // A VueJs template will created here, even when the user specified raw HTML. 
-            return h({
-                props: ['id', 'props'],
-                inject: ['$socket', '$dataTracker'],
-                errorCaptured: (err, vm, info) => {
-                    console.error('errorCaptured', err, vm, info)
-                    return false
-                },
-                head() {
-                    let _props = this.props || parent.props
-                    if (_props.props) { _props = _props.props }
-
-                    const setup = {}
-
-                    if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
-                        if (!head) {
-                            return {}
-                        } else if (Array.isArray(head) && head.length > 0) {
-                            // loop through the head items and add them to the setup config
-                            head.forEach((item) => {
-                                // check that we have a data object defining the properties of the tag
-                                if (item.data) {
-                                    // types supported by @unhead/vue:
-                                    //      script, link, meta, style
-                                    setup[item.type] = setup[item.type] || []
-                                    
-                                    // add meta data for debugging and auditing
-                                    item.data['data-template-name'] = _props.name
-                                    item.data['data-template-scope'] = _props.templateScope
-                                    item.data['data-template-id'] = this.id
-                                    if (_props.innerHTML) {
-                                        item.data.innerHTML = _props.innerHTML
-                                    }
-                                    setup[item.type].push(item.data)
-                                }
-                            })
-                        }
-                    }
-                    if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
-                        setup.style = [
-                            {
-                                innerHTML: _props.format,
-                                'data-template-name': _props.name,
-                                'data-template-scope': _props.templateScope,
-                                'data-template-id': this.id
-                            }
-                        ]
-                    }
-                    return setup
-                },
-                template: ['local', 'widget:page', 'widget:ui'].includes(parent.props.templateScope) ? template : undefined,
-                watch: {
-                    ...component?.watch
-                },
-                computed: {
-                    ...mapState('data', ['messages']),
-                    ...mapState('setup', ['setup']),
-                    msg() {
-                        return this.messages[this.id] || {}
-                    },
-                    value: {
-                        get() {
-                            return this.messages[this.id]?.payload
-                        },
-                        set(val) {
-                            if (this.value === val) {
-                                return // no change
-                            }
-                            const msg = this.messages[this.id] || {}
-                            msg.payload = val
-                            this.messages[this.id] = msg
-                        }
-                    },
-                    ...component?.computed
-                },
-                methods: {
-                    send(msg) {
-                        if (msg) {
-                            this.$parent.send(this, msg)
-                        }
-                    },
-                    submit($evt) {
-                        this.$parent.submit(this, $evt)
-                    },
-                    ...component?.methods
-                },
-                created() {
-                    this.$dataTracker(parent.id, null, null, parent.onDynamicProperties)
-                },
-                mounted() {
-                    if (component?.js) {
-                        // run any generic JS code user has defined outside of a VueJS component
-                        // eslint-disable-next-line no-eval
-                        eval(component.js)
-                    }
-                    if (component?.mounted) {
-                        component.mounted.call(this)
-                    }
-                },
-                unmounted() {
-                    // eslint-disable-next-line no-eval
-                    this.$socket.off(`msg-input:${this.id}`)
-                    if (component?.unmounted) {
-                        component.unmounted.call(this)
-                    }
-                },
-                data: component ? component.data : null
-            }, {
-                id: parent.id,
-                props: parent.props
-            })
         }
     }
 }

From e57759e830f8862dcc501ec33abbd7d303376b5d Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 23:43:24 +0100
Subject: [PATCH 5/7] revert commit

---
 nodes/widgets/ui_template.js | 44 +++++++++++-------------------------
 1 file changed, 13 insertions(+), 31 deletions(-)

diff --git a/nodes/widgets/ui_template.js b/nodes/widgets/ui_template.js
index f92f5e3c..3090fbda 100644
--- a/nodes/widgets/ui_template.js
+++ b/nodes/widgets/ui_template.js
@@ -1,5 +1,3 @@
-const statestore = require('../store/state.js')
-
 module.exports = function (RED) {
     function TemplateNode (config) {
         const node = this
@@ -7,6 +5,10 @@ module.exports = function (RED) {
         // create node in Node-RED
         RED.nodes.createNode(this, config)
 
+        const evts = {
+            onAction: true // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
+        }
+
         if (config.templateScope === 'local') {
             config.page = ''
             config.ui = ''
@@ -29,38 +31,18 @@ module.exports = function (RED) {
             config.passthru = true
         }
 
-        // determine which group/page/ui are we rendering this widget
-        let group, page, ui
+        // which group are we rendering this widget
         if (config.group) {
-            group = RED.nodes.getNode(config.group)
-        } else if (config.page) {
-            page = RED.nodes.getNode(config.page)
-        } else if (config.ui) {
-            ui = RED.nodes.getNode(config.ui)
-        }
-
-        const evts = {
-            onAction: true, // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
-            beforeSend: function (msg) {
-                if (msg.ui_update) {
-                    const update = msg.ui_update
-                    if (typeof update.format !== 'undefined') {
-                        // dynamically set "format" property
-                        const parent = group || page || ui
-                        statestore.set(parent.getBase(), node, msg, 'format', update.format)
-                    }
-                }
-                return msg
-            }
-        }
-
-
-        // inform the dashboard group/page/ui that we are adding this node
-        if (group) {
+            const group = RED.nodes.getNode(config.group)
+            // inform the dashboard UI that we are adding this node
             group.register(node, config, evts)
-        } else if (page) {
+        } else if (config.page) {
+            const page = RED.nodes.getNode(config.page)
+            // inform the dashboard UI that we are adding this node
             page.register(null, node, config, evts)
-        } else if (ui) {
+        } else if (config.ui) {
+            const ui = RED.nodes.getNode(config.ui)
+            // inform the dashboard UI that we are adding this node
             ui.register(null, null, node, config, evts)
         }
     }

From 6cc3ad330e533a63289ba4c244fcdfc91cb94051 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 23:47:26 +0100
Subject: [PATCH 6/7] Revert commit

---
 docs/nodes/widgets/ui-template.md | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 6971687e..77857a14 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -5,10 +5,6 @@ props:
     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.
-dynamic:
-    Format:
-        payload: msg.ui_update.format
-        structure: ["String"]
 ---
 
 <script setup>
@@ -34,10 +30,6 @@ Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs
 
 <PropsTable/>
 
-## Dynamic Properties
-
-<DynamicPropsTable/>
-
 ## Writing Custom Widgets
 
 UI Template will parse different tags and render them into Dashboard. The available tags are:

From 13be41ceb11223c3455b1591cfd1acebf58e28d9 Mon Sep 17 00:00:00 2001
From: bartbutenaers <bart.butenaers@gmail.com>
Date: Sat, 16 Nov 2024 23:48:36 +0100
Subject: [PATCH 7/7] restore commit

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

diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index 85e817ef..9d293b7b 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -173,6 +173,7 @@ export default {
             if (this.props.action === 'append') {
                 this.localData = value && value?.length > 0 ? [...this.localData || [], ...value] : value
             } else {
+                this.selected = null
                 this.localData = value
             }