VueCraft NPM

Справочник API ​

Типы времени выполнения ​

Все публичные типы экспортируются из корня пакета:

ts
import type {
  ImageStatus, // 'idle' | 'loading' | 'loaded' | 'error'
  SrcSet, // { avif?: string; webp?: string; fallback: string }
  ResponsiveSrc, // Record<string, string | SrcSet> — брейкпоинт-ключ → URL, или набор форматов для этого брейкпоинта
  BreakpointMap, // Record<string, string> — брейкпоинт-ключ → CSS media query
  VImageKitOptions, // { breakpoints?: BreakpointMap; serverRoute?: string }
  LazyImgOptions, // { src, placeholder?, rootMargin?, threshold?, onLoad?, onError? }
  ObjectFit, // 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
  FocalPoint, // { x: number; y: number } — доли 0–1
  Densities, // number[] | Record<number, string> — дескрипторы плотности
  ImageMeta, // запись манифеста CLI / форма импорта `?vik`, для пропа `image`
  Layout, // 'fixed' | 'responsive' | 'fill' — проп `layout`
} from '@macrulez/vue-image-kit'

ImageStatus ​

ts
type ImageStatus = 'idle' | 'loading' | 'loaded' | 'error'

Конечный автомат переходит по порядку: idle → loading → loaded или idle → loading → error. Управляет рефом status в useImage().

SrcSet ​

ts
interface SrcSet {
  avif?: string // Опциональный URL версии AVIF
  webp?: string // Опциональный URL версии WebP
  fallback: string // Обязателен — используется как fallback <img src>
}

Форма, которую принимает проп src компонента VImage для переключения форматов WebP/AVIF.

VImageKitOptions ​

ts
interface VImageKitOptions {
  breakpoints?: BreakpointMap
  serverRoute?: string
}

Опции для app.use(VImageKitPlugin, options). breakpoints задаёт глобальные брейкпоинты для арт-дирекции; serverRoute устанавливает маршрут по умолчанию для loader="server" (см. useServerRoute()).

LazyImgOptions ​

ts
interface LazyImgOptions {
  src: string
  placeholder?: string
  rootMargin?: string
  threshold?: number
  onLoad?: () => void
  onError?: (e: Event) => void
}

Директива v-lazy-img принимает либо простую string (это src), либо объект LazyImgOptions.

Работа с типизированными опциями в v-lazy-img ​

ts
import type { LazyImgOptions } from '@macrulez/vue-image-kit'

const bgOptions: LazyImgOptions = {
  src: '/hero.jpg',
  placeholder: 'data:image/jpeg;base64,...',
  rootMargin: '100px',
  onLoad: () => analytics.track('hero_loaded'),
}
vue
<div v-lazy-img="bgOptions" class="hero" />

ObjectFit ​

ts
type ObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'

Проп fit у VImage — передаётся напрямую как значение CSS object-fit.

FocalPoint ​

ts
interface FocalPoint {
  x: number // 0–1
  y: number // 0–1
}

Проп focal у VImage — см. Фокальная точка.

Densities ​

ts
type Densities = number[] | Record<number, string>

Проп densities у VImage — см. Дескрипторы плотности.

ImageMeta ​

Форма записи манифеста CLI / импорта ?vik на этапе сборки — всё, что проп image компонента VImage может задать одновременно (src/width/height/blurhash/thumbhash/placeholder/sizes, плюс сокращения src{width} для каждой ширины). См. Импорты на этапе сборки.

Layout ​

ts
type Layout = 'fixed' | 'responsive' | 'fill'

Проп layout у VImage — см. Пресеты раскладки.

Утилиты ​

Чистые функции без зависимостей, экспортируемые из корня пакета — у большинства уже есть своя страница; это плоский индекс.

  • generateSrcset(src, widths), generateSizes(sizes?), generateDensitySrcset(src, densities), buildSizes(map, breakpoints) — см. srcset + sizes.
  • generatePreloadLink(href, options) — см. Ссылки preload.
  • decodeBlurhash(hash, width, height), decodeThumbHash(hash), thumbHashToAverageRGBA(hash), thumbHashToAverageColor(hash), encodeBlurhash(source, options?), encodeThumbHash(source, options?) — см. Плейсхолдеры.
  • isSaveDataEnabled() — см. Адаптация к сети.
  • buildImageUrl(src, options) — см. Самостоятельно размещаемый сервер по запросу.
  • pickSmallestSrcsetUrl(srcset) → string | undefined. Разбирает строку srcset и возвращает URL с наименьшим дескриптором w. Больше нигде не задокументирована — это единственное упоминание. Используется внутри пропа respectSaveData у VImage, чтобы понизиться до самого дешёвого доступного кандидата на соединении с экономией трафика (см. Адаптация к сети); доступна напрямую для собственного механизма понижения качества вне VImage.