@dxtmisha/wiki 0.24.3 → 0.39.1

package/src/media/descriptions/wikiDescriptionsWindow.ts

@@ -207,5 +207,65 @@ export const wikiDescriptionsWindow: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+      <div :class="classDemo.item">
+        <Window embedded open v-bind="args">
+            <template #control="{ binds }">
+              <button v-bind="binds">Open Window</button>
+            </template>
+            <template #title>
+              <h3>Window Title</h3>
+            </template>
+            <template #default>
+              <p>Window content goes here. This is a demonstration of the window component capabilities.</p>
+              <p>It can contain text, images, forms, or any other content.</p>
+            </template>
+            <template #footer>
+              <div>
+                <button>Cancel</button>
+                <button>Save</button>
+              </div>
+            </template>
+          </Window>
+      </div>
+    `,
+    description: `
+**Note:** This is a low-level component. Use it only if specialized components like \`Modal\`, \`Dialog\`, or \`Menu\` do not fit your requirements.
+
+Window is a versatile container component used for Modals, Popups, Dropdowns, and Cards.
+It automatically handles z-index, focus management, teleportation, and scroll locking.
+
+**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
+
+**When to use:**
+1. **Modal/Dialog:** When a centered box overlays the page content. Use default props.
+2. **Dropdown/Popover:** When a box appears next to a button/trigger. Use \`axis="y"\` (vertical) or \`axis="x"\` (horizontal).
+3. **Select Menu:** When a list overlays the trigger exactly. Use \`axis="on"\`.
+4. **Card/Panel:** When you need the visual style of a window but embedded in the page flow. Use \`staticMode\`.
+
+**Key Features:**
+- **Structure:**
+  - \`#control\`: The trigger element (button, link). Bind \`binds\` to this element to enable automatic toggling.
+  - \`#title\`: The header area of the window.
+  - \`#default\`: The main content area (automatically wrapped in a Scrollbar).
+  - \`#footer\`: The bottom area for action buttons.
+
+- **Positioning (\`axis\`):**
+  - \`undefined\` (default): Centered modal.
+  - \`y\`: Opens vertically relative to the trigger (like a standard dropdown).
+  - \`x\`: Opens horizontally relative to the trigger (like a nested menu).
+  - \`on\`: Overlays the trigger element.
+
+- **Behavior:**
+  - \`staticMode\`: Disables teleportation and absolute positioning, rendering it as a regular block.
+  - \`persistent\`: Prevents closing when clicking outside or pressing Escape.
+  - \`closeButton\`: Automatically adds a close button in the top-right corner.
+
+**Example:**
+\`<Window axis="y">\` creates a dropdown menu.
+\`<Window :open="true">\` creates a modal dialog.
+    `
   }
 }

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">