@dxtmisha/wiki 0.25.1 → 0.39.2

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

@@ -0,0 +1,60 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DesignChanged - Утилита отслеживания изменений'/>
+
+# Класс DesignChanged
+
+Утилитарный класс, предназначенный для отслеживания изменений в свойствах объекта. Он хранит кэш предыдущих значений и предоставляет методы для обнаружения различий между текущим состоянием и состоянием на момент последнего обновления.
+
+## Ключевые особенности
+
+- **Эффективное сравнение** — сравнивает текущие значения свойств с локальным кэшем для выявления изменений.
+- **Выборочное отслеживание** — поддерживает отслеживание определенного подмножества свойств через параметр `watch`.
+- **Пакетное обновление** — предоставляет способ синхронизации всего кэша с текущим состоянием свойств.
+
+## Инициализация
+
+Создает новый экземпляр `DesignChanged`. Класс предназначен для отслеживания изменений в свойствах объекта путем сравнения их с внутренним кэшем (состоянием на момент последнего обновления).
+
+**Параметры:**
+- `props: T` — объект с данными, свойства которого необходимо отслеживать.
+- `watch: string[] = Object.keys(props)` — массив имен свойств (ключей), за которыми нужно следить. По умолчанию отслеживаются все свойства объекта `props`.
+
+```typescript
+import { DesignChanged } from '@dxtmisha/functional'
+
+// 1. Отслеживание всех свойств по умолчанию
+const props = { title: 'Привет', count: 1 }
+const tracker = new DesignChanged(props)
+
+// 2. Отслеживание конкретных свойств (подмножества)
+const trackerPartial = new DesignChanged(props, ['title'])
+
+console.log(tracker.isChanged()) // false
+```
+
+## Обнаружение изменений
+
+### `is`
+
+Проверяет, были ли изменены определенные свойства с момента последнего обновления.
+
+**Параметры:**
+- `name: string | string[]` — имя одного свойства или массив имен свойств для проверки.
+
+**Возвращает:** `boolean` — `true`, если любое из указанных свойств изменилось.
+
+### `isChanged`
+
+Проверяет, изменилось ли любое из отслеживаемых свойств (определенных в списке `watch`).
+
+**Возвращает:** `boolean` — `true`, если хотя бы одно отслеживаемое свойство имеет другое значение.
+
+## Синхронизация данных
+
+### `update`
+
+Синхронизирует внутренний кэш с текущими значениями всех отслеживаемых свойств. После вызова этого метода `isChanged()` будет возвращать `false` до тех пор, пока свойства не будут изменены снова.
+
+**Возвращает:** `void`
+

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

@@ -0,0 +1,60 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DesignChanged - Tiện ích theo dõi thay đổi'/>
+
+# Lớp DesignChanged
+
+Một lớp tiện ích được thiết kế để theo dõi các thay đổi trong thuộc tính đối tượng. Nó duy trì một bộ nhớ đệm (cache) cho các giá trị trước đó và cung cấp các phương thức để phát hiện sự khác biệt giữa trạng thái hiện tại và trạng thái cập nhật lần cuối.
+
+## Các tính năng chính
+
+- **So sánh hiệu quả** — so sánh các giá trị thuộc tính hiện tại với bộ nhớ đệm cục bộ để xác định các thay đổi.
+- **Theo dõi có chọn lọc** — hỗ trợ theo dõi một tập hợp con cụ thể của các thuộc tính thông qua tham số `watch`.
+- **Cập nhật hàng loạt** — cung cấp cách để đồng bộ hóa toàn bộ bộ nhớ đệm với trạng thái hiện tại của các thuộc tính.
+
+## Khởi tạo
+
+Tạo một thực thể `DesignChanged` mới. Lớp này được thiết kế để theo dõi các thay đổi trong thuộc tính đối tượng bằng cách so sánh chúng với một bộ nhớ đệm nội bộ (trạng thái tại thời điểm cập nhật lần cuối).
+
+**Tham số:**
+- `props: T` — đối tượng dữ liệu có các thuộc tính cần được theo dõi.
+- `watch: string[] = Object.keys(props)` — một mảng gồm các tên thuộc tính (khóa) để theo dõi. Theo mặc định, tất cả các thuộc tính của đối tượng `props` đều được theo dõi.
+
+```typescript
+import { DesignChanged } from '@dxtmisha/functional'
+
+// 1. Theo dõi tất cả các thuộc tính theo mặc định
+const props = { title: 'Xin chào', count: 1 }
+const tracker = new DesignChanged(props)
+
+// 2. Theo dõi các thuộc tính cụ thể (tập hợp con)
+const trackerPartial = new DesignChanged(props, ['title'])
+
+console.log(tracker.isChanged()) // false
+```
+
+## Phát hiện thay đổi
+
+### `is`
+
+Kiểm tra xem các thuộc tính cụ thể có bị thay đổi kể từ lần cập nhật cuối cùng hay không.
+
+**Tham số:**
+- `name: string | string[]` — tên của một thuộc tính hoặc một mảng các tên thuộc tính cần kiểm tra.
+
+**Trả về:** `boolean` — `true` nếu bất kỳ thuộc tính nào được chỉ định đã thay đổi.
+
+### `isChanged`
+
+Kiểm tra xem bất kỳ thuộc tính nào đang được theo dõi (được định nghĩa trong danh sách `watch`) có thay đổi hay không.
+
+**Trả về:** `boolean` — `true` nếu ít nhất một thuộc tính đang theo dõi có giá trị khác.
+
+## Đồng bộ hóa dữ liệu
+
+### `update`
+
+Đồng bộ hóa bộ nhớ đệm nội bộ với giá trị hiện tại của tất cả các thuộc tính đang được theo dõi. Sau khi gọi phương thức này, `isChanged()` sẽ trả về `false` cho đến khi các thuộc tính được sửa đổi lại.
+
+**Trả về:** `void`
+

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.