I made some changes to support string/boolean/numeric values:
options:[
{label:"first",value:"first",icon:"mdi-basketball",color:"green"},
{label:"second", value:"second", icon:"mdi-basketball",color:"red"},
{label:"1",value:1, color:"blue",icon:"mdi-car-wrench"},
{label:"2", value:2, color:"orange",icon:"mdi-car-wrench"},
{label:"true",value:true,icon:"mdi-antenna",color:"green"},
{label:"false",value:false,icon:"mdi-antenna",color:"green"}
],
Short demo of those 3 types:
[{"id":"de1b3163bf3facec","type":"ui-template","z":"0bff6d05f60fe1e6","group":"9fa39c19a26ce99e","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"mss-wrapper\">\n <v-chip variant=\"text\">\n {{label}}\n </v-chip>\n <v-btn-toggle mandatory divided rounded=\"xl\" :variant=\"variant\" :color=\"selectedColor\" v-model=\"selection\">\n <v-btn v-for=\"(option, index) in options\" :key='index' :class=\"option.label ? '' : 'icon-only'\">\n <template v-if=\"option.icon\" v-slot:prepend>\n <v-icon size=\"x-large\"> {{option.icon}} </v-icon>\n </template>\n {{option.label}}\n </v-btn>\n </v-btn-toggle>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n //define me here\n label:\"Multistate Prototype\", \n options:[\n {label:\"first\",value:\"first\",icon:\"mdi-basketball\",color:\"green\"},\n {label:\"second\", value:\"second\", icon:\"mdi-basketball\",color:\"red\"},\n {label:\"1\",value:1, color:\"blue\",icon:\"mdi-car-wrench\"},\n {label:\"2\", value:2, color:\"orange\",icon:\"mdi-car-wrench\"},\n {label:\"true\",value:true,icon:\"mdi-antenna\",color:\"green\"},\n {label:\"false\",value:false,icon:\"mdi-antenna\",color:\"green\"}\n ],\n // \"outlined\" (if the site bg is white or very light)\"\n // \"default\" (if the site bg is dark)\"\n // (\"text\" or \"plain\" also available but requires some styling)\n look:\"outlined\", \n \n // no need to change those\n selection: null,\n changeByInput:false, // in case of input - render but don't send the msg out\n \n }\n },\n \n watch: {\n msg: function(){ \n if(this.isValidValue(this.msg.payload)){\n this.changeByInput = true\n debugger\n this.selection = this.options.findIndex(option => option.value === this.msg.payload )\n }\n },\n selection:function(){ \n if(this.changeByInput == true){\n this.changeByInput = false\n }\n else{\n this.send(this.getOutputMessage())\n }\n }\n },\n\n methods: {\n isValidValue:function (val){\n if(val === null){\n return false\n }\n if(val === undefined){\n return false\n }\n if(val === \"\"){\n return false\n }\n if(!['number', 'string', 'boolean'].includes(typeof value)){\n return false\n }\n if(this.options.findIndex(option => option.value === val ) == -1){\n return false\n }\n return true\n\n },\n findOptionByValue:function(val){\n let opt = this.options.find(option => option.value === val)\n if(opt){\n return opt\n }\n return null\n },\n getOutputMessage:function(){ \n return {payload:this.options[this.selection].value,topic:'multistate'} \n }\n },\n \n computed: { \n selectedColor:function(){\n if(this.selection == null){\n return \"\"\n }\n debugger;\n return this.options[this.selection].color ?? \"rgb(var(--v-theme-primary))\"\n },\n variant:function(){\n return this.look == \"default\" ? null : this.look\n }\n }\n }\n</script>\n\n<style>\n .mss-wrapper {\n display:grid;\n grid-template-columns:1fr 1fr;\n align-items:center;\n }\n .mss-wrapper .v-chip__content{\n white-space:normal;\n }\n .mss-wrapper .v-btn-group{\n width:max-content;\n border-color:rgba(var(--v-border-color),.3);\n }\n .mss-wrapper .v-btn--variant-elevated, .mss-wrapper .v-btn--variant-outlined{\n color:#cccccc;\n }\n .mss-wrapper .icon-only .v-btn__prepend{\n margin-inline:0;\n }\n</style>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":860,"y":600,"wires":[["2c1a39c087425d5d"]]},{"id":"2c1a39c087425d5d","type":"debug","z":"0bff6d05f60fe1e6","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1040,"y":600,"wires":[]},{"id":"7e65879baf2ea2ac","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":690,"y":600,"wires":[["de1b3163bf3facec"]]},{"id":"b2a986f8ccf3775c","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":690,"y":640,"wires":[["de1b3163bf3facec"]]},{"id":"7b5206f29c3d9e08","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":690,"y":680,"wires":[["de1b3163bf3facec"]]},{"id":"2a2d4d5001b533b5","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2","payloadType":"num","x":690,"y":720,"wires":[["de1b3163bf3facec"]]},{"id":"793c4d2072e8a8f0","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":690,"y":760,"wires":[["de1b3163bf3facec"]]},{"id":"3bb55094503fdd7d","type":"inject","z":"0bff6d05f60fe1e6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":690,"y":800,"wires":[["de1b3163bf3facec"]]},{"id":"9fa39c19a26ce99e","type":"ui-group","name":"Alarm systeem","page":"8604ea49340f9d41","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"8604ea49340f9d41","type":"ui-page","name":"Home","ui":"be29745a6e568f30","path":"/page1","icon":"home","layout":"grid","theme":"092547d34959327c","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
If to create it as for dedicated use, it is possible to use container query and change the layout quite a lot.
Hi, I have problem, I configured 12 states for my multistate switch with nice long names and icons. Can you figure out why it doesn't fit into my mobile screen
. And secondly it would mean that I would be stuck in my custom repo with all the (Vue specific?) CSS issues myself. I don't have time to keep on spending my precious little free time refactoring old nodes. I am not a software company...
