@dxtmisha/wiki 0.24.3 → 0.25.1

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -0,0 +1,89 @@
+import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
+
+/**
+ * Descriptions for Tooltip component properties
+ *
+ * Описания свойств компонента Tooltip
+ */
+export const wikiDescriptionsTooltip: StorybookComponentsDescriptionItem = {
+  name: 'Tooltip',
+  description: {
+    en: 'Component for displaying a popup hint when hovering over an element',
+    ru: 'Компонент для отображения всплывающей подсказки при наведении на элемент'
+  },
+  possibilities: {
+    en: [
+      'displaying text or other content in a popup window',
+      'automatic positioning relative to the element',
+      'support for delay before showing and hiding',
+      'customizable indentation and padding',
+      'ability to control the open state',
+      'support for an arrow pointing to the element'
+    ],
+    ru: [
+      'отображение текста или другого контента во всплывающем окне',
+      'автоматическое позиционирование относительно элемента',
+      'поддержка задержки перед показом и скрытием',
+      'настраиваемые отступы и поля',
+      'возможность управления состоянием открытия',
+      'поддержка стрелки, указывающей на элемент'
+    ]
+  },
+  import: [],
+  render: `
+      <DesignComponent v-bind="args">
+        <template #control="{ binds }">
+          <span v-bind="binds">
+            Hover me
+          </span>
+        </template>
+      </DesignComponent>
+    `,
+  stories: [
+    {
+      id: 'TooltipAllSlots',
+      name: {
+        en: 'All slots demonstration',
+        ru: 'Демонстрация всех слотов'
+      },
+      template: `
+        <DesignComponent>
+          <template #control="{ binds }">
+            <button class="wiki-storybook-button" v-bind="binds">
+              Hover me (All Slots)
+            </button>
+          </template>
+
+          <template #default>
+            Default Slot
+          </template>
+
+          <template #description>
+            Description Slot
+          </template>
+
+          <template #body>
+            <div class="wiki-storybook-item--padding">
+              Body Slot Content
+            </div>
+          </template>
+        </DesignComponent>
+      `
+    }
+  ],
+  documentation: {
+    body: `
+<StorybookDescriptions componentName={'Tooltip'} type={'tooltip'}/>
+    `,
+    events: `
+<StorybookDescriptions componentName={'Tooltip'} type={'event.tooltip'}/>
+    `,
+    slots: `
+<Canvas of={Component.TooltipAllSlots}/>
+<StorybookDescriptions componentName={'Tooltip'} type={'slot.control'}/>
+<StorybookDescriptions componentName={'Slot'} type={'default'}/>
+<StorybookDescriptions componentName={'Slot'} type={'description'}/>
+<StorybookDescriptions componentName={'Slot'} type={'body'}/>
+    `
+  }
+}

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

@@ -45,6 +45,42 @@ applyTemplate('This is [bold]bold text[/bold]', { bold: '<b>[content]</b>' }) //
 applyTemplate('Text with [red]colored[/red] word', { red: '<span style="color:red">[content]</span>' })
 ```
 
+## `blobToBase64`
+
+Converts a Blob to a Base64 string (data URL).
+
+**Parameters:**
+- `blob: Blob` — Blob object to convert
+
+```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='
+
+// Using with images
+const imageBlob = new Blob([imageData], { type: 'image/png' })
+const imageBase64 = await blobToBase64(imageBlob)
+// 'data:image/png;base64,iVBORw0KGgo...'
+```
+
+
+## `encodeAttribute`
+
+Encodes special characters in a string for safe use in HTML attributes. Converts characters `&`, `<`, `>`, `"`, `'` into corresponding HTML entities to prevent XSS attacks and ensure correct display.
+
+**Parameters:**
+- `text: string` — text to encode
+
+```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`
 
 Recursively replaces values in an object or array.
@@ -78,6 +114,37 @@ replaceTemplate('User [id]: [name]', {id: '123', name: 'John'}) // 'User 123: Jo
 replaceTemplate('Time: [time]', {time: () => new Date().toLocaleString()}) // with function
 ```
 
+## `resizeImageByMax`
+
+Resizes an image to fit within a maximum size constraint.
+
+**Parameters:**
+- `image: HTMLImageElement | string` — image element or URL
+- `maxSize: number` — maximum size for width or height
+- `type: 'auto' | 'width' | 'height'` — resize type (default 'auto')
+- `typeData?: string` — data type for the resulting image (e.g., 'image/png', 'image/jpeg')
+
+```javascript
+import { resizeImageByMax } from '@dxtmisha/functional'
+
+// Automatic scaling (by larger dimension)
+const image = document.querySelector('img')
+const resized = resizeImageByMax(image, 800) // data URL
+// Image 1200x800 becomes 800x533
+
+// Scale by width
+resizeImageByMax(image, 600, 'width')
+// Width will be 600px, height proportional
+
+// Scale by height
+resizeImageByMax(image, 400, 'height')
+// Height will be 400px, width proportional
+
+// With specified data type
+resizeImageByMax(image, 1024, 'auto', 'image/jpeg')
+// Returns JPEG data URL
+```
+
 ## `secondToTime`
 
 Converts seconds to time format (hours:minutes:seconds).

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

@@ -37,6 +37,31 @@ const copy = copyObject(original)
 copy.data.age = 25 // original.data.age remains 30
 ```
 
+## `copyObjectLite`
+
+Creates a shallow copy of a simple object. If the `source` parameter is passed, creates a new object and merges `value` and `source`.
+
+**Parameters:**
+- `value: T` — object to copy
+- `source?: any` — additional properties to copy (optional)
+
+```javascript
+import { copyObjectLite } from '@dxtmisha/functional'
+
+const original = { name: 'John', age: 30 }
+const copy = copyObjectLite(original) // { name: 'John', age: 30 }
+
+// With additional properties
+const extended = copyObjectLite(original, { city: 'Moscow' })
+// { name: 'John', age: 30, city: 'Moscow' }
+
+// Overriding properties
+const overridden = copyObjectLite(original, { age: 25 })
+// { name: 'John', age: 25 }
+```
+
+**Note:** This is a shallow copy — nested objects retain references to the originals. For deep cloning use `copyObject`, `structuredClone` or `_.cloneDeep`.
+
 ## `forEach`
 
 Universal iteration function for arrays, objects and Map.

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

@@ -228,7 +228,7 @@ const withoutTz = datetime.standard(false)
 
 ### Vue Component with Reactive Date
 
-```vue
+```html
 <template>
   <div>
     <span>{{ datetime.getYear() }}/{{ datetime.getMonth() + 1 }}/{{ datetime.getDay() }}</span>

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

@@ -259,7 +259,7 @@ const eventRef = new EventRef(buttonRef, containerRef, 'click')
 
 ### Vue Component with Reactive Events
 
-```vue
+```html
 <template>
   <button ref="buttonEl" @click="handleClick">Click me</button>
   <input ref="inputEl" placeholder="Type...">

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

@@ -6,6 +6,62 @@ import {Meta} from '@storybook/addon-docs/blocks'
 
 A set of functions for universal execution of synchronous and asynchronous operations.
 
+## `computedByLanguage`
+
+Creates a reactive computed property whose value depends on the current language and specified conditions.
+
+**Parameters:**
+- `getter: ComputedGetter<R>` — function that returns the main value depending on the language
+- `getterNone: R | (() => R)` — alternative value if conditions are not met or getter returns undefined (default undefined)
+- `conditions: () => boolean` — condition for calling the main getter (optional)
+- `debugOptions: DebuggerOptions` — Vue debug options (optional)
+
+```javascript
+import { computedByLanguage } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+// Simple example with translations
+const title = computedByLanguage(
+  () => {
+    const lang = GeoRef.get().value
+    return lang === 'ru' ? 'Заголовок' : 'Title'
+  },
+  'Default Title'
+)
+
+// With condition
+const description = computedByLanguage(
+  () => {
+    const lang = GeoRef.get().value
+    const translations = {
+      ru: 'Описание на русском',
+      en: 'Description in English'
+    }
+    return translations[lang]
+  },
+  () => 'Default description',
+  () => showDescription.value // show condition
+)
+
+// Usage in component
+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`
 
 Executes a function and returns its result, or returns input data if it's not a function.
@@ -127,3 +183,5 @@ export default {
   }
 }
 ```
+
+

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

@@ -162,7 +162,7 @@ countryCode.value = 'ru-RU'
 
 ### Vue Component with Country Flags
 
-```vue
+```html
 <template>
   <div class="country-selector">
     <div class="current-country">

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

@@ -291,7 +291,7 @@ const daysList = intl.weekdays('long')
 
 ### Vue Component with Localization
 
-```vue
+```html
 <template>
   <div class="localized-content">
     <h2>{{ intl.countryName('US') }}</h2>

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

@@ -141,7 +141,7 @@ const flag = new GeoFlagRef() // will use de-DE
 
 ### Vue Component with Global Geolocation
 
-```vue
+```html
 <template>
   <div class="geo-info">
     <h2>Current Location</h2>
@@ -202,7 +202,7 @@ GeoRef.set(userLocale)
 
 ### Global Locale Provider
 
-```vue
+```html
 <!-- App.vue -->
 <template>
   <div class="app">