@dxtmisha/wiki 0.39.1 → 0.39.3

package/src/media/functional/functional/classes/DesignComponents/DesignComponents.en.mdx

@@ -0,0 +1,94 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DesignComponents - Base Components Manager'/>
+
+# DesignComponents Class
+
+A base class for working with connected components and managing their rendering logic within a design system. It allows for component registration, modification of their default properties, and flexible VNode generation.
+
+## Key Features
+
+- **Component Management** — centralized registration and retrieval of Vue components.
+- **Dynamic Modifications** — supports applying global or specific property modifications to components before rendering.
+- **Flexible Rendering** — provides multiple methods (`render`, `renderOne`, `renderAdd`) for generating Vue VNodes with automatic property binding.
+- **Performance Optimization** — uses internal caching with Vue `computed` properties for property modifications.
+
+## Initialization
+
+Creates a new `DesignComponents` instance. The class combines components and their modifications into a single rendering management mechanism.
+
+### Generic Constraints
+
+The class uses generics to ensure flexible rendering type configuration:
+- `COMP extends ConstrComponent` — An object with a list of available components. Defines the structure by which `DesignComponents` will look up and return components for rendering.
+- `P extends ConstrItem` — The property (props) type used for typing modifications and data passed during rendering.
+
+**Parameters:**
+- `components: COMP = {}` — a list of connected components (an object where keys are names and values are Vue components).
+- `modification?: ConstrComponentMod<P>` — a modification object that allows overriding props for each component.
+
+```typescript
+import { DesignComponents } from '@dxtmisha/functional'
+import MyButton from './MyButton.vue'
+import MyInput from './MyInput.vue'
+
+// 1. Component registration
+const components = {
+  button: MyButton,
+  input: MyInput
+}
+
+// 2. Defining modifications (default props)
+const modification = {
+  button: { size: 'large', color: 'primary' },
+  input: { focus: true }
+}
+
+const design = new DesignComponents(components, modification)
+```
+
+
+## Rendering Methods
+
+### `render`
+
+Renders a component by its name and returns an array containing a single `VNode`. This is useful for Vue, which often expects arrays of nodes.
+
+**Parameters:**
+- `name: string` — The name of the registered component.
+- `props: object` — Properties passed to the component.
+- `children: any` — Sub-elements or slots of the component.
+- `index: string` — The key for the VNode.
+
+**Returns:** `VNode[]` — An array containing the generated VNode.
+
+### `renderOne`
+
+Renders a single component and returns the `VNode` object directly. If the component is not found, it returns `undefined`.
+
+**Parameters:**
+- `name: string` — The name of the registered component.
+- `props: object` — Properties for the component.
+- `children: any` — Sub-elements of the component.
+- `index: string` — The key for the VNode.
+
+**Returns:** `VNode | undefined` — The VNode object or `undefined`.
+
+### `renderAdd`
+
+Renders a component and pushes the resulting `VNode` into a provided array. This allows for collecting multiple nodes in a single pass.
+
+**Parameters:**
+- `item: any[]` — The array to which the rendering result will be added.
+- `name: string` — The name of the component.
+- `props: object` — Properties for the component.
+- `children: any` — Sub-elements of the component.
+- `index: string` — The key for the VNode.
+
+**Returns:** `this` — A reference to the current instance for method chaining.
+
+## Additional Methods
+
+- `is(name: string): boolean` — Checks if a specific component is registered.
+- `get(name: string): COMP[K]` — Returns the registered component object by its name.
+- `getModification(index?: string, props?: object): object | undefined` — Returns modified input data for connected components.

package/src/media/functional/functional/classes/DesignComponents/DesignComponents.ru.mdx

@@ -0,0 +1,94 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DesignComponents - Базовый менеджер компонентов'/>
+
+# Класс DesignComponents
+
+Базовый класс для работы с подключенными компонентами и управления логикой их рендеринга в рамках дизайн-системы. Позволяет регистрировать компоненты, модифицировать их свойства по умолчанию и гибко генерировать VNode.
+
+## Ключевые особенности
+
+- **Управление компонентами** — централизованная регистрация и получение Vue-компонентов.
+- **Динамические модификации** — поддержка применения глобальных или специфических модификаций свойств к компонентам перед рендерингом.
+- **Гибкий рендеринг** — предоставляет несколько методов (`render`, `renderOne`, `renderAdd`) для генерации Vue VNode с автоматической привязкой свойств.
+- **Оптимизация производительности** — использует внутреннее кэширование с помощью вычисляемых свойств Vue (`computed`) для модификаций свойств.
+
+## Инициализация
+
+Создает новый экземпляр `DesignComponents`. Класс позволяет объединять компоненты и их модификации в единый механизм управления рендерингом.
+
+### Ограничения дженериков (Generic Constraints)
+
+Класс использует дженерики для обеспечения гибкой настройки типов рендеринга:
+- `COMP extends ConstrComponent` — Объект со списком доступных компонентов. Определяет структуру, по которой `DesignComponents` будет искать и возвращать компоненты для рендеринга.
+- `P extends ConstrItem` — Тип свойств (props), который используется для типизации модификаций и передаваемых данных при рендеринге.
+
+**Параметры:**
+- `components: COMP = {}` — список подключаемых компонентов (объект, где ключи — названия, а значения — Vue-компоненты).
+- `modification?: ConstrComponentMod<P>` — объект модификаций, позволяющий переопределять свойства (props) для каждого компонента.
+
+```typescript
+import { DesignComponents } from '@dxtmisha/functional'
+import MyButton from './MyButton.vue'
+import MyInput from './MyInput.vue'
+
+// 1. Регистрация компонентов
+const components = {
+  button: MyButton,
+  input: MyInput
+}
+
+// 2. Определение модификаций (props по умолчанию)
+const modification = {
+  button: { size: 'large', color: 'primary' },
+  input: { focus: true }
+}
+
+const design = new DesignComponents(components, modification)
+```
+
+
+## Методы рендеринга
+
+### `render`
+
+Рендерит компонент по его имени и возвращает массив, содержащий один `VNode`. Это полезно для Vue, где часто требуются массивы узлов.
+
+**Параметры:**
+- `name: string` — Название зарегистрированного компонента.
+- `props: object` — Свойства, передаваемые компоненту.
+- `children: any` — Дочерние элементы или слоты.
+- `index: string` — Ключ (key) для VNode.
+
+**Возвращает:** `VNode[]` — Массив, содержащий сгенерированный VNode.
+
+### `renderOne`
+
+Рендерит один компонент и возвращает объект `VNode` напрямую. Если компонент не найден, возвращает `undefined`.
+
+**Параметры:**
+- `name: string` — Название зарегистрированного компонента.
+- `props: object` — Свойства для компонента.
+- `children: any` — Дочерние элементы.
+- `index: string` — Ключ (key) для VNode.
+
+**Возвращает:** `VNode | undefined` — Объект VNode или `undefined`.
+
+### `renderAdd`
+
+Рендерит компонент и добавляет полученный `VNode` в предоставленный массив. Позволяет собирать список узлов в один проход.
+
+**Параметры:**
+- `item: any[]` — Массив, в который будет добавлен результат рендеринга.
+- `name: string` — Название компонента.
+- `props: object` — Свойства для компонента.
+- `children: any` — Дочерние элементы.
+- `index: string` — Ключ (key) для VNode.
+
+**Возвращает:** `this` — Ссылка на текущий экземпляр для цепочки вызовов.
+
+## Дополнительные методы
+
+- `is(name: string): boolean` — Проверяет наличие зарегистрированного компонента.
+- `get(name: string): COMP[K]` — Возвращает объект зарегистрированного компонента по его имени.
+- `getModification(index?: string, props?: object): object | undefined` — Возвращает модифицированные входные данные для подключенных компонентов.

package/src/media/functional/functional/classes/DesignComponents/DesignComponents.vi.mdx

@@ -0,0 +1,94 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DesignComponents - Trình quản lý thành phần cơ sở'/>
+
+# Lớp DesignComponents
+
+Lớp cơ sở để làm việc với các thành phần kết nối (connected components) và quản lý logic render của chúng trong hệ thống thiết kế. Nó cho phép đăng ký thành phần, sửa đổi các thuộc tính mặc định và tạo VNode một cách linh hoạt.
+
+## Các tính năng chính
+
+- **Quản lý thành phần** — đăng ký và truy xuất các thành phần Vue một cách tập trung.
+- **Sửa đổi động** — hỗ trợ áp dụng các sửa đổi thuộc tính toàn cục hoặc cụ thể cho các thành phần trước khi render.
+- **Render linh hoạt** — cung cấp nhiều phương thức (`render`, `renderOne`, `renderAdd`) để tạo Vue VNode với tính năng tự động liên kết thuộc tính (binding).
+- **Tối ưu hóa hiệu suất** — sử dụng bộ nhớ đệm nội bộ với các thuộc tính `computed` của Vue cho các sửa đổi thuộc tính.
+
+## Khởi tạo
+
+Tạo một thực thể `DesignComponents` mới. Lớp này kết hợp các thành phần và các sửa đổi của chúng vào một cơ chế quản lý hiển thị duy nhất.
+
+### Ràng buộc Generic (Generic Constraints)
+
+Lớp này sử dụng các generic để đảm bảo cấu hình kiểu render linh hoạt:
+- `COMP extends ConstrComponent` — Một đối tượng chứa danh sách các thành phần có sẵn. Xác định cấu trúc mà `DesignComponents` sẽ sử dụng để tìm kiếm và trả về các thành phần để render.
+- `P extends ConstrItem` — Kiểu thuộc tính (props) được sử dụng để định kiểu cho các sửa đổi và dữ liệu được truyền trong quá trình render.
+
+**Tham số:**
+- `components: COMP = {}` — danh sách các thành phần được kết nối (một đối tượng trong đó khóa là tên và giá trị là các thành phần Vue).
+- `modification?: ConstrComponentMod<P>` — một đối tượng sửa đổi cho phép ghi đè các thuộc tính (props) cho mỗi thành phần.
+
+```typescript
+import { DesignComponents } from '@dxtmisha/functional'
+import MyButton from './MyButton.vue'
+import MyInput from './MyInput.vue'
+
+// 1. Đăng ký thành phần
+const components = {
+  button: MyButton,
+  input: MyInput
+}
+
+// 2. Xác định các sửa đổi (props mặc định)
+const modification = {
+  button: { size: 'large', color: 'primary' },
+  input: { focus: true }
+}
+
+const design = new DesignComponents(components, modification)
+```
+
+
+## Các phương thức Render
+
+### `render`
+
+Render một thành phần theo tên và trả về một mảng chứa một `VNode` duy nhất. Điều này hữu ích cho Vue, nơi thường yêu cầu các mảng nút.
+
+**Tham số:**
+- `name: string` — Tên của thành phần đã đăng ký.
+- `props: object` — Các thuộc tính được truyền cho thành phần.
+- `children: any` — Các phần tử con hoặc slot của thành phần.
+- `index: string` — Khóa (key) cho VNode.
+
+**Trả về:** `VNode[]` — Một mảng chứa VNode đã được tạo.
+
+### `renderOne`
+
+Render một thành phần duy nhất và trả về đối tượng `VNode` trực tiếp. Nếu không tìm thấy thành phần, nó sẽ trả về `undefined`.
+
+**Tham số:**
+- `name: string` — Tên của thành phần đã đăng ký.
+- `props: object` — Các thuộc tính cho thành phần.
+- `children: any` — Các phần tử con của thành phần.
+- `index: string` — Khóa (key) cho VNode.
+
+**Trả về:** `VNode | undefined` — Đối tượng VNode hoặc `undefined`.
+
+### `renderAdd`
+
+Render một thành phần và đẩy `VNode` kết quả vào một mảng được cung cấp. Điều này cho phép thu thập nhiều nút trong một lần thực thi.
+
+**Tham số:**
+- `item: any[]` — Mảng mà kết quả render sẽ được thêm vào.
+- `name: string` — Tên của thành phần.
+- `props: object` — Các thuộc tính cho thành phần.
+- `children: any` — Các phần tử con của thành phần.
+- `index: string` — Khóa (key) cho VNode.
+
+**Trả về:** `this` — Một tham chiếu đến instance hiện tại để thực hiện chuỗi lệnh (chaining).
+
+## Các phương thức bổ sung
+
+- `is(name: string): boolean` — Kiểm tra xem một thành phần có được đăng ký hay không.
+- `get(name: string): COMP[K]` — Trả về đối tượng thành phần đã đăng ký theo tên.
+- `getModification(index?: string, props?: object): object | undefined` — Trả về dữ liệu đầu vào đã sửa đổi cho các thành phần kết nối.

package/src/media/functional/functional/classes/DesignConstructorAbstract/DesignConstructorAbstract.en.mdx

@@ -0,0 +1,82 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DesignConstructorAbstract - Base Constructor Logic'/>
+
+# DesignConstructorAbstract Class
+
+An abstract base class that provides a standardized structure for component constructor logic. It facilitates the management of component data, styles, and state-driven modifications.
+
+## Key Features
+
+- **Standardized Data Structure** — handles component properties, classes, and styles.
+- **State Integration** — reactive updates based on component state.
+- **Flexible Extensions** — a blueprint for specialized design constructors.
+
+## Initialization
+
+`DesignConstructorAbstract` is an abstract base class and cannot be initialized directly. It serves as a foundation for creating functional component constructors, combining the management of styles, classes, components, and rendering.
+
+### Generic Constraints
+
+The class uses a complex system of generics to ensure full typing for the component:
+- `E extends Element` — type of the root HTML element (e.g., `HTMLElement`).
+- `COMP extends ConstrComponent` — a list of connected sub-components.
+- `EMITS extends ConstrItem` — typing for events (emits) generated by the component.
+- `EXPOSE extends ConstrItem` — data structure exported to the external environment via `expose`.
+- `SLOTS extends ConstrItem` — available component slots.
+- `CLASSES extends ConstrClasses` — resulting CSS class object.
+- `P extends ConstrItem` — component properties (props).
+
+**Constructor Parameters:**
+- `name: string` — base component name (used for generating class and style names).
+- `props: Readonly<P>` — an object with component properties.
+- `options?: ConstrOptions<COMP, EMITS, P>` — additional parameters (components, modifications, event handlers, style and class overrides).
+
+```typescript
+import { DesignConstructorAbstract } from '@dxtmisha/functional'
+
+// 1. Defining component interfaces
+interface MyProps { size?: 'small' | 'medium' }
+interface MyClasses { main: { [key: string]: boolean } }
+
+// 2. Implementing the constructor
+class ButtonDesign extends DesignConstructorAbstract<
+  HTMLButtonElement, // E
+  {},                // COMP
+  {},                // EMITS
+  {},                // EXPOSE
+  {},                // SLOTS
+  MyClasses,         // CLASSES
+  MyProps            // P
+> {
+  constructor(name: string, props: MyProps) {
+    super(name, props)
+    this.init()
+  }
+
+  // Required methods to implement
+  protected initExpose() { return {} }
+  protected initClasses() { return { main: { active: true } } }
+  protected initStyles() { return {} }
+  protected initRender() { return h('button', this.getAttrs(), this.slots.default?.()) }
+}
+```
+
+## Lifecycle & Rendering Methods
+
+- `init(): this` — Initializes the instance, preparing internal state, classes, and styles.
+- `render(): Function` — Returns the rendering function for use in the Vue component's `setup()`.
+- `setup(): void` — Executes the main setup sequence for the component logic.
+
+## Naming Helpers
+
+- `getName(): string` — Returns the full component name (e.g., `button-large`).
+- `getDesign(): string` — Returns the base design name (the first part of the name).
+- `getSubClass(name: string | string[]): string` — Generates a BEM-style sub-element class name (`__`).
+- `getStatusClass(name: string | string[]): string` — Generates a BEM-style status class name (`--`).
+- `getStyle(name: string | string[]): string` — Generates a system CSS variable name.
+
+## Component Data
+
+- `getAttrs(): object` — Returns the attributes object, excluding reserved `class` and `style`.
+- `expose(): object` — Returns data and references to be exposed via Vue's `expose`.

package/src/media/functional/functional/classes/DesignConstructorAbstract/DesignConstructorAbstract.ru.mdx

@@ -0,0 +1,82 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DesignConstructorAbstract - Базовая логика конструктора'/>
+
+# Класс DesignConstructorAbstract
+
+Абстрактный базовый класс, предоставляющий стандартизированную структуру для логики конструктора компонентов. Он облегчает управление данными компонентов, стилями и модификациями на основе состояния.
+
+## Ключевые особенности
+
+- **Стандартизированная структура данных** — обработка свойств, классов и стилей.
+- **Интеграция с состоянием** — реактивные обновления на основе состояния компонента.
+- **Гибкие расширения** — основа для создания специализированных конструкторов.
+
+## Инициализация
+
+`DesignConstructorAbstract` является абстрактным базовым классом и не может быть инициализирован напрямую. Он служит основой для создания конструкторов функциональных компонентов, объединяя управление стилями, классами, компонентами и рендерингом.
+
+### Ограничения дженериков (Generic Constraints)
+
+Класс использует сложную систему дженериков для обеспечения полной типизации компонента:
+- `E extends Element` — Тип корневого HTML-элемента (например, `HTMLElement`).
+- `COMP extends ConstrComponent` — Список подключенных подкомпонентов.
+- `EMITS extends ConstrItem` — Типизация событий (emits), генерируемых компонентом.
+- `EXPOSE extends ConstrItem` — Структура данных, экспортируемых во внешнюю среду через `expose`.
+- `SLOTS extends ConstrItem` — Доступные слоты компонента.
+- `CLASSES extends ConstrClasses` — Результирующий объект классов CSS.
+- `P extends ConstrItem` — Свойства (props) компонента.
+
+**Параметры конструктора:**
+- `name: string` — базовое название компонента (используется для генерации имен классов и стилей).
+- `props: Readonly<P>` — объект свойств компонента.
+- `options?: ConstrOptions<COMP, EMITS, P>` — дополнительные параметры (компоненты, модификации, обработчики событий, переопределения стилей и классов).
+
+```typescript
+import { DesignConstructorAbstract } from '@dxtmisha/functional'
+
+// 1. Определение интерфейсов компонента
+interface MyProps { size?: 'small' | 'medium' }
+interface MyClasses { main: { [key: string]: boolean } }
+
+// 2. Реализация конструктора
+class ButtonDesign extends DesignConstructorAbstract<
+  HTMLButtonElement, // E
+  {},                // COMP
+  {},                // EMITS
+  {},                // EXPOSE
+  {},                // SLOTS
+  MyClasses,         // CLASSES
+  MyProps            // P
+> {
+  constructor(name: string, props: MyProps) {
+    super(name, props)
+    this.init()
+  }
+
+  // Обязательные методы для реализации
+  protected initExpose() { return {} }
+  protected initClasses() { return { main: { active: true } } }
+  protected initStyles() { return {} }
+  protected initRender() { return h('button', this.getAttrs(), this.slots.default?.()) }
+}
+```
+
+## Методы жизненного цикла и рендеринга
+
+- `init(): this` — Инициализирует экземпляр, подготавливает внутреннее состояние, классы и стили.
+- `render(): Function` — Возвращает функцию рендеринга для использования в `setup()` Vue-компонента.
+- `setup(): void` — Выполняет основную последовательность настройки логики компонента.
+
+## Вспомогательные методы именования
+
+- `getName(): string` — Возвращает полное название компонента (например, `button-large`).
+- `getDesign(): string` — Возвращает базовое название дизайна (первая часть названия).
+- `getSubClass(name: string | string[]): string` — Генерирует название класса для подэлемента (BEM: `__`).
+- `getStatusClass(name: string | string[]): string` — Генерирует название класса состояния (BEM: `--`).
+- `getStyle(name: string | string[]): string` — Генерирует название системной CSS-переменной.
+
+## Данные компонента
+
+- `getAttrs(): object` — Возвращает атрибуты, исключая зарезервированные `class` и `style`.
+- `expose(): object` — Возвращает данные и ссылки для экспорта через `expose` Vue.

package/src/media/functional/functional/classes/DesignConstructorAbstract/DesignConstructorAbstract.vi.mdx

@@ -0,0 +1,82 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DesignConstructorAbstract - Logic Constructor cơ sở'/>
+
+# Lớp DesignConstructorAbstract
+
+Một lớp cơ sở trừu tượng cung cấp cấu trúc tiêu chuẩn hóa cho logic constructor của thành phần. Nó giúp quản lý dữ liệu thành phần, kiểu dáng và các sửa đổi dựa trên trạng thái.
+
+## Các tính năng chính
+
+- **Cấu trúc dữ liệu tiêu chuẩn hóa** — xử lý các thuộc tính, lớp và kiểu dáng của thành phần.
+- **Tích hợp trạng thái** — cập nhật phản ứng dựa trên trạng thái của thành phần.
+- **Mở rộng linh hoạt** — nền tảng để tạo các specialized constructors.
+
+## Khởi tạo
+
+`DesignConstructorAbstract` là một lớp cơ sở trừu tượng và không thể được khởi tạo trực tiếp. Nó phục vụ như một nền tảng để tạo ra các hàm khởi tạo thành phần chức năng, kết hợp quản lý phong cách (styles), lớp (classes), thành phần và hiển thị (rendering).
+
+### Ràng buộc Generic (Generic Constraints)
+
+Lớp này sử dụng một hệ thống generic phức tạp để đảm bảo định kiểu đầy đủ cho thành phần:
+- `E extends Element` — Kiểu của phần tử HTML gốc (ví dụ: `HTMLElement`).
+- `COMP extends ConstrComponent` — Danh sách các thành phần phụ được kết nối.
+- `EMITS extends ConstrItem` — Định kiểu cho các sự kiện (emits) do thành phần tạo ra.
+- `EXPOSE extends ConstrItem` — Cấu trúc dữ liệu được xuất ra môi trường bên ngoài thông qua `expose`.
+- `SLOTS extends ConstrItem` — Các slot hiện có của thành phần.
+- `CLASSES extends ConstrClasses` — Đối tượng lớp CSS kết quả.
+- `P extends ConstrItem` — Các thuộc tính (props) của thành phần.
+
+**Tham số hàm khởi tạo:**
+- `name: string` — tên thành phần cơ sở (được sử dụng để tạo tên lớp và kiểu dáng).
+- `props: Readonly<P>` — một đối tượng chứa các thuộc tính của thành phần.
+- `options?: ConstrOptions<COMP, EMITS, P>` — các tham số bổ sung (thành phần, sửa đổi, trình xử lý sự kiện, ghi đè kiểu dáng và lớp).
+
+```typescript
+import { DesignConstructorAbstract } from '@dxtmisha/functional'
+
+// 1. Xác định giao diện thành phần
+interface MyProps { size?: 'small' | 'medium' }
+interface MyClasses { main: { [key: string]: boolean } }
+
+// 2. Triển khai hàm khởi tạo
+class ButtonDesign extends DesignConstructorAbstract<
+  HTMLButtonElement, // E
+  {},                // COMP
+  {},                // EMITS
+  {},                // EXPOSE
+  {},                // SLOTS
+  MyClasses,         // CLASSES
+  MyProps            // P
+> {
+  constructor(name: string, props: MyProps) {
+    super(name, props)
+    this.init()
+  }
+
+  // Các phương thức bắt buộc phải triển khai
+  protected initExpose() { return {} }
+  protected initClasses() { return { main: { active: true } } }
+  protected initStyles() { return {} }
+  protected initRender() { return h('button', this.getAttrs(), this.slots.default?.()) }
+}
+```
+
+## Các phương thức Vòng đời & Render
+
+- `init(): this` — Khởi tạo instance, chuẩn bị trạng thái nội bộ, lớp và kiểu dáng.
+- `render(): Function` — Trả về hàm render để sử dụng trong `setup()` của thành phần Vue.
+- `setup(): void` — Thực thi trình tự thiết lập chính cho logic thành phần.
+
+## Các phương thức Hỗ trợ Đặt tên
+
+- `getName(): string` — Trả về tên đầy đủ của thành phần (ví dụ: `button-large`).
+- `getDesign(): string` — Trả về tên thiết kế cơ sở (phần đầu tiên của tên).
+- `getSubClass(name: string | string[]): string` — Tạo tên lớp cho phần tử con theo phong cách BEM (`__`).
+- `getStatusClass(name: string | string[]): string` — Tạo tên lớp trạng thái theo phong cách BEM (`--`).
+- `getStyle(name: string | string[]): string` — Tạo tên biến CSS hệ thống.
+
+## Dữ liệu Thành phần
+
+- `getAttrs(): object` — Trả về đối tượng thuộc tính, loại trừ các thuộc tính `class` và `style` đã được bảo lưu.
+- `expose(): object` — Trả về dữ liệu và tham chiếu để xuất thông qua `expose` của Vue.

package/src/media/functional/functional/classes/EffectScopeGlobal/EffectScopeGlobal.en.mdx

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/EffectScopeGlobal - Global Reactive Scope'/>
+
+# EffectScopeGlobal Class
+
+A utility class that provides a global, detached Vue `effectScope`. This allows running reactive effects (watchers, computed properties) that are not tied to any specific component lifecycle, ensuring they aren't automatically disposed of when a component unmounts.
+
+The scope is initialized lazily upon the first call to `run`, and it is created as a "detached" scope (`effectScope(true)`), meaning it will not be captured by any parent scope.
+
+## Key Features
+
+- **Global Persistence** — effects live as long as the application does.
+- **Detached Scope** — created with `effectScope(true)`, preventing accidental disposal by parent scopes.
+- **Lazy Initialization** — the internal scope is created only when first needed.
+- **Scope Management** — groups global reactive effects together for organized disposal if needed (via the internal scope).
+- **Ease of Use** — simple static method to run any reactive function.
+
+## Actions
+
+### `run`
+
+Executes the provided function within the global effect scope.
+
+**Parameters:**
+- `fn: () => T` — the function to execute (typically containing reactive logic like `watch` or `computed`).
+
+**Returns:** `T | undefined`
+
+```typescript
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+import { watch, ref } from 'vue'
+
+const globalState = ref(0)
+
+// This watcher will persist even if the component that created it is unmounted
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Global state changed:', val)
+  })
+})
+```

package/src/media/functional/functional/classes/EffectScopeGlobal/EffectScopeGlobal.ru.mdx

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/EffectScopeGlobal - Глобальная реактивная область'/>
+
+# Класс EffectScopeGlobal
+
+Утилитарный класс, предоставляющий глобальную, отсоединенную (detached) область `effectScope` Vue. Это позволяет запускать реактивные эффекты (watchers, computed properties), которые не привязаны к жизненному циклу конкретного компонента, гарантируя, что они не будут автоматически удалены при размонтировании компонента.
+
+Область инициализируется лениво при первом вызове `run` и создается как «отсоединенная» (`effectScope(true)`), что означает, что она не будет захвачена никакой родительской областью.
+
+## Ключевые особенности
+
+- **Глобальная устойчивость** — эффекты живут столько же, сколько и приложение.
+- **Отсоединенная область** — создается с помощью `effectScope(true)`, что предотвращает случайное удаление родительскими областями.
+- **Ленивая инициализация** — внутренняя область создается только при первой необходимости.
+- **Управление областью** — группирует глобальные реактивные эффекты вместе для организованного управления.
+- **Простота использования** — простой статический метод для запуска любой реактивной функции.
+
+## Действия
+
+### `run`
+
+Запускает переданную функцию в глобальной области действия эффекта.
+
+**Параметры:**
+- `fn: () => T` — выполняемая функция (обычно содержащая реактивную логику, такую как `watch` или `computed`).
+
+**Возвращает:** `T | undefined`
+
+```typescript
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+import { watch, ref } from 'vue'
+
+const globalState = ref(0)
+
+// Этот watcher будет сохраняться, даже если создавший его компонент будет размонтирован
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Глобальное состояние изменилось:', val)
+  })
+})
+```

package/src/media/functional/functional/classes/EffectScopeGlobal/EffectScopeGlobal.vi.mdx

@@ -0,0 +1,42 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/EffectScopeGlobal - Phạm vi hiệu ứng toàn cục'/>
+
+# Lớp EffectScopeGlobal
+
+Một lớp tiện ích cung cấp `effectScope` Vue toàn cục và tách biệt (detached). Điều này cho phép chạy các hiệu ứng phản ứng (watchers, computed properties) không bị ràng buộc vào vòng đời của bất kỳ thành phần cụ thể nào, đảm bảo chúng không tự động bị hủy khi một thành phần bị gỡ bỏ (unmount).
+
+Phạm vi được khởi tạo lười biếng (lazy) khi gọi `run` lần đầu tiên và được tạo dưới dạng phạm vi "tách biệt" (`effectScope(true)`), có nghĩa là nó sẽ không bị nắm giữ bởi bất kỳ phạm vi cha nào.
+
+## Các tính năng chính
+
+- **Sự tồn tại toàn cục** — các hiệu ứng tồn tại cùng với ứng dụng.
+- **Phạm vi tách biệt** — được tạo với `effectScope(true)`, ngăn chặn việc bị hủy vô tình bởi các phạm vi cha.
+- **Khởi tạo lười biếng** — phạm vi nội bộ chỉ được tạo khi cần thiết lần đầu tiên.
+- **Quản lý phạm vi** — nhóm các hiệu ứng phản ứng toàn cục lại với nhau để quản lý có tổ chức.
+- **Dễ sử dụng** — phương thức tĩnh đơn giản để chạy bất kỳ hàm phản ứng nào.
+
+## Hành động
+
+### `run`
+
+Thực thi hàm được cung cấp trong phạm vi hiệu ứng toàn cục.
+
+**Tham số:**
+- `fn: () => T` — hàm cần thực thi (thường chứa logic phản ứng như `watch` hoặc `computed`).
+
+**Giá trị trả về:** `T | undefined`
+
+```typescript
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+import { watch, ref } from 'vue'
+
+const globalState = ref(0)
+
+// Trình theo dõi (watcher) này sẽ tồn tại ngay cả khi thành phần tạo ra nó được gỡ bỏ
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Trạng thái toàn cục thay đổi:', val)
+  })
+})
+```