@cgjgh/node-red-dashboard-2-ui-slide-confirm/resources/ui-slide-confirm.umd.js

A Slide to Confirm node for preventing accidental user actions in Node-RED Dashboard 2.0

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`.slideunlock{--su-size-text: 24px;--su-size-padding: 6px;--su-color-bg: #ebebeb;--su-color-progress-normal-bg: #cacaca;--su-color-progress-complete-bg: #42b983;--su-color-text-normal: #4f4f4f;--su-color-text-complete: #fefefe;--su-color-handler-bg: #ffffff;--su-icon-handler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23BABABA' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 17 5-5-5-5m7 10 5-5-5-5'/%3E%3C/svg%3E");display:flex;position:relative;box-sizing:content-box;padding:var(--su-size-padding);background-color:var(--su-color-bg);text-align:center;overflow:hidden}.slideunlock:after{content:"";position:absolute;top:0;left:0;width:0%;height:100%;transition:none;animation:shine 4s infinite;background-color:#fff6;overflow:hidden}.slideunlock .slideunlock-progressbar{position:absolute;z-index:1;width:0;height:34px;transition:background 1s ease-out;background-color:var(--su-color-progress-normal-bg)}.slideunlock .slideunlock-text{display:inline;z-index:2;align-items:center;justify-content:center;width:100%;transition:background 1s ease,color 1s ease;animation:animated 2s linear infinite;background:var(--su-color-text-normal) linear-gradient(90deg,#fff0,#fff,#fff0) no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--su-size-text);-webkit-user-select:none;user-select:none}.slideunlock .slideunlock-text:before{content:"";display:inline-block;height:100%;vertical-align:middle}.slideunlock .slideunlock-handler{position:absolute;z-index:3;top:0;left:0;margin:var(--su-size-padding);transition:background .75s ease,transform .1s ease-in;background:var(--su-color-handler-bg) var(--su-icon-handler) no-repeat center;background-size:2rem;cursor:grab;overflow:hidden}.slideunlock .slideunlock-handler:active{transform:scale(1.05);cursor:grabbing}.slideunlock.is-circle{border-radius:50rem}.slideunlock.is-circle:after{border-radius:50rem 0 0 50rem}.slideunlock.is-circle .slideunlock-handler{border-radius:50%}.slideunlock.is-noanimate:after{animation:none}.slideunlock.is-noanimate .slideunlock-text{animation:none;color:var(--su-color-text-normal)}.slideunlock.is-disabled{opacity:.5}.slideunlock.is-disabled:after{content:"";position:absolute;z-index:10;top:0;left:0;width:100%;height:100%;animation:none;opacity:.5;background-color:var(--su-color-bg)}.slideunlock.is-disabled .slideunlock-text{animation:none;opacity:.25;color:var(--su-color-text-normal)}.slideunlock.is-disabled .slideunlock-handler{pointer-events:none}.slideunlock.is-disabled.is-circle:after{border-radius:50rem}.slideunlock.is-complete:after{animation:none}.slideunlock.is-complete .slideunlock-progressbar{background-color:var(--su-color-progress-complete-bg)}.slideunlock.is-complete .slideunlock-text{animation:none;opacity:1!important;color:var(--su-color-text-complete)}.slideunlock.is-complete .slideunlock-handler{opacity:0;background:var(--su-color-progress-complete-bg)}@keyframes animated{0%{background-position:-300px 0}to{background-position:300px 0}}@keyframes shine{to{width:100%;transition:all 5s ease-out;background-color:#fff0}}.v-theme--nrdb,.slideunlock,.v-theme--nrdbLight{--su-color-bg: #ebebeb;--su-color-text-normal: #4F4F4F;--su-color-text-complete: #FEFEFE;--su-color-progress-normal-bg: #cacaca;--su-color-progress-complete-bg: #42b983;--su-color-handler-bg: #FFFFFF}.v-theme--nrdbDark .slideunlock{--su-color-bg: #242424;--su-color-text-normal: #4F4F4F;--su-color-text-complete: #4F4F4F;--su-color-progress-normal-bg: #3a3a3a;--su-color-progress-complete-bg: #1bc47d;--su-color-handler-bg: #3e3e3e}`)),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
(function(f,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("vuex")):typeof define=="function"&&define.amd?define(["exports","vue","vuex"],o):(f=typeof globalThis<"u"?globalThis:f||self,o(f["ui-slide-confirm"]={},f.Vue,f.vuex))})(this,function(f,o,V){"use strict";var C=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function I(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var k=typeof window<"u"&&"requestAnimationFrame"in window?window.requestAnimationFrame:function(t){setTimeout(t,16)};function j(t){var i="startValue"in t?t.startValue:0,e="endValue"in t?t.endValue:1,l="durationMs"in t?t.durationMs:200,c=t.onComplete||function(){},a=l/16,r=(e-i)/a,n=Math.PI/a,p=i,h=0;function m(){h+=n,p+=r*Math.pow(Math.sin(h),2)*2,h<Math.PI?(t.onStep(p),k(m)):(t.onStep(e),c())}k(m)}var D=j;const B=I(D);var E="Expected a function",W=NaN,N="[object Symbol]",U=/^\s+|\s+$/g,z=/^[-+]0x[0-9a-f]+$/i,$=/^0b[01]+$/i,F=/^0o[0-7]+$/i,R=parseInt,q=typeof C=="object"&&C&&C.Object===Object&&C,X=typeof self=="object"&&self&&self.Object===Object&&self,A=q||X||Function("return this")(),G=Object.prototype,J=G.toString,K=Math.max,L=Math.min,b=function(){return A.Date.now()};function Q(t,i,e){var l,c,a,r,n,p,h=0,m=!1,g=!1,w=!0;if(typeof t!="function")throw new TypeError(E);i=H(i)||0,T(e)&&(m=!!e.leading,g="maxWait"in e,a=g?K(H(e.maxWait)||0,i):a,w="trailing"in e?!!e.trailing:w);function S(u){var y=l,x=c;return l=c=void 0,h=u,r=t.apply(x,y),r}function _(u){return h=u,n=setTimeout(d,i),m?S(u):r}function v(u){var y=u-p,x=u-h,O=i-y;return g?L(O,a-x):O}function s(u){var y=u-p,x=u-h;return p===void 0||y>=i||y<0||g&&x>=a}function d(){var u=b();if(s(u))return P(u);n=setTimeout(d,v(u))}function P(u){return n=void 0,w&&l?S(u):(l=c=void 0,r)}function ut(){n!==void 0&&clearTimeout(n),h=0,l=p=c=n=void 0}function pt(){return n===void 0?r:P(b())}function M(){var u=b(),y=s(u);if(l=arguments,c=this,p=u,y){if(n===void 0)return _(p);if(g)return n=setTimeout(d,i),S(p)}return n===void 0&&(n=setTimeout(d,i)),r}return M.cancel=ut,M.flush=pt,M}function T(t){var i=typeof t;return!!t&&(i=="object"||i=="function")}function Y(t){return!!t&&typeof t=="object"}function Z(t){return typeof t=="symbol"||Y(t)&&J.call(t)==N}function H(t){if(typeof t=="number")return t;if(Z(t))return W;if(T(t)){var i=typeof t.valueOf=="function"?t.valueOf():t;t=T(i)?i+"":i}if(typeof t!="string")return t===0?t:+t;t=t.replace(U,"");var e=$.test(t);return e||F.test(t)?R(t.slice(2),e?2:8):z.test(t)?W:+t}var tt=Q;const et=I(tt),it=o.defineComponent({name:"SlideUnlock",props:{autoWidth:{type:Boolean,default:!0},width:{type:Number,default:400},height:{type:Number,default:60},text:{type:String,default:"slide to unlock"},successText:{type:String,default:"success"},circle:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},noanimate:{type:Boolean,default:!1},name:{type:String,default:"slideunlock"},position:{type:Number,default:0}},setup(t,{emit:i}){const e=o.reactive({CanMove:!1,IsComplete:!1,StartPositionWindow:0,HandlerPosition:0,ProgressWidth:0,TextOpacity:1}),l=o.computed(()=>({width:t.autoWidth?"auto":t.width+"px",height:t.height+"px"})),c=o.computed(()=>({width:e.ProgressWidth+"px",height:t.height+"px",borderRadius:t.circle?e.IsComplete?t.height/2+"px ":t.height/2+"px 0 0 "+t.height/2+"px":0})),a=o.computed(()=>({left:e.HandlerPosition+"px",width:t.height+"px",height:t.height+"px"})),r=o.computed(()=>e.IsComplete?t.successText:t.text),n=o.computed(()=>{const s=document.getElementById(t.name);return t.autoWidth?s.clientWidth-parseInt(getComputedStyle(s).getPropertyValue("--su-size-padding").replace("px",""),10)*2:t.width});o.watch(()=>t.autoWidth,()=>{e.IsComplete&&setTimeout(()=>{e.ProgressWidth=n.value},1)}),o.watch(()=>t.width,()=>{e.IsComplete&&(e.ProgressWidth=n.value)});const p=et(function(s=!1){const d=(n.value-t.height)*(100/e.HandlerPosition)/1e3-.1;(e.CanMove||s)&&(e.TextOpacity=d)},5),h=s=>{e.IsComplete||(e.CanMove=!0,window.TouchEvent&&s instanceof TouchEvent&&s.touches?e.StartPositionWindow=s.touches[0].pageX-e.HandlerPosition:s instanceof MouseEvent&&(e.StartPositionWindow=s.pageX-e.HandlerPosition)),document.onmousemove=d=>(m(d),!1),document.onmouseup=d=>(g(d),document.onmousemove=null,!1)},m=s=>{if(e.CanMove&&!e.IsComplete){let d=e.StartPositionWindow;if(window.TouchEvent&&s instanceof TouchEvent&&s.touches?d=s.touches[0].pageX:s instanceof MouseEvent&&(d=s.pageX),d<e.StartPositionWindow)return;e.HandlerPosition=d-e.StartPositionWindow,e.HandlerPosition>0&&e.HandlerPosition<=n.value-t.height?(e.ProgressWidth=e.HandlerPosition+t.height/2,p()):e.HandlerPosition>n.value-t.height&&(e.HandlerPosition=n.value-t.height,e.ProgressWidth=n.value,S())}},g=s=>{if(e.CanMove&&!e.IsComplete){let d=e.StartPositionWindow;if(window.TouchEvent&&s instanceof TouchEvent&&s.touches?d=s.changedTouches[0].pageX:s instanceof MouseEvent&&(d=s.pageX),d<e.StartPositionWindow)return;e.HandlerPosition<n.value-t.height&&(B({startValue:e.HandlerPosition,endValue:0,durationMs:200,onStep:P=>{e.HandlerPosition=P,e.ProgressWidth=P+t.height/2}}),e.TextOpacity=1),e.CanMove=!1}},w=s=>{if(typeof s!="number"||s<0||e.IsComplete||t.disabled)return;const d=Math.round((n.value-t.height)/100*s);e.ProgressWidth=d+t.height/2,e.HandlerPosition=d,p(!0),d>=n.value-t.height&&(v(),S())};o.watch(()=>t.position,()=>{w(t.position)});const S=()=>{e.IsComplete=!0,e.CanMove=!1,i("completed")},_=()=>{e.CanMove=!1,e.IsComplete=!1,e.StartPositionWindow=0,e.HandlerPosition=0,e.ProgressWidth=0,e.TextOpacity=1},v=()=>{e.CanMove=!1,e.IsComplete=!0,e.StartPositionWindow=0,e.HandlerPosition=0,e.ProgressWidth=n.value,e.TextOpacity=1};return{Slider:e,slideUnlockStyle:l,progressBarStyle:c,handlerStyle:a,message:r,sliderWidth:n,slideStart:h,slideMoving:m,slideFinish:g,reset:_,complete:v}}}),ot=(t,i)=>{const e=t.__vccOpts||t;for(const[l,c]of i)e[l]=c;return e},nt=["id"];function st(t,i,e,l,c,a){return o.openBlock(),o.createElementBlock("div",{id:t.name,class:o.normalizeClass(["slideunlock",{"is-disabled":t.disabled,"is-noanimate":t.noanimate,"is-circle":t.circle,"is-complete":t.Slider.IsComplete}]),style:o.normalizeStyle(t.slideUnlockStyle),onMousemove:i[2]||(i[2]=(...r)=>t.slideMoving&&t.slideMoving(...r)),onMouseup:i[3]||(i[3]=(...r)=>t.slideFinish&&t.slideFinish(...r)),onTouchmove:i[4]||(i[4]=(...r)=>t.slideMoving&&t.slideMoving(...r)),onTouchend:i[5]||(i[5]=(...r)=>t.slideFinish&&t.slideFinish(...r))},[o.createElementVNode("div",{class:"slideunlock-progressbar",style:o.normalizeStyle(t.progressBarStyle)},null,4),o.createElementVNode("div",{class:"slideunlock-text",style:o.normalizeStyle({opacity:t.Slider.TextOpacity})},o.toDisplayString(t.message),5),o.createElementVNode("div",{class:"slideunlock-handler",style:o.normalizeStyle(t.handlerStyle),onMousedown:i[0]||(i[0]=(...r)=>t.slideStart&&t.slideStart(...r)),onTouchstart:i[1]||(i[1]=(...r)=>t.slideStart&&t.slideStart(...r))},null,36)],46,nt)}const rt=ot(it,[["render",st]]),lt=(t,i)=>{const e=t.__vccOpts||t;for(const[l,c]of i)e[l]=c;return e},at={name:"DBUISlideConfirm",components:{SlideUnlock:rt},inject:["$socket","$dataTracker"],props:{id:{type:String,required:!0},props:{type:Object,default:()=>({})},state:{type:Object,default:()=>({})}},data(){return{isSliderComplete:!1,countdown:0,progressValue:100,suSizeText:"24px"}},computed:{...V.mapState("ui",["widgets"]),iconSuccess(){const t=this.getProperty("iconSuccess");return this.makeMdiIcon(t)},animate(){return this.getProperty("animate")},circle(){return this.getProperty("circle")},text(){return this.getProperty("text")},successText(){return this.getProperty("successText")},width(){return this.getProperty("width")},height(){return this.getProperty("height")},timeout(){return this.getProperty("timeout")},sliderHeight(){return Number(this.getProperty("sliderHeight"))},completed(){return this.isSliderComplete},sliderStyle(){return{"--su-size-text":`${Number(this.getProperty("textSize"))}px`}}},watch:{completed(t,i){this.updateWidgetStates(t)}},created(){this.$dataTracker(this.id,this.onInput,this.onLoad,this.onDynamicProperties)},mounted(){this.$socket.emit("widget-load",this.id),this.updateSlider(),this.updateWidgetStates(this.isSliderComplete)},methods:{onDynamicProperties(t){const i=t.ui_update;i&&(this.updateDynamicProperty("label",i.label),this.updateDynamicProperty("iconSuccess",i.iconSuccess),this.updateDynamicProperty("animate",i.animate),this.updateDynamicProperty("circle",i.circle),this.updateDynamicProperty("text",i.text),this.updateDynamicProperty("successText",i.successText),this.updateDynamicProperty("width",i.width),this.updateDynamicProperty("height",i.height),this.updateDynamicProperty("timeout",i.timeout),this.updateDynamicProperty("sliderHeight",i.sliderHeight),this.updateDynamicProperty("textSize",i.textSize))},onInput(t){this.$store.commit("data/bind",{widgetId:this.id,msg:t});const i=t.confirmed;i!==void 0&&(i===!0?this.completeComponent():this.resetComponent())},complete(){this.$socket.emit("widget-action",this.id,{payload:"confirmed"}),this.isSliderComplete=!0,this.updateSlider(),Number(this.timeout)>0&&(this.countdown=this.timeout,this.progressValue=100,this.startCountdown())},resetComponent(){var t,i;this.$socket.emit("widget-action",this.id,{payload:"reset"}),(i=(t=this.$refs)==null?void 0:t.vueSlideUnlockRef)==null||i.reset(),this.isSliderComplete=!1,this.updateSlider()},completeComponent(){this.$refs.vueSlideUnlockRef.complete(),this.isSliderComplete=!0,this.updateSlider(),Number(this.timeout)>0&&(this.countdown=this.timeout,this.progressValue=100,this.startCountdown())},updateSlider(){return!this.$refs.vueSlideUnlockRef||!this.$refs.vueSlideUnlockRef.Slider?(this.isSliderComplete=!1,!1):(this.isSliderComplete=this.$refs.vueSlideUnlockRef.Slider.IsComplete,this.isSliderComplete)},updateWidgetStates(t){let i=this.getProperty("controlledWidgets");Array.isArray(i)||(i=i?[i]:[]);const e=this;Object.keys(this.widgets).forEach(l=>{const c=this.widgets[l].id;if(i.some(a=>c.includes(a)))if(!this.widgets[l].component.name==="DBUITemplate"){const a=this.widgets[l].state;e.$store.commit("ui/setProperty",{item:"widget",itemId:l,property:"state",value:{...a,visible:t,enabled:t}})}else{const a=this.widgets[l].props;e.$store.commit("ui/setProperty",{item:"widget",itemId:l,property:"props",value:{...a,visible:t,enabled:t}});const r=this.widgets[l].state;e.$store.commit("ui/setProperty",{item:"widget",itemId:l,property:"state",value:{...r,visible:t,enabled:t}})}})},startCountdown(){const t=setInterval(()=>{this.countdown>0?(this.countdown-=1,this.progressValue-=100/this.timeout):(clearInterval(t),this.resetComponent())},1e3)},makeMdiIcon(t){return"mdi-"+t.replace(/^mdi-/,"")}}};function dt(t,i,e,l,c,a){const r=o.resolveComponent("slide-unlock"),n=o.resolveComponent("v-col"),p=o.resolveComponent("v-icon"),h=o.resolveComponent("v-progress-circular"),m=o.resolveComponent("v-row");return o.openBlock(),o.createBlock(m,{justify:"center"},{default:o.withCtx(()=>[c.isSliderComplete?(o.openBlock(),o.createBlock(n,{key:1,cols:"2",class:"d-flex justify-center align-center"},{default:o.withCtx(()=>[o.createVNode(h,{class:"mx-auto",size:50,width:10,"model-value":c.progressValue,color:"green"},{default:o.withCtx(()=>[o.createVNode(p,null,{default:o.withCtx(()=>[o.createTextVNode(o.toDisplayString(a.iconSuccess),1)]),_:1})]),_:1},8,["model-value"])]),_:1})):(o.openBlock(),o.createBlock(n,{key:0},{default:o.withCtx(()=>[o.createVNode(r,{ref:"vueSlideUnlockRef","auto-width":!0,circle:a.circle,noanimate:!a.animate,disabled:!e.state.enabled,text:a.text,height:a.sliderHeight,"success-text":a.successText,name:"slideunlock",style:o.normalizeStyle(a.sliderStyle),onCompleted:a.complete},null,8,["circle","noanimate","disabled","text","height","success-text","style","onCompleted"])]),_:1}))]),_:1})}const ct=lt(at,[["render",dt]]);f.UISlideConfirm=ct,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});