[{"data":1,"prerenderedAt":928},["ShallowReactive",2],{"navigation":3,"/components/modal":117,"/components/modal-surround":923},[4,11,98],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Introduction","/getting-started","1.getting-started/1.index",[9],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-house",{"title":12,"path":13,"stem":14,"children":15,"icon":17},"Component Catalog","/components","2.components/01.index",[16,18,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94],{"title":12,"path":13,"stem":14,"icon":17},"i-lucide-layout-grid",{"title":19,"path":20,"stem":21},"Text","/components/text","2.components/02.text",{"title":23,"path":24,"stem":25},"Button","/components/button","2.components/03.button",{"title":27,"path":28,"stem":29},"Slider","/components/slider","2.components/04.slider",{"title":31,"path":32,"stem":33},"ChoicePicker","/components/choicepicker","2.components/05.choicepicker",{"title":35,"path":36,"stem":37},"Modal","/components/modal","2.components/06.modal",{"title":39,"path":40,"stem":41},"DateTimeInput","/components/datetimeinput","2.components/07.datetimeinput",{"title":43,"path":44,"stem":45},"Image","/components/image","2.components/08.image",{"title":47,"path":48,"stem":49},"Icon","/components/icon","2.components/09.icon",{"title":51,"path":52,"stem":53},"Video","/components/video","2.components/10.video",{"title":55,"path":56,"stem":57},"AudioPlayer","/components/audioplayer","2.components/11.audioplayer",{"title":59,"path":60,"stem":61},"Row","/components/row","2.components/12.row",{"title":63,"path":64,"stem":65},"Column","/components/column","2.components/13.column",{"title":67,"path":68,"stem":69},"List","/components/list","2.components/14.list",{"title":71,"path":72,"stem":73},"Card","/components/card","2.components/15.card",{"title":75,"path":76,"stem":77},"Tabs","/components/tabs","2.components/16.tabs",{"title":79,"path":80,"stem":81},"Divider","/components/divider","2.components/17.divider",{"title":83,"path":84,"stem":85},"TextField","/components/textfield","2.components/18.textfield",{"title":87,"path":88,"stem":89},"CheckBox","/components/checkbox","2.components/19.checkbox",{"title":91,"path":92,"stem":93},"Slideover","/components/slideover","2.components/20.slideover",{"title":95,"path":96,"stem":97},"Table","/components/table","2.components/21.table",{"title":99,"path":100,"stem":101,"children":102,"icon":104},"Recipes","/recipes","3.recipes/01.index",[103,105,109,113],{"title":99,"path":100,"stem":101,"icon":104},"i-lucide-chef-hat",{"title":106,"path":107,"stem":108},"Booking Receipt","/recipes/booking-receipt","3.recipes/02.booking-receipt",{"title":110,"path":111,"stem":112},"Establishment Detail","/recipes/establishment-detail","3.recipes/03.establishment-detail",{"title":114,"path":115,"stem":116},"Booking History","/recipes/booking-history","3.recipes/04.booking-history",{"id":118,"title":35,"body":119,"description":916,"extension":917,"links":918,"meta":919,"navigation":920,"path":36,"seo":921,"stem":37,"__hash__":922},"docs/2.components/06.modal.md",{"type":120,"value":121,"toc":909},"minimark",[122,127,171,175,802,806,862,866,891,895,905],[123,124,126],"h2",{"id":125},"a2ui-nuxt-ui-mapping","A2UI → Nuxt UI Mapping",[128,129,130,143],"table",{},[131,132,133],"thead",{},[134,135,136,140],"tr",{},[137,138,139],"th",{},"A2UI Property",[137,141,142],{},"Nuxt UI Result",[144,145,146,158],"tbody",{},[134,147,148,155],{},[149,150,151],"td",{},[152,153,154],"code",{},"trigger",[149,156,157],{},"Child component that opens the modal on click",[134,159,160,165],{},[149,161,162],{},[152,163,164],{},"content",[149,166,167,168],{},"Child component rendered inside ",[152,169,170],{},"UModal",[123,172,174],{"id":173},"example-jsonl","Example JSONL",[176,177,182],"pre",{"className":178,"code":179,"language":180,"meta":181,"style":181},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"modal_demo\",\"catalogId\":\"standard\"}}\n{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"modal_demo\",\"components\":[\n  {\"id\":\"root\",\"component\":\"Column\",\"children\":[\"modal1\"]},\n  {\"id\":\"modal1\",\"component\":\"Modal\",\"trigger\":\"open_btn\",\"content\":\"modal_content\"},\n  {\"id\":\"open_btn\",\"component\":\"Button\",\"label\":\"Open Modal\",\"variant\":\"primary\"},\n  {\"id\":\"modal_content\",\"component\":\"Column\",\"children\":[\"modal_title\",\"modal_text\",\"close_btn\"]},\n  {\"id\":\"modal_title\",\"component\":\"Text\",\"text\":\"Confirmation\",\"variant\":\"h3\"},\n  {\"id\":\"modal_text\",\"component\":\"Text\",\"text\":\"Are you sure you want to proceed? This action cannot be undone.\"},\n  {\"id\":\"close_btn\",\"component\":\"Button\",\"label\":\"Confirm\",\"variant\":\"primary\"}\n]}}\n","json","",[152,183,184,264,320,382,454,527,599,671,725,796],{"__ignoreMap":181},[185,186,189,193,196,200,202,205,207,211,213,216,218,221,223,226,228,232,234,236,238,241,243,245,247,250,252,254,256,259,261],"span",{"class":187,"line":188},"line",1,[185,190,192],{"class":191},"sMK4o","{",[185,194,195],{"class":191},"\"",[185,197,199],{"class":198},"spNyl","version",[185,201,195],{"class":191},[185,203,204],{"class":191},":",[185,206,195],{"class":191},[185,208,210],{"class":209},"sfazB","v0.10",[185,212,195],{"class":191},[185,214,215],{"class":191},",",[185,217,195],{"class":191},[185,219,220],{"class":198},"createSurface",[185,222,195],{"class":191},[185,224,225],{"class":191},":{",[185,227,195],{"class":191},[185,229,231],{"class":230},"sBMFI","surfaceId",[185,233,195],{"class":191},[185,235,204],{"class":191},[185,237,195],{"class":191},[185,239,240],{"class":209},"modal_demo",[185,242,195],{"class":191},[185,244,215],{"class":191},[185,246,195],{"class":191},[185,248,249],{"class":230},"catalogId",[185,251,195],{"class":191},[185,253,204],{"class":191},[185,255,195],{"class":191},[185,257,258],{"class":209},"standard",[185,260,195],{"class":191},[185,262,263],{"class":191},"}}\n",[185,265,267,269,271,273,275,277,279,281,283,285,287,290,292,294,296,298,300,302,304,306,308,310,312,315,317],{"class":187,"line":266},2,[185,268,192],{"class":191},[185,270,195],{"class":191},[185,272,199],{"class":198},[185,274,195],{"class":191},[185,276,204],{"class":191},[185,278,195],{"class":191},[185,280,210],{"class":209},[185,282,195],{"class":191},[185,284,215],{"class":191},[185,286,195],{"class":191},[185,288,289],{"class":198},"updateComponents",[185,291,195],{"class":191},[185,293,225],{"class":191},[185,295,195],{"class":191},[185,297,231],{"class":230},[185,299,195],{"class":191},[185,301,204],{"class":191},[185,303,195],{"class":191},[185,305,240],{"class":209},[185,307,195],{"class":191},[185,309,215],{"class":191},[185,311,195],{"class":191},[185,313,314],{"class":230},"components",[185,316,195],{"class":191},[185,318,319],{"class":191},":[\n",[185,321,323,326,328,332,334,336,338,341,343,345,347,350,352,354,356,358,360,362,364,367,369,372,374,377,379],{"class":187,"line":322},3,[185,324,325],{"class":191},"  {",[185,327,195],{"class":191},[185,329,331],{"class":330},"sbssI","id",[185,333,195],{"class":191},[185,335,204],{"class":191},[185,337,195],{"class":191},[185,339,340],{"class":209},"root",[185,342,195],{"class":191},[185,344,215],{"class":191},[185,346,195],{"class":191},[185,348,349],{"class":330},"component",[185,351,195],{"class":191},[185,353,204],{"class":191},[185,355,195],{"class":191},[185,357,63],{"class":209},[185,359,195],{"class":191},[185,361,215],{"class":191},[185,363,195],{"class":191},[185,365,366],{"class":330},"children",[185,368,195],{"class":191},[185,370,371],{"class":191},":[",[185,373,195],{"class":191},[185,375,376],{"class":209},"modal1",[185,378,195],{"class":191},[185,380,381],{"class":191},"]},\n",[185,383,385,387,389,391,393,395,397,399,401,403,405,407,409,411,413,415,417,419,421,423,425,427,429,432,434,436,438,440,442,444,446,449,451],{"class":187,"line":384},4,[185,386,325],{"class":191},[185,388,195],{"class":191},[185,390,331],{"class":330},[185,392,195],{"class":191},[185,394,204],{"class":191},[185,396,195],{"class":191},[185,398,376],{"class":209},[185,400,195],{"class":191},[185,402,215],{"class":191},[185,404,195],{"class":191},[185,406,349],{"class":330},[185,408,195],{"class":191},[185,410,204],{"class":191},[185,412,195],{"class":191},[185,414,35],{"class":209},[185,416,195],{"class":191},[185,418,215],{"class":191},[185,420,195],{"class":191},[185,422,154],{"class":330},[185,424,195],{"class":191},[185,426,204],{"class":191},[185,428,195],{"class":191},[185,430,431],{"class":209},"open_btn",[185,433,195],{"class":191},[185,435,215],{"class":191},[185,437,195],{"class":191},[185,439,164],{"class":330},[185,441,195],{"class":191},[185,443,204],{"class":191},[185,445,195],{"class":191},[185,447,448],{"class":209},"modal_content",[185,450,195],{"class":191},[185,452,453],{"class":191},"},\n",[185,455,457,459,461,463,465,467,469,471,473,475,477,479,481,483,485,487,489,491,493,496,498,500,502,505,507,509,511,514,516,518,520,523,525],{"class":187,"line":456},5,[185,458,325],{"class":191},[185,460,195],{"class":191},[185,462,331],{"class":330},[185,464,195],{"class":191},[185,466,204],{"class":191},[185,468,195],{"class":191},[185,470,431],{"class":209},[185,472,195],{"class":191},[185,474,215],{"class":191},[185,476,195],{"class":191},[185,478,349],{"class":330},[185,480,195],{"class":191},[185,482,204],{"class":191},[185,484,195],{"class":191},[185,486,23],{"class":209},[185,488,195],{"class":191},[185,490,215],{"class":191},[185,492,195],{"class":191},[185,494,495],{"class":330},"label",[185,497,195],{"class":191},[185,499,204],{"class":191},[185,501,195],{"class":191},[185,503,504],{"class":209},"Open Modal",[185,506,195],{"class":191},[185,508,215],{"class":191},[185,510,195],{"class":191},[185,512,513],{"class":330},"variant",[185,515,195],{"class":191},[185,517,204],{"class":191},[185,519,195],{"class":191},[185,521,522],{"class":209},"primary",[185,524,195],{"class":191},[185,526,453],{"class":191},[185,528,530,532,534,536,538,540,542,544,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574,577,579,581,583,586,588,590,592,595,597],{"class":187,"line":529},6,[185,531,325],{"class":191},[185,533,195],{"class":191},[185,535,331],{"class":330},[185,537,195],{"class":191},[185,539,204],{"class":191},[185,541,195],{"class":191},[185,543,448],{"class":209},[185,545,195],{"class":191},[185,547,215],{"class":191},[185,549,195],{"class":191},[185,551,349],{"class":330},[185,553,195],{"class":191},[185,555,204],{"class":191},[185,557,195],{"class":191},[185,559,63],{"class":209},[185,561,195],{"class":191},[185,563,215],{"class":191},[185,565,195],{"class":191},[185,567,366],{"class":330},[185,569,195],{"class":191},[185,571,371],{"class":191},[185,573,195],{"class":191},[185,575,576],{"class":209},"modal_title",[185,578,195],{"class":191},[185,580,215],{"class":191},[185,582,195],{"class":191},[185,584,585],{"class":209},"modal_text",[185,587,195],{"class":191},[185,589,215],{"class":191},[185,591,195],{"class":191},[185,593,594],{"class":209},"close_btn",[185,596,195],{"class":191},[185,598,381],{"class":191},[185,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,641,643,645,647,650,652,654,656,658,660,662,664,667,669],{"class":187,"line":601},7,[185,603,325],{"class":191},[185,605,195],{"class":191},[185,607,331],{"class":330},[185,609,195],{"class":191},[185,611,204],{"class":191},[185,613,195],{"class":191},[185,615,576],{"class":209},[185,617,195],{"class":191},[185,619,215],{"class":191},[185,621,195],{"class":191},[185,623,349],{"class":330},[185,625,195],{"class":191},[185,627,204],{"class":191},[185,629,195],{"class":191},[185,631,19],{"class":209},[185,633,195],{"class":191},[185,635,215],{"class":191},[185,637,195],{"class":191},[185,639,640],{"class":330},"text",[185,642,195],{"class":191},[185,644,204],{"class":191},[185,646,195],{"class":191},[185,648,649],{"class":209},"Confirmation",[185,651,195],{"class":191},[185,653,215],{"class":191},[185,655,195],{"class":191},[185,657,513],{"class":330},[185,659,195],{"class":191},[185,661,204],{"class":191},[185,663,195],{"class":191},[185,665,666],{"class":209},"h3",[185,668,195],{"class":191},[185,670,453],{"class":191},[185,672,674,676,678,680,682,684,686,688,690,692,694,696,698,700,702,704,706,708,710,712,714,716,718,721,723],{"class":187,"line":673},8,[185,675,325],{"class":191},[185,677,195],{"class":191},[185,679,331],{"class":330},[185,681,195],{"class":191},[185,683,204],{"class":191},[185,685,195],{"class":191},[185,687,585],{"class":209},[185,689,195],{"class":191},[185,691,215],{"class":191},[185,693,195],{"class":191},[185,695,349],{"class":330},[185,697,195],{"class":191},[185,699,204],{"class":191},[185,701,195],{"class":191},[185,703,19],{"class":209},[185,705,195],{"class":191},[185,707,215],{"class":191},[185,709,195],{"class":191},[185,711,640],{"class":330},[185,713,195],{"class":191},[185,715,204],{"class":191},[185,717,195],{"class":191},[185,719,720],{"class":209},"Are you sure you want to proceed? This action cannot be undone.",[185,722,195],{"class":191},[185,724,453],{"class":191},[185,726,728,730,732,734,736,738,740,742,744,746,748,750,752,754,756,758,760,762,764,766,768,770,772,775,777,779,781,783,785,787,789,791,793],{"class":187,"line":727},9,[185,729,325],{"class":191},[185,731,195],{"class":191},[185,733,331],{"class":330},[185,735,195],{"class":191},[185,737,204],{"class":191},[185,739,195],{"class":191},[185,741,594],{"class":209},[185,743,195],{"class":191},[185,745,215],{"class":191},[185,747,195],{"class":191},[185,749,349],{"class":330},[185,751,195],{"class":191},[185,753,204],{"class":191},[185,755,195],{"class":191},[185,757,23],{"class":209},[185,759,195],{"class":191},[185,761,215],{"class":191},[185,763,195],{"class":191},[185,765,495],{"class":330},[185,767,195],{"class":191},[185,769,204],{"class":191},[185,771,195],{"class":191},[185,773,774],{"class":209},"Confirm",[185,776,195],{"class":191},[185,778,215],{"class":191},[185,780,195],{"class":191},[185,782,513],{"class":330},[185,784,195],{"class":191},[185,786,204],{"class":191},[185,788,195],{"class":191},[185,790,522],{"class":209},[185,792,195],{"class":191},[185,794,795],{"class":191},"}\n",[185,797,799],{"class":187,"line":798},10,[185,800,801],{"class":191},"]}}\n",[123,803,805],{"id":804},"properties","Properties",[128,807,808,827],{},[131,809,810],{},[134,811,812,815,818,821,824],{},[137,813,814],{},"Property",[137,816,817],{},"Type",[137,819,820],{},"Required",[137,822,823],{},"Default",[137,825,826],{},"Description",[144,828,829,847],{},[134,830,831,835,838,841,844],{},[149,832,833],{},[152,834,154],{},[149,836,837],{},"ComponentId",[149,839,840],{},"✅",[149,842,843],{},"—",[149,845,846],{},"ID of the component that opens the modal",[134,848,849,853,855,857,859],{},[149,850,851],{},[152,852,164],{},[149,854,837],{},[149,856,840],{},[149,858,843],{},[149,860,861],{},"ID of the component displayed inside the modal",[123,863,865],{"id":864},"how-it-works","How It Works",[867,868,869,877,883,888],"ol",{},[870,871,872,873,876],"li",{},"The ",[874,875,154],"strong",{}," component (e.g. a Button) renders normally in the page",[870,878,879,880,882],{},"Clicking the trigger opens the ",[152,881,170],{}," overlay",[870,884,872,885,887],{},[874,886,164],{}," component renders inside the modal with padding",[870,889,890],{},"The modal can be closed by clicking outside or pressing Escape",[123,892,894],{"id":893},"try-it","Try It",[896,897,898,899,904],"p",{},"Copy the JSONL above and paste it in the ",[900,901,903],"a",{"href":902},"/playground","Playground"," Paste tab.",[906,907,908],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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);}",{"title":181,"searchDepth":188,"depth":266,"links":910},[911,912,913,914,915],{"id":125,"depth":266,"text":126},{"id":173,"depth":266,"text":174},{"id":804,"depth":266,"text":805},{"id":864,"depth":266,"text":865},{"id":893,"depth":266,"text":894},"Overlay dialog with trigger element and content.","md",null,{},true,{"title":35,"description":916},"L55_vrBaosYRSaTrqNIpZhEQC6YjILTPU3wFgj7kQCA",[924,926],{"title":31,"path":32,"stem":33,"description":925,"children":-1},"Single or multi-select options — radio group or checkbox list.",{"title":39,"path":40,"stem":41,"description":927,"children":-1},"Date, time, or datetime input with auto-detection.",1771187321363]