Merge pull request #98 from flowforge/ui-template

Add Basic UI Template Node
FlowFuse · Aug 3, 2023 · 8ef3366 · 8ef3366
2 parents b8bb9e0 + 7fe3bdb
commit 8ef3366
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/nodes/widgets/ui_template.html b/nodes/widgets/ui_template.html
@@ -29,7 +29,7 @@
                     }
                 },
                 height: { value: 0 },
-                format: { value: '<div ng-bind-html="msg.payload"></div>' },
+                format: { value: '<div>{{ msg.payload }}</div>' },
                 storeOutMessages: { value: true },
                 fwdInMessages: { value: true },
                 resendOnRefresh: { value: true },
@@ -170,6 +170,12 @@
             <option value="global" data-i18n="ui-template.label.global"></option>
         </select>
     </div>-->
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
+        <div style="display:inline-block; width:calc(100% - 105px)">
+            <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
+        </div>
+    </div>
     <div class="form-row">
         <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
         <input type="text" id="node-input-group">
@@ -184,12 +190,6 @@
         <label for="node-input-className"><i class="fa fa-code"></i>  <span data-i18n="ui-template.label.className"></label>
         <input type="text" id="node-input-className" data-i18n="[placeholder]ui-template.label.classNamePlaceholder"/>
     </div>-->
-    <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
-        <div style="display:inline-block; width:calc(100% - 105px)">
-            <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
-        </div>
-    </div>
     <div class="form-row" style="margin-bottom:0px;">
         <label for="node-input-format"><i class="fa fa-copy"></i> <span data-i18n="ui-template.label.template"></span></label>
         <input type="hidden" id="node-input-format">

diff --git a/package.json b/package.json
@@ -41,7 +41,8 @@
             "ui-switch": "nodes/widgets/ui_switch.js",
             "ui-text": "nodes/widgets/ui_text.js",
             "ui-chart": "nodes/widgets/ui_chart.js",
-            "ui-markdown": "nodes/widgets/ui_markdown.js"
+            "ui-markdown": "nodes/widgets/ui_markdown.js",
+            "ui-template": "nodes/widgets/ui_template.js"
         }
     },
     "dependencies": {

diff --git a/ui/src/widgets/ui-template/UITemplate.vue b/ui/src/widgets/ui-template/UITemplate.vue
@@ -1,8 +1,9 @@
-<template>
-    <div class="nrdb-ui-widget">Template Node: {{ props.format }}</div>
-</template>
-
 <script>
+
+// eslint-disable vue/one-component-per-file
+
+import { h } from 'vue'
+
 import { useDataTracker } from '../data-tracker.js' // eslint-disable-line import/order
 import { mapState } from 'vuex' // eslint-disable-line import/order
 
@@ -15,9 +16,21 @@ export default {
     },
     setup (props) {
         useDataTracker(props.id)
-    },
-    computed: {
-        ...mapState('data', ['values'])
+        return () => h({
+            props: ['id', 'props'],
+            template: props.props.format,
+            computed: {
+                ...mapState('data', ['values']),
+                msg () {
+                    return {
+                        payload: this.values[this.id]
+                    }
+                }
+            }
+        }, {
+            id: props.id,
+            props: props.props
+        })
     }
 }
 </script>

diff --git a/vue.config.js b/vue.config.js
@@ -3,6 +3,7 @@ const path = require('path')
 const { defineConfig } = require('@vue/cli-service')
 
 module.exports = defineConfig({
+    runtimeCompiler: true,
     transpileDependencies: true,
     publicPath: './',
     chainWebpack: config => {