node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
3 lines (2 loc) • 5.6 kB
JavaScript
!function(){function t(){}function e(t){return t()}function n(){return Object.create(null)}function o(t){t.forEach(e)}function i(t){return"function"==typeof t}function r(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}function u(t,e){t.appendChild(e)}function a(t){t.parentNode&&t.parentNode.removeChild(t)}function s(t){return document.createElement(t)}function d(t){return document.createTextNode(t)}function c(){return d(" ")}function l(t,e,n,o){return t.addEventListener(e,n,o),()=>t.removeEventListener(e,n,o)}function f(t,e,n){null==n?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function p(t,e){e=""+e,t.data!==e&&(t.data=e)}let h;function g(t){h=t}const m=[],b=[];let $=[];const y=[],v=Promise.resolve();let _=!1;function x(t){$.push(t)}const k=new Set;let w=0;function E(){if(0!==w)return;const t=h;do{try{for(;w<m.length;){const t=m[w];w++,g(t),N(t.$$)}}catch(t){throw m.length=0,w=0,t}for(g(null),m.length=0,w=0;b.length;)b.pop()();for(let t=0;t<$.length;t+=1){const e=$[t];k.has(e)||(k.add(e),e())}$.length=0}while(m.length);for(;y.length;)y.pop()();_=!1,k.clear(),g(t)}function N(t){if(null!==t.fragment){t.update(),o(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(x)}}const S=new Set;function R(t,e){const n=t.$$;null!==n.fragment&&(!function(t){const e=[],n=[];$.forEach((o=>-1===t.indexOf(o)?e.push(o):n.push(o))),n.forEach((t=>t())),$=e}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function A(t,e){-1===t.$$.dirty[0]&&(m.push(t),_||(_=!0,v.then(E)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function T(r,u,s,d,c,l,f=null,p=[-1]){const m=h;g(r);const b=r.$$={fragment:null,ctx:[],props:l,update:t,not_equal:c,bound:n(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(u.context||(m?m.$$.context:[])),callbacks:n(),dirty:p,skip_bound:!1,root:u.target||m.$$.root};f&&f(b.root);let $=!1;if(b.ctx=s?s(r,u.props||{},((t,e,...n)=>{const o=n.length?n[0]:e;return b.ctx&&c(b.ctx[t],b.ctx[t]=o)&&(!b.skip_bound&&b.bound[t]&&b.bound[t](o),$&&A(r,t)),e})):[],b.update(),$=!0,o(b.before_update),b.fragment=!!d&&d(b.ctx),u.target){if(u.hydrate){const t=function(t){return Array.from(t.childNodes)}(u.target);b.fragment&&b.fragment.l(t),t.forEach(a)}else b.fragment&&b.fragment.c();u.intro&&((y=r.$$.fragment)&&y.i&&(S.delete(y),y.i(v))),function(t,n,r){const{fragment:u,after_update:a}=t.$$;u&&u.m(n,r),x((()=>{const n=t.$$.on_mount.map(e).filter(i);t.$$.on_destroy?t.$$.on_destroy.push(...n):o(n),t.$$.on_mount=[]})),a.forEach(x)}(r,u.target,u.anchor),E()}var y,v;g(m)}class C{$$=void 0;$$set=void 0;$destroy(){R(this,1),this.$destroy=t}$on(e,n){if(!i(n))return t;const o=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return o.push(n),()=>{const t=o.indexOf(n);-1!==t&&o.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}function M(e){let n,r,h,g,m,b,$,y,v,_,x,k,w,E,N,S,R,A,T,C,M,P,j,D,G;return{c(){n=s("main"),r=s("h1"),r.textContent="uibuilder + Svelte",h=c(),g=s("div"),g.textContent="Using the uibuilder IIFE library.",m=c(),b=s("div"),b.innerHTML="",$=c(),y=s("p"),v=d(e[2]),_=c(),x=s("p"),k=d(e[3]),w=c(),E=s("form"),N=s("div"),N.textContent="This is a form element. It is an easy way to get input and send it back to Node-RED.",S=c(),R=s("div"),R.innerHTML='<label for="quickMsg">Quick Message:</label> <input id="quickMsg" value="A message from the browser" onchange="this.uib_newValue = this.value" onfocus="this.uib_oldValue = this.value"/>',A=c(),T=s("div"),C=s("button"),M=d("Send form details back to Node-RED using uibuilder.eventSend"),P=c(),j=s("button"),j.textContent="Send a msg back to Node-RED using a custom function and uibuilder.send",f(r,"class","with-subtitle"),f(g,"role","doc-subtitle"),f(b,"id","more"),f(y,"title","A dynamic greeting that can be update using a msg from Node-RED"),f(x,"title","Some other dynamic property that main.js might update"),f(C,"data-greeting",e[2]),f(C,"data-type","eventSend"),f(C,"data-foo","Bah"),f(C,"type","button"),f(C,"title","Uses the uibuilder.eventSend fn and sents both static and dynamic data back to Node-RED"),f(j,"type","button")},m(t,o){!function(t,e,n){t.insertBefore(e,n||null)}(t,n,o),u(n,r),u(n,h),u(n,g),u(n,m),u(n,b),u(n,$),u(n,y),u(y,v),u(n,_),u(n,x),u(x,k),u(n,w),u(n,E),u(E,N),u(E,S),u(E,R),u(E,A),u(E,T),u(T,C),u(C,M),u(n,P),u(n,j),D||(G=[l(C,"click",(function(){i(e[0])&&e[0].apply(this,arguments)})),l(j,"click",e[4])],D=!0)},p(t,[n]){e=t,4&n&&p(v,e[2]),8&n&&p(k,e[3]),4&n&&f(C,"data-greeting",e[2])},i:t,o:t,d(t){t&&a(n),D=!1,o(G)}}}function P(t,e,n){let{uibsend:o}=e,{sendToNR:i}=e,{myGreeting:r="Hello there from App.svelte! Send me a msg containing msg.greeting to replace this text."}=e,{anotherProp:u="--"}=e;i=function(t){uibuilder.send({topic:"msg-from-uibuilder-front-end",payload:t})},o=uibuilder.eventSend.bind(uibuilder),uibuilder.onChange("msg",(t=>{t.greeting&&n(2,r=t.greeting)}));return t.$$set=t=>{"uibsend"in t&&n(0,o=t.uibsend),"sendToNR"in t&&n(1,i=t.sendToNR),"myGreeting"in t&&n(2,r=t.myGreeting),"anotherProp"in t&&n(3,u=t.anotherProp)},[o,i,r,u,t=>i("A message from the sharp end!")]}"undefined"!=typeof window&&(window.__svelte||(window.__svelte={v:new Set})).v.add("4");new class extends C{constructor(t){super(),T(this,t,P,M,r,{uibsend:0,sendToNR:1,myGreeting:2,anotherProp:3})}}({target:document.body,props:{anotherProp:"I am from a prop set in main.js"}})}();
//# sourceMappingURL=bundle.js.map