@dxtmisha/wiki 0.39.1 → 0.39.3

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

@@ -1,40 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Reactive'/>
-
-# Реактивные утилиты
-
-Набор функций для работы с реактивностью Vue.js.
-
-## `computedAsync`
-
-Создаёт вычисляемое свойство Vue, которое может обрабатывать асинхронные геттеры.
-
-**Параметры:**
-- `getter: (() => Promise<R>) | (() => R) | R` — асинхронная функция, синхронная функция или прямое значение для вычисления результата
-- `debugOptions?: DebuggerOptions` — опции отладки для реактивных вычислений (поддерживается библиотекой Vue.js)
-
-```javascript
-import { computedAsync } from '@dxtmisha/functional'
-
-// С асинхронной функцией
-const userData = computedAsync(async () => {
-  const response = await fetch('/api/user')
-  return response.json()
-})
-
-// С синхронной функцией
-const doubled = computedAsync(() => value.value * 2)
-
-// С прямым значением
-const staticValue = computedAsync('Hello World')
-
-// С опциями отладки
-const debugged = computedAsync(
-  async () => await fetchData(),
-  {
-    onTrack: (e) => console.log('tracked:', e),
-    onTrigger: (e) => console.log('triggered:', e)
-  }
-)
-```

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

@@ -1,327 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Types/refTypes'/>
-
-# Vue реактивные типы (refTypes)
-
-Набор специализированных TypeScript типов для работы с Vue реактивными ссылками, слотами и дочерними элементами. Обеспечивает типобезопасность при работе с Vue реактивной системой.
-
-## Vue реактивные ссылки
-
-### `RefType<T>`
-
-Объединенный тип для Vue реактивных ссылок (computed или ref).
-
-```typescript
-type RefType<T> = ComputedRef<T> | Ref<T>
-
-// Использование
-import { ref, computed } from 'vue'
-
-function useReactiveValue<T>(initialValue: T): RefType<T> {
-  return ref(initialValue) // или computed(() => someValue)
-}
-
-const count: RefType<number> = ref(0)
-const doubleCount: RefType<number> = computed(() => count.value * 2)
-```
-
-### `RefUndefined<T>`
-
-Объединенный тип для Vue реактивных ссылок, которые могут быть undefined.
-
-```typescript
-type RefUndefined<T> = RefType<T | undefined>
-
-// Использование
-function useOptionalValue<T>(value?: T): RefUndefined<T> {
-  return ref(value)
-}
-
-const optionalUser: RefUndefined<User> = ref(undefined)
-const maybeData: RefUndefined<string> = computed(() => {
-  return condition ? 'data' : undefined
-})
-```
-
-### `RefOrNormal<T>`
-
-Объединенный тип, который может быть либо Vue реактивной ссылкой, либо обычным значением.
-
-```typescript
-type RefOrNormal<T> = RefType<T> | T
-
-// Использование
-function processValue<T>(value: RefOrNormal<T>): T {
-  return typeof value === 'object' && 'value' in value ? value.value : value
-}
-
-// Функция принимает как ref, так и обычные значения
-const result1 = processValue(ref('hello'))     // из ref
-const result2 = processValue('world')          // обычное значение
-const result3 = processValue(computed(() => 42)) // из computed
-
-// В props компонента
-interface Props {
-  title: RefOrNormal<string>
-  count: RefOrNormal<number>
-}
-```
-
-## Vue контент и слоты
-
-### `RawChildren`
-
-Объединенный тип для Vue сырого содержимого дочерних элементов.
-
-```typescript
-type RawChildren = string | number | boolean | VNode | VNodeArrayChildren | (() => any)
-
-// Использование в render функциях
-import { h, VNode } from 'vue'
-
-function createCustomElement(children: RawChildren): VNode {
-  return h('div', { class: 'custom-wrapper' }, children)
-}
-
-// Различные типы children
-const stringChild: RawChildren = 'Hello World'
-const numberChild: RawChildren = 42
-const booleanChild: RawChildren = true
-const vnodeChild: RawChildren = h('span', 'VNode content')
-const arrayChild: RawChildren = [
-  'Text',
-  h('span', 'VNode'),
-  42
-]
-const functionChild: RawChildren = () => h('div', 'Dynamic content')
-```
-
-### `RawSlots`
-
-Тип для Vue сырых слотов с опциональным флагом стабильности.
-
-```typescript
-type RawSlots = {
-  [name: string]: unknown
-  $stable?: boolean
-}
-
-// Использование в компонентах
-function createComponentWithSlots(slots: RawSlots): VNode {
-  return h('div', [
-    slots.header?.(),
-    h('main', slots.default?.()),
-    slots.footer?.()
-  ])
-}
-
-// Создание слотов
-const mySlots: RawSlots = {
-  default: () => h('p', 'Default content'),
-  header: () => h('h1', 'Header'),
-  footer: () => h('footer', 'Footer'),
-  $stable: true // Флаг для оптимизации производительности
-}
-
-// В JSX/TSX
-const jsxSlots: RawSlots = {
-  default: () => <p>Default JSX content</p>,
-  sidebar: () => <aside>Sidebar content</aside>
-}
-```
-
-## Практические примеры
-
-### Composable с реактивными типами
-
-```typescript
-import { ref, computed, type Ref } from 'vue'
-import type { RefOrNormal, RefType } from '@dxtmisha/functional'
-
-export function useCounter(initialValue: RefOrNormal<number> = 0) {
-  // Преобразуем RefOrNormal в ref
-  const count: Ref<number> = ref(
-    typeof initialValue === 'object' && 'value' in initialValue
-      ? initialValue.value
-      : initialValue
-  )
-
-  const doubled: RefType<number> = computed(() => count.value * 2)
-  const isEven: RefType<boolean> = computed(() => count.value % 2 === 0)
-
-  function increment() {
-    count.value++
-  }
-
-  function decrement() {
-    count.value--
-  }
-
-  return {
-    count,
-    doubled,
-    isEven,
-    increment,
-    decrement
-  }
-}
-```
-
-### Компонент с гибкими props
-
-```html
-<template>
-  <div class="flexible-component">
-    <h2>{{ resolvedTitle }}</h2>
-    <p>Count: {{ resolvedCount }}</p>
-    <slot name="content" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import type { RefOrNormal } from '@dxtmisha/functional'
-
-interface Props {
-  title: RefOrNormal<string>
-  count: RefOrNormal<number>
-  enabled?: RefOrNormal<boolean>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  enabled: true
-})
-
-// Резолвим RefOrNormal значения
-const resolvedTitle = computed(() => {
-  return typeof props.title === 'object' && 'value' in props.title
-    ? props.title.value
-    : props.title
-})
-
-const resolvedCount = computed(() => {
-  return typeof props.count === 'object' && 'value' in props.count
-    ? props.count.value
-    : props.count
-})
-</script>
-```
-
-### Render функция с типизированными children
-
-```typescript
-import { h, type VNode } from 'vue'
-import type { RawChildren, RawSlots } from '@dxtmisha/functional'
-
-interface CardProps {
-  title: string
-  children?: RawChildren
-  slots?: RawSlots
-}
-
-function Card(props: CardProps): VNode {
-  const { title, children, slots } = props
-
-  return h('div', { class: 'card' }, [
-    h('header', { class: 'card-header' }, [
-      h('h3', title),
-      slots?.actions?.()
-    ]),
-    h('main', { class: 'card-content' }, [
-      children,
-      slots?.default?.()
-    ]),
-    slots?.footer && h('footer', { class: 'card-footer' }, slots.footer())
-  ])
-}
-
-// Использование
-const cardWithChildren = Card({
-  title: 'My Card',
-  children: [
-    'Some text content',
-    h('button', 'Click me'),
-    42
-  ]
-})
-
-const cardWithSlots = Card({
-  title: 'Card with Slots',
-  slots: {
-    default: () => h('p', 'Main content'),
-    actions: () => h('button', 'Action'),
-    footer: () => h('small', 'Footer info'),
-    $stable: true
-  }
-})
-```
-
-### Универсальная функция для работы с ref значениями
-
-```typescript
-import type { RefOrNormal, RefType } from '@dxtmisha/functional'
-
-// Утилитарная функция для извлечения значения
-function unref<T>(value: RefOrNormal<T>): T {
-  return typeof value === 'object' && 'value' in value ? value.value : value
-}
-
-// Утилитарная функция для проверки ref
-function isRef<T>(value: RefOrNormal<T>): value is RefType<T> {
-  return typeof value === 'object' && value !== null && 'value' in value
-}
-
-// Использование в различных сценариях
-function processData<T>(input: RefOrNormal<T[]>): T[] {
-  const data = unref(input)
-  return data.filter(item => item !== null)
-}
-
-function watchValue<T>(value: RefOrNormal<T>, callback: (val: T) => void) {
-  if (isRef(value)) {
-    watch(value, callback, { immediate: true })
-  } else {
-    callback(value)
-  }
-}
-```
-
-### Типизированные слоты в composable
-
-```typescript
-import type { RawSlots, RawChildren } from '@dxtmisha/functional'
-
-export function useModal() {
-  const isVisible = ref(false)
-
-  function show() {
-    isVisible.value = true
-  }
-
-  function hide() {
-    isVisible.value = false
-  }
-
-  function renderModal(slots: RawSlots): VNode | null {
-    if (!isVisible.value) return null
-
-    return h('div', { class: 'modal-overlay' }, [
-      h('div', { class: 'modal-content' }, [
-        slots.header?.(),
-        h('div', { class: 'modal-body' }, slots.default?.()),
-        slots.footer?.()
-      ])
-    ])
-  }
-
-  return {
-    isVisible: readonly(isVisible),
-    show,
-    hide,
-    renderModal
-  }
-}
-```
-
-Эти Vue реактивные типы обеспечивают типобезопасность и гибкость при работе с Vue композиционным API, render функциями и реактивной системой.

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

@@ -1,193 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Classes/Ref/RouterItemRef'/>
-
-# Класс RouterItemRef
-
-Статический класс для управления Vue Router. Обеспечивает глобальный доступ к экземпляру роутера и программную навигацию через простой API с поддержкой одноразовой инициализации.
-
-## Основные возможности
-
-- **Глобальный доступ** — статический доступ к экземпляру Vue Router из любого места
-- **Простая навигация** — метод push для программных переходов
-- **Одноразовая установка** — защита от случайной перезаписи роутера
-- **TypeScript поддержка** — полная типизация с RouteLocationRaw
-- **Безопасная навигация** — проверка наличия роутера перед выполнением
-- **Vue Router интеграция** — прямая работа с официальным Vue Router
-- **Глобальная инициализация** — инициализация роутера на уровне приложения
-- **Простой API** — минималистичный интерфейс для основных операций
-
-## Методы конфигурации
-
-### `set`
-
-Устанавливает экземпляр Vue Router для глобального использования.
-
-**Параметры:**
-- `router: Router` — экземпляр Vue Router
-
-```javascript
-import { createRouter, createWebHistory } from 'vue-router'
-import { RouterItemRef } from '@dxtmisha/functional'
-
-// Создание и установка роутера
-const router = createRouter({
-  history: createWebHistory(),
-  routes: [
-    { path: '/', component: Home },
-    { path: '/about', component: About },
-    { path: '/users/:id', component: User }
-  ]
-})
-
-RouterItemRef.set(router)
-```
-
-### `setOneTime`
-
-Устанавливает роутер только если он еще не установлен (защита от перезаписи).
-
-**Параметры:**
-- `router: Router` — экземпляр Vue Router
-
-```javascript
-import { RouterItemRef } from '@dxtmisha/functional'
-
-// Безопасная установка (только первый раз)
-RouterItemRef.setOneTime(router)
-RouterItemRef.setOneTime(anotherRouter) // Будет проигнорировано
-
-// Полезно в плагинах и библиотеках
-function initializeLibrary(router) {
-  RouterItemRef.setOneTime(router) // Не перезапишет существующий
-}
-```
-
-## Методы получения данных
-
-### `get`
-
-Возвращает текущий экземпляр Vue Router.
-
-**Возвращает:** `Router | undefined` — экземпляр роутера или undefined
-
-```javascript
-import { RouterItemRef } from '@dxtmisha/functional'
-
-// Получение роутера
-const router = RouterItemRef.get()
-
-if (router) {
-  console.log('Текущий маршрут:', router.currentRoute.value)
-  console.log('Доступные маршруты:', router.getRoutes())
-} else {
-  console.log('Роутер не инициализирован')
-}
-```
-
-## Методы навигации
-
-### `push`
-
-Программно переходит к новому маршруту.
-
-**Параметры:**
-- `to: string | RouteLocationRaw` — целевой маршрут (строка или объект)
-
-```javascript
-import { RouterItemRef } from '@dxtmisha/functional'
-
-// Простая навигация по строке
-RouterItemRef.push('/users')
-RouterItemRef.push('/products/123')
-
-// Навигация с параметрами
-RouterItemRef.push({
-  name: 'user-profile',
-  params: { id: '123' }
-})
-
-// Навигация с query параметрами
-RouterItemRef.push({
-  path: '/search',
-  query: { q: 'laptop', category: 'electronics' }
-})
-
-// Навигация с hash
-RouterItemRef.push({
-  path: '/docs',
-  hash: '#section-2'
-})
-```
-
-## Практические примеры
-
-### Инициализация в приложении
-
-```javascript
-// main.js
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import { RouterItemRef } from '@dxtmisha/functional'
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes: routes
-})
-
-const app = createApp(App)
-app.use(router)
-
-// Глобальная установка
-RouterItemRef.set(router)
-```
-
-### Навигация в компонентах
-
-```javascript
-// В любом месте приложения
-export function navigateToUser(userId) {
-  RouterItemRef.push({
-    name: 'user',
-    params: { id: userId }
-  })
-}
-
-// В service классе
-class AuthService {
-  static login(credentials) {
-    // ... логика авторизации
-    RouterItemRef.push('/dashboard')
-  }
-
-  static logout() {
-    // ... логика выхода
-    RouterItemRef.push('/login')
-  }
-}
-```
-
-### Условная навигация
-
-```javascript
-function handleUserAction(user) {
-  if (user.role === 'admin') {
-    RouterItemRef.push('/admin/dashboard')
-  } else if (user.role === 'moderator') {
-    RouterItemRef.push('/moderator/panel')
-  } else {
-    RouterItemRef.push('/user/profile')
-  }
-}
-
-// Навигация с проверкой
-function safeNavigate(path) {
-  if (RouterItemRef.get()) {
-    RouterItemRef.push(path)
-  } else {
-    console.warn('Router не инициализирован')
-  }
-}
-```
-
-Класс RouterItemRef предоставляет простой глобальный доступ к Vue Router для программной навигации из любой части приложения без необходимости передачи экземпляра роутера.

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

@@ -1,132 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Classes/ScrollbarWidth'/>
-
-# Класс ScrollbarWidth
-
-Статический класс для определения ширины полосы прокрутки браузера с интеграцией DataStorage для персистентного кеширования. Предоставляет методы для точного измерения скроллбара и определения необходимости его скрытия.
-
-## Основные возможности
-
-- **Точное измерение** — определение реальной ширины скроллбара через DOM тестирование
-- **Персистентное кеширование** — сохранение результата через DataStorage
-- **Определение необходимости скрытия** — автоматическая проверка для тонких скроллбаров
-- **Защита от повторных вычислений** — блокировка параллельных измерений
-- **DOM безопасность** — создание временных элементов для измерения
-- **Автоматическая очистка** — удаление тестовых элементов после измерения
-- **requestAnimationFrame** — неблокирующее измерение в следующем кадре
-- **Статический API** — простой интерфейс без необходимости создания экземпляров
-
-## Статические методы
-
-### `is`
-
-Проверяет, нужно ли включить скрытие скролла (для тонких скроллбаров).
-
-**Возвращает:** `Promise<boolean>` — true если скролл стоит скрывать (ширина ≤ 8px)
-
-```javascript
-import { ScrollbarWidth } from '@dxtmisha/functional'
-
-// Проверка необходимости скрытия скролла
-const shouldHide = await ScrollbarWidth.is()
-
-if (shouldHide) {
-  // Скроллбар тонкий (≤ 8px), можно скрывать
-  document.body.classList.add('hide-scrollbar')
-} else {
-  // Скроллбар широкий, лучше оставить видимым
-  document.body.classList.remove('hide-scrollbar')
-}
-
-// Использование в CSS
-// .hide-scrollbar { scrollbar-width: none; }
-```
-
-### `get`
-
-Возвращает ширину скроллбара, измеряя при первом вызове.
-
-**Возвращает:** `Promise<number>` — ширина скроллбара в пикселях (-1 если не измерена)
-
-```javascript
-import { ScrollbarWidth } from '@dxtmisha/functional'
-
-// Получение ширины скроллбара
-const width = await ScrollbarWidth.get()
-console.log(`Ширина скроллбара: ${width}px`)
-
-// Первый вызов выполнит измерение и сохранит в DataStorage
-// Последующие вызовы вернут кешированное значение
-
-// Использование для компенсации ширины
-async function compensateScrollbar() {
-  const scrollbarWidth = await ScrollbarWidth.get()
-
-  if (scrollbarWidth > 0) {
-    document.body.style.paddingRight = `${scrollbarWidth}px`
-  }
-}
-```
-
-## Практические примеры
-
-### Автоматическое скрытие тонких скроллбаров
-
-```javascript
-// Инициализация при загрузке страницы
-async function initScrollbarBehavior() {
-  const shouldHideScrollbar = await ScrollbarWidth.is()
-
-  if (shouldHideScrollbar) {
-    document.documentElement.style.setProperty('scrollbar-width', 'none')
-    console.log('Тонкий скроллбар скрыт для улучшения UX')
-  }
-}
-
-// Вызов при DOMContentLoaded
-document.addEventListener('DOMContentLoaded', initScrollbarBehavior)
-```
-
-### Модальные окна с компенсацией
-
-```javascript
-class ModalManager {
-  async openModal() {
-    const scrollbarWidth = await ScrollbarWidth.get()
-
-    // Скрываем скролл и компенсируем ширину
-    document.body.style.overflow = 'hidden'
-    if (scrollbarWidth > 0) {
-      document.body.style.paddingRight = `${scrollbarWidth}px`
-    }
-  }
-
-  closeModal() {
-    document.body.style.overflow = ''
-    document.body.style.paddingRight = ''
-  }
-}
-```
-
-### Адаптивная верстка
-
-```javascript
-// CSS переменные на основе ширины скроллбара
-async function setupScrollbarCSS() {
-  const width = await ScrollbarWidth.get()
-  const shouldHide = await ScrollbarWidth.is()
-
-  document.documentElement.style.setProperty(
-    '--scrollbar-width',
-    `${width}px`
-  )
-
-  document.documentElement.style.setProperty(
-    '--scrollbar-display',
-    shouldHide ? 'none' : 'auto'
-  )
-}
-```
-
-Класс ScrollbarWidth предоставляет надежное решение для определения характеристик полосы прокрутки и принятия решений о ее отображении для создания оптимального пользовательского опыта.