[{"data":1,"prerenderedAt":1856},["ShallowReactive",2],{"navigation":3,"page:\u002Fcomposables\u002Fuse-sidebar":362,"\u002Fcomposables\u002Fuse-sidebar-surround":1851},[4,28,56,350],{"title":5,"path":6,"stem":7,"children":8,"icon":27},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Styling","\u002Fgetting-started\u002Fstyling","1.getting-started\u002F3.styling","i-lucide-paintbrush",{"title":23,"path":24,"stem":25,"icon":26},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F4.usage","i-lucide-sliders",false,{"title":29,"path":30,"stem":31,"children":32,"icon":27},"Composables","\u002Fcomposables","2.composables\u002F1.index",[33,36,41,46,51],{"title":34,"path":30,"stem":31,"icon":35},"All Composables","i-lucide-braces",{"title":37,"path":38,"stem":39,"icon":40},"useDataTable","\u002Fcomposables\u002Fuse-data-table","2.composables\u002Fuse-data-table","i-lucide-table-2",{"title":42,"path":43,"stem":44,"icon":45},"useOverlay","\u002Fcomposables\u002Fuse-overlay","2.composables\u002Fuse-overlay","i-lucide-panels-top-left",{"title":47,"path":48,"stem":49,"icon":50},"useSidebar","\u002Fcomposables\u002Fuse-sidebar","2.composables\u002Fuse-sidebar","i-lucide-panel-left",{"title":52,"path":53,"stem":54,"icon":55},"useToast","\u002Fcomposables\u002Fuse-toast","2.composables\u002Fuse-toast","i-lucide-bell",{"title":57,"path":58,"stem":59,"children":60,"icon":63},"Components","\u002Fcomponents","3.components\u002F1.index",[61,64,69,74,81,86,91,97,102,107,112,117,122,127,133,139,145,150,155,160,165,170,175,180,184,188,193,198,203,208,213,221,226,230,235,240,245,250,255,260,265,270,275,280,285,290,294,299,305,311,315,320,324,329,334,340,345],{"title":62,"path":58,"stem":59,"icon":63},"All Components","i-lucide-component",{"title":65,"path":66,"stem":67,"icon":68},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","i-lucide-layout-panel-top",{"title":70,"path":71,"stem":72,"icon":73},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","i-lucide-triangle-alert",{"title":75,"path":76,"stem":77,"icon":45,"badge":78},"App Layout","\u002Fcomponents\u002Fapp-layout","3.components\u002Fapp-layout",{"label":79,"color":80},"NEW","success",{"title":82,"path":83,"stem":84,"icon":85},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user",{"title":87,"path":88,"stem":89,"icon":90},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-mouse-pointer-click",{"title":92,"path":93,"stem":94,"icon":95,"badge":96},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"label":79,"color":80},{"title":98,"path":99,"stem":100,"icon":101},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":103,"path":104,"stem":105,"icon":106},"Checkbox Group","\u002Fcomponents\u002Fcheckbox-group","3.components\u002Fcheckbox-group","i-lucide-list-checks",{"title":108,"path":109,"stem":110,"icon":111},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":113,"path":114,"stem":115,"icon":116},"Combobox","\u002Fcomponents\u002Fcombobox","3.components\u002Fcombobox","i-lucide-search",{"title":118,"path":119,"stem":120,"icon":121},"Context Menu","\u002Fcomponents\u002Fcontext-menu","3.components\u002Fcontext-menu","i-lucide-mouse-pointer-2",{"title":123,"path":124,"stem":125,"icon":40,"badge":126},"Data Table","\u002Fcomponents\u002Fdata-table","3.components\u002Fdata-table",{"label":79,"color":80},{"title":128,"path":129,"stem":130,"icon":131,"badge":132},"Date Field","\u002Fcomponents\u002Fdate-field","3.components\u002Fdate-field","i-lucide-calendar-clock",{"label":79,"color":80},{"title":134,"path":135,"stem":136,"icon":137,"badge":138},"Date Range Field","\u002Fcomponents\u002Fdate-range-field","3.components\u002Fdate-range-field","i-lucide-calendar-range",{"label":79,"color":80},{"title":140,"path":141,"stem":142,"icon":143,"badge":144},"Date Range Picker","\u002Fcomponents\u002Fdate-range-picker","3.components\u002Fdate-range-picker","i-lucide-calendar-search",{"label":79,"color":80},{"title":146,"path":147,"stem":148,"icon":149},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-square",{"title":151,"path":152,"stem":153,"icon":154},"Drawer","\u002Fcomponents\u002Fdrawer","3.components\u002Fdrawer","i-lucide-panel-right",{"title":156,"path":157,"stem":158,"icon":159},"Editable","\u002Fcomponents\u002Feditable","3.components\u002Feditable","i-lucide-square-pen",{"title":161,"path":162,"stem":163,"icon":164},"Field","\u002Fcomponents\u002Ffield","3.components\u002Ffield","i-lucide-text-cursor-input",{"title":166,"path":167,"stem":168,"icon":169},"Fieldset","\u002Fcomponents\u002Ffieldset","3.components\u002Ffieldset","i-lucide-group",{"title":171,"path":172,"stem":173,"icon":174},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-check",{"title":176,"path":177,"stem":178,"icon":179},"Hover Preview Card","\u002Fcomponents\u002Fhover-preview-card","3.components\u002Fhover-preview-card","i-lucide-id-card",{"title":181,"path":182,"stem":183,"icon":164},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput",{"title":185,"path":186,"stem":187,"icon":106},"Listbox","\u002Fcomponents\u002Flistbox","3.components\u002Flistbox",{"title":189,"path":190,"stem":191,"icon":192},"Menu","\u002Fcomponents\u002Fmenu","3.components\u002Fmenu","i-lucide-list",{"title":194,"path":195,"stem":196,"icon":197},"Menubar","\u002Fcomponents\u002Fmenubar","3.components\u002Fmenubar","i-lucide-panel-top",{"title":199,"path":200,"stem":201,"icon":202},"Meter","\u002Fcomponents\u002Fmeter","3.components\u002Fmeter","i-lucide-gauge",{"title":204,"path":205,"stem":206,"icon":137,"badge":207},"Month Picker","\u002Fcomponents\u002Fmonth-picker","3.components\u002Fmonth-picker",{"label":79,"color":80},{"title":209,"path":210,"stem":211,"icon":137,"badge":212},"Month Range Picker","\u002Fcomponents\u002Fmonth-range-picker","3.components\u002Fmonth-range-picker",{"label":79,"color":80},{"title":214,"path":215,"stem":216,"icon":217,"badge":218},"Navigation Menu","\u002Fcomponents\u002Fnavigation-menu","3.components\u002Fnavigation-menu","i-lucide-navigation",{"label":219,"color":220},"UPDATED","warning",{"title":222,"path":223,"stem":224,"icon":225},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-badge-plus",{"title":227,"path":228,"stem":229,"icon":45},"Overlay Provider","\u002Fcomponents\u002Foverlay","3.components\u002Foverlay",{"title":231,"path":232,"stem":233,"icon":234},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":236,"path":237,"stem":238,"icon":239},"Pin \u002F OTP Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-binary",{"title":241,"path":242,"stem":243,"icon":244},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square",{"title":246,"path":247,"stem":248,"icon":249},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-loader",{"title":251,"path":252,"stem":253,"icon":254},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":256,"path":257,"stem":258,"icon":259},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":261,"path":262,"stem":263,"icon":264},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-filter",{"title":266,"path":267,"stem":268,"icon":269},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-minus",{"title":271,"path":272,"stem":273,"icon":50,"badge":274},"Sidebar","\u002Fcomponents\u002Fsidebar","3.components\u002Fsidebar",{"label":79,"color":80},{"title":276,"path":277,"stem":278,"icon":279},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":281,"path":282,"stem":283,"icon":284},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":286,"path":287,"stem":288,"icon":289},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-left",{"title":291,"path":292,"stem":293,"icon":68},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":295,"path":296,"stem":297,"icon":298},"Tags Input","\u002Fcomponents\u002Ftags-input","3.components\u002Ftags-input","i-lucide-tags",{"title":300,"path":301,"stem":302,"icon":303,"badge":304},"Time Field","\u002Fcomponents\u002Ftime-field","3.components\u002Ftime-field","i-lucide-clock-3",{"label":79,"color":80},{"title":306,"path":307,"stem":308,"icon":309,"badge":310},"Time Range Field","\u002Fcomponents\u002Ftime-range-field","3.components\u002Ftime-range-field","i-lucide-clock-arrow-up",{"label":79,"color":80},{"title":312,"path":313,"stem":314,"icon":244},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":316,"path":317,"stem":318,"icon":319},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle","i-lucide-toggle-right",{"title":321,"path":322,"stem":323,"icon":106},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":325,"path":326,"stem":327,"icon":328},"Toolbar","\u002Fcomponents\u002Ftoolbar","3.components\u002Ftoolbar","i-lucide-wrench",{"title":330,"path":331,"stem":332,"icon":333},"Tooltip","\u002Fcomponents\u002Ftooltip","3.components\u002Ftooltip","i-lucide-info",{"title":335,"path":336,"stem":337,"icon":338,"badge":339},"Tree","\u002Fcomponents\u002Ftree","3.components\u002Ftree","i-lucide-folder-tree",{"label":79,"color":80},{"title":341,"path":342,"stem":343,"icon":95,"badge":344},"Year Picker","\u002Fcomponents\u002Fyear-picker","3.components\u002Fyear-picker",{"label":79,"color":80},{"title":346,"path":347,"stem":348,"icon":137,"badge":349},"Year Range Picker","\u002Fcomponents\u002Fyear-range-picker","3.components\u002Fyear-range-picker",{"label":79,"color":80},{"title":351,"path":352,"stem":353,"children":354,"icon":27},"Builders","\u002Fbuilders","4.builders\u002F1.index",[355,357],{"title":356,"path":352,"stem":353,"icon":45},"All Builders",{"title":358,"path":359,"stem":360,"icon":361},"Layout Builder","\u002Fbuilders\u002Flayout-builder","4.builders\u002Flayout-builder","i-lucide-layout-dashboard",{"id":363,"title":47,"body":364,"description":1844,"extension":1845,"links":1846,"meta":1847,"navigation":1848,"path":48,"seo":1849,"stem":49,"__hash__":1850},"docs\u002F2.composables\u002Fuse-sidebar.md",{"type":365,"value":366,"toc":1831},"minimark",[367,378,385,389,397,468,473,476,915,918,922,928,1289,1295,1299,1302,1305,1408,1412,1654,1667,1697,1701,1793,1797,1803,1806,1810,1827],[368,369,370,373,374,377],"p",{},[371,372,47],"code",{}," connects external controls to a ",[375,376,271],"a",{"href":272},". Pass its component ref to control that specific instance. Pass an options object when your application owns the state.",[368,379,380,381,384],{},"Import the composable and its types from ",[371,382,383],{},"akaza-ui","; the Nuxt module registers components, not composable auto-imports.",[386,387,23],"h2",{"id":388},"usage",[368,390,391,393,394,396],{},[371,392,47],{}," has two overloads. Pass a ",[371,395,271],{}," component ref to control one rendered instance, or pass an options object when the application owns the state.",[398,399,404],"pre",{"className":400,"code":401,"language":402,"meta":403,"style":403},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useSidebar(target: SidebarTarget): UseSidebarTargetReturn;\nfunction useSidebar(options?: UseSidebarOptions): UseSidebarReturn;\n","ts","",[371,405,406,443],{"__ignoreMap":403},[407,408,411,415,419,423,427,430,434,437,440],"span",{"class":409,"line":410},"line",1,[407,412,414],{"class":413},"spNyl","function",[407,416,418],{"class":417},"s2Zo4"," useSidebar",[407,420,422],{"class":421},"sMK4o","(",[407,424,426],{"class":425},"sHdIc","target",[407,428,429],{"class":421},":",[407,431,433],{"class":432},"sBMFI"," SidebarTarget",[407,435,436],{"class":421},"):",[407,438,439],{"class":432}," UseSidebarTargetReturn",[407,441,442],{"class":421},";\n",[407,444,446,448,450,452,455,458,461,463,466],{"class":409,"line":445},2,[407,447,414],{"class":413},[407,449,418],{"class":417},[407,451,422],{"class":421},[407,453,454],{"class":425},"options",[407,456,457],{"class":421},"?:",[407,459,460],{"class":432}," UseSidebarOptions",[407,462,436],{"class":421},[407,464,465],{"class":432}," UseSidebarReturn",[407,467,442],{"class":421},[469,470,472],"h3",{"id":471},"component-ref-mode","Component ref mode",[368,474,475],{},"Use this mode for external controls, multiple sidebars, or access to the rendered sidebar's responsive and size state.",[398,477,481],{"className":478,"code":479,"language":480,"meta":403,"style":403},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { SidebarController } from \"akaza-ui\";\nimport { Sidebar, useSidebar } from \"akaza-ui\";\nimport { useTemplateRef } from \"vue\";\n\nconst primaryRef = useTemplateRef\u003CSidebarController>(\"primary\");\nconst inspectorRef = useTemplateRef\u003CSidebarController>(\"inspector\");\n\nconst primary = useSidebar(primaryRef);\nconst inspector = useSidebar(inspectorRef);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" @click=\"primary.toggle\">Toggle navigation\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\" @click=\"inspector.toggle\">Toggle inspector\u003C\u002Fbutton>\n\n  \u003CSidebar ref=\"primary\" collapsible=\"icon\">...\u003C\u002FSidebar>\n  \u003CSidebar ref=\"inspector\" side=\"right\" collapsible=\"offcanvas\">...\u003C\u002FSidebar>\n\u003C\u002Ftemplate>\n","vue",[371,482,483,512,543,570,592,599,634,665,670,687,704,714,719,729,771,810,815,856,906],{"__ignoreMap":403},[407,484,485,488,492,495,498,501,504,507,509],{"class":409,"line":410},[407,486,487],{"class":421},"\u003C",[407,489,491],{"class":490},"swJcz","script",[407,493,494],{"class":413}," setup",[407,496,497],{"class":413}," lang",[407,499,500],{"class":421},"=",[407,502,503],{"class":421},"\"",[407,505,402],{"class":506},"sfazB",[407,508,503],{"class":421},[407,510,511],{"class":421},">\n",[407,513,514,518,521,524,528,531,534,537,539,541],{"class":409,"line":445},[407,515,517],{"class":516},"s7zQu","import",[407,519,520],{"class":516}," type",[407,522,523],{"class":421}," {",[407,525,527],{"class":526},"sTEyZ"," SidebarController",[407,529,530],{"class":421}," }",[407,532,533],{"class":516}," from",[407,535,536],{"class":421}," \"",[407,538,383],{"class":506},[407,540,503],{"class":421},[407,542,442],{"class":421},[407,544,546,548,550,553,556,558,560,562,564,566,568],{"class":409,"line":545},3,[407,547,517],{"class":516},[407,549,523],{"class":421},[407,551,552],{"class":526}," Sidebar",[407,554,555],{"class":421},",",[407,557,418],{"class":526},[407,559,530],{"class":421},[407,561,533],{"class":516},[407,563,536],{"class":421},[407,565,383],{"class":506},[407,567,503],{"class":421},[407,569,442],{"class":421},[407,571,573,575,577,580,582,584,586,588,590],{"class":409,"line":572},4,[407,574,517],{"class":516},[407,576,523],{"class":421},[407,578,579],{"class":526}," useTemplateRef",[407,581,530],{"class":421},[407,583,533],{"class":516},[407,585,536],{"class":421},[407,587,480],{"class":506},[407,589,503],{"class":421},[407,591,442],{"class":421},[407,593,595],{"class":409,"line":594},5,[407,596,598],{"emptyLinePlaceholder":597},true,"\n",[407,600,602,605,608,610,612,614,617,620,622,624,627,629,632],{"class":409,"line":601},6,[407,603,604],{"class":413},"const",[407,606,607],{"class":526}," primaryRef ",[407,609,500],{"class":421},[407,611,579],{"class":417},[407,613,487],{"class":421},[407,615,616],{"class":432},"SidebarController",[407,618,619],{"class":421},">",[407,621,422],{"class":526},[407,623,503],{"class":421},[407,625,626],{"class":506},"primary",[407,628,503],{"class":421},[407,630,631],{"class":526},")",[407,633,442],{"class":421},[407,635,637,639,642,644,646,648,650,652,654,656,659,661,663],{"class":409,"line":636},7,[407,638,604],{"class":413},[407,640,641],{"class":526}," inspectorRef ",[407,643,500],{"class":421},[407,645,579],{"class":417},[407,647,487],{"class":421},[407,649,616],{"class":432},[407,651,619],{"class":421},[407,653,422],{"class":526},[407,655,503],{"class":421},[407,657,658],{"class":506},"inspector",[407,660,503],{"class":421},[407,662,631],{"class":526},[407,664,442],{"class":421},[407,666,668],{"class":409,"line":667},8,[407,669,598],{"emptyLinePlaceholder":597},[407,671,673,675,678,680,682,685],{"class":409,"line":672},9,[407,674,604],{"class":413},[407,676,677],{"class":526}," primary ",[407,679,500],{"class":421},[407,681,418],{"class":417},[407,683,684],{"class":526},"(primaryRef)",[407,686,442],{"class":421},[407,688,690,692,695,697,699,702],{"class":409,"line":689},10,[407,691,604],{"class":413},[407,693,694],{"class":526}," inspector ",[407,696,500],{"class":421},[407,698,418],{"class":417},[407,700,701],{"class":526},"(inspectorRef)",[407,703,442],{"class":421},[407,705,707,710,712],{"class":409,"line":706},11,[407,708,709],{"class":421},"\u003C\u002F",[407,711,491],{"class":490},[407,713,511],{"class":421},[407,715,717],{"class":409,"line":716},12,[407,718,598],{"emptyLinePlaceholder":597},[407,720,722,724,727],{"class":409,"line":721},13,[407,723,487],{"class":421},[407,725,726],{"class":490},"template",[407,728,511],{"class":421},[407,730,732,735,738,740,742,744,746,748,751,753,755,758,760,762,765,767,769],{"class":409,"line":731},14,[407,733,734],{"class":421},"  \u003C",[407,736,737],{"class":490},"button",[407,739,520],{"class":413},[407,741,500],{"class":421},[407,743,503],{"class":421},[407,745,737],{"class":506},[407,747,503],{"class":421},[407,749,750],{"class":413}," @click",[407,752,500],{"class":421},[407,754,503],{"class":421},[407,756,757],{"class":506},"primary.toggle",[407,759,503],{"class":421},[407,761,619],{"class":421},[407,763,764],{"class":526},"Toggle navigation",[407,766,709],{"class":421},[407,768,737],{"class":490},[407,770,511],{"class":421},[407,772,774,776,778,780,782,784,786,788,790,792,794,797,799,801,804,806,808],{"class":409,"line":773},15,[407,775,734],{"class":421},[407,777,737],{"class":490},[407,779,520],{"class":413},[407,781,500],{"class":421},[407,783,503],{"class":421},[407,785,737],{"class":506},[407,787,503],{"class":421},[407,789,750],{"class":413},[407,791,500],{"class":421},[407,793,503],{"class":421},[407,795,796],{"class":506},"inspector.toggle",[407,798,503],{"class":421},[407,800,619],{"class":421},[407,802,803],{"class":526},"Toggle inspector",[407,805,709],{"class":421},[407,807,737],{"class":490},[407,809,511],{"class":421},[407,811,813],{"class":409,"line":812},16,[407,814,598],{"emptyLinePlaceholder":597},[407,816,818,820,822,825,827,829,831,833,836,838,840,843,845,847,850,852,854],{"class":409,"line":817},17,[407,819,734],{"class":421},[407,821,271],{"class":490},[407,823,824],{"class":413}," ref",[407,826,500],{"class":421},[407,828,503],{"class":421},[407,830,626],{"class":506},[407,832,503],{"class":421},[407,834,835],{"class":413}," collapsible",[407,837,500],{"class":421},[407,839,503],{"class":421},[407,841,842],{"class":506},"icon",[407,844,503],{"class":421},[407,846,619],{"class":421},[407,848,849],{"class":526},"...",[407,851,709],{"class":421},[407,853,271],{"class":490},[407,855,511],{"class":421},[407,857,859,861,863,865,867,869,871,873,876,878,880,883,885,887,889,891,894,896,898,900,902,904],{"class":409,"line":858},18,[407,860,734],{"class":421},[407,862,271],{"class":490},[407,864,824],{"class":413},[407,866,500],{"class":421},[407,868,503],{"class":421},[407,870,658],{"class":506},[407,872,503],{"class":421},[407,874,875],{"class":413}," side",[407,877,500],{"class":421},[407,879,503],{"class":421},[407,881,882],{"class":506},"right",[407,884,503],{"class":421},[407,886,835],{"class":413},[407,888,500],{"class":421},[407,890,503],{"class":421},[407,892,893],{"class":506},"offcanvas",[407,895,503],{"class":421},[407,897,619],{"class":421},[407,899,849],{"class":526},[407,901,709],{"class":421},[407,903,271],{"class":490},[407,905,511],{"class":421},[407,907,909,911,913],{"class":409,"line":908},19,[407,910,709],{"class":421},[407,912,726],{"class":490},[407,914,511],{"class":421},[368,916,917],{},"Each controller delegates only to its referenced instance. Calls made before that instance mounts are ignored.",[469,919,921],{"id":920},"controlled-state-mode","Controlled state mode",[368,923,924,925,927],{},"Use this mode when state must exist before the component mounts or must be shared with storage, routing, or other application logic. Pass the same refs to ",[371,926,271],{}," models.",[398,929,931],{"className":478,"code":930,"language":480,"meta":403,"style":403},"\u003Cscript setup lang=\"ts\">\nimport { Sidebar, useSidebar } from \"akaza-ui\";\nimport { ref } from \"vue\";\n\nconst open = ref(false);\nconst collapsed = ref(false);\nconst { isMobile, state, toggle } = useSidebar({\n  open,\n  collapsed,\n  breakpoint: \"(max-width: 767px)\",\n});\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" @click=\"toggle\">Toggle sidebar\u003C\u002Fbutton>\n  \u003Coutput>{{ state }}\u003C\u002Foutput>\n\n  \u003CSidebar\n    v-model:open=\"open\"\n    v-model:collapsed=\"collapsed\"\n    :mobile=\"isMobile\"\n    collapsible=\"icon\"\n  >\n    ...\n  \u003C\u002FSidebar>\n\u003C\u002Ftemplate>\n",[371,932,933,953,977,997,1001,1022,1041,1073,1081,1088,1104,1112,1120,1124,1132,1170,1188,1192,1199,1214,1229,1244,1258,1264,1270,1280],{"__ignoreMap":403},[407,934,935,937,939,941,943,945,947,949,951],{"class":409,"line":410},[407,936,487],{"class":421},[407,938,491],{"class":490},[407,940,494],{"class":413},[407,942,497],{"class":413},[407,944,500],{"class":421},[407,946,503],{"class":421},[407,948,402],{"class":506},[407,950,503],{"class":421},[407,952,511],{"class":421},[407,954,955,957,959,961,963,965,967,969,971,973,975],{"class":409,"line":445},[407,956,517],{"class":516},[407,958,523],{"class":421},[407,960,552],{"class":526},[407,962,555],{"class":421},[407,964,418],{"class":526},[407,966,530],{"class":421},[407,968,533],{"class":516},[407,970,536],{"class":421},[407,972,383],{"class":506},[407,974,503],{"class":421},[407,976,442],{"class":421},[407,978,979,981,983,985,987,989,991,993,995],{"class":409,"line":545},[407,980,517],{"class":516},[407,982,523],{"class":421},[407,984,824],{"class":526},[407,986,530],{"class":421},[407,988,533],{"class":516},[407,990,536],{"class":421},[407,992,480],{"class":506},[407,994,503],{"class":421},[407,996,442],{"class":421},[407,998,999],{"class":409,"line":572},[407,1000,598],{"emptyLinePlaceholder":597},[407,1002,1003,1005,1008,1010,1012,1014,1018,1020],{"class":409,"line":594},[407,1004,604],{"class":413},[407,1006,1007],{"class":526}," open ",[407,1009,500],{"class":421},[407,1011,824],{"class":417},[407,1013,422],{"class":526},[407,1015,1017],{"class":1016},"sfNiH","false",[407,1019,631],{"class":526},[407,1021,442],{"class":421},[407,1023,1024,1026,1029,1031,1033,1035,1037,1039],{"class":409,"line":601},[407,1025,604],{"class":413},[407,1027,1028],{"class":526}," collapsed ",[407,1030,500],{"class":421},[407,1032,824],{"class":417},[407,1034,422],{"class":526},[407,1036,1017],{"class":1016},[407,1038,631],{"class":526},[407,1040,442],{"class":421},[407,1042,1043,1045,1047,1050,1052,1055,1057,1060,1063,1066,1068,1070],{"class":409,"line":636},[407,1044,604],{"class":413},[407,1046,523],{"class":421},[407,1048,1049],{"class":526}," isMobile",[407,1051,555],{"class":421},[407,1053,1054],{"class":526}," state",[407,1056,555],{"class":421},[407,1058,1059],{"class":526}," toggle ",[407,1061,1062],{"class":421},"}",[407,1064,1065],{"class":421}," =",[407,1067,418],{"class":417},[407,1069,422],{"class":526},[407,1071,1072],{"class":421},"{\n",[407,1074,1075,1078],{"class":409,"line":667},[407,1076,1077],{"class":526},"  open",[407,1079,1080],{"class":421},",\n",[407,1082,1083,1086],{"class":409,"line":672},[407,1084,1085],{"class":526},"  collapsed",[407,1087,1080],{"class":421},[407,1089,1090,1093,1095,1097,1100,1102],{"class":409,"line":689},[407,1091,1092],{"class":490},"  breakpoint",[407,1094,429],{"class":421},[407,1096,536],{"class":421},[407,1098,1099],{"class":506},"(max-width: 767px)",[407,1101,503],{"class":421},[407,1103,1080],{"class":421},[407,1105,1106,1108,1110],{"class":409,"line":706},[407,1107,1062],{"class":421},[407,1109,631],{"class":526},[407,1111,442],{"class":421},[407,1113,1114,1116,1118],{"class":409,"line":716},[407,1115,709],{"class":421},[407,1117,491],{"class":490},[407,1119,511],{"class":421},[407,1121,1122],{"class":409,"line":721},[407,1123,598],{"emptyLinePlaceholder":597},[407,1125,1126,1128,1130],{"class":409,"line":731},[407,1127,487],{"class":421},[407,1129,726],{"class":490},[407,1131,511],{"class":421},[407,1133,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152,1154,1157,1159,1161,1164,1166,1168],{"class":409,"line":773},[407,1135,734],{"class":421},[407,1137,737],{"class":490},[407,1139,520],{"class":413},[407,1141,500],{"class":421},[407,1143,503],{"class":421},[407,1145,737],{"class":506},[407,1147,503],{"class":421},[407,1149,750],{"class":413},[407,1151,500],{"class":421},[407,1153,503],{"class":421},[407,1155,1156],{"class":506},"toggle",[407,1158,503],{"class":421},[407,1160,619],{"class":421},[407,1162,1163],{"class":526},"Toggle sidebar",[407,1165,709],{"class":421},[407,1167,737],{"class":490},[407,1169,511],{"class":421},[407,1171,1172,1174,1177,1179,1182,1184,1186],{"class":409,"line":812},[407,1173,734],{"class":421},[407,1175,1176],{"class":490},"output",[407,1178,619],{"class":421},[407,1180,1181],{"class":526},"{{ state }}",[407,1183,709],{"class":421},[407,1185,1176],{"class":490},[407,1187,511],{"class":421},[407,1189,1190],{"class":409,"line":817},[407,1191,598],{"emptyLinePlaceholder":597},[407,1193,1194,1196],{"class":409,"line":858},[407,1195,734],{"class":421},[407,1197,1198],{"class":490},"Sidebar\n",[407,1200,1201,1204,1206,1208,1211],{"class":409,"line":908},[407,1202,1203],{"class":413},"    v-model:open",[407,1205,500],{"class":421},[407,1207,503],{"class":421},[407,1209,1210],{"class":506},"open",[407,1212,1213],{"class":421},"\"\n",[407,1215,1217,1220,1222,1224,1227],{"class":409,"line":1216},20,[407,1218,1219],{"class":413},"    v-model:collapsed",[407,1221,500],{"class":421},[407,1223,503],{"class":421},[407,1225,1226],{"class":506},"collapsed",[407,1228,1213],{"class":421},[407,1230,1232,1235,1237,1239,1242],{"class":409,"line":1231},21,[407,1233,1234],{"class":413},"    :mobile",[407,1236,500],{"class":421},[407,1238,503],{"class":421},[407,1240,1241],{"class":506},"isMobile",[407,1243,1213],{"class":421},[407,1245,1247,1250,1252,1254,1256],{"class":409,"line":1246},22,[407,1248,1249],{"class":413},"    collapsible",[407,1251,500],{"class":421},[407,1253,503],{"class":421},[407,1255,842],{"class":506},[407,1257,1213],{"class":421},[407,1259,1261],{"class":409,"line":1260},23,[407,1262,1263],{"class":421},"  >\n",[407,1265,1267],{"class":409,"line":1266},24,[407,1268,1269],{"class":526},"    ...\n",[407,1271,1273,1276,1278],{"class":409,"line":1272},25,[407,1274,1275],{"class":421},"  \u003C\u002F",[407,1277,271],{"class":490},[407,1279,511],{"class":421},[407,1281,1283,1285,1287],{"class":409,"line":1282},26,[407,1284,709],{"class":421},[407,1286,726],{"class":490},[407,1288,511],{"class":421},[368,1290,1291,1292,1294],{},"This mode updates the supplied refs directly. The composable does not emit component events; the connected ",[371,1293,271],{}," models receive the resulting values.",[386,1296,1298],{"id":1297},"api-reference","API Reference",[469,1300,1301],{"id":454},"Options",[368,1303,1304],{},"These options apply to controlled state mode.",[1306,1307,1308,1327],"table",{},[1309,1310,1311],"thead",{},[1312,1313,1314,1318,1321,1324],"tr",{},[1315,1316,1317],"th",{},"Option",[1315,1319,1320],{},"Type",[1315,1322,1323],{},"Default",[1315,1325,1326],{},"Description",[1328,1329,1330,1350,1367,1390],"tbody",{},[1312,1331,1332,1337,1342,1347],{},[1333,1334,1335],"td",{},[371,1336,1210],{},[1333,1338,1339],{},[371,1340,1341],{},"Ref\u003Cboolean>",[1333,1343,1344,1345,824],{},"Internal ",[371,1346,1017],{},[1333,1348,1349],{},"Mobile dialog visibility.",[1312,1351,1352,1356,1360,1364],{},[1333,1353,1354],{},[371,1355,1226],{},[1333,1357,1358],{},[371,1359,1341],{},[1333,1361,1344,1362,824],{},[371,1363,1017],{},[1333,1365,1366],{},"Desktop collapse state.",[1312,1368,1369,1374,1379,1384],{},[1333,1370,1371],{},[371,1372,1373],{},"breakpoint",[1333,1375,1376],{},[371,1377,1378],{},"MaybeRefOrGetter\u003Cstring>",[1333,1380,1381],{},[371,1382,1383],{},"\"(max-width: 767px)\"",[1333,1385,1386,1387,1389],{},"Media query used to calculate ",[371,1388,1241],{},".",[1312,1391,1392,1397,1402,1405],{},[1333,1393,1394],{},[371,1395,1396],{},"mobile",[1333,1398,1399],{},[371,1400,1401],{},"MaybeRefOrGetter\u003Cboolean | undefined>",[1333,1403,1404],{},"Media query result",[1333,1406,1407],{},"Overrides responsive detection. Useful for container layouts, SSR-owned state, and tests.",[469,1409,1411],{"id":1410},"return-value","Return value",[1306,1413,1414,1428],{},[1309,1415,1416],{},[1312,1417,1418,1421,1423,1426],{},[1315,1419,1420],{},"Property",[1315,1422,1320],{},[1315,1424,1425],{},"Available",[1315,1427,1326],{},[1328,1429,1430,1446,1461,1477,1494,1516,1533,1549,1565,1581,1603,1619,1635],{},[1312,1431,1432,1436,1440,1443],{},[1333,1433,1434],{},[371,1435,1210],{},[1333,1437,1438],{},[371,1439,1341],{},[1333,1441,1442],{},"Both modes",[1333,1444,1445],{},"Writable mobile visibility. In component ref mode, writes use the component's cancelable change path.",[1312,1447,1448,1452,1456,1458],{},[1333,1449,1450],{},[371,1451,1226],{},[1333,1453,1454],{},[371,1455,1341],{},[1333,1457,1442],{},[1333,1459,1460],{},"Writable desktop collapse state. In component ref mode, writes use the component's cancelable change path.",[1312,1462,1463,1467,1472,1474],{},[1333,1464,1465],{},[371,1466,1241],{},[1333,1468,1469],{},[371,1470,1471],{},"ComputedRef\u003Cboolean>",[1333,1473,1442],{},[1333,1475,1476],{},"Current responsive mode.",[1312,1478,1479,1484,1489,1491],{},[1333,1480,1481],{},[371,1482,1483],{},"state",[1333,1485,1486],{},[371,1487,1488],{},"ComputedRef\u003C\"open\" | \"closed\" | \"expanded\" | \"collapsed\">",[1333,1490,1442],{},[1333,1492,1493],{},"Normalized responsive state.",[1312,1495,1496,1501,1506,1509],{},[1333,1497,1498],{},[371,1499,1500],{},"size",[1333,1502,1503],{},[371,1504,1505],{},"ComputedRef\u003Cnumber>",[1333,1507,1508],{},"Component ref",[1333,1510,1511,1512,1515],{},"Current expanded width in pixels. Read-only; use ",[371,1513,1514],{},"v-model:size"," for arbitrary size changes.",[1312,1517,1518,1523,1528,1530],{},[1333,1519,1520],{},[371,1521,1522],{},"openMobile()",[1333,1524,1525],{},[371,1526,1527],{},"() => void",[1333,1529,1442],{},[1333,1531,1532],{},"Open mobile dialog state.",[1312,1534,1535,1540,1544,1546],{},[1333,1536,1537],{},[371,1538,1539],{},"closeMobile()",[1333,1541,1542],{},[371,1543,1527],{},[1333,1545,1442],{},[1333,1547,1548],{},"Close mobile dialog state.",[1312,1550,1551,1556,1560,1562],{},[1333,1552,1553],{},[371,1554,1555],{},"toggleMobile()",[1333,1557,1558],{},[371,1559,1527],{},[1333,1561,1442],{},[1333,1563,1564],{},"Toggle mobile dialog state regardless of responsive mode.",[1312,1566,1567,1572,1576,1578],{},[1333,1568,1569],{},[371,1570,1571],{},"expand()",[1333,1573,1574],{},[371,1575,1527],{},[1333,1577,1442],{},[1333,1579,1580],{},"Expand desktop state.",[1312,1582,1583,1588,1592,1594],{},[1333,1584,1585],{},[371,1586,1587],{},"collapse()",[1333,1589,1590],{},[371,1591,1527],{},[1333,1593,1442],{},[1333,1595,1596,1597,1600,1601,1389],{},"Collapse desktop state. The component ignores this when ",[371,1598,1599],{},"collapsible"," is ",[371,1602,1017],{},[1312,1604,1605,1610,1614,1616],{},[1333,1606,1607],{},[371,1608,1609],{},"toggleCollapsed()",[1333,1611,1612],{},[371,1613,1527],{},[1333,1615,1442],{},[1333,1617,1618],{},"Toggle desktop collapse state regardless of responsive mode.",[1312,1620,1621,1626,1630,1632],{},[1333,1622,1623],{},[371,1624,1625],{},"toggle()",[1333,1627,1628],{},[371,1629,1527],{},[1333,1631,1442],{},[1333,1633,1634],{},"Toggle mobile visibility when mobile; otherwise toggle desktop collapse.",[1312,1636,1637,1642,1646,1648],{},[1333,1638,1639],{},[371,1640,1641],{},"resetSize()",[1333,1643,1644],{},[371,1645,1527],{},[1333,1647,1508],{},[1333,1649,1650,1651,1389],{},"Restore the component's ",[371,1652,1653],{},"defaultSize",[368,1655,1656,1657,1659,1660,1663,1664,1666],{},"When no ",[371,1658,1396],{}," override is supplied, controlled mode uses ",[371,1661,1662],{},"matchMedia"," through VueUse. During SSR it starts in desktop mode and updates after hydration. Supply an SSR-safe ",[371,1665,1396],{}," value when initial responsive markup must be deterministic.",[368,1668,1669,1670,1672,1673,1676,1677,1680,1681,1684,1685,1688,1689,1692,1693,1696],{},"Component ref mode delegates through ",[371,1671,271],{}," events. ",[371,1674,1675],{},"open-change",", ",[371,1678,1679],{},"collapsed-change",", and ",[371,1682,1683],{},"size-change"," listeners can still cancel changes. Actions accept ",[371,1686,1687],{},"(reasonOrEvent?: string | Event, event?: Event)"," in addition to no arguments. Bind directly, for example ",[371,1690,1691],{},"@click=\"sidebar.toggle\"",", to retain the original event and the mobile dialog's return-focus target. Calling ",[371,1694,1695],{},"sidebar.toggle()"," is a programmatic action without a triggering event. Standalone state mode does not emit component events.",[469,1698,1700],{"id":1699},"exported-types","Exported types",[1306,1702,1703,1711],{},[1309,1704,1705],{},[1312,1706,1707,1709],{},[1315,1708,1320],{},[1315,1710,1326],{},[1328,1712,1713,1728,1738,1757,1767,1777],{},[1312,1714,1715,1719],{},[1333,1716,1717],{},[371,1718,616],{},[1333,1720,1721,1722,1724,1725,1389],{},"Public ",[371,1723,271],{}," instance contract used with ",[371,1726,1727],{},"useTemplateRef",[1312,1729,1730,1735],{},[1333,1731,1732],{},[371,1733,1734],{},"SidebarControllerAction",[1333,1736,1737],{},"Event-safe action signature, accepting an optional reason or native event.",[1312,1739,1740,1745],{},[1333,1741,1742],{},[371,1743,1744],{},"SidebarTarget",[1333,1746,1747,1748,1676,1750,1753,1754,1389],{},"Read-only ref containing a ",[371,1749,616],{},[371,1751,1752],{},"null",", or ",[371,1755,1756],{},"undefined",[1312,1758,1759,1764],{},[1333,1760,1761],{},[371,1762,1763],{},"UseSidebarOptions",[1333,1765,1766],{},"Controlled state mode options.",[1312,1768,1769,1774],{},[1333,1770,1771],{},[371,1772,1773],{},"UseSidebarReturn",[1333,1775,1776],{},"Shared state and actions returned by controlled state mode.",[1312,1778,1779,1784],{},[1333,1780,1781],{},[371,1782,1783],{},"UseSidebarTargetReturn",[1333,1785,1786,1787,1789,1790,1389],{},"Component ref return type, including ",[371,1788,1500],{}," and ",[371,1791,1792],{},"resetSize",[386,1794,1796],{"id":1795},"rendering-and-ownership","Rendering and ownership",[368,1798,1799,1800,1802],{},"The composable does not render a sidebar, trap focus, or lock scrolling by itself. ",[375,1801,271],{"href":272}," supplies those behaviors and styling hooks. State mode needs a connected Sidebar, as shown above.",[368,1804,1805],{},"Keep storage, route watching, and keyboard shortcuts in your application or configure the component's existing props. There is no global sidebar singleton.",[386,1807,1809],{"id":1808},"related","Related",[1811,1812,1813,1819,1823],"ul",{},[1814,1815,1816],"li",{},[375,1817,1818],{"href":272},"Sidebar component",[1814,1820,1821],{},[375,1822,75],{"href":76},[1814,1824,1825],{},[375,1826,358],{"href":359},[1828,1829,1830],"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 .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":403,"searchDepth":410,"depth":445,"links":1832},[1833,1837,1842,1843],{"id":388,"depth":445,"text":23,"children":1834},[1835,1836],{"id":471,"depth":545,"text":472},{"id":920,"depth":545,"text":921},{"id":1297,"depth":445,"text":1298,"children":1838},[1839,1840,1841],{"id":454,"depth":545,"text":1301},{"id":1410,"depth":545,"text":1411},{"id":1699,"depth":545,"text":1700},{"id":1795,"depth":445,"text":1796},{"id":1808,"depth":445,"text":1809},"Control one Sidebar instance or share responsive sidebar state.","md",null,{},{"icon":50},{"title":47,"description":1844},"kG0uGGf3LSlex4xeTol56wkF_iVJLnJG6tAO98Ws458",[1852,1854],{"title":42,"path":43,"stem":44,"description":1853,"icon":45,"children":-1},"Open dialogs, drawers, and custom overlays from Vue code.",{"title":52,"path":53,"stem":54,"description":1855,"icon":55,"children":-1},"Manage notification queues, actions, timers, and promise results.",1791960470760]