@dxtmisha/wiki 0.39.1 → 0.39.2

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

@@ -1,317 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Classes/Ref/EventRef'/>
-
-# Класс EventRef
-
-Vue-ориентированный класс для работы с DOM событиями с реактивными возможностями. Расширяет базовый класс EventItem системой реактивности Vue, обеспечивая автоматическое отслеживание элементов и конфигураций событий.
-
-## Основные возможности
-
-- **Vue Reactivity** — использует ref/watch для реактивного отслеживания элементов
-- **Автоматическое отслеживание элементов** — автоматически обновляет обработчики при изменении ссылок на элементы
-- **Гибкий ввод элементов** — принимает DOM элементы, селекторы или реактивные refs
-- **Множественные типы событий** — поддержка одиночных и множественных событий
-- **Контрольный элемент** — отдельный элемент для проверки присутствия в DOM
-- **Автоматическая очистка** — удаляет обработчики при удалении элементов из DOM
-- **Специальная обработка событий** — встроенная поддержка resize, scroll-sync
-- **Диспетчеризация событий** — программный запуск пользовательских событий
-- **Управление жизненным циклом** — методы запуска, остановки и переключения
-
-## Конструктор
-
-### `constructor`
-
-Создаёт экземпляр EventRef с реактивными параметрами.
-
-**Параметры:**
-- `elementSelector?: RefOrNormal<ElementOrString<E> | undefined>` — целевой элемент (ref или обычное значение)
-- `elementSelectorControl?: RefOrNormal<ElementOrString<HTMLElement>>` — контрольный элемент для проверки DOM
-- `type?: string | string[]` — тип(ы) событий для прослушивания (по умолчанию: ['click'])
-- `listener?: EventListenerDetail<O, D>` — функция обработчика событий
-- `options?: EventOptions` — опции обработчика событий
-- `detail?: D` — пользовательские данные для передачи в обработчик
-
-**Дженерик типы:**
-- `E extends ElementOrWindow` — тип целевого элемента (HTMLElement или Window)
-- `O extends Event` — тип объекта события
-- `D extends Record<string, any>` — тип пользовательских данных detail
-
-```javascript
-import { EventRef } from '@dxtmisha/functional'
-import { ref } from 'vue'
-
-// С ref элементом
-const buttonRef = ref(null)
-const containerRef = ref(null)
-
-const clickEvent = new EventRef(
-  buttonRef,
-  containerRef, // контрольный элемент
-  'click',
-  (event, detail) => console.log('Кнопка нажата!', detail),
-  undefined,
-  { component: 'MyButton' }
-)
-
-// С селектором строки
-const hoverEvent = new EventRef(
-  '#my-element',
-  undefined,
-  ['mouseenter', 'mouseleave'],
-  (event) => console.log('Hover:', event.type)
-)
-```
-
-## Наследуемые методы
-
-EventRef наследует все методы от базового класса EventItem:
-
-### `isActive`
-
-Проверяет, активны ли обработчики событий.
-
-**Возвращает:** `boolean` — true если обработчики активны
-
-```javascript
-const isListening = eventRef.isActive()
-```
-
-### `getElement`
-
-Возвращает текущий целевой элемент.
-
-**Возвращает:** `E | undefined` — текущий целевой элемент
-
-```javascript
-const currentElement = eventRef.getElement()
-```
-
-### `setElement`
-
-Изменяет целевой элемент (автоматически вызывается при изменении ref).
-
-**Параметры:**
-- `elementSelector?: ElementOrString<E>` — новый целевой элемент
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setElement('#new-element')
-```
-
-### `setElementControl`
-
-Устанавливает контрольный элемент (автоматически вызывается при изменении ref).
-
-**Параметры:**
-- `elementSelector?: ElementOrString<HTMLElement>` — контрольный элемент
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setElementControl('#parent-container')
-```
-
-### `setType`
-
-Изменяет тип(ы) событий.
-
-**Параметры:**
-- `type: string | string[]` — новый тип(ы) событий
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setType(['focus', 'blur'])
-```
-
-### `setListener`
-
-Изменяет функцию обработчика событий.
-
-**Параметры:**
-- `listener: EventListenerDetail<O, D>` — новая функция обработчика
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setListener((event, detail) => {
-  console.log('Новый обработчик!', event, detail)
-})
-```
-
-### `setOptions`
-
-Изменяет опции обработчика событий.
-
-**Параметры:**
-- `options?: EventOptions` — новые опции событий
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setOptions({ capture: true, once: true })
-```
-
-### `setDetail`
-
-Изменяет пользовательские данные detail.
-
-**Параметры:**
-- `detail?: D` — новые данные detail
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.setDetail({ timestamp: Date.now() })
-```
-
-## Методы управления жизненным циклом
-
-### `start`
-
-Запускает прослушивание событий.
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.start()
-```
-
-### `stop`
-
-Останавливает прослушивание событий.
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.stop()
-```
-
-### `toggle`
-
-Переключает состояние обработчика событий.
-
-**Параметры:**
-- `activity: boolean` — true для запуска, false для остановки
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.toggle(true) // запуск
-eventRef.toggle(false) // остановка
-```
-
-### `reset`
-
-Перезагружает обработчики событий.
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.reset()
-```
-
-### `dispatch`
-
-Программно запускает событие.
-
-**Параметры:**
-- `detail?: D` — пользовательские данные для события
-
-**Возвращает:** `this` — экземпляр для цепочки методов
-
-```javascript
-eventRef.dispatch({ source: 'programmatic' })
-```
-
-## Реактивные возможности
-
-### Автоматическое отслеживание элементов
-
-EventRef автоматически отслеживает изменения в реактивных ссылках на элементы:
-
-```javascript
-const elementRef = ref('#button1')
-const eventRef = new EventRef(elementRef, undefined, 'click', () => {
-  console.log('Клик!')
-})
-
-eventRef.start()
-
-// Изменение элемента автоматически обновит обработчики
-elementRef.value = '#button2'
-```
-
-### Отслеживание контрольного элемента
-
-```javascript
-const buttonRef = ref(null)
-const containerRef = ref(null)
-
-const eventRef = new EventRef(buttonRef, containerRef, 'click')
-
-// События автоматически остановятся, если containerRef будет удален из DOM
-```
-
-## Практические примеры
-
-### Vue компонент с реактивными событиями
-
-```html
-<template>
-  <button ref="buttonEl">Нажми меня</button>
-  <input ref="inputEl" placeholder="Введите...">
-</template>
-
-<script setup>
-import { EventRef } from '@dxtmisha/functional'
-import { ref, onMounted } from 'vue'
-
-const buttonEl = ref(null)
-const inputEl = ref(null)
-
-onMounted(() => {
-  new EventRef(buttonEl, undefined, 'click', () => {
-    console.log('Кнопка нажата!')
-  }).start()
-
-  new EventRef(inputEl, undefined, ['focus', 'blur'], (event) => {
-    console.log(`Ввод ${event.type}`)
-  }).start()
-})
-</script>
-```
-
-### Composable для управления событиями
-
-```javascript
-export function useElementEvents(elementRef) {
-  const events = new Map()
-
-  const addEvent = (name, type, listener) => {
-    const eventRef = new EventRef(elementRef, undefined, type, listener)
-    events.set(name, eventRef.start())
-    return eventRef
-  }
-
-  return { addEvent }
-}
-```
-
-### Специальные типы событий
-
-```javascript
-// Событие прокрутки
-new EventRef('#container', undefined, 'scroll-sync', (event) => {
-  console.log('Прокрутка:', event.target.scrollTop)
-}).start()
-
-// Событие изменения размера
-new EventRef('#element', undefined, 'resize', (entry) => {
-  console.log('Размер:', entry.contentRect)
-}).start()
-```
-
-Класс EventRef предоставляет мощную реактивную систему управления событиями для Vue приложений с автоматическим отслеживанием элементов и очисткой ресурсов.

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

@@ -1,82 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Event Utils'/>
-
-# Утилиты для работы с событиями
-
-Набор функций для обработки и управления DOM событиями.
-
-## `eventStopPropagation`
-
-Останавливает распространение события и предотвращает выполнение действия по умолчанию.
-
-**Параметры:**
-- `event: Event` — объект события для остановки
-
-```javascript
-import { eventStopPropagation } from '@dxtmisha/functional'
-
-button.addEventListener('click', (event) => {
-  eventStopPropagation(event) // останавливает всплытие и действие по умолчанию
-})
-
-form.addEventListener('submit', (event) => {
-  if (!isValid) eventStopPropagation(event) // предотвращает отправку
-})
-```
-
-## `getKey`
-
-Возвращает нажатую клавишу из события клавиатуры.
-
-**Параметры:**
-- `event: KeyboardEvent` — объект события клавиатуры
-
-```javascript
-import { getKey } from '@dxtmisha/functional'
-
-document.addEventListener('keydown', (event) => {
-  const key = getKey(event) // 'Enter', 'Escape', 'a', etc.
-})
-```
-
-## `getMouseClient`
-
-Возвращает координаты позиции курсора мыши или места касания.
-
-**Параметры:**
-- `event: MouseEvent & TouchEvent` — объект события мыши или касания
-
-```javascript
-import { getMouseClient } from '@dxtmisha/functional'
-
-element.addEventListener('click', (event) => {
-  const { x, y } = getMouseClient(event) // { x: 100, y: 200 }
-})
-```
-
-## `getMouseClientX`
-
-Возвращает X-координату позиции курсора мыши или места касания.
-
-**Параметры:**
-- `event: MouseEvent & TouchEvent` — объект события мыши или касания
-
-```javascript
-import { getMouseClientX } from '@dxtmisha/functional'
-
-const x = getMouseClientX(event) // 100
-```
-
-## `getMouseClientY`
-
-Возвращает Y-координату позиции курсора мыши или места касания.
-
-**Параметры:**
-- `event: MouseEvent & TouchEvent` — объект события мыши или касания
-
-```javascript
-import { getMouseClientY } from '@dxtmisha/functional'
-
-const y = getMouseClientY(event) // 200
-```

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

@@ -1,208 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/functional/ru/Execution Utils'/>
-
-# Утилиты выполнения
-
-Набор функций для универсального выполнения синхронных и асинхронных операций.
-
-## `computedByLanguage`
-
-Создает реактивное вычисляемое свойство, значение которого зависит от текущего языка и заданных условий.
-
-**Параметры:**
-- `getter: ComputedGetter<R>` — функция, возвращающая основное значение в зависимости от языка
-- `getterNone: R | (() => R)` — альтернативное значение, если условия не выполнены или getter вернул undefined (по умолчанию undefined)
-- `conditions: () => boolean` — условие для вызова основного getter (опционально)
-- `debugOptions: DebuggerOptions` — опции отладки Vue (опционально)
-
-```javascript
-import { computedByLanguage } from '@dxtmisha/functional'
-import { ref } from 'vue'
-
-// Простой пример с переводами
-const title = computedByLanguage(
-  () => {
-    const lang = GeoRef.get().value
-    return lang === 'ru' ? 'Заголовок' : 'Title'
-  },
-  'Default Title'
-)
-
-// С условием
-const description = computedByLanguage(
-  () => {
-    const lang = GeoRef.get().value
-    const translations = {
-      ru: 'Описание на русском',
-      en: 'Description in English'
-    }
-    return translations[lang]
-  },
-  () => 'Описание по умолчанию',
-  () => showDescription.value // условие показа
-)
-
-// Использование в компоненте
-export default {
-  setup() {
-    const showText = ref(true)
-
-    const greeting = computedByLanguage(
-      () => {
-        const lang = GeoRef.get().value
-        return lang === 'ru' ? 'Привет, мир!' : 'Hello, world!'
-      },
-      'Greeting',
-      () => showText.value
-    )
-
-    return { greeting }
-  }
-}
-```
-
-## `executeFunction`
-
-Выполняет функцию и возвращает её результат, или возвращает входные данные, если это не функция.
-
-**Параметры:**
-- `callback: T | FunctionArgs<any, T>` — функция или любое значение
-
-```javascript
-import { executeFunction } from '@dxtmisha/functional'
-
-executeFunction(() => 'Hello World') // 'Hello World'
-executeFunction('Static value') // 'Static value'
-executeFunction(() => 42 + 8) // 50
-executeFunction({ data: 'object' }) // { data: 'object' }
-```
-
-## `executePromise`
-
-Выполняет асинхронную функцию или возвращает значение, автоматически обрабатывая Promise.
-
-**Параметры:**
-- `callback: (() => Promise<T>) | (() => T) | T` — асинхронная функция, синхронная функция или значение
-
-```javascript
-import { executePromise } from '@dxtmisha/functional'
-
-await executePromise(async () => fetch('/api').then(r => r.json())) // Promise result
-await executePromise(() => 'Sync result') // 'Sync result'
-await executePromise('Static value') // 'Static value'
-```
-
-## `executeUse`
-
-Возвращает функцию для кеширования и переиспользования результатов инициализации в Vue компонентах. Поддерживает различные режимы работы: локальное кеширование, глобальное состояние, наследование через provide/inject и автоматическую очистку при размонтировании.
-
-**Параметры:**
-- `callback: (...args: O) => R` — функция инициализации, результат которой будет кеширован
-- `unmounted: boolean` — удалять ли данные из кеша при размонтировании компонента (по умолчанию `true`)
-- `isGlobal: boolean` — является ли объект глобальным для всего приложения (по умолчанию `false`)
-- `isProvide: boolean` — использовать ли provide/inject для наследования в дочерних компонентах (по умолчанию `true`)
-
-**Возвращает:**
-Функцию, которая при первом вызове выполняет callback и кеширует результат, а при последующих вызовах возвращает закешированное значение.
-
-```javascript
-import { executeUse } from '@dxtmisha/functional'
-import { reactive, ref } from 'vue'
-
-// Простое кеширование состояния
-const useCounter = executeUse(() => {
-  return reactive({
-    count: 0,
-    increment() { this.count++ },
-    decrement() { this.count-- }
-  })
-})
-
-// В компоненте
-const counter = useCounter() // создается один раз
-counter.increment()
-
-// Кеширование с параметрами
-const useStore = executeUse((initialData) => {
-  return reactive({
-    data: initialData,
-    loading: false,
-    error: null,
-    async fetch() {
-      this.loading = true
-      try {
-        this.data = await api.getData()
-      } catch (err) {
-        this.error = err
-      } finally {
-        this.loading = false
-      }
-    }
-  })
-})
-
-// Глобальное состояние (сохраняется между компонентами)
-const useGlobalTheme = executeUse(
-  () => reactive({ theme: 'dark', language: 'ru' }),
-  false,  // не удалять при размонтировании
-  true,   // глобальное состояние
-  false   // без provide/inject
-)
-
-// Локальное состояние с наследованием
-const useFormState = executeUse(
-  (formId) => reactive({
-    formId,
-    values: {},
-    errors: {},
-    isValid: false,
-    setValue(key, value) {
-      this.values[key] = value
-      this.validate()
-    },
-    validate() {
-      // логика валидации
-      this.isValid = Object.keys(this.errors).length === 0
-    }
-  }),
-  true,   // очищать при размонтировании
-  false,  // не глобальное
-  true    // с наследованием через provide/inject
-)
-
-// Кеширование API клиента
-const useApiClient = executeUse(() => {
-  const baseURL = process.env.VUE_APP_API_URL
-
-  return {
-    async get(endpoint) {
-      const response = await fetch(`${baseURL}${endpoint}`)
-      return response.json()
-    },
-    async post(endpoint, data) {
-      const response = await fetch(`${baseURL}${endpoint}`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(data)
-      })
-      return response.json()
-    }
-  }
-})
-
-// Использование в компонентах
-export default {
-  setup() {
-    // Все вызовы вернут один и тот же объект
-    const counter = useCounter()
-    const store = useStore({ items: [] })
-    const theme = useGlobalTheme()
-    const api = useApiClient()
-
-    return { counter, store, theme, api }
-  }
-}
-```
-
-