@dxtmisha/wiki 0.39.1 → 0.39.2

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

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useCookieRef - Работа с Cookie'/>
+
+# `useCookieRef`
+
+Composable для работы с браузерными Cookie. Позволяет создавать реактивные переменные, которые автоматически синхронизируются с Cookie. Также поддерживает синхронизацию между вкладками через `BroadcastChannel`.
+
+**Параметры:**
+- `name: string` — Название cookie.
+- `defaultValue?: T | string | (() => (T | string))` — Значение по умолчанию. Может быть статичным значением или функцией.
+- `options?: CookieOptions` — Дополнительные параметры для управления cookie (срок жизни, путь, домен и т.д.).
+
+**Возвращает (`Ref<T | string | undefined>`):**
+- Реактивную ссылку на значение в cookie.
+
+## Пример
+
+```typescript
+import { useCookieRef } from '@dxtmisha/functional'
+
+// Создание ссылки на cookie 'theme' со значением 'light' по умолчанию
+const theme = useCookieRef('theme', 'light', { age: 365 * 24 * 60 * 60 })
+
+// Обновление значения (автоматически сохраняется в cookie)
+theme.value = 'dark'
+
+// Значение будет одинаковым во всех вкладках браузера в реальном времени
+```

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

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useCookieRef - Quản lý Cookie'/>
+
+# `useCookieRef`
+
+Một composable để làm việc với Cookie trình duyệt. Nó cho phép tạo các biến phản ứng tự động đồng bộ hóa với Cookie. Ngoài ra, nó cũng hỗ trợ đồng bộ hóa giữa các tab trình duyệt thông qua `BroadcastChannel`.
+
+**Tham số:**
+- `name: string` — Tên cookie.
+- `defaultValue?: T | string | (() => (T | string))` — Giá trị mặc định. Có thể là một giá trị tĩnh hoặc một hàm.
+- `options?: CookieOptions` — Các tham số bổ sung để quản lý cookie (expires, path, domain, v.v.).
+
+**Trả về (`Ref<T | string | undefined>`):**
+- Một tham chiếu phản ứng đến giá trị trong cookie.
+
+## Ví dụ
+
+```typescript
+import { useCookieRef } from '@dxtmisha/functional'
+
+// Tạo tham chiếu đến cookie 'theme' với giá trị mặc định là 'light'
+const theme = useCookieRef('theme', 'light', { age: 365 * 24 * 60 * 60 })
+
+// Cập nhật giá trị (tự động lưu vào cookie)
+theme.value = 'dark'
+
+// Giá trị sẽ được đồng bộ hóa trên tất cả các tab trình duyệt trong thời gian thực
+```

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

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useFormattersRef - List Formatting'/>
+
+# `useFormattersRef`
+
+A composable for reactive formatting of data lists based on specified rules for each property.
+
+**Parameters:**
+- `list: RefType<List>` — source data list (Ref or ComputedRef).
+- `options: Options` — formatting settings for each property:
+    - `type: FormattersType` — formatter type (`currency`, `date`, `name`, `number`, `plural`, `unit`).
+    - `options?: object` — additional settings for the specific formatter (e.g., currency code, date format).
+    - `transformation?: function` — custom function for value transformation.
+
+**Returns:**
+- `listFormat: ComputedRef<FormattersReturn<List, Options>>` — formatted data list. For each property specified in `options`, a corresponding `{property}Format` field is added to the items.
+
+### Generic Constraints
+
+- `Options extends FormattersOptionsList` — type of formatting options for each property.
+- `List extends FormattersListProp` — type of the source list (can be an array or a single item).
+
+## Architecture: Lazy `computed` (Dynamic Getters)
+
+This composable returns `listFormat` as a native JavaScript getter.
+This design allows calling `useFormattersRef()` **outside of the Vue component lifecycle** (e.g., globally or in stores).
+The `ComputedRef` object is created and cached by Vue upon the first access to the property during destructuring:
+
+```typescript
+// ComputedRef is created during destructuring in setup()
+const { listFormat } = useFormattersRef(items, { price: { type: FormattersType.currency } })
+```
+
+> **Important**: Avoid multiple accesses via dot notation (e.g., `result.listFormat`). Always destructure the result once at the `setup` level to ensure only one instance of the `computed` property is created.
+
+## Usage Example
+
+```typescript
+import { ref } from 'vue'
+import { useFormattersRef } from '@dxtmisha/functional'
+import { FormattersType } from '@dxtmisha/functional-basic'
+
+const items = ref([
+  { id: 1, price: 100, firstName: 'John', lastName: 'Doe' },
+  { id: 2, price: 250, firstName: 'Jane', lastName: 'Smith' }
+])
+
+const { listFormat } = useFormattersRef(items, {
+  price: { type: FormattersType.currency },
+  name: { type: FormattersType.name }
+})
+
+// listFormat.value will contain:
+// [
+//   { ..., priceFormat: '$100.00', nameFormat: 'John Doe' },
+//   { ..., priceFormat: '$250.00', nameFormat: 'Jane Smith' }
+// ]
+```

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

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useFormattersRef - Форматирование списка'/>
+
+# `useFormattersRef`
+
+Композабл для реактивного форматирования списков данных на основе заданных правил для каждого свойства.
+
+**Параметры:**
+- `list: RefType<List>` — исходный список данных (Ref или ComputedRef).
+- `options: Options` — настройки форматирования для каждого свойства:
+    - `type: FormattersType` — тип форматировщика (`currency`, `date`, `name`, `number`, `plural`, `unit`).
+    - `options?: object` — дополнительные настройки для конкретного типа (например, код валюты, формат даты).
+    - `transformation?: function` — пользовательская функция для преобразования значения.
+
+**Возвращает:**
+- `listFormat: ComputedRef<FormattersReturn<List, Options>>` — отформатированный список данных. К элементам добавляются поля вида `{property}Format` для каждого свойства, указанного в `options`.
+
+### Ограничения дженериков (Generic Constraints)
+
+- `Options extends FormattersOptionsList` — тип параметров форматирования каждого свойства.
+- `List extends FormattersListProp` — тип исходного списка (может быть массивом или одним элементом).
+
+## Архитектура: ленивые `computed` (Динамические геттеры)
+
+Композибл возвращает `listFormat` как нативный JS-геттер.
+Такой подход позволяет вызывать `useFormattersRef()` **вне жизненного цикла компонента Vue** (например, глобально или в сторах).
+Объект `ComputedRef` создается и кэшируется Vue при первом обращении к свойству во время деструктуризации:
+
+```typescript
+// ComputedRef создается при деструктуризации в setup()
+const { listFormat } = useFormattersRef(items, { price: { type: FormattersType.currency } })
+```
+
+> **Важно**: Избегайте обращения к геттеру "через точку" множество раз (например, `result.listFormat`). Всегда деструктурируйте результат один раз на уровне `setup`, чтобы гарантировать создание только одного экземпляра `computed`.
+
+## Пример использования
+
+```typescript
+import { ref } from 'vue'
+import { useFormattersRef } from '@dxtmisha/functional'
+import { FormattersType } from '@dxtmisha/functional-basic'
+
+const items = ref([
+  { id: 1, price: 100, firstName: 'Иван', lastName: 'Иванов' },
+  { id: 2, price: 250, firstName: 'Анна', lastName: 'Петрова' }
+])
+
+const { listFormat } = useFormattersRef(items, {
+  price: { type: FormattersType.currency },
+  name: { type: FormattersType.name }
+})
+
+// listFormat.value будет содержать:
+// [
+//   { ..., priceFormat: '100,00 ₽', nameFormat: 'Иван Иванов' },
+//   { ..., priceFormat: '250,00 ₽', nameFormat: 'Анна Петрова' }
+// ]
+```

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

@@ -0,0 +1,59 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useFormattersRef - Định dạng danh sách'/>
+
+# `useFormattersRef`
+
+Một bộ composable để định dạng phản hồi danh sách dữ liệu dựa trên các quy tắc được chỉ định cho từng thuộc tính.
+
+**Tham số:**
+- `list: RefType<List>` — danh sách dữ liệu nguồn (Ref hoặc ComputedRef).
+- `options: Options` — cài đặt định dạng cho từng thuộc tính:
+    - `type: FormattersType` — loại định dạng (`currency`, `date`, `name`, `number`, `plural`, `unit`).
+    - `options?: object` — cài đặt bổ sung cho loại định dạng cụ thể (ví dụ: mã tiền tệ, định dạng ngày tháng).
+    - `transformation?: function` — hàm tùy chỉnh để chuyển đổi giá trị.
+
+**Trả về:**
+- `listFormat: ComputedRef<FormattersReturn<List, Options>>` — danh sách dữ liệu đã được định dạng. Đối với mỗi thuộc tính được chỉ định trong `options`, một trường `{property}Format` tương ứng sẽ được thêm vào các mục.
+
+### Ràng buộc Generic (Generic Constraints)
+
+- `Options extends FormattersOptionsList` — kiểu tùy chọn định dạng cho từng thuộc tính.
+- `List extends FormattersListProp` — kiểu danh sách nguồn (có thể là một mảng hoặc một mục duy nhất).
+
+## Kiến trúc: `computed` Lazy (Getter động)
+
+Composable này trả về `listFormat` dưới dạng native JavaScript getter.
+Điều này cho phép bạn gọi `useFormattersRef()` **bên ngoài vòng đời của component Vue** (ví dụ: toàn cục hoặc trong các store).
+Đối tượng `ComputedRef` được tạo và lưu vào bộ nhớ đệm bởi Vue trong lần đầu tiên thuộc tính được truy cập trong quá trình destructuring:
+
+```typescript
+// ComputedRef được tạo trong quá trình destructuring ở setup()
+const { listFormat } = useFormattersRef(items, { price: { type: FormattersType.currency } })
+```
+
+> **Quan trọng**: Tránh truy cập getter "thông qua dấu chấm" nhiều lần (ví dụ: `result.listFormat`). Luôn phân rã (destructure) kết quả một lần ở cấp độ `setup` để đảm bảo chỉ có một phiên bản của thuộc tính `computed` được tạo ra.
+
+## Ví dụ sử dụng
+
+```typescript
+import { ref } from 'vue'
+import { useFormattersRef } from '@dxtmisha/functional'
+import { FormattersType } from '@dxtmisha/functional-basic'
+
+const items = ref([
+  { id: 1, price: 100, firstName: 'Hùng', lastName: 'Nguyễn' },
+  { id: 2, price: 250, firstName: 'Lan', lastName: 'Trần' }
+])
+
+const { listFormat } = useFormattersRef(items, {
+  price: { type: FormattersType.currency },
+  name: { type: FormattersType.name }
+})
+
+// listFormat.value sẽ chứa:
+// [
+//   { ..., priceFormat: '100,00 ₫', nameFormat: 'Nguyễn Hùng' },
+//   { ..., priceFormat: '250,00 ₫', nameFormat: 'Trần Lan' }
+// ]
+```

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

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useGeoIntlRef - Data Formatting'/>
+
+# `useGeoIntlRef`
+
+A composable that returns an instance of the `GeoIntlRef` class for working with internationalization and data formatting (numbers, currencies, dates, etc.) based on the current locale.
+
+**Returns (`GeoIntlRef`):**
+- A `GeoIntlRef` class object providing methods for reactive formatting.
+
+## `GeoIntlRef` Methods
+
+The class provides reactive methods for formatting. All available methods of this class can be found in the GeoIntlRef description.
+
+## Example
+
+```typescript
+import { useGeoIntlRef } from '@dxtmisha/functional'
+
+const intl = useGeoIntlRef()
+
+// Reactive number formatting
+const formattedNumber = intl.number(1234.56) // "1,234.56" (for en-US)
+
+// Currency formatting
+const price = intl.currency(1000, 'USD') // "$1,000.00"
+```

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

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useGeoIntlRef - Форматирование данных'/>
+
+# `useGeoIntlRef`
+
+Composable, возвращающий экземпляр класса `GeoIntlRef` для работы с интернационализацией и форматированием данных (чисел, валют, дат и т.д.) на основе текущей локали.
+
+**Возвращает (`GeoIntlRef`):**
+- Объект класса `GeoIntlRef`, предоставляющий методы для реактивного форматирования.
+
+## Методы `GeoIntlRef`
+
+Класс предоставляет реактивные методы для форматирования. Все доступные методы этого класса можно найти в описании GeoIntlRef.
+
+## Пример
+
+```typescript
+import { useGeoIntlRef } from '@dxtmisha/functional'
+
+const intl = useGeoIntlRef()
+
+// Реактивное форматирование числа
+const formattedNumber = intl.number(1234.56) // "1 234,56" (для ru-RU)
+
+// Форматирование валюты
+const price = intl.currency(1000, 'RUB') // "1 000 ₽"
+```

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

@@ -0,0 +1,28 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useGeoIntlRef - Định dạng dữ liệu'/>
+
+# `useGeoIntlRef`
+
+Một composable trả về một instance của lớp `GeoIntlRef` để làm việc với quốc tế hóa và định dạng dữ liệu (số, tiền tệ, ngày tháng, v.v.) dựa trên locale hiện tại.
+
+**Trả về (`GeoIntlRef`):**
+- Một đối tượng lớp `GeoIntlRef` cung cấp các phương thức để định dạng phản ứng.
+
+## Các phương thức của `GeoIntlRef`
+
+Lớp này cung cấp các phương thức phản ứng để định dạng. Tất cả các phương thức có sẵn của lớp này có thể được tìm thấy trong mô tả GeoIntlRef.
+
+## Ví dụ
+
+```typescript
+import { useGeoIntlRef } from '@dxtmisha/functional'
+
+const intl = useGeoIntlRef()
+
+// Định dạng số phản ứng
+const formattedNumber = intl.number(1234.56) // "1.234,56" (cho vi-VN)
+
+// Định dạng tiền tệ
+const price = intl.currency(1000, 'VND') // "1.000 ₫"
+```

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

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useHashRef - Hash Management'/>
+
+# `useHashRef`
+
+A composable for working with the URL hash (the part after `#`). It allows creating reactive variables that automatically synchronize with a specific key in the hash.
+
+**Parameters:**
+- `name: string` — Key name in the hash.
+- `defaultValue?: T | (() => T)` — Default value if the key is missing from the hash.
+
+**Returns (`Ref<T>`):**
+- A reactive reference to the value in the hash.
+
+## Example
+
+```typescript
+import { useHashRef } from '@dxtmisha/functional'
+
+// Create a reference to 'step' value in the URL hash
+const step = useHashRef('step', '1')
+
+// Update value (automatically updates URL: #step=2)
+step.value = '2'
+
+// If the user changes the hash manually or via browser history,
+// step.value will be updated automatically.
+```

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

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useHashRef - Работа с Hash'/>
+
+# `useHashRef`
+
+Composable для работы с хэшем URL (часть после `#`). Позволяет создавать реактивные переменные, которые автоматически синхронизируются с определенным ключом в хэше.
+
+**Параметры:**
+- `name: string` — Название ключа в хэше.
+- `defaultValue?: T | (() => T)` — Значение по умолчанию, если ключ отсутствует в хэше.
+
+**Возвращает (`Ref<T>`):**
+- Реактивную ссылку на значение в хэше.
+
+## Пример
+
+```typescript
+import { useHashRef } from '@dxtmisha/functional'
+
+// Создание ссылки на значение 'step' в хэше URL
+const step = useHashRef('step', '1')
+
+// Обновление значения (автоматически обновляет URL: #step=2)
+step.value = '2'
+
+// При изменении хэша пользователем вручную или через браузер, 
+// значение step.value обновится автоматически.
+```

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

@@ -0,0 +1,29 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useHashRef - Quản lý Hash'/>
+
+# `useHashRef`
+
+Một composable để làm việc với hash URL (phần sau dấu `#`). Nó cho phép tạo các biến phản ứng tự động đồng bộ hóa với một khóa cụ thể trong hash.
+
+**Tham số:**
+- `name: string` — Tên khóa trong hash.
+- `defaultValue?: T | (() => T)` — Giá trị mặc định nếu khóa không tồn tại trong hash.
+
+**Trả về (`Ref<T>`):**
+- Một tham chiếu phản ứng đến giá trị trong hash.
+
+## Ví dụ
+
+```typescript
+import { useHashRef } from '@dxtmisha/functional'
+
+// Tạo tham chiếu đến giá trị 'step' trong hash URL
+const step = useHashRef('step', '1')
+
+// Cập nhật giá trị (tự động cập nhật URL: #step=2)
+step.value = '2'
+
+// Nếu người dùng thay đổi hash thủ công hoặc qua lịch sử trình duyệt,
+// step.value sẽ được cập nhật tự động.
+```

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

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useLazyItemByMarginRef - Lazy loading by margin'/>
+
+# `useLazyItemByMarginRef`
+
+Composable for tracking the appearance of an element on the screen using `IntersectionObserver`. It is optimized by using a single observer instance for the same `rootMargin` values.
+
+**Parameters:**
+- `element: RefType<HTMLElement | undefined>` — reactive reference to the tracked HTML element.
+- `rootMargin: string` — margin for `IntersectionObserver` (e.g., `'100px 0px'`).
+
+**Returns:**
+- `lazyItemStatus: ShallowRef<boolean>` — element visibility status (whether it intersects the area considering `rootMargin`).
+- `lazyItem: LazyItem | undefined` — (getter) object with detailed tracking information (ratio, entry, etc.).
+
+## Usage Example
+
+```typescript
+import { ref } from 'vue'
+import { useLazyItemByMarginRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { lazyItemStatus } = useLazyItemByMarginRef(element, '128px 0px')
+
+// lazyItemStatus.value will become true when the element is within 128px of the viewport
+```

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

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useLazyItemByMarginRef - Ленивая загрузка по отступу'/>
+
+# `useLazyItemByMarginRef`
+
+Composable для отслеживания появления элемента на экране с использованием `IntersectionObserver`. Оптимизирован за счет использования единого экземпляра наблюдателя для одинаковых значений `rootMargin`.
+
+**Параметры:**
+- `element: RefType<HTMLElement | undefined>` — реактивная ссылка на отслеживаемый HTML-элемент.
+- `rootMargin: string` — отступ для `IntersectionObserver` (например, `'100px 0px'`).
+
+**Возвращает:**
+- `lazyItemStatus: ShallowRef<boolean>` — статус видимости элемента (пересекает ли он область с учетом `rootMargin`).
+- `lazyItem: LazyItem | undefined` — (getter) объект с подробной информацией об отслеживании (ratio, entry и т.д.).
+
+## Пример использования
+
+```typescript
+import { ref } from 'vue'
+import { useLazyItemByMarginRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { lazyItemStatus } = useLazyItemByMarginRef(element, '128px 0px')
+
+// lazyItemStatus.value станет true, когда элемент окажется в 128px от области видимости
+```

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

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useLazyItemByMarginRef - Tải lười theo lề'/>
+
+# `useLazyItemByMarginRef`
+
+Composable để theo dõi sự xuất hiện của một phần tử trên màn hình bằng cách sử dụng `IntersectionObserver`. Được tối ưu hóa bằng cách sử dụng một thực thể quan sát duy nhất cho các giá trị `rootMargin` giống nhau.
+
+**Tham số:**
+- `element: RefType<HTMLElement | undefined>` — tham chiếu phản ứng đến phần tử HTML được theo dõi.
+- `rootMargin: string` — lề cho `IntersectionObserver` (ví dụ: `'100px 0px'`).
+
+**Trả về:**
+- `lazyItemStatus: ShallowRef<boolean>` — trạng thái hiển thị của phần tử (liệu nó có cắt vùng quan sát dựa trên `rootMargin` hay không).
+- `lazyItem: LazyItem | undefined` — (getter) đối tượng chứa thông tin theo dõi chi tiết (tỷ lệ, mục nhập, v.v.).
+
+## Ví dụ sử dụng
+
+```typescript
+import { ref } from 'vue'
+import { useLazyItemByMarginRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { lazyItemStatus } = useLazyItemByMarginRef(element, '128px 0px')
+
+// lazyItemStatus.value sẽ trở thành true khi phần tử nằm trong khoảng 128px so với khung nhìn (viewport)
+```

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

@@ -0,0 +1,35 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useLazyRef - Lazy loading'/>
+
+# `useLazyRef`
+
+Composable for initializing the tracking of an element's appearance on the screen using `IntersectionObserver`.
+
+**Parameters:**
+- `options?: IntersectionObserverInit` — options for `IntersectionObserver`. Default: `{ rootMargin: '128px 0px' }`.
+
+**Returns:**
+- `intersectionObserver: IntersectionObserver | undefined` — the `IntersectionObserver` instance.
+- `getItem(element: HTMLElement): LazyItem | undefined` — returns a tracked element's data.
+- `addLazyItem(element: Ref<HTMLElement | undefined>): ShallowRef<boolean>` — adds an element for tracking and returns its visibility status ref.
+- `removeLazyItem(element?: HTMLElement): void` — removes an element from tracking.
+- `disconnectLazy(): void` — stops all tracking and disconnects the observer.
+
+## Usage Example
+
+```typescript
+import { ref, watch } from 'vue'
+import { useLazyRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { addLazyItem } = useLazyRef({ rootMargin: '200px' })
+
+const isVisible = addLazyItem(element)
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    console.log('Element is now visible!')
+  }
+})
+```

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

@@ -0,0 +1,35 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useLazyRef - Ленивая загрузка'/>
+
+# `useLazyRef`
+
+Composable для инициализации отслеживания появления элемента на экране с использованием `IntersectionObserver`.
+
+**Параметры:**
+- `options?: IntersectionObserverInit` — настройки для `IntersectionObserver`. По умолчанию: `{ rootMargin: '128px 0px' }`.
+
+**Возвращает:**
+- `intersectionObserver: IntersectionObserver | undefined` — экземпляр `IntersectionObserver`.
+- `getItem(element: HTMLElement): LazyItem | undefined` — получение данных отслеживаемого элемента.
+- `addLazyItem(element: Ref<HTMLElement | undefined>): ShallowRef<boolean>` — добавление элемента для отслеживания (возвращает статус видимости).
+- `removeLazyItem(element?: HTMLElement): void` — удаление элемента из отслеживания.
+- `disconnectLazy(): void` — прекращение отслеживания и отключение наблюдателя.
+
+## Пример использования
+
+```typescript
+import { ref, watch } from 'vue'
+import { useLazyRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { addLazyItem } = useLazyRef({ rootMargin: '200px' })
+
+const isVisible = addLazyItem(element)
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    console.log('Элемент теперь виден!')
+  }
+})
+```

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

@@ -0,0 +1,35 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Composables/useLazyRef - Tải lười'/>
+
+# `useLazyRef`
+
+Composable để khởi tạo việc theo dõi sự xuất hiện của một phần tử trên màn hình bằng cách sử dụng `IntersectionObserver`.
+
+**Tham số:**
+- `options?: IntersectionObserverInit` — cài đặt cho `IntersectionObserver`. Mặc định: `{ rootMargin: '128px 0px' }`.
+
+**Trả về:**
+- `intersectionObserver: IntersectionObserver | undefined` — thực thể `IntersectionObserver`.
+- `getItem(element: HTMLElement): LazyItem | undefined` — lấy dữ liệu của phần tử đang được theo dõi.
+- `addLazyItem(element: Ref<HTMLElement | undefined>): ShallowRef<boolean>` — thêm một phần tử để theo dõi (trả về ref trạng thái hiển thị).
+- `removeLazyItem(element?: HTMLElement): void` — xóa một phần tử khỏi việc theo dõi.
+- `disconnectLazy(): void` — dừng tất cả việc theo dõi và ngắt kết nối bộ quan sát.
+
+## Ví dụ sử dụng
+
+```typescript
+import { ref, watch } from 'vue'
+import { useLazyRef } from '@dxtmisha/functional'
+
+const element = ref<HTMLElement>()
+const { addLazyItem } = useLazyRef({ rootMargin: '200px' })
+
+const isVisible = addLazyItem(element)
+
+watch(isVisible, (visible) => {
+  if (visible) {
+    console.log('Phần tử hiện đã hiển thị!')
+  }
+})
+```

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

@@ -0,0 +1,20 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Composables/useLoadingRef - Loading status'/>
+
+# `useLoadingRef`
+
+Composable for obtaining the global loading status.
+
+**Returns:**
+- `ShallowRef<boolean>` — a reactive reference to the current loading status.
+
+## Usage Example
+
+```typescript
+import { useLoadingRef } from '@dxtmisha/functional'
+
+const isLoading = useLoadingRef()
+
+// Use isLoading.value in your template or logic
+```

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

@@ -0,0 +1,20 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Composables/useLoadingRef - Статус загрузки'/>
+
+# `useLoadingRef`
+
+Composable для получения глобального статуса загрузки.
+
+**Возвращает:**
+- `ShallowRef<boolean>` — реактивная ссылка на текущий статус загрузки.
+
+## Пример использования
+
+```typescript
+import { useLoadingRef } from '@dxtmisha/functional'
+
+const isLoading = useLoadingRef()
+
+// Используйте isLoading.value в вашем шаблоне или логике
+```