@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Arrow/ArrowParent.ts

@@ -1,100 +0,0 @@
-import { computed, type Ref, watch } from 'vue'
-import { isDomRuntime, toNumber } from '@dxtmisha/functional'
-import { ArrowElement } from './ArrowElement'
-
-/**
- * Class for working with the parent element.
- *
- * Класс для работы с родительским элементом.
- */
-export class ArrowParent {
-  /**
-   * Constructor
-   * @param element input element/ элемент ввода
-   * @param className class name/ название класса
-   * @param elementItem arrow element/ элемент стрелки
-   */
-  constructor(
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly className: string,
-    protected readonly elementItem: ArrowElement
-  ) {
-    if (isDomRuntime()) {
-      watch(element, this.make)
-    }
-  }
-
-  /** Checks if the parent element has a border/ Проверяет, есть ли у родительского элемента граница */
-  readonly isBorder = computed<boolean>(
-    () => this.borderWidth.value !== '0px'
-  )
-
-  /** Parent element/ Родительский элемент **/
-  readonly elementParent = computed<HTMLElement | undefined>(() => {
-    return this.element.value?.parentElement as HTMLElement | undefined
-  })
-
-  /** Background color of the parent element/ Цвет фона родительского элемента **/
-  readonly background = computed<string>(
-    () => this.getStyles()?.backgroundColor ?? 'transparent'
-  )
-
-  /** Border color of the parent element/ Цвет границы родительского элемента **/
-  readonly borderWidth = computed<string>(
-    () => this.getStyles()?.borderWidth ?? '0px'
-  )
-
-  /** Border color of the parent element/ Цвет границы родительского элемента **/
-  readonly borderColor = computed<string>(
-    () => this.getStyles()?.borderColor ?? 'transparent'
-  )
-
-  /** Border radius of the parent element/ Радиус границы родительского элемента **/
-  readonly borderRadius = computed<string>(
-    () => this.getStyles()?.borderRadius ?? '0px'
-  )
-
-  /**
-   * Get border width as number.
-   *
-   * Получить ширину границы в виде числа.
-   */
-  getBorderRadius(): number {
-    return toNumber(this.borderRadius.value)
-  }
-
-  /**
-   * Get computed styles of the parent element.
-   *
-   * Получить вычисленные стили родительского элемента.
-   */
-  protected getStyles() {
-    const parent = this.elementParent.value
-
-    if (parent) {
-      return getComputedStyle(parent)
-    }
-
-    return undefined
-  }
-
-  /**
-   * Method for creating styles for the parent element.
-   *
-   * Метод для создания стилей для родительского элемента.
-   */
-  protected readonly make = (): void => {
-    requestAnimationFrame(() => {
-      if (this.elementParent.value) {
-        const elementParent = this.elementParent.value
-
-        elementParent.classList.add(`${this.className}__parent`)
-        elementParent.style.setProperty(`--${this.className}-sys-height`, String(this.elementItem.getHeight()))
-
-        if (this.isBorder.value) {
-          elementParent.dataset.arrow = 'border'
-        }
-      }
-    })
-  }
-}

package/src/constructors/Arrow/ArrowPosition.ts

@@ -1,231 +0,0 @@
-import { ref } from 'vue'
-
-import { ArrowElement } from './ArrowElement'
-import { ArrowElementTarget } from './ArrowElementTarget'
-import { ArrowParent } from './ArrowParent'
-
-import { type ArrowBorder, ArrowDirection } from './basicTypes'
-import type { ArrowProps } from './props'
-
-/**
- * Class for calculating the position of the arrow element relative to the target element.
- *
- * Класс для вычисления позиции элемента стрелки относительно целевого элемента.
- */
-export class ArrowPosition {
-  /** Border between item and target elements / Граница между элементами item и target */
-  readonly border = ref<ArrowBorder>()
-
-  /** Direction of the arrow / Направление стрелки */
-  readonly direction = ref<ArrowDirection>()
-
-  /** Shift of the arrow / Смещение стрелки */
-  readonly shift = ref<string>()
-
-  /** Clip path for the arrow / Область обрезки для стрелки */
-  readonly clipPath = ref<string>()
-
-  /**
-   * Constructor
-   * @param props input properties / входные свойства
-   * @param elementItem arrow element / элемент стрелки
-   * @param elementTarget target element / целевой элемент
-   * @param parent parent element / родительский элемент
-   */
-  constructor(
-    protected readonly props: ArrowProps,
-    protected readonly elementItem: ArrowElement,
-    protected readonly elementTarget: ArrowElementTarget,
-    protected readonly parent: ArrowParent
-  ) {
-  }
-
-  /**
-   * Updates the position of the arrow.
-   *
-   * Обновляет позицию стрелки.
-   */
-  readonly update = (): void => {
-    this.border.value = this.initBorder()
-    this.direction.value = this.initDirection()
-    this.shift.value = this.initShift()
-
-    requestAnimationFrame(() => {
-      this.clipPath.value = this.initClipPath()
-    })
-  }
-
-  /**
-   * Checks if the arrow is in the X direction.
-   *
-   * Проверяет, находится ли стрелка в направлении X.
-   */
-  isX() {
-    return this.direction.value === ArrowDirection.TOP || this.direction.value === ArrowDirection.BOTTOM
-  }
-
-  /**
-   * Gets the minimum value for the arrow position.
-   *
-   * Получает минимальное значение для позиции стрелки.
-   */
-  protected getMinValue(): number {
-    return this.parent.getBorderRadius() + (this.elementItem.getWidth() / 2)
-  }
-
-  /**
-   * Initializes the border between the item and target elements.
-   *
-   * Инициализирует границу между элементами item и target.
-   */
-  protected initBorder(): ArrowBorder | undefined {
-    const elementItemRect = this.elementItem.getRect()
-    const elementTargetRect = this.elementTarget.getRect()
-
-    if (
-      elementItemRect
-      && elementTargetRect
-    ) {
-      return {
-        top: Math.max(elementItemRect.top, elementTargetRect.top),
-        bottom: Math.min(elementItemRect.bottom, elementTargetRect.bottom),
-        left: Math.max(elementItemRect.left, elementTargetRect.left),
-        right: Math.min(elementItemRect.right, elementTargetRect.right)
-      }
-    }
-
-    return undefined
-  }
-
-  /**
-   * Initializes the direction of the arrow.
-   *
-   * Инициализирует направление стрелки.
-   */
-  protected initDirection(): ArrowDirection | undefined {
-    if (this.props.position !== 'auto') {
-      return this.props.position as ArrowDirection
-    }
-
-    const elementItemRect = this.elementItem.getRect()
-    const elementTargetRect = this.elementTarget.getRect()
-
-    if (
-      this.border.value
-      && elementItemRect
-      && elementTargetRect
-    ) {
-      if (
-        elementTargetRect.top <= elementItemRect.top
-        && elementTargetRect.right > elementItemRect.left
-        && elementTargetRect.left < elementItemRect.right
-      ) {
-        return ArrowDirection.TOP
-      }
-
-      if (
-        elementTargetRect.bottom >= elementItemRect.bottom
-        && elementTargetRect.right > elementItemRect.left
-        && elementTargetRect.left < elementItemRect.right
-      ) {
-        return ArrowDirection.BOTTOM
-      }
-
-      if (
-        elementTargetRect.left <= elementItemRect.left
-        && elementTargetRect.bottom > elementItemRect.top
-        && elementTargetRect.top < elementItemRect.bottom
-      ) {
-        return ArrowDirection.LEFT
-      }
-
-      if (
-        elementTargetRect.right >= elementItemRect.right
-        && elementTargetRect.bottom > elementItemRect.top
-        && elementTargetRect.top < elementItemRect.bottom
-      ) {
-        return ArrowDirection.RIGHT
-      }
-    }
-
-    return undefined
-  }
-
-  /**
-   * Initializes the shift of the arrow.
-   *
-   * Инициализирует смещение стрелки.
-   */
-  protected initShift(): string | undefined {
-    const border = this.border.value
-    const elementItemRect = this.elementItem.getRect()
-
-    if (border && elementItemRect) {
-      const min = this.getMinValue()
-      let size: number
-
-      if (this.isX()) {
-        size = Math.min(elementItemRect.width - min, (border.left - elementItemRect.left) + ((border.right - border.left) / 2))
-      } else {
-        size = Math.min(elementItemRect.height - min, (border.top - elementItemRect.top) + ((border.bottom - border.top) / 2))
-      }
-
-      return `${Math.max(min, size)}px`
-    }
-
-    return undefined
-  }
-
-  /**
-   * Initializes the clip path for the arrow.
-   *
-   * Инициализирует область обрезки для стрелки.
-   */
-  protected initClipPath() {
-    const rect = this.elementItem.getRectBorder()
-    const rectArrow = this.elementItem.getRectArrowLine()
-
-    if (rect && rectArrow) {
-      const rectangleShow = `M0,0 L0,${rect.height} L${rect.width},${rect.height} L${rect.width},0 Z`
-      let startX: number
-      let startY: number
-      let endX: number
-      let endY: number
-
-      switch (this.direction.value) {
-        case ArrowDirection.TOP:
-          startX = rectArrow.left - rect.left
-          startY = 0
-          endX = startX + rectArrow.width
-          endY = rectArrow.height
-          break
-        case ArrowDirection.BOTTOM:
-          startX = rectArrow.left - rect.left
-          startY = rect.height - rectArrow.height
-          endX = startX + rectArrow.width
-          endY = rect.height
-          break
-        case ArrowDirection.LEFT:
-          startX = 0
-          startY = rectArrow.top - rect.top
-          endX = rectArrow.width
-          endY = startY + rectArrow.height
-          break
-        case ArrowDirection.RIGHT:
-          startX = rect.width - rectArrow.width
-          startY = rectArrow.top - rect.top
-          endX = rect.width
-          endY = startY + rectArrow.height
-          break
-        default:
-          return undefined
-      }
-
-      const rectangleHide = `M${startX},${startY} L${endX},${startY} L${endX},${endY} L${startX},${endY} Z`
-
-      return `path('${rectangleShow} ${rectangleHide}')`
-    }
-
-    return undefined
-  }
-}

package/src/constructors/Arrow/basicTypes.ts

@@ -1,50 +0,0 @@
-import type { ConstrBind } from '@dxtmisha/functional'
-import type { ArrowProps } from './props'
-
-/** Arrow direction enum / Направление стрелки перечисление */
-export enum ArrowDirection {
-  TOP = 'top',
-  BOTTOM = 'bottom',
-  LEFT = 'left',
-  RIGHT = 'right',
-  HIDE = 'hide'
-}
-
-export type ArrowBorder = {
-  top: number
-  bottom: number
-  left: number
-  right: number
-}
-
-export type ArrowCenter = {
-  x: number
-  y: number
-}
-
-/**
- * Component map for including the Arrow component/
- * Карта компонентов для подключения компонента Arrow
- */
-export type ArrowComponentInclude = {
-  arrow?: object
-}
-
-/**
- * Props used to include and configure the Arrow component/
- * Свойства для подключения и настройки компонента Arrow
- */
-export interface ArrowPropsInclude<
-  Arrow extends ArrowProps = ArrowProps
-> {
-  // Status
-  /** Show arrow/ Показать стрелку */
-  arrowShow?: boolean
-
-  /** Arrow position/ Позиция стрелки */
-  arrowPosition?: ArrowProps['position']
-
-  // Style
-  /** Additional attributes for Arrow component/ Дополнительные атрибуты для компонента Arrow */
-  arrowAttrs?: ConstrBind<Arrow>
-}

package/src/constructors/Arrow/index.ts

@@ -1,6 +0,0 @@
-export * from './Arrow'
-export * from './ArrowDesign'
-export * from './ArrowInclude'
-export * from './props'
-export * from './types'
-export * from './basicTypes'

package/src/constructors/Arrow/properties.json

@@ -1,23 +0,0 @@
-{
-  "arrowWidth": {
-    "_type": "var"
-  },
-  "arrowHeight": {
-    "_type": "var"
-  },
-  "#mask": {},
-  "#arrow": {},
-  "#arrowLine": {},
-  "#arrowArea": {},
-  "#border": {},
-  "#borderHidden": {},
-  "~position": {
-    "~auto": {},
-    "~top": {},
-    "~bottom": {},
-    "~left": {},
-    "~right": {},
-    "_default": "auto"
-  },
-  "~inverse": {}
-}

package/src/constructors/Arrow/props.ts

@@ -1,31 +0,0 @@
-interface ArrowPropsToken {
-  // :type [!] System label / Системная метка
-  position?: 'auto' | 'top' | 'bottom' | 'left' | 'right'
-  inverse?: boolean
-  // :type [!] System label / Системная метка
-}
-
-export interface ArrowPropsBasic {
-  elementTarget?: HTMLElement | string
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface ArrowProps extends ArrowPropsBasic, ArrowPropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsArrow = {
-  ...{
-    // :default [!] System label / Системная метка
-    position: 'auto'
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/Arrow/types.ts

@@ -1,54 +0,0 @@
-import type { ConstrClass } from '@dxtmisha/functional'
-
-/**
- * Interface for describing which components need to be connected for work.
- *
- * Интерфейс для описания, какие компоненты надо подключить для работы.
- */
-export type ArrowComponents = {
-  // componentName: object
-}
-
-/**
- * Type describing available events.
- *
- * Тип, описывающий доступные события.
- */
-export type ArrowEmits = {
-  // load: [value: string]
-}
-
-/**
- * Type describing available properties.
- *
- * Тип, описывающий доступные свойства.
- */
-export interface ArrowExpose {
-  update: () => void
-}
-
-/**
- * Type describing available slots.
- *
- * Тип, описывающий доступные слоты.
- */
-export interface ArrowSlots {
-  // default? (props: any): any
-}
-
-/**
- * Type describing subclasses.
- *
- * Тип, описывающий подклассы.
- */
-export type ArrowClasses = {
-  main: ConstrClass
-  // :classes [!] System label / Системная метка
-  mask: string
-  arrow: string
-  arrowLine: string
-  arrowArea: string
-  border: string
-  borderHidden: string
-  // :classes [!] System label / Системная метка
-}

package/src/constructors/Badge/Badge.ts

@@ -1,73 +0,0 @@
-import { computed, type Ref, type ToRefs } from 'vue'
-import { type ConstrEmit, DesignComp, isFilled } from '@dxtmisha/functional'
-
-import { LabelNumberInclude } from '../../classes/LabelNumberInclude'
-import { IconInclude } from '../Icon'
-
-import type { BadgeComponents, BadgeEmits, BadgeSlots } from './types'
-import type { BadgeProps } from './props'
-
-/**
- * The Badge class implements a badge constructor with icon support and auto-hide logic.
- *
- * Класс Badge реализует конструктор бейджа с поддержкой иконок и авто-скрытия.
- */
-export class Badge {
-  readonly label: LabelNumberInclude
-  readonly icon: IconInclude
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param element input element/ элемент ввода
-   * @param classDesign design name/ название дизайна
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: BadgeProps,
-    protected readonly refs: ToRefs<BadgeProps>,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<BadgeComponents, BadgeProps>,
-    protected readonly slots?: BadgeSlots,
-    protected readonly emits?: ConstrEmit<BadgeEmits>
-  ) {
-    this.label = new LabelNumberInclude(
-      props,
-      className,
-      undefined,
-      slots
-    )
-
-    this.icon = new IconInclude(
-      props,
-      className,
-      components
-    )
-  }
-
-  /**
-   * Computes if the badge should auto-hide when there is no dot, icon, or label.
-   *
-   * Вычисляет, должен ли бейдж автоматически скрываться, если нет точки, иконки и текста.
-   */
-  readonly autoHide = computed(
-    () => !this.props.dot
-      && !isFilled(this.icon.isIcon.value)
-      && !isFilled(this.label.is.value)
-  )
-
-  /**
-   * Classes for controlling badge visibility.
-   *
-   * Классы для управления видимостью бейджа.
-   */
-  readonly classes = computed(() => ({
-    [`${this.className}--hideAuto`]: this.autoHide.value
-  }))
-}

package/src/constructors/Badge/BadgeDesign.tsx

@@ -1,130 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { Badge } from './Badge'
-
-import {
-  type BadgePropsBasic
-} from './props'
-import {
-  type BadgeClasses,
-  type BadgeComponents,
-  type BadgeEmits,
-  type BadgeExpose,
-  type BadgeSlots
-} from './types'
-
-/**
- * BadgeDesign
- */
-export class BadgeDesign<
-  COMP extends BadgeComponents,
-  EXPOSE extends BadgeExpose,
-  CLASSES extends BadgeClasses,
-  P extends BadgePropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    BadgeEmits,
-    EXPOSE,
-    BadgeSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Badge
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, BadgeEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Badge(
-      this.props,
-      this.refs,
-      this.element,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    )
-
-    this.init()
-  }
-
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  protected initExpose(): EXPOSE {
-    return {} as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        label: this.getSubClass('label'),
-        icon: this.getSubClass('icon')
-        // :classes [!] System label / Системная метка
-      }
-    } as Partial<CLASSES>
-  }
-
-  /**
-   * Refinement of the received list of styles.
-   *
-   * Доработка полученного списка стилей.
-   */
-  protected initStyles(): ConstrStyles {
-    return {}
-  }
-
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  protected initRender(): VNode {
-    const children: any[] = []
-
-    if (!this.props.dot) {
-      children.push(
-        ...this.item.label.render(),
-        ...this.item.icon.renderIcon()
-      )
-    }
-
-    return h('span', {
-      ...this.getAttrs(),
-      ref: this.element,
-      class: this.classes?.value.main,
-      ...AriaStaticInclude.role('status'),
-      ...AriaStaticInclude.label(this.props.ariaLabel)
-    }, children)
-  }
-}