@dxtmisha/wiki 0.39.1 → 0.39.2

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

@@ -0,0 +1,105 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DesignAbstract - Базовый класс конструктора'/>
+
+# Класс DesignAbstract
+
+Абстрактный базовый класс, предназначенный для управления свойствами конструктора и изменениями состояния. Он предоставляет структурированный способ обработки входных свойств, отслеживания изменений и выполнения обратных вызовов при обновлении данных.
+
+## Ключевые особенности
+
+- **Управление свойствами** — структурированная обработка входных данных (`props`) и хранилища событий (`event`).
+- **Отслеживание изменений** — интеграция с `DesignChanged` для эффективного мониторинга и обновления изменений свойств.
+- **Управление жизненным циклом** — автоматическое выполнение `makeCallback` и `initEvent` при обновлении данных.
+
+## Инициализация
+
+`DesignAbstract` является абстрактным базовым классом и не может быть инициализирован напрямую. Он служит основой для создания классов дизайна, которые управляют состоянием на основе входных свойств (`props`).
+
+### Ограничения дженериков (Generic Constraints)
+
+Класс использует два типа дженериков для обеспечения строгой типизации:
+- `T extends Record<string, any>` — Тип для входных свойств (`props`). Определяет структуру данных, передаваемых в конструктор и используемых для отслеживания изменений.
+- `C extends Record<string, any>` — Тип для выходных данных или состояния (`event`). Определяет структуру объекта, который формируется в `initEvent` и передается в обратные вызовы.
+
+**Параметры конструктора:**
+- `props: T` — объект с исходными данными для инициализации.
+- `callback?: (event: C) => void` — дополнительная функция обратного вызова, которая выполняется после каждого обновления данных.
+- `changed?: string[]` — список имен свойств из `props`, за которыми нужно следить. Если не указано, отслеживаются все ключи `props`.
+
+**Обязательный метод для реализации:**
+- `protected abstract initEvent(): void` — метод, в котором описывается логика преобразования или фильтрации `props` в объект состояния `event`.
+
+```typescript
+import { DesignAbstract } from '@dxtmisha/functional'
+
+// 1. Определение структур
+interface MyProps { label: string; value: number }
+interface MyState { display: string }
+
+// 2. Реализация конкретного класса
+class MyDesign extends DesignAbstract<MyProps, MyState> {
+  protected initEvent(): void {
+    this.event.display = `${this.props.label}: ${this.props.value}`
+  }
+}
+
+// 3. Создание экземпляра
+const design = new MyDesign(
+  { label: 'Счётчик', value: 10 }, 
+  (state) => console.log('Новое состояние:', state.display)
+)
+```
+
+## Методы управления данными
+
+### `make`
+
+Инициирует процесс обновления обратного вызова. Вызывает `makeCallback` и возвращает экземпляр для цепочки вызовов.
+
+**Параметры:**
+- `compelled?: boolean` — если `true`, принудительно обновляет данные независимо от наличия изменений.
+
+**Возвращает:** `this`
+
+### `makeCallback`
+
+Основная логика выполнения для обновления состояния. Проверяет наличие изменений или принудительное обновление, затем инициализирует событие и запускает обратные вызовы.
+
+**Параметры:**
+- `compelled: boolean` — принудительно обновляет данные. По умолчанию: `false`.
+
+**Возвращает:** `void`
+
+## Защищенные методы (для наследников)
+
+### `is`
+
+Проверяет наличие значения в свойствах `props` по имени.
+
+**Параметры:**
+- `name: keyof T` — имя свойства.
+
+**Возвращает:** `boolean`
+
+### `isChanged`
+
+Проверяет, было ли изменено значение свойства. Используется для предотвращения лишних вычислений.
+
+**Параметры:**
+- `name: keyof C` — имя свойства в событии.
+- `nameProp?: keyof T | (keyof T)[]` — имя или список имен свойств в `props`, от которых зависит данное значение. Если не указано, используется `name`.
+
+**Возвращает:** `boolean`
+
+### `makeCallbackItem`
+
+Выполняет вызов функции обратного вызова, переданной в конструктор.
+
+**Возвращает:** `void`
+
+### `initEvent` (абстрактный)
+
+Абстрактный метод, который должен быть реализован в подклассе. В нем происходит заполнение объекта `this.event` на основе `this.props`.
+
+**Возвращает:** `void`

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

@@ -0,0 +1,105 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DesignAbstract - Lớp cơ sở Constructor'/>
+
+# Lớp DesignAbstract
+
+Một lớp cơ sở trừu tượng được thiết kế để quản lý các thuộc tính constructor và các thay đổi trạng thái. Nó cung cấp một cách có cấu trúc để xử lý các thuộc tính đầu vào, theo dõi thay đổi và thực thi các hàm callback khi cập nhật dữ liệu.
+
+## Các tính năng chính
+
+- **Quản lý thuộc tính** — xử lý có cấu trúc dữ liệu đầu vào (`props`) và lưu trữ sự kiện (`event`).
+- **Theo dõi thay đổi** — tích hợp với `DesignChanged` để giám sát và cập nhật hiệu quả các thay đổi thuộc tính.
+- **Quản lý vòng đời** — tự động thực thi `makeCallback` và `initEvent` trong quá trình cập nhật dữ liệu.
+
+## Khởi tạo
+
+`DesignAbstract` 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 lớp thiết kế quản lý trạng thái dựa trên các thuộc tính đầu vào (`props`).
+
+### Ràng buộc Generic (Generic Constraints)
+
+Lớp này sử dụng hai loại generic để đảm bảo kiểu dữ liệu nghiêm ngặt:
+- `T extends Record<string, any>` — Kiểu cho các thuộc tính đầu vào (`props`). Xác định cấu trúc dữ liệu được truyền vào hàm khởi tạo và được sử dụng để theo dõi các thay đổi.
+- `C extends Record<string, any>` — Kiểu cho dữ liệu đầu ra hoặc trạng thái (`event`). Xác định cấu trúc của đối tượng được hình thành trong `initEvent` và được truyền vào các hàm gọi lại.
+
+**Tham số hàm khởi tạo:**
+- `props: T` — một đối tượng chứa dữ liệu khởi tạo ban đầu.
+- `callback?: (event: C) => void` — một hàm gọi lại tùy chọn được thực thi sau mỗi lần cập nhật dữ liệu.
+- `changed?: string[]` — danh sách các tên thuộc tính từ `props` để theo dõi. Nếu không được chỉ định, tất cả các khóa của `props` sẽ được theo dõi.
+
+**Phương thức bắt buộc phải triển khai:**
+- `protected abstract initEvent(): void` — một phương thức mô tả logic để chuyển đổi hoặc lọc các `props` thành một đối tượng trạng thái `event`.
+
+```typescript
+import { DesignAbstract } from '@dxtmisha/functional'
+
+// 1. Xác định cấu trúc
+interface MyProps { label: string; value: number }
+interface MyState { display: string }
+
+// 2. Triển khai một lớp cụ thể
+class MyDesign extends DesignAbstract<MyProps, MyState> {
+  protected initEvent(): void {
+    this.event.display = `${this.props.label}: ${this.props.value}`
+  }
+}
+
+// 3. Tạo một thực thể
+const design = new MyDesign(
+  { label: 'Counter', value: 10 }, 
+  (state) => console.log('Trạng thái mới:', state.display)
+)
+```
+
+## Các phương thức quản lý dữ liệu
+
+### `make`
+
+Bắt đầu quy trình cập nhật callback. Gọi `makeCallback` và trả về instance để thực hiện chuỗi phương thức (method chaining).
+
+**Tham số:**
+- `compelled?: boolean` — nếu là `true`, sẽ ép buộc cập nhật dữ liệu bất kể có thay đổi hay không.
+
+**Trả về:** `this`
+
+### `makeCallback`
+
+Logic thực thi chính để cập nhật trạng thái. Kiểm tra các thay đổi hoặc yêu cầu cập nhật bắt buộc, sau đó khởi tạo sự kiện và kích hoạt các hàm callback.
+
+**Tham số:**
+- `compelled: boolean` — ép buộc cập nhật dữ liệu. Mặc định: `false`.
+
+**Trả về:** `void`
+
+## Các phương thức được bảo vệ (cho lớp kế thừa)
+
+### `is`
+
+Kiểm tra xem một giá trị có tồn tại trong `props` theo tên hay không.
+
+**Tham số:**
+- `name: keyof T` — tên thuộc tính.
+
+**Trả về:** `boolean`
+
+### `isChanged`
+
+Kiểm tra xem giá trị thuộc tính có bị thay đổi hay không. Được sử dụng để ngăn chặn các tính toán dư thừa.
+
+**Tham số:**
+- `name: keyof C` — tên thuộc tính trong sự kiện.
+- `nameProp?: keyof T | (keyof T)[]` — tên thuộc tính hoặc danh sách tên thuộc tính trong `props` mà giá trị này phụ thuộc vào. Nếu không được chỉ định, `name` sẽ được sử dụng.
+
+**Trả về:** `boolean`
+
+### `makeCallbackItem`
+
+Thực thi hàm callback đã được truyền vào constructor.
+
+**Trả về:** `void`
+
+### `initEvent` (trừu tượng)
+
+Phương thức trừu tượng phải được triển khai trong lớp con. Nó sẽ gán dữ liệu cho `this.event` dựa trên `this.props`.
+
+**Trả về:** `void`

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

@@ -0,0 +1,116 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DesignAsyncAbstract - Base Async Design Class'/>
+
+# DesignAsyncAbstract Class
+
+An asynchronous abstract base class for managing constructor properties and state changes. It extends `DesignAbstract` to support asynchronous initialization of events, making it ideal for designs that require data fetching or async computations.
+
+## Key Features
+
+- **Asynchronous Initialization** — supports `Promise` based event initialization via `initEvent`.
+- **Property Management** — inherited structured handling of input data (`props`) and event storage (`event`).
+- **Async Workflow** — ensures that callbacks are triggered only after asynchronous state preparation is complete.
+
+## Initialization
+
+`DesignAsyncAbstract` is an abstract class and cannot be initialized directly. It is intended to be extended by other classes that must implement the `initEvent` method for asynchronous data preparation.
+
+### Generic Constraints
+
+The class uses two types of generics to ensure strict typing:
+- `T extends Record<string, any>` — Type for input properties (`props`). Defines the data structure passed to the constructor.
+- `C extends Record<string, any>` — Type for internal state or cache (`event`). Defines the data structure available in callbacks after asynchronous initialization.
+
+**Constructor Parameters:**
+- `props: T` — an object with the initial data.
+- `callback?: (event: C) => void` — a callback function that will be called after each successful update (including asynchronous ones).
+- `changed?: string[]` — optional list of keys from `props` to watch. If not provided, all keys in `props` are tracked.
+
+**Internal Properties:**
+- `protected readonly event: C` — the state object. This is what you should populate with data in `initEvent`. It will be passed to the `callback`.
+
+**Required Method to Implement:**
+- `protected abstract initEvent(): Promise<void>` — an asynchronous method called whenever tracked properties change. This is where `this.event` should be prepared.
+
+```typescript
+import { DesignAsyncAbstract } from '@dxtmisha/functional'
+
+// 1. Defining interfaces
+interface MyProps { userId: number }
+interface MyState { userName: string; avatar: string }
+
+// 2. Implementing a concrete class
+class UserDesign extends DesignAsyncAbstract<MyProps, MyState> {
+  protected async initEvent(): Promise<void> {
+    const response = await fetch(`https://api.example.com/users/${this.props.userId}`)
+    const data = await response.json()
+    
+    this.event.userName = data.name
+    this.event.avatar = data.image
+  }
+}
+
+// 3. Usage
+const user = new UserDesign(
+  { userId: 1 }, 
+  (state) => {
+    console.log('User data loaded:', state.userName)
+  },
+  ['userId'] // Only track changes to userId
+)
+```
+
+## Data Management Methods
+
+### `make`
+
+Initiates the asynchronous callback update process. It calls `makeCallback` (without waiting for its completion) and returns the instance for chaining.
+
+**Parameters:**
+- `compelled?: boolean` — if `true`, forces the data update regardless of whether changes were detected.
+
+**Returns:** `this`
+
+### `makeCallback`
+
+The primary asynchronous execution logic for updating the state. It waits for `initEvent` to complete before triggering callbacks and updating the change tracker.
+
+**Parameters:**
+- `compelled?: boolean` — forces data update.
+
+**Returns:** `Promise<void>`
+
+## Protected Methods (for Subclasses)
+
+### `is`
+
+Checks for the existence of a key in the `props` object.
+
+**Parameters:**
+- `name: keyof T` — property name.
+
+**Returns:** `boolean`
+
+### `isChanged`
+
+Checks if the value of a specified property has changed compared to its previous state. Useful inside `initEvent` to optimize requests (only perform an action if a specific ID has changed).
+
+**Parameters:**
+- `name: keyof C` — property name in the state.
+- `nameProp?: keyof T | (keyof T)[]` — property name or list of property names in `props` that the change is based on. Defaults to `name`.
+
+**Returns:** `boolean`
+
+### `makeCallbackItem`
+
+Executes the callback function passed to the constructor.
+
+**Returns:** `void`
+
+### `initEvent` (abstract)
+
+An asynchronous method that must be implemented in the subclass. It populates `this.event` based on `this.props`.
+
+**Returns:** `Promise<void>`
+

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

@@ -0,0 +1,116 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DesignAsyncAbstract - Базовый асинхронный класс дизайна'/>
+
+# Класс DesignAsyncAbstract
+
+Асинхронный абстрактный базовый класс для управления свойствами конструктора и изменениями состояния. Расширяет `DesignAbstract` поддержкой асинхронной инициализации событий, что делает его идеальным для случаев, требующих загрузки данных или асинхронных вычислений.
+
+## Ключевые особенности
+
+- **Асинхронная инициализация** — поддержка инициализации событий на основе `Promise` через метод `initEvent`.
+- **Управление свойствами** — наследует структурированную обработку входных данных (`props`) и хранилища событий (`event`).
+- **Асинхронный рабочий процесс** — гарантирует, что обратные вызовы запускаются только после завершения асинхронной подготовки состояния.
+
+## Инициализация
+
+`DesignAsyncAbstract` является абстрактным классом и не может быть инициализирован напрямую. Он предназначен для расширения другими классами, которые должны реализовать метод `initEvent` для асинхронной подготовки данных.
+
+### Ограничения дженериков (Generic Constraints)
+
+Класс использует два типа дженериков для обеспечения строгой типизации:
+- `T extends Record<string, any>` — Тип для входных свойств (`props`). Определяет структуру данных, передаваемых в конструктор.
+- `C extends Record<string, any>` — Тип для внутреннего состояния или кэша (`event`). Определяет структуру данных, которая будет доступна в обратных вызовах после асинхронной инициализации.
+
+**Параметры конструктора:**
+- `props: T` — объект с исходными данными.
+- `callback?: (event: C) => void` — функция обратного вызова, которая будет вызываться после каждого успешного обновления (включая асинхронное).
+- `changed?: string[]` — необязательный список ключей из `props`, за которыми нужно следить. Если не передан, отслеживаются все ключи `props`.
+
+**Внутренние свойства:**
+- `protected readonly event: C` — объект состояния. Именно его следует наполнять данными в `initEvent`. Он будет передан в `callback`.
+
+**Обязательный метод для реализации:**
+- `protected abstract initEvent(): Promise<void>` — асинхронный метод, вызываемый при изменении отслеживаемых свойств. Здесь должна происходить подготовка данных `this.event`.
+
+```typescript
+import { DesignAsyncAbstract } from '@dxtmisha/functional'
+
+// 1. Определение интерфейсов
+interface MyProps { userId: number }
+interface MyState { userName: string; avatar: string }
+
+// 2. Реализация конкретного класса
+class UserDesign extends DesignAsyncAbstract<MyProps, MyState> {
+  protected async initEvent(): Promise<void> {
+    const response = await fetch(`https://api.example.com/users/${this.props.userId}`)
+    const data = await response.json()
+    
+    this.event.userName = data.name
+    this.event.avatar = data.image
+  }
+}
+
+// 3. Использование
+const user = new UserDesign(
+  { userId: 1 }, 
+  (state) => {
+    console.log('Данные пользователя загружены:', state.userName)
+  },
+  ['userId'] // Следить только за изменением userId
+)
+```
+
+## Методы управления данными
+
+### `make`
+
+Инициирует асинхронный процесс обновления. Вызывает `makeCallback` (не дожидаясь завершения) и возвращает экземпляр для цепочки вызовов.
+
+**Параметры:**
+- `compelled?: boolean` — если `true`, принудительно обновляет данные независимо от наличия изменений.
+
+**Возвращает:** `this`
+
+### `makeCallback`
+
+Основная асинхронная логика выполнения для обновления состояния. Дожидается завершения `initEvent` перед запуском обратных вызовов и обновлением трекера изменений.
+
+**Параметры:**
+- `compelled?: boolean` — принудительно обновляет данные.
+
+**Возвращает:** `Promise<void>`
+
+## Защищенные методы (для наследников)
+
+### `is`
+
+Проверяет наличие ключа в объекте `props`.
+
+**Параметры:**
+- `name: keyof T` — имя свойства.
+
+**Возвращает:** `boolean`
+
+### `isChanged`
+
+Проверяет, изменилось ли значение указанного свойства по сравнению с предыдущим состоянием. Полезно внутри `initEvent` для оптимизации запросов (выполнять действие, только если конкретный ID изменился).
+
+**Параметры:**
+- `name: keyof C` — имя свойства в состоянии.
+- `nameProp?: keyof T | (keyof T)[]` — имя или список имен свойств в `props`, на основе которых рассчитывается изменение. По умолчанию совпадает с `name`.
+
+**Возвращает:** `boolean`
+
+### `makeCallbackItem`
+
+Выполняет вызов функции обратного вызова, переданной в конструктор.
+
+**Возвращает:** `void`
+
+### `initEvent` (абстрактный)
+
+Асинхронный метод, который должен быть реализован в подклассе. В нем происходит заполнение объекта `this.event` на основе `this.props`.
+
+**Возвращает:** `Promise<void>`
+

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

@@ -0,0 +1,117 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DesignAsyncAbstract - Lớp thiết kế bất đồng bộ cơ sở'/>
+
+# Lớp DesignAsyncAbstract
+
+Một lớp cơ sở trừu tượng bất đồng bộ để quản lý các thuộc tính của constructor và thay đổi trạng thái. Nó mở rộng `DesignAbstract` để hỗ trợ khởi tạo sự kiện bất đồng bộ, lý tưởng cho các thiết kế yêu cầu lấy dữ liệu hoặc tính toán bất đồng bộ.
+
+## Các tính năng chính
+
+- **Khởi tạo bất đồng bộ** — hỗ trợ khởi tạo sự kiện dựa trên `Promise` thông qua `initEvent`.
+- **Quản lý thuộc tính** — kế thừa việc xử lý có cấu trúc dữ liệu đầu vào (`props`) và lưu trữ sự kiện (`event`).
+- **Luồng công việc bất đồng bộ** — đảm bảo rằng các callback chỉ được kích hoạt sau khi quá trình chuẩn bị trạng thái bất đồng bộ hoàn tất.
+
+## Khởi tạo
+
+`DesignAsyncAbstract` là một lớp trừu tượng và không thể được khởi tạo trực tiếp. Nó được thiết kế để mở rộng bởi các lớp khác, các lớp này phải triển khai phương thức `initEvent` để chuẩn bị dữ liệu bất đồng bộ.
+
+### Ràng buộc Generic (Generic Constraints)
+
+Lớp này sử dụng hai loại generic để đảm bảo kiểu dữ liệu nghiêm ngặt:
+- `T extends Record<string, any>` — Kiểu cho các thuộc tính đầu vào (`props`). Xác định cấu trúc dữ liệu được truyền vào hàm khởi tạo.
+- `C extends Record<string, any>` — Kiểu cho trạng thái nội bộ hoặc bộ nhớ đệm (`event`). Xác định cấu trúc dữ liệu sẽ có sẵn trong các hàm gọi lại sau khi khởi tạo bất đồng bộ.
+
+**Tham số hàm khởi tạo:**
+- `props: T` — một đối tượng chứa dữ liệu ban đầu.
+- `callback?: (event: C) => void` — một hàm gọi lại sẽ được gọi sau mỗi lần cập nhật thành công (bao gồm cả cập nhật bất đồng bộ).
+- `changed?: string[]` — danh sách các khóa từ `props` cần theo dõi (tùy chọn). Nếu không được cung cấp, tất cả các khóa trong `props` sẽ được theo dõi.
+
+**Thuộc tính nội bộ:**
+- `protected readonly event: C` — đối tượng trạng thái. Đây là nơi bạn nên đổ dữ liệu vào trong `initEvent`. Nó sẽ được truyền vào `callback`.
+
+**Phương thức bắt buộc phải triển khai:**
+- `protected abstract initEvent(): Promise<void>` — một phương thức bất đồng bộ được gọi mỗi khi các thuộc tính được theo dõi thay đổi. Đây là nơi `this.event` nên được chuẩn bị.
+
+```typescript
+import { DesignAsyncAbstract } from '@dxtmisha/functional'
+
+// 1. Xác định các interface
+interface MyProps { userId: number }
+interface MyState { userName: string; avatar: string }
+
+// 2. Triển khai một lớp cụ thể
+class UserDesign extends DesignAsyncAbstract<MyProps, MyState> {
+  protected async initEvent(): Promise<void> {
+    const response = await fetch(`https://api.example.com/users/${this.props.userId}`)
+    const data = await response.json()
+    
+    this.event.userName = data.name
+    this.event.avatar = data.image
+  }
+}
+
+// 3. Sử dụng
+const user = new UserDesign(
+  { userId: 1 }, 
+  (state) => {
+    console.log('Dữ liệu người dùng đã được tải:', state.userName)
+  },
+  ['userId'] // Chỉ theo dõi thay đổi của userId
+)
+```
+
+## Các phương thức quản lý dữ liệu
+
+### `make`
+
+Khởi tạo quá trình cập nhật callback bất đồng bộ. Nó gọi `makeCallback` (mà không đợi nó hoàn thành) và trả về instance để có thể thực hiện chuỗi lệnh (chaining).
+
+**Tham số:**
+- `compelled?: boolean` — nếu là `true`, sẽ ép buộc cập nhật dữ liệu bất kể có phát hiện thay đổi hay không.
+
+**Trả về:** `this`
+
+### `makeCallback`
+
+Logic thực thi bất đồng bộ chính để cập nhật trạng thái. Nó đợi `initEvent` hoàn thành trước khi kích hoạt các callback và cập nhật trình theo dõi thay đổi.
+
+**Tham số:**
+- `compelled?: boolean` — ép buộc cập nhật dữ liệu.
+
+**Trả về:** `Promise<void>`
+
+## Các phương thức được bảo vệ (cho lớp kế thừa)
+
+Các phương thức này có sẵn trong các lớp con để quản lý logic cập nhật.
+
+### `is`
+
+Kiểm tra sự tồn tại của một khóa trong đối tượng `props`.
+
+**Tham số:**
+- `name: keyof T` — tên thuộc tính.
+
+**Trả về:** `boolean`
+
+### `isChanged`
+
+Kiểm tra xem giá trị của một thuộc tính cụ thể có thay đổi so với trạng thái trước đó hay không. Hữu ích bên trong `initEvent` để tối ưu hóa các yêu cầu (chỉ thực hiện hành động nếu một ID cụ thể đã thay đổi).
+
+**Tham số:**
+- `name: keyof C` — tên thuộc tính trong trạng thái.
+- `nameProp?: keyof T | (keyof T)[]` — tên hoặc danh sách tên các thuộc tính trong `props` mà sự thay đổi dựa trên đó. Mặc định trùng với `name`.
+
+**Trả về:** `boolean`
+
+### `makeCallbackItem`
+
+Thực thi hàm callback đã được truyền vào constructor.
+
+**Trả về:** `void`
+
+### `initEvent` (trừu tượng)
+
+Phương thức bất đồng bộ phải được triển khai trong lớp con. Nó sẽ gán dữ liệu cho `this.event` dựa trên `this.props`.
+
+**Trả về:** `Promise<void>`

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

@@ -0,0 +1,60 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DesignChanged - Change Tracking Utility'/>
+
+# DesignChanged Class
+
+A utility class designed to track changes in object properties. It maintains a cache of previous values and provides methods to detect differences between the current state and the last updated state.
+
+## Key Features
+
+- **Efficient Comparison** — compares current property values against a local cache to identify changes.
+- **Selective Tracking** — supports tracking a specific subset of properties via the `watch` parameter.
+- **Batch Updates** — provides a way to synchronize the entire cache with the current state of properties.
+
+## Initialization
+
+Creates a new `DesignChanged` instance. The class is designed to track changes in object properties by comparing them with an internal cache (the state at the time of the last update).
+
+**Parameters:**
+- `props: T` — data object whose properties need to be tracked.
+- `watch: string[] = Object.keys(props)` — an array of property names (keys) to watch. By default, all properties of the `props` object are tracked.
+
+```typescript
+import { DesignChanged } from '@dxtmisha/functional'
+
+// 1. Tracking all properties by default
+const props = { title: 'Hello', count: 1 }
+const tracker = new DesignChanged(props)
+
+// 2. Tracking specific properties (subset)
+const trackerPartial = new DesignChanged(props, ['title'])
+
+console.log(tracker.isChanged()) // false
+```
+
+## Change Detection
+
+### `is`
+
+Checks if specific properties have been modified since the last update.
+
+**Parameters:**
+- `name: string | string[]` — a single property name or an array of property names to check.
+
+**Returns:** `boolean` — `true` if any of the specified properties have changed.
+
+### `isChanged`
+
+Checks if any of the tracked properties (defined in the `watch` list) have changed.
+
+**Returns:** `boolean` — `true` if at least one tracked property has a different value.
+
+## Data Synchronization
+
+### `update`
+
+Synchronizes the internal cache with the current values of all tracked properties. After calling this, `isChanged()` will return `false` until properties are modified again.
+
+**Returns:** `void`
+