[{"data":1,"prerenderedAt":3484},["ShallowReactive",2],{"navigation":3,"-docs-composables-use-overlay":958,"-docs-composables-use-overlay-description":3474},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","\u002Fdocs","docs",[9,163,816,857],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,19,37,47,53,76,141],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"\u002Fdocs\u002Fgetting-started\u002Fmigration\u002Fv4","docs\u002F1.getting-started\u002F3.migration\u002F1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ffonts","docs\u002F1.getting-started\u002F6.integrations\u002F2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR\u002FRTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":140},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.","i-lucide-server",{"title":142,"framework":16,"category":16,"description":16,"path":143,"stem":144,"children":145,"page":36},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[146,151,157],{"title":147,"path":148,"stem":149,"framework":16,"category":16,"description":150,"icon":140},"MCP Server","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fmcp","docs\u002F1.getting-started\u002F7.ai\u002F1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fllms-txt","docs\u002F1.getting-started\u002F7.ai\u002F2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":158,"path":159,"stem":160,"framework":16,"category":16,"description":161,"icon":162},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.","i-lucide-sparkles",{"title":71,"framework":16,"category":16,"description":16,"icon":164,"path":165,"stem":166,"children":167,"page":36},"i-lucide-square-code","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[168,174,180,186,192,197,202,207,212,217,222,228,233,238,243,248,253,258,264,269,274,279,284,289,295,300,305,311,316,321,326,332,337,342,347,352,357,362,367,373,378,383,388,393,399,405,410,415,420,425,430,435,440,445,450,455,460,466,471,476,481,486,491,496,501,506,511,516,521,526,531,536,541,546,551,556,561,566,571,576,581,587,592,597,602,607,612,617,622,627,632,637,642,647,652,657,662,667,672,677,682,687,692,697,702,707,712,717,722,727,732,737,742,747,752,757,762,767,772,777,782,787,791,796,801,806,811],{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","A stacked set of collapsible panels.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","element","A callout to draw user's attention.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","Wraps your app to provide global configurations and more.",{"title":187,"path":188,"stem":189,"framework":16,"category":190,"description":191},"AuthForm","\u002Fdocs\u002Fcomponents\u002Fauth-form","docs\u002F2.components\u002Fauth-form","page","A customizable Form to create login, register or password reset forms.",{"title":193,"path":194,"stem":195,"framework":16,"category":178,"description":196},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element with fallback and Nuxt Image support.",{"title":198,"path":199,"stem":200,"framework":16,"category":178,"description":201},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Stack multiple avatars in a group.",{"title":203,"path":204,"stem":205,"framework":16,"category":178,"description":206},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short text to represent a status or a category.",{"title":208,"path":209,"stem":210,"framework":16,"category":178,"description":211},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Display a banner at the top of your website to inform users about important information.",{"title":213,"path":214,"stem":215,"framework":16,"category":190,"description":216},"BlogPost","\u002Fdocs\u002Fcomponents\u002Fblog-post","docs\u002F2.components\u002Fblog-post","A customizable article to display in a blog page.",{"title":218,"path":219,"stem":220,"framework":16,"category":190,"description":221},"BlogPosts","\u002Fdocs\u002Fcomponents\u002Fblog-posts","docs\u002F2.components\u002Fblog-posts","Display a list of blog posts in a responsive grid layout.",{"title":223,"path":224,"stem":225,"framework":16,"category":226,"description":227},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":229,"path":230,"stem":231,"framework":16,"category":178,"description":232},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button element that can act as a link or trigger an action.",{"title":234,"path":235,"stem":236,"framework":16,"category":178,"description":237},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":239,"path":240,"stem":241,"framework":16,"category":178,"description":242},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Display content in a card with a header, body and footer.",{"title":244,"path":245,"stem":246,"framework":16,"category":172,"description":247},"Carousel","\u002Fdocs\u002Fcomponents\u002Fcarousel","docs\u002F2.components\u002Fcarousel","A carousel with motion and swipe built using Embla.",{"title":249,"path":250,"stem":251,"framework":16,"category":190,"description":252},"ChangelogVersion","\u002Fdocs\u002Fcomponents\u002Fchangelog-version","docs\u002F2.components\u002Fchangelog-version","A customizable article to display in a changelog.",{"title":254,"path":255,"stem":256,"framework":16,"category":190,"description":257},"ChangelogVersions","\u002Fdocs\u002Fcomponents\u002Fchangelog-versions","docs\u002F2.components\u002Fchangelog-versions","Display a list of changelog versions in a timeline.",{"title":259,"path":260,"stem":261,"framework":16,"category":262,"description":263},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Build AI chat interfaces with streaming, reasoning, and tool calling.",{"title":265,"path":266,"stem":267,"framework":16,"category":262,"description":268},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","Display a chat message with icon, avatar, and actions.",{"title":270,"path":271,"stem":272,"framework":16,"category":262,"description":273},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":275,"path":276,"stem":277,"framework":16,"category":262,"description":278},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":280,"path":281,"stem":282,"framework":16,"category":262,"description":283},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":285,"path":286,"stem":287,"framework":16,"category":262,"description":288},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":290,"path":291,"stem":292,"framework":16,"category":262,"description":293,"badge":294},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","Display a collapsible AI reasoning or thinking process.","New",{"title":296,"path":297,"stem":298,"framework":16,"category":262,"description":299,"badge":294},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Display a text shimmer animation effect.",{"title":301,"path":302,"stem":303,"framework":16,"category":262,"description":304,"badge":294},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","Display a collapsible AI tool invocation status.",{"title":306,"path":307,"stem":308,"framework":16,"category":309,"description":310},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","An input element to toggle between checked and unchecked states.",{"title":312,"path":313,"stem":314,"framework":16,"category":309,"description":315},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","A set of checklist buttons to select multiple option from a list.",{"title":317,"path":318,"stem":319,"framework":16,"category":178,"description":320},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator of a numeric value or a state.",{"title":322,"path":323,"stem":324,"framework":16,"category":178,"description":325},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible element to toggle visibility of its content.",{"title":327,"path":328,"stem":329,"framework":16,"category":330,"description":331},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":333,"path":334,"stem":335,"framework":16,"category":330,"description":336},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A Button to switch between light and dark mode.",{"title":338,"path":339,"stem":340,"framework":16,"category":330,"description":341},"ColorModeImage","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-image","docs\u002F2.components\u002Fcolor-mode-image","An image element with a different source for light and dark mode.",{"title":343,"path":344,"stem":345,"framework":16,"category":330,"description":346},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark & light mode.",{"title":348,"path":349,"stem":350,"framework":16,"category":330,"description":351},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A switch to toggle between light and dark mode.",{"title":353,"path":354,"stem":355,"framework":16,"category":309,"description":356},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A component to select a color.",{"title":358,"path":359,"stem":360,"framework":16,"category":226,"description":361},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":363,"path":364,"stem":365,"framework":16,"category":184,"description":366},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A container lets you center and constrain the width of your content.",{"title":368,"path":369,"stem":370,"framework":28,"category":371,"description":372},"ContentNavigation","\u002Fdocs\u002Fcomponents\u002Fcontent-navigation","docs\u002F2.components\u002Fcontent-navigation","content","An accordion-style navigation component for organizing page links.",{"title":374,"path":375,"stem":376,"framework":28,"category":371,"description":377},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","A ready to use CommandPalette to add to your documentation.",{"title":379,"path":380,"stem":381,"framework":28,"category":371,"description":382},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":384,"path":385,"stem":386,"framework":28,"category":371,"description":387},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround","A pair of prev and next links to navigate between pages.",{"title":389,"path":390,"stem":391,"framework":28,"category":371,"description":392},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":394,"path":395,"stem":396,"framework":16,"category":397,"description":398},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":400,"path":401,"stem":402,"framework":16,"category":403,"description":404},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":406,"path":407,"stem":408,"framework":16,"category":403,"description":409},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navbar to display in a dashboard.",{"title":411,"path":412,"stem":413,"framework":16,"category":403,"description":414},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel to display in a dashboard.",{"title":416,"path":417,"stem":418,"framework":16,"category":403,"description":419},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":421,"path":422,"stem":423,"framework":16,"category":403,"description":424},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":426,"path":427,"stem":428,"framework":16,"category":403,"description":429},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":431,"path":432,"stem":433,"framework":16,"category":403,"description":434},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":436,"path":437,"stem":438,"framework":16,"category":403,"description":439},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":441,"path":442,"stem":443,"framework":16,"category":403,"description":444},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":446,"path":447,"stem":448,"framework":16,"category":403,"description":449},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":451,"path":452,"stem":453,"framework":16,"category":397,"description":454},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A drawer that smoothly slides in & out of the screen.",{"title":456,"path":457,"stem":458,"framework":16,"category":397,"description":459},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A menu to display actions when clicking on an element.",{"title":461,"path":462,"stem":463,"framework":16,"category":464,"description":465},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.",{"title":467,"path":468,"stem":469,"framework":16,"category":464,"description":470},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":472,"path":473,"stem":474,"framework":16,"category":464,"description":475},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":477,"path":478,"stem":479,"framework":16,"category":464,"description":480},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when typing a trigger character in the editor.",{"title":482,"path":483,"stem":484,"framework":16,"category":464,"description":485},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the \u002F character in the editor.",{"title":487,"path":488,"stem":489,"framework":16,"category":464,"description":490},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":492,"path":493,"stem":494,"framework":16,"category":172,"description":495},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","A component to display an empty state.",{"title":497,"path":498,"stem":499,"framework":16,"category":184,"description":500},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":502,"path":503,"stem":504,"framework":16,"category":178,"description":505},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Group multiple button-like elements together.",{"title":507,"path":508,"stem":509,"framework":16,"category":309,"description":510},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","An input element to upload files.",{"title":512,"path":513,"stem":514,"framework":16,"category":184,"description":515},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer component.",{"title":517,"path":518,"stem":519,"framework":16,"category":226,"description":520},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A list of links as columns to display in your Footer.",{"title":522,"path":523,"stem":524,"framework":16,"category":309,"description":525},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component with built-in validation and submission handling.",{"title":527,"path":528,"stem":529,"framework":16,"category":309,"description":530},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A wrapper for form elements that provides validation and error handling.",{"title":532,"path":533,"stem":534,"framework":16,"category":184,"description":535},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A responsive header component.",{"title":537,"path":538,"stem":539,"framework":16,"category":178,"description":540},"Icon","\u002Fdocs\u002Fcomponents\u002Ficon","docs\u002F2.components\u002Ficon","A component to display any icon from Iconify or another component.",{"title":542,"path":543,"stem":544,"framework":16,"category":309,"description":545},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input element to enter text.",{"title":547,"path":548,"stem":549,"framework":16,"category":309,"description":550},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","An input component for date selection.",{"title":552,"path":553,"stem":554,"framework":16,"category":309,"description":555},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An autocomplete input with real-time suggestions.",{"title":557,"path":558,"stem":559,"framework":16,"category":309,"description":560},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","An input for numerical values with a customizable range.",{"title":562,"path":563,"stem":564,"framework":16,"category":309,"description":565},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","An input element that displays interactive tags.",{"title":567,"path":568,"stem":569,"framework":16,"category":309,"description":570},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","An input for selecting a time.",{"title":572,"path":573,"stem":574,"framework":16,"category":178,"description":575},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element to display a keyboard key.",{"title":577,"path":578,"stem":579,"framework":16,"category":226,"description":580},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around \u003CNuxtLink> with extra props.",{"title":582,"path":583,"stem":584,"framework":16,"category":585,"description":586},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":588,"path":589,"stem":590,"framework":16,"category":184,"description":591},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main element that fills the available viewport height.",{"title":593,"path":594,"stem":595,"framework":16,"category":172,"description":596},"Marquee","\u002Fdocs\u002Fcomponents\u002Fmarquee","docs\u002F2.components\u002Fmarquee","A component to create infinite scrolling content.",{"title":598,"path":599,"stem":600,"framework":16,"category":397,"description":601},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A dialog window that can be used to display a message or request user input.",{"title":603,"path":604,"stem":605,"framework":16,"category":226,"description":606},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":608,"path":609,"stem":610,"framework":16,"category":190,"description":611},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","A grid layout for your pages with left and right columns.",{"title":613,"path":614,"stem":615,"framework":16,"category":190,"description":616},"PageAnchors","\u002Fdocs\u002Fcomponents\u002Fpage-anchors","docs\u002F2.components\u002Fpage-anchors","A list of anchors to be displayed in the page.",{"title":618,"path":619,"stem":620,"framework":16,"category":190,"description":621},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky aside to display your page navigation.",{"title":623,"path":624,"stem":625,"framework":16,"category":190,"description":626},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","The main content of your page.",{"title":628,"path":629,"stem":630,"framework":16,"category":190,"description":631},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component that displays a title, description and optional link.",{"title":633,"path":634,"stem":635,"framework":16,"category":190,"description":636},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":638,"path":639,"stem":640,"framework":16,"category":190,"description":641},"PageCTA","\u002Fdocs\u002Fcomponents\u002Fpage-cta","docs\u002F2.components\u002Fpage-cta","A call to action section to display in your pages.",{"title":643,"path":644,"stem":645,"framework":16,"category":190,"description":646},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A component to showcase key features of your application.",{"title":648,"path":649,"stem":650,"framework":16,"category":190,"description":651},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for displaying content in a flexible layout.",{"title":653,"path":654,"stem":655,"framework":16,"category":190,"description":656},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive header for your pages.",{"title":658,"path":659,"stem":660,"framework":16,"category":190,"description":661},"PageHero","\u002Fdocs\u002Fcomponents\u002Fpage-hero","docs\u002F2.components\u002Fpage-hero","A responsive hero for your pages.",{"title":663,"path":664,"stem":665,"framework":16,"category":190,"description":666},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to be displayed in the page.",{"title":668,"path":669,"stem":670,"framework":16,"category":190,"description":671},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for displaying content in a stacked format.",{"title":673,"path":674,"stem":675,"framework":16,"category":190,"description":676},"PageLogos","\u002Fdocs\u002Fcomponents\u002Fpage-logos","docs\u002F2.components\u002Fpage-logos","A list of logos or images to display on your pages.",{"title":678,"path":679,"stem":680,"framework":16,"category":190,"description":681},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section for your pages.",{"title":683,"path":684,"stem":685,"framework":16,"category":226,"description":686},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A list of buttons or links to navigate through pages.",{"title":688,"path":689,"stem":690,"framework":16,"category":309,"description":691},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","An input element to enter a pin.",{"title":693,"path":694,"stem":695,"framework":16,"category":397,"description":696},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal dialog that floats around a trigger element.",{"title":698,"path":699,"stem":700,"framework":16,"category":190,"description":701},"PricingPlan","\u002Fdocs\u002Fcomponents\u002Fpricing-plan","docs\u002F2.components\u002Fpricing-plan","A customizable pricing plan to display in a pricing page.",{"title":703,"path":704,"stem":705,"framework":16,"category":190,"description":706},"PricingPlans","\u002Fdocs\u002Fcomponents\u002Fpricing-plans","docs\u002F2.components\u002Fpricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":708,"path":709,"stem":710,"framework":16,"category":190,"description":711},"PricingTable","\u002Fdocs\u002Fcomponents\u002Fpricing-table","docs\u002F2.components\u002Fpricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":713,"path":714,"stem":715,"framework":16,"category":178,"description":716},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","An indicator showing the progress of a task.",{"title":718,"path":719,"stem":720,"framework":16,"category":309,"description":721},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A set of radio buttons to select a single option from a list.",{"title":723,"path":724,"stem":725,"framework":16,"category":172,"description":726},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scroll container with virtualization support.",{"title":728,"path":729,"stem":730,"framework":16,"category":309,"description":731},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A select element to choose from a list of options.",{"title":733,"path":734,"stem":735,"framework":16,"category":309,"description":736},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","An advanced searchable select element.",{"title":738,"path":739,"stem":740,"framework":16,"category":178,"description":741},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Separates content horizontally or vertically.",{"title":743,"path":744,"stem":745,"framework":16,"category":184,"description":746,"badge":294},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual variants.",{"title":748,"path":749,"stem":750,"framework":16,"category":178,"description":751},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A placeholder to show while content is loading.",{"title":753,"path":754,"stem":755,"framework":16,"category":397,"description":756},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":758,"path":759,"stem":760,"framework":16,"category":309,"description":761},"Slider","\u002Fdocs\u002Fcomponents\u002Fslider","docs\u002F2.components\u002Fslider","An input to select a numeric value within a range.",{"title":763,"path":764,"stem":765,"framework":16,"category":226,"description":766},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":768,"path":769,"stem":770,"framework":16,"category":309,"description":771},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch","A control that toggles between two states.",{"title":773,"path":774,"stem":775,"framework":16,"category":172,"description":776},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive table element to display data in rows and columns.",{"title":778,"path":779,"stem":780,"framework":16,"category":226,"description":781},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A set of tab panels that are displayed one at a time.",{"title":783,"path":784,"stem":785,"framework":16,"category":309,"description":786},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea element to input multi-line text.",{"title":54,"path":788,"stem":789,"framework":16,"category":184,"description":790},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component to theme child components.",{"title":792,"path":793,"stem":794,"framework":16,"category":172,"description":795},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":797,"path":798,"stem":799,"framework":16,"category":397,"description":800},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A succinct message to provide information or feedback to the user.",{"title":802,"path":803,"stem":804,"framework":16,"category":397,"description":805},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A popup that reveals information when hovering over an element.",{"title":807,"path":808,"stem":809,"framework":16,"category":172,"description":810},"Tree","\u002Fdocs\u002Fcomponents\u002Ftree","docs\u002F2.components\u002Ftree","A tree view component to display and interact with hierarchical data structures.",{"title":812,"path":813,"stem":814,"framework":16,"category":172,"description":815},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","Display user information with name, description and avatar.",{"title":817,"framework":16,"category":16,"description":16,"icon":818,"path":819,"stem":820,"children":821,"page":36},"Composables","i-lucide-square-function","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[822,827,832,837,842,847,852],{"title":823,"path":824,"stem":825,"framework":16,"category":16,"description":826},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale for your app.",{"title":828,"path":829,"stem":830,"framework":16,"category":16,"description":831},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":833,"path":834,"stem":835,"framework":16,"category":16,"description":836},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translations.",{"title":838,"path":839,"stem":840,"framework":16,"category":16,"description":841},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":843,"path":844,"stem":845,"framework":16,"category":16,"description":846},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays.",{"title":848,"path":849,"stem":850,"framework":16,"category":16,"description":851,"badge":294},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable to apply scroll shadow effects on any scrollable element.",{"title":853,"path":854,"stem":855,"framework":16,"category":16,"description":856},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable to display toast notifications in your app.",{"title":858,"path":859,"stem":860,"children":861,"framework":28,"category":16,"description":16,"icon":957},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[862,864,869,874,879,884,889,893,898,902,907,912,917,922,927,931,936,940,944,948,953],{"title":15,"path":859,"stem":860,"framework":28,"category":16,"description":863},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":865,"path":866,"stem":867,"framework":28,"category":16,"description":868},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":870,"path":871,"stem":872,"framework":28,"category":16,"description":873},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":875,"path":876,"stem":877,"framework":28,"category":16,"description":878},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":880,"path":881,"stem":882,"framework":28,"category":16,"description":883},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":169,"path":885,"stem":886,"framework":28,"category":887,"description":888},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Create expandable content sections for better information organization.",{"title":203,"path":890,"stem":891,"framework":28,"category":887,"description":892},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Display version numbers, status labels, and tags within your content.",{"title":894,"path":895,"stem":896,"framework":28,"category":887,"description":897},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Highlight important information with eye-catching colored boxes and icons.",{"title":239,"path":899,"stem":900,"framework":28,"category":887,"description":901},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Create highlighted content blocks with optional links and navigation.",{"title":903,"path":904,"stem":905,"framework":28,"category":887,"description":906},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":908,"path":909,"stem":910,"framework":28,"category":887,"description":911},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":913,"path":914,"stem":915,"framework":28,"category":887,"description":916},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":918,"path":919,"stem":920,"framework":28,"category":887,"description":921},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","Display code examples with a preview and their source for clearer documentation.",{"title":923,"path":924,"stem":925,"framework":28,"category":887,"description":926},"CodeTree","\u002Fdocs\u002Ftypography\u002Fcode-tree","docs\u002F4.typography\u002Fcode-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":322,"path":928,"stem":929,"framework":28,"category":887,"description":930},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":932,"path":933,"stem":934,"framework":28,"category":887,"description":935},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Document API parameters, props, and configuration options clearly.",{"title":502,"path":937,"stem":938,"framework":28,"category":887,"description":939},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Group related fields together for comprehensive API documentation.",{"title":537,"path":941,"stem":942,"framework":28,"category":887,"description":943},"\u002Fdocs\u002Ftypography\u002Ficon","docs\u002F4.typography\u002Ficon","Display icons from popular icon libraries to enhance your content.",{"title":572,"path":945,"stem":946,"framework":28,"category":887,"description":947},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":949,"path":950,"stem":951,"framework":28,"category":887,"description":952},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Transform headings into numbered step-by-step guides and tutorials.",{"title":778,"path":954,"stem":955,"framework":28,"category":887,"description":956},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":959,"title":843,"body":960,"category":16,"description":846,"extension":3470,"framework":16,"index":36,"links":16,"meta":3471,"navigation":16,"path":844,"seo":3472,"stem":845,"__hash__":3473},"docs\u002Fdocs\u002F3.composables\u002Fuse-overlay.md",{"type":961,"value":962,"toc":3445},"minimark",[963,968,983,1158,1172,1191,1195,1206,1211,1215,1251,1254,1259,1307,1310,1354,1359,1362,1375,1378,1407,1412,1415,1428,1432,1444,1447,1451,1487,1492,1495,1507,1511,1529,1534,1537,1543,1547,1567,1572,1575,1581,1584,1598,1601,1605,1608,1636,1646,1649,1655,1798,1801,1819,1822,1825,1831,1834,1860,1863,1866,1872,2074,2078,2082,2085,2459,2463,2473,2483,2830,2837,3048,3053,3271,3275,3279,3293,3300,3441],[964,965,967],"h2",{"id":966},"usage","Usage",[969,970,971,972,975,976,979,980,982],"p",{},"Use the auto-imported ",[973,974,843],"code",{}," composable to programmatically control ",[977,978,598],"a",{"href":599}," and ",[977,981,753],{"href":754}," components.",[984,985,989],"pre",{"className":986,"code":987,"language":34,"meta":988,"style":988},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample)\n\nasync function openModal() {\n  modal.open()\n}\n\u003C\u002Fscript>\n","",[973,990,991,1026,1055,1061,1079,1084,1106,1111,1129,1142,1148],{"__ignoreMap":988},[992,993,996,1000,1004,1008,1011,1014,1017,1021,1023],"span",{"class":994,"line":995},"line",1,[992,997,999],{"class":998},"sMK4o","\u003C",[992,1001,1003],{"class":1002},"swJcz","script",[992,1005,1007],{"class":1006},"spNyl"," setup",[992,1009,1010],{"class":1006}," lang",[992,1012,1013],{"class":998},"=",[992,1015,1016],{"class":998},"\"",[992,1018,1020],{"class":1019},"sfazB","ts",[992,1022,1016],{"class":998},[992,1024,1025],{"class":998},">\n",[992,1027,1029,1033,1036,1040,1043,1046,1049,1052],{"class":994,"line":1028},2,[992,1030,1032],{"class":1031},"s7zQu","import",[992,1034,1035],{"class":998}," {",[992,1037,1039],{"class":1038},"sTEyZ"," LazyModalExample",[992,1041,1042],{"class":998}," }",[992,1044,1045],{"class":1031}," from",[992,1047,1048],{"class":998}," '",[992,1050,1051],{"class":1019},"#components",[992,1053,1054],{"class":998},"'\n",[992,1056,1058],{"class":994,"line":1057},3,[992,1059,1060],{"emptyLinePlaceholder":21},"\n",[992,1062,1064,1067,1070,1072,1076],{"class":994,"line":1063},4,[992,1065,1066],{"class":1006},"const",[992,1068,1069],{"class":1038}," overlay ",[992,1071,1013],{"class":998},[992,1073,1075],{"class":1074},"s2Zo4"," useOverlay",[992,1077,1078],{"class":1038},"()\n",[992,1080,1082],{"class":994,"line":1081},5,[992,1083,1060],{"emptyLinePlaceholder":21},[992,1085,1087,1089,1092,1094,1097,1100,1103],{"class":994,"line":1086},6,[992,1088,1066],{"class":1006},[992,1090,1091],{"class":1038}," modal ",[992,1093,1013],{"class":998},[992,1095,1096],{"class":1038}," overlay",[992,1098,1099],{"class":998},".",[992,1101,1102],{"class":1074},"create",[992,1104,1105],{"class":1038},"(LazyModalExample)\n",[992,1107,1109],{"class":994,"line":1108},7,[992,1110,1060],{"emptyLinePlaceholder":21},[992,1112,1114,1117,1120,1123,1126],{"class":994,"line":1113},8,[992,1115,1116],{"class":1006},"async",[992,1118,1119],{"class":1006}," function",[992,1121,1122],{"class":1074}," openModal",[992,1124,1125],{"class":998},"()",[992,1127,1128],{"class":998}," {\n",[992,1130,1132,1135,1137,1140],{"class":994,"line":1131},9,[992,1133,1134],{"class":1038},"  modal",[992,1136,1099],{"class":998},[992,1138,1139],{"class":1074},"open",[992,1141,1078],{"class":1002},[992,1143,1145],{"class":994,"line":1144},10,[992,1146,1147],{"class":998},"}\n",[992,1149,1151,1154,1156],{"class":994,"line":1150},11,[992,1152,1153],{"class":998},"\u003C\u002F",[992,1155,1003],{"class":1002},[992,1157,1025],{"class":998},[1159,1160,1161],"ul",{},[1162,1163,1164,1165,1167,1168,1171],"li",{},"The ",[973,1166,843],{}," composable is created using ",[973,1169,1170],{},"createSharedComposable",", ensuring that the same overlay state is shared across your entire application.",[1173,1174,1175],"note",{},[969,1176,1177,1178,1181,1182,1190],{},"In order to return a value from the overlay, the ",[973,1179,1180],{},"overlay.open()"," can be awaited. In order for this to work, however, the ",[1183,1184,1185,1186,1189],"strong",{},"overlay component must emit a ",[973,1187,1188],{},"close"," event",". See example below for details.",[964,1192,1194],{"id":1193},"api","API",[969,1196,1197],{},[973,1198,1201,1204],{"className":1199,"language":1200,"style":988},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[992,1202,843],{"class":1203},"sBMFI",[992,1205,1125],{"class":998},[969,1207,1164,1208,1210],{},[973,1209,843],{}," composable provides methods to manage overlays globally. Each created overlay returns an instance with its own methods.",[1212,1213,1214],"h3",{"id":1102},"create()",[969,1216,1217],{},[973,1218,1219,1221,1224,1228,1231,1234,1237,1240,1242,1245,1248],{"className":1199,"language":1200,"style":988},[992,1220,1102],{"class":1203},[992,1222,1223],{"class":998},"(",[992,1225,1227],{"class":1226},"sHdIc","component",[992,1229,1230],{"class":998},":",[992,1232,1233],{"class":1203}," T",[992,1235,1236],{"class":998},",",[992,1238,1239],{"class":1226}," options",[992,1241,1230],{"class":998},[992,1243,1244],{"class":1203}," OverlayOptions",[992,1246,1247],{"class":998},"):",[992,1249,1250],{"class":1203}," OverlayInstance",[969,1252,1253],{},"Create an overlay, and return a factory instance.",[1255,1256,1258],"h4",{"id":1257},"parameters","Parameters",[1260,1261,1262,1270],"field-group",{},[1263,1264,1267],"field",{"name":1227,"type":1265,":required":1266},"T","true",[969,1268,1269],{},"The overlay component to render.",[1263,1271,1274,1277],{"name":1272,"type":1273},"options","OverlayOptions",[969,1275,1276],{},"Configuration options for the overlay.",[1278,1279,1280],"collapsible",{},[1260,1281,1282,1292,1299],{},[1263,1283,1286],{"name":1284,"type":1285},"defaultOpen","boolean",[969,1287,1288,1289,1099],{},"Open the overlay immediately after being created. Defaults to ",[973,1290,1291],{},"false",[1263,1293,1296],{"name":1294,"type":1295},"props","ComponentProps",[969,1297,1298],{},"An optional object of props to pass to the rendered component.",[1263,1300,1302],{"name":1301,"type":1285},"destroyOnClose",[969,1303,1304,1305,1099],{},"Removes the overlay from memory when closed. Defaults to ",[973,1306,1291],{},[1212,1308,1309],{"id":1139},"open()",[969,1311,1312],{},[973,1313,1314,1316,1318,1321,1323,1326,1328,1331,1334,1337,1339,1341,1344,1347,1349,1351],{"className":1199,"language":1200,"style":988},[992,1315,1139],{"class":1203},[992,1317,1223],{"class":998},[992,1319,1320],{"class":1226},"id",[992,1322,1230],{"class":998},[992,1324,1325],{"class":1203}," symbol",[992,1327,1236],{"class":998},[992,1329,1330],{"class":1226}," props",[992,1332,1333],{"class":998},"?:",[992,1335,1336],{"class":1203}," ComponentProps",[992,1338,999],{"class":998},[992,1340,1265],{"class":1203},[992,1342,1343],{"class":998},">):",[992,1345,1346],{"class":1203}," OpenedOverlay",[992,1348,999],{"class":998},[992,1350,1265],{"class":1203},[992,1352,1353],{"class":998},">",[969,1355,1356,1357,1099],{},"Open an overlay by its ",[973,1358,1320],{},[1255,1360,1258],{"id":1361},"parameters-1",[1260,1363,1364,1370],{},[1263,1365,1367],{"name":1320,"type":1366,":required":1266},"symbol",[969,1368,1369],{},"The identifier of the overlay.",[1263,1371,1373],{"name":1294,"type":1372},"ComponentProps\u003CT>",[969,1374,1298],{},[1212,1376,1377],{"id":1188},"close()",[969,1379,1380],{},[973,1381,1382,1384,1386,1388,1390,1392,1394,1397,1399,1402,1404],{"className":1199,"language":1200,"style":988},[992,1383,1188],{"class":1203},[992,1385,1223],{"class":998},[992,1387,1320],{"class":1226},[992,1389,1230],{"class":998},[992,1391,1325],{"class":1203},[992,1393,1236],{"class":998},[992,1395,1396],{"class":1226}," value",[992,1398,1333],{"class":998},[992,1400,1401],{"class":1203}," any",[992,1403,1247],{"class":998},[992,1405,1406],{"class":1203}," void",[969,1408,1409,1410,1099],{},"Close an overlay by its ",[973,1411,1320],{},[1255,1413,1258],{"id":1414},"parameters-2",[1260,1416,1417,1421],{},[1263,1418,1419],{"name":1320,"type":1366,":required":1266},[969,1420,1369],{},[1263,1422,1425],{"name":1423,"type":1424},"value","any",[969,1426,1427],{},"A value to resolve the overlay promise with.",[1212,1429,1431],{"id":1430},"closeall","closeAll()",[969,1433,1434],{},[973,1435,1436,1439,1442],{"className":1199,"language":1200,"style":988},[992,1437,1438],{"class":1203},"closeAll",[992,1440,1441],{"class":998},"():",[992,1443,1406],{"class":1203},[969,1445,1446],{},"Close all open overlays.",[1212,1448,1450],{"id":1449},"patch","patch()",[969,1452,1453],{},[973,1454,1455,1457,1459,1461,1463,1465,1467,1469,1471,1474,1476,1478,1480,1482,1485],{"className":1199,"language":1200,"style":988},[992,1456,1449],{"class":1203},[992,1458,1223],{"class":998},[992,1460,1320],{"class":1226},[992,1462,1230],{"class":998},[992,1464,1325],{"class":1203},[992,1466,1236],{"class":998},[992,1468,1330],{"class":1226},[992,1470,1230],{"class":998},[992,1472,1473],{"class":1203}," Partial",[992,1475,999],{"class":998},[992,1477,1295],{"class":1203},[992,1479,999],{"class":998},[992,1481,1265],{"class":1203},[992,1483,1484],{"class":998},">>):",[992,1486,1406],{"class":1203},[969,1488,1489,1490,1099],{},"Update an overlay by its ",[973,1491,1320],{},[1255,1493,1258],{"id":1494},"parameters-3",[1260,1496,1497,1501],{},[1263,1498,1499],{"name":1320,"type":1366,":required":1266},[969,1500,1369],{},[1263,1502,1504],{"name":1294,"type":1503,":required":1266},"Partial\u003CComponentProps\u003CT>>",[969,1505,1506],{},"An object of props to update on the rendered component.",[1212,1508,1510],{"id":1509},"unmount","unmount()",[969,1512,1513],{},[973,1514,1515,1517,1519,1521,1523,1525,1527],{"className":1199,"language":1200,"style":988},[992,1516,1509],{"class":1203},[992,1518,1223],{"class":998},[992,1520,1320],{"class":1226},[992,1522,1230],{"class":998},[992,1524,1325],{"class":1203},[992,1526,1247],{"class":998},[992,1528,1406],{"class":1203},[969,1530,1531,1532,1099],{},"Remove an overlay from the DOM by its ",[973,1533,1320],{},[1255,1535,1258],{"id":1536},"parameters-4",[1260,1538,1539],{},[1263,1540,1541],{"name":1320,"type":1366,":required":1266},[969,1542,1369],{},[1212,1544,1546],{"id":1545},"isopen","isOpen()",[969,1548,1549],{},[973,1550,1551,1554,1556,1558,1560,1562,1564],{"className":1199,"language":1200,"style":988},[992,1552,1553],{"class":1203},"isOpen",[992,1555,1223],{"class":998},[992,1557,1320],{"class":1226},[992,1559,1230],{"class":998},[992,1561,1325],{"class":1203},[992,1563,1247],{"class":998},[992,1565,1566],{"class":1203}," boolean",[969,1568,1569,1570,1099],{},"Check if an overlay is open using its ",[973,1571,1320],{},[1255,1573,1258],{"id":1574},"parameters-5",[1260,1576,1577],{},[1263,1578,1579],{"name":1320,"type":1366,":required":1266},[969,1580,1369],{},[1212,1582,1583],{"id":1583},"overlays",[969,1585,1586],{},[973,1587,1588,1590,1592,1595],{"className":1199,"language":1200,"style":988},[992,1589,1583],{"class":1203},[992,1591,1230],{"class":998},[992,1593,1594],{"class":1203}," Overlay",[992,1596,1597],{"class":1038},"[]",[969,1599,1600],{},"In-memory list of all overlays that were created.",[964,1602,1604],{"id":1603},"instance-api","Instance API",[1212,1606,1309],{"id":1607},"open-1",[969,1609,1610],{},[973,1611,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634],{"className":1199,"language":1200,"style":988},[992,1613,1139],{"class":1203},[992,1615,1223],{"class":998},[992,1617,1294],{"class":1226},[992,1619,1333],{"class":998},[992,1621,1336],{"class":1203},[992,1623,999],{"class":998},[992,1625,1265],{"class":1203},[992,1627,1343],{"class":998},[992,1629,1346],{"class":1203},[992,1631,999],{"class":998},[992,1633,1265],{"class":1203},[992,1635,1353],{"class":998},[969,1637,1638,1639,1642,1643,1645],{},"Open the overlay. Returns an ",[973,1640,1641],{},"OpenedOverlay"," which is a Promise that resolves with the value emitted by the ",[973,1644,1188],{}," event.",[1255,1647,1258],{"id":1648},"parameters-6",[1260,1650,1651],{},[1263,1652,1653],{"name":1294,"type":1372},[969,1654,1298],{},[984,1656,1658],{"className":986,"code":1657,"language":34,"meta":988,"style":988},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample)\n\nfunction openModal() {\n  modal.open({\n    title: 'Welcome'\n  })\n}\n\u003C\u002Fscript>\n",[973,1659,1660,1680,1698,1702,1714,1718,1734,1738,1749,1762,1776,1784,1789],{"__ignoreMap":988},[992,1661,1662,1664,1666,1668,1670,1672,1674,1676,1678],{"class":994,"line":995},[992,1663,999],{"class":998},[992,1665,1003],{"class":1002},[992,1667,1007],{"class":1006},[992,1669,1010],{"class":1006},[992,1671,1013],{"class":998},[992,1673,1016],{"class":998},[992,1675,1020],{"class":1019},[992,1677,1016],{"class":998},[992,1679,1025],{"class":998},[992,1681,1682,1684,1686,1688,1690,1692,1694,1696],{"class":994,"line":1028},[992,1683,1032],{"class":1031},[992,1685,1035],{"class":998},[992,1687,1039],{"class":1038},[992,1689,1042],{"class":998},[992,1691,1045],{"class":1031},[992,1693,1048],{"class":998},[992,1695,1051],{"class":1019},[992,1697,1054],{"class":998},[992,1699,1700],{"class":994,"line":1057},[992,1701,1060],{"emptyLinePlaceholder":21},[992,1703,1704,1706,1708,1710,1712],{"class":994,"line":1063},[992,1705,1066],{"class":1006},[992,1707,1069],{"class":1038},[992,1709,1013],{"class":998},[992,1711,1075],{"class":1074},[992,1713,1078],{"class":1038},[992,1715,1716],{"class":994,"line":1081},[992,1717,1060],{"emptyLinePlaceholder":21},[992,1719,1720,1722,1724,1726,1728,1730,1732],{"class":994,"line":1086},[992,1721,1066],{"class":1006},[992,1723,1091],{"class":1038},[992,1725,1013],{"class":998},[992,1727,1096],{"class":1038},[992,1729,1099],{"class":998},[992,1731,1102],{"class":1074},[992,1733,1105],{"class":1038},[992,1735,1736],{"class":994,"line":1108},[992,1737,1060],{"emptyLinePlaceholder":21},[992,1739,1740,1743,1745,1747],{"class":994,"line":1113},[992,1741,1742],{"class":1006},"function",[992,1744,1122],{"class":1074},[992,1746,1125],{"class":998},[992,1748,1128],{"class":998},[992,1750,1751,1753,1755,1757,1759],{"class":994,"line":1131},[992,1752,1134],{"class":1038},[992,1754,1099],{"class":998},[992,1756,1139],{"class":1074},[992,1758,1223],{"class":1002},[992,1760,1761],{"class":998},"{\n",[992,1763,1764,1767,1769,1771,1774],{"class":994,"line":1144},[992,1765,1766],{"class":1002},"    title",[992,1768,1230],{"class":998},[992,1770,1048],{"class":998},[992,1772,1773],{"class":1019},"Welcome",[992,1775,1054],{"class":998},[992,1777,1778,1781],{"class":994,"line":1150},[992,1779,1780],{"class":998},"  }",[992,1782,1783],{"class":1002},")\n",[992,1785,1787],{"class":994,"line":1786},12,[992,1788,1147],{"class":998},[992,1790,1792,1794,1796],{"class":994,"line":1791},13,[992,1793,1153],{"class":998},[992,1795,1003],{"class":1002},[992,1797,1025],{"class":998},[1212,1799,1377],{"id":1800},"close-1",[969,1802,1803],{},[973,1804,1805,1807,1809,1811,1813,1815,1817],{"className":1199,"language":1200,"style":988},[992,1806,1188],{"class":1203},[992,1808,1223],{"class":998},[992,1810,1423],{"class":1226},[992,1812,1333],{"class":998},[992,1814,1401],{"class":1203},[992,1816,1247],{"class":998},[992,1818,1406],{"class":1203},[969,1820,1821],{},"Close the overlay.",[1255,1823,1258],{"id":1824},"parameters-7",[1260,1826,1827],{},[1263,1828,1829],{"name":1423,"type":1424},[969,1830,1427],{},[1212,1832,1450],{"id":1833},"patch-1",[969,1835,1836],{},[973,1837,1838,1840,1842,1844,1846,1848,1850,1852,1854,1856,1858],{"className":1199,"language":1200,"style":988},[992,1839,1449],{"class":1203},[992,1841,1223],{"class":998},[992,1843,1294],{"class":1226},[992,1845,1230],{"class":998},[992,1847,1473],{"class":1203},[992,1849,999],{"class":998},[992,1851,1295],{"class":1203},[992,1853,999],{"class":998},[992,1855,1265],{"class":1203},[992,1857,1484],{"class":998},[992,1859,1406],{"class":1203},[969,1861,1862],{},"Update the props of the overlay.",[1255,1864,1258],{"id":1865},"parameters-8",[1260,1867,1868],{},[1263,1869,1870],{"name":1294,"type":1503,":required":1266},[969,1871,1506],{},[984,1873,1875],{"className":986,"code":1874,"language":34,"meta":988,"style":988},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample, {\n  props: { title: 'Welcome' }\n})\n\nfunction openModal() {\n  modal.open()\n}\n\nfunction updateModalTitle() {\n  modal.patch({ title: 'Updated Title' })\n}\n\u003C\u002Fscript>\n",[973,1876,1877,1897,1915,1919,1931,1935,1956,1980,1987,1991,2001,2011,2015,2019,2031,2060,2065],{"__ignoreMap":988},[992,1878,1879,1881,1883,1885,1887,1889,1891,1893,1895],{"class":994,"line":995},[992,1880,999],{"class":998},[992,1882,1003],{"class":1002},[992,1884,1007],{"class":1006},[992,1886,1010],{"class":1006},[992,1888,1013],{"class":998},[992,1890,1016],{"class":998},[992,1892,1020],{"class":1019},[992,1894,1016],{"class":998},[992,1896,1025],{"class":998},[992,1898,1899,1901,1903,1905,1907,1909,1911,1913],{"class":994,"line":1028},[992,1900,1032],{"class":1031},[992,1902,1035],{"class":998},[992,1904,1039],{"class":1038},[992,1906,1042],{"class":998},[992,1908,1045],{"class":1031},[992,1910,1048],{"class":998},[992,1912,1051],{"class":1019},[992,1914,1054],{"class":998},[992,1916,1917],{"class":994,"line":1057},[992,1918,1060],{"emptyLinePlaceholder":21},[992,1920,1921,1923,1925,1927,1929],{"class":994,"line":1063},[992,1922,1066],{"class":1006},[992,1924,1069],{"class":1038},[992,1926,1013],{"class":998},[992,1928,1075],{"class":1074},[992,1930,1078],{"class":1038},[992,1932,1933],{"class":994,"line":1081},[992,1934,1060],{"emptyLinePlaceholder":21},[992,1936,1937,1939,1941,1943,1945,1947,1949,1952,1954],{"class":994,"line":1086},[992,1938,1066],{"class":1006},[992,1940,1091],{"class":1038},[992,1942,1013],{"class":998},[992,1944,1096],{"class":1038},[992,1946,1099],{"class":998},[992,1948,1102],{"class":1074},[992,1950,1951],{"class":1038},"(LazyModalExample",[992,1953,1236],{"class":998},[992,1955,1128],{"class":998},[992,1957,1958,1961,1963,1965,1968,1970,1972,1974,1977],{"class":994,"line":1108},[992,1959,1960],{"class":1002},"  props",[992,1962,1230],{"class":998},[992,1964,1035],{"class":998},[992,1966,1967],{"class":1002}," title",[992,1969,1230],{"class":998},[992,1971,1048],{"class":998},[992,1973,1773],{"class":1019},[992,1975,1976],{"class":998},"'",[992,1978,1979],{"class":998}," }\n",[992,1981,1982,1985],{"class":994,"line":1113},[992,1983,1984],{"class":998},"}",[992,1986,1783],{"class":1038},[992,1988,1989],{"class":994,"line":1131},[992,1990,1060],{"emptyLinePlaceholder":21},[992,1992,1993,1995,1997,1999],{"class":994,"line":1144},[992,1994,1742],{"class":1006},[992,1996,1122],{"class":1074},[992,1998,1125],{"class":998},[992,2000,1128],{"class":998},[992,2002,2003,2005,2007,2009],{"class":994,"line":1150},[992,2004,1134],{"class":1038},[992,2006,1099],{"class":998},[992,2008,1139],{"class":1074},[992,2010,1078],{"class":1002},[992,2012,2013],{"class":994,"line":1786},[992,2014,1147],{"class":998},[992,2016,2017],{"class":994,"line":1791},[992,2018,1060],{"emptyLinePlaceholder":21},[992,2020,2022,2024,2027,2029],{"class":994,"line":2021},14,[992,2023,1742],{"class":1006},[992,2025,2026],{"class":1074}," updateModalTitle",[992,2028,1125],{"class":998},[992,2030,1128],{"class":998},[992,2032,2034,2036,2038,2040,2042,2045,2047,2049,2051,2054,2056,2058],{"class":994,"line":2033},15,[992,2035,1134],{"class":1038},[992,2037,1099],{"class":998},[992,2039,1449],{"class":1074},[992,2041,1223],{"class":1002},[992,2043,2044],{"class":998},"{",[992,2046,1967],{"class":1002},[992,2048,1230],{"class":998},[992,2050,1048],{"class":998},[992,2052,2053],{"class":1019},"Updated Title",[992,2055,1976],{"class":998},[992,2057,1042],{"class":998},[992,2059,1783],{"class":1002},[992,2061,2063],{"class":994,"line":2062},16,[992,2064,1147],{"class":998},[992,2066,2068,2070,2072],{"class":994,"line":2067},17,[992,2069,1153],{"class":998},[992,2071,1003],{"class":1002},[992,2073,1025],{"class":998},[964,2075,2077],{"id":2076},"examples","Examples",[1212,2079,2081],{"id":2080},"with-multiple-overlays","With multiple overlays",[969,2083,2084],{},"This example demonstrates how to manage multiple overlays and pass data between them:",[984,2086,2088],{"className":986,"code":2087,"language":34,"meta":988,"style":988},"\u003Cscript setup lang=\"ts\">\nimport { ModalA, ModalB, SlideoverA } from '#components'\n\nconst overlay = useOverlay()\n\n\u002F\u002F Create with default props\nconst modalA = overlay.create(ModalA, { props: { title: 'Welcome' } })\nconst modalB = overlay.create(ModalB)\nconst slideoverA = overlay.create(SlideoverA)\n\nconst openModalA = () => {\n  \u002F\u002F Open modalA, but override the title prop\n  modalA.open({ title: 'Hello' })\n}\n\nconst openModalB = async () => {\n  \u002F\u002F Open modalB, and wait for its result\n  const input = await modalB.open()\n\n  \u002F\u002F Pass the result from modalB to the slideover, and open it\n  slideoverA.open({ input })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUButton label=\"Open Modal\" @click=\"openModalA\" \u002F>\n\u003C\u002Ftemplate>\n",[973,2089,2090,2110,2139,2143,2155,2159,2165,2209,2227,2245,2249,2266,2271,2299,2303,2307,2325,2330,2354,2359,2365,2385,2390,2399,2404,2414,2450],{"__ignoreMap":988},[992,2091,2092,2094,2096,2098,2100,2102,2104,2106,2108],{"class":994,"line":995},[992,2093,999],{"class":998},[992,2095,1003],{"class":1002},[992,2097,1007],{"class":1006},[992,2099,1010],{"class":1006},[992,2101,1013],{"class":998},[992,2103,1016],{"class":998},[992,2105,1020],{"class":1019},[992,2107,1016],{"class":998},[992,2109,1025],{"class":998},[992,2111,2112,2114,2116,2119,2121,2124,2126,2129,2131,2133,2135,2137],{"class":994,"line":1028},[992,2113,1032],{"class":1031},[992,2115,1035],{"class":998},[992,2117,2118],{"class":1038}," ModalA",[992,2120,1236],{"class":998},[992,2122,2123],{"class":1038}," ModalB",[992,2125,1236],{"class":998},[992,2127,2128],{"class":1038}," SlideoverA",[992,2130,1042],{"class":998},[992,2132,1045],{"class":1031},[992,2134,1048],{"class":998},[992,2136,1051],{"class":1019},[992,2138,1054],{"class":998},[992,2140,2141],{"class":994,"line":1057},[992,2142,1060],{"emptyLinePlaceholder":21},[992,2144,2145,2147,2149,2151,2153],{"class":994,"line":1063},[992,2146,1066],{"class":1006},[992,2148,1069],{"class":1038},[992,2150,1013],{"class":998},[992,2152,1075],{"class":1074},[992,2154,1078],{"class":1038},[992,2156,2157],{"class":994,"line":1081},[992,2158,1060],{"emptyLinePlaceholder":21},[992,2160,2161],{"class":994,"line":1086},[992,2162,2164],{"class":2163},"sHwdD","\u002F\u002F Create with default props\n",[992,2166,2167,2169,2172,2174,2176,2178,2180,2183,2185,2187,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207],{"class":994,"line":1108},[992,2168,1066],{"class":1006},[992,2170,2171],{"class":1038}," modalA ",[992,2173,1013],{"class":998},[992,2175,1096],{"class":1038},[992,2177,1099],{"class":998},[992,2179,1102],{"class":1074},[992,2181,2182],{"class":1038},"(ModalA",[992,2184,1236],{"class":998},[992,2186,1035],{"class":998},[992,2188,1330],{"class":1002},[992,2190,1230],{"class":998},[992,2192,1035],{"class":998},[992,2194,1967],{"class":1002},[992,2196,1230],{"class":998},[992,2198,1048],{"class":998},[992,2200,1773],{"class":1019},[992,2202,1976],{"class":998},[992,2204,1042],{"class":998},[992,2206,1042],{"class":998},[992,2208,1783],{"class":1038},[992,2210,2211,2213,2216,2218,2220,2222,2224],{"class":994,"line":1113},[992,2212,1066],{"class":1006},[992,2214,2215],{"class":1038}," modalB ",[992,2217,1013],{"class":998},[992,2219,1096],{"class":1038},[992,2221,1099],{"class":998},[992,2223,1102],{"class":1074},[992,2225,2226],{"class":1038},"(ModalB)\n",[992,2228,2229,2231,2234,2236,2238,2240,2242],{"class":994,"line":1131},[992,2230,1066],{"class":1006},[992,2232,2233],{"class":1038}," slideoverA ",[992,2235,1013],{"class":998},[992,2237,1096],{"class":1038},[992,2239,1099],{"class":998},[992,2241,1102],{"class":1074},[992,2243,2244],{"class":1038},"(SlideoverA)\n",[992,2246,2247],{"class":994,"line":1144},[992,2248,1060],{"emptyLinePlaceholder":21},[992,2250,2251,2253,2256,2258,2261,2264],{"class":994,"line":1150},[992,2252,1066],{"class":1006},[992,2254,2255],{"class":1038}," openModalA ",[992,2257,1013],{"class":998},[992,2259,2260],{"class":998}," ()",[992,2262,2263],{"class":1006}," =>",[992,2265,1128],{"class":998},[992,2267,2268],{"class":994,"line":1786},[992,2269,2270],{"class":2163},"  \u002F\u002F Open modalA, but override the title prop\n",[992,2272,2273,2276,2278,2280,2282,2284,2286,2288,2290,2293,2295,2297],{"class":994,"line":1791},[992,2274,2275],{"class":1038},"  modalA",[992,2277,1099],{"class":998},[992,2279,1139],{"class":1074},[992,2281,1223],{"class":1002},[992,2283,2044],{"class":998},[992,2285,1967],{"class":1002},[992,2287,1230],{"class":998},[992,2289,1048],{"class":998},[992,2291,2292],{"class":1019},"Hello",[992,2294,1976],{"class":998},[992,2296,1042],{"class":998},[992,2298,1783],{"class":1002},[992,2300,2301],{"class":994,"line":2021},[992,2302,1147],{"class":998},[992,2304,2305],{"class":994,"line":2033},[992,2306,1060],{"emptyLinePlaceholder":21},[992,2308,2309,2311,2314,2316,2319,2321,2323],{"class":994,"line":2062},[992,2310,1066],{"class":1006},[992,2312,2313],{"class":1038}," openModalB ",[992,2315,1013],{"class":998},[992,2317,2318],{"class":1006}," async",[992,2320,2260],{"class":998},[992,2322,2263],{"class":1006},[992,2324,1128],{"class":998},[992,2326,2327],{"class":994,"line":2067},[992,2328,2329],{"class":2163},"  \u002F\u002F Open modalB, and wait for its result\n",[992,2331,2333,2336,2339,2342,2345,2348,2350,2352],{"class":994,"line":2332},18,[992,2334,2335],{"class":1006},"  const",[992,2337,2338],{"class":1038}," input",[992,2340,2341],{"class":998}," =",[992,2343,2344],{"class":1031}," await",[992,2346,2347],{"class":1038}," modalB",[992,2349,1099],{"class":998},[992,2351,1139],{"class":1074},[992,2353,1078],{"class":1002},[992,2355,2357],{"class":994,"line":2356},19,[992,2358,1060],{"emptyLinePlaceholder":21},[992,2360,2362],{"class":994,"line":2361},20,[992,2363,2364],{"class":2163},"  \u002F\u002F Pass the result from modalB to the slideover, and open it\n",[992,2366,2368,2371,2373,2375,2377,2379,2381,2383],{"class":994,"line":2367},21,[992,2369,2370],{"class":1038},"  slideoverA",[992,2372,1099],{"class":998},[992,2374,1139],{"class":1074},[992,2376,1223],{"class":1002},[992,2378,2044],{"class":998},[992,2380,2338],{"class":1038},[992,2382,1042],{"class":998},[992,2384,1783],{"class":1002},[992,2386,2388],{"class":994,"line":2387},22,[992,2389,1147],{"class":998},[992,2391,2393,2395,2397],{"class":994,"line":2392},23,[992,2394,1153],{"class":998},[992,2396,1003],{"class":1002},[992,2398,1025],{"class":998},[992,2400,2402],{"class":994,"line":2401},24,[992,2403,1060],{"emptyLinePlaceholder":21},[992,2405,2407,2409,2412],{"class":994,"line":2406},25,[992,2408,999],{"class":998},[992,2410,2411],{"class":1002},"template",[992,2413,1025],{"class":998},[992,2415,2417,2420,2423,2426,2428,2430,2433,2435,2438,2440,2442,2445,2447],{"class":994,"line":2416},26,[992,2418,2419],{"class":998},"  \u003C",[992,2421,2422],{"class":1002},"UButton",[992,2424,2425],{"class":1006}," label",[992,2427,1013],{"class":998},[992,2429,1016],{"class":998},[992,2431,2432],{"class":1019},"Open Modal",[992,2434,1016],{"class":998},[992,2436,2437],{"class":1006}," @click",[992,2439,1013],{"class":998},[992,2441,1016],{"class":998},[992,2443,2444],{"class":1019},"openModalA",[992,2446,1016],{"class":998},[992,2448,2449],{"class":998}," \u002F>\n",[992,2451,2453,2455,2457],{"class":994,"line":2452},27,[992,2454,1153],{"class":998},[992,2456,2411],{"class":1002},[992,2458,1025],{"class":998},[1212,2460,2462],{"id":2461},"confirm-dialog","Confirm dialog",[969,2464,2465,2466,2469,2470,2472],{},"This example demonstrates how to create a reusable confirm dialog pattern using a custom ",[973,2467,2468],{},"useConfirmDialog"," composable that wraps ",[973,2471,843],{},". This approach enables opinionated dialogs tailored to specific business requirements and design preferences.",[2474,2475,2476],"ol",{},[1162,2477,2478,2479,2482],{},"Create a ",[973,2480,2481],{},"ConfirmDialog"," component that emits a boolean value when closed:",[984,2484,2487],{"className":986,"code":2485,"filename":2486,"language":34,"meta":988,"style":988},"\u003Cscript lang=\"ts\" setup>\ninterface ConfirmDialogProps {\n  title?: string\n  description?: string\n}\n\ndefineProps\u003CConfirmDialogProps>()\n\nconst emits = defineEmits\u003C{\n  close: [value: boolean]\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUModal\n    :title=\"title\"\n    :description=\"description\"\n    :dismissible=\"false\"\n    :ui=\"{ footer: 'justify-end' }\"\n  >\n    \u003Ctemplate #footer>\n      \u003CUButton label=\"Cancel\" color=\"neutral\" variant=\"outline\" @click=\"emits('close', false)\" \u002F>\n      \u003CUButton label=\"Confirm\" color=\"neutral\" @click=\"emits('close', true)\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUModal>\n\u003C\u002Ftemplate>\n","components\u002FConfirmDialog.vue",[973,2488,2489,2509,2519,2529,2538,2542,2546,2560,2564,2579,2598,2605,2613,2617,2625,2632,2647,2661,2674,2688,2693,2708,2763,2803,2812,2822],{"__ignoreMap":988},[992,2490,2491,2493,2495,2497,2499,2501,2503,2505,2507],{"class":994,"line":995},[992,2492,999],{"class":998},[992,2494,1003],{"class":1002},[992,2496,1010],{"class":1006},[992,2498,1013],{"class":998},[992,2500,1016],{"class":998},[992,2502,1020],{"class":1019},[992,2504,1016],{"class":998},[992,2506,1007],{"class":1006},[992,2508,1025],{"class":998},[992,2510,2511,2514,2517],{"class":994,"line":1028},[992,2512,2513],{"class":1006},"interface",[992,2515,2516],{"class":1203}," ConfirmDialogProps",[992,2518,1128],{"class":998},[992,2520,2521,2524,2526],{"class":994,"line":1057},[992,2522,2523],{"class":1002},"  title",[992,2525,1333],{"class":998},[992,2527,2528],{"class":1203}," string\n",[992,2530,2531,2534,2536],{"class":994,"line":1063},[992,2532,2533],{"class":1002},"  description",[992,2535,1333],{"class":998},[992,2537,2528],{"class":1203},[992,2539,2540],{"class":994,"line":1081},[992,2541,1147],{"class":998},[992,2543,2544],{"class":994,"line":1086},[992,2545,1060],{"emptyLinePlaceholder":21},[992,2547,2548,2551,2553,2556,2558],{"class":994,"line":1108},[992,2549,2550],{"class":1074},"defineProps",[992,2552,999],{"class":998},[992,2554,2555],{"class":1203},"ConfirmDialogProps",[992,2557,1353],{"class":998},[992,2559,1078],{"class":1038},[992,2561,2562],{"class":994,"line":1113},[992,2563,1060],{"emptyLinePlaceholder":21},[992,2565,2566,2568,2571,2573,2576],{"class":994,"line":1131},[992,2567,1066],{"class":1006},[992,2569,2570],{"class":1038}," emits ",[992,2572,1013],{"class":998},[992,2574,2575],{"class":1074}," defineEmits",[992,2577,2578],{"class":998},"\u003C{\n",[992,2580,2581,2584,2586,2589,2591,2593,2595],{"class":994,"line":1144},[992,2582,2583],{"class":1002},"  close",[992,2585,1230],{"class":998},[992,2587,2588],{"class":1038}," [",[992,2590,1423],{"class":1203},[992,2592,1230],{"class":998},[992,2594,1566],{"class":1203},[992,2596,2597],{"class":1038},"]\n",[992,2599,2600,2603],{"class":994,"line":1150},[992,2601,2602],{"class":998},"}>",[992,2604,1078],{"class":1038},[992,2606,2607,2609,2611],{"class":994,"line":1786},[992,2608,1153],{"class":998},[992,2610,1003],{"class":1002},[992,2612,1025],{"class":998},[992,2614,2615],{"class":994,"line":1791},[992,2616,1060],{"emptyLinePlaceholder":21},[992,2618,2619,2621,2623],{"class":994,"line":2021},[992,2620,999],{"class":998},[992,2622,2411],{"class":1002},[992,2624,1025],{"class":998},[992,2626,2627,2629],{"class":994,"line":2033},[992,2628,2419],{"class":998},[992,2630,2631],{"class":1002},"UModal\n",[992,2633,2634,2637,2639,2641,2644],{"class":994,"line":2062},[992,2635,2636],{"class":1006},"    :title",[992,2638,1013],{"class":998},[992,2640,1016],{"class":998},[992,2642,2643],{"class":1019},"title",[992,2645,2646],{"class":998},"\"\n",[992,2648,2649,2652,2654,2656,2659],{"class":994,"line":2067},[992,2650,2651],{"class":1006},"    :description",[992,2653,1013],{"class":998},[992,2655,1016],{"class":998},[992,2657,2658],{"class":1019},"description",[992,2660,2646],{"class":998},[992,2662,2663,2666,2668,2670,2672],{"class":994,"line":2332},[992,2664,2665],{"class":1006},"    :dismissible",[992,2667,1013],{"class":998},[992,2669,1016],{"class":998},[992,2671,1291],{"class":1019},[992,2673,2646],{"class":998},[992,2675,2676,2679,2681,2683,2686],{"class":994,"line":2356},[992,2677,2678],{"class":1006},"    :ui",[992,2680,1013],{"class":998},[992,2682,1016],{"class":998},[992,2684,2685],{"class":1019},"{ footer: 'justify-end' }",[992,2687,2646],{"class":998},[992,2689,2690],{"class":994,"line":2361},[992,2691,2692],{"class":998},"  >\n",[992,2694,2695,2698,2700,2703,2706],{"class":994,"line":2367},[992,2696,2697],{"class":998},"    \u003C",[992,2699,2411],{"class":1002},[992,2701,2702],{"class":998}," #",[992,2704,2705],{"class":1006},"footer",[992,2707,1025],{"class":998},[992,2709,2710,2713,2715,2717,2719,2721,2724,2726,2729,2731,2733,2736,2738,2741,2743,2745,2748,2750,2752,2754,2756,2759,2761],{"class":994,"line":2387},[992,2711,2712],{"class":998},"      \u003C",[992,2714,2422],{"class":1002},[992,2716,2425],{"class":1006},[992,2718,1013],{"class":998},[992,2720,1016],{"class":998},[992,2722,2723],{"class":1019},"Cancel",[992,2725,1016],{"class":998},[992,2727,2728],{"class":1006}," color",[992,2730,1013],{"class":998},[992,2732,1016],{"class":998},[992,2734,2735],{"class":1019},"neutral",[992,2737,1016],{"class":998},[992,2739,2740],{"class":1006}," variant",[992,2742,1013],{"class":998},[992,2744,1016],{"class":998},[992,2746,2747],{"class":1019},"outline",[992,2749,1016],{"class":998},[992,2751,2437],{"class":1006},[992,2753,1013],{"class":998},[992,2755,1016],{"class":998},[992,2757,2758],{"class":1019},"emits('close', false)",[992,2760,1016],{"class":998},[992,2762,2449],{"class":998},[992,2764,2765,2767,2769,2771,2773,2775,2778,2780,2782,2784,2786,2788,2790,2792,2794,2796,2799,2801],{"class":994,"line":2392},[992,2766,2712],{"class":998},[992,2768,2422],{"class":1002},[992,2770,2425],{"class":1006},[992,2772,1013],{"class":998},[992,2774,1016],{"class":998},[992,2776,2777],{"class":1019},"Confirm",[992,2779,1016],{"class":998},[992,2781,2728],{"class":1006},[992,2783,1013],{"class":998},[992,2785,1016],{"class":998},[992,2787,2735],{"class":1019},[992,2789,1016],{"class":998},[992,2791,2437],{"class":1006},[992,2793,1013],{"class":998},[992,2795,1016],{"class":998},[992,2797,2798],{"class":1019},"emits('close', true)",[992,2800,1016],{"class":998},[992,2802,2449],{"class":998},[992,2804,2805,2808,2810],{"class":994,"line":2401},[992,2806,2807],{"class":998},"    \u003C\u002F",[992,2809,2411],{"class":1002},[992,2811,1025],{"class":998},[992,2813,2814,2817,2820],{"class":994,"line":2406},[992,2815,2816],{"class":998},"  \u003C\u002F",[992,2818,2819],{"class":1002},"UModal",[992,2821,1025],{"class":998},[992,2823,2824,2826,2828],{"class":994,"line":2416},[992,2825,1153],{"class":998},[992,2827,2411],{"class":1002},[992,2829,1025],{"class":998},[2474,2831,2832],{"start":1028},[1162,2833,2478,2834,2836],{},[973,2835,2468],{}," composable that returns a Promise:",[984,2838,2842],{"className":2839,"code":2840,"filename":2841,"language":1020,"meta":988,"style":988},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ConfirmDialog } from '#components'\n\nexport interface ConfirmDialogOptions {\n  title: string\n  description?: string\n}\n\nexport const useConfirmDialog = () => {\n  const overlay = useOverlay()\n\n  return (options: ConfirmDialogOptions): Promise\u003Cboolean> => {\n    const modal = overlay.create(ConfirmDialog, {\n      destroyOnClose: true,\n      props: options\n    })\n\n    return modal.open()\n  }\n}\n","composables\u002FuseConfirmDialog.ts",[973,2843,2844,2863,2867,2880,2888,2896,2900,2904,2922,2934,2938,2967,2991,3005,3015,3022,3026,3039,3044],{"__ignoreMap":988},[992,2845,2846,2848,2850,2853,2855,2857,2859,2861],{"class":994,"line":995},[992,2847,1032],{"class":1031},[992,2849,1035],{"class":998},[992,2851,2852],{"class":1038}," ConfirmDialog",[992,2854,1042],{"class":998},[992,2856,1045],{"class":1031},[992,2858,1048],{"class":998},[992,2860,1051],{"class":1019},[992,2862,1054],{"class":998},[992,2864,2865],{"class":994,"line":1028},[992,2866,1060],{"emptyLinePlaceholder":21},[992,2868,2869,2872,2875,2878],{"class":994,"line":1057},[992,2870,2871],{"class":1031},"export",[992,2873,2874],{"class":1006}," interface",[992,2876,2877],{"class":1203}," ConfirmDialogOptions",[992,2879,1128],{"class":998},[992,2881,2882,2884,2886],{"class":994,"line":1063},[992,2883,2523],{"class":1002},[992,2885,1230],{"class":998},[992,2887,2528],{"class":1203},[992,2889,2890,2892,2894],{"class":994,"line":1081},[992,2891,2533],{"class":1002},[992,2893,1333],{"class":998},[992,2895,2528],{"class":1203},[992,2897,2898],{"class":994,"line":1086},[992,2899,1147],{"class":998},[992,2901,2902],{"class":994,"line":1108},[992,2903,1060],{"emptyLinePlaceholder":21},[992,2905,2906,2908,2911,2914,2916,2918,2920],{"class":994,"line":1113},[992,2907,2871],{"class":1031},[992,2909,2910],{"class":1006}," const",[992,2912,2913],{"class":1038}," useConfirmDialog ",[992,2915,1013],{"class":998},[992,2917,2260],{"class":998},[992,2919,2263],{"class":1006},[992,2921,1128],{"class":998},[992,2923,2924,2926,2928,2930,2932],{"class":994,"line":1131},[992,2925,2335],{"class":1006},[992,2927,1096],{"class":1038},[992,2929,2341],{"class":998},[992,2931,1075],{"class":1074},[992,2933,1078],{"class":1002},[992,2935,2936],{"class":994,"line":1144},[992,2937,1060],{"emptyLinePlaceholder":21},[992,2939,2940,2943,2946,2948,2950,2952,2954,2957,2959,2961,2963,2965],{"class":994,"line":1150},[992,2941,2942],{"class":1031},"  return",[992,2944,2945],{"class":998}," (",[992,2947,1272],{"class":1226},[992,2949,1230],{"class":998},[992,2951,2877],{"class":1203},[992,2953,1247],{"class":998},[992,2955,2956],{"class":1203}," Promise",[992,2958,999],{"class":998},[992,2960,1285],{"class":1203},[992,2962,1353],{"class":998},[992,2964,2263],{"class":1006},[992,2966,1128],{"class":998},[992,2968,2969,2972,2975,2977,2979,2981,2983,2985,2987,2989],{"class":994,"line":1786},[992,2970,2971],{"class":1006},"    const",[992,2973,2974],{"class":1038}," modal",[992,2976,2341],{"class":998},[992,2978,1096],{"class":1038},[992,2980,1099],{"class":998},[992,2982,1102],{"class":1074},[992,2984,1223],{"class":1002},[992,2986,2481],{"class":1038},[992,2988,1236],{"class":998},[992,2990,1128],{"class":998},[992,2992,2993,2996,2998,3002],{"class":994,"line":1791},[992,2994,2995],{"class":1002},"      destroyOnClose",[992,2997,1230],{"class":998},[992,2999,3001],{"class":3000},"sfNiH"," true",[992,3003,3004],{"class":998},",\n",[992,3006,3007,3010,3012],{"class":994,"line":2021},[992,3008,3009],{"class":1002},"      props",[992,3011,1230],{"class":998},[992,3013,3014],{"class":1038}," options\n",[992,3016,3017,3020],{"class":994,"line":2033},[992,3018,3019],{"class":998},"    }",[992,3021,1783],{"class":1002},[992,3023,3024],{"class":994,"line":2062},[992,3025,1060],{"emptyLinePlaceholder":21},[992,3027,3028,3031,3033,3035,3037],{"class":994,"line":2067},[992,3029,3030],{"class":1031},"    return",[992,3032,2974],{"class":1038},[992,3034,1099],{"class":998},[992,3036,1139],{"class":1074},[992,3038,1078],{"class":1002},[992,3040,3041],{"class":994,"line":2332},[992,3042,3043],{"class":998},"  }\n",[992,3045,3046],{"class":994,"line":2356},[992,3047,1147],{"class":998},[2474,3049,3050],{"start":1057},[1162,3051,3052],{},"Use the composable in your components:",[984,3054,3056],{"className":986,"code":3055,"language":34,"meta":988,"style":988},"\u003Cscript setup lang=\"ts\">\nconst confirm = useConfirmDialog()\n\nconst handleDelete = async () => {\n  const confirmed = await confirm({\n    title: 'Delete item',\n    description: 'Are you sure you want to delete this item?'\n  })\n\n  if (confirmed) {\n    console.log('Item deleted')\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUButton label=\"Delete item\" @click=\"handleDelete\" \u002F>\n\u003C\u002Ftemplate>\n",[973,3057,3058,3078,3092,3096,3113,3131,3146,3160,3166,3170,3185,3206,3210,3214,3222,3226,3234,3263],{"__ignoreMap":988},[992,3059,3060,3062,3064,3066,3068,3070,3072,3074,3076],{"class":994,"line":995},[992,3061,999],{"class":998},[992,3063,1003],{"class":1002},[992,3065,1007],{"class":1006},[992,3067,1010],{"class":1006},[992,3069,1013],{"class":998},[992,3071,1016],{"class":998},[992,3073,1020],{"class":1019},[992,3075,1016],{"class":998},[992,3077,1025],{"class":998},[992,3079,3080,3082,3085,3087,3090],{"class":994,"line":1028},[992,3081,1066],{"class":1006},[992,3083,3084],{"class":1038}," confirm ",[992,3086,1013],{"class":998},[992,3088,3089],{"class":1074}," useConfirmDialog",[992,3091,1078],{"class":1038},[992,3093,3094],{"class":994,"line":1057},[992,3095,1060],{"emptyLinePlaceholder":21},[992,3097,3098,3100,3103,3105,3107,3109,3111],{"class":994,"line":1063},[992,3099,1066],{"class":1006},[992,3101,3102],{"class":1038}," handleDelete ",[992,3104,1013],{"class":998},[992,3106,2318],{"class":1006},[992,3108,2260],{"class":998},[992,3110,2263],{"class":1006},[992,3112,1128],{"class":998},[992,3114,3115,3117,3120,3122,3124,3127,3129],{"class":994,"line":1081},[992,3116,2335],{"class":1006},[992,3118,3119],{"class":1038}," confirmed",[992,3121,2341],{"class":998},[992,3123,2344],{"class":1031},[992,3125,3126],{"class":1074}," confirm",[992,3128,1223],{"class":1002},[992,3130,1761],{"class":998},[992,3132,3133,3135,3137,3139,3142,3144],{"class":994,"line":1086},[992,3134,1766],{"class":1002},[992,3136,1230],{"class":998},[992,3138,1048],{"class":998},[992,3140,3141],{"class":1019},"Delete item",[992,3143,1976],{"class":998},[992,3145,3004],{"class":998},[992,3147,3148,3151,3153,3155,3158],{"class":994,"line":1108},[992,3149,3150],{"class":1002},"    description",[992,3152,1230],{"class":998},[992,3154,1048],{"class":998},[992,3156,3157],{"class":1019},"Are you sure you want to delete this item?",[992,3159,1054],{"class":998},[992,3161,3162,3164],{"class":994,"line":1113},[992,3163,1780],{"class":998},[992,3165,1783],{"class":1002},[992,3167,3168],{"class":994,"line":1131},[992,3169,1060],{"emptyLinePlaceholder":21},[992,3171,3172,3175,3177,3180,3183],{"class":994,"line":1144},[992,3173,3174],{"class":1031},"  if",[992,3176,2945],{"class":1002},[992,3178,3179],{"class":1038},"confirmed",[992,3181,3182],{"class":1002},") ",[992,3184,1761],{"class":998},[992,3186,3187,3190,3192,3195,3197,3199,3202,3204],{"class":994,"line":1150},[992,3188,3189],{"class":1038},"    console",[992,3191,1099],{"class":998},[992,3193,3194],{"class":1074},"log",[992,3196,1223],{"class":1002},[992,3198,1976],{"class":998},[992,3200,3201],{"class":1019},"Item deleted",[992,3203,1976],{"class":998},[992,3205,1783],{"class":1002},[992,3207,3208],{"class":994,"line":1786},[992,3209,3043],{"class":998},[992,3211,3212],{"class":994,"line":1791},[992,3213,1147],{"class":998},[992,3215,3216,3218,3220],{"class":994,"line":2021},[992,3217,1153],{"class":998},[992,3219,1003],{"class":1002},[992,3221,1025],{"class":998},[992,3223,3224],{"class":994,"line":2033},[992,3225,1060],{"emptyLinePlaceholder":21},[992,3227,3228,3230,3232],{"class":994,"line":2062},[992,3229,999],{"class":998},[992,3231,2411],{"class":1002},[992,3233,1025],{"class":998},[992,3235,3236,3238,3240,3242,3244,3246,3248,3250,3252,3254,3256,3259,3261],{"class":994,"line":2067},[992,3237,2419],{"class":998},[992,3239,2422],{"class":1002},[992,3241,2425],{"class":1006},[992,3243,1013],{"class":998},[992,3245,1016],{"class":998},[992,3247,3141],{"class":1019},[992,3249,1016],{"class":998},[992,3251,2437],{"class":1006},[992,3253,1013],{"class":998},[992,3255,1016],{"class":998},[992,3257,3258],{"class":1019},"handleDelete",[992,3260,1016],{"class":998},[992,3262,2449],{"class":998},[992,3264,3265,3267,3269],{"class":994,"line":2332},[992,3266,1153],{"class":998},[992,3268,2411],{"class":1002},[992,3270,1025],{"class":998},[964,3272,3274],{"id":3273},"caveats","Caveats",[1212,3276,3278],{"id":3277},"provide-inject","Provide \u002F Inject",[969,3280,3281,3282,3285,3286,3289,3290,3292],{},"When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing ",[973,3283,3284],{},"UApp"," (typically ",[973,3287,3288],{},"app.vue"," or layout components). This is because overlays are mounted outside of the page context by the ",[973,3291,3284],{}," component.",[969,3294,3295,3296,3299],{},"As such, using ",[973,3297,3298],{},"provide()"," in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:",[984,3301,3303],{"className":986,"code":3302,"language":34,"meta":988,"style":988},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst providedValue = inject('valueProvidedInPage')\n\nconst modal = overlay.create(LazyModalExample, {\n  props: {\n    providedValue\n  }\n})\n\u003C\u002Fscript>\n",[973,3304,3305,3325,3343,3347,3359,3363,3386,3390,3410,3418,3423,3427,3433],{"__ignoreMap":988},[992,3306,3307,3309,3311,3313,3315,3317,3319,3321,3323],{"class":994,"line":995},[992,3308,999],{"class":998},[992,3310,1003],{"class":1002},[992,3312,1007],{"class":1006},[992,3314,1010],{"class":1006},[992,3316,1013],{"class":998},[992,3318,1016],{"class":998},[992,3320,1020],{"class":1019},[992,3322,1016],{"class":998},[992,3324,1025],{"class":998},[992,3326,3327,3329,3331,3333,3335,3337,3339,3341],{"class":994,"line":1028},[992,3328,1032],{"class":1031},[992,3330,1035],{"class":998},[992,3332,1039],{"class":1038},[992,3334,1042],{"class":998},[992,3336,1045],{"class":1031},[992,3338,1048],{"class":998},[992,3340,1051],{"class":1019},[992,3342,1054],{"class":998},[992,3344,3345],{"class":994,"line":1057},[992,3346,1060],{"emptyLinePlaceholder":21},[992,3348,3349,3351,3353,3355,3357],{"class":994,"line":1063},[992,3350,1066],{"class":1006},[992,3352,1069],{"class":1038},[992,3354,1013],{"class":998},[992,3356,1075],{"class":1074},[992,3358,1078],{"class":1038},[992,3360,3361],{"class":994,"line":1081},[992,3362,1060],{"emptyLinePlaceholder":21},[992,3364,3365,3367,3370,3372,3375,3377,3379,3382,3384],{"class":994,"line":1086},[992,3366,1066],{"class":1006},[992,3368,3369],{"class":1038}," providedValue ",[992,3371,1013],{"class":998},[992,3373,3374],{"class":1074}," inject",[992,3376,1223],{"class":1038},[992,3378,1976],{"class":998},[992,3380,3381],{"class":1019},"valueProvidedInPage",[992,3383,1976],{"class":998},[992,3385,1783],{"class":1038},[992,3387,3388],{"class":994,"line":1108},[992,3389,1060],{"emptyLinePlaceholder":21},[992,3391,3392,3394,3396,3398,3400,3402,3404,3406,3408],{"class":994,"line":1113},[992,3393,1066],{"class":1006},[992,3395,1091],{"class":1038},[992,3397,1013],{"class":998},[992,3399,1096],{"class":1038},[992,3401,1099],{"class":998},[992,3403,1102],{"class":1074},[992,3405,1951],{"class":1038},[992,3407,1236],{"class":998},[992,3409,1128],{"class":998},[992,3411,3412,3414,3416],{"class":994,"line":1131},[992,3413,1960],{"class":1002},[992,3415,1230],{"class":998},[992,3417,1128],{"class":998},[992,3419,3420],{"class":994,"line":1144},[992,3421,3422],{"class":1038},"    providedValue\n",[992,3424,3425],{"class":994,"line":1150},[992,3426,3043],{"class":998},[992,3428,3429,3431],{"class":994,"line":1786},[992,3430,1984],{"class":998},[992,3432,1783],{"class":1038},[992,3434,3435,3437,3439],{"class":994,"line":1791},[992,3436,1153],{"class":998},[992,3438,1003],{"class":1002},[992,3440,1025],{"class":998},[3442,3443,3444],"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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":988,"searchDepth":1028,"depth":1028,"links":3446},[3447,3448,3458,3463,3467],{"id":966,"depth":1028,"text":967},{"id":1193,"depth":1028,"text":1194,"children":3449},[3450,3451,3452,3453,3454,3455,3456,3457],{"id":1102,"depth":1057,"text":1214},{"id":1139,"depth":1057,"text":1309},{"id":1188,"depth":1057,"text":1377},{"id":1430,"depth":1057,"text":1431},{"id":1449,"depth":1057,"text":1450},{"id":1509,"depth":1057,"text":1510},{"id":1545,"depth":1057,"text":1546},{"id":1583,"depth":1057,"text":1583},{"id":1603,"depth":1028,"text":1604,"children":3459},[3460,3461,3462],{"id":1607,"depth":1057,"text":1309},{"id":1800,"depth":1057,"text":1377},{"id":1833,"depth":1057,"text":1450},{"id":2076,"depth":1028,"text":2077,"children":3464},[3465,3466],{"id":2080,"depth":1057,"text":2081},{"id":2461,"depth":1057,"text":2462},{"id":3273,"depth":1028,"text":3274,"children":3468},[3469],{"id":3277,"depth":1057,"text":3278},"md",{},{"title":843,"description":846},"2j4b-5YsJxA_8P56p_HMMV8DWyRIZaXgbFTVLOzIOP8",{"data":3475,"body":3476},{},{"type":3477,"children":3478},"root",[3479],{"type":178,"tag":969,"props":3480,"children":3481},{},[3482],{"type":3483,"value":846},"text",1774890236978]