[{"data":1,"prerenderedAt":1400},["ShallowReactive",2],{"$f3ar0etji4net0":3,"-docs-getting-started-migration-":911,"-docs-getting-started-migration--description":1390},[4],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Docs","\u002Fdocs","docs",[9,133,755,815],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16},"Get Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,18,35,40,45,65,118],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17},"Introduction",null,"Bitrix24 UI is a comprehensive Vue UI component library (Nuxt optional), offering 130+ accessible, Tailwind CSS components for building modern web applications.",{"title":19,"framework":16,"category":16,"description":16,"shadow":20,"path":21,"stem":22,"children":23,"page":34},"Installation",true,"\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation",[24,29],{"title":19,"path":25,"stem":26,"framework":27,"category":16,"description":28},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","docs\u002F1.getting-started\u002F2.installation\u002F1.nuxt","nuxt","Learn how to install and configure Bitrix24 UI in your Nuxt application.",{"title":19,"path":30,"stem":31,"framework":32,"category":16,"description":33},"\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fvue","docs\u002F1.getting-started\u002F2.installation\u002F2.vue","vue","Learn how to install and configure Bitrix24 UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":36,"path":37,"stem":38,"framework":16,"category":16,"description":39},"Migration","\u002Fdocs\u002Fgetting-started\u002Fmigration","docs\u002F1.getting-started\u002F3.migration","A comprehensive guide to migrate your application from Bitrix24 UI v1 to Bitrix24 UI v2.",{"title":41,"path":42,"stem":43,"framework":16,"category":16,"description":44},"Contribution","\u002Fdocs\u002Fgetting-started\u002Fcontribution","docs\u002F1.getting-started\u002F4.contribution","A detailed guide on how to contribute to Bitrix24 UI, including insights on project structure, development workflow, and best practices.",{"title":46,"path":47,"stem":48,"children":49,"page":34},"Theme","\u002Fdocs\u002Fgetting-started\u002Ftheme","docs\u002F1.getting-started\u002F5.theme",[50,55,60],{"title":51,"path":52,"stem":53,"framework":16,"category":16,"description":54},"Design System","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fdesign-system","docs\u002F1.getting-started\u002F5.theme\u002F1.design-system","Bitrix24 UI's design system uses Tailwind CSS for simple theming and easy customization.",{"title":56,"path":57,"stem":58,"framework":16,"category":16,"description":59},"CSS Variables","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcss-variables","docs\u002F1.getting-started\u002F5.theme\u002F2.css-variables","Bitrix24 UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.",{"title":61,"path":62,"stem":63,"framework":16,"category":16,"description":64},"Components","\u002Fdocs\u002Fgetting-started\u002Ftheme\u002Fcomponents","docs\u002F1.getting-started\u002F5.theme\u002F3.components","Learn how to customize Bitrix24 UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.",{"title":66,"framework":16,"category":16,"description":16,"path":67,"stem":68,"children":69,"page":34},"Integrations","\u002Fdocs\u002Fgetting-started\u002Fintegrations","docs\u002F1.getting-started\u002F6.integrations",[70,82,94,108,113],{"title":71,"framework":16,"category":16,"description":16,"shadow":20,"path":72,"stem":73,"children":74,"page":34},"Icons","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons",[75,79],{"title":71,"path":76,"stem":77,"framework":27,"category":16,"description":78},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F1.nuxt","Bitrix24 UI integrates with @bitrix24\u002Fb24icons to access over 1,400+ icons.",{"title":71,"path":80,"stem":81,"framework":32,"category":16,"description":78},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F1.icons\u002F2.vue",{"title":83,"framework":16,"category":16,"description":16,"shadow":20,"path":84,"stem":85,"children":86,"page":34},"Color Mode","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode",[87,91],{"title":83,"path":88,"stem":89,"framework":27,"category":16,"description":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F1.nuxt","Bitrix24 UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":83,"path":92,"stem":93,"framework":32,"category":16,"description":90},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcolor-mode\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F3.color-mode\u002F2.vue",{"title":95,"framework":16,"category":16,"description":16,"shadow":20,"path":96,"stem":97,"children":98,"page":34},"I18n","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n",[99,105],{"title":100,"path":101,"stem":102,"framework":27,"category":103,"description":104},"Internationalization (i18n)","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fnuxt","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F1.nuxt","integrations","Bitrix24 UI supports 20 locales and multi-directional (LTR\u002FRTL) internationalization.",{"title":100,"path":106,"stem":107,"framework":32,"category":16,"description":104},"\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fi18n\u002Fvue","docs\u002F1.getting-started\u002F6.integrations\u002F4.i18n\u002F2.vue",{"title":109,"path":110,"stem":111,"framework":27,"category":16,"description":112},"Content","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fcontent","docs\u002F1.getting-started\u002F6.integrations\u002F5.content","Bitrix24 UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.",{"title":114,"path":115,"stem":116,"framework":32,"category":16,"description":117},"SSR","\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Fssr","docs\u002F1.getting-started\u002F6.integrations\u002F6.ssr","Bitrix24 UI has first-party support for Vue SSR. This guide will help you have it fully enabled.",{"title":119,"framework":16,"category":16,"description":16,"path":120,"stem":121,"children":122,"page":34},"Agents","\u002Fdocs\u002Fgetting-started\u002Fai","docs\u002F1.getting-started\u002F7.ai",[123,128],{"title":124,"path":125,"stem":126,"framework":16,"category":16,"description":127},"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 Bitrix24 UI components, theming, and best practices.",{"title":129,"path":130,"stem":131,"framework":16,"category":16,"description":132},"Skills","\u002Fdocs\u002Fgetting-started\u002Fai\u002Fskills","docs\u002F1.getting-started\u002F7.ai\u002F3.skills","Install Bitrix24 UI skills to give AI coding agents deep knowledge of components, theming, and best practices.",{"title":61,"framework":16,"category":16,"description":16,"path":134,"stem":135,"children":136,"page":34},"\u002Fdocs\u002Fcomponents","docs\u002F2.components",[137,143,149,154,160,165,170,175,180,186,191,196,201,207,212,217,222,227,232,237,242,247,253,258,263,268,274,279,284,289,294,299,304,309,315,320,325,330,336,341,347,352,357,362,367,372,377,382,387,392,397,402,407,412,418,423,428,433,438,443,448,453,458,463,468,473,478,483,488,493,498,503,508,513,518,523,528,533,538,544,549,554,559,565,570,575,580,585,590,595,600,605,610,615,620,625,630,635,640,646,651,656,661,666,671,676,681,687,692,697,702,707,711,716,721,726,731,735,740,745,750],{"title":138,"path":139,"stem":140,"framework":16,"category":141,"description":142},"Accordion","\u002Fdocs\u002Fcomponents\u002Faccordion","docs\u002F2.components\u002Faccordion","data","This is a stacked set of collapsible panels",{"title":144,"path":145,"stem":146,"framework":16,"category":147,"description":148},"Advice","\u002Fdocs\u002Fcomponents\u002Fadvice","docs\u002F2.components\u002Fadvice","element","A couple of lines of text and an avatar",{"title":150,"path":151,"stem":152,"framework":16,"category":147,"description":153},"Alert","\u002Fdocs\u002Fcomponents\u002Falert","docs\u002F2.components\u002Falert","An alert designed to capture the user's attention.",{"title":155,"path":156,"stem":157,"framework":16,"category":158,"description":159},"App","\u002Fdocs\u002Fcomponents\u002Fapp","docs\u002F2.components\u002Fapp","layout","Encases your app to deliver global settings and additional features.",{"title":161,"path":162,"stem":163,"framework":16,"category":147,"description":164},"Avatar","\u002Fdocs\u002Fcomponents\u002Favatar","docs\u002F2.components\u002Favatar","An img element that includes fallback and supports Nuxt Image.",{"title":166,"path":167,"stem":168,"framework":16,"category":147,"description":169},"AvatarGroup","\u002Fdocs\u002Fcomponents\u002Favatar-group","docs\u002F2.components\u002Favatar-group","Pile multiple avatars into a single group.",{"title":171,"path":172,"stem":173,"framework":16,"category":147,"description":174},"Badge","\u002Fdocs\u002Fcomponents\u002Fbadge","docs\u002F2.components\u002Fbadge","A short descriptor for a status or category.",{"title":176,"path":177,"stem":178,"framework":16,"category":147,"description":179},"Banner","\u002Fdocs\u002Fcomponents\u002Fbanner","docs\u002F2.components\u002Fbanner","Top banner for important user messages.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"Breadcrumb","\u002Fdocs\u002Fcomponents\u002Fbreadcrumb","docs\u002F2.components\u002Fbreadcrumb","navigation","A breadcrumb navigation component.",{"title":187,"path":188,"stem":189,"framework":16,"category":147,"description":190},"Button","\u002Fdocs\u002Fcomponents\u002Fbutton","docs\u002F2.components\u002Fbutton","A button capable of linking or performing an action.",{"title":192,"path":193,"stem":194,"framework":16,"category":147,"description":195},"Calendar","\u002Fdocs\u002Fcomponents\u002Fcalendar","docs\u002F2.components\u002Fcalendar","A calendar tool for choosing individual dates, multiple dates, or date spans.",{"title":197,"path":198,"stem":199,"framework":16,"category":147,"description":200},"Card","\u002Fdocs\u002Fcomponents\u002Fcard","docs\u002F2.components\u002Fcard","Render the content within a card component comprising a header, body, and footer section.",{"title":202,"path":203,"stem":204,"framework":16,"category":205,"description":206},"Chat","\u002Fdocs\u002Fcomponents\u002Fchat","docs\u002F2.components\u002Fchat","chat","Develop AI-powered chat interfaces with streaming responses, reasoning capabilities, and tool calling.",{"title":208,"path":209,"stem":210,"framework":16,"category":205,"description":211},"ChatMessage","\u002Fdocs\u002Fcomponents\u002Fchat-message","docs\u002F2.components\u002Fchat-message","A chat message component with icon, avatar, and action buttons.",{"title":213,"path":214,"stem":215,"framework":16,"category":205,"description":216},"ChatMessages","\u002Fdocs\u002Fcomponents\u002Fchat-messages","docs\u002F2.components\u002Fchat-messages","A chat messages list component designed for seamless integration with the Vercel AI SDK.",{"title":218,"path":219,"stem":220,"framework":16,"category":205,"description":221},"ChatPalette","\u002Fdocs\u002Fcomponents\u002Fchat-palette","docs\u002F2.components\u002Fchat-palette","A chat interface component designed to be displayed in a modal overlay.",{"title":223,"path":224,"stem":225,"framework":16,"category":205,"description":226},"ChatPrompt","\u002Fdocs\u002Fcomponents\u002Fchat-prompt","docs\u002F2.components\u002Fchat-prompt","An enhanced Textarea component optimized for prompt submission in AI chat interfaces.",{"title":228,"path":229,"stem":230,"framework":16,"category":205,"description":231},"ChatPromptSubmit","\u002Fdocs\u002Fcomponents\u002Fchat-prompt-submit","docs\u002F2.components\u002Fchat-prompt-submit","A chat prompt submission button with automatic status handling.",{"title":233,"path":234,"stem":235,"framework":16,"category":205,"description":236},"ChatReasoning","\u002Fdocs\u002Fcomponents\u002Fchat-reasoning","docs\u002F2.components\u002Fchat-reasoning","An expandable panel that shows the AI's internal reasoning steps.",{"title":238,"path":239,"stem":240,"framework":16,"category":205,"description":241},"ChatShimmer","\u002Fdocs\u002Fcomponents\u002Fchat-shimmer","docs\u002F2.components\u002Fchat-shimmer","Apply a shimmer loading effect to text.",{"title":243,"path":244,"stem":245,"framework":16,"category":205,"description":246},"ChatTool","\u002Fdocs\u002Fcomponents\u002Fchat-tool","docs\u002F2.components\u002Fchat-tool","An expandable section that indicates whether an AI tool has been called and its execution state.",{"title":248,"path":249,"stem":250,"framework":16,"category":251,"description":252},"Checkbox","\u002Fdocs\u002Fcomponents\u002Fcheckbox","docs\u002F2.components\u002Fcheckbox","form","A toggle input for marking as checked or unchecked.",{"title":254,"path":255,"stem":256,"framework":16,"category":251,"description":257},"CheckboxGroup","\u002Fdocs\u002Fcomponents\u002Fcheckbox-group","docs\u002F2.components\u002Fcheckbox-group","Multi-select checklist using button controls.",{"title":259,"path":260,"stem":261,"framework":16,"category":147,"description":262},"Chip","\u002Fdocs\u002Fcomponents\u002Fchip","docs\u002F2.components\u002Fchip","An indicator that shows either a number or a state.",{"title":264,"path":265,"stem":266,"framework":16,"category":147,"description":267},"Collapsible","\u002Fdocs\u002Fcomponents\u002Fcollapsible","docs\u002F2.components\u002Fcollapsible","A collapsible component for showing or hiding its content.",{"title":269,"path":270,"stem":271,"framework":16,"category":272,"description":273},"ColorModeAvatar","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-avatar","docs\u002F2.components\u002Fcolor-mode-avatar","color-mode","An Avatar that automatically switches its image based on the current theme (light\u002Fdark).",{"title":275,"path":276,"stem":277,"framework":16,"category":272,"description":278},"ColorModeButton","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-button","docs\u002F2.components\u002Fcolor-mode-button","A button to toggle between light and dark themes.",{"title":280,"path":281,"stem":282,"framework":16,"category":272,"description":283},"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":285,"path":286,"stem":287,"framework":16,"category":272,"description":288},"ColorModeSelect","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-select","docs\u002F2.components\u002Fcolor-mode-select","A Select to switch between system, dark and light mode.",{"title":290,"path":291,"stem":292,"framework":16,"category":272,"description":293},"ColorModeSwitch","\u002Fdocs\u002Fcomponents\u002Fcolor-mode-switch","docs\u002F2.components\u002Fcolor-mode-switch","A Switch to toggle between light and dark mode.",{"title":295,"path":296,"stem":297,"framework":16,"category":251,"description":298},"ColorPicker","\u002Fdocs\u002Fcomponents\u002Fcolor-picker","docs\u002F2.components\u002Fcolor-picker","A color picker component.",{"title":300,"path":301,"stem":302,"framework":16,"category":184,"description":303},"CommandPalette","\u002Fdocs\u002Fcomponents\u002Fcommand-palette","docs\u002F2.components\u002Fcommand-palette","A searchable command palette powered by Fuse.js for fast, fuzzy text search.",{"title":305,"path":306,"stem":307,"framework":16,"category":158,"description":308},"Container","\u002Fdocs\u002Fcomponents\u002Fcontainer","docs\u002F2.components\u002Fcontainer","A box for centering and setting a maximum width for your content.",{"title":310,"path":311,"stem":312,"framework":27,"category":313,"description":314},"ContentSearch","\u002Fdocs\u002Fcomponents\u002Fcontent-search","docs\u002F2.components\u002Fcontent-search","content","A ready-to-use Command Palette component for your documentation.",{"title":316,"path":317,"stem":318,"framework":27,"category":313,"description":319},"ContentSearchButton","\u002Fdocs\u002Fcomponents\u002Fcontent-search-button","docs\u002F2.components\u002Fcontent-search-button","A pre-styled button that opens the content search modal.",{"title":321,"path":322,"stem":323,"framework":27,"category":313,"description":324},"ContentSurround","\u002Fdocs\u002Fcomponents\u002Fcontent-surround","docs\u002F2.components\u002Fcontent-surround"," A pair of \"Previous\" and \"Next\" buttons for sequential page navigation.",{"title":326,"path":327,"stem":328,"framework":27,"category":313,"description":329},"ContentToc","\u002Fdocs\u002Fcomponents\u002Fcontent-toc","docs\u002F2.components\u002Fcontent-toc","A sticky table of contents component with dynamic active section highlighting.",{"title":331,"path":332,"stem":333,"framework":16,"category":334,"description":335},"ContextMenu","\u002Fdocs\u002Fcomponents\u002Fcontext-menu","docs\u002F2.components\u002Fcontext-menu","overlay","A pop-up menu that appears upon right-clicking an element to present relevant actions.",{"title":337,"path":338,"stem":339,"framework":16,"category":147,"description":340},"Countdown","\u002Fdocs\u002Fcomponents\u002Fcountdown","docs\u002F2.components\u002Fcountdown","Countdown with options control.",{"title":342,"path":343,"stem":344,"framework":16,"category":345,"description":346},"DashboardGroup","\u002Fdocs\u002Fcomponents\u002Fdashboard-group","docs\u002F2.components\u002Fdashboard-group","dashboard","A fixed-layout dashboard container with sidebar state management and persistent UI state.",{"title":348,"path":349,"stem":350,"framework":16,"category":345,"description":351},"DashboardNavbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-navbar","docs\u002F2.components\u002Fdashboard-navbar","A responsive navigation bar for dashboards.",{"title":353,"path":354,"stem":355,"framework":16,"category":345,"description":356},"DashboardPanel","\u002Fdocs\u002Fcomponents\u002Fdashboard-panel","docs\u002F2.components\u002Fdashboard-panel","A resizable panel component for dashboards.",{"title":358,"path":359,"stem":360,"framework":16,"category":345,"description":361},"DashboardResizeHandle","\u002Fdocs\u002Fcomponents\u002Fdashboard-resize-handle","docs\u002F2.components\u002Fdashboard-resize-handle","A resize handle for sidebars or panels.",{"title":363,"path":364,"stem":365,"framework":16,"category":345,"description":366},"DashboardSearch","\u002Fdocs\u002Fcomponents\u002Fdashboard-search","docs\u002F2.components\u002Fdashboard-search","A ready-to-use CommandPalette component for your dashboard.",{"title":368,"path":369,"stem":370,"framework":16,"category":345,"description":371},"DashboardSearchButton","\u002Fdocs\u002Fcomponents\u002Fdashboard-search-button","docs\u002F2.components\u002Fdashboard-search-button","A pre-styled button that opens the DashboardSearch modal.",{"title":373,"path":374,"stem":375,"framework":16,"category":345,"description":376},"DashboardSidebar","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar","docs\u002F2.components\u002Fdashboard-sidebar","A resizable and collapsible sidebar component for dashboards.",{"title":378,"path":379,"stem":380,"framework":16,"category":345,"description":381},"DashboardSidebarCollapse","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-collapse","docs\u002F2.components\u002Fdashboard-sidebar-collapse","A desktop toggle button that collapses the sidebar to provide more space for content.",{"title":383,"path":384,"stem":385,"framework":16,"category":345,"description":386},"DashboardSidebarToggle","\u002Fdocs\u002Fcomponents\u002Fdashboard-sidebar-toggle","docs\u002F2.components\u002Fdashboard-sidebar-toggle","A mobile menu button that shows or hides the sidebar navigation.",{"title":388,"path":389,"stem":390,"framework":16,"category":345,"description":391},"DashboardToolbar","\u002Fdocs\u002Fcomponents\u002Fdashboard-toolbar","docs\u002F2.components\u002Fdashboard-toolbar","A secondary action bar positioned beneath the main navigation in dashboards.",{"title":393,"path":394,"stem":395,"framework":16,"category":251,"description":396},"DateTimePicker","\u002Fdocs\u002Fcomponents\u002Fdate-time-picker","docs\u002F2.components\u002Fdate-time-picker","A date and time selector: a calendar that hands over to an hour and minute grid, with presets beside it.",{"title":398,"path":399,"stem":400,"framework":16,"category":141,"description":401},"DescriptionList","\u002Fdocs\u002Fcomponents\u002Fdescription-list","docs\u002F2.components\u002Fdescription-list","For instances requiring the conversion of a table row into its own table to enhance page completeness.",{"title":403,"path":404,"stem":405,"framework":16,"category":334,"description":406},"Drawer","\u002Fdocs\u002Fcomponents\u002Fdrawer","docs\u002F2.components\u002Fdrawer","A toggleable drawer with fluid enter\u002Fexit transitions.",{"title":408,"path":409,"stem":410,"framework":16,"category":334,"description":411},"DropdownMenu","\u002Fdocs\u002Fcomponents\u002Fdropdown-menu","docs\u002F2.components\u002Fdropdown-menu","A contextual menu for actions triggered by clicking an element.",{"title":413,"path":414,"stem":415,"framework":16,"category":416,"description":417},"Editor","\u002Fdocs\u002Fcomponents\u002Feditor","docs\u002F2.components\u002Feditor","editor","A rich text editor built on TipTap supporting markdown, HTML, and JSON content formats.",{"title":419,"path":420,"stem":421,"framework":16,"category":416,"description":422},"EditorDragHandle","\u002Fdocs\u002Fcomponents\u002Feditor-drag-handle","docs\u002F2.components\u002Feditor-drag-handle","A draggable handle component for reordering and selecting editor blocks.",{"title":424,"path":425,"stem":426,"framework":16,"category":416,"description":427},"EditorEmojiMenu","\u002Fdocs\u002Fcomponents\u002Feditor-emoji-menu","docs\u002F2.components\u002Feditor-emoji-menu","An emoji suggestion menu that automatically appears upon typing the colon : character in the editor.",{"title":429,"path":430,"stem":431,"framework":16,"category":416,"description":432},"EditorMentionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-mention-menu","docs\u002F2.components\u002Feditor-mention-menu","A mention menu that displays user suggestions when a trigger character is typed in the editor.",{"title":434,"path":435,"stem":436,"framework":16,"category":416,"description":437},"EditorSuggestionMenu","\u002Fdocs\u002Fcomponents\u002Feditor-suggestion-menu","docs\u002F2.components\u002Feditor-suggestion-menu","A slash command menu that displays formatting and action suggestions when typing \u002F.",{"title":439,"path":440,"stem":441,"framework":16,"category":416,"description":442},"EditorToolbar","\u002Fdocs\u002Fcomponents\u002Feditor-toolbar","docs\u002F2.components\u002Feditor-toolbar","A customizable toolbar for editor actions with multiple display modes: fixed, bubble, or floating.",{"title":444,"path":445,"stem":446,"framework":16,"category":141,"description":447},"Empty","\u002Fdocs\u002Fcomponents\u002Fempty","docs\u002F2.components\u002Fempty","An empty state component.",{"title":449,"path":450,"stem":451,"framework":16,"category":158,"description":452},"Error","\u002Fdocs\u002Fcomponents\u002Ferror","docs\u002F2.components\u002Ferror","A pre-built error component with NuxtError support.",{"title":454,"path":455,"stem":456,"framework":16,"category":147,"description":457},"FieldGroup","\u002Fdocs\u002Fcomponents\u002Ffield-group","docs\u002F2.components\u002Ffield-group","Organize several button-like elements into a group.",{"title":459,"path":460,"stem":461,"framework":16,"category":251,"description":462},"FileUpload","\u002Fdocs\u002Fcomponents\u002Ffile-upload","docs\u002F2.components\u002Ffile-upload","A file upload input component.",{"title":464,"path":465,"stem":466,"framework":16,"category":158,"description":467},"Footer","\u002Fdocs\u002Fcomponents\u002Ffooter","docs\u002F2.components\u002Ffooter","A responsive footer for displaying copyright, links, and additional information.",{"title":469,"path":470,"stem":471,"framework":16,"category":184,"description":472},"FooterColumns","\u002Fdocs\u002Fcomponents\u002Ffooter-columns","docs\u002F2.components\u002Ffooter-columns","A set of link columns to organize navigation and information in the footer.",{"title":474,"path":475,"stem":476,"framework":16,"category":251,"description":477},"Form","\u002Fdocs\u002Fcomponents\u002Fform","docs\u002F2.components\u002Fform","A form component designed for validation and handling submissions.",{"title":479,"path":480,"stem":481,"framework":16,"category":251,"description":482},"FormField","\u002Fdocs\u002Fcomponents\u002Fform-field","docs\u002F2.components\u002Fform-field","A container for form elements with built-in validation and error management.",{"title":484,"path":485,"stem":486,"framework":16,"category":158,"description":487},"Header","\u002Fdocs\u002Fcomponents\u002Fheader","docs\u002F2.components\u002Fheader","A header that adapts its structure and content to different screen sizes.",{"title":489,"path":490,"stem":491,"framework":16,"category":251,"description":492},"Input","\u002Fdocs\u002Fcomponents\u002Finput","docs\u002F2.components\u002Finput","An input box designed for text entry.",{"title":494,"path":495,"stem":496,"framework":16,"category":251,"description":497},"InputDate","\u002Fdocs\u002Fcomponents\u002Finput-date","docs\u002F2.components\u002Finput-date","A date selection input field.",{"title":499,"path":500,"stem":501,"framework":16,"category":251,"description":502},"InputMenu","\u002Fdocs\u002Fcomponents\u002Finput-menu","docs\u002F2.components\u002Finput-menu","An input field with live autocomplete suggestions.",{"title":504,"path":505,"stem":506,"framework":16,"category":251,"description":507},"InputNumber","\u002Fdocs\u002Fcomponents\u002Finput-number","docs\u002F2.components\u002Finput-number","Provide numerical input with a flexible range setting.",{"title":509,"path":510,"stem":511,"framework":16,"category":251,"description":512},"InputRating","\u002Fdocs\u002Fcomponents\u002Finput-rating","docs\u002F2.components\u002Finput-rating","A component to display and collect ratings from users.",{"title":514,"path":515,"stem":516,"framework":16,"category":251,"description":517},"InputTags","\u002Fdocs\u002Fcomponents\u002Finput-tags","docs\u002F2.components\u002Finput-tags","A tags input component with interactive tag elements.",{"title":519,"path":520,"stem":521,"framework":16,"category":251,"description":522},"InputTime","\u002Fdocs\u002Fcomponents\u002Finput-time","docs\u002F2.components\u002Finput-time","A time selection input field.",{"title":524,"path":525,"stem":526,"framework":16,"category":147,"description":527},"Kbd","\u002Fdocs\u002Fcomponents\u002Fkbd","docs\u002F2.components\u002Fkbd","A kbd element for indicating a keyboard input.",{"title":529,"path":530,"stem":531,"framework":16,"category":184,"description":532},"Link","\u002Fdocs\u002Fcomponents\u002Flink","docs\u002F2.components\u002Flink","A wrapper around NuxtLink with extra props.",{"title":534,"path":535,"stem":536,"framework":16,"category":251,"description":537},"Listbox","\u002Fdocs\u002Fcomponents\u002Flistbox","docs\u002F2.components\u002Flistbox","A selectable list component with search, virtualization, and rich item rendering capabilities.",{"title":539,"path":540,"stem":541,"framework":16,"category":542,"description":543},"LocaleSelect","\u002Fdocs\u002Fcomponents\u002Flocale-select","docs\u002F2.components\u002Flocale-select","i18n","A Select to switch between locales.",{"title":545,"path":546,"stem":547,"framework":16,"category":158,"description":548},"Main","\u002Fdocs\u002Fcomponents\u002Fmain","docs\u002F2.components\u002Fmain","A main content element that expands to fill the full viewport height.",{"title":550,"path":551,"stem":552,"framework":16,"category":334,"description":553},"Modal","\u002Fdocs\u002Fcomponents\u002Fmodal","docs\u002F2.components\u002Fmodal","A popup window for showing messages or gathering user input.",{"title":555,"path":556,"stem":557,"framework":16,"category":184,"description":558},"NavigationMenu","\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","docs\u002F2.components\u002Fnavigation-menu","A link list that can be arranged in horizontal or vertical orientation.",{"title":560,"path":561,"stem":562,"framework":16,"category":563,"description":564},"Page","\u002Fdocs\u002Fcomponents\u002Fpage","docs\u002F2.components\u002Fpage","page","A page grid divided into three columns: left sidebar, main content area, and right sidebar.",{"title":566,"path":567,"stem":568,"framework":16,"category":563,"description":569},"PageAside","\u002Fdocs\u002Fcomponents\u002Fpage-aside","docs\u002F2.components\u002Fpage-aside","A sticky navigation aside.",{"title":571,"path":572,"stem":573,"framework":16,"category":563,"description":574},"PageBody","\u002Fdocs\u002Fcomponents\u002Fpage-body","docs\u002F2.components\u002Fpage-body","A container for the main content of the page.",{"title":576,"path":577,"stem":578,"framework":16,"category":563,"description":579},"PageCard","\u002Fdocs\u002Fcomponents\u002Fpage-card","docs\u002F2.components\u002Fpage-card","A pre-styled card component featuring a title, description, and optional link.",{"title":581,"path":582,"stem":583,"framework":16,"category":563,"description":584},"PageCardGroup","\u002Fdocs\u002Fcomponents\u002Fpage-card-group","docs\u002F2.components\u002Fpage-card-group","A selectable group of PageCard items. Single or multi-select with optional grouping by category.",{"title":586,"path":587,"stem":588,"framework":16,"category":563,"description":589},"PageColumns","\u002Fdocs\u002Fcomponents\u002Fpage-columns","docs\u002F2.components\u002Fpage-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":591,"path":592,"stem":593,"framework":16,"category":563,"description":594},"PageFeature","\u002Fdocs\u002Fcomponents\u002Fpage-feature","docs\u002F2.components\u002Fpage-feature","A feature showcase component to present your app",{"title":596,"path":597,"stem":598,"framework":16,"category":563,"description":599},"PageGrid","\u002Fdocs\u002Fcomponents\u002Fpage-grid","docs\u002F2.components\u002Fpage-grid","A responsive grid system for creating flexible content layouts.",{"title":601,"path":602,"stem":603,"framework":16,"category":563,"description":604},"PageHeader","\u002Fdocs\u002Fcomponents\u002Fpage-header","docs\u002F2.components\u002Fpage-header","A responsive page header.",{"title":606,"path":607,"stem":608,"framework":16,"category":563,"description":609},"PageLinks","\u002Fdocs\u002Fcomponents\u002Fpage-links","docs\u002F2.components\u002Fpage-links","A list of links to display on the page.",{"title":611,"path":612,"stem":613,"framework":16,"category":563,"description":614},"PageList","\u002Fdocs\u002Fcomponents\u002Fpage-list","docs\u002F2.components\u002Fpage-list","A vertical list layout for stacking content items.",{"title":616,"path":617,"stem":618,"framework":16,"category":563,"description":619},"PageSection","\u002Fdocs\u002Fcomponents\u002Fpage-section","docs\u002F2.components\u002Fpage-section","A responsive section.",{"title":621,"path":622,"stem":623,"framework":16,"category":184,"description":624},"Pagination","\u002Fdocs\u002Fcomponents\u002Fpagination","docs\u002F2.components\u002Fpagination","A navigation component with buttons or links for pagination.",{"title":626,"path":627,"stem":628,"framework":16,"category":251,"description":629},"PinInput","\u002Fdocs\u002Fcomponents\u002Fpin-input","docs\u002F2.components\u002Fpin-input","A PIN code input component.",{"title":631,"path":632,"stem":633,"framework":16,"category":334,"description":634},"Popover","\u002Fdocs\u002Fcomponents\u002Fpopover","docs\u002F2.components\u002Fpopover","A non-modal popup window for showing messages or gathering user input.",{"title":636,"path":637,"stem":638,"framework":16,"category":147,"description":639},"Progress","\u002Fdocs\u002Fcomponents\u002Fprogress","docs\u002F2.components\u002Fprogress","A progress bar displaying task completion status.",{"title":641,"path":642,"stem":643,"framework":16,"category":147,"description":644,"badge":645},"ProgressGroup","\u002Fdocs\u002Fcomponents\u002Fprogress-group","docs\u002F2.components\u002Fprogress-group","One progress bar carrying several values at once, each drawn as its own coloured part.","New",{"title":647,"path":648,"stem":649,"framework":16,"category":251,"description":650},"RadioGroup","\u002Fdocs\u002Fcomponents\u002Fradio-group","docs\u002F2.components\u002Fradio-group","A collection of radio buttons to pick a single choice from several options.",{"title":652,"path":653,"stem":654,"framework":16,"category":251,"description":655},"Range","\u002Fdocs\u002Fcomponents\u002Frange","docs\u002F2.components\u002Frange","A control for selecting a numeric value within a specified range.",{"title":657,"path":658,"stem":659,"framework":16,"category":141,"description":660},"ScrollArea","\u002Fdocs\u002Fcomponents\u002Fscroll-area","docs\u002F2.components\u002Fscroll-area","A flexible scrollable viewport component that implements virtualization to handle large datasets with optimal performance.",{"title":662,"path":663,"stem":664,"framework":16,"category":251,"description":665},"Select","\u002Fdocs\u002Fcomponents\u002Fselect","docs\u002F2.components\u002Fselect","A selection field to pick from various options.",{"title":667,"path":668,"stem":669,"framework":16,"category":251,"description":670},"SelectMenu","\u002Fdocs\u002Fcomponents\u002Fselect-menu","docs\u002F2.components\u002Fselect-menu","A refined and searchable selection component.",{"title":672,"path":673,"stem":674,"framework":16,"category":147,"description":675},"Separator","\u002Fdocs\u002Fcomponents\u002Fseparator","docs\u002F2.components\u002Fseparator","Divides content in a horizontal or vertical manner.",{"title":677,"path":678,"stem":679,"framework":16,"category":158,"description":680},"Sidebar","\u002Fdocs\u002Fcomponents\u002Fsidebar","docs\u002F2.components\u002Fsidebar","A collapsible sidebar with multiple visual style options.",{"title":682,"path":683,"stem":684,"framework":16,"category":685,"description":686},"SidebarLayout","\u002Fdocs\u002Fcomponents\u002Fsidebar-layout","docs\u002F2.components\u002Fsidebar-layout","deprecated","You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful",{"title":688,"path":689,"stem":690,"framework":16,"category":147,"description":691},"Skeleton","\u002Fdocs\u002Fcomponents\u002Fskeleton","docs\u002F2.components\u002Fskeleton","A toggle control for switching between two states.",{"title":693,"path":694,"stem":695,"framework":16,"category":334,"description":696},"Slideover","\u002Fdocs\u002Fcomponents\u002Fslideover","docs\u002F2.components\u002Fslideover","A dialog that slides in from any side of the screen.",{"title":698,"path":699,"stem":700,"framework":16,"category":158,"description":701,"badge":645},"Splitter","\u002Fdocs\u002Fcomponents\u002Fsplitter","docs\u002F2.components\u002Fsplitter","Panels that share one area and are resized by dragging the divider between them.",{"title":703,"path":704,"stem":705,"framework":16,"category":184,"description":706},"Stepper","\u002Fdocs\u002Fcomponents\u002Fstepper","docs\u002F2.components\u002Fstepper","A stepper component to visualize progress in a multistep workflow.",{"title":708,"path":709,"stem":710,"framework":16,"category":251,"description":691},"Switch","\u002Fdocs\u002Fcomponents\u002Fswitch","docs\u002F2.components\u002Fswitch",{"title":712,"path":713,"stem":714,"framework":16,"category":141,"description":715},"Table","\u002Fdocs\u002Fcomponents\u002Ftable","docs\u002F2.components\u002Ftable","A responsive data table component.",{"title":717,"path":718,"stem":719,"framework":16,"category":141,"description":720},"TableWrapper","\u002Fdocs\u002Fcomponents\u002Ftable-wrapper","docs\u002F2.components\u002Ftable-wrapper","Wrapper for displaying a html table",{"title":722,"path":723,"stem":724,"framework":16,"category":184,"description":725},"Tabs","\u002Fdocs\u002Fcomponents\u002Ftabs","docs\u002F2.components\u002Ftabs","A collection of tab panels shown individually.",{"title":727,"path":728,"stem":729,"framework":16,"category":251,"description":730},"Textarea","\u002Fdocs\u002Fcomponents\u002Ftextarea","docs\u002F2.components\u002Ftextarea","A textarea for entering multi-line text.",{"title":46,"path":732,"stem":733,"framework":16,"category":158,"description":734},"\u002Fdocs\u002Fcomponents\u002Ftheme","docs\u002F2.components\u002Ftheme","A headless component for theming its child components.",{"title":736,"path":737,"stem":738,"framework":16,"category":141,"description":739},"Timeline","\u002Fdocs\u002Fcomponents\u002Ftimeline","docs\u002F2.components\u002Ftimeline","A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.",{"title":741,"path":742,"stem":743,"framework":16,"category":334,"description":744},"Toast","\u002Fdocs\u002Fcomponents\u002Ftoast","docs\u002F2.components\u002Ftoast","A short message to offer information or feedback to the user.",{"title":746,"path":747,"stem":748,"framework":16,"category":334,"description":749},"Tooltip","\u002Fdocs\u002Fcomponents\u002Ftooltip","docs\u002F2.components\u002Ftooltip","A small window that shows details when you move your mouse over an item.",{"title":751,"path":752,"stem":753,"framework":16,"category":141,"description":754},"User","\u002Fdocs\u002Fcomponents\u002Fuser","docs\u002F2.components\u002Fuser","A component to display user details, including their name, bio, and profile picture.",{"title":756,"framework":16,"category":16,"description":16,"path":757,"stem":758,"children":759,"page":34},"Composables","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[760,765,770,775,780,785,790,795,800,805,810],{"title":761,"path":762,"stem":763,"framework":16,"category":16,"description":764},"defineLocale","\u002Fdocs\u002Fcomposables\u002Fdefine-locale","docs\u002F3.composables\u002Fdefine-locale","A utility to create a custom locale configuration for your application.",{"title":766,"path":767,"stem":768,"framework":16,"category":16,"description":769},"defineShortcuts","\u002Fdocs\u002Fcomposables\u002Fdefine-shortcuts","docs\u002F3.composables\u002Fdefine-shortcuts","A composable to assign keyboard shortcuts in your app.",{"title":771,"path":772,"stem":773,"framework":16,"category":16,"description":774},"extendLocale","\u002Fdocs\u002Fcomposables\u002Fextend-locale","docs\u002F3.composables\u002Fextend-locale","A utility to extend an existing locale with custom translation overrides.",{"title":776,"path":777,"stem":778,"framework":16,"category":16,"description":779},"extractShortcuts","\u002Fdocs\u002Fcomposables\u002Fextract-shortcuts","docs\u002F3.composables\u002Fextract-shortcuts","A keyboard shortcut extractor for menu items.",{"title":781,"path":782,"stem":783,"framework":16,"category":16,"description":784},"useConfetti","\u002Fdocs\u002Fcomposables\u002Fuse-confetti","docs\u002F3.composables\u002Fuse-confetti","Performant confetti animation in the browser",{"title":786,"path":787,"stem":788,"framework":16,"category":16,"description":789},"useDevice","\u002Fdocs\u002Fcomposables\u002Fuse-device","docs\u002F3.composables\u002Fuse-device","Detect the current platform (Bitrix24 mobile\u002Fdesktop app or web) and screen size based on Tailwind breakpoints.",{"title":791,"path":792,"stem":793,"framework":16,"category":16,"description":794},"useOverlay","\u002Fdocs\u002Fcomposables\u002Fuse-overlay","docs\u002F3.composables\u002Fuse-overlay","A composable to programmatically control overlays in App.",{"title":796,"path":797,"stem":798,"framework":16,"category":16,"description":799},"useScrollShadow","\u002Fdocs\u002Fcomposables\u002Fuse-scroll-shadow","docs\u002F3.composables\u002Fuse-scroll-shadow","A composable function to apply scroll shadow effects to any scrollable element.",{"title":801,"path":802,"stem":803,"framework":16,"category":16,"description":804},"useSpeechRecognition","\u002Fdocs\u002Fcomposables\u002Fuse-speech-recognition","docs\u002F3.composables\u002Fuse-speech-recognition","A speech recognition composable using the Web Speech API.",{"title":806,"path":807,"stem":808,"framework":16,"category":16,"description":809},"useToast","\u002Fdocs\u002Fcomposables\u002Fuse-toast","docs\u002F3.composables\u002Fuse-toast","A composable for showing toast notifications in your app.",{"title":811,"path":812,"stem":813,"framework":16,"category":16,"description":814},"useTour","\u002Fdocs\u002Fcomposables\u002Fuse-tour","docs\u002F3.composables\u002Fuse-tour","A composable to build guided tours by re-anchoring a single Popover across steps.",{"title":816,"path":817,"stem":818,"children":819,"framework":16,"category":16,"description":16},"Typography","\u002Fdocs\u002Ftypography","docs\u002F4.typography\u002F1.index",[820,822,827,832,837,842,847,851,856,860,865,870,875,880,884,889,893,897,902,907],{"title":15,"path":817,"stem":818,"framework":16,"category":16,"description":821},"Ready-to-use typography styles and utilities for a professional look.",{"title":823,"path":824,"stem":825,"framework":16,"category":16,"description":826},"Headers and text","\u002Fdocs\u002Ftypography\u002Fheaders-and-text","docs\u002F4.typography\u002F2.headers-and-text","Easy-to-read text with carefully designed headings, formatted content, and clear links.",{"title":828,"path":829,"stem":830,"framework":16,"category":16,"description":831},"Lists and tables","\u002Fdocs\u002Ftypography\u002Flists-and-tables","docs\u002F4.typography\u002F3.lists-and-tables","Structure data effectively using designed lists and adaptive tables for better readability.",{"title":833,"path":834,"stem":835,"framework":16,"category":16,"description":836},"Images and embeds","\u002Fdocs\u002Ftypography\u002Fimages-and-embeds","docs\u002F4.typography\u002F4.images-and-embeds","Flexible visuals and interactive content to make your documentation clearer and more engaging.",{"title":838,"path":839,"stem":840,"framework":16,"category":16,"description":841},"Code","\u002Fdocs\u002Ftypography\u002Fcode","docs\u002F4.typography\u002F5.code","Render code snippets and highlighted code blocks, complete with clipboard copying.",{"title":138,"path":843,"stem":844,"framework":16,"category":845,"description":846},"\u002Fdocs\u002Ftypography\u002Faccordion","docs\u002F4.typography\u002Faccordion","components","Add interactive toggles for a more structured content presentation.",{"title":171,"path":848,"stem":849,"framework":16,"category":845,"description":850},"\u002Fdocs\u002Ftypography\u002Fbadge","docs\u002F4.typography\u002Fbadge","Present versioning information, status labels, and relevant tags within your material.",{"title":852,"path":853,"stem":854,"framework":16,"category":845,"description":855},"Callout","\u002Fdocs\u002Ftypography\u002Fcallout","docs\u002F4.typography\u002Fcallout","Organize critical content for easy scanning with colored panels and intuitive symbols.",{"title":197,"path":857,"stem":858,"framework":16,"category":845,"description":859},"\u002Fdocs\u002Ftypography\u002Fcard","docs\u002F4.typography\u002Fcard","Develop prominent content areas with integrated navigation options.",{"title":861,"path":862,"stem":863,"framework":16,"category":845,"description":864},"CardGroup","\u002Fdocs\u002Ftypography\u002Fcard-group","docs\u002F4.typography\u002Fcard-group","Arrange content cards into flexible grids to enhance structure and readability.",{"title":866,"path":867,"stem":868,"framework":16,"category":845,"description":869},"CodeCollapse","\u002Fdocs\u002Ftypography\u002Fcode-collapse","docs\u002F4.typography\u002Fcode-collapse","Add toggle functionality for lengthy code sections to optimize layout.",{"title":871,"path":872,"stem":873,"framework":16,"category":845,"description":874},"CodeGroup","\u002Fdocs\u002Ftypography\u002Fcode-group","docs\u002F4.typography\u002Fcode-group","Use a tabbed layout to present multiple code snippets for a clearer view.",{"title":876,"path":877,"stem":878,"framework":16,"category":845,"description":879},"CodePreview","\u002Fdocs\u002Ftypography\u002Fcode-preview","docs\u002F4.typography\u002Fcode-preview","For clearer docs, pair code snippets with their visual output and source.",{"title":264,"path":881,"stem":882,"framework":16,"category":845,"description":883},"\u002Fdocs\u002Ftypography\u002Fcollapsible","docs\u002F4.typography\u002Fcollapsible","Smooth content toggle with expand and collapse effects.",{"title":885,"path":886,"stem":887,"framework":16,"category":845,"description":888},"Field","\u002Fdocs\u002Ftypography\u002Ffield","docs\u002F4.typography\u002Ffield","Provide clear and comprehensive documentation for the API configurable elements.",{"title":454,"path":890,"stem":891,"framework":16,"category":845,"description":892},"\u002Fdocs\u002Ftypography\u002Ffield-group","docs\u002F4.typography\u002Ffield-group","Combine logically connected fields to create exhaustive API documentation.",{"title":524,"path":894,"stem":895,"framework":16,"category":845,"description":896},"\u002Fdocs\u002Ftypography\u002Fkbd","docs\u002F4.typography\u002Fkbd","Show all available hotkeys with their properly formatted keys.",{"title":898,"path":899,"stem":900,"framework":16,"category":845,"description":901},"Prompt","\u002Fdocs\u002Ftypography\u002Fprompt","docs\u002F4.typography\u002Fprompt","Show pre‑built AI prompts with one‑click copying and IDE integration.",{"title":903,"path":904,"stem":905,"framework":16,"category":845,"description":906},"Steps","\u002Fdocs\u002Ftypography\u002Fsteps","docs\u002F4.typography\u002Fsteps","Turn your headings into clear, sequential instructions.",{"title":722,"path":908,"stem":909,"framework":16,"category":845,"description":910},"\u002Fdocs\u002Ftypography\u002Ftabs","docs\u002F4.typography\u002Ftabs","Group related information into interactive tabs to improve content navigation.",{"id":912,"title":913,"badge":16,"body":914,"category":16,"description":39,"extension":1385,"framework":16,"index":34,"keywords":16,"links":16,"meta":1386,"navigation":1387,"path":37,"seo":1388,"stem":38,"__hash__":1389},"docs\u002Fdocs\u002F1.getting-started\u002F3.migration.md","Migration to v2",{"type":915,"value":916,"toc":1376},"minimark",[917,929,932,937,940,945,960,1033,1037,1061,1089,1108,1127,1142,1146,1151,1190,1328,1332,1339,1350,1354,1363,1372],[918,919,920],"note",{},[921,922,923,924,928],"p",{},"Bitrix24 UI v2 requires ",[925,926,927],"strong",{},"Nuxt 4"," due to some dependencies. Make sure to upgrade to Nuxt 4 before migrating to Bitrix24 UI v2.",[921,930,931],{},"This guide provides step-by-step instructions to migrate your application to Bitrix24 UI v2.",[933,934,936],"h2",{"id":935},"changes","Changes",[921,938,939],{},"After upgrading to Bitrix24 UI v2, please note the following important changes:",[941,942,944],"h3",{"id":943},"renamed-buttongroup","Renamed ButtonGroup",[921,946,947,948,952,953,959],{},"The ",[949,950,951],"code",{},"ButtonGroup"," component has been renamed to ",[954,955,957],"a",{"href":956},"\u002Fdocs\u002Fcomponents\u002Ffield-group\u002F",[949,958,454],{},":",[961,962,967],"pre",{"className":963,"code":964,"language":965,"meta":966,"style":966},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n- \u003CB24ButtonGroup>\n+ \u003CB24FieldGroup>\n    \u003CB24Button label=\"Button\" \u002F>\n    \u003CB24Button use-dropdown \u002F>\n+ \u003C\u002FB24FieldGroup>\n- \u003C\u002FB24ButtonGroup>\n\u003C\u002Ftemplate>\n","diff","",[949,968,969,978,989,999,1005,1011,1019,1027],{"__ignoreMap":966},[970,971,974],"span",{"class":972,"line":973},"line",1,[970,975,977],{"class":976},"sTEyZ","\u003Ctemplate>\n",[970,979,981,985],{"class":972,"line":980},2,[970,982,984],{"class":983},"sMK4o","-",[970,986,988],{"class":987},"swJcz"," \u003CB24ButtonGroup>\n",[970,990,992,995],{"class":972,"line":991},3,[970,993,994],{"class":983},"+",[970,996,998],{"class":997},"sfazB"," \u003CB24FieldGroup>\n",[970,1000,1002],{"class":972,"line":1001},4,[970,1003,1004],{"class":976},"    \u003CB24Button label=\"Button\" \u002F>\n",[970,1006,1008],{"class":972,"line":1007},5,[970,1009,1010],{"class":976},"    \u003CB24Button use-dropdown \u002F>\n",[970,1012,1014,1016],{"class":972,"line":1013},6,[970,1015,994],{"class":983},[970,1017,1018],{"class":997}," \u003C\u002FB24FieldGroup>\n",[970,1020,1022,1024],{"class":972,"line":1021},7,[970,1023,984],{"class":983},[970,1025,1026],{"class":987}," \u003C\u002FB24ButtonGroup>\n",[970,1028,1030],{"class":972,"line":1029},8,[970,1031,1032],{"class":976},"\u003C\u002Ftemplate>\n",[941,1034,1036],{"id":1035},"renamed-model-modifiers","Renamed model modifiers",[921,1038,947,1039,1042,1043,1048,1049,1054,1055,1060],{},[949,1040,1041],{},"modelModifiers"," shape used by ",[954,1044,1046],{"href":1045},"\u002Fdocs\u002Fcomponents\u002Finput\u002F",[949,1047,489],{},", ",[954,1050,1052],{"href":1051},"\u002Fdocs\u002Fcomponents\u002Finput-number\u002F",[949,1053,504],{}," and ",[954,1056,1058],{"href":1057},"\u002Fdocs\u002Fcomponents\u002Ftextarea\u002F",[949,1059,727],{}," has changed in v2:",[1062,1063,1064,1079],"ol",{},[1065,1066,947,1067,1070,1071,1074,1075,1078],"li",{},[949,1068,1069],{},"nullify"," modifier was renamed to ",[949,1072,1073],{},"nullable"," (it converts empty\u002Fblank values to ",[949,1076,1077],{},"null",").",[1065,1080,1081,1082,1085,1086,1078],{},"A new ",[949,1083,1084],{},"optional"," modifier was added (it converts empty\u002Fblank values to ",[949,1087,1088],{},"undefined",[961,1090,1092],{"className":963,"code":1091,"language":965,"meta":966,"style":966},"- \u003CB24Input v-model.nullify=\"value\" \u002F>\n+ \u003CB24Input v-model.nullable=\"value\" \u002F>\n",[949,1093,1094,1101],{"__ignoreMap":966},[970,1095,1096,1098],{"class":972,"line":973},[970,1097,984],{"class":983},[970,1099,1100],{"class":987}," \u003CB24Input v-model.nullify=\"value\" \u002F>\n",[970,1102,1103,1105],{"class":972,"line":980},[970,1104,994],{"class":983},[970,1106,1107],{"class":997}," \u003CB24Input v-model.nullable=\"value\" \u002F>\n",[961,1109,1111],{"className":963,"code":1110,"language":965,"meta":966,"style":966},"- \u003CB24Textarea v-model=\"value\" :model-modifiers=\"{ nullify: true }\" \u002F>\n+ \u003CB24Textarea v-model=\"value\" :model-modifiers=\"{ nullable: true }\" \u002F>\n",[949,1112,1113,1120],{"__ignoreMap":966},[970,1114,1115,1117],{"class":972,"line":973},[970,1116,984],{"class":983},[970,1118,1119],{"class":987}," \u003CB24Textarea v-model=\"value\" :model-modifiers=\"{ nullify: true }\" \u002F>\n",[970,1121,1122,1124],{"class":972,"line":980},[970,1123,994],{"class":983},[970,1125,1126],{"class":997}," \u003CB24Textarea v-model=\"value\" :model-modifiers=\"{ nullable: true }\" \u002F>\n",[921,1128,1129,1130,1132,1133,1135,1136,1138,1139,1141],{},"Use ",[949,1131,1073],{}," when you want empty values as ",[949,1134,1077],{},", and ",[949,1137,1084],{}," when you prefer ",[949,1140,1088],{}," for absent values.",[941,1143,1145],{"id":1144},"changes-to-form-component","Changes to Form component",[921,1147,947,1148,1150],{},[949,1149,474],{}," component has been improved in v2 with better state management and nested form handling. Here are the key changes you need to be aware of:",[1062,1152,1153,1167,1177],{},[1065,1154,1155,1156,1159,1160,1166],{},"Schema ",[925,1157,1158],{},"transformations will only"," be applied to the ",[925,1161,1162,1165],{},[949,1163,1164],{},"@submit"," data"," and will no longer mutate the form's state. This provides better predictability and prevents unexpected state mutations.",[1065,1168,1169,1172,1173,1176],{},[925,1170,1171],{},"Nested forms must be enabled explicitly"," using the ",[949,1174,1175],{},"nested"," prop. This makes the component behavior more explicit and prevents accidental nested form creation.",[1065,1178,1179,1185,1186,1189],{},[925,1180,1181,1182],{},"Nested forms should now provide a ",[949,1183,1184],{},"name"," prop (similar to ",[949,1187,1188],{},"B24FormField",") and will automatically inherit their state from their parent form.",[961,1191,1193],{"className":963,"code":1192,"language":965,"meta":966,"style":966},"\u003Ctemplate>\n  \u003CB24Form :state=\"state\" :schema=\"schema\" @submit=\"onSubmit\">\n    \u003CB24FormField label=\"Customer\" name=\"customer\">\n      \u003CB24Input v-model=\"state.customer\" placeholder=\"Wonka Industries\" \u002F>\n    \u003C\u002FB24FormField>\n\n    \u003Cdiv v-for=\"(item, index) in state.items\" :key=\"index\">\n      \u003CB24Form\n-       :state=\"item\"\n+       :name=\"`items.${index}`\"\n        :schema=\"itemSchema\"\n+       nested\n      >\n        \u003CB24FormField :label=\"!index ? 'Description' : undefined\" name=\"description\">\n          \u003CB24Input v-model=\"item.description\" \u002F>\n        \u003C\u002FB24FormField>\n        \u003CB24FormField :label=\"!index ? 'Price' : undefined\" name=\"price\">\n          \u003CB24Input v-model=\"item.price\" type=\"number\" \u002F>\n        \u003C\u002FB24FormField>\n      \u003C\u002FB24Form>\n    \u003C\u002Fdiv>\n  \u003C\u002FB24Form>\n\u003C\u002Ftemplate>\n",[949,1194,1195,1199,1204,1209,1214,1219,1224,1229,1234,1242,1250,1256,1264,1270,1276,1282,1288,1294,1300,1305,1311,1317,1323],{"__ignoreMap":966},[970,1196,1197],{"class":972,"line":973},[970,1198,977],{"class":976},[970,1200,1201],{"class":972,"line":980},[970,1202,1203],{"class":976},"  \u003CB24Form :state=\"state\" :schema=\"schema\" @submit=\"onSubmit\">\n",[970,1205,1206],{"class":972,"line":991},[970,1207,1208],{"class":976},"    \u003CB24FormField label=\"Customer\" name=\"customer\">\n",[970,1210,1211],{"class":972,"line":1001},[970,1212,1213],{"class":976},"      \u003CB24Input v-model=\"state.customer\" placeholder=\"Wonka Industries\" \u002F>\n",[970,1215,1216],{"class":972,"line":1007},[970,1217,1218],{"class":976},"    \u003C\u002FB24FormField>\n",[970,1220,1221],{"class":972,"line":1013},[970,1222,1223],{"emptyLinePlaceholder":20},"\n",[970,1225,1226],{"class":972,"line":1021},[970,1227,1228],{"class":976},"    \u003Cdiv v-for=\"(item, index) in state.items\" :key=\"index\">\n",[970,1230,1231],{"class":972,"line":1029},[970,1232,1233],{"class":976},"      \u003CB24Form\n",[970,1235,1237,1239],{"class":972,"line":1236},9,[970,1238,984],{"class":983},[970,1240,1241],{"class":987},"       :state=\"item\"\n",[970,1243,1245,1247],{"class":972,"line":1244},10,[970,1246,994],{"class":983},[970,1248,1249],{"class":997},"       :name=\"`items.${index}`\"\n",[970,1251,1253],{"class":972,"line":1252},11,[970,1254,1255],{"class":976},"        :schema=\"itemSchema\"\n",[970,1257,1259,1261],{"class":972,"line":1258},12,[970,1260,994],{"class":983},[970,1262,1263],{"class":997},"       nested\n",[970,1265,1267],{"class":972,"line":1266},13,[970,1268,1269],{"class":976},"      >\n",[970,1271,1273],{"class":972,"line":1272},14,[970,1274,1275],{"class":976},"        \u003CB24FormField :label=\"!index ? 'Description' : undefined\" name=\"description\">\n",[970,1277,1279],{"class":972,"line":1278},15,[970,1280,1281],{"class":976},"          \u003CB24Input v-model=\"item.description\" \u002F>\n",[970,1283,1285],{"class":972,"line":1284},16,[970,1286,1287],{"class":976},"        \u003C\u002FB24FormField>\n",[970,1289,1291],{"class":972,"line":1290},17,[970,1292,1293],{"class":976},"        \u003CB24FormField :label=\"!index ? 'Price' : undefined\" name=\"price\">\n",[970,1295,1297],{"class":972,"line":1296},18,[970,1298,1299],{"class":976},"          \u003CB24Input v-model=\"item.price\" type=\"number\" \u002F>\n",[970,1301,1303],{"class":972,"line":1302},19,[970,1304,1287],{"class":976},[970,1306,1308],{"class":972,"line":1307},20,[970,1309,1310],{"class":976},"      \u003C\u002FB24Form>\n",[970,1312,1314],{"class":972,"line":1313},21,[970,1315,1316],{"class":976},"    \u003C\u002Fdiv>\n",[970,1318,1320],{"class":972,"line":1319},22,[970,1321,1322],{"class":976},"  \u003C\u002FB24Form>\n",[970,1324,1326],{"class":972,"line":1325},23,[970,1327,1032],{"class":976},[941,1329,1331],{"id":1330},"usesidebarlayout-removed","useSidebarLayout removed",[921,1333,1334,1335,1338],{},"Composable ",[949,1336,1337],{},"useSidebarLayout"," is no longer supported.",[921,1340,1341,1342,1345,1346,1349],{},"Support for the loading state of the ",[954,1343,682],{"href":1344},"\u002Fdocs\u002Fcomponents\u002Fsidebar-layout\u002F"," component via ",[954,1347,342],{"href":1348},"\u002Fdocs\u002Fcomponents\u002Fdashboard-group\u002F"," will be added in an upcoming release.",[941,1351,1353],{"id":1352},"bitrix24b24style-removed","@bitrix24\u002Fb24style removed",[921,1355,947,1356,1362],{},[954,1357,1361],{"href":1358,"rel":1359},"https:\u002F\u002Fgithub.com\u002Fbitrix24\u002Fb24ui\u002Ftree\u002Fmain\u002Fsrc\u002Fruntime\u002Fair-design-tokens",[1360],"nofollow","Bitrix24 UI"," styles are now responsible for styling.",[921,1364,1365,1366,1371],{},"We've tried to maintain compatibility, but if any issues arise, please ",[954,1367,1370],{"href":1368,"rel":1369},"https:\u002F\u002Fgithub.com\u002Fbitrix24\u002Fb24ui\u002Fissues",[1360],"let us know",".",[1373,1374,1375],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":966,"searchDepth":980,"depth":980,"links":1377},[1378],{"id":935,"depth":980,"text":936,"children":1379},[1380,1381,1382,1383,1384],{"id":943,"depth":991,"text":944},{"id":1035,"depth":991,"text":1036},{"id":1144,"depth":991,"text":1145},{"id":1330,"depth":991,"text":1331},{"id":1352,"depth":991,"text":1353},"md",{},{"title":36},{"title":913,"description":39},"uBT-RiukotPhrj4gtQ1VTfPRXkJ7OVyQtDd13Z2jg3A",{"data":1391,"body":1392},{},{"type":1393,"children":1394},"root",[1395],{"type":147,"tag":921,"props":1396,"children":1397},{},[1398],{"type":1399,"value":39},"text",1790922062339]