@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Image/ImageData.ts

@@ -78,6 +78,10 @@ export class ImageData {
         case ImageTypeValue.image:
         case ImageTypeValue.file:
           try {
+            if (this.props.lazy) {
+              return this.props.value
+            }
+
             return await ImageFile.createImage(image)
           } catch {
             console.error('ImageData.initImage: ', image)

package/src/constructors/Image/ImageDesign.tsx

@@ -1,4 +1,4 @@
-import { h, type VNode } from 'vue'
+import { computed, h, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
@@ -43,11 +43,13 @@ export class ImageDesign<
    * @param name class name/ название класса
    * @param props properties/ свойства
    * @param options list of additional parameters/ список дополнительных параметров
+   * @param ItemConstructor image item class/ класс элемента изображения
    */
   constructor(
     name: string,
     props: Readonly<P>,
-    options?: ConstrOptions<COMP, ImageEmits, P>
+    options?: ConstrOptions<COMP, ImageEmits, P>,
+    ItemConstructor: typeof Image = Image
   ) {
     super(
       name,
@@ -55,7 +57,7 @@ export class ImageDesign<
       options
     )
 
-    this.item = new Image(
+    this.item = new ItemConstructor(
       this.props,
       this.element,
       this.getName(),
@@ -107,29 +109,93 @@ export class ImageDesign<
    * Метод для рендеринга.
    */
   protected initRender(): VNode {
+    if (this.item.img.isPicture.value) {
+      return this.renderPicture()
+    }
+
+    if (this.item.img.is.value) {
+      return this.renderImg()
+    }
+
     return h(
       'span',
-      {
-        ...this.getAttrs(),
-        ref: this.element,
-        class: this.classes?.value.main,
-        style: this.styles?.value,
-        translate: 'no'
-      },
+      this.propsMain.value,
       this.renderValue()
     )
   }
 
+  /**
+   * Properties for the image tag.
+   *
+   * Свойства для тега image.
+   */
+  readonly propsImage = computed<any>(() => ({
+    ...this.getAttrs(),
+    ref: this.element,
+    key: 'image',
+    class: this.classes?.value.main
+  }))
+
+  /**
+   * Main properties.
+   *
+   * Основные свойства.
+   */
+  readonly propsMain = computed<any>(() => ({
+    ...this.propsImage.value,
+    ...this.item.binds.value,
+    style: this.styles?.value
+  }))
+
+  /**
+   * Rendering the picture tag.
+   *
+   * Рендеринг тега picture.
+   */
+  readonly renderPicture = (): VNode => {
+    const list = this.item.img.picture.value
+    const children: any[] = []
+
+    if (list) {
+      list.forEach(
+        item => children.push(h('source', item))
+      )
+    }
+
+    children.push(this.renderImgItem())
+
+    return h('picture', this.propsImage.value, children)
+  }
+
+  /**
+   * Rendering the img tag.
+   *
+   * Рендеринг тега img.
+   */
+  readonly renderImg = (): VNode => {
+    return h('span', this.propsImage.value, this.renderImgItem())
+  }
+
+  /**
+   * Rendering the img item.
+   *
+   * Рендеринг элемента img.
+   */
+  readonly renderImgItem = (): VNode => {
+    return h('img', this.item.img.binds.value)
+  }
+
   /**
    * Rendering the value for the component.
    *
    * Рендеринг значения для компонента.
    */
-  readonly renderValue = (): string | VNode[] | undefined => {
-    if (
-      this.item.type.item.value === ImageTypeValue.pdf
-    ) {
-      return [h('object', { data: this.item.data.image.value })]
+  readonly renderValue = (): string | VNode | undefined => {
+    if (this.item.type.item.value === ImageTypeValue.pdf) {
+      return h(
+        'object',
+        this.item.valueBinds.value
+      )
     }
 
     return this.item.text.value

package/src/constructors/Image/ImageFile.ts

@@ -1,5 +1,5 @@
 import type { ImageItem } from './basicTypes'
-import { isDomRuntime } from '@dxtmisha/functional'
+import { isDomRuntime, resizeImageByMax } from '@dxtmisha/functional'
 
 /**
  * Maximum size allowed without conversion.
@@ -118,18 +118,7 @@ export class ImageFile {
         || image.naturalWidth > maxSize
       )
     ) {
-      const is = image.naturalWidth >= image.naturalHeight
-      const canvas = document.createElement('canvas')?.getContext('2d')
-
-      if (canvas) {
-        canvas.canvas.width = is ? maxSize : (image.naturalWidth / image.naturalHeight * maxSize)
-        canvas.canvas.height = is ? (image.naturalHeight / image.naturalWidth * maxSize) : maxSize
-        canvas.drawImage(image, 0, 0, canvas.canvas.width, canvas.canvas.height)
-
-        return canvas.canvas.toDataURL()
-      } else {
-        return ''
-      }
+      return resizeImageByMax(image, maxSize) ?? ''
     } else {
       return image.src
     }

package/src/constructors/Image/ImageImg.ts

@@ -0,0 +1,218 @@
+import { computed, type Ref, ref, toRefs, type WatchHandle, watch } from 'vue'
+import { type ConstrBind, forEach, isArray, isNumber, useLazyItemByMarginRef } from '@dxtmisha/functional'
+
+import { ImageType } from './ImageType'
+import { ImagePosition } from './ImagePosition'
+import { ImageBackground } from './ImageBackground'
+
+import { type ImageAttrs, type ImagePictureList, ImageTypeValue } from './basicTypes'
+import type { ImageProps } from './props'
+
+/**
+ * A class for working with the img tag.
+ *
+ * Класс для работы с тегом img.
+ */
+export class ImageImg {
+  protected lazyInit = ref<boolean>(false)
+  protected lazyStatus?: WatchHandle
+
+  constructor(
+    protected readonly props: ImageProps,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly type: ImageType,
+    protected readonly position: ImagePosition,
+    protected readonly background: ImageBackground
+  ) {
+    const {
+      lazy,
+      preloadOffset
+    } = toRefs(props)
+
+    watch(
+      [lazy, preloadOffset, element],
+      () => {
+        if (
+          this.props.lazy
+          && this.element.value
+        ) {
+          this.makeLazy()
+        } else {
+          this.lazyInit.value = false
+          this.lazyStatus?.stop()
+          this.lazyStatus = undefined
+        }
+      },
+      { immediate: true }
+    )
+  }
+
+  /**
+   * Determines whether to use the img tag/ Определяет, использовать ли тег img
+   */
+  readonly is = computed<boolean>(() => {
+    return Boolean(this.props.tagImg)
+      && this.isType()
+  })
+
+  /**
+   * Determines whether lazy loading is enabled/ Определяет, включена ли ленивя загрузка
+   */
+  readonly isLazy = computed<boolean>(() => {
+    return Boolean(this.props.lazy) && !this.lazyInit.value
+  })
+
+  /**
+   * Determines whether to use the picture tag/ Определяет, использовать ли тег picture
+   */
+  readonly isPicture = computed(() => this.is.value && Boolean(this.props.picture))
+
+  /**
+   * Calculates all properties for binding to the element/
+   * Вычисляет все свойства для привязки к элементу
+   */
+  readonly binds = computed<ConstrBind<ImageAttrs>>(
+    () => {
+      const attrs: ConstrBind<any> = {
+        key: 'img'
+      }
+
+      if (this.is.value) {
+        attrs.src = this.background.imageSrc.value
+        attrs.alt = this.props.alt ?? ''
+        attrs.width = '100%'
+        attrs.height = '100%'
+        attrs.style = this.styles.value
+
+        if (this.props.lazy) {
+          attrs.loading = this.isLazy.value ? 'lazy' : 'auto'
+        }
+
+        if (this.props.srcset) {
+          attrs.srcset = this.getSrcset()
+        }
+      }
+
+      return attrs
+    }
+  )
+
+  /**
+   * Calculates the picture sources for different resolutions/
+   * Вычисляет источники picture для разных разрешений
+   */
+  readonly picture = computed<ImagePictureList | undefined>(() => {
+    if (!this.props.picture) {
+      return undefined
+    }
+
+    if (isArray(this.props.picture)) {
+      return this.props.picture
+    }
+
+    return forEach(
+      this.props.picture,
+      (value, media) => {
+        return {
+          key: media,
+          srcset: value,
+          media: `(width >= ${media})`
+        }
+      }
+    ) as ImagePictureList
+  })
+
+  /**
+   * Calculates styles for binding to the element.
+   *
+   * Вычисляет стили для привязки к элементу.
+   */
+  readonly styles = computed<Record<string, any>>(() => {
+    const styles: any = {
+      'object-position': `${this.position.x.value} ${this.position.y.value}`,
+      '--sys-transform-originX': this.position.x.value,
+      '--sys-transform-originY': this.position.y.value
+    }
+
+    if (this.isSize()) {
+      styles['--sys-transform-scale'] = this.getSize()
+    }
+
+    return styles
+  })
+
+  /**
+   * Checks if the type is file or image.
+   *
+   * Проверяет, является ли тип файлом или изображением.
+   */
+  protected isType(): boolean {
+    const type = this.type.item.value
+    return type === ImageTypeValue.file || type === ImageTypeValue.image
+  }
+
+  /**
+   * Checks if the size is contained or cover.
+   *
+   * Проверяет, является ли размер contain или cover.
+   */
+  protected isSize(): boolean {
+    const size = this.background.size.value
+
+    return Boolean(size && size.match('[% ]'))
+  }
+
+  /**
+   * Returns the value for the transform scale.
+   *
+   * Возвращает значение для свойства transform scale.
+   */
+  protected getSize() {
+    return this.background.size.value
+      ?.replace('auto', '')
+      ?.trim()
+  }
+
+  /**
+   * Returns the srcset attribute value.
+   *
+   * Возвращает значение атрибута srcset.
+   */
+  protected getSrcset(): string | undefined {
+    if (!this.props.srcset) {
+      return undefined
+    }
+
+    if (typeof this.props.srcset === 'string') {
+      return this.props.srcset
+    }
+
+    return Object.entries(this.props.srcset)
+      .map(([key, value]) => `${value} ${this.toSrcsetKey(key)}`)
+      .join(', ')
+  }
+
+  /**
+   * Converts the srcset key to a string.
+   *
+   * Преобразует ключ srcset в строку.
+   * @param key key/ ключ
+   */
+  protected toSrcsetKey(key: string | number): string {
+    return isNumber(key) ? `${key}w` : String(key)
+  }
+
+  /**
+   * Initializes lazy loading.
+   *
+   * Инициализирует ленивую загрузку.
+   */
+  protected makeLazy(): void {
+    const lazyStatus = useLazyItemByMarginRef(this.element, `${this.props.preloadOffset} 0px`)
+      .lazyItemStatus
+
+    this.lazyStatus = watch(lazyStatus, () => {
+      this.lazyInit.value = lazyStatus.value
+    }, { immediate: true })
+  }
+}

package/src/constructors/Image/ImagePdf.ts

@@ -1,4 +1,4 @@
-import { isString } from '@dxtmisha/functional'
+import { isDomRuntime, isString } from '@dxtmisha/functional'
 
 import { ImageFile } from './ImageFile'
 
@@ -21,7 +21,7 @@ export class ImagePdf {
       return Boolean(file.match(/\.pdf$/i))
     }
 
-    return Boolean(file.type.match(/\/pdf$/i))
+    return isDomRuntime() && Boolean(file.type.match(/\/pdf$/i))
   }
 
   /**

package/src/constructors/Image/basicTypes.ts

@@ -19,6 +19,7 @@ export enum ImageTypeValue {
 }
 
 export type ImageElement = HTMLElement | undefined
+export type ImageAttrs = Record<keyof HTMLImageElement, any>
 
 export type ImageCoordinatorItem
   = [number]
@@ -32,6 +33,10 @@ export type ImageSize<T = number> = {
   height: T
 }
 
+export type ImagePictureItem = Record<keyof HTMLSourceElement & 'key', any>
+export type ImagePictureList = ImagePictureItem[]
+export type ImagePicture = Record<string, string> | ImagePictureList
+
 /**
  * Parameters for the uploaded image or the one available by a direct link.
  *

package/src/constructors/Image/properties.json

@@ -1,17 +1,17 @@
-{
-  "color": {
-    "_type": "var"
-  },
-  "color-opacity": {
-    "_type": "var"
-  },
-  "~turn": {},
-  "~disabled": {},
-  "~hide": {},
-  "~adaptive": {},
-  "~size": {
-    "~auto": {},
-    "~contain": {},
-    "~cover": {}
-  }
-}
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~adaptive": {},
+  "~size": {
+    "~auto": {},
+    "~contain": {},
+    "~cover": {}
+  }
+}

package/src/constructors/Image/props.ts

@@ -1,10 +1,12 @@
+import type { ImagePicture } from './basicTypes'
+
 interface ImagePropsToken {
-  // :type [!] System label / Системная метка
-  turn?: boolean
-  disabled?: boolean
-  hide?: boolean
-  adaptive?: boolean
-  size?: 'auto' | 'contain' | 'cover'
+  // :type [!] System label / Системная метка
+  turn?: boolean
+  disabled?: boolean
+  hide?: boolean
+  adaptive?: boolean
+  size?: 'auto' | 'contain' | 'cover'
   // :type [!] System label / Системная метка
 }
 
@@ -42,6 +44,30 @@ export interface ImagePropsBasic {
   x?: string | number
   /** Y position/ Позиция по оси Y */
   y?: string | number
+
+  /**
+   * Use <img> tag instead of background image/
+   * Использовать тег <img> вместо фонового изображения
+   */
+  tagImg?: boolean
+  /**
+   * Image source set for different resolutions/
+   * Набор источников изображения для разных разрешений
+   */
+  srcset?: string | Record<string, string>
+  /**
+   * Picture sources for different resolutions using <picture> tag/
+   * Источники для разных разрешений с использованием тега <picture>
+   */
+  picture?: ImagePicture
+  /** Alt text/ Текст alt */
+  alt?: string
+  /** Lazy loading/ Ленивя загрузка */
+  lazy?: boolean
+  /** Preload offset/ Смещение для предзагрузки */
+  preloadOffset?: string
+  /** Image fetch priority (low, high, auto)/ Приоритет загрузки изображения (low, high, auto) */
+  fetchPriority?: HTMLImageElement['fetchPriority']
 }
 
 /**
@@ -59,8 +85,9 @@ export interface ImageProps extends ImagePropsBasic, ImagePropsToken {
  */
 export const defaultsImage = {
   adaptiveGroup: 'basic',
+  preloadOffset: '1024px',
   ...{
-    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/Image/style.scss

@@ -1,6 +1,10 @@
 @use "@dxtmisha/styles/properties" as ui;
 
 @mixin mixinImage {
+  @include ui.initByCustom('img.width', 100%);
+  @include ui.initByCustom('img.height', 100%);
+  @include ui.initByCustom('img.object.fit', cover);
+
   direction: ltr;
   @include ui.flexCenter;
   @include ui.absolute;
@@ -15,6 +19,29 @@
   transition-duration: ui.v('d.sys.transitionDuration.standard');
   transform: none;
 
+  @include ui.mediaPrefersReducedMotion {
+    transition-duration: 0ms;
+  }
+
+  img {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    margin: auto;
+
+    width: ui.v('??img.width');
+    height: ui.v('??img.height');
+    min-width: 100%;
+    min-height: 100%;
+
+    object-fit: ui.v('??img.object.fit');
+
+    --sys-transform-translateX: -50%;
+    --sys-transform-translateY: -50%;
+    @include ui.transformInit();
+    transform-origin: var(--sys-transform-originX) var(--sys-transform-originY);
+  }
+
   &--type {
     &--public {
       -webkit-mask-position: center;
@@ -49,7 +76,22 @@
     }
   }
 
+  &--size {
+    &--auto {
+      @include ui.initByCustom('img.object.fit', none);
+    }
+
+    &--contain {
+      @include ui.initByCustom('img.object.fit', contain);
+    }
+
+    &--cover {
+      @include ui.initByCustom('img.object.fit', cover);
+    }
+  }
+
   &--adaptive {
+    @include ui.initByCustom('img.height', auto);
     background-size: 100%;
   }
 

package/src/constructors/Image/types.ts

@@ -44,6 +44,6 @@ export interface ImageSlots {
  */
 export type ImageClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
   // :classes [!] System label / Системная метка
 }