@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Icon/IconTrailingInclude.ts

@@ -1,106 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { type ConstrBind, DesignComponents, getBind, isFilled, type RefOrNormal, toBinds } from '@dxtmisha/functional'
-
-import { IconInclude } from './IconInclude'
-
-import type { IconComponentInclude, IconTrailingPropsInclude } from './basicTypes'
-import type { IconPropsBasic } from './props'
-
-/**
- * Class for simplified integration of the icon-handling component
- *
- * Класс для упрощённого внедрения компонента для работы с иконками
- */
-export class IconTrailingInclude<
-  Props extends IconTrailingPropsInclude = IconTrailingPropsInclude
-> extends IconInclude<Props> {
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param extra additional parameter/ дополнительный параметр
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<IconComponentInclude, Props>,
-    protected readonly extra?: RefOrNormal<ConstrBind<IconPropsBasic>>
-  ) {
-    super(
-      props,
-      className,
-      components,
-      extra,
-      computed(() => Boolean(!props.iconTrailing && !props.iconTrailingTurnOnly && props.iconTurn)),
-      computed(() => Boolean(!props.iconTrailing && !props.iconTrailingDirOnly && props.iconDir)),
-      true
-    )
-  }
-
-  /**
-   * Checks whether an icon is specified for rendering the component/
-   * Проверяет, указана ли иконка для отображения компонента
-   */
-  readonly isIconTrailing = computed<boolean>(() => Boolean(this.props.iconTrailing))
-
-  /**
-   * Checks if there is at least one icon/
-   * Проверяет, есть ли хотя бы одна иконка
-   */
-  readonly hasAtLeastOneIcon = computed<boolean>(() => Boolean(this.props.iconTrailing || this.props.icon))
-
-  /**
-   * list of properties for the secondary icon component/ список свойств для вторичного компонента иконки
-   */
-  readonly trailingBind = computed(() => getBind(
-    this.props.iconTrailing,
-    {
-      turn: this.props.iconTurn,
-      asPalette: this.props.iconPalette,
-      dir: this.props.iconDir,
-      end: true,
-      high: true,
-      ...toBinds(
-        this.getExtra(),
-        this.props.iconAttrs,
-        this.getClasses(this.props.iconAttrs?.class, 'trailing')
-      ),
-      ...this.getEventType('icon-trailing')
-    },
-    'icon'
-  ))
-
-  /**
-   * Render of the secondary icon component
-   *
-   * Рендер вторичного компонента иконки
-   */
-  readonly renderIconTrailing = (): VNode[] => {
-    if (
-      this.components
-      && isFilled(this.props.iconTrailing)
-    ) {
-      return this.components.render(
-        'icon',
-        this.trailingBind.value,
-        undefined,
-        'iconTrailing'
-      )
-    }
-
-    return []
-  }
-
-  /**
-   * Method for rendering all icons — first the main ones, then the additional icons
-   *
-   * Метод для рендеринга всех иконок — сначала основных, затем дополнительных
-   */
-  readonly render = (): VNode[] => {
-    return [
-      ...this.renderIcon(),
-      ...this.renderIconTrailing()
-    ]
-  }
-}

package/src/constructors/Icon/basicTypes.ts

@@ -1,50 +0,0 @@
-import type { ConstrBind, ConstrItem } from '@dxtmisha/functional'
-
-import type { IconPropsBasic } from './props'
-
-export type IconEventLoad = {
-  isActive: boolean
-  iconBind: ConstrItem | undefined
-  iconActiveBind: ConstrItem | undefined
-}
-
-export type IconValue<
-  Icon extends IconPropsBasic = IconPropsBasic
-> = string | ConstrBind<Icon> | null
-
-export type IconComponentInclude = {
-  icon?: object
-}
-
-export interface IconLitePropsInclude<
-  Icon extends IconPropsBasic = IconPropsBasic
-> {
-  // Values
-  icon?: IconValue<Icon>
-}
-
-export interface IconPropsInclude<
-  Icon extends IconPropsBasic = IconPropsBasic
-> extends IconLitePropsInclude<Icon> {
-  // Status
-  selected?: boolean
-  iconTurn?: boolean
-  iconHide?: boolean
-
-  // Style
-  iconDir?: boolean
-  iconPalette?: boolean
-  iconAttrs?: ConstrBind<Icon>
-}
-
-export interface IconTrailingPropsInclude<
-  Icon extends IconPropsBasic = IconPropsBasic
-> extends IconPropsInclude<Icon> {
-  // Values
-  iconTrailing?: IconValue<Icon>
-
-  // Style
-  iconTrailingTurnOnly?: boolean
-  iconTrailingDirOnly?: boolean
-  iconTrailingPalette?: boolean
-}

package/src/constructors/Icon/index.ts

@@ -1,8 +0,0 @@
-export * from './Icon'
-export * from './IconDesign'
-export * from './IconInclude'
-export * from './IconLiteInclude'
-export * from './IconTrailingInclude'
-export * from './basicTypes'
-export * from './props'
-export * from './types'

package/src/constructors/Icon/properties.json

@@ -1,25 +0,0 @@
-{
-  "width": {
-    "_type": "var"
-  },
-  "~turn": {},
-  "~disabled": {},
-  "~hide": {},
-  "~asPalette": {},
-  "~dir": {},
-  "~overlay": {},
-  "~dynamic": {},
-  "~start": {
-    "_category": "order"
-  },
-  "~end": {
-    "_category": "order"
-  },
-  "~high": {},
-  "~animation-type": {
-    "~type1": {},
-    "~type2": {},
-    "_default": "type1"
-  },
-  "~animation-show": {}
-}

package/src/constructors/Icon/props.ts

@@ -1,54 +0,0 @@
-import type { ImagePropsBasic, ImageValue } from '../Image'
-import type { SkeletonPropsInclude } from '../Skeleton'
-
-interface IconPropsToken {
-  // :type [!] System label / Системная метка
-  turn?: boolean
-  disabled?: boolean
-  hide?: boolean
-  asPalette?: boolean
-  dir?: boolean
-  overlay?: boolean
-  dynamic?: boolean
-  start?: boolean
-  end?: boolean
-  high?: boolean
-  animationType?: 'type1' | 'type2'
-  animationShow?: boolean
-  // :type [!] System label / Системная метка
-}
-
-export interface IconPropsBasic<
-  Image extends ImagePropsBasic = ImagePropsBasic
-> extends SkeletonPropsInclude {
-  // Status
-  /** Активное состояние иконки/ Active state of the icon */
-  active?: boolean
-
-  // Icon
-  /** Value of the main icon/ Значение основной иконки */
-  icon?: ImageValue<Image>
-  /** Value of the active icon/ Значение активной иконки */
-  iconActive?: ImageValue<Image>
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface IconProps extends IconPropsBasic, IconPropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsIcon = {
-  ...{
-    // :default [!] System label / Системная метка
-    animationType: 'type1'
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/Image/Image.ts

@@ -1,184 +0,0 @@
-import { computed, onUnmounted, type Ref, watch } from 'vue'
-import {
-  type ConstrClassObject,
-  type ConstrEmit,
-  type ConstrStyles,
-  isString
-} from '@dxtmisha/functional'
-
-import { ImageType } from './ImageType'
-import { ImageData } from './ImageData'
-
-import { ImageCoordinator } from './ImageCoordinator'
-import { ImagePosition } from './ImagePosition'
-import { ImageAdaptiveItem } from './ImageAdaptiveItem'
-import { ImageBackground } from './ImageBackground'
-
-import { ImageTypeValue } from './basicTypes'
-import type { ImageEmits } from './types'
-import type { ImageProps } from './props'
-
-/**
- * Base class for working with images and icons.
- *
- * Базовый класс для работы с изображениями и иконками.
- */
-export class Image {
-  readonly type: ImageType
-  readonly data: ImageData
-
-  readonly coordinator: ImageCoordinator
-  readonly position: ImagePosition
-  readonly adaptiveItem: ImageAdaptiveItem
-  readonly background: ImageBackground
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element input element/ элемент ввода
-   * @param className class name/ название класса
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: ImageProps,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly className: string,
-    protected readonly emits?: ConstrEmit<ImageEmits>
-  ) {
-    this.type = new ImageType(props)
-    this.data = new ImageData(props, this.type)
-
-    this.coordinator = new ImageCoordinator(props)
-    this.position = new ImagePosition(props, this.coordinator)
-
-    this.adaptiveItem = new ImageAdaptiveItem(
-      props,
-      this.data,
-      element
-    )
-
-    this.background = new ImageBackground(
-      props,
-      this.data,
-      this.coordinator,
-      this.adaptiveItem
-    )
-
-    if (emits) {
-      watch(this.data.image, (image) => {
-        emits('load', {
-          type: this.type.item.value,
-          image
-        })
-      })
-    }
-
-    onUnmounted(() => this.adaptiveItem.remove())
-  }
-
-  /**
-   * Values for the text. Text is used for the type of icon that works as a background.
-   *
-   * Значения для текста. Текст используется для типа иконки, который работает как фон.
-   */
-  readonly text = computed<string | undefined>(() => {
-    const type = this.type.item.value
-
-    if (type === ImageTypeValue.pdf) {
-      const image = this.data.image.value
-
-      if (isString(image)) {
-        return image
-      }
-    }
-
-    const value = this.props.value
-
-    if (
-      type
-      && isString(value)
-      && [
-        'filled',
-        'outlined',
-        'round',
-        'sharp',
-        'two-tone',
-        'material'
-      ].indexOf(type) !== -1
-    ) {
-      return value.replace(/^(filled|outlined|round|sharp|two-tone)-/, '')
-    }
-
-    return undefined
-  })
-
-  /**
-   * Values for the class.
-   *
-   * Значения для класса.
-   */
-  readonly classes = computed<ConstrClassObject>(() => {
-    const type = this.type.item.value
-    const data = {
-      [`${this.className}--type--${type}`]: type !== undefined,
-      [`${this.className}--background`]: this.background.isImage(),
-      notranslate: true
-    }
-
-    switch (type) {
-      case 'outlined':
-        data['material-symbols-outlined'] = true
-        break
-      case 'round':
-        data['material-symbols-rounded'] = true
-        break
-      case 'sharp':
-        data['material-symbols-sharp'] = true
-        break
-      case 'material':
-        data['material-icons'] = true
-        break
-    }
-
-    return data
-  })
-
-  /**
-   * Calculates all properties for the style of the element.
-   *
-   * Вычисляет все свойства для стиля элемента.
-   */
-  readonly styles = computed<ConstrStyles>(() => {
-    const value = this.props.value
-
-    if (value) {
-      switch (this.type.item.value) {
-        case ImageTypeValue.file:
-        case ImageTypeValue.image:
-          return {
-            'background-image': this.background.image.value,
-            'background-size': this.background.size.value,
-            'background-position-x': this.position.x.value,
-            'background-position-y': this.position.y.value
-          }
-        case ImageTypeValue.icon:
-          return {
-            'background-image': this.background.image.value
-          }
-        case ImageTypeValue.flag:
-          return {
-            'background-image': this.background.image.value,
-            'background-size': 'contain'
-          }
-        case ImageTypeValue.public:
-          return { 'mask-image': this.background.image.value }
-        case ImageTypeValue.color:
-          if (isString(value)) {
-            return { 'background-color': value }
-          }
-      }
-    }
-
-    return {} as ConstrStyles
-  })
-}

package/src/constructors/Image/ImageAdaptiveGroup.ts

@@ -1,230 +0,0 @@
-import { EventItem, forEach } from '@dxtmisha/functional'
-
-import { ImageAdaptiveItem } from './ImageAdaptiveItem'
-import { ImageCalculationList } from './ImageCalculationList'
-
-/**
- * Class for working with image scaling according to the physical size of the object in the image.
- *
- * Класс для работы с масштабированием изображения по физическому размеру объекта на изображении.
- */
-export class ImageAdaptiveGroup {
-  protected static objects: ImageAdaptiveItem[] = []
-  protected static objectsAdaptive: ImageAdaptiveItem[] = []
-
-  private static cache: string[] = []
-
-  protected static event?: EventItem<Window, Event, any>
-  protected static time?: boolean
-
-  /**
-   * Checks if an element is present in the list.
-   *
-   * Проверяет, присутствует ли элемент в списке.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static is(item: ImageAdaptiveItem): boolean {
-    return this.objects.findIndex(itemValue => itemValue === item) !== -1
-  }
-
-  /**
-   * Adding a new element for tracking.
-   *
-   * Добавление нового элемента для отслеживания.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static add(item: ImageAdaptiveItem): void {
-    if (!this.is(item)) {
-      this.objects.push(item)
-      this.make()
-    }
-  }
-
-  /**
-   * Removal of the element.
-   *
-   * Удаления элемента.
-   * @param item object for working with images/ объект для работы с изображениями
-   */
-  static remove(item: ImageAdaptiveItem): void {
-    const key = this.objects.findIndex(itemValue => itemValue === item)
-
-    if (key !== -1) {
-      this.objects.splice(key, 1)
-      this.cache = []
-    }
-
-    this.make()
-  }
-
-  /**
-   * Resets all cached data and rereads scaling for all elements.
-   *
-   * Обнуляет все кэшированные данные и перечитывает масштабирование для всех элементов.
-   */
-  static reset(): void {
-    this.cache = []
-    this.start()
-  }
-
-  /**
-   * Starts the calculation process or turns it off if there are no active elements in the list.
-   *
-   * Запускает процесс вычисления или отключает его, если в списке нет активных элементов.
-   */
-  static make(): void {
-    if (
-      this.event
-      && this.objects.length < 1
-    ) {
-      this.event.stop()
-      this.event = undefined
-    } else if (this.objects.length > 0) {
-      if (!this.event) {
-        this.event = new EventItem(window, ['scroll-sync'], () => this.start()).start()
-      }
-
-      if (!this.time) {
-        this.time = true
-        requestAnimationFrame(() => {
-          this.time = false
-          this.start()
-        })
-      }
-    }
-  }
-
-  /**
-   * Returns a list of elements that are visible or constantly being calculated.
-   *
-   * Возвращает список элементов, которые видны или постоянно вычисляются.
-   */
-  protected static getItemIdByVisible(): string[] {
-    return forEach(this.objectsAdaptive, item => item.getId())
-  }
-
-  /**
-   * Method for starting the calculation of scaling elements in the list.
-   *
-   * Метод для запуска вычисления масштабирования элементов в списке.
-   */
-  protected static start(): void {
-    if (this.isAdaptive()) {
-      this.makeAdaptive()
-
-      const visible = this.getItemIdByVisible()
-
-      if (this.isCache(visible)) {
-        this.cache = visible
-
-        this.makeSize()
-        this.makePercent()
-        this.makeFactorMax()
-      }
-    } else {
-      this.event?.stop()
-    }
-  }
-
-  /**
-   * Updates the list of elements available for calculation. These are the
-   * elements that are close to the border of the visible area.
-   *
-   * Обновляет список доступных для вычисления элементов. Это те элементы,
-   * которые близки к границе видимой области.
-   */
-  protected static makeAdaptive(): void {
-    this.objectsAdaptive = []
-    this.objects.forEach((item) => {
-      item.make()
-
-      if (item.isBeyond()) {
-        this.objectsAdaptive.push(item)
-      }
-    })
-  }
-
-  /**
-   * Calculates the dimensions of an element relative to the image size,
-   * the size of the element, and its physical location on the image.
-   *
-   * Вычисляет размеры элемента относительно размера изображения,
-   * размера элемента и его физического расположения на изображении.
-   */
-  protected static makeSize(): void {
-    ImageCalculationList.reset()
-
-    this.objectsAdaptive.forEach((item) => {
-      const element = item.element.value
-
-      if (element) {
-        ImageCalculationList.get(item.group.value)
-          .makeWidth(item.width.value)
-          .makeHeight(item.height.value)
-          .makeOffsetWidth(element.offsetWidth)
-          .makeOffsetHeight(element.offsetHeight)
-      }
-    })
-  }
-
-  /**
-   * Calculation of the basic scaling of an element without taking into account other elements.
-   *
-   * Вычисление базового масштабирования элемента без учета других элементов.
-   */
-  protected static makePercent(): void {
-    if (ImageCalculationList.isSize()) {
-      this.objectsAdaptive.forEach((item) => {
-        const element = item.element.value
-        const calculation = ImageCalculationList.get(item.group.value)
-
-        if (element) {
-          const width = calculation.getWidth()
-          const height = calculation.getHeight()
-
-          item.setPercent(
-            item.width.value * (width ? 1 / width : 0) * (calculation.getOffsetWidth() / element.offsetWidth),
-            item.height.value * (height ? 1 / height : 0) * (calculation.getOffsetHeight() / element.offsetHeight)
-          )
-        }
-      })
-    }
-  }
-
-  /**
-   * Calculation of the largest element to determine the base size.
-   * This parameter is used for scaling other elements,
-   * reducing them to the necessary proportion.
-   *
-   * Вычисление самого большого элемента для определения базового размера.
-   * Этот параметр используется для масштабирования других элементов,
-   * уменьшая их до нужной пропорции.
-   */
-  protected static makeFactorMax(): void {
-    if (ImageCalculationList.isSize()) {
-      this.objectsAdaptive.forEach((item) => {
-        ImageCalculationList.get(item.group.value)
-          .makeFactorMax(item.factor.value)
-      })
-    }
-  }
-
-  /**
-   * Checks if there is an active element at the moment.
-   *
-   * Проверяет, есть ли в текущий момент активный элемент.
-   */
-  private static isAdaptive(): boolean {
-    return Boolean(this.objects.find(item => item.is()))
-  }
-
-  /**
-   * Checks whether the composition of visible elements has changed.
-   *
-   * Проверяет, изменился ли состав видимых элементов.
-   * @param visible list of indices of visible elements/ список индексов видимых элементов
-   */
-  private static isCache(visible: string[]): boolean {
-    return this.cache.join('|') !== visible.join('|')
-  }
-}