import{e as J}from"./BuilderEmbeddedCodeEditor-xQxb7c_d.js";import{d as Q,i as F,a as V,c as v,r as $,X as Z,M as ee,o as m,e as y,f as l,F as N,s as K,m as i,n as d,q as w,W as k,b as M,l as te,K as C,a5 as oe,t as ne,y as le,z as ae,O as se,_ as ie}from"./index-Bu3rAGYU.js";import{B as W}from"./BuilderApp-i1W1UlVq.js";import{B as A,W as H}from"./BuilderSettings-CELBtnHV.js";import"./marked.esm-273vDTCT.js";import"./instancePath-BsbOTTI8.js";const f=h=>(le("data-v-8a69aeb2"),h=h(),ae(),h),re={key:0,class:"BuilderSettingsHandlers"},de=f(()=>l("div",{class:"BuilderSettingsHandlers__title"},[l("i",{class:"material-symbols-outlined"},"bolt"),l("h3",null,"Events")],-1)),ue={class:"BuilderSettingsHandlers__list"},ce={class:"columns"},pe=f(()=>l("i",{class:"material-symbols-outlined"},"add",-1)),me=f(()=>l("div",{class:"stubMessage"}," You can use the following stub code as a starting point for your event handler. ",-1)),ve={class:"codeContainer"},fe=f(()=>l("i",{class:"material-symbols-outlined"},"content_copy",-1)),he={class:"customHandlerModalForm"},ye={id:"commonEventTypes"},_e=["value"],be=f(()=>l("i",{class:"material-symbols-outlined"},"add",-1)),ge=Q({__name:"BuilderSettingsHandlers",setup(h){const u=F(V.core),_=F(V.builderManager),{setHandlerValue:B}=se(u,_),r=v(()=>u.getComponentById(_.getSelectedId())),b=v(()=>{const n=S.value.map(o=>o.name).map(o=>({value:o,label:o,icon:"function"})),t=D.value.map(o=>({label:`Go to page "${o}"`,value:`$goToPage_${o}`,icon:"link"})),e=I.value.map(o=>({label:`Run workflow "${o}"`,value:`$runWorkflow_${o}`,icon:"linked_services"}));return[{label:"(No handler)",value:"",icon:"block"},...n,...t,...e]});function x(n){var e;if(!j(n))return b.value;const t=(e=r.value.handlers)==null?void 0:e[n];return[...b.value,{value:t,label:`${t} (Not found)`}]}const O=v(()=>{const{type:n}=r.value,{events:t}=u.getComponentDefinition(n),e={...t};return Object.keys({...r.value.handlers}).forEach(o=>{e[o]||(e[o]={desc:"Custom event"})}),e}),S=u.userFunctions,D=v(()=>u.getComponents("root").filter(e=>e.type=="page").map(e=>e.content.key).filter(e=>!!e)),I=v(()=>u.getComponents("workflows_root").filter(e=>e.type=="workflows_workflow").map(e=>e.content.key).filter(e=>!!e)),j=n=>{var e;const t=(e=r.value.handlers)==null?void 0:e[n];return!(!t||t.startsWith("$")||S.value.some(o=>o.name==t))},T=(n,t)=>{B(r.value.id,t,n)},p=$(null),s=$(null);function U(){return`
# When dealing with a DOM event, Writer Framework generates a payload by serialising its
# primitive properties (non-Object, non-function properties).

# If the event is instead an instance of CustomEvent,
# it looks for a "payload" property inside the CustomEvent's "detail" property. 

def handle_keydown(state, payload):
	print(payload) # Shows all the properties captured

	key_activated = payload.get("key")
	if key_activated == "ArrowLeft":
		state["position"] += -10
	elif key_activated == "ArrowRight":
		state["position"] += 10

	`}function E(n){const{type:t}=r.value,{events:e}=u.getComponentDefinition(t),o=e==null?void 0:e[n];return o?o==null?void 0:o.stub:U()}async function z(n){const t=E(n),e=await J.colorize(t.trim(),"python",{});p.value={modalTitle:`"${n}" event`,code:t,highlightedCodeHtml:e}}const L=["click","mousedown","mouseup","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","input","change","submit","focus","blur","resize","scroll","load"];function R(){const{eventType:n,handlerFunctionName:t}=s.value;B(r.value.id,n,t),s.value=null}const q={desc:"Close",fn:()=>{p.value=null}};function G(){s.value={eventType:null,handlerFunctionName:null}}const P={desc:"Close",fn:()=>{s.value=null}},X=n=>{navigator.clipboard.writeText(n)};return(n,t)=>{var o;const e=Z("dompurify-html");return ee(_).isSelectionActive()?(m(),y("div",re,[de,l("div",ue,[(m(!0),y(N,null,K(O.value,(a,c)=>(m(),y("div",{key:c},[l("div",ce,[i(H,{label:c,hint:a==null?void 0:a.desc,"help-button":E(c)?"Show event handler stub":!1,onHelpClick:g=>z(c)},{default:d(()=>{var g;return[i(A,{"model-value":((g=r.value.handlers)==null?void 0:g[c])??"",options:x(c),"enable-search":"","onUpdate:modelValue":Y=>T(Y,c)},null,8,["model-value","options","onUpdate:modelValue"])]}),_:2},1032,["label","hint","help-button","onHelpClick"])])]))),128)),i(k,{variant:"tertiary",onClick:G},{default:d(()=>[pe,w("Add custom handler ")]),_:1})]),p.value?(m(),M(W,{key:0,"close-action":q,icon:"help","modal-title":(o=p.value)==null?void 0:o.modalTitle},{default:d(()=>[me,l("div",ve,[te(l("code",null,null,512),[[e,p.value.highlightedCodeHtml]])]),i(k,{variant:"tertiary",onClick:t[0]||(t[0]=a=>X(p.value.code))},{default:d(()=>[fe,w(" Copy code to clipboard ")]),_:1})]),_:1},8,["modal-title"])):C("",!0),s.value?(m(),M(W,{key:1,"close-action":P,icon:"bolt","modal-title":"Add Custom Event Handler","allow-overflow":""},{default:d(()=>[l("div",he,[i(H,{label:"Event type",hint:"Can be any event type."},{default:d(()=>[i(oe,{modelValue:s.value.eventType,"onUpdate:modelValue":t[1]||(t[1]=a=>s.value.eventType=a),type:"text",list:"commonEventTypes"},null,8,["modelValue"]),l("datalist",ye,[(m(),y(N,null,K(L,a=>l("option",{key:a,value:a},ne(a),9,_e)),64))])]),_:1}),i(H,{label:"Handler function",hint:"The function that will handle the event."},{default:d(()=>[i(A,{modelValue:s.value.handlerFunctionName,"onUpdate:modelValue":t[2]||(t[2]=a=>s.value.handlerFunctionName=a),options:b.value,"enable-search":""},null,8,["modelValue","options"])]),_:1})]),i(k,{variant:"tertiary",onClick:t[3]||(t[3]=a=>R())},{default:d(()=>[be,w("Add ")]),_:1})]),_:1})):C("",!0)])):C("",!0)}}}),Ee=ie(ge,[["__scopeId","data-v-8a69aeb2"]]);export{Ee as default};
