@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/functional/effect-scope/effect-scope.en.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/# Global Effect Scope'/>
+
+# Global Effect Scope
+
+The **EffectScopeGlobal** class provides access to a unified, long-running effect scope (**EffectScope**) in **Vue 3**. This allows for the creation of reactive dependencies (watch, computed) that are not tied to the lifecycle of specific components.
+
+## Features
+
+- **Persistence**: Effects launched via this class live for the entire duration of the application.
+- **Isolation**: Allows for grouping global reactive processes in one place to prevent memory leaks.
+- **Control**: All dependencies created inside `run()` are automatically associated with the global context.
+
+## Usage Examples
+
+Typically used to set up global listeners or computed properties that must remain available throughout the entire application.
+
+```javascript
+import { watch, ref } from 'vue'
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+
+const globalState = ref(0)
+
+// 1. Starting a global process
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Global state changed:', val)
+  })
+})
+
+// 2. Creating long-lived computed properties
+const persistentValue = EffectScopeGlobal.run(() => {
+  return computed(() => globalState.value * 2)
+})
+```
+
+This approach ensures that even if the component initiating the creation of this `watch` is unmounted, the watcher will continue to function.

package/src/media/functional/functional/effect-scope/effect-scope.ru.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/# Глобальная область эффектов'/>
+
+# Глобальная область эффектов
+
+Класс **EffectScopeGlobal** предоставляет доступ к единой, долгоживущей области действия эффектов (**EffectScope**) в **Vue 3**. Это позволяет создавать реактивные зависимости (watch, computed), которые не зависят от жизненного цикла конкретных компонентов.
+
+## Особенности
+
+- **Персистентность**: Эффекты, запущенные через этот класс, живут на протяжении всего времени работы приложения.
+- **Изоляция**: Позволяет группировать глобальные реактивные процессы в одном месте для предотвращения утечек памяти.
+- **Контроль**: Все созданные внутри `run()` зависимости автоматически связываются с глобальным контекстом.
+
+## Примеры использования
+
+Обычно используется для настройки глобальных слушателей или вычисляемых свойств, которые должны быть доступны во всем приложении.
+
+```javascript
+import { watch, ref } from 'vue'
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+
+const globalState = ref(0)
+
+// 1. Запуск глобального процесса
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Глобальное состояние изменилось:', val)
+  })
+})
+
+// 2. Создание долгоживущих computed-свойств
+const persistentValue = EffectScopeGlobal.run(() => {
+  return computed(() => globalState.value * 2)
+})
+```
+
+Этот подход гарантирует, что даже если компонент, инициировавший создание этого `watch`, будет уничтожен (unmounted), наблюдатель продолжит свою работу.

package/src/media/functional/functional/effect-scope/effect-scope.vi.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/# Phạm vi hiệu ứng toàn cục'/>
+
+# Phạm vi hiệu ứng toàn cục
+
+Lớp **EffectScopeGlobal** cung cấp quyền truy cập vào một phạm vi hiệu ứng (**EffectScope**) thống nhất và chạy lâu dài trong **Vue 3**. Điều này cho phép tạo ra các phụ thuộc phản hồi (watch, computed) không bị ràng buộc với chu kỳ sống của các thành phần cụ thể.
+
+## Các đặc điểm
+
+- **Tính bền bỉ**: Các hiệu ứng được khởi chạy thông qua lớp này sẽ tồn tại trong suốt thời gian hoạt động của ứng dụng.
+- **Sự cô lập**: Cho phép nhóm các quá trình phản hồi toàn cục vào một nơi để ngăn chặn rò rỉ bộ nhớ.
+- **Kiểm soát**: Tất cả các phụ thuộc được tạo bên trong `run()` sẽ tự động được liên kết với ngữ cảnh toàn cục.
+
+## Ví dụ sử dụng
+
+Thường được sử dụng để thiết lập các trình lắng nghe toàn cục hoặc các thuộc tính tính toán phải luôn sẵn dùng trong toàn bộ ứng dụng.
+
+```javascript
+import { watch, ref } from 'vue'
+import { EffectScopeGlobal } from '@dxtmisha/functional'
+
+const globalState = ref(0)
+
+// 1. Bắt đầu một quy trình toàn cục
+EffectScopeGlobal.run(() => {
+  watch(globalState, (val) => {
+    console.log('Trạng thái toàn cục đã thay đổi:', val)
+  })
+})
+
+// 2. Tạo ra các thuộc tính tính toán lâu dài
+const persistentValue = EffectScopeGlobal.run(() => {
+  return computed(() => globalState.value * 2)
+})
+```
+
+Cách tiếp cận này đảm bảo rằng ngay cả khi thành phần khởi tạo việc tạo `watch` này bị hủy (unmounted), trình theo dõi vẫn sẽ tiếp tục hoạt động.

package/src/media/functional/functional/execute-use/execute-use.en.mdx

@@ -0,0 +1,106 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/# Managed Singletons'/>
+
+# Managed Singletons (executeUse)
+
+The **executeUse** function is an advanced factory for creating managed singletons within the **Vue 3** ecosystem. It solves the problem of initializing and reusing reactive states, global services (like meta tags), or component logic by providing flexible control over the execution context (global, local, or via `provide/inject`).
+
+## Execution Modes
+
+**executeUse** supports three initialization modes (`ExecuteUseType` enum), each designed for specific architectural tasks:
+
+1. **global** (`executeUseGlobal`) — a single instance for the entire application. Ideal for creating services that live outside any specific component.
+2. **provide** (`executeUseProvide`) — shares state down the component tree using Vue's `provide`/`inject`. Guarantees that child components will receive the exact same instance from their closest provider parent.
+3. **local** (`executeUseLocal`) — a single instance within a closure, isolated inside its own `effectScope`.
+
+### Differences between `global` and `local`
+
+The main architectural difference between the `global` and `local` modes lies in the **initialization timing** (exactly when the instance is created):
+
+1. **`global` (Eager/Mass Initialization):**
+   - All callbacks wrapped in `global` are collected in a global array. They are **immediately executed all together** when the `executeUseGlobalInit()` function is called at the application's entry point (e.g., in `main.ts` or during SSR).
+   - **Use Case:** Mission-critical services (Settings, Meta Tags, Locales, User Sessions) that must be fully ready to work *before* the first component renders, or services that must be centrally recreated on app reset.
+
+2. **`local` (Lazy Initialization):**
+   - The instance is created **only at the exact moment of the first call** inside a component or service. Importantly, because the initialization is wrapped in a global `effectScope`, this singleton—just like the global one—will "live forever" and won't be destroyed even when the calling component unmounts.
+   - **Use Case:** Heavy or context-specific services (e.g., complex filtering, an isolated websocket chat, heavy analytics trackers) that:
+     - Might not be needed during the current user session.
+     - Should only be initialized exactly when the user reaches the relevant section of the application.
+
+## Usage (Global Service Example)
+
+The most common scenario is creating a global store or service (for example, to manage SEO meta tags).
+
+```typescript
+import { ref } from 'vue'
+import { executeUseGlobal } from '@dxtmisha/functional'
+
+// 1. Defining the singleton
+const item = executeUseGlobal(() => {
+  const title = ref('My Title')
+  
+  const updateTitle = (newTitle: string) => {
+    title.value = newTitle
+  }
+
+  return { title, updateTitle }
+})
+
+// 2. Exporting a composable function (following Vue conventions)
+export const useMeta = () => item()
+```
+
+Inside any Vue component:
+
+```typescript
+import { useMeta } from './useMeta'
+
+const { title, updateTitle } = useMeta() // title will be shared across all calls
+```
+
+## Provide / Inject Usage
+
+If you need the state to live only within a specific component tree (like a complex form and its internal fields), use `executeUseProvide`.
+
+```typescript
+import { executeUseProvide } from '@dxtmisha/functional'
+
+const useFormState = executeUseProvide((initialData: any) => {
+  // ... reactive state initialization logic
+  return { /* ... */ }
+})
+```
+
+Upon the first call to `useFormState(data)` in a parent component, the state is initialized and provided downwards (via `provide`). Any child component that then calls `useFormState()` will receive this very instance via `inject`.
+
+## Instance Management
+
+The `executeUse` functions wrap the result of your factory and augment it with special lifecycle management methods (depending on the chosen mode).
+
+### The init() method
+
+The `init()` method is simply a stub that returns the object itself. It is used exclusively to explicitly highlight the initial call of the composable within a component's code.
+
+```typescript
+const service = useMeta()
+
+// Explicitly defining the entry point
+service.init()
+```
+
+### Reset and Reinitialization
+
+```typescript
+const service = useMeta()
+
+// Resets the cached instance (available for local and global modes).
+// On the next composable call, a fresh instance will be created.
+if (service.destroyExecute) {
+  service.destroyExecute()
+}
+```
+
+Additionally, for global singletons, the `executeUseGlobalInit()` function is available, which forcefully invokes all registered global `callback` methods (useful for SSR initialization or full application state resets).
+
+If your application uses the `dxtFunctionalPlugin`, you **do not need** to call `executeUseGlobalInit()` manually at startup — the plugin handles it automatically under the hood.

package/src/media/functional/functional/execute-use/execute-use.ru.mdx

@@ -0,0 +1,106 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/# Управляемые синглтоны'/>
+
+# Управляемые синглтоны (executeUse)
+
+Функция **executeUse** — это продвинутая фабрика для создания управляемых синглтонов в экосистеме **Vue 3**. Она решает проблему инициализации и переиспользования реактивных состояний, глобальных сервисов (например, мета-тегов) или компонентов, предоставляя гибкий контроль над контекстом выполнения (глобальный, локальный или через `provide/inject`).
+
+## Режимы работы
+
+**executeUse** поддерживает три режима инициализации (enum `ExecuteUseType`), каждый из которых предназначен для своих архитектурных задач:
+
+1. **global** (`executeUseGlobal`) — единственный экземпляр на всё приложение. Удобно для создания сервисов, которые живут вне конкретного компонента.
+2. **provide** (`executeUseProvide`) — разделение состояния через дерево компонентов (`provide`/`inject`). Гарантирует, что дочерние компоненты получат один и тот же экземпляр от ближайшего родителя.
+3. **local** (`executeUseLocal`) — единственный экземпляр в замыкании, изолированный внутри собственного `effectScope`. 
+
+### Различия между `global` и `local`
+
+Главное архитектурное отличие между режимами `global` и `local` заключается во **времени инициализации** (когда именно создается экземпляр):
+
+1. **`global` (Отложенная, но массовая инициализация):**
+   - Все коллбеки, обернутые в `global`, складываются в глобальный реестр. Они **сразу же выполняются все вместе**, когда в точке входа приложения (например, в `main.ts` или при SSR) вызывается функция `executeUseGlobalInit()`. 
+   - **Сценарий использования:** Критически важные сервисы (Настройки, Мета-теги, Переводы, Пользовательские сессии), которые должны быть полностью готовы к работе *до* первой отрисовки компонента или должны централизованно пересоздаваться при сбросе приложения.
+
+2. **`local` (Ленивая инициализация):**
+   - Экземпляр создается **только в момент самого первого вызова** этой функции внутри компонента или другого сервиса. При этом, так как инициализация обернута в глобальный `effectScope`, этот синглтон, так же как и глобальный, будет "жить вечно" и не уничтожится при демонтаже компонента, из которого был вызван.
+   - **Сценарий использования:** Тяжелые или специфические сервисы (например, сложная фильтрация, вебсокет-чат на отдельной странице, аналитика), которые:
+     - Могут вообще не понадобиться во время текущей сессии.
+     - Должны инициализироваться ровно тогда, когда пользователь заходит в нужный раздел.
+
+## Использование (на примере глобального сервиса)
+
+Самый частый сценарий — создание глобального хранилища или сервиса (например, для работы с мета-тегами).
+
+```typescript
+import { ref } from 'vue'
+import { executeUseGlobal } from '@dxtmisha/functional'
+
+// 1. Определение синглтона
+const item = executeUseGlobal(() => {
+  const title = ref('Мой заголовок')
+  
+  const updateTitle = (newTitle: string) => {
+    title.value = newTitle
+  }
+
+  return { title, updateTitle }
+})
+
+// 2. Экспорт composable-функции (по конвенции Vue)
+export const useMeta = () => item()
+```
+
+Внутри любого компонента Vue:
+
+```typescript
+import { useMeta } from './useMeta'
+
+const { title, updateTitle } = useMeta() // title будет общим для всех вызовов
+```
+
+## Использование Provide / Inject
+
+Если нужно, чтобы состояние жило только в рамках конкретного дерева компонентов (например, форма и её внутренние поля), используется `executeUseProvide`.
+
+```typescript
+import { executeUseProvide } from '@dxtmisha/functional'
+
+const useFormState = executeUseProvide((initialData: any) => {
+  // ... логика инициализации реактивного состояния
+  return { /* ... */ }
+})
+```
+
+При первом вызове `useFormState(data)` в компоненте-родителе состояние проинициализируется и будет передано вниз (через `provide`). Любой дочерний компонент, вызвав `useFormState()`, получит этот же экземпляр через `inject`.
+
+## Управление экземпляром
+
+Функции `executeUse` оборачивают результат вашей фабрики и добавляют специальные методы для управления жизненным циклом (зависит от режима).
+
+### Метод init()
+
+Метод `init()` — это просто заглушка, которая возвращает сам объект. Она нужна исключительно для того, чтобы в коде компонента можно было явно выделить место первоначального вызова.
+
+```typescript
+const service = useMeta()
+
+// Явное определение точки входа
+service.init()
+```
+
+### Сброс и переинициализация
+
+```typescript
+const service = useMeta()
+
+// Сброс закешированного экземпляра (доступно для local и global).
+// При следующем вызове composable будет создан новый экземпляр.
+if (service.destroyExecute) {
+  service.destroyExecute()
+}
+```
+
+Кроме того, для глобальных синглтонов доступна функция `executeUseGlobalInit()`, которая принудительно переинициализирует все зарегистрированные глобальные `callback` методы (может быть полезно при SSR инициализации или полном сбросе приложения).
+
+Если в вашем приложении подключен плагин `dxtFunctionalPlugin`, вызывать `executeUseGlobalInit()` вручную при старте приложения **не нужно** — плагин делает это автоматически под капотом.

package/src/media/functional/functional/execute-use/execute-use.vi.mdx

@@ -0,0 +1,106 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/# Singleton được quản lý'/>
+
+# Singleton được quản lý (executeUse)
+
+Hàm **executeUse** là một nhà máy tiên tiến (factory) để tạo ra các singleton được quản lý trong hệ sinh thái **Vue 3**. Nó giải quyết vấn đề khởi tạo và tái sử dụng các trạng thái phản hồi, dịch vụ toàn cầu (như thẻ meta) hoặc các logic thành phần bằng cách cung cấp quyền kiểm soát linh hoạt đối với ngữ cảnh thực thi (toàn cầu - global, cục bộ - local, hoặc thông qua `provide/inject`).
+
+## Chế độ thực thi
+
+**executeUse** hỗ trợ ba chế độ khởi tạo (enum `ExecuteUseType`), mỗi chế độ được thiết kế cho những nhiệm vụ kiến trúc riêng biệt:
+
+1. **global** (`executeUseGlobal`) — một phiên bản duy nhất cho toàn bộ ứng dụng. Rất thích hợp để tạo các dịch vụ tồn tại bên ngoài một thành phần cụ thể.
+2. **provide** (`executeUseProvide`) — chia sẻ trạng thái qua cây thành phần (`provide`/`inject`). Đảm bảo rằng các thành phần con sẽ nhận được cùng một phiên bản từ thành phần cha gần nhất.
+3. **local** (`executeUseLocal`) — một phiên bản duy nhất trong một bao đóng (closure), được cách ly bên trong `effectScope` của riêng nó.
+
+### Sự khác biệt giữa `global` và `local`
+
+Sự khác biệt chính về mặt kiến trúc giữa các chế độ `global` và `local` nằm ở **thời điểm khởi tạo** (thời điểm chính xác mà phiên bản được tạo):
+
+1. **`global` (Khởi tạo sớm / Hàng loạt):**
+   - Tất cả các lệnh gọi hàm được bọc trong `global` sẽ được thu thập vào một mảng toàn cục. Chúng được **thực thi ngay lập tức cùng nhau** khi hàm `executeUseGlobalInit()` được gọi tại điểm xâm nhập của ứng dụng (ví dụ: trong `main.ts` hoặc trong quá trình chạy SSR).
+   - **Cú pháp sử dụng (Kịch bản):** Các dịch vụ thiết yếu và quan trọng (Cài đặt, Thẻ meta, Bản dịch ngôn ngữ, Phiên của người dùng) phải SẴN SÀNG hoạt động *trước* khi render thành phần đầu tiên, hoặc các dịch vụ cần được khởi tạo lại tập trung khi ứng dụng thiết lập lại.
+
+2. **`local` (Khởi tạo lười biếng - Lazy Initialization):**
+   - Phiên bản được tạo **chỉ vào đúng thời điểm được gọi lần đầu tiên** bên trong một thành phần hoặc dịch vụ khác. Ở đây, nhờ việc khởi tạo được bọc bên trong một `effectScope` toàn cầu, singleton này – tương tự như `global` – sẽ "sống vĩnh viễn" và không bị hủy ngay cả khi thành phần gọi nó bị gỡ bỏ (unmount).
+   - **Cú pháp sử dụng (Kịch bản):** Các dịch vụ nặng hoặc đặc thù theo ngữ cảnh (ví dụ: bộ xử lý bộ lọc phức tạp, một trang chat websocket riêng biệt, phân tích thống kê) mà:
+     - Có thể không bao giờ được dùng tới trong phiên làm việc hiện tại của người dùng.
+     - Chỉ nên khởi tạo khi người dùng đi tới một trang cụ thể cần đến chức năng đó.
+
+## Cú pháp sử dụng (Ví dụ dịch vụ toàn cầu)
+
+Kịch bản phổ biến nhất là khởi tạo một kho lưu trữ toàn cầu hoặc dịch vụ (ví dụ: để làm việc với các thẻ meta).
+
+```typescript
+import { ref } from 'vue'
+import { executeUseGlobal } from '@dxtmisha/functional'
+
+// 1. Khai báo singleton
+const item = executeUseGlobal(() => {
+  const title = ref('Tiêu đề của tôi')
+  
+  const updateTitle = (newTitle: string) => {
+    title.value = newTitle
+  }
+
+  return { title, updateTitle }
+})
+
+// 2. Xuất (export) hàm composable (theo quy ước của Vue)
+export const useMeta = () => item()
+```
+
+Bên trong bất kỳ thành phần Vue nào:
+
+```typescript
+import { useMeta } from './useMeta'
+
+const { title, updateTitle } = useMeta() // title sẽ được dùng chung cho tất cả các lệnh gọi
+```
+
+## Sử dụng Provide / Inject
+
+Nếu bạn cần trạng thái chỉ tồn tại trong một cây thành phần cụ thể (ví dụ: một biểu mẫu và các trường bên trong nó), hãy sử dụng `executeUseProvide`.
+
+```typescript
+import { executeUseProvide } from '@dxtmisha/functional'
+
+const useFormState = executeUseProvide((initialData: any) => {
+  // ... logic khởi tạo trạng thái phản hồi
+  return { /* ... */ }
+})
+```
+
+Trong lần gọi `useFormState(data)` đầu tiên ở thành phần cha, trạng thái sẽ được khởi tạo và truyền xuống (qua `provide`). Bất kỳ thành phần con nào gọi `useFormState()` sau đó sẽ nhận được chính phiên bản này thông qua `inject`.
+
+## Quản lý phiên bản
+
+Các hàm `executeUse` bọc kết quả từ factory của bạn và bổ sung thêm các phương thức đặc biệt để quản lý vòng đời (tùy thuộc vào chế độ).
+
+### Phương thức init()
+
+Phương thức `init()` chỉ đơn giản là một lệnh giữ chỗ (stub) trả về chính đối tượng. Nó được sử dụng độc quyền để làm nổi bật rõ ràng lệnh gọi ban đầu của composable trong mã của một thành phần.
+
+```typescript
+const service = useMeta()
+
+// Xác định rõ ràng điểm vào ban đầu
+service.init()
+```
+
+### Đặt lại và Khởi tạo lại
+
+```typescript
+const service = useMeta()
+
+// Đặt lại (reset) phiên bản được lưu trữ trong bộ nhớ đệm chế độ cục bộ (local) và toàn cầu (global).
+// Trong lần gọi composable tiếp theo, một phiên bản mới sẽ được tạo ra.
+if (service.destroyExecute) {
+  service.destroyExecute()
+}
+```
+
+Ngoài ra, đối với các singleton toàn cầu, hàm `executeUseGlobalInit()` có sẵn để buộc kích hoạt lại tất cả các phương thức `callback` đã đăng ký (có ích trong trường hợp khởi tạo SSR hoặc đặt lại toàn bộ ứng dụng).
+
+Nếu ứng dụng của bạn sử dụng `dxtFunctionalPlugin`, bạn **không cần phải** gọi `executeUseGlobalInit()` một cách thủ công lúc khởi động — plugin đã tự động xử lý việc này ở hậu trường.

package/src/media/functional/functional/functions/computedAsync/computedAsync.en.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Functions/computedAsync - Async computed property'/>
+
+# `computedAsync`
+
+Creates a computed property that can handle asynchronous getters. Unlike Vue's standard `computed`, `computedAsync` accepts async functions, synchronous functions, or raw values — the result is automatically resolved and exposed as a reactive computed ref. Initialization is lazy and occurs upon first access to the property.
+
+**Parameters:**
+- `getter: (() => Promise<R>) | (() => R) | R` — An async function, synchronous function, or raw value to compute the result from.
+- `ignore?: R` — A value to be ignored (will not be set as the result).
+- `debugOptions?: DebuggerOptions` — Options used for debugging reactive computations, supported by Vue.js.
+
+**Returns:**
+`ComputedRef<R | undefined>` — A reactive computed ref containing the resolved result of the getter.
+
+```typescript
+import { computedAsync } from '@dxtmisha/functional'
+
+// Async getter
+const data = computedAsync(async () => {
+  const response = await fetch('/api/data')
+  return response.json()
+})
+
+// Sync getter
+const label = computedAsync(() => 'Hello, World!')
+
+// Raw value
+const count = computedAsync(42)
+```

package/src/media/functional/functional/functions/computedAsync/computedAsync.ru.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Functions/computedAsync - Асинхронное вычисляемое свойство'/>
+
+# `computedAsync`
+
+Создаёт вычисляемое свойство, которое может обрабатывать асинхронные геттеры. В отличие от стандартного `computed` из Vue, `computedAsync` позволяет передавать асинхронные функции, синхронные функции или прямые значения — результат автоматически разворачивается и становится реактивным. Инициализация происходит лениво при первом обращении к свойству.
+
+**Параметры:**
+- `getter: (() => Promise<R>) | (() => R) | R` — Асинхронная функция, синхронная функция или прямое значение для вычисления результата.
+- `ignore?: R` — Значение, которое должно быть проигнорировано (не будет установлено в результат).
+- `debugOptions?: DebuggerOptions` — Опции отладки реактивных вычислений Vue.js.
+
+**Возвращает:**
+`ComputedRef<R | undefined>` — Реактивное вычисляемое свойство с результатом выполнения геттера.
+
+```typescript
+import { computedAsync } from '@dxtmisha/functional'
+
+// Асинхронный геттер
+const data = computedAsync(async () => {
+  const response = await fetch('/api/data')
+  return response.json()
+})
+
+// Синхронный геттер
+const label = computedAsync(() => 'Hello, World!')
+
+// Прямое значение
+const count = computedAsync(42)
+```

package/src/media/functional/functional/functions/computedAsync/computedAsync.vi.mdx

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Functions/computedAsync - Thuộc tính computed bất đồng bộ'/>
+
+# `computedAsync`
+
+Tạo một thuộc tính computed có thể xử lý các getter bất đồng bộ. Khác với `computed` thông thường của Vue, `computedAsync` cho phép truyền vào hàm bất đồng bộ, hàm đồng bộ, hoặc giá trị trực tiếp — kết quả sẽ tự động được giải quyết và trở thành một computed ref phản ứng. Khởi tạo ở chế độ lazy (lười biếng) và chỉ xảy ra khi truy cập thuộc tính lần đầu tiên.
+
+**Tham số:**
+- `getter: (() => Promise<R>) | (() => R) | R` — Hàm bất đồng bộ, hàm đồng bộ, hoặc giá trị trực tiếp dùng để tính toán kết quả.
+- `ignore?: R` — Giá trị cần bỏ qua (sẽ không được thiết lập vào kết quả).
+- `debugOptions?: DebuggerOptions` — Tùy chọn dùng để gỡ lỗi các phép tính phản ứng, được hỗ trợ bởi Vue.js.
+
+**Trả về:**
+`ComputedRef<R | undefined>` — Một computed ref phản ứng chứa kết quả đã được giải quyết từ getter.
+
+```typescript
+import { computedAsync } from '@dxtmisha/functional'
+
+// Getter bất đồng bộ
+const data = computedAsync(async () => {
+  const response = await fetch('/api/data')
+  return response.json()
+})
+
+// Getter đồng bộ
+const label = computedAsync(() => 'Hello, World!')
+
+// Giá trị trực tiếp
+const count = computedAsync(42)
+```

package/src/media/functional/functional/functions/computedByLanguage/computedByLanguage.en.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Functions/computedByLanguage - Language-aware computed property'/>
+
+# `computedByLanguage`
+
+Creates a reactive computed property that automatically recalculates when the current language or dependencies within the getters change.
+
+### How it works
+
+The function performs checks in the following order:
+1. **Language Check**: Verifies that a language is set via `GeoRef.get().value`.
+2. **Conditions Check**: If the `conditions` parameter is provided, it is called for an additional check (e.g., checking permissions or data loading state).
+3. **Primary Getter Execution**: If both checks above pass, the `getter` is called. If it returns a value (not `undefined`), that value becomes the result.
+4. **Fallback Option**: If any of the checks fail or the `getter` returns `undefined`, the `getterNone` is executed/returned.
+
+**Parameters:**
+- `getter: ComputedGetter<R>` — The primary logic for obtaining the value. Called only if the language is set and conditions are met.
+- `getterNone: R | (() => R)` — A fallback value or a function returning it. Acts as "Plan B". Default: `() => undefined`.
+- `conditions?: () => boolean` — A condition function. Acts as a gatekeeper: if it returns `false`, the main `getter` will not even be triggered.
+- `debugOptions?: DebuggerOptions` — Options used for debugging reactive computations, supported by Vue.js.
+
+**Returns:**
+`ComputedRef<R>` — A reactive computed property.
+
+```typescript
+import { computedByLanguage } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// Basic usage
+const label = computedByLanguage(() => translateKey('hello'))
+
+// With a fallback value
+const title = computedByLanguage(
+  () => translateKey('page.title'),
+  () => 'Untitled'
+)
+
+// With an additional condition
+const isReady = ref(true)
+const content = computedByLanguage(
+  () => translateKey('content'),
+  () => 'Loading...',
+  () => isReady.value
+)
+```

package/src/media/functional/functional/functions/computedByLanguage/computedByLanguage.ru.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Functions/computedByLanguage - Вычисляемое свойство по языку'/>
+
+# `computedByLanguage`
+
+Создаёт реактивное вычисляемое свойство, которое автоматически пересчитывается при изменении текущего языка или зависимостей внутри геттеров.
+
+### Как это работает
+
+Функция выполняет проверку в следующем порядке:
+1. **Проверка языка**: Проверяет наличие установленного языка через `GeoRef.get().value`.
+2. **Проверка условий**: Если передан параметр `conditions`, он вызывается для дополнительной проверки (например, проверка прав доступа или состояния загрузки данных).
+3. **Выполнение основного геттера**: Если обе проверки выше прошли успешно, вызывается `getter`. Если он возвращает значение (не `undefined`), это значение становится результатом.
+4. **Резервный вариант**: Если любая из проверок не прошла или `getter` вернул `undefined`, выполняется `getterNone`.
+
+**Параметры:**
+- `getter: ComputedGetter<R>` — Основная логика получения значения. Вызывается только если язык установлен и условия выполнены.
+- `getterNone: R | (() => R)` — Резервное значение или функция, возвращающая его. Вызывается как "план Б". По умолчанию: `() => undefined`.
+- `conditions?: () => boolean` — Функция-условие. Служит "затвором" (gatekeeper): если она возвращает `false`, основной `getter` даже не будет запущен.
+- `debugOptions?: DebuggerOptions` — Опции отладки реактивных вычислений Vue.js.
+
+**Возвращает:**
+`ComputedRef<R>` — Реактивное вычисляемое свойство.
+
+```typescript
+import { computedByLanguage } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// Базовый пример
+const label = computedByLanguage(() => translateKey('hello'))
+
+// С резервным значением
+const title = computedByLanguage(
+  () => translateKey('page.title'),
+  () => 'Untitled'
+)
+
+// С дополнительным условием
+const isReady = ref(true)
+const content = computedByLanguage(
+  () => translateKey('content'),
+  () => 'Loading...',
+  () => isReady.value
+)
+```