import{e as X}from"./BuilderEmbeddedCodeEditor-BY_NqBZ-.js";import{d as Z,i as $,a as V,c as v,r as E,aj as ee,M as te,o as f,e as w,f as a,x as F,y as N,n as r,q as u,s as k,W as g,b as A,m as oe,N as b,ag as ne,t as le,P as M,_ as ae}from"./index-CUGDV1IA.js";import{B as W}from"./BuilderApp-DVqlivId.js";import{B as x,W as C}from"./BuilderSettings-oWe5fV87.js";import"./marked.esm-273vDTCT.js";import"./instancePath-BsbOTTI8.js";const se={key:0,class:"BuilderSettingsHandlers"},ie={class:"BuilderSettingsHandlers__list"},re={class:"columns"},de={class:"codeContainer"},ue={class:"customHandlerModalForm"},ce={id:"commonEventTypes"},me=["value"],pe=Z({__name:"BuilderSettingsHandlers",setup(fe){const s=$(V.core),m=$(V.builderManager),{createAndInsertComponent:_}=M(s,m),{setHandlerValue:H}=M(s,m),i=v(()=>s.getComponentById(m.firstSelectedId.value)),h=v(()=>{const n=B.value.map(o=>o.name).map(o=>({value:o,label:o,icon:"function"})),e=O.value.map(o=>({label:`Go to page "${o}"`,value:`$goToPage_${o}`,icon:"link"})),t=I.value.map(o=>({label:`Run workflow "${o}"`,value:`$runWorkflow_${o}`,icon:"linked_services"}));return[{label:"(No handler)",value:"",icon:"block"},...n,...e,...t]});function K(n){var t;if(!j(n))return h.value;const e=(t=i.value.handlers)==null?void 0:t[n];return[...h.value,{value:e,label:`${e} (Not found)`}]}const D=v(()=>{const{type:n}=i.value,{events:e}=s.getComponentDefinition(n),t={...e};return Object.keys({...i.value.handlers}).forEach(o=>{t[o]||(t[o]={desc:"Custom event"})}),t}),B=s.userFunctions,O=v(()=>s.getComponents("root").filter(t=>t.type=="page").map(t=>t.content.key).filter(t=>!!t)),I=v(()=>s.getComponents("workflows_root").filter(t=>t.type=="workflows_workflow").map(t=>t.content.key).filter(t=>!!t)),j=n=>{var t;const e=(t=i.value.handlers)==null?void 0:t[n];return!(!e||e.startsWith("$")||B.value.some(o=>o.name==e))},U=(n,e)=>{H(i.value.id,e,n)},p=E(null),d=E(null);function L(){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 S(n){const{type:e}=i.value,{events:t}=s.getComponentDefinition(e),o=t==null?void 0:t[n];return o?o==null?void 0:o.stub:L()}async function P(n){const e=S(n),t=await X.colorize(e.trim(),"python",{});p.value={modalTitle:`"${n}" event`,code:e,highlightedCodeHtml:t}}const z=["click","mousedown","mouseup","mouseenter","mouseleave","mousemove","keydown","keyup","keypress","input","change","submit","focus","blur","resize","scroll","load"];function R(){const{eventType:n,handlerFunctionName:e}=d.value;H(i.value.id,n,e),d.value=null}const T={desc:"Close",fn:()=>{p.value=null}};function q(){d.value={eventType:null,handlerFunctionName:null}}const G={desc:"Close",fn:()=>{d.value=null}},Y=n=>{navigator.clipboard.writeText(n)};async function J(n){const{type:e}=i.value,{name:t}=s.getComponentDefinition(e),o=_("workflows_workflow","workflows_root",void 0,void 0,l=>{_("workflows_uieventtrigger",l,void 0,{content:{alias:`${t} - ${n}`,refComponentId:i.value.id,refEventType:n},x:96,y:96})});s.setActivePageId(o),m.setMode("workflows"),m.setSelection(o)}return(n,e)=>{var o;const t=ee("dompurify-html");return te(m).isSingleSelectionActive?(f(),w("div",se,[e[9]||(e[9]=a("div",{class:"BuilderSettingsHandlers__title"},[a("i",{class:"material-symbols-outlined"},"bolt"),a("h3",null,"Events")],-1)),a("div",ie,[(f(!0),w(F,null,N(D.value,(l,c)=>(f(),w("div",{key:c},[a("div",re,[r(C,{label:c,hint:l==null?void 0:l.desc,"help-button":S(c)?"Show event handler stub":!1,onHelpClick:y=>P(c)},{default:u(()=>{var y;return[r(x,{"model-value":((y=i.value.handlers)==null?void 0:y[c])??"",options:K(c),"enable-search":"","onUpdate:modelValue":Q=>U(Q,c)},null,8,["model-value","options","onUpdate:modelValue"])]}),_:2},1032,["label","hint","help-button","onHelpClick"])]),r(g,{variant:"tertiary",onClick:y=>J(c)},{default:u(()=>e[4]||(e[4]=[a("i",{class:"material-symbols-outlined"},"add",-1),k("Create linked workflow ")])),_:2},1032,["onClick"])]))),128)),r(g,{variant:"tertiary",onClick:q},{default:u(()=>e[5]||(e[5]=[a("i",{class:"material-symbols-outlined"},"add",-1),k("Add custom handler ")])),_:1})]),p.value?(f(),A(W,{key:0,"close-action":T,icon:"help","modal-title":(o=p.value)==null?void 0:o.modalTitle},{default:u(()=>[e[7]||(e[7]=a("div",{class:"stubMessage"}," You can use the following stub code as a starting point for your event handler. ",-1)),a("div",de,[oe(a("code",null,null,512),[[t,p.value.highlightedCodeHtml]])]),r(g,{variant:"tertiary",onClick:e[0]||(e[0]=l=>Y(p.value.code))},{default:u(()=>e[6]||(e[6]=[a("i",{class:"material-symbols-outlined"},"content_copy",-1),k(" Copy code to clipboard ")])),_:1})]),_:1},8,["modal-title"])):b("",!0),d.value?(f(),A(W,{key:1,"close-action":G,icon:"bolt","modal-title":"Add Custom Event Handler","allow-overflow":""},{default:u(()=>[a("div",ue,[r(C,{label:"Event type",hint:"Can be any event type."},{default:u(()=>[r(ne,{modelValue:d.value.eventType,"onUpdate:modelValue":e[1]||(e[1]=l=>d.value.eventType=l),type:"text",list:"commonEventTypes"},null,8,["modelValue"]),a("datalist",ce,[(f(),w(F,null,N(z,l=>a("option",{key:l,value:l},le(l),9,me)),64))])]),_:1}),r(C,{label:"Handler function",hint:"The function that will handle the event."},{default:u(()=>[r(x,{modelValue:d.value.handlerFunctionName,"onUpdate:modelValue":e[2]||(e[2]=l=>d.value.handlerFunctionName=l),options:h.value,"enable-search":""},null,8,["modelValue","options"])]),_:1})]),r(g,{variant:"tertiary",onClick:e[3]||(e[3]=l=>R())},{default:u(()=>e[8]||(e[8]=[a("i",{class:"material-symbols-outlined"},"add",-1),k("Add ")])),_:1})]),_:1})):b("",!0)])):b("",!0)}}}),be=ae(pe,[["__scopeId","data-v-ec78cfd2"]]);export{be as default};
