@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Image/ImageFile.ts

@@ -1,126 +0,0 @@
-import type { ImageItem } from './basicTypes'
-import { isDomRuntime, resizeImageByMax } from '@dxtmisha/functional'
-
-/**
- * Maximum size allowed without conversion.
- *
- * Максимальный размер, допустимый без преобразования.
- */
-export const MAX_SIZE: number = 1280
-
-/**
- * Class for working with uploaded images.
- *
- * Класс для работы с загруженными изображениями.
- */
-export class ImageFile {
-  /**
-   * Checks if the file is an image.
-   *
-   * Проверяет, является ли файл изображением.
-   * @param file verified file/ проверяемый файл
-   */
-  static isImage(file: File): boolean {
-    return Boolean(file.type.match(/^image\//))
-  }
-
-  /**
-   * Creates an image based on a file or a link.
-   *
-   * Создает изображение на основе файла или ссылки.
-   * @param src file or link/ файл или ссылка
-   */
-  static createImage(src: string | File): Promise<ImageItem | undefined> {
-    return new Promise((resolve) => {
-      if (src) {
-        const image = new Image()
-
-        image.onerror = () => resolve(undefined)
-        image.onload = () => {
-          resolve({
-            image,
-            src: this.getSRC(image, src),
-            width: image.naturalWidth,
-            height: image.naturalHeight
-          })
-        }
-
-        (async () => {
-          image.src = src instanceof File ? await this.getFileResult(src) : src
-        })()
-      } else {
-        resolve(undefined)
-      }
-    })
-  }
-
-  /**
-   * Returns a link to the image.
-   *
-   * Возвращает ссылку на изображение.
-   * @param src file or link/ файл или ссылка
-   */
-  static async getPath(src: string | File): Promise<string> {
-    return this.createImage(src).then(item => item?.src ?? '')
-  }
-
-  /**
-   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
-   *
-   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
-   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
-   */
-  static getFileResult(file: File): Promise<string> {
-    return new Promise((resolve) => {
-      if (this.isImage(file)) {
-        this.getFileReader(file).then(result => resolve(result))
-      } else {
-        resolve('')
-      }
-    })
-  }
-
-  /**
-   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
-   *
-   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
-   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
-   */
-  static getFileReader(file: File): Promise<string> {
-    return new Promise((resolve) => {
-      const reader = new FileReader()
-      reader.onload = () => resolve(typeof reader.result === 'string' ? reader.result : '')
-      reader.readAsDataURL(file)
-    })
-  }
-
-  /**
-   * Image size adaptation. Checks if the image size is larger than maxSize, reduces it to maxSize.
-   *
-   * Адаптация размера изображения. Проверяет, если размер изображения больше maxSize, уменьшает его до maxSize.
-   * @param image image element/ элемент изображения
-   * @param src link to image/ ссылка на изображение
-   * @param maxSize maximum allowable image size/ максимальный допустимый размер изображения
-   */
-  protected static getSRC(
-    image: HTMLImageElement,
-    src?: string | File,
-    maxSize = MAX_SIZE as number
-  ): string {
-    if (
-      isDomRuntime()
-      && (
-        src instanceof File
-        || src === undefined
-      )
-      && (
-        image.naturalHeight > maxSize
-        || image.naturalWidth > maxSize
-      )
-    ) {
-      return resizeImageByMax(image, maxSize) ?? ''
-    } else {
-      return image.src
-    }
-  }
-}

package/src/constructors/Image/ImageImg.ts

@@ -1,218 +0,0 @@
-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/ImageInclude.ts

@@ -1,53 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { type ConstrEmit, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
-
-import type { ImageEventData, ImageComponentsInclude, ImageEmitsInclude, ImagePropsInclude } from './basicTypes'
-
-/**
- * Класс для подключения и работы с компонентом изображения.
- *
- * A class for connecting to and working with the image component.
- */
-export class ImageInclude {
-  /**
-   * Constructor for working with images.
-   *
-   * Конструктор для работы с изображениями.
-   * @param props input parameter/ входной параметр
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   * @param extra additional parameter/ дополнительный параметр
-   */
-  constructor(
-    protected readonly props: ImagePropsInclude,
-    protected readonly components?: DesignComponents<ImageComponentsInclude, ImagePropsInclude>,
-    protected readonly emits?: ConstrEmit<ImageEmitsInclude>,
-    protected readonly extra?: RefOrNormal<Record<string, any>>
-  ) {
-  }
-
-  /**
-   * Проверяет, есть ли изображение/ Checks if an image exists
-   */
-  readonly isImage = computed<boolean>(() => Boolean(this.props.image))
-
-  /**
-   * Возвращает данные для передачи компоненту/ Returns data to pass to the component
-   */
-  readonly bind = computed(() => getBind(this.props.image, getRef(this.extra), 'value'))
-
-  render(): VNode[] {
-    if (
-      this.components
-      && this.isImage.value
-    ) {
-      return this.components.render('image', this.bind.value)
-    }
-
-    return []
-  }
-
-  onLoad(event: ImageEventData) {
-    this.emits?.('load', event)
-  }
-}

package/src/constructors/Image/ImagePdf.ts

@@ -1,44 +0,0 @@
-import { isDomRuntime, isString } from '@dxtmisha/functional'
-
-import { ImageFile } from './ImageFile'
-
-const IMAGE_PDF_TOOL = '#toolbar=0&scrollbar=1'
-
-/**
- * Class for working with PDF files.
- *
- * Класс для работы с PDF-файлами.
- */
-export class ImagePdf {
-  /**
-   * Checks if the file is an image.
-   *
-   * Проверяет, является ли файл PDF.
-   * @param file verified file/ проверяемый файл
-   */
-  static isPdf(file: string | File): boolean {
-    if (isString(file)) {
-      return Boolean(file.match(/\.pdf$/i))
-    }
-
-    return isDomRuntime() && Boolean(file.type.match(/\/pdf$/i))
-  }
-
-  /**
-   * Applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer.
-   *
-   * Асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя.
-   * @param file the Blob or File from which to read/ Blob или File которые следует прочитать
-   */
-  static async get(file: string | File): Promise<string> {
-    if (isString(file)) {
-      return `${file}${IMAGE_PDF_TOOL}`
-    }
-
-    if (this.isPdf(file)) {
-      return `${(await ImageFile.getFileReader(file))}${IMAGE_PDF_TOOL}`
-    }
-
-    return ''
-  }
-}

package/src/constructors/Image/ImagePosition.ts

@@ -1,49 +0,0 @@
-import { computed } from 'vue'
-
-import { ImageCoordinator } from './ImageCoordinator'
-
-import type { ImageProps } from './props'
-
-/**
- * A class for obtaining data for the background-position property.
- *
- * Класс для получения данных для свойства background-position.
- */
-export class ImagePosition {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param coordinator coordinates for margins/ координаты для отступов
-   */
-  constructor(
-    protected readonly props: ImageProps,
-    protected readonly coordinator: ImageCoordinator
-  ) {
-  }
-
-  /**
-   * Returns the position on the left.
-   *
-   * Возвращает позицию слева.
-   */
-  readonly x = computed<string>(() => {
-    if (this.coordinator.is()) {
-      return `${this.coordinator.coordinator.value[3] + (this.coordinator.size.value.width / 2)}%`
-    }
-
-    return this.props.x?.toString() || 'center'
-  })
-
-  /**
-   * Returns the position on the top.
-   *
-   * Возвращает позицию сверху.
-   */
-  readonly y = computed<string>(() => {
-    if (this.coordinator.is()) {
-      return `${this.coordinator.coordinator.value[0] + (this.coordinator.size.value.height / 2)}%`
-    }
-
-    return this.props.y?.toString() || 'center'
-  })
-}

package/src/constructors/Image/ImageType.ts

@@ -1,83 +0,0 @@
-import { computed } from 'vue'
-import { GEO_FLAG_ICON_NAME, Icons, isFilled } from '@dxtmisha/functional'
-
-import { ImagePdf } from './ImagePdf'
-
-import { type ImageTypeItem, ImageTypeValue } from './basicTypes'
-import type { ImageProps } from './props'
-
-/**
- * Class for working with the image type.
- *
- * Класс для работы с типом изображения.
- */
-export class ImageType {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   */
-  constructor(
-    protected readonly props: ImageProps
-  ) {
-  }
-
-  /**
-   * Get the image type.
-   *
-   * Получения тип изображения.
-   */
-  readonly item = computed<ImageTypeItem>(() => {
-    const image = this.props.value
-
-    if (
-      image instanceof File
-      || isFilled(image)
-    ) {
-      if (ImagePdf.isPdf(image)) {
-        return ImageTypeValue.pdf
-      }
-
-      if (image instanceof File) {
-        return ImageTypeValue.file
-      }
-
-      if (image.match(/\//)) {
-        return ImageTypeValue.image
-      }
-
-      if (image.match(GEO_FLAG_ICON_NAME)) {
-        return ImageTypeValue.icon
-      }
-
-      if (image.match(/^#/)) {
-        return ImageTypeValue.color
-      }
-
-      if (image.match(/^@/)) {
-        return ImageTypeValue.public
-      }
-
-      if (image.match(/^\$/)) {
-        return ImageTypeValue.material
-      }
-
-      if (image.match(/^flag-[a-z]{2}$/)) {
-        return ImageTypeValue.flag
-      }
-
-      const sub = image.match(/^(outlined|round|sharp|material)-/)
-
-      if (sub) {
-        return sub[1] as ImageTypeItem
-      }
-
-      if (Icons.is(image)) {
-        return ImageTypeValue.public
-      }
-
-      return ImageTypeValue.outlined
-    }
-
-    return undefined
-  })
-}

package/src/constructors/Image/basicTypes.ts

@@ -1,75 +0,0 @@
-import type { ConstrBind, Undefined } from '@dxtmisha/functional'
-import type { ImageEmits } from './types'
-import type { ImagePropsBasic } from './props'
-
-export enum ImageTypeValue {
-  pdf = 'pdf',
-  file = 'file',
-  image = 'image',
-  flag = 'flag',
-  color = 'color',
-  public = 'public',
-  filled = 'filled',
-  outlined = 'outlined',
-  round = 'round',
-  sharp = 'sharp',
-  twoTone = 'two-tone',
-  material = 'material',
-  icon = 'icon'
-}
-
-export type ImageElement = HTMLElement | undefined
-export type ImageAttrs = Record<keyof HTMLImageElement, any>
-
-export type ImageCoordinatorItem
-  = [number]
-    | [number, number]
-    | [number, number, number]
-    | [number, number, number, number]
-    | Undefined
-
-export type ImageSize<T = number> = {
-  width: T
-  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.
- *
- * Параметры для загруженного изображения или доступного по прямой ссылке.
- */
-export type ImageItem
-  = ImageSize
-    & {
-      image: HTMLImageElement
-      src: string
-    }
-
-export type ImageTypeItem = ImageTypeValue | Undefined
-
-export type ImageEventItem = ImageItem | string | undefined
-export type ImageEventType = {
-  type: ImageTypeItem
-}
-export type ImageEventData
-  = ImageEventType
-    & {
-      image: ImageEventItem
-    }
-
-export type ImageValue<
-  Image extends ImagePropsBasic = ImagePropsBasic
-> = string | ConstrBind<Image> | null
-
-export type ImageComponentsInclude = {
-  image: object
-}
-export type ImageEmitsInclude = ImageEmits
-
-export interface ImagePropsInclude<Image extends ImagePropsBasic = ImagePropsBasic> {
-  image?: string | ConstrBind<Image>
-}

package/src/constructors/Image/index.ts

@@ -1,5 +0,0 @@
-export * from './Image'
-export * from './ImageDesign'
-export * from './basicTypes'
-export * from './props'
-export * from './types'

package/src/constructors/Image/properties.json

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