2 lines
4.8 KiB
JavaScript
2 lines
4.8 KiB
JavaScript
import{d as A,ag as V,i as c,Y as B,ah as D,ai as U,aj as j,c as o,o as l,b as i,a as I,u as e,T as L,ak as R,s,al as $,F,v as P,g as w,n as W,z as q,t as z,J,W as K,q as h,am as O,a7 as Y,w as E,e as G,an as H,B as M,ae as C,ao as Q,af as X}from"./index-DH8HZ7DP.js";const Z={"h-full":"",flex:"","flex-col":"",p2:""},ee={class:"relative mb-1 w-full flex items-center justify-end pb-1",border:"b dashed base"},te={key:0,class:"absolute left-0 text-xs text-gray-300 dark:text-gray-500"},ae={class:"flex items-center gap-2 px-1"},le={key:0,class:"recording recording-btn bg-[#ef4444]"},oe={key:1,class:"recording-btn bg-black op70 dark:bg-white hover:op100"},ne={class:"flex items-center gap1"},se={class:"p2"},ie=["onClick"],re=["onClick"],ce=A({__name:"TimelineLayers",props:V({data:{}},{modelValue:{},modelModifiers:{}}),emits:V(["select","clear"],["update:modelValue"]),setup(S,{emit:y}){const m=y,f=B(),d=c(()=>f.timelineLayersState.value.recordingState),r=c(()=>f.timelineLayersState.value),b=c(()=>d.value?"Stop recording":"Start recording"),{colorMode:x}=D();c(()=>x.value==="dark");const g=U(S,"modelValue");function u(a){g.value=a,m("select",a),w.value.updateTimelineLayersState({selected:a})}j(()=>r.value.selected,a=>{g.value=a},{immediate:!0});function _(a){return{mouse:r.value.mouseEventEnabled,keyboard:r.value.keyboardEventEnabled,"component-event":r.value.componentEventEnabled,performance:r.value.performanceEventEnabled}[a]}function p(){w.value.updateTimelineLayersState({recordingState:!d.value})}function T(a){const v={mouse:"mouseEventEnabled",keyboard:"keyboardEventEnabled","component-event":"componentEventEnabled",performance:"performanceEventEnabled"}[a];w.value.updateTimelineLayersState({[v]:!_(a)})}return(a,v)=>(l(),o("div",Z,[i("div",ee,[e(d)?I("",!0):(l(),o("span",te,"Not recording")),i("div",ae,[L((l(),o("div",{class:"flex items-center gap1",onClick:p},[e(d)?(l(),o("span",le)):(l(),o("span",oe))])),[[e(R),{content:e(b)},void 0,{"bottom-end":!0}]]),L((l(),o("div",{class:"flex items-center gap1",onClick:v[0]||(v[0]=t=>m("clear"))},[s(e($),{name:"baseline-delete","cursor-pointer":"","text-xl":"",op70:"","hover:op100":""})])),[[e(R),{content:"Clear all timelines"},void 0,{"bottom-end":!0}]]),L((l(),o("div",ne,[s(e($),{name:"baseline-tips-and-updates","cursor-pointer":"","text-xl":"",op70:"","hover:op100":""})])),[[e(R),{content:"<p style='width: 285px'>Timeline events can cause significant performance overhead in large applications, so we recommend enabling it only when needed and on-demand. </p>",html:!0},void 0,{"bottom-end":!0}]])])]),i("ul",se,[(l(!0),o(F,null,P(S.data,t=>(l(),o("li",{key:t.id,class:W(["group relative selectable-item",{active:t.id===g.value,op60:!_(t.id)}]),onClick:n=>u(t.id)},[q(z(t.label)+" ",1),i("span",{class:"absolute right-2 rounded-1 bg-primary-500 px1 text-3 text-white op0 [.active_&]:bg-primary-400 [.active_&]:dark:bg-gray-600 group-hover:op80 hover:op100!",onClick:J(n=>T(t.id),["stop"])},z(_(t.id)?"Disable":"Enable"),9,re)],10,ie))),128))])]))}}),de=K(ce,[["__scopeId","data-v-ba7472d9"]]),ue={class:"h-full w-full"},pe={class:"no-scrollbar h-full flex select-none gap-2 overflow-scroll"},ve={class:"h-full flex flex-col"},me={class:"no-scrollbar h-full flex select-none gap-2 overflow-scroll"},fe={class:"h-full flex flex-col p2"},ge=A({__name:"timeline",setup(S){const y=h(),m=h(),f=h(!1),{width:d}=O(m),r=c(()=>f.value?d.value<700:!1),b=B(),x=c(()=>b.appRecords.value.map(t=>({label:t.name+(t.version?` (${t.version})`:""),value:t.id}))),g=c(()=>x.value.map(t=>({label:t.label,id:t.value}))),u=h(b.activeAppRecordId.value);Y(()=>{u.value=b.activeAppRecordId.value});function _(t){w.value.toggleApp(t).then(()=>{a()})}const p=h(""),T=[{label:"Mouse",id:"mouse"},{label:"Keyboard",id:"keyboard"},{label:"Component events",id:"component-event"},{label:"Performance",id:"performance"}];function a(){y.value?.clear()}function v(){a()}return(t,n)=>{const N=de;return l(),o("div",ue,[s(e(X),{ref_key:"splitpanesRef",ref:m,class:"flex-1 overflow-auto",horizontal:e(r),onReady:n[2]||(n[2]=k=>f.value=!0)},{default:E(()=>[e(x).length>1?(l(),G(e(C),{key:0,border:"base h-full",size:"20"},{default:E(()=>[i("div",pe,[s(e(H),{modelValue:e(u),"onUpdate:modelValue":n[0]||(n[0]=k=>M(u)?u.value=k:null),data:e(g),class:"w-full",onSelect:_},null,8,["modelValue","data"])])]),_:1})):I("",!0),s(e(C),{border:"base","h-full":""},{default:E(()=>[i("div",ve,[i("div",me,[s(N,{modelValue:e(p),"onUpdate:modelValue":n[1]||(n[1]=k=>M(p)?p.value=k:null),data:T,class:"w-full",onSelect:v,onClear:a},null,8,["modelValue"])])])]),_:1}),s(e(C),{relative:"","h-full":"",size:"65"},{default:E(()=>[i("div",fe,[s(e(Q),{ref_key:"timelineRef",ref:y,"layer-ids":[e(p)],"header-visible":!1,"doc-link":"","plugin-id":"","switcher-visible":!1},null,8,["layer-ids"])])]),_:1})]),_:1},8,["horizontal"])])}}});export{ge as default};
|