@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/functional/about/about.vi.mdx

@@ -0,0 +1,66 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/! Về thư viện'/>
+
+# [@dxtmisha/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)
+
+`@dxtmisha/functional` là một thư viện chứa các tiện ích, lớp cơ sở (base class) và composable dùng cho việc phát triển web phức tạp trên Vue 3.
+
+Các ứng dụng frontend hiện đại đòi hỏi phải quản lý hàng tá tiến trình bất đồng bộ: lấy dữ liệu thông qua API, đồng bộ hóa các tab, làm việc với bộ nhớ cục bộ, định dạng ngày tháng và thích ứng với ngôn ngữ của người dùng. Thông thường, lập trình viên giải quyết những vấn đề này theo cách cục bộ bên trong các component, dẫn đến việc lặp lại code, các tệp `.vue` trở nên "cồng kềnh", và xảy ra lỗi liên quan đến việc không dọn dẹp các sự kiện hay bộ đếm thời gian. Gói này hoạt động dựa trên cơ sở của [@dxtmisha/functional-basic](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional), cung cấp các lớp bọc phản ứng và các giải pháp kiến trúc được tạo ra đặc biệt để giải quyết những vấn đề này trong hệ sinh thái Vue (Composition API).
+
+## Cài đặt
+
+```bash
+npm i @dxtmisha/functional
+```
+
+## Tại sao cần thư viện này?
+
+Ý tưởng chính của gói là tách biệt logic nghiệp vụ thông thường và logic phụ (side effect) ra khỏi các component, làm cho quá trình này được định kiểu nghiêm ngặt và mặc định mang tính phản ứng (reactive).
+
+Bạn không còn cần phải tự đồng bộ hóa các yêu cầu HTTP với trạng thái cục bộ của giao diện, viết wrapper để lưu cache dữ liệu phản ứng hay phát minh ra cách làm việc với LocalStorage bên trong component nữa. Thư viện cung cấp sẵn các cấu trúc phản ứng để tự động đảm nhận công việc này. Bạn chỉ cần gọi composable hoặc class cần thiết, và ở phần lõi bên dưới, thư viện sẽ tự động quản lý các tham chiếu phản ứng (`ref`), theo dõi vòng đời của Vue, dọp dẹp bộ nhớ (garbage collector) khi component bị unmount, và duy trì hệ thống định kiểu TypeScript nghiêm ngặt.
+
+## Các đặc điểm nổi bật và Phương pháp phát triển
+
+**Tích hợp hoàn toàn với Composition API**
+Mỗi tiện ích trong thư viện đều được thiết kế xoay quanh hệ thống phản ứng của Vue 3. Dữ liệu từ kho lưu trữ trữ, phản hồi API, hay ngôn ngữ của hệ thống luôn được trả về dưới dạng các đối tượng phản ứng (reactive objects). Nếu cấu hình thay đổi, tất cả các component phụ thuộc vào dữ liệu đó đều sẽ tự động cập nhật.
+
+**Phân tách cấu trúc rõ ràng (Separation of Concerns)**
+Về tư tưởng kiến trúc, gói này khuyến khích nhà phát triển viết các component "mỏng". Toàn bộ logic validate form, quản lý nhiều trạng thái phức tạp (`loading`, `error`, `success`), chuẩn bị dữ liệu gọi API và lưu trữ cache đều được gom vào trong những class hay composable chuyên dụng. File `.vue` chỉ còn giữ lại việc khai báo liên kết cho các biến đối với giao diện (template).
+
+**An toàn kiểu dữ liệu (Type Safety)**
+Nhờ hệ thống giao diện Interface của TypeScript rất tối ưu, bộ code này bảo vệ tỷ lệ an toàn kiểu đạt 100% giữa kho dữ liệu API, bộ nhớ, và phía màn hình UI. Thuộc tính suy luận kiểu tự động (Type inference) cùng các Generic chống lại tình trạng sai chính tả hoặc trục trặc phát sinh khi sửa cấu trúc (Refactoring). IDE luôn nhận diện được dữ liệu nhận lại những trường (fields) gì từ API và gọi ra những method (hàm phương thức) nào trực thuộc Class.
+
+**Quản lý tài nguyên dễ dự đoán**
+Đảm bảo quản lý bảo mật thông tin và giải phóng tối ưu vùng lưu trữ RAM cho bộ nhớ. Nếu ứng dụng (component) có sinh lệnh báo với server hoặc liên tục tiếp nhận thông tin cập nhật (listener) mà bị hủy đi, mọi process và tiến trình chạy kèm sẽ được xử lý chấm dứt đúng quy chuẩn, bảo vệ cho ứng dụng của bạn không rò rỉ và tràn tốn Memory.
+
+## Thư viện có thể làm gì?
+
+Thư viện đáp ứng đầy đủ tất cả nhu cầu thiết yếu nhất khi bạn muốn phát triển một ứng dụng mạng lưới frontend mức độ đa nhiệm lớn:
+
+**Gọi mạng từ xa (Requests API)**
+Bao trọn nhóm composable đặc tả quy cách gọi server (`useApiGet`, `useApiPost`, `useApiPut`, `useApiDelete`, `useApiRequest`). Khi mới gọi, chúng đã trả về đầy đủ đối tượng mang thông số có sẵn, chứa đựng trạng thái theo dõi tiến trình (`loading`), cập nhật lưu lỗi lại, và các dữ liệu hoàn thành (`item`, `list`). Hệ thống "có sẵn" còn đem khả năng lưu giữ, huỷ nhanh (cancel) truy vết cũ dư thừa đi không gửi nhầm kết quả (tính chất siêu cần cho Live search lập lại truy vấn), tuỳ chọn cấu hình cực kì gọn nhẹ trong Header.
+
+**Bộ duy trì tình trạng (State storages)**
+Bao trọn các hook (`useStorageRef`, `useSessionRef`, `useCookieRef`, `useHashRef`). Chúng làm công cụ kết dính mọi biến khai báo Vue lên vùng bộ nhớ ảo có sẵn trên trình duyệt LocalStorage, SessionStorage, dấu `#` URL hash, hay trên tệp Cookie theo tiêu chuẩn. Chúng cho bạn thỏa thích xử lý biến như một tham trị `ref` tại gốc, rồi trình gói hỗ trợ (library) thực thi những việc gắn kết (sync) thông tin cho trình duyệt Browser lưu lâu dài, tức tốc phổ truyền tín hiệu tới cả màn hình hiển thị trong từng Tab (cửa sổ web) được người dùng song hành để duy trì sử dụng.
+
+**Chuẩn Hóa Đa Ngôn Ngữ (Internationalization) & Format**
+Dành bao trọn bộ nhóm xử lý cực chuẩn chỉnh (`useTranslateRef`, `useGeoIntlRef`, `DatetimeRef` hay `GeoFlagRef`), thực thi phản xạ nhận diện các hiệu ứng tại từng tham số (Thay mã nguồn Tiếng, lựa ngoại tệ hay thay Vùng Quốc gia). Những tính chất cập nhật Format tự làm tự tái hiện (Tiếng nói dịch chuyển ngay, đổi thay biểu định Giá, lịch chuyển đổi tháng ngày). Phần việc tái lắp component thực hiện độc lập, nhà tạo tác (dev) không gõ tạo liên lạc các listener phiền toái kia nữa. 
+
+**Nâng Tầm Kiểu Mẫu Giao Diện (Engineering UI - Components)**
+Sở hữu phân cấp Class cốt lõi tiêu chuẩn gồm: `DesignAbstract`, `DesignComp`, `DesignChanged`, `DesignAsyncAbstract`. Sự bao quanh vững chắc đã che phủ kín (encapsulate) mọi phần logic hoạt động chuyên biệt xử lý ở cấp chuyên sâu không rập khuôn (Custom selectors, Form hỗn hợp, Các sổ Modal pop up biến chuyển states liên tục), rồi xếp chia chúng tự chủ hoàn toán về các Classes. Nắn tạo việc tính toán các hàm vụ (business logic) sẽ dễ dàng ngắt gắn tại các trang markup tĩnh (HTML), thực hiện kiểm thử an hòa thuận lợi (Testable code), cùng mục đích mang những cấu trúc trên đem trao vào tái triển khai ở phần mềm khác (Re-usable func).
+
+**Công Cụ Hỗ Trợ Đầy Sức Phản Ứng Khác**
+Gom chứa tính năng giải toả xử lí các góc ứng suất phụ phản ứng:
+- Kẻ thiết định SEO bằng code (`useMeta`), nắn bóp nội hàm tags trên tính trạng màn hình;
+- Điệp truyền dữ liệu giữa các web window theo cấp thời lượng Live Real-Time (`useBroadcastValueRef`);
+- Phân luồng tín hiệu trạng thái điều tiết đường chuyền Loading (`useLoadingRef`);
+- Gọi sự chạy chức năng song hành mà nhẹ tựa bay ngay trên cỗ máy xử lí tạo mã Vue bằng `computedAsync` và `toComputed`.
+
+## Dành cho ai?
+
+Bộ tài nguyên chuyên tâm phục vụ toàn thể đội thi công Frontend Developers đang nặn chế những bộ mã nguồn công nghiệp kinh doanh siêu cỡ lớn, khối bảng mạch Dashboard bao phủ chằng chịt, hoặc đội tự nặn cho mình một khuôn Framework UI từ lõi công nghệ hệ Vue 3. Khử đi triệt để thói gõ tạo Boilerplate lặp liên hồi tốn không gian, tạo những khung sườn đã kinh qua ứng kiểm định hoàn hảo nhất của Patterns (kiểu hình tái thiết hệ sinh thái Dev) bảo toàn chất lương trong tạo dựng an toàn.
+
+## Git
+
+[https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional](https://github.com/dxtmisha/dxt-ui/tree/main/packages/functional)

package/src/media/functional/functional/api/api.en.mdx

@@ -0,0 +1,74 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/# API Hooks'/>
+
+# API Hooks
+
+A set of tools for efficient backend interaction, fully integrated with **Vue 3 (Composition API)**.
+
+## Features
+
+The main task of these tools is to automate routine operations: tracking loading states (`loading`), handling errors, and synchronizing data across different parts of the interface. All hooks support reactive parameters, allowing for the creation of dynamic requests that automatically update when input filters or paths change.
+
+## Available Tools
+
+- `useApiRef` — Reactive data retrieval (GET) with automatic execution and storage in a `ref`.
+- `useApiRequest` — Base hook for manual execution of any HTTP requests (returns the `send` method).
+- `useApiPost / Put / Delete` — Specialized wrappers for mutations (create, update, delete).
+- `useApiManagementRef` — A comprehensive orchestrator combining GET requests, search, formatting, and mutations into a single cycle.
+
+## How to Work with Them
+
+For simple data display, using `useApiRef` is sufficient. You don't need to manually call a load function — the request is executed automatically as soon as you access the `data` property. If the API path is a reactive ref, the hook will track its changes and load new data by itself.
+
+```typescript
+import { useApiRef } from '@dxtmisha/functional'
+
+// Data will load automatically when accessing 'data'
+const { data, loading } = useApiRef('api/profile')
+```
+
+If you need to perform an action on an event (e.g., saving a form), mutation hooks are used. They return a `send` method that can be called in an event handler, and a `loading` flag to disable buttons.
+
+```typescript
+import { useApiPost } from '@dxtmisha/functional'
+
+const { send, loading } = useApiPost('api/save')
+
+const onSave = async () => {
+  await send({ data: { name: 'Dxt' } })
+}
+```
+
+## useApiManagementRef
+
+The most powerful approach is using `useApiManagementRef`. It acts as a full hub for managing data in complex interfaces (like tables). It links the GET request with mutations: as soon as you successfully execute `sendDelete` or `sendPost`, the orchestrator automatically calls `reset()` for the main list, and the data on the screen updates automatically.
+
+### Key Capabilities:
+- **Automation**: Full synchronization between data reading and modification.
+- **Integration**: Includes search (`useSearchRef`) and formatting (`useFormattersRef`) functionality.
+- **Skeleton**: Support for placeholders during loading to prevent layout shifts.
+- **Flexibility**: Configuration of individual paths and transformations for each request type (GET, POST, PUT, DELETE).
+
+```typescript
+import { ref } from 'vue'
+import { useApiManagementRef } from '@dxtmisha/functional'
+
+const search = ref('')
+const { 
+  list, 
+  sendPost, 
+  sendDelete 
+} = useApiManagementRef(
+  { path: 'api/items' },      // Listen to GET
+  undefined,                  // Formatters
+  { columns: ['name'], value: search }, // Live search
+  { path: 'api/items/add' },  // POST setup
+  undefined,
+  { path: 'api/items/delete' } // DELETE setup
+)
+
+// After calling sendDelete(), the main 'list' will update AUTOMATICALLY!
+```
+
+This architecture allows you to describe data logic declaratively, focusing on request configuration rather than manual management of loading states and list updates.

package/src/media/functional/functional/api/api.ru.mdx

@@ -0,0 +1,74 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/# Хуки для работы с API'/>
+
+# Хуки для работы с API
+
+Набор инструментов для эффективного взаимодействия с бекендом, полностью интегрированный с **Vue 3 (Composition API)**.
+
+## Особенности
+
+Главная задача этих инструментов — автоматизировать рутинные задачи: отслеживание состояния загрузки (`loading`), обработку ошибок и синхронизацию данных между различными частями интерфейса. Все хуки поддерживают реактивные параметры, что позволяет создавать динамические запросы, которые сами обновляются при изменении входных фильтров или путей.
+
+## Доступные инструменты
+
+- `useApiRef` — Реактивное получение данных (GET) с автоматическим запуском и хранением в `ref`.
+- `useApiRequest` — Базовый хук для ручного выполнения любых HTTP-запросов (возвращает метод `send`).
+- `useApiPost / Put / Delete` — Специализированные обертки для мутаций (создание, обновление, удаление).
+- `useApiManagementRef` — Комплексный оркестратор, объединяющий GET-запросы, поиск, форматирование и мутации в единый цикл.
+
+## Как с ними работать
+
+Для простого отображения данных достаточно использовать `useApiRef`. Вам не нужно вручную вызывать функцию загрузки — запрос выполнится автоматически, как только вы обратитесь к свойству `data`. Если путь к API является реактивной ссылкой, хук сам отследит ее изменение и загрузит новые данные.
+
+```typescript
+import { useApiRef } from '@dxtmisha/functional'
+
+// Данные загрузятся автоматически при обращении к data
+const { data, loading } = useApiRef('api/profile')
+```
+
+Если же вам нужно выполнить действие по событию (например, сохранить форму), используются хуки для мутаций. Они возвращают метод `send`, который можно вызвать в обработчике события, и флаг `loading` для блокировки кнопок.
+
+```typescript
+import { useApiPost } from '@dxtmisha/functional'
+
+const { send, loading } = useApiPost('api/save')
+
+const onSave = async () => {
+  await send({ data: { name: 'Dxt' } })
+}
+```
+
+## useApiManagementRef
+
+Самый мощный подход — это использование `useApiManagementRef`. Это полноценный хаб для управления данными в сложных интерфейсах (например, в таблицах). Он связывает GET-запрос с мутациями: как только вы успешно выполните `sendDelete` или `sendPost`, оркестратор сам вызовет `reset()` для основного списка, и данные на экране обновятся автоматически.
+
+### Основные возможности:
+- **Автоматизация**: Полная синхронизация между чтением и изменением данных.
+- **Интеграция**: Включает в себя функционал поиска (`useSearchRef`) и форматирования (`useFormattersRef`).
+- **Skeleton**: Поддержка заглушек на время загрузки для предотвращения «прыжков» интерфейса.
+- **Гибкость**: Настройка индивидуальных путей и трансформаций для каждого типа запроса (GET, POST, PUT, DELETE).
+
+```typescript
+import { ref } from 'vue'
+import { useApiManagementRef } from '@dxtmisha/functional'
+
+const search = ref('')
+const { 
+  list, 
+  sendPost, 
+  sendDelete 
+} = useApiManagementRef(
+  { path: 'api/items' },      // Слушаем GET
+  undefined,                  // Форматтеры
+  { columns: ['name'], value: search }, // Живой поиск
+  { path: 'api/items/add' },  // Настройка POST
+  undefined,
+  { path: 'api/items/delete' } // Настройка DELETE
+)
+
+// После вызова sendDelete() основной список list обновится САМ!
+```
+
+Такая архитектура позволяет описывать логику работы с данными декларативно, фокусируясь на конфигурации запросов, а не на ручном управлении состояниями загрузки и обновлении списков.

package/src/media/functional/functional/api/api.vi.mdx

@@ -0,0 +1,74 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/# Hook làm việc với API'/>
+
+# Hook làm việc với API
+
+Một tập hợp các công cụ để tương tác hiệu quả với backend, được tích hợp hoàn toàn với **Vue 3 (Composition API)**.
+
+## Đặc điểm
+
+Nhiệm vụ chính của các công cụ này là tự động hóa các tác vụ thông thường: theo dõi trạng thái tải (`loading`), xử lý lỗi và đồng bộ hóa dữ liệu giữa các phần khác nhau của giao diện. Tất cả các hook đều hỗ trợ các tham số phản hồi, cho phép tạo ra các yêu cầu động tự động cập nhật khi các bộ lọc đầu vào hoặc đường dẫn thay đổi.
+
+## Các công cụ hiện có
+
+- `useApiRef` — Truy xuất dữ liệu phản hồi (GET) với tính năng tự động chạy và lưu trữ trong `ref`.
+- `useApiRequest` — Hook cơ bản để thực hiện thủ công bất kỳ yêu cầu HTTP nào (trả về phương thức `send`).
+- `useApiPost / Put / Delete` — Các lớp vỏ chuyên dụng cho các thay đổi (tạo, cập nhật, xóa).
+- `useApiManagementRef` — Bộ điều phối toàn diện, kết hợp các yêu cầu GET, tìm kiếm, định dạng và thay đổi thành một chu kỳ duy nhất.
+
+## Cách làm việc với chúng
+
+Để hiển thị dữ liệu đơn giản, chỉ cần sử dụng `useApiRef`. Bạn không cần phải gọi hàm tải một cách thủ công — yêu cầu sẽ tự động được thực hiện ngay khi bạn truy cập vào thuộc tính `data`. Nếu đường dẫn API là một tham chiếu phản hồi (ref), hook sẽ tự theo dõi sự thay đổi của nó và tải dữ liệu mới.
+
+```typescript
+import { useApiRef } from '@dxtmisha/functional'
+
+// Dữ liệu sẽ tự động tải khi truy cập vào data
+const { data, loading } = useApiRef('api/profile')
+```
+
+Nếu bạn cần thực hiện một hành động dựa trên sự kiện (ví dụ: lưu biểu mẫu), các hook thay đổi (mutation) sẽ được sử dụng. Chúng trả về một phương thức `send` có thể được gọi trong trình xử lý sự kiện và một cờ `loading` để chặn các nút bấm.
+
+```typescript
+import { useApiPost } from '@dxtmisha/functional'
+
+const { send, loading } = useApiPost('api/save')
+
+const onSave = async () => {
+  await send({ data: { name: 'Dxt' } })
+}
+```
+
+## useApiManagementRef
+
+Cách tiếp cận mạnh mẽ nhất là sử dụng `useApiManagementRef`. Đây là một trung tâm hoàn chỉnh để quản lý dữ liệu trong các giao diện phức tạp (ví dụ: trong bảng). Nó liên kết yêu cầu GET với các thay đổi: ngay khi bạn thực hiện thành công `sendDelete` hoặc `sendPost`, bộ điều phối sẽ tự gọi `reset()` cho danh sách chính và dữ liệu trên màn hình sẽ tự động cập nhật.
+
+### Các khả năng chính:
+- **Tự động hóa**: Đồng bộ hóa hoàn toàn giữa việc đọc và thay đổi dữ liệu.
+- **Tích hợp**: Bao gồm chức năng tìm kiếm (`useSearchRef`) và định dạng (`useFormattersRef`).
+- **Skeleton**: Hỗ trợ các trình giữ chỗ (placeholder) trong quá trình tải để ngăn chặn thay đổi bố cục.
+- **Linh hoạt**: Cấu hình các đường dẫn và chuyển đổi riêng lẻ cho từng loại yêu cầu (GET, POST, PUT, DELETE).
+
+```typescript
+import { ref } from 'vue'
+import { useApiManagementRef } from '@dxtmisha/functional'
+
+const search = ref('')
+const { 
+  list, 
+  sendPost, 
+  sendDelete 
+} = useApiManagementRef(
+  { path: 'api/items' },      // Theo dõi GET
+  undefined,                  // Bộ định dạng
+  { columns: ['name'], value: search }, // Tìm kiếm trực tiếp
+  { path: 'api/items/add' },  // Cấu hình POST
+  undefined,
+  { path: 'api/items/delete' } // Cấu hình DELETE
+)
+
+// Sau khi gọi sendDelete(), danh sách chính 'list' sẽ TỰ ĐỘNG cập nhật!
+```
+
+Kiến trúc này cho phép bạn mô tả logic làm việc với dữ liệu một cách khai báo, tập trung vào cấu hình yêu cầu thay vì quản lý thủ công các trạng thái tải và cập nhật danh sách.

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

@@ -0,0 +1,80 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DatetimeRef - Reactive Datetime Management'/>
+
+# DatetimeRef Class
+
+A class for working with dates and times in a reactive way. It provides a high-level wrapper around the `Datetime` utility, ensuring automatic synchronization of date data with Vue reactive properties and locales.
+
+## Key Features
+
+- **Reactivity** — integration with Vue `ref` and `computed`. Automatically tracks input data changes and updates all related date components.
+- **Synchronization** — internal binding to the `Datetime` class. Any date manipulations via the base object (`getDatetime()`) are instantly reflected in reactive properties.
+- **Localization** — automatic support for international date and time formats via `Geo` and `GeoIntl`.
+- **Convenient Accessors** — quick access to date components (year, month, day, etc.) via computed properties.
+
+## Initialization
+
+Creates a new `DatetimeRef` instance. The class automatically synchronizes with the provided reactive data. If no parameters are passed, default values (current date and locale) are used.
+
+**Parameters:**
+- `date: RefOrNormal<NumberOrStringOrDate>` — date for initialization (ISO string, timestamp, `Date` object, or a `ref` to them).
+- `type: RefOrNormal<GeoDate> = 'date'` — default output format (reactive or normal).
+- `code: RefOrNormal<string> = Geo.getLocation()` — locale code (reactive or normal, e.g., 'en-US').
+
+```typescript
+import { DatetimeRef } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// 1. Initialization with a reactive string
+const date = ref('2023-10-27')
+const dt = new DatetimeRef(date, 'date', 'en-US')
+
+// 2. Current time (default)
+const now = new DatetimeRef()
+
+// 3. Using a reactive locale
+const locale = ref('fr-FR')
+const dtLocale = new DatetimeRef(new Date(), 'datetime', locale)
+```
+
+## Methods and Parameters
+
+- `getItem(): Ref<NumberOrStringOrDate>` — Returns a reactive reference to the original date value.
+- `getDate(): Ref<Date>` — Returns a reactive reference to the internal `Date` object. Used for synchronization with the base class.
+- `getDatetime(): Datetime` — Returns an instance of the `Datetime` utility. Allows using navigation methods (`moveBy...`, `clone...`) while maintaining reactivity.
+- `getHoursType(): ComputedRef<GeoHours>` — Determines the time format (12 or 24-hour) based on current locale and settings.
+- `getFirstDayCode(): ComputedRef<GeoFirstDay>` — Returns the code for the first day of the week (0 for Sunday, 1 for Monday) according to the locale.
+- `getMaxDay(): ComputedRef<number>` — Returns the number of days in the current month (considering leap years).
+
+## Date Components
+
+These methods return `ComputedRef` properties that update automatically when the state changes:
+
+- `getYear(): ComputedRef<number>` — Returns the full year.
+- `getMonth(): ComputedRef<number>` — Returns the month (1–12).
+- `getDay(): ComputedRef<number>` — Returns the day of the month (1-31).
+- `getHour(): ComputedRef<number>` — Returns the hours for the current date.
+- `getMinute(): ComputedRef<number>` — Returns the minutes.
+- `getSecond(): ComputedRef<number>` — Returns the seconds.
+
+## Formatting
+
+### `locale`
+
+Returns a localized date string formatted according to the locale and settings.
+
+**Parameters:**
+- `type: GeoDate` — format type ('date', 'time', 'datetime', 'month', 'year', etc.). Defaults to the type from the constructor.
+- `styleOptions?: object` — additional `Intl.DateTimeFormat` formatting options.
+
+**Returns:** `ComputedRef<string>`
+
+### `standard`
+
+Returns a standardized ISO date string.
+
+**Parameters:**
+- `timeZone: boolean` — whether to include time zone information. Default: `true`.
+
+**Returns:** `ComputedRef<string>`

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

@@ -0,0 +1,80 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/DatetimeRef - Реактивное управление датой и временем'/>
+
+# Класс DatetimeRef
+
+Класс для реактивной работы с датами и временем. Он предоставляет высокоуровневую обертку над утилитой `Datetime`, обеспечивая автоматическую синхронизацию данных о дате с реактивными пропсами Vue и локалями.
+
+## Ключевые особенности
+
+- **Реактивность** — интеграция с Vue `ref` и `computed`. Автоматически отслеживает изменения входных данных и обновляет все связанные компоненты даты.
+- **Синхронизация** — внутренняя привязка к классу `Datetime`. Любые манипуляции с датой через базовый объект (`getDatetime()`) мгновенно отражаются в реактивных свойствах.
+- **Локализация** — автоматическая поддержка международных форматов даты и времени через `Geo` и `GeoIntl`.
+- **Удобные аксессоры** — быстрый доступ к компонентам даты (год, месяц, день и т.д.) через вычисляемые свойства.
+
+## Инициализация
+
+Создает новый экземпляр `DatetimeRef`. Класс автоматически синхронизируется с переданными реактивными данными. Если параметры не переданы, используются значения по умолчанию (текущая дата и локаль).
+
+**Параметры:**
+- `date: RefOrNormal<NumberOrStringOrDate>` — дата для инициализации (ISO строка, timestamp, объект `Date` или `ref` на них).
+- `type: RefOrNormal<GeoDate> = 'date'` — формат вывода по умолчанию (реактивный или обычный).
+- `code: RefOrNormal<string> = Geo.getLocation()` — код локали (реактивный или обычный, например, 'ru-RU').
+
+```typescript
+import { DatetimeRef } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// 1. Инициализация с реактивной строкой
+const date = ref('2023-10-27')
+const dt = new DatetimeRef(date, 'date', 'ru-RU')
+
+// 2. Текущее время (по умолчанию)
+const now = new DatetimeRef()
+
+// 3. С использованием реактивной локали
+const locale = ref('en-US')
+const dtLocale = new DatetimeRef(new Date(), 'datetime', locale)
+```
+
+## Методы и параметры
+
+- `getItem(): Ref<NumberOrStringOrDate>` — Возвращает реактивную ссылку на исходное значение даты, переданное в конструктор.
+- `getDate(): Ref<Date>` — Возвращает реактивную ссылку на внутренний объект `Date`. Используется для синхронизации с базовым классом.
+- `getDatetime(): Datetime` — Возвращает экземпляр утилиты `Datetime`. Позволяет использовать методы навигации (`moveBy...`, `clone...`), сохраняя реактивность.
+- `getHoursType(): ComputedRef<GeoHours>` — Определяет формат времени (12 или 24 часа) на основе текущей локали и настроек.
+- `getFirstDayCode(): ComputedRef<GeoFirstDay>` — Возвращает код первого дня недели (0 для воскресенья, 1 для понедельника) согласно локали.
+- `getMaxDay(): ComputedRef<number>` — Возвращает количество дней в текущем месяце (с учетом високосных лет).
+
+## Компоненты даты
+
+Эти методы возвращают `ComputedRef`, которые автоматически обновляются при изменении даты:
+
+- `getYear(): ComputedRef<number>` — Возвращает полный год.
+- `getMonth(): ComputedRef<number>` — Возвращает месяц (1–12).
+- `getDay(): ComputedRef<number>` — Возвращает число месяца (1-31).
+- `getHour(): ComputedRef<number>` — Возвращает часы текущей даты.
+- `getMinute(): ComputedRef<number>` — Возвращает минуты.
+- `getSecond(): ComputedRef<number>` — Возвращает секунды.
+
+## Форматирование
+
+### `locale`
+
+Возвращает строку даты, отформатированную в соответствии с локалью и настройками.
+
+**Параметры:**
+- `type: GeoDate` — тип формата ('date', 'time', 'datetime', 'month', 'year' и др.). По умолчанию используется тип из конструктора.
+- `styleOptions?: object` — дополнительные опции форматирования `Intl.DateTimeFormat`.
+
+**Возвращает:** `ComputedRef<string>`
+
+### `standard`
+
+Возвращает стандартную ISO-строку даты.
+
+**Параметры:**
+- `timeZone: boolean` — включать ли информацию о временной зоне. По умолчанию: `true`.
+
+**Возвращает:** `ComputedRef<string>`

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

@@ -0,0 +1,80 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/DatetimeRef - Quản lý ngày giờ phản ứng'/>
+
+# Lớp DatetimeRef
+
+Một lớp để làm việc với ngày và giờ theo cách phản ứng (reactive). Nó cung cấp một lớp bọc cấp cao xung quanh tiện ích `Datetime`, đảm bảo tự động đồng bộ hóa dữ liệu ngày tháng với các thuộc tính phản ứng của Vue và ngôn ngữ (locales).
+
+## Các tính năng chính
+
+- **Tính phản ứng** — tích hợp với Vue `ref` và `computed`. Tự động theo dõi các thay đổi dữ liệu đầu vào và cập nhật tất cả các thành phần ngày tháng liên quan.
+- **Tính đồng bộ** — liên kết nội bộ với lớp `Datetime`. Bất kỳ thao tác ngày tháng nào qua đối tượng cơ sở (`getDatetime()`) đều được phản ánh ngay lập tức trong các thuộc tính phản ứng.
+- **Bản địa hóa** — hỗ trợ tự động định dạng ngày giờ quốc tế thông qua `Geo` và `GeoIntl`.
+- **Accessor thuận tiện** — truy cập nhanh các thành phần ngày (năm, tháng, ngày, v.v.) qua các thuộc tính computed.
+
+## Khởi tạo
+
+Tạo một thực thể `DatetimeRef` mới. Lớp này tự động đồng bộ hóa với dữ liệu phản ứng được cung cấp. Nếu không có tham số nào được truyền vào, các giá trị mặc định (ngày hiện tại và ngôn ngữ hệ thống) sẽ được sử dụng.
+
+**Tham số:**
+- `date: RefOrNormal<NumberOrStringOrDate>` — ngày để khởi tạo (chuỗi ISO, timestamp, đối tượng `Date`, hoặc một `ref` trỏ đến chúng).
+- `type: RefOrNormal<GeoDate> = 'date'` — định dạng đầu ra mặc định (phản ứng hoặc thông thường).
+- `code: RefOrNormal<string> = Geo.getLocation()` — mã ngôn ngữ (phản ứng hoặc thông thường, ví dụ: 'vi-VN').
+
+```typescript
+import { DatetimeRef } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// 1. Khởi tạo với một chuỗi phản ứng
+const date = ref('2023-10-27')
+const dt = new DatetimeRef(date, 'date', 'vi-VN')
+
+// 2. Thời gian hiện tại (mặc định)
+const now = new DatetimeRef()
+
+// 3. Sử dụng một ngôn ngữ phản ứng
+const locale = ref('en-US')
+const dtLocale = new DatetimeRef(new Date(), 'datetime', locale)
+```
+
+## Phương thức và Tham số
+
+- `getItem(): Ref<NumberOrStringOrDate>` — Trả về tham chiếu phản ứng đến giá trị ngày tháng ban đầu.
+- `getDate(): Ref<Date>` — Trả về tham chiếu phản ứng đến đối tượng `Date` nội bộ. Dùng để đồng bộ với lớp cơ sở.
+- `getDatetime(): Datetime` — Trả về thực thể của tiện ích `Datetime`. Cho phép dùng các phương thức điều hướng (`moveBy...`, `clone...`) trong khi vẫn giữ tính phản ứng.
+- `getHoursType(): ComputedRef<GeoHours>` — Xác định định dạng giờ (12 hoặc 24 giờ) dựa trên ngôn ngữ và cài đặt hiện tại.
+- `getFirstDayCode(): ComputedRef<GeoFirstDay>` — Trả về mã cho ngày đầu tiên của tuần (0 cho Chủ Nhật, 1 cho Thứ Hai) theo ngôn ngữ.
+- `getMaxDay(): ComputedRef<number>` — Trả về số ngày trong tháng hiện tại (có tính đến năm nhuận).
+
+## Các thành phần ngày tháng
+
+Các phương thức này trả về các thuộc tính `ComputedRef` tự động cập nhật khi trạng thái đối tượng thay đổi:
+
+- `getYear(): ComputedRef<number>` — Trả về năm đầy đủ.
+- `getMonth(): ComputedRef<number>` — Trả về tháng (1–12).
+- `getDay(): ComputedRef<number>` — Trả về ngày trong tháng (1-31).
+- `getHour(): ComputedRef<number>` — Trả về giờ của ngày hiện tại.
+- `getMinute(): ComputedRef<number>` — Trả về phút.
+- `getSecond(): ComputedRef<number>` — Trả về giây.
+
+## Định dạng
+
+### `locale`
+
+Trả về một chuỗi ngày tháng được bản địa hóa và định dạng theo ngôn ngữ và cài đặt.
+
+**Tham số:**
+- `type: GeoDate` — loại định dạng ('date', 'time', 'datetime', 'month', 'year', v.v.). Mặc định là loại từ hàm khởi tạo.
+- `styleOptions?: object` — các tùy chọn định dạng `Intl.DateTimeFormat` bổ sung.
+
+**Trả về:** `ComputedRef<string>`
+
+### `standard`
+
+Trả về chuỗi ngày tháng ISO tiêu chuẩn.
+
+**Tham số:**
+- `timeZone: boolean` — có bao gồm thông tin múi giờ hay không. Mặc định: `true`.
+
+**Trả về:** `ComputedRef<string>`

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

@@ -0,0 +1,105 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Classes/DesignAbstract - Base Constructor Class'/>
+
+# DesignAbstract Class
+
+An abstract base class designed for managing constructor properties and state changes. It provides a structured way to handle input properties, track changes, and execute callbacks upon data updates.
+
+## Key Features
+
+- **Property Management** — structured handling of input data (`props`) and event storage (`event`).
+- **Change Tracking** — integration with `DesignChanged` for efficient monitoring and updating of property changes.
+- **Lifecycle Management** — automatic execution of `makeCallback` and `initEvent` during data updates.
+
+## Initialization
+
+`DesignAbstract` is an abstract base class and cannot be initialized directly. It serves as a foundation for creating design classes that manage state based on input properties (`props`).
+
+### 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 and used for tracking changes.
+- `C extends Record<string, any>` — Type for output data or state (`event`). Defines the structure of the object formed in `initEvent` and passed to callbacks.
+
+**Constructor Parameters:**
+- `props: T` — an object with initial initialization data.
+- `callback?: (event: C) => void` — an optional callback function executed after each data update.
+- `changed?: string[]` — a list of property names from `props` to watch. If not specified, all keys of `props` are tracked.
+
+**Required Method to Implement:**
+- `protected abstract initEvent(): void` — a method that describes the logic for transforming or filtering `props` into a state object `event`.
+
+```typescript
+import { DesignAbstract } from '@dxtmisha/functional'
+
+// 1. Defining structures
+interface MyProps { label: string; value: number }
+interface MyState { display: string }
+
+// 2. Implementing a concrete class
+class MyDesign extends DesignAbstract<MyProps, MyState> {
+  protected initEvent(): void {
+    this.event.display = `${this.props.label}: ${this.props.value}`
+  }
+}
+
+// 3. Creating an instance
+const design = new MyDesign(
+  { label: 'Counter', value: 10 }, 
+  (state) => console.log('New state:', state.display)
+)
+```
+
+## Data Management Methods
+
+### `make`
+
+Initiates the callback update process. Calls `makeCallback` and returns the instance for method chaining.
+
+**Parameters:**
+- `compelled?: boolean` — if `true`, forces a data update regardless of changes.
+
+**Returns:** `this`
+
+### `makeCallback`
+
+The primary execution logic for state updates. Checks for changes or forced updates, then initializes the event and triggers callbacks.
+
+**Parameters:**
+- `compelled: boolean` — forces data update. Default: `false`.
+
+**Returns:** `void`
+
+## Protected Methods (for Subclasses)
+
+### `is`
+
+Checks if a value exists in the `props` by name.
+
+**Parameters:**
+- `name: keyof T` — property name.
+
+**Returns:** `boolean`
+
+### `isChanged`
+
+Checks if a property value has been changed. Used to prevent redundant calculations.
+
+**Parameters:**
+- `name: keyof C` — property name in the event.
+- `nameProp?: keyof T | (keyof T)[]` — property name or list of property names in `props` that this value depends on. If not specified, `name` is used.
+
+**Returns:** `boolean`
+
+### `makeCallbackItem`
+
+Executes the callback function passed to the constructor.
+
+**Returns:** `void`
+
+### `initEvent` (abstract)
+
+Abstract method that must be implemented in the subclass. It populates `this.event` based on `this.props`.
+
+**Returns:** `void`