@maddytp/node-red-dashboard-2-ui-reef/resources/ui-input.umd.js

Set of UI nodes for aquarium automation based on @flowfuse/node-red-dashboard

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".ui-input-container[data-v-769be6d6]{display:flex;flex-flow:column;height:100%;width:100%}.ui-input-header[data-v-769be6d6]{display:flex;justify-content:space-between;text-transform:uppercase;padding-left:3px;padding-right:3px;height:1.4em}.ui-input-label[data-v-769be6d6],.ui-input-display[data-v-769be6d6]{font-size:14px;font-weight:500;letter-spacing:.025em}.ui-input-wrapper[data-v-769be6d6]{border:1px solid rgb(var(--v-theme-primary));display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;position:relative;font-size:14px;font-weight:425;letter-spacing:.06em;text-transform:uppercase;width:100%;flex:1 1 auto}.ui-input-slider-wrapper[data-v-769be6d6]{opacity:.5;z-index:0}.ui-input-body[data-v-769be6d6]{pointer-events:none;display:inline-flex;justify-content:space-around;width:100%}.ui-input-slider[data-v-769be6d6]{position:absolute;height:100%;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);transition:all .4s ease;z-index:0;border:rgb(var(--v-theme-surface)) solid 2px}.ui-input-button[data-v-769be6d6]{text-align:center;z-index:1;outline:none;-webkit-user-select:none;user-select:none;cursor:pointer;pointer-events:none;line-height:1.1em;transition:color .5s ease;opacity:var(--v-medium-emphasis-opacity)}.ui-input-round[data-v-769be6d6]{border-radius:1.5em}.ui-input-slider[data-v-769be6d6]{width:var(--9eb2a438);left:var(--794aa429);background-color:var(--20441647)}.ui-input-button[data-v-769be6d6]{width:var(--9eb2a438)}.ui-input-active[data-v-769be6d6]{opacity:1}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
(function(s,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vuex"),require("vue")):typeof define=="function"&&define.amd?define(["exports","vuex","vue"],o):(s=typeof globalThis<"u"?globalThis:s||self,o(s["ui-input"]={},s.vuex,s.Vue))})(this,function(s,o,t){"use strict";const f=(e,i)=>{const n=e.__vccOpts||e;for(const[r,a]of i)n[r]=a;return n},l={name:"UIInput",inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({})}},data(){return{sliderWidth:`${100/this.props.options.length}%`,selection:null,options:this.props.options,display:""}},computed:{...o.mapState("data",["messages"]),sliderLeft(){var e;return`${100/this.props.options.length*((e=this.findOptionByValue(this.selection))==null?void 0:e.index)}%`},selectedColor:function(){var e;return this.props.useThemeColors?"rgb(var(--v-theme-primary))":(e=this.findOptionByValue(this.selection))==null?void 0:e.color},selectedIndex:function(){var e;return(e=this.findOptionByValue(this.selection))==null?void 0:e.index},toDisplay:function(){return this.display}},created(){this.$dataTracker(this.id,this.onInput,this.onLoad)},methods:{onInput(e){this.$store.commit("data/bind",{widgetId:this.id,msg:e});const i=e[this.props.stateField];typeof i<"u"&&(this.findOptionByValue(i)!==null?(this.selection=i,this.display=""):this.display="ERR")},onLoad(e){if(e){this.$store.commit("data/bind",{widgetId:this.id,msg:e});const i=e[this.props.stateField];typeof i<"u"&&(this.findOptionByValue(i)!==null?(this.selection=i,this.display=""):this.display="ERR")}},findOptionByValue:function(e){var n;const i=(n=this.options)==null?void 0:n.find(r=>typeof e=="object"?JSON.stringify(e)===JSON.stringify(r.value):r.value===e);return i||null}}},u=()=>{t.useCssVars(e=>({"9eb2a438":e.sliderWidth,"794aa429":e.sliderLeft,20441647:e.selectedColor}))},c=l.setup;l.setup=c?(e,i)=>(u(),c(e,i)):u;const h={class:"ui-input-container"},y={class:"ui-input-header"},_={class:"ui-input-label"},m={class:"ui-input-wrapper ui-input-round"},V={class:"ui-input-body"},b=["value"];function E(e,i,n,r,a,p){return t.openBlock(),t.createElementBlock("div",h,[t.createElementVNode("div",y,[t.createElementVNode("div",_,t.toDisplayString(n.props.label),1),t.createElementVNode("div",{class:"ui-input-display",style:t.normalizeStyle([p.toDisplay=="ERR"?{color:"red"}:{}])},t.toDisplayString(p.toDisplay),5)]),t.createElementVNode("div",m,[i[0]||(i[0]=t.createElementVNode("div",{class:"ui-input-slider-wrapper"},[t.createElementVNode("div",{class:"ui-input-slider ui-input-round"})],-1)),t.createElementVNode("div",V,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(a.options,d=>(t.openBlock(),t.createElementBlock("div",{key:d.index,value:d.value,class:t.normalizeClass([d.index==p.selectedIndex?"ui-input-active":"","ui-input-button"])},t.toDisplayString(d.label),11,b))),128))])])])}const I=f(l,[["render",E],["__scopeId","data-v-769be6d6"]]);s.UIInput=I,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});