@dxtmisha/wiki 0.24.3 → 0.25.1

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

@@ -0,0 +1,40 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/functional/en/Reactive'/>
+
+# Reactive Utilities
+
+A set of functions for working with Vue.js reactivity.
+
+## `computedAsync`
+
+Creates a Vue computed property that can handle asynchronous getters.
+
+**Parameters:**
+- `getter: (() => Promise<R>) | (() => R) | R` — asynchronous function, synchronous function, or direct value to compute the result
+- `debugOptions?: DebuggerOptions` — debug options for reactive computations (supported by Vue.js library)
+
+```javascript
+import { computedAsync } from '@dxtmisha/functional'
+
+// With asynchronous function
+const userData = computedAsync(async () => {
+  const response = await fetch('/api/user')
+  return response.json()
+})
+
+// With synchronous function
+const doubled = computedAsync(() => value.value * 2)
+
+// With direct value
+const staticValue = computedAsync('Hello World')
+
+// With debug options
+const debugged = computedAsync(
+  async () => await fetchData(),
+  {
+    onTrack: (e) => console.log('tracked:', e),
+    onTrigger: (e) => console.log('triggered:', e)
+  }
+)
+```

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

@@ -170,7 +170,7 @@ export function useCounter(initialValue: RefOrNormal<number> = 0) {
 
 ### Component with Flexible Props
 
-```vue
+```html
 <template>
   <div class="flexible-component">
     <h2>{{ resolvedTitle }}</h2>

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

@@ -35,7 +35,7 @@ const { data, loading, isStarting, reading } = useApiRef('/api/users')
 
 ### Component Usage
 
-```vue
+```html
 <script setup>
 import { useApiRef } from '@dxtmisha/functional'
 
@@ -248,7 +248,7 @@ await reset()
 
 ### List with Filters
 
-```vue
+```html
 <script setup>
 import { ref, computed } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -289,7 +289,7 @@ const handleSearch = (query) => {
 
 ### Conditional Loading
 
-```vue
+```html
 <script setup>
 import { ref } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -324,7 +324,7 @@ const toggleDetails = () => {
 
 ### POST Request with Transformation
 
-```vue
+```html
 <script setup>
 import { ref } from 'vue'
 import { useApiRef } from '@dxtmisha/functional'
@@ -376,7 +376,7 @@ const handleSubmit = async () => {
 
 ### Multiple Requests
 
-```vue
+```html
 <script setup>
 import { useApiRef } from '@dxtmisha/functional'
 

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

@@ -0,0 +1,431 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/functional/en/Composables/useMeta'/>
+
+# Composable useMeta
+
+Composable for managing page meta tags in Vue 3 applications. Provides reactive interface for working with SEO tags, Open Graph, and Twitter Card with automatic DOM synchronization. Uses singleton pattern — all components share the same meta tags state.
+
+## Key Features
+
+- **Reactive meta tag management** — automatic DOM updates when values change
+- **Singleton pattern** — unified meta tags state for the entire application
+- **SEO support** — manage title, description, keywords, canonical, robots, author
+- **Open Graph** — full Open Graph protocol support for social networks
+- **Twitter Card** — Twitter Card integration for optimal Twitter display
+- **SSR support** — HTML string generation for server-side rendering
+- **TypeScript support** — full typing of all properties and methods
+
+## Basic Usage
+
+### Simple Meta Tags Management
+
+```javascript
+import { useMeta } from '@dxtmisha/functional'
+
+// Get reactive refs for managing meta tags
+const { title, description, keyword } = useMeta()
+
+// Set values
+title.value = 'Home Page'
+description.value = 'Homepage description of the website'
+keyword.value = 'keywords, of, the, website'
+```
+
+### Component Usage
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { title, description, image, canonical } = useMeta()
+
+onMounted(() => {
+  title.value = 'About Us'
+  description.value = 'Learn more about our company'
+  image.value = 'https://example.com/about-image.jpg'
+  canonical.value = 'https://example.com/about'
+})
+</script>
+
+<template>
+  <div>
+    <h1>About Us</h1>
+    <p>Page content...</p>
+  </div>
+</template>
+```
+
+## Return Values
+
+### `meta`
+
+Instance of Meta class for advanced operations.
+
+**Type:** `Meta`
+
+```javascript
+const { meta } = useMeta()
+
+// Access to advanced methods
+meta.setLocale('en_US')
+meta.setSuffix('My Site')
+
+// Get child classes for detailed configuration
+const og = meta.getOg()
+const twitter = meta.getTwitter()
+```
+
+### `title`
+
+Reactive page title (without suffix).
+
+**Type:** `Ref<string>`
+
+```javascript
+const { title } = useMeta()
+
+title.value = 'New Title'
+// Automatically updates:
+// - document.title (with suffix if set)
+// - Open Graph og:title
+// - Twitter Card twitter:title
+```
+
+### `keyword`
+
+Reactive keywords meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { keyword } = useMeta()
+
+keyword.value = 'vue, composable, meta tags, seo'
+// Updates <meta name="keywords" content="...">
+```
+
+### `description`
+
+Reactive description meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { description } = useMeta()
+
+description.value = 'Complete page description for search engines'
+// Updates <meta name="description" content="...">
+```
+
+### `image`
+
+Reactive image URL for Open Graph and Twitter Card.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { image } = useMeta()
+
+image.value = 'https://example.com/preview.jpg'
+// Automatically updates:
+// - Open Graph og:image
+// - Twitter Card twitter:image
+```
+
+### `canonical`
+
+Reactive canonical URL.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { canonical } = useMeta()
+
+canonical.value = 'https://example.com/page'
+// Automatically updates:
+// - <link rel="canonical" href="...">
+// - Open Graph og:url
+// - Twitter Card twitter:url
+```
+
+### `robots`
+
+Reactive robots meta tag directive.
+
+**Type:** `Ref<MetaRobots>`
+
+```javascript
+const { robots } = useMeta()
+
+robots.value = 'index, follow'
+// Other options: 'noindex', 'nofollow', 'noindex, nofollow'
+// Updates <meta name="robots" content="...">
+```
+
+### `author`
+
+Reactive author meta tag.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { author } = useMeta()
+
+author.value = 'John Doe'
+// Updates <meta name="author" content="...">
+```
+
+### `siteName`
+
+Reactive site name for Open Graph and Twitter Card.
+
+**Type:** `Ref<string>`
+
+```javascript
+const { siteName } = useMeta()
+
+siteName.value = 'My Site'
+// Automatically updates:
+// - Open Graph og:site_name
+// - Twitter Card twitter:site
+```
+
+### `getHtmlMeta`
+
+Function to generate HTML string with all meta tags (for SSR).
+
+**Type:** `() => string`
+
+```javascript
+const { getHtmlMeta } = useMeta()
+
+// Generates HTML string with all meta tags
+const metaHtml = getHtmlMeta()
+// Returns: '<meta name="description" content="..."><meta property="og:title" content="...">...'
+```
+
+## Usage Examples
+
+### Dynamic Meta Tags Based on Data
+
+```html
+<script setup>
+import { ref, watch } from 'vue'
+import { useMeta } from '@dxtmisha/functional'
+import { useApiRef } from '@dxtmisha/functional'
+
+const articleId = ref(1)
+const { data: article } = useApiRef(
+  computed(() => `/api/articles/${articleId.value}`)
+)
+
+const { title, description, image, author, canonical } = useMeta()
+
+watch(article, (newArticle) => {
+  if (newArticle) {
+    title.value = newArticle.title
+    description.value = newArticle.excerpt
+    image.value = newArticle.coverImage
+    author.value = newArticle.authorName
+    canonical.value = `https://example.com/articles/${newArticle.slug}`
+  }
+})
+</script>
+
+<template>
+  <article v-if="article">
+    <h1>{{ article.title }}</h1>
+    <p>{{ article.content }}</p>
+  </article>
+</template>
+```
+
+### Configure Meta Tags for Different Pages
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { useRoute } from 'vue-router'
+import { watch } from 'vue'
+
+const route = useRoute()
+const { title, description, robots } = useMeta()
+
+const pageMetadata = {
+  home: {
+    title: 'Home Page',
+    description: 'Welcome to our website',
+    robots: 'index, follow'
+  },
+  about: {
+    title: 'About Us',
+    description: 'Learn more about our company',
+    robots: 'index, follow'
+  },
+  admin: {
+    title: 'Admin Panel',
+    description: 'Administrator panel',
+    robots: 'noindex, nofollow'
+  }
+}
+
+watch(
+  () => route.name,
+  (routeName) => {
+    const meta = pageMetadata[routeName] || pageMetadata.home
+    title.value = meta.title
+    description.value = meta.description
+    robots.value = meta.robots
+  },
+  { immediate: true }
+)
+</script>
+```
+
+### Advanced Configuration with Open Graph and Twitter Card
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { meta, title, description, image, siteName } = useMeta()
+
+onMounted(() => {
+  // Basic meta tags
+  title.value = 'Article Title'
+  description.value = 'Brief article description'
+  image.value = 'https://example.com/article-image.jpg'
+  siteName.value = 'My Blog'
+
+  // Advanced settings
+  meta.setSuffix('My Blog')
+  meta.setLocale('en_US')
+
+  // Detailed Open Graph configuration
+  const og = meta.getOg()
+  og.setType('article')
+
+  // Detailed Twitter Card configuration
+  const twitter = meta.getTwitter()
+  twitter.setCard('summary_large_image')
+})
+</script>
+```
+
+### SSR: Generate Meta Tags on Server
+
+```javascript
+// server.js
+import { useMeta } from '@dxtmisha/functional'
+
+export function renderMetaTags(pageData) {
+  const { title, description, image, canonical, getHtmlMeta } = useMeta()
+
+  // Set values
+  title.value = pageData.title
+  description.value = pageData.description
+  image.value = pageData.image
+  canonical.value = pageData.url
+
+  // Generate HTML string
+  const metaHtml = getHtmlMeta()
+
+  return `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>${pageData.title}</title>
+        ${metaHtml}
+      </head>
+      <body>
+        <!-- content -->
+      </body>
+    </html>
+  `
+}
+```
+
+### Manage Indexing for Different Environments
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { onMounted } from 'vue'
+
+const { robots } = useMeta()
+
+onMounted(() => {
+  // Disable indexing on dev/staging environments
+  const isProduction = import.meta.env.PROD
+  robots.value = isProduction ? 'index, follow' : 'noindex, nofollow'
+})
+</script>
+```
+
+### Integration with Internationalization
+
+```html
+<script setup>
+import { useMeta } from '@dxtmisha/functional'
+import { useI18n } from 'vue-i18n'
+import { watch } from 'vue'
+
+const { locale } = useI18n()
+const { meta, title, description } = useMeta()
+
+watch(locale, (newLocale) => {
+  // Update locale for Open Graph
+  const localeMap = {
+    'ru': 'ru_RU',
+    'en': 'en_US',
+    'de': 'de_DE'
+  }
+  meta.setLocale(localeMap[newLocale] || 'en_US')
+
+  // Update meta tag content
+  title.value = t('meta.title')
+  description.value = t('meta.description')
+}, { immediate: true })
+</script>
+```
+
+## Important Notes
+
+### Singleton Pattern
+
+The `useMeta` composable uses a singleton pattern, which means all components share a single meta tags instance. This is useful for:
+
+- **Consistency** — changes in one component are reflected everywhere
+- **Performance** — no instance duplication
+- **Simplicity** — no need to pass state between components
+
+```javascript
+// In any application component
+const { title } = useMeta()
+title.value = 'New Title'
+
+// In another component, you'll get the same value
+const { title: sameTitle } = useMeta()
+console.log(sameTitle.value) // 'New Title'
+```
+
+### Automatic Synchronization
+
+All reactive property changes are automatically synchronized with the DOM. No need to call additional methods:
+
+```javascript
+const { title, description } = useMeta()
+
+// These changes are immediately applied to the DOM
+title.value = 'New Title'
+description.value = 'New Description'
+```
+
+### Open Graph and Twitter Card
+
+When changing `title`, `image`, and `canonical`, the corresponding Open Graph and Twitter Card tags are automatically updated. For detailed configuration, use `meta.getOg()` and `meta.getTwitter()` methods.
+
+

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

@@ -69,6 +69,17 @@ isDifferent('hello', 'hello') // false
 isDifferent({a: 1}, {a: 1}) // true (different references)
 ```
 
+## `isDomData`
+
+Checks if the current environment is a data URL.
+
+```javascript
+import { isDomData } from '@dxtmisha/functional'
+
+isDomData() // true if location.href starts with 'data:', otherwise false
+// Useful for detecting if code is running in iframe with data URL
+```
+
 ## `isDomRuntime`
 
 Checks if code is running in browser environment (DOM exists).

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

@@ -45,6 +45,42 @@ applyTemplate('Это [bold]жирный текст[/bold]', { bold: '<b>[conten
 applyTemplate('Text with [red]colored[/red] word', { red: '<span style="color:red">[content]</span>' })
 ```
 
+## `blobToBase64`
+
+Преобразует Blob в строку Base64 (data URL).
+
+**Параметры:**
+- `blob: Blob` — Blob объект для преобразования
+
+```javascript
+import { blobToBase64 } from '@dxtmisha/functional'
+
+const blob = new Blob(['Hello World'], { type: 'text/plain' })
+const base64 = await blobToBase64(blob)
+// 'data:text/plain;base64,SGVsbG8gV29ybGQ='
+
+// Использование с изображением
+const imageBlob = new Blob([imageData], { type: 'image/png' })
+const imageBase64 = await blobToBase64(imageBlob)
+// 'data:image/png;base64,iVBORw0KGgo...'
+```
+
+
+## `encodeAttribute`
+
+Кодирует специальные символы в строке для безопасного использования в HTML-атрибутах. Преобразует символы `&`, `<`, `>`, `"`, `'` в соответствующие HTML-сущности для предотвращения XSS-атак и корректного отображения.
+
+**Параметры:**
+- `text: string` — текст для кодирования
+
+```javascript
+import { encodeAttribute } from '@dxtmisha/functional'
+
+encodeAttribute('Hello & "World"') // 'Hello &amp; &quot;World&quot;'
+encodeAttribute('<script>alert("XSS")</script>') // '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'
+encodeAttribute("It's a test") // 'It&#39;s a test'
+```
+
 ## `replaceRecursive`
 
 Рекурсивно заменяет значения в объекте или массиве.
@@ -78,6 +114,37 @@ replaceTemplate('User [id]: [name]', {id: '123', name: 'John'}) // 'User 123: Jo
 replaceTemplate('Time: [time]', {time: () => new Date().toLocaleString()}) // с функцией
 ```
 
+## `resizeImageByMax`
+
+Изменяет размер изображения, чтобы оно соответствовало ограничению максимального размера.
+
+**Параметры:**
+- `image: HTMLImageElement | string` — элемент изображения или URL
+- `maxSize: number` — максимальный размер ширины или высоты
+- `type: 'auto' | 'width' | 'height'` — тип изменения размера (по умолчанию 'auto')
+- `typeData?: string` — тип данных результирующего изображения (например, 'image/png', 'image/jpeg')
+
+```javascript
+import { resizeImageByMax } from '@dxtmisha/functional'
+
+// Автоматическое масштабирование (по большей стороне)
+const image = document.querySelector('img')
+const resized = resizeImageByMax(image, 800) // data URL
+// Изображение 1200x800 станет 800x533
+
+// Масштабирование по ширине
+resizeImageByMax(image, 600, 'width')
+// Ширина будет 600px, высота пропорциональна
+
+// Масштабирование по высоте
+resizeImageByMax(image, 400, 'height')
+// Высота будет 400px, ширина пропорциональна
+
+// С указанием типа данных
+resizeImageByMax(image, 1024, 'auto', 'image/jpeg')
+// Возвращает JPEG data URL
+```
+
 ## `secondToTime`
 
 Преобразует секунды в формат времени (часы:минуты:секунды).

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

@@ -37,6 +37,31 @@ const copy = copyObject(original)
 copy.data.age = 25 // original.data.age остается 30
 ```
 
+## `copyObjectLite`
+
+Создает поверхностную копию простого объекта. Если передан параметр `source`, создаёт новый объект и объединяет `value` и `source`.
+
+**Параметры:**
+- `value: T` — объект для копирования
+- `source?: any` — дополнительные свойства для копирования (опционально)
+
+```javascript
+import { copyObjectLite } from '@dxtmisha/functional'
+
+const original = { name: 'John', age: 30 }
+const copy = copyObjectLite(original) // { name: 'John', age: 30 }
+
+// С дополнительными свойствами
+const extended = copyObjectLite(original, { city: 'Moscow' })
+// { name: 'John', age: 30, city: 'Moscow' }
+
+// Переопределение свойств
+const overridden = copyObjectLite(original, { age: 25 })
+// { name: 'John', age: 25 }
+```
+
+**Примечание:** Это поверхностная копия — вложенные объекты сохраняют ссылки на исходные. Для глубокого клонирования используйте `copyObject`, `structuredClone` или `_.cloneDeep`.
+
 ## `forEach`
 
 Универсальная функция итерации для массивов, объектов и Map.

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

@@ -68,7 +68,7 @@ const staticDatetime = new DatetimeRef('2024-01-15', 'date', 'ru-RU')
 
 ```javascript
 const yearValue = datetime.getYear()
-// Автоматически обновляется при изменении д��ты
+// Автоматически обновляется при изменении даты
 ```
 
 ### `getMonth`
@@ -228,7 +228,7 @@ const withoutTz = datetime.standard(false)
 
 ### Vue компонент с реактивной датой
 
-```vue
+```html
 <template>
   <div>
     <span>{{ datetime.getYear() }}/{{ datetime.getMonth() + 1 }}/{{ datetime.getDay() }}</span>

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

@@ -259,7 +259,7 @@ const eventRef = new EventRef(buttonRef, containerRef, 'click')
 
 ### Vue компонент с реактивными событиями
 
-```vue
+```html
 <template>
   <button ref="buttonEl">Нажми меня</button>
   <input ref="inputEl" placeholder="Введите...">