[{"data":1,"prerenderedAt":1093},["ShallowReactive",2],{"navigation_docs":3,"-use-cases-modal-drag-resize":108,"-use-cases-modal-drag-resize-surround":1088},[4,33,67],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":32},"Get Started","heroicons-outline:book-open","\u002Fget-started","2.get-started",[10],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":32},"Guide","akar-icons:book","\u002Fget-started\u002Fguide","2.get-started\u002F1.guide",[16,20,24,28],{"title":17,"path":18,"stem":19},"Concepts","\u002Fget-started\u002Fguide\u002Fconcepts","2.get-started\u002F1.guide\u002F1.concepts",{"title":21,"path":22,"stem":23},"Setup","\u002Fget-started\u002Fguide\u002Fsetup","2.get-started\u002F1.guide\u002F2.setup",{"title":25,"path":26,"stem":27},"Migration Guide","\u002Fget-started\u002Fguide\u002Fmigration-guide","2.get-started\u002F1.guide\u002F3.migration-guide",{"title":29,"path":30,"stem":31},"Types","\u002Fget-started\u002Fguide\u002Ftypes","2.get-started\u002F1.guide\u002F4.types",false,{"title":34,"icon":35,"path":36,"stem":37,"children":38,"page":32},"API","heroicons-outline:bookmark-alt","\u002Fapi","3.api",[39,53],{"title":40,"icon":41,"path":42,"stem":43,"children":44,"page":32},"Components","heroicons-outline:cube","\u002Fapi\u002Fcomponents","3.api\u002F1.components",[45,49],{"title":46,"path":47,"stem":48},"\u003CVueFinalModal>","\u002Fapi\u002Fcomponents\u002Fvue-final-modal","3.api\u002F1.components\u002F1.vue-final-modal",{"title":50,"path":51,"stem":52},"\u003CModalsContainer>","\u002Fapi\u002Fcomponents\u002Fmodals-container","3.api\u002F1.components\u002F2.modals-container",{"title":54,"icon":55,"path":56,"stem":57,"children":58,"page":32},"Composables","heroicons-outline:switch-horizontal","\u002Fapi\u002Fcomposables","3.api\u002F2.composables",[59,63],{"title":60,"path":61,"stem":62},"useModal()","\u002Fapi\u002Fcomposables\u002Fuse-modal","3.api\u002F2.composables\u002F1.use-modal",{"title":64,"path":65,"stem":66},"useVfm()","\u002Fapi\u002Fcomposables\u002Fuse-vfm","3.api\u002F2.composables\u002F2.use-vfm",{"title":68,"path":69,"stem":70,"children":71,"page":32},"Use Cases","\u002Fuse-cases","4.use-cases",[72,76,80,84,88,92,96,100,104],{"title":73,"path":74,"stem":75},"Playground","\u002Fuse-cases\u002Fplayground","4.use-cases\u002F1.playground",{"title":77,"path":78,"stem":79},"Modal Keep Alive","\u002Fuse-cases\u002Fmodal-keep-alive","4.use-cases\u002F10.modal-keep-alive",{"title":81,"path":82,"stem":83},"Modal Confirm","\u002Fuse-cases\u002Fconfirm-modal","4.use-cases\u002F3.confirm-modal",{"title":85,"path":86,"stem":87},"Modal Nested","\u002Fuse-cases\u002Fmodal-nested","4.use-cases\u002F4.modal-nested",{"title":89,"path":90,"stem":91},"Modal Fullscreen","\u002Fuse-cases\u002Fmodal-fullscreen","4.use-cases\u002F5.modal-fullscreen",{"title":93,"path":94,"stem":95},"Modal Bottom","\u002Fuse-cases\u002Fmodal-bottom","4.use-cases\u002F6.modal-bottom",{"title":97,"path":98,"stem":99},"Modal Login Form","\u002Fuse-cases\u002Fmodal-login-form","4.use-cases\u002F7.modal-login-form",{"title":101,"path":102,"stem":103},"Modal Drag Resize","\u002Fuse-cases\u002Fmodal-drag-resize","4.use-cases\u002F8.modal-drag-resize",{"title":105,"path":106,"stem":107},"Modal Long Scroll","\u002Fuse-cases\u002Fmodal-long-scroll","4.use-cases\u002F9.modal-long-scroll",{"id":109,"title":101,"body":110,"description":1080,"extension":1081,"links":1082,"meta":1083,"navigation":219,"path":102,"seo":1086,"stem":103,"__hash__":1087},"docs\u002F4.use-cases\u002F8.modal-drag-resize.md",{"type":111,"value":112,"toc":1075},"minimark",[113,125,130,367,374,1071],[114,115,116,117,124],"p",{},"Here is a basic drag and resize modal example that using ",[118,119,123],"a",{"href":120,"rel":121},"https:\u002F\u002Fgithub.com\u002Fkirillmurashov\u002Fvue-drag-resize\u002Ftree\u002Fvue3",[122],"nofollow","vue3-drag-resize",".",[126,127,129],"h2",{"id":128},"preview","Preview",[131,132,133,136],"code-preview",{},[134,135],"modal-drag-resize-preview",{},[137,138,140],"template",{"v-slot:code":139},"",[141,142,147],"pre",{"className":143,"code":144,"filename":145,"language":146,"meta":139,"style":139},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  \u003Cscript setup lang=\"ts\">\n  import { useModal } from 'vue-final-modal'\n\n  const { open } = useModal({\n    component: defineAsyncComponent(() => import('.\u002FModalDragResize.vue')),\n  })\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVButton @click=\"() => open()\">\n      Open Modal\n    \u003C\u002FVButton>\n  \u003C\u002Ftemplate>\n","Preview.vue","vue",[148,149,150,185,214,221,247,286,295,305,310,319,342,348,358],"code",{"__ignoreMap":139},[151,152,155,159,163,167,170,173,176,180,182],"span",{"class":153,"line":154},"line",1,[151,156,158],{"class":157},"sMK4o","  \u003C",[151,160,162],{"class":161},"swJcz","script",[151,164,166],{"class":165},"spNyl"," setup",[151,168,169],{"class":165}," lang",[151,171,172],{"class":157},"=",[151,174,175],{"class":157},"\"",[151,177,179],{"class":178},"sfazB","ts",[151,181,175],{"class":157},[151,183,184],{"class":157},">\n",[151,186,188,192,195,199,202,205,208,211],{"class":153,"line":187},2,[151,189,191],{"class":190},"s7zQu","  import",[151,193,194],{"class":157}," {",[151,196,198],{"class":197},"sTEyZ"," useModal",[151,200,201],{"class":157}," }",[151,203,204],{"class":190}," from",[151,206,207],{"class":157}," '",[151,209,210],{"class":178},"vue-final-modal",[151,212,213],{"class":157},"'\n",[151,215,217],{"class":153,"line":216},3,[151,218,220],{"emptyLinePlaceholder":219},true,"\n",[151,222,224,227,229,232,235,238,241,244],{"class":153,"line":223},4,[151,225,226],{"class":165},"  const",[151,228,194],{"class":157},[151,230,231],{"class":197}," open ",[151,233,234],{"class":157},"}",[151,236,237],{"class":157}," =",[151,239,198],{"class":240},"s2Zo4",[151,242,243],{"class":197},"(",[151,245,246],{"class":157},"{\n",[151,248,250,253,256,259,261,264,267,270,272,275,278,280,283],{"class":153,"line":249},5,[151,251,252],{"class":161},"    component",[151,254,255],{"class":157},":",[151,257,258],{"class":240}," defineAsyncComponent",[151,260,243],{"class":197},[151,262,263],{"class":157},"()",[151,265,266],{"class":165}," =>",[151,268,269],{"class":157}," import",[151,271,243],{"class":197},[151,273,274],{"class":157},"'",[151,276,277],{"class":178},".\u002FModalDragResize.vue",[151,279,274],{"class":157},[151,281,282],{"class":197},"))",[151,284,285],{"class":157},",\n",[151,287,289,292],{"class":153,"line":288},6,[151,290,291],{"class":157},"  }",[151,293,294],{"class":197},")\n",[151,296,298,301,303],{"class":153,"line":297},7,[151,299,300],{"class":157},"  \u003C\u002F",[151,302,162],{"class":161},[151,304,184],{"class":157},[151,306,308],{"class":153,"line":307},8,[151,309,220],{"emptyLinePlaceholder":219},[151,311,313,315,317],{"class":153,"line":312},9,[151,314,158],{"class":157},[151,316,137],{"class":161},[151,318,184],{"class":157},[151,320,322,325,328,331,333,335,338,340],{"class":153,"line":321},10,[151,323,324],{"class":157},"    \u003C",[151,326,327],{"class":161},"VButton",[151,329,330],{"class":165}," @click",[151,332,172],{"class":157},[151,334,175],{"class":157},[151,336,337],{"class":178},"() => open()",[151,339,175],{"class":157},[151,341,184],{"class":157},[151,343,345],{"class":153,"line":344},11,[151,346,347],{"class":197},"      Open Modal\n",[151,349,351,354,356],{"class":153,"line":350},12,[151,352,353],{"class":157},"    \u003C\u002F",[151,355,327],{"class":161},[151,357,184],{"class":157},[151,359,361,363,365],{"class":153,"line":360},13,[151,362,300],{"class":157},[151,364,137],{"class":161},[151,366,184],{"class":157},[126,368,370,373],{"id":369},"dragresizemodal-component",[148,371,372],{},"\u003CDragResizeModal>"," component",[375,376,377],"code-group",{},[141,378,381],{"className":143,"code":379,"filename":380,"language":146,"meta":139,"style":139},"  \u003Cscript setup lang=\"ts\">\n  import { VueFinalModal } from 'vue-final-modal'\n  import VueDragResize from 'vue3-drag-resize'\n\n  const emit = defineEmits\u003C{\n    (e: 'update:modelValue', modelValue: boolean): void\n  }>()\n\n  const width = ref(0)\n  const height = ref(0)\n  const top = ref(0)\n  const left = ref(0)\n\n  function dragResize(newRect) {\n    width.value = newRect.width\n    height.value = newRect.height\n    top.value = newRect.top\n    left.value = newRect.left\n  }\n  \u003C\u002Fscript>\n\n  \u003Ctemplate>\n    \u003CVueFinalModal\n      display-directive=\"show\"\n      background=\"interactive\"\n      content-transition=\"vfm-fade\"\n      :hide-overlay=\"true\"\n      @update:model-value=\"val => emit('update:modelValue', val)\"\n    >\n      \u003C!-- in case you use Nuxt, make sure to wrap with `\u003CClientOnly>` -->\n      \u003C!-- in case you don't use Nuxt, you don't need `\u003CClientOnly>` -->\n      \u003CClientOnly>\n        \u003CVueDragResize\n          :is-active=\"true\"\n          :w=\"200\"\n          :h=\"200\"\n          class=\"bg-primary-100 dark:bg-gray-800\"\n          @resizing=\"dragResize\"\n          @dragging=\"dragResize\"\n        >\n          \u003Ch3>Hello World!\u003C\u002Fh3>\n          \u003Cp>{{ top }} х {{ left }} \u003C\u002Fp>\n          \u003Cp>{{ width }} х {{ height }}\u003C\u002Fp>\n          \u003Cbutton class=\"absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md \" @pointerup=\"emit('update:modelValue', false)\">\n            X\n          \u003C\u002Fbutton>\n        \u003C\u002FVueDragResize>\n      \u003C\u002FClientOnly>\n    \u003C\u002FVueFinalModal>\n  \u003C\u002Ftemplate>\n","DragResizeModal.vue",[148,382,383,403,422,438,442,457,493,501,505,525,542,559,576,580,600,621,640,659,678,684,693,698,707,715,731,746,761,776,791,797,804,810,821,830,844,859,873,888,903,917,923,945,963,981,1015,1021,1031,1042,1052,1062],{"__ignoreMap":139},[151,384,385,387,389,391,393,395,397,399,401],{"class":153,"line":154},[151,386,158],{"class":157},[151,388,162],{"class":161},[151,390,166],{"class":165},[151,392,169],{"class":165},[151,394,172],{"class":157},[151,396,175],{"class":157},[151,398,179],{"class":178},[151,400,175],{"class":157},[151,402,184],{"class":157},[151,404,405,407,409,412,414,416,418,420],{"class":153,"line":187},[151,406,191],{"class":190},[151,408,194],{"class":157},[151,410,411],{"class":197}," VueFinalModal",[151,413,201],{"class":157},[151,415,204],{"class":190},[151,417,207],{"class":157},[151,419,210],{"class":178},[151,421,213],{"class":157},[151,423,424,426,429,432,434,436],{"class":153,"line":216},[151,425,191],{"class":190},[151,427,428],{"class":197}," VueDragResize ",[151,430,431],{"class":190},"from",[151,433,207],{"class":157},[151,435,123],{"class":178},[151,437,213],{"class":157},[151,439,440],{"class":153,"line":223},[151,441,220],{"emptyLinePlaceholder":219},[151,443,444,446,449,451,454],{"class":153,"line":249},[151,445,226],{"class":165},[151,447,448],{"class":197}," emit ",[151,450,172],{"class":157},[151,452,453],{"class":240}," defineEmits",[151,455,456],{"class":157},"\u003C{\n",[151,458,459,462,466,468,470,473,475,478,481,483,487,490],{"class":153,"line":288},[151,460,461],{"class":157},"    (",[151,463,465],{"class":464},"sHdIc","e",[151,467,255],{"class":157},[151,469,207],{"class":157},[151,471,472],{"class":178},"update:modelValue",[151,474,274],{"class":157},[151,476,477],{"class":157},",",[151,479,480],{"class":464}," modelValue",[151,482,255],{"class":157},[151,484,486],{"class":485},"sBMFI"," boolean",[151,488,489],{"class":157},"):",[151,491,492],{"class":485}," void\n",[151,494,495,498],{"class":153,"line":297},[151,496,497],{"class":157},"  }>",[151,499,500],{"class":197},"()\n",[151,502,503],{"class":153,"line":307},[151,504,220],{"emptyLinePlaceholder":219},[151,506,507,509,512,514,517,519,523],{"class":153,"line":312},[151,508,226],{"class":165},[151,510,511],{"class":197}," width ",[151,513,172],{"class":157},[151,515,516],{"class":240}," ref",[151,518,243],{"class":197},[151,520,522],{"class":521},"sbssI","0",[151,524,294],{"class":197},[151,526,527,529,532,534,536,538,540],{"class":153,"line":321},[151,528,226],{"class":165},[151,530,531],{"class":197}," height ",[151,533,172],{"class":157},[151,535,516],{"class":240},[151,537,243],{"class":197},[151,539,522],{"class":521},[151,541,294],{"class":197},[151,543,544,546,549,551,553,555,557],{"class":153,"line":344},[151,545,226],{"class":165},[151,547,548],{"class":197}," top ",[151,550,172],{"class":157},[151,552,516],{"class":240},[151,554,243],{"class":197},[151,556,522],{"class":521},[151,558,294],{"class":197},[151,560,561,563,566,568,570,572,574],{"class":153,"line":350},[151,562,226],{"class":165},[151,564,565],{"class":197}," left ",[151,567,172],{"class":157},[151,569,516],{"class":240},[151,571,243],{"class":197},[151,573,522],{"class":521},[151,575,294],{"class":197},[151,577,578],{"class":153,"line":360},[151,579,220],{"emptyLinePlaceholder":219},[151,581,583,586,589,591,594,597],{"class":153,"line":582},14,[151,584,585],{"class":165},"  function",[151,587,588],{"class":240}," dragResize",[151,590,243],{"class":157},[151,592,593],{"class":464},"newRect",[151,595,596],{"class":157},")",[151,598,599],{"class":157}," {\n",[151,601,603,606,608,611,613,616,618],{"class":153,"line":602},15,[151,604,605],{"class":197},"    width",[151,607,124],{"class":157},[151,609,610],{"class":197},"value",[151,612,237],{"class":157},[151,614,615],{"class":197}," newRect",[151,617,124],{"class":157},[151,619,620],{"class":197},"width\n",[151,622,624,627,629,631,633,635,637],{"class":153,"line":623},16,[151,625,626],{"class":197},"    height",[151,628,124],{"class":157},[151,630,610],{"class":197},[151,632,237],{"class":157},[151,634,615],{"class":197},[151,636,124],{"class":157},[151,638,639],{"class":197},"height\n",[151,641,643,646,648,650,652,654,656],{"class":153,"line":642},17,[151,644,645],{"class":197},"    top",[151,647,124],{"class":157},[151,649,610],{"class":197},[151,651,237],{"class":157},[151,653,615],{"class":197},[151,655,124],{"class":157},[151,657,658],{"class":197},"top\n",[151,660,662,665,667,669,671,673,675],{"class":153,"line":661},18,[151,663,664],{"class":197},"    left",[151,666,124],{"class":157},[151,668,610],{"class":197},[151,670,237],{"class":157},[151,672,615],{"class":197},[151,674,124],{"class":157},[151,676,677],{"class":197},"left\n",[151,679,681],{"class":153,"line":680},19,[151,682,683],{"class":157},"  }\n",[151,685,687,689,691],{"class":153,"line":686},20,[151,688,300],{"class":157},[151,690,162],{"class":161},[151,692,184],{"class":157},[151,694,696],{"class":153,"line":695},21,[151,697,220],{"emptyLinePlaceholder":219},[151,699,701,703,705],{"class":153,"line":700},22,[151,702,158],{"class":157},[151,704,137],{"class":161},[151,706,184],{"class":157},[151,708,710,712],{"class":153,"line":709},23,[151,711,324],{"class":157},[151,713,714],{"class":161},"VueFinalModal\n",[151,716,718,721,723,725,728],{"class":153,"line":717},24,[151,719,720],{"class":165},"      display-directive",[151,722,172],{"class":157},[151,724,175],{"class":157},[151,726,727],{"class":178},"show",[151,729,730],{"class":157},"\"\n",[151,732,734,737,739,741,744],{"class":153,"line":733},25,[151,735,736],{"class":165},"      background",[151,738,172],{"class":157},[151,740,175],{"class":157},[151,742,743],{"class":178},"interactive",[151,745,730],{"class":157},[151,747,749,752,754,756,759],{"class":153,"line":748},26,[151,750,751],{"class":165},"      content-transition",[151,753,172],{"class":157},[151,755,175],{"class":157},[151,757,758],{"class":178},"vfm-fade",[151,760,730],{"class":157},[151,762,764,767,769,771,774],{"class":153,"line":763},27,[151,765,766],{"class":165},"      :hide-overlay",[151,768,172],{"class":157},[151,770,175],{"class":157},[151,772,773],{"class":178},"true",[151,775,730],{"class":157},[151,777,779,782,784,786,789],{"class":153,"line":778},28,[151,780,781],{"class":165},"      @update:model-value",[151,783,172],{"class":157},[151,785,175],{"class":157},[151,787,788],{"class":178},"val => emit('update:modelValue', val)",[151,790,730],{"class":157},[151,792,794],{"class":153,"line":793},29,[151,795,796],{"class":157},"    >\n",[151,798,800],{"class":153,"line":799},30,[151,801,803],{"class":802},"sHwdD","      \u003C!-- in case you use Nuxt, make sure to wrap with `\u003CClientOnly>` -->\n",[151,805,807],{"class":153,"line":806},31,[151,808,809],{"class":802},"      \u003C!-- in case you don't use Nuxt, you don't need `\u003CClientOnly>` -->\n",[151,811,813,816,819],{"class":153,"line":812},32,[151,814,815],{"class":157},"      \u003C",[151,817,818],{"class":161},"ClientOnly",[151,820,184],{"class":157},[151,822,824,827],{"class":153,"line":823},33,[151,825,826],{"class":157},"        \u003C",[151,828,829],{"class":161},"VueDragResize\n",[151,831,833,836,838,840,842],{"class":153,"line":832},34,[151,834,835],{"class":165},"          :is-active",[151,837,172],{"class":157},[151,839,175],{"class":157},[151,841,773],{"class":178},[151,843,730],{"class":157},[151,845,847,850,852,854,857],{"class":153,"line":846},35,[151,848,849],{"class":165},"          :w",[151,851,172],{"class":157},[151,853,175],{"class":157},[151,855,856],{"class":178},"200",[151,858,730],{"class":157},[151,860,862,865,867,869,871],{"class":153,"line":861},36,[151,863,864],{"class":165},"          :h",[151,866,172],{"class":157},[151,868,175],{"class":157},[151,870,856],{"class":178},[151,872,730],{"class":157},[151,874,876,879,881,883,886],{"class":153,"line":875},37,[151,877,878],{"class":165},"          class",[151,880,172],{"class":157},[151,882,175],{"class":157},[151,884,885],{"class":178},"bg-primary-100 dark:bg-gray-800",[151,887,730],{"class":157},[151,889,891,894,896,898,901],{"class":153,"line":890},38,[151,892,893],{"class":165},"          @resizing",[151,895,172],{"class":157},[151,897,175],{"class":157},[151,899,900],{"class":178},"dragResize",[151,902,730],{"class":157},[151,904,906,909,911,913,915],{"class":153,"line":905},39,[151,907,908],{"class":165},"          @dragging",[151,910,172],{"class":157},[151,912,175],{"class":157},[151,914,900],{"class":178},[151,916,730],{"class":157},[151,918,920],{"class":153,"line":919},40,[151,921,922],{"class":157},"        >\n",[151,924,926,929,932,935,938,941,943],{"class":153,"line":925},41,[151,927,928],{"class":157},"          \u003C",[151,930,931],{"class":161},"h3",[151,933,934],{"class":157},">",[151,936,937],{"class":197},"Hello World!",[151,939,940],{"class":157},"\u003C\u002F",[151,942,931],{"class":161},[151,944,184],{"class":157},[151,946,948,950,952,954,957,959,961],{"class":153,"line":947},42,[151,949,928],{"class":157},[151,951,114],{"class":161},[151,953,934],{"class":157},[151,955,956],{"class":197},"{{ top }} х {{ left }} ",[151,958,940],{"class":157},[151,960,114],{"class":161},[151,962,184],{"class":157},[151,964,966,968,970,972,975,977,979],{"class":153,"line":965},43,[151,967,928],{"class":157},[151,969,114],{"class":161},[151,971,934],{"class":157},[151,973,974],{"class":197},"{{ width }} х {{ height }}",[151,976,940],{"class":157},[151,978,114],{"class":161},[151,980,184],{"class":157},[151,982,984,986,989,992,994,996,999,1001,1004,1006,1008,1011,1013],{"class":153,"line":983},44,[151,985,928],{"class":157},[151,987,988],{"class":161},"button",[151,990,991],{"class":165}," class",[151,993,172],{"class":157},[151,995,175],{"class":157},[151,997,998],{"class":178},"absolute top-0 right-0 mt-2 mr-2 px-2 border rounded-md ",[151,1000,175],{"class":157},[151,1002,1003],{"class":165}," @pointerup",[151,1005,172],{"class":157},[151,1007,175],{"class":157},[151,1009,1010],{"class":178},"emit('update:modelValue', false)",[151,1012,175],{"class":157},[151,1014,184],{"class":157},[151,1016,1018],{"class":153,"line":1017},45,[151,1019,1020],{"class":197},"            X\n",[151,1022,1024,1027,1029],{"class":153,"line":1023},46,[151,1025,1026],{"class":157},"          \u003C\u002F",[151,1028,988],{"class":161},[151,1030,184],{"class":157},[151,1032,1034,1037,1040],{"class":153,"line":1033},47,[151,1035,1036],{"class":157},"        \u003C\u002F",[151,1038,1039],{"class":161},"VueDragResize",[151,1041,184],{"class":157},[151,1043,1045,1048,1050],{"class":153,"line":1044},48,[151,1046,1047],{"class":157},"      \u003C\u002F",[151,1049,818],{"class":161},[151,1051,184],{"class":157},[151,1053,1055,1057,1060],{"class":153,"line":1054},49,[151,1056,353],{"class":157},[151,1058,1059],{"class":161},"VueFinalModal",[151,1061,184],{"class":157},[151,1063,1065,1067,1069],{"class":153,"line":1064},50,[151,1066,300],{"class":157},[151,1068,137],{"class":161},[151,1070,184],{"class":157},[1072,1073,1074],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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":139,"searchDepth":187,"depth":187,"links":1076},[1077,1078],{"id":128,"depth":187,"text":129},{"id":369,"depth":187,"text":1079},"\u003CDragResizeModal> component","A drag and resize modal example.","md",null,{"head":1084},{"title":1085},"Modal Drag Resize | Examples",{"title":101,"description":1080},"5c_3t9uRzZpWzPkDNluifJt8n9H6iKRaiNVmNSj6YLU",[1089,1091],{"title":97,"path":98,"stem":99,"description":1090,"children":-1},"Create a \u003CModalLoginForm> component with \u003CVueFinalModal> and TailwindCSS.",{"title":105,"path":106,"stem":107,"description":1092,"children":-1},"A long scrollable modal example like [Bootstrap Modal  scrolling-long-content](https:\u002F\u002Fgetbootstrap.com\u002Fdocs\u002F5.3\u002Fcomponents\u002Fmodal\u002F#scrolling-long-content)",1791743379359]