@dxtmisha/wiki 0.39.1 → 0.39.2

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

@@ -0,0 +1,87 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Classes/ScrollbarWidthRef - Ширина скролла'/>
+
+# Класс ScrollbarWidthRef
+
+Реактивная надстройка над базовой утилитой для определения параметров полосы прокрутки. Класс позволяет отслеживать как наличие скроллбара (его тип), так и его фактическую ширину в пикселях. Это критично для предотвращения «прыжков» верстки (layout shift) при скрытии или появлении скролла, например, при открытии модальных окон.
+
+## Ключевые особенности
+
+- **Реактивность** — автоматическое обновление значений `item` и `width` при получении данных от браузера.
+- **Автоматический расчет** — класс самостоятельно инициирует замер ширины скролла сразу после создания экземпляра.
+- **Состояние готовности** — наличие вычисляемого свойства `is` позволяет безопасно использовать данные только после их инициализации.
+- **Кроссплатформенность** — корректно определяет «тонкие» и скрывающиеся скроллбары (macOS, мобильные устройства).
+
+## Инициализация
+
+Создает новый экземпляр `ScrollbarWidthRef` и запускает асинхронный процесс замера ширины скролла.
+
+**Параметры:**
+- `Нет`
+
+```typescript
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+```
+
+## Свойства
+
+### Состояние
+
+- `item: Ref<boolean | undefined>` — Флаг, определяющий результат проверки `ScrollbarWidth.is()`. Возвращает `true`, если скроллбар считается «специальным» (например, автоскрывающийся в macOS или мобильный, где ширина обычно `<= 8px`).
+- `width: Ref<number>` — Фактическая ширина полосы прокрутки в пикселях. По умолчанию `0`. Обновляется асинхронно после замера.
+- `is: Computed<boolean>` — Возвращает `true`, когда расчет ширины завершен и значения `item` и `width` актуальны.
+
+## Примеры
+
+### Динамическая компенсация скролла в CSS
+
+Использование реактивной ширины для создания CSS-переменной, которая компенсирует отступ при блокировке скролла.
+
+```vue
+<template>
+  <div :style="style" class="container">
+    Контент с динамическим отступом
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+
+// Рассчитываем переменную только после того, как ширина определена
+const style = computed(() => ({
+  '--scrollbar-width': scrollbar.is.value ? `${scrollbar.width.value}px` : '0px'
+}))
+</script>
+
+<style scoped>
+.container {
+  /* Пример использования для отступа справа */
+  padding-right: var(--scrollbar-width);
+}
+</style>
+```
+
+### Отслеживание типа скроллбара
+
+```typescript
+import { watch } from 'vue'
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+
+watch(() => scrollbar.is.value, (ready) => {
+  if (ready) {
+    if (scrollbar.item.value) {
+      console.log('Используется системный/скрывающийся скроллбар')
+    } else {
+      console.log(`Стандартный скроллбар шириной ${scrollbar.width.value}px`)
+    }
+  }
+})
+```

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

@@ -0,0 +1,87 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Classes/ScrollbarWidthRef - Chiều rộng thanh cuộn'/>
+
+# Lớp ScrollbarWidthRef
+
+Một lớp vỏ phản hồi bao quanh tiện ích cơ bản để xác định các thông số của thanh cuộn. Lớp này cho phép theo dõi cả sự hiện diện của thanh cuộn (loại của nó) và chiều rộng thực tế của nó tính bằng pixel. Điều này rất quan trọng để ngăn chặn tình trạng thay đổi bố cục (layout shift) khi thanh cuộn bị ẩn hoặc hiện, chẳng hạn như khi mở các cửa sổ modal.
+
+## Các đặc điểm chính
+
+- **Tính phản hồi** — tự động cập nhật các giá trị `item` và `width` khi nhận được dữ liệu từ trình duyệt.
+- **Tính toán tự động** — lớp tự động khởi tạo việc đo chiều rộng thanh cuộn ngay sau khi tạo phiên bản.
+- **Trạng thái sẵn sàng** — sự tồn tại của thuộc tính tính toán `is` cho phép sử dụng dữ liệu an toàn chỉ sau khi khởi tạo.
+- **Đa nền tảng** — xác định chính xác các thanh cuộn "mảnh" và tự động ẩn (macOS, thiết bị di động).
+
+## Khởi tạo
+
+Tạo một phiên bản mới của `ScrollbarWidthRef` và bắt đầu quá trình không đồng bộ để đo chiều rộng thanh cuộn.
+
+**Tham số:**
+- `Không có`
+
+```typescript
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+```
+
+## Các thuộc tính
+
+### Trạng thái
+
+- `item: Ref<boolean | undefined>` — Cờ xác định kết quả kiểm tra `ScrollbarWidth.is()`. Trả về `true` nếu thanh cuộn được coi là "đặc biệt" (ví dụ: tự động ẩn trong macOS hoặc di động, nơi chiều rộng thường `<= 8px`).
+- `width: Ref<number>` — Chiều rộng thực tế của thanh cuộn tính bằng pixel. Mặc định là `0`. Được cập nhật không đồng bộ sau khi đo.
+- `is: Computed<boolean>` — Trả về `true` khi việc tính toán chiều rộng hoàn tất và các giá trị `item` và `width` đã được cập nhật.
+
+## Ví dụ
+
+### Bù đắp cuộn động trong CSS
+
+Sử dụng chiều rộng phản hồi để tạo biến CSS bù đắp cho khoảng cách khi thanh cuộn bị chặn.
+
+```vue
+<template>
+  <div :style="style" class="container">
+    Nội dung với bù đắp động
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+
+// Chỉ tính toán biến sau khi chiều rộng đã được xác định
+const style = computed(() => ({
+  '--scrollbar-width': scrollbar.is.value ? `${scrollbar.width.value}px` : '0px'
+}))
+</script>
+
+<style scoped>
+.container {
+  /* Ví dụ sử dụng cho lề phải */
+  padding-right: var(--scrollbar-width);
+}
+</style>
+```
+
+### Theo dõi loại thanh cuộn
+
+```typescript
+import { watch } from 'vue'
+import { ScrollbarWidthRef } from '@dxtmisha/functional'
+
+const scrollbar = new ScrollbarWidthRef()
+
+watch(() => scrollbar.is.value, (ready) => {
+  if (ready) {
+    if (scrollbar.item.value) {
+      console.log('Thanh cuộn hệ thống/tự động ẩn đang được sử dụng')
+    } else {
+      console.log(`Thanh cuộn tiêu chuẩn với chiều rộng ${scrollbar.width.value}px`)
+    }
+  }
+})
+```

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

@@ -0,0 +1,73 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/# Reactive Hooks (Composables)'/>
+
+# Reactive Hooks (Composables)
+
+A set of tools for working with browser APIs, storage, and internationalization in the reactive style of **Vue 3 (Composition API)**.
+
+## Features
+
+The core idea of these hooks is to provide a simple and reliable interface for working with external data and state. They automatically synchronize values with storage, track changes in other tabs, and ensure instant UI updates when global settings (such as language or currency) change.
+
+## Available Hooks
+
+### Data Storage
+- `useStorageRef` — Reactive wrapper for `localStorage`. Supports TTL (cache) and cross-tab synchronization.
+- `useSessionRef` — For working with `sessionStorage`.
+- `useCookieRef` — Reactive cookie management.
+
+### Internationalization (I18n)
+- `useTranslateRef` — Reactive retrieval of translation strings. Automatically updates when the language is changed in `GeoRef`.
+- `useGeoIntlRef` — Formatting of numbers, currencies, and dates based on the current locale.
+
+### Data Processing and Search
+- `useSearchRef` — Client-side search for data arrays with support for multi-column filtering.
+- `useFormattersRef` — Bulk formatting of object lists based on predefined rules.
+
+### Browser APIs and State
+- `useBroadcastValueRef` — Data transfer and synchronization between windows/tabs via `BroadcastChannel`.
+- `useHashRef` — Reactive management of the URL hash (`window.location.hash`).
+- `useLoadingRef` — Easy management of loading states (local and global).
+
+## How to Work with Them
+
+The hooks are designed to minimize boilerplate code. For example, when working with local storage, you don't need to manually call `getItem` and `setItem`. Just create a variable, and any changes to it will be automatically saved to `localStorage`.
+
+```typescript
+import { useStorageRef } from '@dxtmisha/functional'
+
+// The 'theme' value will be automatically saved and loaded
+const theme = useStorageRef('theme', 'light')
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+```
+
+For internationalization, a combination of management classes and hooks is used. If you change the language via `GeoRef.set()`, all variables created via `useTranslateRef` will instantly update their values across the entire application without a page reload.
+
+```typescript
+import { useTranslateRef, useGeoIntlRef } from '@dxtmisha/functional'
+
+const title = useTranslateRef('main.title')
+const intl = useGeoIntlRef()
+
+// The formatted price will update itself when the currency or language changes
+const priceDisplay = intl.currency(12500, 'RUB')
+```
+
+Search and formatting hooks (`useSearchRef`, `useFormattersRef`) are often used as building blocks for more complex tools like `useApiManagementRef`, but they can also be used independently for processing local data arrays.
+
+```typescript
+import { ref } from 'vue'
+import { useSearchRef } from '@dxtmisha/functional'
+
+const items = ref([{ name: 'Apple' }, { name: 'Banana' }])
+const search = ref('')
+
+const { listSearch } = useSearchRef(items, ['name'], search)
+// listSearch will always contain only the filtered items
+```
+
+This approach allows you to build interfaces declaratively: you describe what data you need and how it should be linked, and the hooks take care of all the synchronization and updating work.

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

@@ -0,0 +1,73 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/# Реактивные хуки (Composables)'/>
+
+# Реактивные хуки (Composables)
+
+Набор инструментов для работы с браузерными API, хранилищами и интернационализацией в реактивном стиле **Vue 3 (Composition API)**.
+
+## Особенности
+
+Основная идея данных хуков — предоставить простой и надежный интерфейс для работы с внешними данными и состоянием. Они автоматически синхронизируют значения с хранилищами, следят за изменениями в других вкладках и обеспечивают мгновенное обновление интерфейса при смене глобальных настроек (например, языка или валюты).
+
+## Доступные хуки
+
+### Хранение данных
+- `useStorageRef` — Реактивная обертка над `localStorage`. Поддерживает время жизни (cache) и синхронизацию между вкладками.
+- `useSessionRef` — Работа с `sessionStorage`.
+- `useCookieRef` — Управление куками (Cookies) в реактивном стиле.
+
+### Интернационализация (I18n)
+- `useTranslateRef` — Реактивное получение строк перевода. Автоматически обновляется при смене языка в `GeoRef`.
+- `useGeoIntlRef` — Форматирование чисел, валют и дат с учетом текущей локали.
+
+### Работа с данными и поиск
+- `useSearchRef` — Клиентский поиск по массивам данных с поддержкой фильтрации по нескольким колонкам.
+- `useFormattersRef` — Массовое форматирование списков объектов по заданным правилам.
+
+### Браузерные API и Состояние
+- `useBroadcastValueRef` — Передача и синхронизация данных между окнами/вкладками браузера через `BroadcastChannel`.
+- `useHashRef` — Реактивное управление хешем в URL (`window.location.hash`).
+- `useLoadingRef` — Удобное управление состояниями загрузки (локальными и глобальными).
+
+## Как с ними работать
+
+Хуки разработаны так, чтобы минимизировать количество шаблонного кода. Например, при работе с локальным хранилищем вам не нужно вручную вызывать `getItem` и `setItem`. Достаточно создать переменную, и любые изменения в ней будут автоматически сохранены в `localStorage`.
+
+```typescript
+import { useStorageRef } from '@dxtmisha/functional'
+
+// Значение 'theme' будет автоматически сохраняться и загружаться
+const theme = useStorageRef('theme', 'light')
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+```
+
+Для интернационализации используется связка управляющих классов и хуков. Если вы измените язык через `GeoRef.set()`, все переменные, созданные через `useTranslateRef`, моментально обновят свои значения во всем приложении без перезагрузки страницы.
+
+```typescript
+import { useTranslateRef, useGeoIntlRef } from '@dxtmisha/functional'
+
+const title = useTranslateRef('main.title')
+const intl = useGeoIntlRef()
+
+// Отформатированная цена будет сама меняться при смене валюты или языка
+const priceDisplay = intl.currency(12500, 'RUB')
+```
+
+Хуки поиска и форматирования (`useSearchRef`, `useFormattersRef`) часто используются как строительные блоки для более сложных инструментов, таких как `useApiManagementRef`, но могут применяться и самостоятельно для обработки локальных массивов данных.
+
+```typescript
+import { ref } from 'vue'
+import { useSearchRef } from '@dxtmisha/functional'
+
+const items = ref([{ name: 'Яблоко' }, { name: 'Банан' }])
+const search = ref('')
+
+const { listSearch } = useSearchRef(items, ['name'], search)
+// listSearch всегда содержит только отфильтрованные элементы
+```
+
+Такой подход позволяет строить интерфейсы декларативно: вы описываете, какие данные вам нужны и как они должны быть связаны, а хуки берут на себя всю работу по синхронизации и обновлению.

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

@@ -0,0 +1,73 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/# Hook phản hồi (Composables)'/>
+
+# Hook phản hồi (Composables)
+
+Một tập hợp các công cụ để làm việc với các API trình duyệt, lưu trữ và quốc tế hóa theo phong cách phản hồi của **Vue 3 (Composition API)**.
+
+## Đặc điểm
+
+Ý tưởng cốt lõi của các hook này là cung cấp một giao diện đơn giản và đáng tin cậy để làm việc với dữ liệu và trạng thái bên ngoài. Chúng tự động đồng bộ hóa các giá trị với kho lưu trữ, theo dõi các thay đổi trong các tab khác và đảm bảo cập nhật giao diện người dùng tức thì khi các cài đặt toàn cầu (như ngôn ngữ hoặc đơn vị tiền tệ) thay đổi.
+
+## Các hook hiện có
+
+### Lưu trữ dữ liệu
+- `useStorageRef` — Lớp vỏ phản hồi cho `localStorage`. Hỗ trợ thời gian tồn tại (cache) và đồng bộ hóa giữa các tab.
+- `useSessionRef` — Để làm việc với `sessionStorage`.
+- `useCookieRef` — Quản lý cookie phản hồi.
+
+### Quốc tế hóa (I18n)
+- `useTranslateRef` — Truy xuất phản hồi các chuỗi bản dịch. Tự động cập nhật khi ngôn ngữ được thay đổi trong `GeoRef`.
+- `useGeoIntlRef` — Định dạng số, tiền tệ và ngày tháng dựa trên ngôn ngữ hiện tại.
+
+### Xử lý dữ liệu và tìm kiếm
+- `useSearchRef` — Tìm kiếm phía máy khách cho các mảng dữ liệu với hỗ trợ lọc nhiều cột.
+- `useFormattersRef` — Định dạng hàng loạt danh sách đối tượng dựa trên các quy tắc được xác định trước.
+
+### API trình duyệt và Trạng thái
+- `useBroadcastValueRef` — Truyền và đồng bộ hóa dữ liệu giữa các cửa sổ/tab thông qua `BroadcastChannel`.
+- `useHashRef` — Quản lý phản hồi mã băm URL (`window.location.hash`).
+- `useLoadingRef` — Quản lý dễ dàng các trạng thái tải (cục bộ và toàn cầu).
+
+## Cách làm việc với chúng
+
+Các hook được thiết kế để giảm thiểu mã mẫu. Ví dụ: khi làm việc với bộ lưu trữ cục bộ, bạn không cần gọi `getItem` và `setItem` một cách thủ công. Chỉ cần tạo một biến và mọi thay đổi đối với biến đó sẽ tự động được lưu vào `localStorage`.
+
+```typescript
+import { useStorageRef } from '@dxtmisha/functional'
+
+// Giá trị 'theme' sẽ được tự động lưu và tải
+const theme = useStorageRef('theme', 'light')
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+```
+
+Đối với quốc tế hóa, một sự kết hợp giữa các lớp quản lý và các hook được sử dụng. Nếu bạn thay đổi ngôn ngữ thông qua `GeoRef.set()`, tất cả các biến được tạo qua `useTranslateRef` sẽ ngay lập tức cập nhật giá trị của chúng trên toàn bộ ứng dụng mà không cần tải lại trang.
+
+```typescript
+import { useTranslateRef, useGeoIntlRef } from '@dxtmisha/functional'
+
+const title = useTranslateRef('main.title')
+const intl = useGeoIntlRef()
+
+// Giá đã định dạng sẽ tự cập nhật khi tiền tệ hoặc ngôn ngữ thay đổi
+const priceDisplay = intl.currency(12500, 'RUB')
+```
+
+Các hook tìm kiếm và định dạng (`useSearchRef`, `useFormattersRef`) thường được sử dụng như các khối xây dựng cho các công cụ phức tạp hơn như `useApiManagementRef`, nhưng chúng cũng có thể được sử dụng độc lập để xử lý các mảng dữ liệu cục bộ.
+
+```typescript
+import { ref } from 'vue'
+import { useSearchRef } from '@dxtmisha/functional'
+
+const items = ref([{ name: 'Táo' }, { name: 'Chuối' }])
+const search = ref('')
+
+const { listSearch } = useSearchRef(items, ['name'], search)
+// listSearch sẽ luôn chỉ chứa các mục đã được lọc
+```
+
+Cách tiếp cận này cho phép bạn xây dựng giao diện một cách khai báo: bạn mô tả dữ liệu nào bạn cần và cách chúng được liên kết, và các hook sẽ đảm nhận tất cả công việc đồng bộ hóa và cập nhật.

package/src/media/functional/functional/composables/useApiDelete/useApiDelete.en.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useApiDelete - DELETE Request Execution'/>
+
+# `useApiDelete`
+
+Returns an object with a loading state and a `send` method for executing API `DELETE` requests.
+
+**Parameters:**
+- `path?: RefOrNormal<string | undefined>` — Path to the API endpoint (can be reactive).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Callback action to perform after the request completes successfully.
+- `transformation?: (data: T) => Return` — Function to transform the response data before it is returned or passed to the `action`.
+- `toData: boolean = true` — Whether to extract the `data` field from the response.
+- `options?: ApiOptions` — Additional request options (`ApiFetch` object parameter).
+- `apiInstance?: ApiInstance` — API instance to use for the request. Defaults to `Api.getItem()`.
+
+**Returns:**
+An object with the following properties:
+- `loading: Ref<boolean>` — Reactive loading state. It becomes `true` while the request is in progress and `false` after it completes or fails.
+- `send(request?: Request): Promise<Return | undefined>` — An asynchronous method for sending the `DELETE` request. It automatically manages the `loading` state, applies the transformation function to the response, executes the `action` callback on success, and safely handles errors by logging them to the console.
+
+```typescript
+import { useApiDelete } from '@dxtmisha/functional'
+
+const { loading, send } = useApiDelete(
+  '/api/delete',
+  (data) => console.log('Action complete:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const handleDelete = async () => {
+  const result = await send({ id: 1 })
+  console.log('Final Result:', result)
+}
+```

package/src/media/functional/functional/composables/useApiDelete/useApiDelete.ru.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useApiDelete - Выполнение DELETE-запросов'/>
+
+# `useApiDelete`
+
+Возвращает объект с состоянием загрузки и методом `send` для выполнения `DELETE`-запросов к API.
+
+**Параметры:**
+- `path?: RefOrNormal<string | undefined>` — Путь к endpoint API (может быть реактивным).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Действие (коллбэк), выполняемое после успешного завершения запроса.
+- `transformation?: (data: T) => Return` — Функция трансформации ответа от сервера перед возвращением или передачей в `action`.
+- `toData: boolean = true` — Извлекать ли поле `data` из ответа.
+- `options?: ApiOptions` — Дополнительные опции запроса (объект параметров `ApiFetch`).
+- `apiInstance?: ApiInstance` — Экземпляр API, используемый для выполнения запроса. По умолчанию `Api.getItem()`.
+
+**Возвращает:**
+Объект со следующими свойствами:
+- `loading: Ref<boolean>` — Реактивное состояние загрузки. Принимает значение `true` во время выполнения запроса и `false` после его завершения или ошибки.
+- `send(request?: Request): Promise<Return | undefined>` — Асинхронный метод для отправки `DELETE`-запроса. Он автоматически управляет состоянием `loading`, применяет функцию трансформации к ответу, вызывает коллбэк `action` при успехе и безопасно обрабатывает ошибки.
+
+```typescript
+import { useApiDelete } from '@dxtmisha/functional'
+
+const { loading, send } = useApiDelete(
+  '/api/delete',
+  (data) => console.log('Действие завершено:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const handleDelete = async () => {
+  const result = await send({ id: 1 })
+  console.log('Итоговый результат:', result)
+}
+```

package/src/media/functional/functional/composables/useApiDelete/useApiDelete.vi.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useApiDelete - Thực hiện yêu cầu DELETE'/>
+
+# `useApiDelete`
+
+Trả về một đối tượng với trạng thái tải và phương thức `send` để thực hiện các yêu cầu API `DELETE`.
+
+**Tham số:**
+- `path?: RefOrNormal<string | undefined>` — Đường dẫn đến endpoint API (có thể phản ứng).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Hành động (callback) thực hiện sau khi yêu cầu hoàn tất thành công.
+- `transformation?: (data: T) => Return` — Hàm chuyển đổi dữ liệu phản hồi từ máy chủ trước khi trả về hoặc truyền vào `action`.
+- `toData: boolean = true` — Việc trích xuất trường `data` từ phản hồi hay không.
+- `options?: ApiOptions` — Các tùy chọn bổ sung cho yêu cầu (đối tượng tham số `ApiFetch`).
+- `apiInstance?: ApiInstance` — Phiên bản API sử dụng cho yêu cầu. Mặc định là `Api.getItem()`.
+
+**Giá trị trả về:**
+Một đối tượng với các thuộc tính sau:
+- `loading: Ref<boolean>` — Trạng thái tải phản ứng. Sẽ là `true` trong khi yêu cầu đang thực hiện và `false` sau khi hoàn thành hoặc có lỗi.
+- `send(request?: Request): Promise<Return | undefined>` — Phương thức bất đồng bộ để gửi yêu cầu `DELETE`. Nó tự động quản lý trạng thái `loading`, áp dụng hàm biến đổi cho phản hồi, thực hiện callback `action` khi thành công và xử lý lỗi một cách an toàn bằng cách ghi log ra console.
+
+```typescript
+import { useApiDelete } from '@dxtmisha/functional'
+
+const { loading, send } = useApiDelete(
+  '/api/delete',
+  (data) => console.log('Hành động hoàn tất:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const handleDelete = async () => {
+  const result = await send({ id: 1 })
+  console.log('Kết quả cuối cùng:', result)
+}
+```

package/src/media/functional/functional/composables/useApiGet/useApiGet.en.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useApiGet - GET Request Execution'/>
+
+# `useApiGet`
+
+Returns an object with a loading state and a `send` method for executing API `GET` requests.
+
+**Parameters:**
+- `path?: RefOrNormal<string | undefined>` — Path to the API endpoint (can be reactive).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Callback action to perform after the request completes successfully.
+- `transformation?: (data: T) => Return` — Function to transform the response data before it is returned or passed to the `action`.
+- `toData: boolean = true` — Whether to extract the `data` field from the response.
+- `options?: ApiOptions` — Additional request options (`ApiFetch` object parameter).
+- `apiInstance?: ApiInstance` — API instance to use for the request. Defaults to `Api.getItem()`.
+
+**Returns:**
+An object with the following properties:
+- `loading: Ref<boolean>` — Reactive loading state. It becomes `true` while the request is in progress and `false` after it completes or fails.
+- `send(request?: Request): Promise<Return | undefined>` — An asynchronous method for sending the `GET` request. It automatically manages the `loading` state, applies the transformation function to the response, executes the `action` callback on success, and safely handles errors by logging them to the console.
+
+```typescript
+import { useApiGet } from '@dxtmisha/functional'
+
+const { loading, send } = useApiGet(
+  '/api/data',
+  (data) => console.log('Action complete:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const fetchData = async () => {
+  const result = await send({ id: 1 })
+  console.log('Final Result:', result)
+}
+```

package/src/media/functional/functional/composables/useApiGet/useApiGet.ru.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useApiGet - Выполнение GET-запросов'/>
+
+# `useApiGet`
+
+Возвращает объект с состоянием загрузки и методом `send` для выполнения `GET`-запросов к API.
+
+**Параметры:**
+- `path?: RefOrNormal<string | undefined>` — Путь к endpoint API (может быть реактивным).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Действие (коллбэк), выполняемое после успешного завершения запроса.
+- `transformation?: (data: T) => Return` — Функция трансформации ответа от сервера перед возвращением или передачей в `action`.
+- `toData: boolean = true` — Извлекать ли поле `data` из ответа.
+- `options?: ApiOptions` — Дополнительные опции запроса (объект параметров `ApiFetch`).
+- `apiInstance?: ApiInstance` — Экземпляр API, используемый для выполнения запроса. По умолчанию `Api.getItem()`.
+
+**Возвращает:**
+Объект со следующими свойствами:
+- `loading: Ref<boolean>` — Реактивное состояние загрузки. Принимает значение `true` во время выполнения запроса и `false` после его завершения или ошибки.
+- `send(request?: Request): Promise<Return | undefined>` — Асинхронный метод для отправки `GET`-запроса. Он автоматически управляет состоянием `loading`, применяет функцию трансформации к ответу, вызывает коллбэк `action` при успехе и безопасно обрабатывает ошибки.
+
+```typescript
+import { useApiGet } from '@dxtmisha/functional'
+
+const { loading, send } = useApiGet(
+  '/api/data',
+  (data) => console.log('Действие завершено:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const fetchData = async () => {
+  const result = await send({ id: 1 })
+  console.log('Итоговый результат:', result)
+}
+```

package/src/media/functional/functional/composables/useApiGet/useApiGet.vi.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useApiGet - Thực hiện yêu cầu GET'/>
+
+# `useApiGet`
+
+Trả về một đối tượng với trạng thái tải và phương thức `send` để thực hiện các yêu cầu API `GET`.
+
+**Tham số:**
+- `path?: RefOrNormal<string | undefined>` — Đường dẫn đến endpoint API (có thể phản ứng).
+- `action?: (data: Return | undefined) => Promise<void> | void` — Hành động (callback) thực hiện sau khi yêu cầu hoàn tất thành công.
+- `transformation?: (data: T) => Return` — Hàm chuyển đổi dữ liệu phản hồi từ máy chủ trước khi trả về hoặc truyền vào `action`.
+- `toData: boolean = true` — Việc trích xuất trường `data` từ phản hồi hay không.
+- `options?: ApiOptions` — Các tùy chọn bổ sung cho yêu cầu (đối tượng tham số `ApiFetch`).
+- `apiInstance?: ApiInstance` — Phiên bản API sử dụng cho yêu cầu. Mặc định là `Api.getItem()`.
+
+**Giá trị trả về:**
+Một đối tượng với các thuộc tính sau:
+- `loading: Ref<boolean>` — Trạng thái tải phản ứng. Sẽ là `true` trong khi yêu cầu đang thực hiện và `false` sau khi hoàn thành hoặc có lỗi.
+- `send(request?: Request): Promise<Return | undefined>` — Phương thức bất đồng bộ để gửi yêu cầu `GET`. Nó tự động quản lý trạng thái `loading`, áp dụng hàm biến đổi cho phản hồi, thực hiện callback `action` khi thành công và xử lý lỗi một cách an toàn bằng cách ghi log ra console.
+
+```typescript
+import { useApiGet } from '@dxtmisha/functional'
+
+const { loading, send } = useApiGet(
+  '/api/data',
+  (data) => console.log('Hành động hoàn tất:', data),
+  (raw) => ({ ...raw, processed: true }),
+  true,
+  { cache: false }
+)
+
+const fetchData = async () => {
+  const result = await send({ id: 1 })
+  console.log('Kết quả cuối cùng:', result)
+}
+```