@flows/js-components
Version:
Built-in components for Flows JS SDK
2 lines (1 loc) • 6.72 kB
JavaScript
var g="#22262d",y="#fff",w="%cFlows%c",h=`color:${y};background:${g};padding:2px 4px;border-radius:4px`,E={error:(e,...n)=>{console.error(`${w} ${e}`,h,"",...n)},warn:(e,...n)=>{console.warn(`${w} ${e}`,h,"",...n)}};import{autoUpdate as b,computePosition as C,flip as x,offset as L,shift as N}from"@floating-ui/dom";var p=()=>{let e=document.createElementNS("http://www.w3.org/2000/svg","svg");e.setAttribute("height","16"),e.setAttribute("width","16"),e.setAttribute("viewBox","0 0 16 16"),e.setAttribute("fill","currentColor");let n=document.createElementNS("http://www.w3.org/2000/svg","path");return e.appendChild(n),n.setAttribute("d","M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"),e};var T=8,A=4,Y=e=>{let n=e.targetElement?document.querySelector(e.targetElement):null;if(!n)return e.targetElement||E.error("Cannot render Hint without target element"),{element:null,cleanup:()=>{}};let i=document.createElement("div"),l=document.createElement("button");i.appendChild(l),l.className="flows_hint_hotspot",l.setAttribute("aria-label","Open hint"),l.type="button";let t=null,c=()=>{if(t){t();return}let o=document.createElement("div");i.appendChild(o),o.className="flows_tooltip_tooltip flows_hint_tooltip",o.setAttribute("data-open","true");let a=document.createElement("p");o.appendChild(a),a.className="flows_text flows_text_title flows_tooltip_title",a.textContent=e.title;let m=document.createElement("p");if(o.appendChild(m),m.className="flows_text flows_text_body flows_tooltip_body",m.innerHTML=e.body,e.buttons.length){let f=document.createElement("div");o.appendChild(f),f.className="flows_tooltip_footer",e.buttons.forEach(_=>f.appendChild(_))}let s=null;e.onClose&&(s=document.createElement("button"),o.appendChild(s),s.className="flows_iconButton flows_tooltip_close",s.setAttribute("aria-label","Close"),s.appendChild(p()),s.addEventListener("click",e.onClose));let u=b(n,o,()=>void k({el:o,reference:l,placement:e.placement}),{animationFrame:!0}),d=f=>{let _=f.target;if(!_.isConnected)return;!o.contains(_)&&!l.contains(_)&&(t==null||t())};window.addEventListener("click",d),t=()=>{e.onClose&&(s==null||s.removeEventListener("click",e.onClose)),window.removeEventListener("click",d),u(),o.remove(),t=null}};l.addEventListener("click",c);let r=b(n,l,()=>void P({el:l,reference:n,placement:e.placement}),{animationFrame:!0});return{element:i,cleanup:()=>{t==null||t(),r(),l.removeEventListener("click",c)}}},P=({reference:e,el:n,placement:i,offsetX:l,offsetY:t})=>C(e,n,{placement:i}).then(({x:c,y:r})=>{n.style.left=`${c+(l!=null?l:0)}px`,n.style.top=`${r+(t!=null?t:0)}px`}),k=({el:e,reference:n,placement:i})=>C(n,e,{placement:i,middleware:[x({fallbackPlacements:["top","bottom","left","right"]}),N({crossAxis:!0,padding:T}),L(A)]}).then(({x:l,y:t})=>{e.style.left=`${l}px`,e.style.top=`${t}px`});var J=e=>{let n=document.createElement("div"),i=null;e.overlay&&(i=document.createElement("div"),n.appendChild(i),i.className=`flows_modal_overlay${e.close?" flows_modal_clickable":""}`,i.setAttribute("aria-hidden","true"),e.close&&i.addEventListener("click",e.close));let l=document.createElement("div");n.appendChild(l),l.className="flows_modal_wrapper";let t=document.createElement("div");l.appendChild(t),t.className="flows_modal_modal";let c=document.createElement("p");t.appendChild(c),c.className="flows_text flows_text_title",c.textContent=e.title;let r=document.createElement("p");if(t.appendChild(r),r.className="flows_text flows_text_body",r.innerHTML=e.body,e.buttons.length){let a=document.createElement("div");t.appendChild(a),a.className="flows_modal_footer",e.buttons.forEach(m=>a.appendChild(m))}let o=null;return e.close&&(o=document.createElement("button"),t.appendChild(o),o.className="flows_iconButton flows_modal_close",o.setAttribute("aria-label","Close"),o.addEventListener("click",e.close),o.appendChild(p())),{element:n,cleanup:()=>{e.close&&(o==null||o.removeEventListener("click",e.close),i==null||i.removeEventListener("click",e.close))}}};import{arrow as M,autoUpdate as H,computePosition as $,flip as B,offset as S,shift as D}from"@floating-ui/dom";var oe=e=>{let n=e.targetElement?document.querySelector(e.targetElement):null;if(!n)return e.targetElement||E.error("Cannot render Tooltip without target element"),{element:null,cleanup:()=>{}};let i=document.createElement("div");i.className="flows_tooltip_root";let l=null;e.overlay&&(l=document.createElement("div"),i.appendChild(l),l.className="flows_tooltip_overlay",l.setAttribute("aria-hidden","true"));let t=document.createElement("div");i.appendChild(t),t.className="flows_tooltip_tooltip";let c=document.createElement("p");t.appendChild(c),c.className="flows_text flows_text_title flows_tooltip_title",c.textContent=e.title;let r=document.createElement("p");if(t.appendChild(r),r.className="flows_text flows_text_body flows_tooltip_body",r.innerHTML=e.body,e.buttons.length){let u=document.createElement("div");t.appendChild(u),u.className="flows_tooltip_footer",e.buttons.forEach(d=>u.appendChild(d))}let o=null;e.close&&(o=document.createElement("button"),t.appendChild(o),o.className="flows_iconButton flows_tooltip_close",o.setAttribute("aria-label","Close"),o.appendChild(p()),o.addEventListener("click",e.close));let a=document.createElement("div");t.appendChild(a),a.className="flows_tooltip_arrow flows_tooltip_arrow-bottom";let m=document.createElement("div");t.appendChild(m),m.className="flows_tooltip_arrow flows_tooltip_arrow-top";let s=H(n,t,()=>void F({reference:n,tooltip:t,arrowEls:[a,m],overlay:l,placement:e.placement}),{animationFrame:!0});return{element:i,cleanup:()=>{s(),e.close&&(o==null||o.removeEventListener("click",e.close))}}},O=4,v=6,R=O+v,G=8,I=8,F=({reference:e,tooltip:n,placement:i,arrowEls:l,overlay:t})=>{if(t){let c=e.getBoundingClientRect();t.style.top=`${c.top}px`,t.style.left=`${c.left}px`,t.style.width=`${c.width}px`,t.style.height=`${c.height}px`}return $(e,n,{placement:i,middleware:[B({fallbackPlacements:["top","bottom","left","right"]}),D({crossAxis:!0,padding:G}),M({element:l[0],padding:I}),S(R)]}).then(({x:c,y:r,middlewareData:o,placement:a})=>{if(n.style.left=`${c}px`,n.style.top=`${r}px`,o.arrow){let m=a.includes("top")?"bottom":a.includes("bottom")?"top":a.includes("left")?"right":"left",s=o.arrow.x,u=o.arrow.y;l.forEach(d=>{d.style.left=s!=null?`${s}px`:"",d.style.top=u!=null?`${u}px`:"",d.style.right="",d.style.bottom="",d.style[m]=`${-v}px`})}}).catch(c=>{E.error("Error computing position",c)})};export{Y as a,J as b,oe as c};