I exported the 3 template nodes for you. It will no do much without context data, but will at least render the v-cards.
[{"id":"9d0d7f0104f44d8a","type":"ui-template","z":"dd535f73e60cae86","group":"e0d58841230b2c65","page":"","ui":"","name":"Rule List","order":1,"width":"6","height":"1","head":"","format":"<template>\n <v-card class=\"mx-auto\" color=\"white\" width=\"450\">\n <v-img class=\"text-white\" height=\"62\" src=\"https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg\"\n cover>\n\n <v-toolbar color=\"transparent\">\n <v-toolbar-title class=\"text-h6\" text=\"Rule List\"></v-toolbar-title>\n <v-tooltip text=\"Refresh rule list\" location=\"top\">\n <template v-slot:activator=\"{ props }\" v-slot:append>\n <v-btn v-bind=\"props\" icon=\"mdi-refresh\" @click=\"send({topic: 'refresh', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Enabled rule\" location=\"top\">\n <template v-slot:activator=\"{ props }\" v-slot:append>\n <v-btn v-bind=\"props\" icon=\"mdi-bell-check\" @click=\"send({topic: 'enablerule', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Disable rule\" location=\"top\">\n <template v-slot:activator=\"{ props }\" v-slot:append>\n <v-btn v-bind=\"props\" icon=\"mdi-bell-cancel\" @click=\"send({topic: 'disablerule', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Move Up\" location=\"top\">\n <template v-slot:activator=\"{ props }\" v-slot:append>\n <v-btn v-bind=\"props\" icon=\"mdi-arrow-up-bold-circle-outline\" @click=\"send({topic: 'moveup', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Move Down\" location=\"top\">\n <template v-slot:activator=\"{ props }\" v-slot:append>\n <v-btn v-bind=\"props\" icon=\"mdi-arrow-down-bold-circle-outline\" @click=\"send({topic: 'movedown', payload: null})\">\n </v-btn>\n </template>\n </v-tooltip>\n </v-toolbar>\n </v-img>\n\n\n\n\n\n\n\n <v-card-text>\n <v-list bg-color=\"white\">\n \n <v-list-item v-for=\"(item, index) in items\" :key=\"index\" :value=\"index\" :title=\"item.name\" :subtitle=\"item.subtitle\"\n :prepend-icon=\"getEnabledIcon(item)\" @click=\"send({topic: 'selected', payload: item})\">\n </v-list-item>\n </v-list>\n </v-card-text>\n\n </v-card>\n</template>\n\n\n\n\n<script>\n export default {\n data() {\n return {\n counter: 0,\n items: [],\n selected: []\n }\n },\n mounted() {\n this.counter = 0\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined) { \n this.items = this.msg.payload;\n this.selected = [];\n this.counter = this.items.length; \n this.send({payload:undefined});\n }\n }\n },\n methods: {\n getEnabledIcon: function (item) {\n if (item !== undefined ) {\n if (item.enabled) {\n return 'mdi-bell-check'\n } else {\n return 'mdi-bell-cancel'\n }\n }\n }\n }\n }\n</script>\n\n<style>\n .v-overlay__content .v-list {\n background: rgba(var(--v-group-background));\n color: rgba(var(--v-group-on-background), var(--v-high-emphasis-opacity));\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":500,"y":1200,"wires":[["e0d963d56787736b","17ea1359dbc18a68"]]},{"id":"f20c789a97cb2333","type":"ui-template","z":"dd535f73e60cae86","group":"690c33a99698055d","page":"","ui":"","name":"Rule Details","order":1,"width":"6","height":"1","head":"","format":"<template>\n\n\n<v-card class=\"mx-auto\" color=\"white\" width=\"450\">\n <v-img class=\"text-white\" height=\"62\" src=\"https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg\" cover>\n\n <v-toolbar color=\"transparent\">\n <v-toolbar-title class=\"text-h6\" :text=\"rulename\"></v-toolbar-title>\n </v-toolbar>\n </v-img>\n\n <v-card-subtitle>\n {{ subtitle }}\n </v-card-subtitle>\n\n </v-card>\n <v-card class=\"mx-auto\" color=\"white\" width=\"450\">\n \n <v-toolbar color=\"transparent\">\n <v-toolbar-title class=\"text-h6\" text=\"Conditions\"></v-toolbar-title>\n <v-tooltip text=\"Move condition up\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-boom-gate-arrow-up-outline\"\n @click=\"send({topic: 'conditionup', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Move condition down\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-boom-gate-arrow-down-outline\"\n @click=\"send({topic: 'conditiondown', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Add condition\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-file-document-plus-outline\"\n @click=\"send({topic: 'addcondition', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Delete condition\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-delete\"\n @click=\"send({topic: 'deletecondition', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n \n </v-toolbar>\n <v-card-text>\n <v-list bg-color=\"white\">\n <v-list-item v-for=\"(item, index) in conditions\" :key=\"index\" :value=\"index\" :title=\"item.text\"\n :prepend-icon=\"getConditionIcon(item)\" @click=\"send({topic: 'condition', payload: item})\">\n </v-list-item>\n </v-list>\n </v-card-text>\n </v-card>\n <v-card class=\"mx-auto\" color=\"white\" width=\"450\">\n \n <v-toolbar color=\"transparent\">\n <v-toolbar-title class=\"text-h6\" text=\"Actions\"></v-toolbar-title>\n <v-tooltip text=\"Move action up\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-gesture-swipe-up\" @click=\"send({topic: 'actionup', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Move action down\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-gesture-swipe-down\" @click=\"send({topic: 'actiondown', payload: null})\">\n </v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Add SetState Action\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-book-plus-multiple\" @click=\"send({topic: 'addsetstateaction', payload: null})\">\n </v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Add Control Action\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-sign-direction-plus\" @click=\"send({topic: 'addcontrolaction', payload: null})\">\n </v-btn>\n </template>\n </v-tooltip>\n <v-tooltip text=\"Delete action\" location=\"top\">\n <template v-slot:activator=\"{ props }\">\n <v-btn v-bind=\"props\" icon=\"mdi-delete\" @click=\"send({topic: 'deleteaction', payload: null})\"></v-btn>\n </template>\n </v-tooltip>\n </v-toolbar>\n <v-card-text>\n <v-list bg-color=\"white\">\n <v-list-item v-for=\"(item, index) in actions\" :key=\"index\" :value=\"index\" :title=\"item.text\"\n :prepend-icon=\"getActionIcon(item)\" @click=\"send({topic: 'action', payload: item})\">\n </v-list-item>\n </v-list>\n </v-card-text>\n \n </v-card>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n rulename: \"\",\n subtitle: \"\",\n conditions: [],\n actions: []\n }\n },\n watch: {\n // watch for any changes of \"count\"\n msg: function() {\n if(this.msg.payload != undefined){\n this.rulename = this.msg.payload.name;\n this.subtitle = this.msg.payload.subtitle;\n this.conditions = this.msg.payload.conditions;\n this.actions = this.msg.payload.actions;\n this.send({payload:undefined});\n }\n }\n },\n computed: {\n },\n methods: {\n getConditionIcon: function (item) {\n if (item !== undefined ) {\n switch(item.trigger) {\n case \"time\":\n return \"mdi-clock-time-eight-outline\";\n break;\n case \"data\":\n return \"mdi-matrix\";\n break;\n case \"state\":\n return \"mdi-state-machine\";\n break;\n }\n }\n },\n getActionIcon: function (item) {\n if (item !== undefined ) {\n switch(item.type) {\n case \"control\":\n return \"mdi-message-processing\";\n break;\n case \"setstate\":\n return \"mdi-bullhorn\";\n break;\n }\n }\n }\n },\n mounted() {\n },\n unmounted() {\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1130,"y":1200,"wires":[["185ceeaae6edb7c0","e2e3abaaccd62596"]]},{"id":"d859cdcdccc010ab","type":"ui-template","z":"dd535f73e60cae86","group":"504d51af9a92c9a8","page":"","ui":"","name":"All Editors","order":1,"width":"6","height":"1","head":"","format":"<template>\n\n\n<v-card class=\"mx-auto\" color=\"white\" width=\"450\">\n <v-img class=\"text-white\" height=\"62\" src=\"https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg\" cover>\n\n <v-toolbar color=\"transparent\">\n <v-toolbar-title class=\"text-h6\" :text=\"title\"></v-toolbar-title>\n \n </v-toolbar>\n </v-img>\n\n <v-card-text>\n <div v-html=\"content\"></div>\n </v-card-text>\n\n </v-card>\n <v-card class=\"mx-auto\" color=\"white\" wv-if=\"conditioneditor\" width=\"450\">\n <v-card-text>\n <v-combobox label=\"Trigger\" :items=\"['data', 'state', 'time']\" v-model=\"condition.trigger\"></v-combobox>\n <v-text-field label=\"Operand\" v-model=\"condition.operand\"></v-text-field >\n <v-combobox label=\"Operator\" :items=\"['LT', 'GT', 'EQ']\" v-model=\"condition.operator\"></v-combobox>\n <v-text-field label=\"Value\" v-model=\"condition.value\"></v-text-field>\n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn color=\"success\" variant=\"flat\" @click=\"send({topic: 'conditionchange', payload: this.condition})\">\n Update Condition\n <v-icon icon=\"mdi-chevron-right\" end></v-icon>\n </v-btn>\n </v-card-actions>\n </v-card>\n <v-card class=\"mx-auto\" color=\"white\" v-if=\"actioncontroleditor\" width=\"450\">\n <v-card-text>\n <v-text-field label=\"Type\" model-value=\"Control\" disabled></v-text-field>\n <v-text-field label=\"Topic\" v-model=\"action.topic\"></v-text-field>\n <v-text-field label=\"Topic\" v-model=\"action.value\"></v-text-field>\n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn color=\"success\" variant=\"flat\" @click=\"send({topic: 'actionchange', payload: this.action})\">\n Update Action\n <v-icon icon=\"mdi-chevron-right\" end></v-icon>\n </v-btn>\n </v-card-actions>\n </v-card>\n <v-card class=\"mx-auto\" color=\"white\" v-if=\"actionsetstateeditor\" width=\"450\">\n <v-card-text>\n <v-text-field label=\"Type\" model-value=\"SetState\" disabled></v-text-field>\n <v-text-field label=\"State\" v-model=\"action.state\"></v-text-field>\n <v-text-field label=\"Name\" v-model=\"action.name\"></v-text-field>\n <v-text-field label=\"Value\" v-model=\"action.value\"></v-text-field>\n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn color=\"success\" variant=\"flat\" @click=\"send({topic: 'actionchange', payload: this.action})\">\n Update Action\n <v-icon icon=\"mdi-chevron-right\" end></v-icon>\n </v-btn>\n </v-card-actions>\n </v-card>\n\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n title: \"\",\n conditioneditor: false,\n actionsetstateeditor: false,\n actioncontroleditor: false,\n condition: {},\n action: {}\n }\n },\n watch: {\n // watch for any new messages\n msg: function() {\n if(this.msg.payload != undefined){\n this.title = this.msg.payload.title;\n this.conditioneditor = this.msg.payload.conditioneditor ?? false;\n this.actionsetstateeditor = this.msg.payload.actionsetstateeditor ?? false;\n this.actioncontroleditor = this.msg.payload.actioncontroleditor ?? false;\n this.condition = this.msg.payload.condition ?? {};\n this.action = this.msg.payload.action ?? {};\n this.send({payload:undefined});\n }\n }\n },\n computed: {\n },\n methods: {\n getConditionIcon: function (item) {\n if (item !== undefined ) {\n switch(item.trigger) {\n case \"time\":\n return \"mdi-clock-time-eight-outline\";\n break;\n case \"data\":\n return \"mdi-matrix\";\n break;\n case \"state\":\n return \"mdi-state-machine\";\n break;\n }\n }\n },\n getActionIcon: function (item) {\n if (item !== undefined ) {\n switch(item.type) {\n case \"control\":\n return \"mdi-message-processing\";\n break;\n case \"setstate\":\n return \"mdi-bullhorn\";\n break;\n }\n }\n }\n },\n mounted() {\n },\n unmounted() {\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1840,"y":1200,"wires":[["23b85808b5d405e2","3e721d5852267663"]]},{"id":"e0d58841230b2c65","type":"ui-group","name":"Rule List","page":"cbbf8c857c4418ed","width":"6","height":"1","order":2,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"690c33a99698055d","type":"ui-group","name":"Rule Details","page":"cbbf8c857c4418ed","width":"6","height":"1","order":3,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"504d51af9a92c9a8","type":"ui-group","name":"Rule Common Editor","page":"cbbf8c857c4418ed","width":"6","height":"1","order":4,"showTitle":false,"className":"","visible":"true","disabled":"false"},{"id":"cbbf8c857c4418ed","type":"ui-page","name":"Rule Editor","ui":"cb79bc4520925e32","path":"/ruleeditor","icon":"gate-nor","layout":"grid","theme":"70c3f16306584459","order":3,"className":"","visible":"true","disabled":"false"},{"id":"cb79bc4520925e32","type":"ui-base","name":"My UI","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-text"],"showPathInSidebar":false},{"id":"70c3f16306584459","type":"ui-theme","name":"File Browser","colors":{"surface":"#5b56fc","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#ffffff","groupOutline":"#ffffff"},"sizes":{"pagePadding":"0px","groupGap":"0px","groupBorderRadius":"0px","widgetGap":"6px"}}]
At the moment, all the v-cards in the template nodes are set to 450 pixels. Not that some of the templates have multiple cards on under each other.
So ideally I would like the 3 groups/templates to be displayed side-by-side talking up all available screen space.
- 