[{"data":1,"prerenderedAt":828},["ShallowReactive",2],{"navigation_docs":3,"-composables-use-layout":81,"-composables-use-layout-surround":823},[4,25,63],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","/getting-started/configuration","1.getting-started/3.configuration","i-lucide-settings",{"title":26,"path":27,"stem":28,"children":29},"Composables","/composables","2.composables",[30,33,38,43,48,53,58],{"title":11,"path":27,"stem":31,"icon":32},"2.composables/index","i-lucide-box",{"title":34,"path":35,"stem":36,"icon":37},"useAnimate","/composables/use-animate","2.composables/1.use-animate","i-ph-play-circle",{"title":39,"path":40,"stem":41,"icon":42},"useWaapiAnimate","/composables/use-waapi-animate","2.composables/2.use-waapi-animate","i-ph-lightning",{"title":44,"path":45,"stem":46,"icon":47},"useAnimatable","/composables/use-animatable","2.composables/3.use-animatable","i-ph-cube",{"title":49,"path":50,"stem":51,"icon":52},"useSplitText","/composables/use-split-text","2.composables/4.use-split-text","i-ph-text-t",{"title":54,"path":55,"stem":56,"icon":57},"useLayout","/composables/use-layout","2.composables/5.use-layout","i-ph-layout",{"title":59,"path":60,"stem":61,"icon":62},"useDraggable","/composables/use-draggable","2.composables/6.use-draggable","i-ph-hand-grabbing",{"title":64,"path":65,"stem":66,"children":67},"Misc","/misc","4.misc",[68,71,76],{"title":11,"path":65,"stem":69,"icon":70},"4.misc/index","i-ph-puzzle-piece",{"title":72,"path":73,"stem":74,"icon":75},"Easings","/misc/easings","4.misc/1.easings","i-ph-chart-line",{"title":77,"path":78,"stem":79,"icon":80},"Utils","/misc/utils","4.misc/2.utils","i-ph-wrench",{"id":82,"title":54,"body":83,"description":816,"extension":817,"links":818,"meta":819,"navigation":820,"path":55,"seo":821,"stem":56,"__hash__":822},"docs/2.composables/5.use-layout.md",{"type":84,"value":85,"toc":806},"minimark",[86,90,98,103,261,266,289,293,613,617,620,742,746,750,795,802],[87,88,89],"warning",{},"This composable is under heavy development and unstable",[91,92,93,94,97],"p",{},"The ",[95,96,54],"code",{}," composable helps with layout animations.",[99,100,102],"h2",{"id":101},"type-definition","Type Definition",[104,105,110],"pre",{"className":106,"code":107,"language":108,"meta":109,"style":109},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useLayout(\n  target: AnimeLayoutTargets,\n  options: AutoLayoutParams\n): {\n  properties: ComputedRef\u003CNonFunctionProperties\u003CAutoLayout>>,\n  record: () => void,\n  revert: () => void,\n  animate: (params?: LayoutAnimationParams) => void\n}\n","ts","",[95,111,112,129,146,157,166,192,211,227,255],{"__ignoreMap":109},[113,114,117,121,125],"span",{"class":115,"line":116},"line",1,[113,118,120],{"class":119},"spNyl","function",[113,122,124],{"class":123},"s2Zo4"," useLayout",[113,126,128],{"class":127},"sMK4o","(\n",[113,130,132,136,139,143],{"class":115,"line":131},2,[113,133,135],{"class":134},"sHdIc","  target",[113,137,138],{"class":127},":",[113,140,142],{"class":141},"sBMFI"," AnimeLayoutTargets",[113,144,145],{"class":127},",\n",[113,147,149,152,154],{"class":115,"line":148},3,[113,150,151],{"class":134},"  options",[113,153,138],{"class":127},[113,155,156],{"class":141}," AutoLayoutParams\n",[113,158,160,163],{"class":115,"line":159},4,[113,161,162],{"class":127},"):",[113,164,165],{"class":127}," {\n",[113,167,169,173,175,178,181,184,186,189],{"class":115,"line":168},5,[113,170,172],{"class":171},"swJcz","  properties",[113,174,138],{"class":127},[113,176,177],{"class":141}," ComputedRef",[113,179,180],{"class":127},"\u003C",[113,182,183],{"class":141},"NonFunctionProperties",[113,185,180],{"class":127},[113,187,188],{"class":141},"AutoLayout",[113,190,191],{"class":127},">>,\n",[113,193,195,198,200,203,206,209],{"class":115,"line":194},6,[113,196,197],{"class":171},"  record",[113,199,138],{"class":127},[113,201,202],{"class":127}," ()",[113,204,205],{"class":119}," =>",[113,207,208],{"class":141}," void",[113,210,145],{"class":127},[113,212,214,217,219,221,223,225],{"class":115,"line":213},7,[113,215,216],{"class":171},"  revert",[113,218,138],{"class":127},[113,220,202],{"class":127},[113,222,205],{"class":119},[113,224,208],{"class":141},[113,226,145],{"class":127},[113,228,230,233,235,238,241,244,247,250,252],{"class":115,"line":229},8,[113,231,232],{"class":171},"  animate",[113,234,138],{"class":127},[113,236,237],{"class":127}," (",[113,239,240],{"class":134},"params",[113,242,243],{"class":127},"?:",[113,245,246],{"class":141}," LayoutAnimationParams",[113,248,249],{"class":127},")",[113,251,205],{"class":119},[113,253,254],{"class":141}," void\n",[113,256,258],{"class":115,"line":257},9,[113,259,260],{"class":127},"}\n",[262,263,265],"h3",{"id":264},"arguments","Arguments",[267,268,269,276],"field-group",{},[270,271,275],"field",{"name":272,"type":273,":required":274},"target","AnimeLayoutTargets","true","The wrapper element or selector for the layout transition.",[270,277,280,281,288],{"name":278,"type":279},"options","AutoLayoutParams","Auto layout parameters. See ",[282,283,287],"a",{"href":284,"rel":285},"https://animejs.com/documentation/layout",[286],"nofollow","AnimeJS Layout documentation",".",[99,290,292],{"id":291},"sample-usage","Sample usage",[294,295,296,497],"code-group",{},[104,297,300],{"className":106,"code":298,"filename":299,"language":108,"meta":109,"style":109},"const items = ref([])\nconst { record, animate } = useLayout('.layout-wrapper', {\n  duration: 500,\n  ease: 'inOutQuad'\n})\n\n// Trigger layout animation after DOM changes\nconst addItem = () => {\n  record()\n  items.value.push({ name: items.value.length + 1 })\n  nextTick(animate)\n}\n","script",[95,301,302,320,360,373,389,396,402,408,423,430,479,492],{"__ignoreMap":109},[113,303,304,307,311,314,317],{"class":115,"line":116},[113,305,306],{"class":119},"const",[113,308,310],{"class":309},"sTEyZ"," items ",[113,312,313],{"class":127},"=",[113,315,316],{"class":123}," ref",[113,318,319],{"class":309},"([])\n",[113,321,322,324,327,330,333,336,339,342,344,347,350,354,356,358],{"class":115,"line":131},[113,323,306],{"class":119},[113,325,326],{"class":127}," {",[113,328,329],{"class":309}," record",[113,331,332],{"class":127},",",[113,334,335],{"class":309}," animate ",[113,337,338],{"class":127},"}",[113,340,341],{"class":127}," =",[113,343,124],{"class":123},[113,345,346],{"class":309},"(",[113,348,349],{"class":127},"'",[113,351,353],{"class":352},"sfazB",".layout-wrapper",[113,355,349],{"class":127},[113,357,332],{"class":127},[113,359,165],{"class":127},[113,361,362,365,367,371],{"class":115,"line":148},[113,363,364],{"class":171},"  duration",[113,366,138],{"class":127},[113,368,370],{"class":369},"sbssI"," 500",[113,372,145],{"class":127},[113,374,375,378,380,383,386],{"class":115,"line":159},[113,376,377],{"class":171},"  ease",[113,379,138],{"class":127},[113,381,382],{"class":127}," '",[113,384,385],{"class":352},"inOutQuad",[113,387,388],{"class":127},"'\n",[113,390,391,393],{"class":115,"line":168},[113,392,338],{"class":127},[113,394,395],{"class":309},")\n",[113,397,398],{"class":115,"line":194},[113,399,401],{"emptyLinePlaceholder":400},true,"\n",[113,403,404],{"class":115,"line":213},[113,405,407],{"class":406},"sHwdD","// Trigger layout animation after DOM changes\n",[113,409,410,412,415,417,419,421],{"class":115,"line":229},[113,411,306],{"class":119},[113,413,414],{"class":309}," addItem ",[113,416,313],{"class":127},[113,418,202],{"class":127},[113,420,205],{"class":119},[113,422,165],{"class":127},[113,424,425,427],{"class":115,"line":257},[113,426,197],{"class":123},[113,428,429],{"class":171},"()\n",[113,431,433,436,438,441,443,446,448,451,454,456,459,461,463,465,468,471,474,477],{"class":115,"line":432},10,[113,434,435],{"class":309},"  items",[113,437,288],{"class":127},[113,439,440],{"class":309},"value",[113,442,288],{"class":127},[113,444,445],{"class":123},"push",[113,447,346],{"class":171},[113,449,450],{"class":127},"{",[113,452,453],{"class":171}," name",[113,455,138],{"class":127},[113,457,458],{"class":309}," items",[113,460,288],{"class":127},[113,462,440],{"class":309},[113,464,288],{"class":127},[113,466,467],{"class":309},"length",[113,469,470],{"class":127}," +",[113,472,473],{"class":369}," 1",[113,475,476],{"class":127}," }",[113,478,395],{"class":171},[113,480,482,485,487,490],{"class":115,"line":481},11,[113,483,484],{"class":123},"  nextTick",[113,486,346],{"class":171},[113,488,489],{"class":309},"animate",[113,491,395],{"class":171},[113,493,495],{"class":115,"line":494},12,[113,496,260],{"class":127},[104,498,503],{"className":499,"code":500,"filename":501,"language":502,"meta":109,"style":109},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"layout-wrapper\">\n    \u003Cdiv v-for=\"item in items\" :key=\"item.id\" class=\"layout-item\">\n      {{ item.name }}\n    \u003C/div>\n  \u003C/div>\n\u003C/template>\n","template","vue",[95,504,505,514,537,581,586,595,604],{"__ignoreMap":109},[113,506,507,509,511],{"class":115,"line":116},[113,508,180],{"class":127},[113,510,501],{"class":171},[113,512,513],{"class":127},">\n",[113,515,516,519,522,525,527,530,533,535],{"class":115,"line":131},[113,517,518],{"class":127},"  \u003C",[113,520,521],{"class":171},"div",[113,523,524],{"class":119}," class",[113,526,313],{"class":127},[113,528,529],{"class":127},"\"",[113,531,532],{"class":352},"layout-wrapper",[113,534,529],{"class":127},[113,536,513],{"class":127},[113,538,539,542,544,547,549,551,554,556,559,561,563,566,568,570,572,574,577,579],{"class":115,"line":148},[113,540,541],{"class":127},"    \u003C",[113,543,521],{"class":171},[113,545,546],{"class":119}," v-for",[113,548,313],{"class":127},[113,550,529],{"class":127},[113,552,553],{"class":352},"item in items",[113,555,529],{"class":127},[113,557,558],{"class":119}," :key",[113,560,313],{"class":127},[113,562,529],{"class":127},[113,564,565],{"class":352},"item.id",[113,567,529],{"class":127},[113,569,524],{"class":119},[113,571,313],{"class":127},[113,573,529],{"class":127},[113,575,576],{"class":352},"layout-item",[113,578,529],{"class":127},[113,580,513],{"class":127},[113,582,583],{"class":115,"line":159},[113,584,585],{"class":309},"      {{ item.name }}\n",[113,587,588,591,593],{"class":115,"line":168},[113,589,590],{"class":127},"    \u003C/",[113,592,521],{"class":171},[113,594,513],{"class":127},[113,596,597,600,602],{"class":115,"line":194},[113,598,599],{"class":127},"  \u003C/",[113,601,521],{"class":171},[113,603,513],{"class":127},[113,605,606,609,611],{"class":115,"line":213},[113,607,608],{"class":127},"\u003C/",[113,610,501],{"class":171},[113,612,513],{"class":127},[99,614,616],{"id":615},"return-value","Return Value",[91,618,619],{},"Returns an object with helper methods to control the layout animation.",[621,622,623],"collapsible",{},[624,625,626,643],"table",{},[627,628,629],"thead",{},[630,631,632,637,640],"tr",{},[633,634,636],"th",{"align":635},"left","Property",[633,638,639],{"align":635},"Type",[633,641,642],{"align":635},"Description",[644,645,646,674,695,715],"tbody",{},[630,647,648,654,671],{},[649,650,651],"td",{"align":635},[95,652,653],{},"properties",[649,655,656],{"align":635},[95,657,660,663,665,668],{"className":658,"language":659,"style":109},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[113,661,662],{"class":141},"ComputedRef",[113,664,180],{"class":127},[113,666,667],{"class":141},"object",[113,669,670],{"class":127},">",[649,672,673],{"align":635},"The current layout properties.",[630,675,676,681,692],{},[649,677,678],{"align":635},[95,679,680],{},"record",[649,682,683],{"align":635},[95,684,685,688,690],{"className":658,"language":659,"style":109},[113,686,687],{"class":127},"()",[113,689,205],{"class":119},[113,691,208],{"class":141},[649,693,694],{"align":635},"Record the current layout state.",[630,696,697,702,712],{},[649,698,699],{"align":635},[95,700,701],{},"revert",[649,703,704],{"align":635},[95,705,706,708,710],{"className":658,"language":659,"style":109},[113,707,687],{"class":127},[113,709,205],{"class":119},[113,711,208],{"class":141},[649,713,714],{"align":635},"Revert the layout to its original state.",[630,716,717,721,739],{},[649,718,719],{"align":635},[95,720,489],{},[649,722,723],{"align":635},[95,724,725,727,729,731,733,735,737],{"className":658,"language":659,"style":109},[113,726,346],{"class":127},[113,728,240],{"class":134},[113,730,243],{"class":127},[113,732,246],{"class":141},[113,734,249],{"class":127},[113,736,205],{"class":119},[113,738,208],{"class":141},[649,740,741],{"align":635},"Animate from the recorded state to the current state.",[99,743,745],{"id":744},"api","API",[262,747,749],{"id":748},"types","Types",[104,751,753],{"className":106,"code":752,"language":108,"meta":109,"style":109},"type AnimeLayoutTargets = DOMTargetSelector | MaybeElementRef\u003CHTMLElement | VueInstance> | null | undefined\n",[95,754,755],{"__ignoreMap":109},[113,756,757,760,762,764,767,770,773,775,778,780,783,785,787,790,792],{"class":115,"line":116},[113,758,759],{"class":119},"type",[113,761,142],{"class":141},[113,763,341],{"class":127},[113,765,766],{"class":141}," DOMTargetSelector",[113,768,769],{"class":127}," |",[113,771,772],{"class":141}," MaybeElementRef",[113,774,180],{"class":127},[113,776,777],{"class":141},"HTMLElement",[113,779,769],{"class":127},[113,781,782],{"class":141}," VueInstance",[113,784,670],{"class":127},[113,786,769],{"class":127},[113,788,789],{"class":141}," null",[113,791,769],{"class":127},[113,793,794],{"class":141}," undefined\n",[91,796,797,798,801],{},"See ",[282,799,287],{"href":284,"rel":800},[286]," for more details.",[803,804,805],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":109,"searchDepth":131,"depth":131,"links":807},[808,811,812,813],{"id":101,"depth":131,"text":102,"children":809},[810],{"id":264,"depth":148,"text":265},{"id":291,"depth":131,"text":292},{"id":615,"depth":131,"text":616},{"id":744,"depth":131,"text":745,"children":814},[815],{"id":748,"depth":148,"text":749},"Documentation for useLayout composable.","md",null,{},{"icon":57},{"title":54,"description":816},"vAIhqXfqi5HxVR4uZv02Uy-2TKm9tv4JQg_wlk7Qocw",[824,826],{"title":49,"path":50,"stem":51,"description":825,"icon":52,"children":-1},"Documentation for useSplitText composable.",{"title":59,"path":60,"stem":61,"description":827,"icon":62,"children":-1},"Documentation for useDraggable composable.",1774567063012]