### Vue 3 Core Store Setup (core/store.js)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Sets up the central Vuex store for the application, defining modules for users and tasks. It requires the 'ui.vue3.vuex' library for store creation. This store manages application state and provides a centralized place for state management.

```javascript
// Core Store Setup (core/store.js)
import { createStore } from 'ui.vue3.vuex';

export const Store = createStore({
    modules: {
        users: usersModule,
        tasks: tasksModule
    }
});
```

--------------------------------

### Icon API Usage Example

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Demonstrates how to use the Icon API to render standardized icons with various configurations, including basic icons, custom sizes and colors, hover effects, social icons, and responsive icons. It requires importing from 'ui.icon-set.api.core'.

```javascript
import { Icon, Actions, Social, Main, IconHoverMode } from 'ui.icon-set.api.core';

// Create basic icon
const editIcon = new Icon({
    icon: Actions.PENCIL_DRAW
}).render();
document.getElementById('edit-button').appendChild(editIcon);

// Icon with custom size and color
const settingsIcon = new Icon({
    icon: Actions.SETTINGS_1,
    size: 32,
    color: '#2C3E50'
}).render();
document.getElementById('settings-button').appendChild(settingsIcon);

// Icon with hover effect
const deleteIcon = new Icon({
    icon: Actions.DELETE,
    size: 24,
    color: '#E74C3C',
    hoverMode: IconHoverMode.ALT
}).render();
document.getElementById('delete-button').appendChild(deleteIcon);

// Social icons
const facebookIcon = new Icon({
    icon: Social.FACEBOOK,
    size: 20
}).render();

const twitterIcon = new Icon({
    icon: Social.TWITTER,
    size: 20
}).render();

// Responsive icon
const responsiveIcon = new Icon({
    icon: Main.MENU,
    responsive: true
}).render();

document.getElementById('social-links').append(facebookIcon, twitterIcon);

```

--------------------------------

### Vue 3 Input and Chip Components Example

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Demonstrates the usage of Input and Chip components in Vue 3, showcasing different sizes, designs, and states. It includes form fields for email and password, a search input, and interactive category chips. Dependencies include 'ui.system.input.vue' and 'ui.system.chip.vue'.

```vue
<template>
  <div class="form-example">
    <!-- Input fields -->
    <div class="form-field">
      <label>Email Address</label>
      <Input
        v-model="email"
        :size="InputSize.Md"
        :design="emailError ? InputDesign.Danger : InputDesign.Default"
        placeholder="user@example.com"
        @blur="validateEmail"
      />
      <span v-if="emailError" class="error-message">{{ emailError }}</span>
    </div>

    <div class="form-field">
      <label>Password</label>
      <Input
        v-model="password"
        type="password"
        :size="InputSize.Md"
        :design="passwordValid ? InputDesign.Success : InputDesign.Default"
        placeholder="Enter password"
      />
    </div>

    <!-- Small input -->
    <Input
      v-model="searchQuery"
      :size="InputSize.Sm"
      placeholder="Search..."
    />

    <!-- Chips for tags -->
    <div class="tags-section">
      <h3>Selected Categories:</h3>
      <div class="chip-container">
        <Chip
          v-for="category in categories"
          :key="category.id"
          :text="category.name"
          :size="ChipSize.Md"
          :design="category.active ? ChipDesign.Filled : ChipDesign.Outline"
          :rounded="true"
          @click="toggleCategory(category.id)"
        />
      </div>
    </div>

    <!-- Status chips -->
    <div class="status-chips">
      <Chip
        text="Active"
        :design="ChipDesign.OutlineSuccess"
        :size="ChipSize.Sm"
      />
      <Chip
        text="Pending"
        :design="ChipDesign.OutlineWarning"
        :size="ChipSize.Sm"
      />
      <Chip
        text="Error"
        :design="ChipDesign.OutlineAlert"
        :size="ChipSize.Sm"
      />
    </div>
  </div>
</template>

<script>
import { Input, InputSize, InputDesign } from 'ui.system.input.vue';
import { Chip, ChipSize, ChipDesign } from 'ui.system.chip.vue';

export default {
  components: { Input, Chip },
  data() {
    return {
      InputSize, InputDesign,
      ChipSize, ChipDesign,
      email: '',
      emailError: '',
      password: '',
      searchQuery: '',
      categories: [
        { id: 1, name: 'Frontend', active: true },
        { id: 2, name: 'Backend', active: false },
        { id: 3, name: 'DevOps', active: true }
      ]
    };
  },
  computed: {
    passwordValid() {
      return this.password.length >= 8;
    }
  },
  methods: {
    validateEmail() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(this.email)) {
        this.emailError = 'Please enter a valid email address';
      } else {
        this.emailError = '';
      }
    },
    toggleCategory(id) {
      const category = this.categories.find(c => c.id === id);
      if (category) {
        category.active = !category.active;
      }
    }
  }
};
</script>

```

--------------------------------

### Vue 3 Button Component Examples

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

This Vue 3 component demonstrates various configurations of the Button component. It shows how to use props for text, icons, loading states, counters, dropdown indicators, and custom styling for button groups. It imports necessary components and enums from the 'ui.vue3.components.button' module.

```vue
<template>
  <div class="button-examples">
    <!-- Basic button -->
    <Button
      text="Save Changes"
      :size="ButtonSize.MEDIUM"
      @click="handleSave"
    />

    <!-- Button with left icon -->
    <Button
      text="Add Item"
      :leftIcon="ButtonIcon.ADD"
      :size="ButtonSize.LARGE"
      @click="addItem"
    />

    <!-- Loading state -->
    <Button
      text="Processing..."
      :loading="isLoading"
      :disabled="isLoading"
    />

    <!-- Button with counter -->
    <Button
      text="Notifications"
      :leftIcon="ButtonIcon.NOTIFICATION"
      :leftCounterValue="unreadCount"
      :leftCounterColor="ButtonCounterColor.DANGER"
      @click="openNotifications"
    />

    <!-- Collapsed button (icon only) -->
    <Button
      :collapsed="true"
      :collapsedIcon="ButtonIcon.SETTINGS"
      @click="openSettings"
    />

    <!-- Button with dropdown indicator -->
    <Button
      text="Actions"
      :dropdown="true"
      @click="toggleActionsMenu"
    />

    <!-- Wide button -->
    <Button
      text="Submit Form"
      :wide="true"
      :size="ButtonSize.LARGE"
      type="submit"
    />

    <!-- Button group without corners -->
    <div class="button-group">
      <Button
        text="Option 1"
        :removeRightCorners="true"
        :state="selectedOption === 1 ? ButtonState.ACTIVE : undefined"
        @click="selectedOption = 1"
      />
      <Button
        text="Option 2"
        :removeLeftCorners="true"
        :removeRightCorners="true"
        :state="selectedOption === 2 ? ButtonState.ACTIVE : undefined"
        @click="selectedOption = 2"
      />
      <Button
        text="Option 3"
        :removeLeftCorners="true"
        :state="selectedOption === 3 ? ButtonState.ACTIVE : undefined"
        @click="selectedOption = 3"
      />
    </div>
  </div>
</template>

<script>
import { Button, ButtonSize, ButtonIcon, ButtonState, ButtonCounterColor } from 'ui.vue3.components.button';

export default {
  components: { Button },
  data() {
    return {
      ButtonSize,
      ButtonIcon,
      ButtonState,
      ButtonCounterColor,
      isLoading: false,
      unreadCount: 5,
      selectedOption: 1
    };
  },
  methods: {
    handleSave() {
      this.isLoading = true;
      fetch('/api/save', { method: 'POST' })
        .then(() => this.isLoading = false);
    },
    addItem() {
      console.log('Add item clicked');
    },
    openNotifications() {
      this.unreadCount = 0;
    },
    openSettings() {
      console.log('Settings');
    },
    toggleActionsMenu() {
      console.log('Toggle menu');
    }
  }
};
</script>
```

--------------------------------

### PHP Integration for Vue App (template.php)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Example of how to integrate the Vue 3 User Manager application into a PHP template. It loads the necessary extension and uses JavaScript to create and mount the Vue application within a specified HTML container. It also demonstrates passing options to the Vue app via JSON encoding.

```php
// PHP Integration (template.php)
// Extension::load('myapp.application.user-manager');
// <div id="user-manager-container"></div>
// <script>
// BX.ready(() => {
//     BX.MyApp.UserManager.create(
//         document.getElementById('user-manager-container'),
//         <?= Json::encode(['mode' => 'view']) ?>
//     );
// });
// </script>
```

--------------------------------

### BMenu Component Usage with Options - Vue/JavaScript

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/system-menu-vue.md

Complete example of BMenu component implementation in a Vue component. Demonstrates menu configuration with bindElement, items array, click handlers, delimiters, and links. Shows v-if directive for visibility control and close event handling to toggle menu state.

```javascript
import { BMenu } from 'ui.system.menu.vue';
import type { MenuOptions } from 'ui.system.menu';

export const MyComponentWithMenu = {
	name: 'MyComponentWithMenu',
	components: {
		BMenu,
	},
	data()
	{
		return {
			isMenuShown: false,
		};
	},
	computed: {
		menuOptions(): MenuOptions
		{
			return {
				bindElement: this.$refs.myButton,
				items: [
					{
						title: 'Пункт 1',
						onClick: () => console.log('Нажат пункт 1'),
					},
					{
						title: 'Пункт 2',
						onClick: () => console.log('Нажат пункт 2'),
					},
					{
						delimiter: true,
					},
					{
						title: 'Ссылка на сайт',
						href: 'https://bitrix24.ru',
						target: '_blank',
					},
				],
			};
		},
	},
	template: `
		<div>
			<button ref="myButton" @click="isMenuShown = true">Показать меню</button>
			<BMenu
				v-if="isMenuShown"
				:options="menuOptions"
				@close="isMenuShown = false"
			/>
		</div>
	`,
};
```

--------------------------------

### Create Bitrix Extension with CLI

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Demonstrates creating a new Bitrix extension using the command-line interface. This process sets up the necessary file structure for the extension.

```shell
cd local/js/mymodule
bitrix create myextension
```

--------------------------------

### Add Informational Tooltips Programmatically (JavaScript)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Illustrates programmatic usage of the `BX.UI.Hint` class for initializing hints, creating hint nodes, showing hints on demand, hiding active hints, and creating custom hint instances with specific configurations. This requires the `BX` object and its UI components to be available.

```javascript
// Programmatic usage
BX.UI.Hint.init();

// Initialize hints in specific container
const container = document.getElementById('dynamic-content');
BX.UI.Hint.init(container);

// Create hint node
const hintNode = BX.UI.Hint.createNode('This field is required');
document.getElementById('email-field').appendChild(hintNode);

// Show hint programmatically
const targetElement = document.getElementById('status-icon');
BX.UI.Hint.show(targetElement, '<b>Status:</b> Active<br/>Last update: 2 hours ago', false);

// Hide active hint
BX.UI.Hint.hide();

// Custom hint instance
const customHints = BX.UI.Hint.createInstance({
    attributeName: 'data-custom-hint',
    className: 'my-custom-hint-class'
});
customHints.init();
```

--------------------------------

### Configure and Load Bitrix Extension (JavaScript, PHP)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Illustrates how to configure a Bitrix extension using `bundle.config.js` and load it in both PHP and JavaScript. It outlines the process of importing and using components within a JavaScript application.

```javascript
// bundle.config.js
module.exports = {
    input: './src/index.js',
    output: './dist/bundle.js',
    namespace: 'BX.MyApp',
    browserslist: true,
    protected: false
};

// Use in JavaScript
import { MyComponent } from 'mymodule.myextension';

const component = new MyComponent({
    target: document.getElementById('app'),
    props: { userId: 123 }
});
```

```php
// Load extension in PHP
// \Bitrix\Main\UI\Extension::load('mymodule.myextension');
```

--------------------------------

### Send System Notifications with Buttons and Reply Fields (JavaScript)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Demonstrates how to use the `Notifier` class from `ui.notification-manager` to send simple notifications, notifications with action buttons, and notifications with a reply field. It also shows how to subscribe to click and reply events to handle user interactions. Requires the `ui.notification-manager` module.

```javascript
import { Notifier } from 'ui.notification-manager';

// Simple notification
Notifier.notify({
    id: 'task-assigned-456',
    category: 'tasks',
    title: 'New Task Assigned',
    text: 'You have been assigned to "Implement API integration"',
    icon: '/upload/tasks/icon.png'
});

// Notification with action buttons
const notificationId = 'meeting-reminder-789';
Notifier.notify({
    id: notificationId,
    category: 'calendar',
    title: 'Meeting in 10 minutes',
    text: 'Daily standup with development team',
    button1Text: 'Join Now',
    button2Text: 'Snooze'
});

Notifier.subscribe('click', (event) => {
    const { id, buttonId } = event.getData();
    if (id === notificationId) {
        if (buttonId === 1) {
            window.open('/video-call/room/123', '_blank');
        } else if (buttonId === 2) {
            setTimeout(() => {
                Notifier.notify({
                    id: notificationId + '-snooze',
                    title: 'Meeting starting now',
                    text: 'Daily standup with development team'
                });
            }, 300000); // 5 minutes
        }
    }
});

// Notification with reply field
Notifier.notify({
    id: 'message-234',
    category: 'im',
    title: 'Sarah Johnson',
    text: 'Can you review the latest pull request?',
    inputPlaceholderText: 'Type your reply...'
});

Notifier.subscribe('reply', (event) => {
    const { id, reply } = event.getData();
    if (id === 'message-234') {
        fetch('/api/messages/send', {
            method: 'POST',
            body: JSON.stringify({ chatId: 234, text: reply })
        });
    }
});
```

--------------------------------

### Bitrix CLI Build Commands

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Provides essential commands for the Bitrix CLI build system. This includes building all extensions, building with watch mode for hot-reloading, targeting specific modules or extensions, building from a specific path, running tests, and configuring watch mode with custom file extensions.

```bash
# Build all extensions
bitrix build

# Build with watch mode (hot-reload)
bitrix build --watch

# Build specific modules
bitrix build --modules main,ui,landing

# Build specific extensions
bitrix build --extensions main.core,ui.buttons,landing.main

# Build from specific path
bitrix build --path "./main/install/js/main/loader"

# Build with tests
bitrix build --test

# Watch with custom file extensions
bitrix build --watch=defaults,json,mjs,svg

# Run tests only
bitrix test

# Run tests with watch mode
bitrix test --watch

# Test specific modules
bitrix test --modules main,ui

# Test specific extensions
bitrix test --extensions ui.entity-selector,ui.system.menu
```

--------------------------------

### Create and Manage Popup Windows in JavaScript

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Initialize customizable popup windows with animations, overlays, flexible positioning, and event handlers. The Popup class supports title bars, close buttons, overlay configuration, button actions, and lifecycle events. Popups can be created, shown, retrieved by ID, and closed programmatically using the PopupManager utility.

```javascript
import { Popup, PopupManager } from 'main.popup';

const popup = new Popup({
    id: 'my-popup',
    content: '<h2>User Profile</h2><p>John Doe</p><p>john@example.com</p>',
    titleBar: 'User Information',
    width: 400,
    closeIcon: true,
    closeByEsc: true,
    autoHide: true,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    animation: 'fading-slide',
    buttons: [
        new BX.UI.Button({
            text: 'Edit Profile',
            color: BX.UI.Button.Color.PRIMARY,
            onclick: () => {
                console.log('Edit clicked');
                popup.close();
            }
        })
    ],
    events: {
        onShow: () => console.log('Popup opened'),
        onClose: () => console.log('Popup closed'),
        onDestroy: () => console.log('Popup destroyed')
    }
});

popup.show();

// Get existing popup by ID
const existingPopup = PopupManager.getPopupById('my-popup');
if (existingPopup) {
    existingPopup.close();
}
```

--------------------------------

### Vue 3 Application Entry Point (application/user-manager/src/app.js)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

The main entry point for the User Manager application. It uses 'ui.vue3.BitrixVue' to create and mount the Vue application, registering the 'UserList' component and the Vuex store. It depends on 'ui.vue3.BitrixVue', 'component/user-list', and 'core/store'.

```javascript
// Application Entry: application/user-manager/src/app.js
import { BitrixVue } from 'ui.vue3';
import { UserList } from './component/user-list';
import { Store } from './core/store';

export class UserManager {
    static create(container, options = {}) {
        const app = BitrixVue.createApp({
            components: { UserList },
            template: '<UserList />'
        });

        app.use(Store);
        app.mount(container);

        return app;
    }
}
```

--------------------------------

### Add Informational Tooltips Declaratively (HTML)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Shows how to use data attributes in HTML to declaratively add hint tooltips to elements. Supports simple text, rich HTML content, interactivity, and disabling the default icon. No JavaScript dependencies are required for this usage.

```html
<!-- Declarative usage -->
<span data-hint="This is a simple tooltip"></span>

<span
    data-hint="Click <a href='/docs'>here</a> for documentation"
    data-hint-html
    data-hint-interactivity>
</span>

<button
    data-hint="Save changes to the database"
    data-hint-no-icon>
    Save
</button>
```

--------------------------------

### Popup Component API

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

This section details the usage of the Popup component for creating and managing customizable popup windows. It includes options for content, title bar, size, behavior, and event handling.

```APIDOC
## Popup Component

### Description

Create and manage customizable popup windows with animations, overlays, and flexible positioning. The Popup component allows for rich content, a title bar, close icons, and various behavioral options like auto-hiding and closing by escape key.

### Method

`new Popup(options)`

### Parameters

#### Options (Object)

- **id** (string) - Optional - A unique identifier for the popup.
- **content** (string | HTMLElement) - Required - The HTML content or DOM element to display inside the popup.
- **titleBar** (string) - Optional - The text to display in the popup's title bar.
- **width** (number) - Optional - The width of the popup in pixels.
- **closeIcon** (boolean) - Optional - Whether to display a close icon in the title bar. Defaults to `false`.
- **closeByEsc** (boolean) - Optional - Whether to close the popup when the Escape key is pressed. Defaults to `false`.
- **autoHide** (boolean) - Optional - Whether to automatically hide the popup when clicking outside of it. Defaults to `false`.
- **overlay** (object) - Optional - Configuration for the overlay behind the popup.
  - **backgroundColor** (string) - The background color of the overlay.
  - **opacity** (number) - The opacity of the overlay.
- **animation** (string) - Optional - The type of animation to use for showing/hiding the popup (e.g., 'fading-slide').
- **buttons** (Array<BX.UI.Button>) - Optional - An array of BX.UI.Button objects to display at the bottom of the popup.
- **events** (object) - Optional - An object containing event handlers.
  - **onShow** (function) - Callback function when the popup is shown.
  - **onClose** (function) - Callback function when the popup is closed.
  - **onDestroy** (function) - Callback function when the popup is destroyed.

### Methods

- **`show()`**: Displays the popup.
- **`close()`**: Closes the popup.
- **`destroy()`**: Removes the popup from the DOM.

### Static Methods

- **`PopupManager.getPopupById(id)`**: Retrieves an existing popup instance by its ID.

### Request Example

```javascript
import { Popup, PopupManager } from 'main.popup';

const popup = new Popup({
    id: 'my-popup',
    content: '<h2>User Profile</h2><p>John Doe</p><p>john@example.com</p>',
    titleBar: 'User Information',
    width: 400,
    closeIcon: true,
    closeByEsc: true,
    autoHide: true,
    overlay: {
        backgroundColor: '#000',
        opacity: 0.5
    },
    animation: 'fading-slide',
    buttons: [
        new BX.UI.Button({
            text: 'Edit Profile',
            color: BX.UI.Button.Color.PRIMARY,
            onclick: () => {
                console.log('Edit clicked');
                popup.close();
            }
        })
    ],
    events: {
        onShow: () => console.log('Popup opened'),
        onClose: () => console.log('Popup closed'),
        onDestroy: () => console.log('Popup destroyed')
    }
});

popup.show();

// Get existing popup by ID
const existingPopup = PopupManager.getPopupById('my-popup');
if (existingPopup) {
    existingPopup.close();
}
```

### Response

This component primarily interacts with the DOM and does not return explicit data in a typical API response. Success is indicated by the visual rendering and behavior of the popup. Errors might be logged to the console.

#### Success Response

N/A

#### Response Example

N/A
```

--------------------------------

### Menu Component API

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

This section explains how to use the Menu component to create context menus with various features like sections, icons, counters, and nested submenus.

```APIDOC
## Menu Component

### Description

Build context menus with sections, icons, counters, and nested submenus. The Menu component is highly customizable, allowing for rich interfaces for user actions.

### Method

`new Menu(options)`

### Parameters

#### Options (Object)

- **bindElement** (HTMLElement | string) - Required - The element to which the menu will be bound.
- **sections** (Array<object>) - Optional - An array of objects defining menu sections.
  - **code** (string) - Unique code for the section.
  - **title** (string) - Display title for the section.
  - **design** (string) - Optional - Design variant for the section (e.g., `MenuSectionDesign.Accent`).
- **items** (Array<object | null>) - Required - An array of menu item objects or `null` for separators.
  - **id** (string) - Unique identifier for the menu item.
  - **sectionCode** (string) - The code of the section this item belongs to.
  - **title** (string) - The main text of the menu item.
  - **subtitle** (string) - Optional - A secondary text for the menu item.
  - **icon** (string) - Optional - CSS class for an icon (e.g., 'ui-icon-set --pencil-40').
  - **onClick** (function) - Callback function executed when the item is clicked.
  - **counter** (object) - Optional - Configuration for a counter displayed next to the item.
    - **value** (number) - The counter value.
    - **color** (string) - The color of the counter (e.g., 'success').
  - **subMenu** (object) - Optional - Configuration for a nested submenu.
    - **items** (Array<object | null>) - Array of submenu items (same structure as main items).
  - **design** (string) - Optional - Design variant for the item (e.g., `MenuItemDesign.Alert`).
  - **isLocked** (boolean) - Optional - Whether the item is locked.
- **richHeader** (object) - Optional - Configuration for a rich header above the menu items.
  - **title** (string) - The title text for the header.
  - **subtitle** (string) - The subtitle text for the header.
  - **design** (string) - Optional - Design variant for the header.
- **closeOnItemClick** (boolean) - Optional - Whether to close the menu automatically when an item is clicked. Defaults to `false`.

### Methods

- **`show()`**: Displays the menu relative to the `bindElement`.
- **`close()`**: Closes the menu.
- **`destroy()`**: Removes the menu from the DOM.

### Request Example

```javascript
import { Menu, MenuItemDesign, MenuSectionDesign } from 'ui.system.menu';

const menu = new Menu({
    bindElement: document.getElementById('menu-button'),
    sections: [
        { code: 'main', title: 'Actions' },
        { code: 'danger', title: 'Danger Zone', design: MenuSectionDesign.Accent }
    ],
    items: [
        {
            id: 'edit',
            sectionCode: 'main',
            title: 'Edit Document',
            subtitle: 'Modify content',
            icon: 'ui-icon-set --pencil-40',
            onClick: () => console.log('Edit clicked'),
            counter: { value: 5, color: 'success' }
        },
        {
            id: 'share',
            sectionCode: 'main',
            title: 'Share',
            icon: 'ui-icon-set --share',
            subMenu: {
                items: [
                    { id: 'email', title: 'Send via Email', onClick: () => console.log('Email') },
                    { id: 'link', title: 'Copy Link', onClick: () => console.log('Copy link') }
                ]
            }
        },
        null, // Simple delimiter
        {
            id: 'delete',
            sectionCode: 'danger',
            title: 'Delete',
            design: MenuItemDesign.Alert,
            isLocked: false,
            onClick: () => {
                if (confirm('Are you sure?')) {
                    console.log('Deleted');
                }
            }
        }
    ],
    richHeader: {
        title: 'Document Actions',
        subtitle: 'Select an action',
        design: 'default'
    },
    closeOnItemClick: true
});

menu.show();
```

### Response

Similar to the Popup component, the Menu component primarily manipulates the DOM. Success is indicated by the menu's appearance and functionality. Errors are typically logged to the console.

#### Success Response

N/A

#### Response Example

N/A
```

--------------------------------

### User Service Provider (provider/users-service.js)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Implements a service provider for fetching and managing user data. It interacts with an API client and the application's Vuex store to fetch users and update the store's state. It handles loading states and error logging. Dependencies include 'myapp.lib.api-client' and 'myapp.core'.

```javascript
// Provider (Service): provider/users-service.js
import { apiClient } from 'myapp.lib.api-client';
import { Core } from 'myapp.core';

export const usersService = new class {
    get $store() {
        return Core.getStore();
    }

    async fetchAll() {
        try {
            this.$store.commit('users/setLoading', true);
            const data = await apiClient.post('Users.list', {});
            await this.$store.dispatch('users/upsert', data.users);
            return data.users;
        } catch (error) {
            console.error('Failed to fetch users:', error);
            return [];
        } finally {
            this.$store.commit('users/setLoading', false);
        }
    }

    async getById(id) {
        try {
            const data = await apiClient.post('Users.get', { id });
            await this.$store.dispatch('users/upsert', data.user);
            return data.user;
        } catch (error) {
            console.error('Failed to fetch user:', error);
            return null;
        }
    }
}();
```

--------------------------------

### Build Context Menus with Sections and Submenus in JavaScript

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Create context menus with multiple sections, icons, counters, nested submenus, and custom item designs. The Menu component supports rich headers, item onClick handlers, section organization, menu item design variants, and automatic close behavior. Items can include subtitles, counters with color coding, and locked states.

```javascript
import { Menu, MenuItemDesign, MenuSectionDesign } from 'ui.system.menu';

const menu = new Menu({
    bindElement: document.getElementById('menu-button'),
    sections: [
        { code: 'main', title: 'Actions' },
        { code: 'danger', title: 'Danger Zone', design: MenuSectionDesign.Accent }
    ],
    items: [
        {
            id: 'edit',
            sectionCode: 'main',
            title: 'Edit Document',
            subtitle: 'Modify content',
            icon: 'ui-icon-set --pencil-40',
            onClick: () => console.log('Edit clicked'),
            counter: { value: 5, color: 'success' }
        },
        {
            id: 'share',
            sectionCode: 'main',
            title: 'Share',
            icon: 'ui-icon-set --share',
            subMenu: {
                items: [
                    { id: 'email', title: 'Send via Email', onClick: () => console.log('Email') },
                    { id: 'link', title: 'Copy Link', onClick: () => console.log('Copy link') }
                ]
            }
        },
        null,
        {
            id: 'delete',
            sectionCode: 'danger',
            title: 'Delete',
            design: MenuItemDesign.Alert,
            isLocked: false,
            onClick: () => {
                if (confirm('Are you sure?')) {
                    console.log('Deleted');
                }
            }
        }
    ],
    richHeader: {
        title: 'Document Actions',
        subtitle: 'Select an action',
        design: 'default'
    },
    closeOnItemClick: true
});

menu.show();
```

--------------------------------

### Vuex User Model (model/users.js)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

Defines the Vuex module for managing user data. It includes state for user items and loading status, getters for accessing users, mutations for updating state, and actions for asynchronous operations like upserting users. This module is namespaced under 'users'.

```javascript
// Model (Vuex Module): model/users.js
export const usersModule = {
    namespaced: true,
    state: () => ({
        items: new Map(),
        loading: false
    }),
    getters: {
        getAll: (state) => Array.from(state.items.values()),
        getById: (state) => (id) => state.items.get(id)
    },
    mutations: {
        setUsers(state, users) {
            users.forEach(user => {
                state.items.set(user.id, user);
            });
        },
        setLoading(state, loading) {
            state.loading = loading;
        }
    },
    actions: {
        async upsert({ commit }, users) {
            commit('setUsers', Array.isArray(users) ? users : [users]);
        }
    }
};
```

--------------------------------

### MessageBox Dialog for Alerts and Confirmations

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

The MessageBox component provides functionality to display alert and confirmation dialogs with customizable buttons. It supports simple alerts, confirmation prompts with callbacks for user actions, and custom multi-button dialogs.

```javascript
import { MessageBox, MessageBoxButtons } from 'ui.dialogs.messagebox';

// Simple alert
MessageBox.alert('Changes saved successfully!', 'Success', () => {
    console.log('Alert acknowledged');
});

// Confirmation dialog
MessageBox.confirm(
    'This will permanently delete all selected items. Continue?',
    (messageBox) => {
        console.log('User confirmed deletion');
        // Perform deletion
        fetch('/api/items/delete', { method: 'POST', body: JSON.stringify({ ids: [1, 2, 3] }) })
            .then(response => response.json())
            .then(data => {
                messageBox.close();
                MessageBox.alert('Items deleted successfully');
            })
            .catch(error => {
                messageBox.close();
                MessageBox.alert('Error: ' + error.message);
            });
    },
    'Delete',
    (messageBox) => {
        console.log('User cancelled');
        messageBox.close();
    }
);

// Custom multi-button dialog
const box = new MessageBox({
    message: 'You have unsaved changes. What would you like to do?',
    title: 'Unsaved Changes',
    buttons: MessageBoxButtons.YES_NO_CANCEL,
    onYes: (messageBox) => {
        console.log('Save and continue');
        saveChanges().then(() => messageBox.close());
    },
    onNo: (messageBox) => {
        console.log('Discard changes');
        messageBox.close();
    },
    onCancel: (messageBox) => {
        console.log('Stay on page');
        messageBox.close();
    },
    modal: true
});

box.show();
```

--------------------------------

### Entity Selector Dialog for User and Department Selection

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

The Entity Selector Dialog allows users to select various objects like users, departments, and CRM entities. It supports searching and filtering, with options for multiple selections and pre-selected items. Events for item selection and deselection are handled.

```javascript
import { Dialog, TagSelector } from 'ui.entity-selector';

const tagSelector = new TagSelector({
    dialogOptions: {
        context: 'PROJECT_MEMBERS',
        multiple: true,
        enableSearch: true,
        entities: [
            {
                id: 'user',
                options: {
                    inviteEmployeeLink: false,
                    intranetUsersOnly: true
                }
            },
            {
                id: 'department',
                options: {
                    selectMode: 'usersAndDepartments'
                }
            }
        ],
        preselectedItems: [
            ['user', 1],
            ['user', 15],
            ['department', 3]
        ],
        events: {
            'Item:onSelect': (event) => {
                const { item } = event.getData();
                console.log('Selected:', item.getId(), item.getTitle());
            },
            'Item:onDeselect': (event) => {
                const { item } = event.getData();
                console.log('Deselected:', item.getId());
            }
        }
    }
});

const container = document.getElementById('tag-selector-container');
tagSelector.renderTo(container);

// Get all selected items
const selectedItems = tagSelector.getDialog().getSelectedItems();
selectedItems.forEach(item => {
    console.log(`${item.getEntityId()}: ${item.getId()} - ${item.getTitle()}`);
});
```

--------------------------------

### API Client Service for Data Fetching and State Management

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/vue.md

Сервис для взаимодействия с API и управления состоянием данных. Отвечает за выполнение POST-запросов к API, нормализацию полученных данных (DTO в Model), сохранение их в Vuex Store через dispatch, и обработку ошибок. Реализован как Singleton.

```javascript
import { apiClient } from 'performan.lib.api-client';
import { Core } from 'performan.core';
import { Models } from 'performan.const';

export const campaignService = new class {
	get $store() {
		return Core.getStore();
	}

	afterc
	async getById(id) {
		try {
			// 1. Запрос к API
			const data = await apiClient.post('Campaign.get', { id });
			
			// 2. Сохранение в Store (нормализация данных)
			await this.$store.dispatch(`${Models.Campaigns}/upsert`, data);
			
			return data;
		} catch (error) {
			console.error('Campaign load error', error);
			return null;
		}
	}
}();

```

--------------------------------

### Vue Application Root Component

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/vue.md

Корневой компонент Vue приложения, отвечающий за рендеринг макета и подключение видов. Делегирует бизнес-логику дочерним компонентам или Vuex Store. Использует Vue 3 Composition API и JSX-подобный синтаксис для шаблонов.

```javascript
import { ViewMode } from './enum/view-mode';
import { QuestionsView } from './view/questions-view';
import { AnswerView } from './view/answer-view';

// @vue/component
export const App = {
	components: {
		QuestionsView,
		AnswerView,
	},
	props: {
		relationId: { type: Number, default: 0 },
		mode: { type: String, default: ViewMode.FILL },
	},
	setup() {
		return { ViewMode };
	},
	computed: {
		isViewMode() {
			return this.mode === ViewMode.VIEW;
		},
	},
	template: `
		<div class="performan__answer-card-app">
			<AnswerView v-if="isViewMode" :relationId="relationId" />
			<QuestionsView v-else :relationId="relationId" />
		</div>
	`,
};

```

--------------------------------

### SidePanel Slider for Page Navigation and Communication

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

The SidePanel component allows opening pages in slide-out panels without full page reloads. It supports opening URLs, custom content via callbacks, and inter-panel communication using postMessage and subscribe methods.

```javascript
import { SidePanel } from 'main.sidepanel';

// Open URL in slider
SidePanel.Instance.open('/crm/deal/details/123/', {
    width: 1000,
    cacheable: false,
    allowChangeHistory: true,
    events: {
        onLoad: (event) => {
            console.log('Slider content loaded');
        },
        onCloseComplete: (event) => {
            console.log('Slider closed');
            // Reload grid or update data
            BX.Main.gridManager.reload('deals-grid');
        }
    },
    label: {
        text: 'New Deal',
        color: '#4CAF50'
    }
});

// Open with custom content
SidePanel.Instance.open('custom-form', {
    width: 800,
    contentCallback: (slider) => {
        return new Promise((resolve) => {
            const form = document.createElement('div');
            form.innerHTML = `
                <form id="my-form">
                    <h2>Create New Item</h2>
                    <input type="text" name="title" placeholder="Title" />
                    <textarea name="description" placeholder="Description"></textarea>
                    <button type="submit">Save</button>
                </form>
            `;
            resolve(form);
        });
    }
});

// Post message from child slider to parent
SidePanel.Instance.postMessage(window.parent, 'deal-created', { dealId: 123 });

// Subscribe to messages in parent
SidePanel.Instance.subscribe('deal-created', (event) => {
    const { dealId } = event.getData();
    console.log('New deal created:', dealId);
});
```

--------------------------------

### User List Component (component/user-list.js)

Source: https://context7.com/andrushin-anton/bx-components/llms.txt

A Vue 3 component that displays a list of users. It utilizes Vuex getters to access user data and loading status from the store. The component fetches all users when mounted and renders them, including a loading indicator. Dependencies include 'ui.vue3.vuex' and the 'usersService'.

```javascript
// Component: component/user-list.js
import { mapGetters } from 'ui.vue3.vuex';
import { usersService } from '../provider/users-service';

export const UserList = {
    name: 'UserList',
    computed: {
        ...mapGetters({
            users: 'users/getAll',
            loading: 'users/loading'
        })
    },
    mounted() {
        usersService.fetchAll();
    },
    template: `
        <div class="user-list">
            <div v-if="loading" class="loading">Loading users...</div>
            <div v-else>
                <div v-for="user in users" :key="user.id" class="user-item">
                    <img :src="user.avatar" :alt="user.name" />
                    <div>
                        <h3>{{ user.name }}</h3>
                        <p>{{ user.email }}</p>
                    </div>
                </div>
            </div>
        </div>
    `
};
```

--------------------------------

### Import TypeScript Menu Types - TypeScript

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/system-menu-vue.md

Import MenuOptions and MenuItem TypeScript interfaces from ui.system.menu for type safety when working with menu configurations and menu item definitions.

```typescript
import type { MenuOptions, MenuItem } from 'ui.system.menu';
```

--------------------------------

### Vuex Store Data Retrieval in Component

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/vue.md

Пример компонента Vue, который извлекает данные пользователей из Vuex Store. Использует mapGetters для удобного маппинга геттеров стора к локальным вычисляемым свойствам. Данные хранятся в нормализованном виде.

```javascript
import { mapGetters } from 'ui.vue3.vuex';
import { Models } from 'performan.const';

export const UserList = {
	computed: {
		...mapGetters({
			users: `${Models.Users}/getAll`, // Получение данных из стора
		}),
	},
	template: `
		<div v-for="user in users" :key="user.id">
			{{ user.name }}
		</div>
	`
};

```

--------------------------------

### Import BMenu Component and Types - Vue/TypeScript

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/system-menu-vue.md

Import the BMenu component and associated TypeScript types from the ui.system.menu.vue module. These imports are required to use the menu component and define its configuration options.

```typescript
import { BMenu } from 'ui.system.menu.vue';
import type { MenuOptions, MenuItem } from 'ui.system.menu';
```

--------------------------------

### Vue Reusable UI Date Picker Component

Source: https://github.com/andrushin-anton/bx-components/blob/main/ui/vue.md

Переиспользуемый UI компонент для выбора даты. Принимает текущую дату через props и уведомляет о ее изменении через emit. Использует стороннюю библиотеку 'ui.date-picker' для функциональности выбора даты и управляет DOM-элементом через ref.

```javascript
import { DatePicker } from 'ui.date-picker';
import './style.css';

// @vue/component
export const UiDatePicker = {
	name: 'UiDatePicker',
	props: {
		date: { type: String, required: true },
	},
	emits: ['update:date'],
	mounted() {
		this.initPicker();
	},
	methods: {
		initPicker() {
			new DatePicker({
				targetNode: this.$refs.container,
				onSelect: (date) => this.$emit('update:date', date)
			});
		}
	},
	template: `
		<div ref="container" class="ui-date-picker-wrapper">
			{{ date }}
		</div>
	`,
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.