@dxtmisha/wiki 0.39.3 → 0.39.5

package/src/media/mdx/Icon/icon.en.mdx

@@ -0,0 +1,77 @@
+## Icon State Management
+
+A component for displaying icons with support for active state, rotation, loading, and skeleton integration.
+
+Icon provides a unified interface for working with icons in the design system, supporting both the main icon and an alternative for the active state. The component automatically manages switching between icons, handles loading events, and integrates with the skeleton system to display loading states.
+
+**Key Features:**
+
+- Display of main and active icons with smooth transitions
+- Icon rotation at a specified angle
+- Disabled and hide states for visibility control
+- Image loading events for icons
+- Integration with Skeleton for loading states
+- Support within other components (Button, Cell, Chip, Field)
+
+**Typical Use Cases:**
+
+- Icons in buttons and navigation elements
+- Interactive icons with state changes
+- State indicators in forms and lists
+- Decorative interface elements with animation
+
+### Properties
+
+- **`icon`** — The main icon displayed by default.
+- **`iconActive`** — The icon that is displayed when the component is in an active state (`active` = `true`).
+- **`active`** — A boolean property that toggles the component's state between normal and active.
+
+### Description
+
+- The `icon` property is essential for displaying the icon.
+- If `iconActive` is not provided, there will be no visual change when the `active` state changes.
+- When `active` is set to `true`, the component will attempt to display the icon specified in `iconActive`.
+- The `active` property can be used to create toggles, indicators, and other interactive elements.
+
+### Recommendations
+
+- Use `iconActive` to provide visual feedback upon user interaction (e.g., on click or selection).
+- Ensure that `icon` and `iconActive` are visually distinct enough for the user to easily identify the state change.
+
+### Usage Example
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { D1Icon } from '@dxtmisha/d1'
+
+const isActive = ref(false)
+</script>
+
+<template>
+  <!-- Normal icon -->
+  <D1Icon icon="home" />
+
+  <!-- Active icon -->
+  <!-- `favorite` will be displayed because active=true -->
+  <D1Icon icon="favorite_border" icon-active="favorite" :active="true" />
+
+  <!-- Dynamic state toggle -->
+  <D1Icon
+    icon="visibility"
+    icon-active="visibility_off"
+    :active="isVisible"
+    @click="isVisible = !isVisible"
+  />
+
+  <D1Icon
+    icon="home"
+    icon-active="favorite"
+    :active="isActive"
+    turn="90"
+    @load="onIconLoad"
+  />
+</template>
+```
+
+> The Icon component can be used both standalone and as part of other UI components through the `icon`, `icon-trailing`, and `icon-active` properties.

package/src/media/mdx/Icon/icon.ru.mdx

@@ -0,0 +1,42 @@
+## Icon
+
+Компонент для отображения иконок с поддержкой активного состояния, поворота, загрузки и интеграции со скелетоном.
+
+Icon предоставляет унифицированный интерфейс для работы с иконками в дизайн-системе, поддерживая как основную иконку, так и альтернативную для активного состояния. Компонент автоматически управляет переключением между иконками, обрабатывает события загрузки и интегрируется с системой скелетонов для отображения состояния загрузки.
+
+**Основные возможности:**
+
+- Отображение основной и активной иконки с плавным переключением
+- Поворот иконки на заданный угол
+- Состояния disabled и hide для управления видимостью
+- События загрузки изображений иконок
+- Интеграция со Skeleton для состояний загрузки
+- Поддержка в составе других компонентов (Button, Cell, Chip, Field)
+
+**Типичные сценарии использования:**
+
+- Иконки в кнопках и навигационных элементах
+- Интерактивные иконки с изменением состояния
+- Индикаторы состояния в формах и списках
+- Декоративные элементы интерфейса с анимацией
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { D1Icon } from '@dxtmisha/d1'
+
+const isActive = ref(false)
+</script>
+
+<template>
+  <D1Icon
+    icon="home"
+    icon-active="favorite"
+    :active="isActive"
+    turn="90"
+    @load="onIconLoad"
+  />
+</template>
+```
+
+> Компонент Icon может использоваться как самостоятельно, так и в составе других UI-компонентов через свойства `icon`, `icon-trailing` и `icon-active`.

package/src/media/mdx/Icon/wikiMdxIcon.ts

@@ -0,0 +1,21 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import iconEn from './icon.en.mdx'
+import iconRu from './icon.ru.mdx'
+
+import exposeIsActiveEn from './expose.isActive.en.mdx'
+import exposeIsActiveRu from './expose.isActive.ru.mdx'
+
+export const wikiMdxIcon: StorybookComponentsMdxItem = {
+  name: 'Icon',
+  descriptions: {
+    'icon': {
+      en: iconEn,
+      ru: iconRu
+    },
+    'expose.isActive': {
+      en: exposeIsActiveEn,
+      ru: exposeIsActiveRu
+    }
+  }
+}

package/src/media/mdx/Image/adaptive.en.mdx

@@ -0,0 +1,75 @@
+## Adaptive scaling
+
+The `adaptive`, `adaptiveGroup`, `adaptiveAlways`, `objectWidth`, and `objectHeight` properties control automatic image scaling to ensure visual consistency of physical object sizes across different images.
+
+**Properties:**
+
+- `adaptive` — enables adaptive scaling mode
+- `adaptiveGroup` — group name for scale synchronization (default `'basic'`)
+- `objectWidth` — physical width of the object in the image in millimeters
+- `objectHeight` — physical height of the object in the image in millimeters
+- `adaptiveAlways` — perform calculations even for invisible elements
+
+Properties work together to ensure proportional display of images with objects of different physical sizes. When `adaptive` is activated, the component starts tracking element dimensions and comparing them with other images in the same group, automatically selecting the optimal scale for each element.
+
+The `objectWidth` or `objectHeight` properties specify the real physical dimensions of the object in the image in millimeters. These values are necessary for calculating the scaling coefficient — the component uses them to determine how much to enlarge or reduce the image so that objects in different images appear the same size. It is sufficient to specify only one property — either width or height.
+
+The component automatically determines which axis (horizontal or vertical) to scale on, based on available dimensions and image proportions. If `objectWidth` is specified, scaling will occur horizontally, if `objectHeight` — vertically. This allows flexible work with images of different orientations.
+
+Elements with the same `adaptiveGroup` value scale synchronously, ensuring consistent visual object sizes across all images in the group. This is especially useful when displaying product galleries or comparison tables where maintaining visual size correspondence is important.
+
+For performance optimization, scaling calculations are performed only for visible elements within the viewport plus a small margin. If an element is outside the visible area, calculations are paused until the element appears on screen. The `adaptiveAlways` property disables this optimization and forces the component to constantly recalculate the scale regardless of element visibility.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const phone1 = ref('/images/phone-model-a.png')
+const phone2 = ref('/images/phone-model-b.png')
+const phone3 = ref('/images/phone-model-c.png')
+</script>
+
+<template>
+  <!-- Basic usage with object width -->
+  <Image
+    :value="phone1"
+    adaptive
+    object-width="76.2"
+  />
+
+  <!-- Multiple images in one group -->
+  <Image
+    :value="phone1"
+    adaptive
+    adaptive-group="phones"
+    object-width="76.2"
+  />
+  <Image
+    :value="phone2"
+    adaptive
+    adaptive-group="phones"
+    object-width="71.9"
+  />
+  <Image
+    :value="phone3"
+    adaptive
+    adaptive-group="phones"
+    object-width="129.9"
+  />
+
+  <!-- With height instead of width -->
+  <Image
+    adaptive
+    object-height="154.8"
+    :value="phone1"
+  />
+
+  <!-- Constant scaling -->
+  <Image
+    adaptive
+    adaptive-always
+    object-width="76.2"
+    :value="phone1"
+  />
+</template>
+```

package/src/media/mdx/Image/adaptive.ru.mdx

@@ -0,0 +1,75 @@
+## Адаптивное масштабирование
+
+Свойства `adaptive`, `adaptiveGroup`, `adaptiveAlways`, `objectWidth` и `objectHeight` управляют автоматическим масштабированием изображений для обеспечения визуального соответствия физических размеров объектов на разных изображениях.
+
+**Свойства:**
+
+- `adaptive` — включает режим адаптивного масштабирования
+- `adaptiveGroup` — название группы для синхронизации масштаба (по умолчанию `'basic'`)
+- `objectWidth` — физическая ширина объекта на изображении в миллиметрах
+- `objectHeight` — физическая высота объекта на изображении в миллиметрах
+- `adaptiveAlways` — выполнять расчёты даже для невидимых элементов
+
+Свойства работают совместно для обеспечения пропорционального отображения изображений с объектами разных физических размеров. При активации `adaptive` компонент начинает отслеживать размеры элемента и сравнивать их с другими изображениями в той же группе, автоматически подбирая оптимальный масштаб для каждого элемента.
+
+Свойства `objectWidth` или `objectHeight` задают реальные физические размеры объекта на изображении в миллиметрах. Эти значения необходимы для расчёта коэффициента масштабирования — компонент использует их для определения, во сколько раз нужно увеличить или уменьшить изображение, чтобы объекты на разных изображениях выглядели одинакового размера. Достаточно указать только одно из свойств — либо ширину, либо высоту.
+
+Компонент автоматически определяет, по какой оси (горизонтальной или вертикальной) производить масштабирование, основываясь на доступных размерах и пропорциях изображения. Если указан `objectWidth`, масштабирование будет происходить по горизонтали, если `objectHeight` — по вертикали. Это позволяет гибко работать с изображениями разных ориентаций.
+
+Элементы с одинаковым значением `adaptiveGroup` масштабируются синхронно, обеспечивая одинаковый визуальный размер объектов на всех изображениях группы. Это особенно полезно при отображении галерей продуктов или сравнительных таблиц, где важно сохранить визуальное соответствие размеров.
+
+Для оптимизации производительности расчёты масштабирования выполняются только для видимых элементов в пределах области просмотра (viewport) плюс небольшой запас. Если элемент находится за пределами видимой области, расчёты приостанавливаются до момента, когда элемент появится на экране. Свойство `adaptiveAlways` отключает эту оптимизацию и заставляет компонент постоянно пересчитывать масштаб независимо от видимости элемента.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const phone1 = ref('/images/phone-model-a.png')
+const phone2 = ref('/images/phone-model-b.png')
+const phone3 = ref('/images/phone-model-c.png')
+</script>
+
+<template>
+  <!-- Базовое использование с шириной объекта -->
+  <Image
+    :value="phone1"
+    adaptive
+    object-width="76.2"
+  />
+
+  <!-- Несколько изображений в одной группе -->
+  <Image
+    :value="phone1"
+    adaptive
+    adaptive-group="phones"
+    object-width="76.2"
+  />
+  <Image
+    :value="phone2"
+    adaptive
+    adaptive-group="phones"
+    object-width="71.9"
+  />
+  <Image
+    :value="phone3"
+    adaptive
+    adaptive-group="phones"
+    object-width="129.9"
+  />
+
+  <!-- С высотой вместо ширины -->
+  <Image
+    adaptive
+    object-height="154.8"
+    :value="phone1"
+  />
+
+  <!-- Постоянное масштабирование -->
+  <Image
+    adaptive
+    adaptive-always
+    object-width="76.2"
+    :value="phone1"
+  />
+</template>
+```

package/src/media/mdx/Image/event.load.en.mdx

@@ -0,0 +1,39 @@
+### `load`
+
+Event fires after the image is loaded.
+
+**Parameters:**
+- `image: ImageEventData` — object with image data
+
+**ImageEventData structure:**
+- `type: ImageTypeItem` — image type (`'image'`, `'icon'`, `'pdf'`, `'file'`, `'flag'`, `'color'`, etc.)
+- `image: ImageEventItem` — image data (`ImageItem` object, URL string, or `undefined`)
+
+**ImageItem structure (when image is an object):**
+- `width: number` — image width
+- `height: number` — image height
+- `image: HTMLImageElement` — image DOM element
+- `src: string` — image source (URL)
+
+```html
+<script setup>
+const handleLoad = (data) => {
+  console.log('Image type:', data.type)
+
+  if (typeof data.image === 'object' && data.image) {
+    console.log('Width:', data.image.width)
+    console.log('Height:', data.image.height)
+    console.log('URL:', data.image.src)
+  } else {
+    console.log('Image URL:', data.image)
+  }
+}
+</script>
+
+<template>
+  <Image
+    src="/path/to/image.jpg"
+    @load="handleLoad"
+  />
+</template>
+```

package/src/media/mdx/Image/event.load.ru.mdx

@@ -0,0 +1,39 @@
+### `load`
+
+Событие срабатывает после загрузки изображения.
+
+**Параметры:**
+- `image: ImageEventData` — объект с данными изображения
+
+**Структура ImageEventData:**
+- `type: ImageTypeItem` — тип изображения (`'image'`, `'icon'`, `'pdf'`, `'file'`, `'flag'`, `'color'` и др.)
+- `image: ImageEventItem` — данные изображения (объект `ImageItem`, строка URL или `undefined`)
+
+**Структура ImageItem (если image - объект):**
+- `width: number` — ширина изображения
+- `height: number` — высота изображения
+- `image: HTMLImageElement` — DOM элемент изображения
+- `src: string` — источник изображения (URL)
+
+```html
+<script setup>
+const handleLoad = (data) => {
+  console.log('Тип изображения:', data.type)
+
+  if (typeof data.image === 'object' && data.image) {
+    console.log('Ширина:', data.image.width)
+    console.log('Высота:', data.image.height)
+    console.log('URL:', data.image.src)
+  } else {
+    console.log('URL изображения:', data.image)
+  }
+}
+</script>
+
+<template>
+  <Image
+    src="/path/to/image.jpg"
+    @load="handleLoad"
+  />
+</template>
+```

package/src/media/mdx/Image/expose.en.mdx

@@ -0,0 +1,12 @@
+- `type: ComputedRef<ImageTypeItem>` — Type of the loaded image.
+
+> **ImageTypeItem values:**
+> `pdf`, `file`, `array`, `image`, `flag`, `flag-compressed`, `color`, `public`, `filled`, `outlined`, `round`, `sharp`, `two-tone`, `material`, `icon`.
+
+- `data: Ref<ImageEventItem>` — Information about the loaded image, including its source and metadata.
+
+> **ImageEventItem:**
+> - `src: string` — source URL.
+> - `width: number` — image width.
+> - `height: number` — image height.
+> - `image: HTMLImageElement` — DOM element of the image.

package/src/media/mdx/Image/expose.ru.mdx

@@ -0,0 +1,12 @@
+- `type: ComputedRef<ImageTypeItem>` — Тип загруженного изображения.
+
+> **Значения ImageTypeItem:**
+> `pdf`, `file`, `array`, `image`, `flag`, `flag-compressed`, `color`, `public`, `filled`, `outlined`, `round`, `sharp`, `two-tone`, `material`, `icon`.
+
+- `data: Ref<ImageEventItem>` — Информация о загруженном изображении, включая его источник и метаданные.
+
+> **ImageEventItem:**
+> - `src: string` — URL-источник.
+> - `width: number` — ширина изображения.
+> - `height: number` — высота изображения.
+> - `image: HTMLImageElement` — DOM-элемент изображения.

package/src/media/mdx/Image/flag.en.mdx

@@ -0,0 +1,23 @@
+## Flags
+
+The `Image` component supports displaying country flags. A special format for the `value` property is used for this purpose.
+
+**Formats:**
+
+- `flag-xx` — standard flag (where `xx` is the ISO 3166-1 alpha-2 country code)
+- `f-xx` — compressed flag (where `xx` is the ISO 3166-1 alpha-2 country code)
+
+**Features:**
+
+- Automatic flag type detection by prefix
+- Support for all countries according to ISO 3166-1 alpha-2 standard
+
+```html
+<template>
+  <!-- Standard US flag -->
+  <Image value="flag-us" />
+
+  <!-- Compressed Germany flag -->
+  <Image value="f-de" />
+</template>
+```

package/src/media/mdx/Image/flag.ru.mdx

@@ -0,0 +1,23 @@
+## Флаги
+
+Компонент `Image` поддерживает отображение флагов стран. Для этого используется специальный формат значения свойства `value`.
+
+**Форматы:**
+
+- `flag-xx` — стандартный флаг (где `xx` — код страны ISO 3166-1 alpha-2)
+- `f-xx` — сжатый флаг (где `xx` — код страны ISO 3166-1 alpha-2)
+
+**Особенности:**
+
+- Автоматическое определение типа флага по префиксу
+- Поддержка всех стран по стандарту ISO 3166-1 alpha-2
+
+```html
+<template>
+  <!-- Стандартный флаг США -->
+  <Image value="flag-us" />
+
+  <!-- Сжатый флаг Германии -->
+  <Image value="f-de" />
+</template>
+```

package/src/media/mdx/Image/image.en.mdx

@@ -0,0 +1,51 @@
+Universal component for displaying images, icons, flags, and PDF documents with advanced size, positioning, and adaptability controls.
+
+Image provides a flexible API for working with various types of visual content. The component automatically detects the source type (image, icon, color, file), selects the optimal rendering method (`<img>`, `background-image`, `<picture>`, `<object>`, or icon font), and supports advanced cropping and adaptation features.
+
+**Key Features:**
+
+- Support for multiple source types (URL, File, PDF, Material Icons, flags, colors)
+- Flexible rendering with automatic choice between background and img tag
+- Adaptive scaling with aspect ratio preservation and srcset support
+- Display control via fill modes and coordinate cropping
+- Styling support with masks and color filling
+- Integration with Material Symbols and system flags
+
+**Typical Use Cases:**
+
+- Responsive images with picture and srcset
+- Interface icons (Material Design or SVG masks)
+- User avatars with automatic cropping
+- Previews of uploaded files and PDF documents
+- Background images with complex positioning
+- Displaying country flags via CSS sprites
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Image } from '@dxtmisha/constructor'
+
+const imageUrl = ref('https://example.com/image.jpg')
+</script>
+
+<template>
+  <!-- Background image with cropping -->
+  <Image
+    :value="imageUrl"
+    size="cover"
+    :coordinator="[10, 10, 10, 10]"
+  />
+
+  <!-- SEO-friendly image -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Description"
+  />
+
+  <!-- Material Design Icon -->
+  <Image value="filled-home" />
+</template>
+```
+
+> The component automatically manages content type and optimizes display based on the source.

package/src/media/mdx/Image/image.ru.mdx

@@ -0,0 +1,51 @@
+Универсальный компонент для отображения изображений, иконок, флагов и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
+
+Image предоставляет гибкий API для работы с различными типами визуального контента. Компонент автоматически определяет тип источника (изображение, иконка, цвет, файл), выбирает оптимальный способ рендеринга (`<img>`, `background-image`, `<picture>`, `<object>` или иконочный шрифт) и поддерживает продвинутые функции кадрирования и адаптации.
+
+**Основные возможности:**
+
+- Поддержка множества типов источников (URL, File, PDF, Material Icons, флаги, цвета)
+- Гибкий рендеринг с автоматическим выбором между фоном и тегом img
+- Адаптивное масштабирование с сохранением пропорций и поддержкой srcset
+- Управление отображением через режимы заполнения и координатное кадрирование
+- Стилизация с поддержкой масок и заливки цветом
+- Интеграция с Material Symbols и системными флагами
+
+**Типичные сценарии использования:**
+
+- Адаптивные изображения с picture и srcset
+- Иконки интерфейса (Material Design или SVG маски)
+- Аватары пользователей с автоматическим кадрированием
+- Превью загружаемых файлов и PDF документов
+- Фоновые изображения со сложным позиционированием
+- Отображение флагов стран через CSS спрайты
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Image } from '@dxtmisha/constructor'
+
+const imageUrl = ref('https://example.com/image.jpg')
+</script>
+
+<template>
+  <!-- Фоновое изображение с кадрированием -->
+  <Image
+    :value="imageUrl"
+    size="cover"
+    :coordinator="[10, 10, 10, 10]"
+  />
+
+  <!-- SEO-дружественное изображение -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Описание"
+  />
+
+  <!-- Иконка Material Design -->
+  <Image value="filled-home" />
+</template>
+```
+
+> Компонент автоматически управляет типом контента и оптимизирует отображение в зависимости от источника.

package/src/media/mdx/Image/img-tag.en.mdx

@@ -0,0 +1,105 @@
+## Using the img tag
+
+The `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` and `fetchPriority` properties are designed to control the image display mode using the HTML `<img>` tag instead of a background image.
+
+**Properties:**
+
+- `tagImg` — use the `<img>` tag instead of a background image
+- `srcset` — set of image sources for different screen resolutions
+- `picture` — sources for different display conditions using the `<picture>` tag
+- `alt` — alternative text for the image
+- `lazy` — enables lazy loading of the image
+- `preloadOffset` — offset for image preloading (default `1024px`)
+- `fetchPriority` — image loading priority (`low`, `high`, `auto`)
+
+The properties work together: if `tagImg` is not set or equals `false`, the image is displayed as a CSS background via `background-image`. When `tagImg` is activated (value `true`), the component uses the semantic HTML `<img>` tag, providing better accessibility and SEO optimization. The `alt` property defines alternative text that is displayed when the image is unavailable and is used by screen readers for people with disabilities.
+
+The `srcset` property allows you to provide multiple versions of an image for different pixel densities and screen sizes. It accepts a string in the standard `srcset` attribute format or an object where keys are width descriptors (numbers or strings like `'2x'`) and values are image URLs. When using numeric keys, the `w` suffix (width descriptor) is automatically added. The browser automatically selects the optimal image based on screen size and pixel density.
+
+The `picture` property enables the use of the HTML `<picture>` tag for art direction — when you need to load different images depending on screen size or other media query conditions. It accepts an object where keys are media conditions (such as screen width in pixels) and values are image URLs, or an array of objects with `<source>` attributes. When using an object, media queries like `(width >= 768px)` are automatically generated. The `<picture>` tag provides more flexible control over image selection compared to `srcset`, allowing you to load images with different aspect ratios or content for various viewing conditions.
+
+The `lazy` property activates native browser lazy loading via the `loading="lazy"` attribute. Images with this attribute are loaded only when approaching the visible screen area, which significantly speeds up initial page load and reduces traffic consumption. It is especially effective for pages with a large number of images or long lists.
+
+The `preloadOffset` property defines the pixel offset for preloading images when using lazy loading. The default value is `1024px`, which means the image starts loading 1024 pixels before it enters the visible area. This ensures smooth image loading without delays during scrolling. You can specify either a numeric value or a string with a unit of measurement.
+
+The `fetchPriority` property allows you to control the browser's image loading priority. It accepts three values: `high` — high priority for critical images (such as hero images or main banners), `low` — low priority for secondary images, `auto` — the browser determines the priority automatically (default value). Proper use of this property helps optimize page loading by ensuring fast loading of important content.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const productImage = ref('/images/product.jpg')
+</script>
+
+<template>
+  <!-- Basic usage -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product description"
+  />
+
+  <!-- With lazy loading -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product"
+    lazy
+  />
+
+  <!-- With srcset object -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg'
+    }"
+  />
+
+  <!-- With picture for different screen sizes -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image for different devices"
+    :picture="{
+      768: '/images/product-tablet.jpg',
+      1024: '/images/product-desktop.jpg'
+    }"
+  />
+
+  <!-- With preload offset configuration -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Image with early preload"
+    lazy
+    preload-offset="2048px"
+  />
+
+  <!-- With high loading priority -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Main page image"
+    fetch-priority="high"
+  />
+
+  <!-- Complex example -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive product image"
+    lazy
+    preload-offset="1536px"
+    fetch-priority="low"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg',
+      '3x': '/images/product@3x.jpg'
+    }"
+  />
+</template>
+```
+