[{"data":1,"prerenderedAt":825},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-resizable":12,"i-ph:code":823},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":817,"meta":818,"navigation":110,"path":819,"seo":820,"stem":821,"__hash__":822},"docs\u002Fdocs\u002Fcomponents\u002Fresizable.md","Resizable",{"type":16,"value":17,"toc":812},"minimark",[18,22,26,255,260,357,361,388,392,401,586,595,808],[19,20,14],"h1",{"id":21},"resizable",[23,24,25],"p",{},"A layout container that splits content into resizable panels separated by draggable handles. Supports horizontal and vertical layouts, keyboard navigation, and optional persistence of panel sizes.",[27,28,30],"resizable-example",{"source-path":29},"Resizable\u002FResizable.vue",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Flex, Resizable } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CResizable style=\"height: 200px;\">\n    \u003CFlex x-center y-center>\n      Panel 1\n    \u003C\u002FFlex>\n    \u003CFlex x-center y-center>\n      Panel 2\n    \u003C\u002FFlex>\n    \u003CFlex x-center y-center>\n      Panel 3\n    \u003C\u002FFlex>\n  \u003C\u002FResizable>\n\u003C\u002Ftemplate>\n","vue","",[38,39,40,60,95,105,112,122,146,163,170,180,193,199,208,221,227,236,246],"code",{"__ignoreMap":36},[41,42,45,49,53,57],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sP76a","\u003C",[41,50,52],{"class":51},"sKpE2","script",[41,54,56],{"class":55},"sflEz"," setup",[41,58,59],{"class":47},">\n",[41,61,63,66,69,72,75,78,81,84,88,92],{"class":43,"line":62},2,[41,64,65],{"class":51},"import",[41,67,68],{"class":47}," {",[41,70,71],{"class":55}," Flex",[41,73,74],{"class":47},",",[41,76,77],{"class":55}," Resizable",[41,79,80],{"class":47}," }",[41,82,83],{"class":51}," from",[41,85,87],{"class":86},"sBR95"," '",[41,89,91],{"class":90},"sfmH-","@dolanske\u002Fvui",[41,93,94],{"class":86},"'\n",[41,96,98,101,103],{"class":43,"line":97},3,[41,99,100],{"class":47},"\u003C\u002F",[41,102,52],{"class":51},[41,104,59],{"class":47},[41,106,108],{"class":43,"line":107},4,[41,109,111],{"emptyLinePlaceholder":110},true,"\n",[41,113,115,117,120],{"class":43,"line":114},5,[41,116,48],{"class":47},[41,118,119],{"class":51},"template",[41,121,59],{"class":47},[41,123,125,128,130,133,136,139,142,144],{"class":43,"line":124},6,[41,126,127],{"class":47},"  \u003C",[41,129,14],{"class":51},[41,131,132],{"class":55}," style",[41,134,135],{"class":47},"=",[41,137,138],{"class":86},"\"",[41,140,141],{"class":90},"height: 200px;",[41,143,138],{"class":86},[41,145,59],{"class":47},[41,147,149,152,155,158,161],{"class":43,"line":148},7,[41,150,151],{"class":47},"    \u003C",[41,153,154],{"class":51},"Flex",[41,156,157],{"class":55}," x-center",[41,159,160],{"class":55}," y-center",[41,162,59],{"class":47},[41,164,166],{"class":43,"line":165},8,[41,167,169],{"class":168},"sX1ls","      Panel 1\n",[41,171,173,176,178],{"class":43,"line":172},9,[41,174,175],{"class":47},"    \u003C\u002F",[41,177,154],{"class":51},[41,179,59],{"class":47},[41,181,183,185,187,189,191],{"class":43,"line":182},10,[41,184,151],{"class":47},[41,186,154],{"class":51},[41,188,157],{"class":55},[41,190,160],{"class":55},[41,192,59],{"class":47},[41,194,196],{"class":43,"line":195},11,[41,197,198],{"class":168},"      Panel 2\n",[41,200,202,204,206],{"class":43,"line":201},12,[41,203,175],{"class":47},[41,205,154],{"class":51},[41,207,59],{"class":47},[41,209,211,213,215,217,219],{"class":43,"line":210},13,[41,212,151],{"class":47},[41,214,154],{"class":51},[41,216,157],{"class":55},[41,218,160],{"class":55},[41,220,59],{"class":47},[41,222,224],{"class":43,"line":223},14,[41,225,226],{"class":168},"      Panel 3\n",[41,228,230,232,234],{"class":43,"line":229},15,[41,231,175],{"class":47},[41,233,154],{"class":51},[41,235,59],{"class":47},[41,237,239,242,244],{"class":43,"line":238},16,[41,240,241],{"class":47},"  \u003C\u002F",[41,243,14],{"class":51},[41,245,59],{"class":47},[41,247,249,251,253],{"class":43,"line":248},17,[41,250,100],{"class":47},[41,252,119],{"class":51},[41,254,59],{"class":47},[256,257,259],"h3",{"id":258},"props","Props",[261,262,263,279],"table",{},[264,265,266],"thead",{},[267,268,269,273,276],"tr",{},[270,271,272],"th",{},"Name",[270,274,275],{},"Default",[270,277,278],{},"Type",[280,281,282,303,324,340],"tbody",{},[267,283,284,290,293],{},[285,286,287],"td",{},[38,288,289],{},"vertical",[285,291,292],{},"—",[285,294,295,298,299,302],{},[38,296,297],{},"boolean"," ",[300,301],"br",{}," Stacks panels vertically with horizontal handles",[267,304,305,310,312],{},[285,306,307],{},[38,308,309],{},"storageKey",[285,311,292],{},[285,313,314,298,317,319,320,323],{},[38,315,316],{},"string",[300,318],{}," When provided, panel sizes are persisted to ",[38,321,322],{},"localStorage"," under this key",[267,325,326,331,333],{},[285,327,328],{},[38,329,330],{},"hideHandles",[285,332,292],{},[285,334,335,298,337,339],{},[38,336,297],{},[300,338],{}," Hides the resize handles until a handle is hovered or focused",[267,341,342,347,349],{},[285,343,344],{},[38,345,346],{},"minSize",[285,348,292],{},[285,350,351,298,354,356],{},[38,352,353],{},"number",[300,355],{}," Minimum size, in pixels, each panel can be resized to along the active axis",[256,358,360],{"id":359},"slots","Slots",[261,362,363,374],{},[264,364,365],{},[267,366,367,369,371],{},[270,368,272],{},[270,370,259],{},[270,372,373],{},"Description",[280,375,376],{},[267,377,378,383,385],{},[285,379,380],{},[38,381,382],{},"default",[285,384,292],{},[285,386,387],{},"The panel content. Each top-level child becomes a resizable panel",[256,389,391],{"id":390},"examples","Examples",[23,393,394,395,397,398,400],{},"Use the ",[38,396,289],{}," prop to stack panels with horizontal handles. The ",[38,399,346],{},"\nprop keeps every panel above a pixel threshold while dragging.",[402,403,404],"resizable-vertical-example",{},[31,405,407],{"className":33,"code":406,"language":35,"meta":36,"style":36},"\u003Cscript setup>\nimport { Flex, Resizable } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CResizable vertical :min-size=\"48\" style=\"height: 320px;\">\n    \u003CFlex x-center y-center>\n      Top\n    \u003C\u002FFlex>\n    \u003CFlex x-center y-center>\n      Middle\n    \u003C\u002FFlex>\n    \u003CFlex x-center y-center>\n      Bottom\n    \u003C\u002FFlex>\n  \u003C\u002FResizable>\n\u003C\u002Ftemplate>\n",[38,408,409,419,441,449,453,461,495,507,512,520,532,537,545,557,562,570,578],{"__ignoreMap":36},[41,410,411,413,415,417],{"class":43,"line":44},[41,412,48],{"class":47},[41,414,52],{"class":51},[41,416,56],{"class":55},[41,418,59],{"class":47},[41,420,421,423,425,427,429,431,433,435,437,439],{"class":43,"line":62},[41,422,65],{"class":51},[41,424,68],{"class":47},[41,426,71],{"class":55},[41,428,74],{"class":47},[41,430,77],{"class":55},[41,432,80],{"class":47},[41,434,83],{"class":51},[41,436,87],{"class":86},[41,438,91],{"class":90},[41,440,94],{"class":86},[41,442,443,445,447],{"class":43,"line":97},[41,444,100],{"class":47},[41,446,52],{"class":51},[41,448,59],{"class":47},[41,450,451],{"class":43,"line":107},[41,452,111],{"emptyLinePlaceholder":110},[41,454,455,457,459],{"class":43,"line":114},[41,456,48],{"class":47},[41,458,119],{"class":51},[41,460,59],{"class":47},[41,462,463,465,467,470,473,475,477,480,482,484,486,488,491,493],{"class":43,"line":124},[41,464,127],{"class":47},[41,466,14],{"class":51},[41,468,469],{"class":55}," vertical",[41,471,472],{"class":55}," :min-size",[41,474,135],{"class":47},[41,476,138],{"class":86},[41,478,479],{"class":90},"48",[41,481,138],{"class":86},[41,483,132],{"class":55},[41,485,135],{"class":47},[41,487,138],{"class":86},[41,489,490],{"class":90},"height: 320px;",[41,492,138],{"class":86},[41,494,59],{"class":47},[41,496,497,499,501,503,505],{"class":43,"line":148},[41,498,151],{"class":47},[41,500,154],{"class":51},[41,502,157],{"class":55},[41,504,160],{"class":55},[41,506,59],{"class":47},[41,508,509],{"class":43,"line":165},[41,510,511],{"class":168},"      Top\n",[41,513,514,516,518],{"class":43,"line":172},[41,515,175],{"class":47},[41,517,154],{"class":51},[41,519,59],{"class":47},[41,521,522,524,526,528,530],{"class":43,"line":182},[41,523,151],{"class":47},[41,525,154],{"class":51},[41,527,157],{"class":55},[41,529,160],{"class":55},[41,531,59],{"class":47},[41,533,534],{"class":43,"line":195},[41,535,536],{"class":168},"      Middle\n",[41,538,539,541,543],{"class":43,"line":201},[41,540,175],{"class":47},[41,542,154],{"class":51},[41,544,59],{"class":47},[41,546,547,549,551,553,555],{"class":43,"line":210},[41,548,151],{"class":47},[41,550,154],{"class":51},[41,552,157],{"class":55},[41,554,160],{"class":55},[41,556,59],{"class":47},[41,558,559],{"class":43,"line":223},[41,560,561],{"class":168},"      Bottom\n",[41,563,564,566,568],{"class":43,"line":229},[41,565,175],{"class":47},[41,567,154],{"class":51},[41,569,59],{"class":47},[41,571,572,574,576],{"class":43,"line":238},[41,573,241],{"class":47},[41,575,14],{"class":51},[41,577,59],{"class":47},[41,579,580,582,584],{"class":43,"line":248},[41,581,100],{"class":47},[41,583,119],{"class":51},[41,585,59],{"class":47},[23,587,588,589,591,592,594],{},"Nest a ",[38,590,14],{}," inside another to build mixed horizontal and vertical\nlayouts. Each container can set its own ",[38,593,346],{},".",[596,597,598],"resizable-mixed-example",{},[31,599,601],{"className":33,"code":600,"language":35,"meta":36,"style":36},"\u003Cscript setup>\nimport { Flex, Resizable } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CResizable :min-size=\"120\" style=\"height: 320px;\">\n    \u003CFlex x-center y-center>\n      Sidebar\n    \u003C\u002FFlex>\n    \u003CResizable vertical :min-size=\"64\">\n      \u003CFlex x-center y-center>\n        Editor\n      \u003C\u002FFlex>\n      \u003CFlex x-center y-center>\n        Terminal\n      \u003C\u002FFlex>\n    \u003C\u002FResizable>\n  \u003C\u002FResizable>\n\u003C\u002Ftemplate>\n",[38,602,603,613,635,643,647,655,684,696,701,709,730,743,748,757,769,774,782,790,799],{"__ignoreMap":36},[41,604,605,607,609,611],{"class":43,"line":44},[41,606,48],{"class":47},[41,608,52],{"class":51},[41,610,56],{"class":55},[41,612,59],{"class":47},[41,614,615,617,619,621,623,625,627,629,631,633],{"class":43,"line":62},[41,616,65],{"class":51},[41,618,68],{"class":47},[41,620,71],{"class":55},[41,622,74],{"class":47},[41,624,77],{"class":55},[41,626,80],{"class":47},[41,628,83],{"class":51},[41,630,87],{"class":86},[41,632,91],{"class":90},[41,634,94],{"class":86},[41,636,637,639,641],{"class":43,"line":97},[41,638,100],{"class":47},[41,640,52],{"class":51},[41,642,59],{"class":47},[41,644,645],{"class":43,"line":107},[41,646,111],{"emptyLinePlaceholder":110},[41,648,649,651,653],{"class":43,"line":114},[41,650,48],{"class":47},[41,652,119],{"class":51},[41,654,59],{"class":47},[41,656,657,659,661,663,665,667,670,672,674,676,678,680,682],{"class":43,"line":124},[41,658,127],{"class":47},[41,660,14],{"class":51},[41,662,472],{"class":55},[41,664,135],{"class":47},[41,666,138],{"class":86},[41,668,669],{"class":90},"120",[41,671,138],{"class":86},[41,673,132],{"class":55},[41,675,135],{"class":47},[41,677,138],{"class":86},[41,679,490],{"class":90},[41,681,138],{"class":86},[41,683,59],{"class":47},[41,685,686,688,690,692,694],{"class":43,"line":148},[41,687,151],{"class":47},[41,689,154],{"class":51},[41,691,157],{"class":55},[41,693,160],{"class":55},[41,695,59],{"class":47},[41,697,698],{"class":43,"line":165},[41,699,700],{"class":168},"      Sidebar\n",[41,702,703,705,707],{"class":43,"line":172},[41,704,175],{"class":47},[41,706,154],{"class":51},[41,708,59],{"class":47},[41,710,711,713,715,717,719,721,723,726,728],{"class":43,"line":182},[41,712,151],{"class":47},[41,714,14],{"class":51},[41,716,469],{"class":55},[41,718,472],{"class":55},[41,720,135],{"class":47},[41,722,138],{"class":86},[41,724,725],{"class":90},"64",[41,727,138],{"class":86},[41,729,59],{"class":47},[41,731,732,735,737,739,741],{"class":43,"line":195},[41,733,734],{"class":47},"      \u003C",[41,736,154],{"class":51},[41,738,157],{"class":55},[41,740,160],{"class":55},[41,742,59],{"class":47},[41,744,745],{"class":43,"line":201},[41,746,747],{"class":168},"        Editor\n",[41,749,750,753,755],{"class":43,"line":210},[41,751,752],{"class":47},"      \u003C\u002F",[41,754,154],{"class":51},[41,756,59],{"class":47},[41,758,759,761,763,765,767],{"class":43,"line":223},[41,760,734],{"class":47},[41,762,154],{"class":51},[41,764,157],{"class":55},[41,766,160],{"class":55},[41,768,59],{"class":47},[41,770,771],{"class":43,"line":229},[41,772,773],{"class":168},"        Terminal\n",[41,775,776,778,780],{"class":43,"line":238},[41,777,752],{"class":47},[41,779,154],{"class":51},[41,781,59],{"class":47},[41,783,784,786,788],{"class":43,"line":248},[41,785,175],{"class":47},[41,787,14],{"class":51},[41,789,59],{"class":47},[41,791,793,795,797],{"class":43,"line":792},18,[41,794,241],{"class":47},[41,796,14],{"class":51},[41,798,59],{"class":47},[41,800,802,804,806],{"class":43,"line":801},19,[41,803,100],{"class":47},[41,805,119],{"class":51},[41,807,59],{"class":47},[809,810,811],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}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 .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);}",{"title":36,"searchDepth":62,"depth":62,"links":813},[814,815,816],{"id":258,"depth":97,"text":259},{"id":359,"depth":97,"text":360},{"id":390,"depth":97,"text":391},"md",{},"\u002Fdocs\u002Fcomponents\u002Fresizable",{"title":14,"description":25},"docs\u002Fcomponents\u002Fresizable","NyVVajvu0Vj0bho7V4F1nWwsW5yBAJAkXphZYTNS3eI",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":824},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200883147]