@dxtmisha/constructor 0.23.0

package/src/constructors/Icon/props.ts

@@ -0,0 +1,54 @@
+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/Icon/style.scss

@@ -0,0 +1,106 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinIcon {
+  $clipPath: clip-path #{ui.v('d.sys.transitionDuration.fade.enter')} #{ui.v('d.sys.transitionFunction.deceleration')};
+  $margin: margin #{ui.v('d.ref.transitionDuration.1')} linear;
+  $background: background #{ui.v('d.sys.transitionDuration.standard')} linear;
+  $opacity: opacity #{ui.v('d.sys.transitionDuration.standard')} linear;
+  $transform: transform #{ui.v('d.sys.transitionDuration.standard')} linear;
+
+  @include ui.initByCustom('_factor', ui.v('??factor', 1.5));
+  @include ui.initByCustom('_width', ui.v('??width', #{calc(var(--sys-font-size, 16px) * #{ui.v('??_factor')})}));
+
+  display: inline-flex;
+  overflow: visible;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+
+  @include ui.squared(#{ui.v('??_width')});
+  min-width: ui.v('??_width');
+
+  @include ui.textSelectNone;
+
+  border-radius: ui.v('??rounded', inherit);
+
+  transition-property: clip-path, margin, opacity, transform;
+  transition-duration: ui.v('d.sys.transitionDuration.standard');
+
+  @include ui.disabled {
+    cursor: default;
+  }
+
+  &--hide {
+    opacity: 0;
+    transform: scale(.8);
+  }
+
+  &--asPalette {
+    @include ui.colorAsPalette;
+  }
+
+  &--dir {
+    transform: scaleX(#{var(--d-dir)});
+  }
+
+  &--overlay {
+    @include ui.backgroundColor(ui.v('??sys.color', var(--sys-color)));
+  }
+
+  &--dynamic {
+    @include ui.gradient(ui.v('??sys.color', var(--sys-color)), 0);
+    cursor: pointer;
+  }
+
+  &--start {
+    order: 1;
+  }
+
+  &--end {
+    order: 99999;
+  }
+
+  &--high {
+    z-index: 16;
+  }
+
+  &--animationType {
+    &--type2 {
+      clip-path: inset(0 0 0 0);
+
+      transition: #{$clipPath}, #{$margin}, #{$background}, #{$opacity}, #{$transform};
+
+      @include ui.state('hide') {
+        clip-path: inset(0 100% 0 0);
+        margin: 0 calc(#{ui.v('??_width')} * -1) 0 0 !important;
+        opacity: 1;
+
+        transition-duration: ui.v('d.sys.transitionDuration.fade.exit');
+        transition-timing-function: linear;
+        transform: none;
+      }
+    }
+  }
+
+  &--animationShow {
+    animation-name: ui.n('??show');
+    animation-duration: ui.v('d.sys.transitionDuration.standard');
+  }
+
+  @keyframes #{ui.n('??show')} {
+    0% {
+      opacity: 0;
+      transform: scale(.6);
+    }
+    20% {
+      transform: scale(.6);
+    }
+    60% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+      transform: none;
+    }
+  }
+}

package/src/constructors/Icon/types.ts

@@ -0,0 +1,46 @@
+import type { ComputedRef } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { ImageComponentsInclude, ImageEmitsInclude } from '../Image'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type IconComponents = ImageComponentsInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type IconEmits = ImageEmitsInclude
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface IconExpose {
+  isActive: ComputedRef<boolean>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface IconSlots {
+  default? (props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type IconClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Image/Image.ts

@@ -0,0 +1,184 @@
+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

@@ -0,0 +1,230 @@
+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('|')
+  }
+}