@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Arrow/ArrowDesign.tsx

@@ -1,226 +0,0 @@
-import { h, nextTick, ref, type VNode, watch } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract,
-  isDomRuntime
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { Arrow } from './Arrow'
-
-import { ArrowDirection } from './basicTypes'
-import {
-  type ArrowPropsBasic
-} from './props'
-import {
-  type ArrowClasses,
-  type ArrowComponents,
-  type ArrowEmits,
-  type ArrowExpose,
-  type ArrowSlots
-} from './types'
-
-/**
- * ArrowDesign
- */
-export class ArrowDesign<
-  COMP extends ArrowComponents,
-  EXPOSE extends ArrowExpose,
-  CLASSES extends ArrowClasses,
-  P extends ArrowPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    ArrowEmits,
-    EXPOSE,
-    ArrowSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Arrow
-  protected readonly points = ref<string>('')
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   * @param ItemConstructor arrow item class/ класс элемента стрелки
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, ArrowEmits, P>,
-    ItemConstructor: typeof Arrow = Arrow
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new ItemConstructor(
-      this.props,
-      this.refs,
-      this.element,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    )
-
-    this.init()
-
-    watch([this.classes], () => {
-      nextTick().then(
-        () => requestAnimationFrame(() => {
-          this.points.value = this.getRePoints()
-        })
-      )
-    }, { immediate: true })
-  }
-
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  protected initExpose(): EXPOSE {
-    return {
-      update: this.item.position.update
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        mask: this.getSubClass('mask'),
-        arrow: this.getSubClass('arrow'),
-        arrowLine: this.getSubClass('arrowLine'),
-        arrowArea: this.getSubClass('arrowArea'),
-        border: this.getSubClass('border'),
-        borderHidden: this.getSubClass('borderHidden')
-        // :classes [!] System label / Системная метка
-      }
-    } as Partial<CLASSES>
-  }
-
-  /**
-   * Refinement of the received list of styles.
-   *
-   * Доработка полученного списка стилей.
-   */
-  protected initStyles(): ConstrStyles {
-    return {
-      ...this.item.styles.value
-    }
-  }
-
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  protected initRender(): VNode | undefined {
-    if (!isDomRuntime()) {
-      return undefined
-    }
-
-    const children: any[] = [
-      ...this.renderArrow()
-    ]
-
-    if (this.item.parent.isBorder.value) {
-      children.push(
-        ...this.renderBorder()
-      )
-    }
-
-    return h('div', {
-      ref: this.element,
-      class: this.classes?.value.main,
-      style: this.styles?.value,
-      ...AriaStaticInclude.hidden()
-    }, children)
-  }
-
-  /**
-   * Method for rendering an arrow.
-   *
-   * Метод для рендеринга стрелки.
-   */
-  protected renderArrow(): VNode[] {
-    return [
-      h(
-        'svg',
-        {
-          key: 'svg-arrow',
-          class: this.classes?.value.arrowArea
-        },
-        [
-          h(
-            'polygon',
-            {
-              key: 'arrow',
-              class: this.classes?.value.arrow,
-              points: this.points.value
-            }
-          ),
-          h(
-            'polyline',
-            {
-              key: 'arrow-line',
-              class: this.classes?.value.arrowLine,
-              points: this.points.value
-            }
-          )
-        ]
-      )
-    ]
-  }
-
-  /**
-   * Method for rendering a border.
-   *
-   * Метод для рендеринга границы.
-   */
-  protected renderBorder(): VNode[] {
-    return [
-      h('div', {
-        key: 'border',
-        class: this.classes?.value.border,
-        ...AriaStaticInclude.hidden()
-      })
-    ]
-  }
-
-  /**
-   * Gets the points for the arrow.
-   *
-   * Получает точки для стрелки.
-   */
-  protected readonly getRePoints = (): string => {
-    const width = this.item.elementItem.getWidth()
-    const height = this.item.elementItem.getHeight()
-
-    switch (this.item.direction.value) {
-      case ArrowDirection.BOTTOM:
-        return `0, 0 ${width / 2}, ${height} ${width}, 0`
-      case ArrowDirection.LEFT:
-        return `${width}, 0 0, ${height / 2} ${width}, ${height}`
-      case ArrowDirection.RIGHT:
-        return `0, 0 ${width}, ${height / 2} 0, ${height}`
-      default:
-        return `0, ${height} ${width / 2}, 0 ${width}, ${height}`
-    }
-  }
-}

package/src/constructors/Arrow/ArrowElement.ts

@@ -1,139 +0,0 @@
-import { type Ref } from 'vue'
-
-/**
- * Class for working with the arrow element.
- *
- * Класс для работы с элементом стрелки.
- */
-export class ArrowElement {
-  /**
-   * Constructor
-   * @param element input element/ элемент ввода
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly className: string
-  ) {
-  }
-
-  /**
-   * Checks that the element exists.
-   *
-   * Проверяет, что элемент существует.
-   */
-  is(): this is { element: Ref<HTMLElement> } {
-    return Boolean(this.element.value)
-  }
-
-  /**
-   * Gets the width of the arrow.
-   *
-   * Получает ширину стрелки.
-   */
-  getWidth() {
-    const size = this.getStyleArrowWidth()
-
-    if (size) {
-      return Number(
-        size.replace(/[^0-9]+/ig, '')
-      )
-    }
-
-    return 0
-  }
-
-  /**
-   * Gets the height of the arrow.
-   *
-   * Получает высоту стрелки.
-   */
-  getHeight() {
-    const size = this.getStyleArrowHeight()
-
-    if (size) {
-      return Number(
-        size.replace(/[^0-9]+/ig, '')
-      )
-    }
-
-    return 0
-  }
-
-  /**
-   * Gets the element's bounding rectangle.
-   *
-   * Получает ограничивающий прямоугольник элемента.
-   */
-  getRect(): DOMRect | undefined {
-    return this.element.value?.getBoundingClientRect()
-  }
-
-  /**
-   * Gets the bounding rectangle of the border element.
-   *
-   * Получает ограничивающий прямоугольник элемента границы.
-   */
-  getRectBorder(): DOMRect | undefined {
-    return this.element.value?.querySelector(`.${this.className}__border`)?.getBoundingClientRect() ?? undefined
-  }
-
-  /**
-   * Gets the bounding rectangle of the border element.
-   *
-   * Получает ограничивающий прямоугольник элемента границы.
-   */
-  getRectArrowLine(): DOMRect | undefined {
-    return this.element.value?.querySelector(`.${this.className}__arrowLine`)?.getBoundingClientRect() ?? undefined
-  }
-
-  /**
-   * Gets the name of the arrow width variable.
-   *
-   * Получает имя переменной ширины стрелки.
-   */
-  protected getNameArrowWidth(): string {
-    return `--${this.className}-arrowWidth`
-  }
-
-  /**
-   * Gets the name of the arrow height variable.
-   *
-   * Получает имя переменной высоты стрелки.
-   */
-  protected getNameArrowHeight(): string {
-    return `--${this.className}-arrowHeight`
-  }
-
-  /**
-   * Gets the width of the arrow from styles.
-   *
-   * Получает ширину стрелки из стилей.
-   */
-  protected getStyleArrowWidth(): string | undefined {
-    if (this.is()) {
-      return getComputedStyle(this.element.value)
-        .getPropertyValue(
-          this.getNameArrowWidth()
-        )
-    }
-
-    return undefined
-  }
-
-  /**
-   * Gets the size of the arrow from styles.
-   *
-   * Получает размер стрелки из стилей.
-   */
-  protected getStyleArrowHeight(): string | undefined {
-    if (this.is()) {
-      return getComputedStyle(this.element.value)
-        .getPropertyValue(
-          this.getNameArrowHeight()
-        )
-    }
-
-    return undefined
-  }
-}

package/src/constructors/Arrow/ArrowElementTarget.ts

@@ -1,72 +0,0 @@
-import { ref } from 'vue'
-import { isDomRuntime, isFilled, isString } from '@dxtmisha/functional'
-
-import type { ArrowProps } from './props'
-
-/**
- * Class for working with the target element.
- *
- * Класс для работы с целевым элементом.
- */
-export class ArrowElementTarget {
-  readonly element = ref<HTMLElement | undefined>()
-
-  /**
-   * Constructor
-   * @param props input properties/ входящие свойства
-   */
-  constructor(
-    protected readonly props: ArrowProps
-  ) {
-  }
-
-  /**
-   * Checks that the element exists.
-   *
-   * Проверяет, что элемент существует.
-   */
-  is(): boolean {
-    return this.element.value !== undefined
-  }
-
-  /**
-   * Gets the element's bounding rectangle.
-   *
-   * Получает ограничивающий прямоугольник элемента.
-   */
-  getRect(): DOMRect | undefined {
-    return this.element.value?.getBoundingClientRect()
-  }
-
-  /**
-   * Updates the target element.
-   *
-   * Обновляет целевой элемент.
-   */
-  update(): void {
-    this.element.value = this.initElement()
-  }
-
-  /**
-   * Initializes the target element.
-   *
-   * Инициализирует целевой элемент.
-   */
-  protected initElement(): HTMLElement | undefined {
-    const elementTarget = this.props.elementTarget
-
-    if (
-      this.props.position === 'auto'
-      && isFilled(elementTarget)
-      && isDomRuntime()
-    ) {
-      if (isString(elementTarget)) {
-        return document.querySelector<HTMLElement>(elementTarget) ?? undefined
-      }
-
-      return elementTarget
-    }
-
-    return undefined
-  }
-}

package/src/constructors/Arrow/ArrowEvent.ts

@@ -1,126 +0,0 @@
-import { nextTick, onMounted, onUnmounted, type Ref, type ToRefs, watch } from 'vue'
-import { EventItem, EventRef, isDomRuntime } from '@dxtmisha/functional'
-
-import { ArrowElementTarget } from './ArrowElementTarget'
-import { ArrowPosition } from './ArrowPosition'
-import { ArrowParent } from './ArrowParent'
-
-import type { ArrowProps } from './props'
-
-/**
- * Class for managing arrow events.
- *
- * Класс для управления событиями стрелки.
- */
-export class ArrowEvent {
-  protected eventItem?: EventRef<HTMLElement, any>
-  protected eventTarget?: EventRef<HTMLElement, any>
-  protected eventBody?: EventItem<any, any>
-
-  /**
-   * Constructor
-   * @param props input properties / входные свойства
-   * @param refs input properties as refs / входные свойства как ссылки
-   * @param element arrow element / элемент стрелки
-   * @param elementTarget target element / целевой элемент
-   * @param parent parent object / объект родителя
-   * @param position position object / объект позиции
-   */
-  constructor(
-    protected readonly props: ArrowProps,
-    protected readonly refs: ToRefs<ArrowProps>,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly elementTarget: ArrowElementTarget,
-    protected readonly parent: ArrowParent,
-    protected readonly position: ArrowPosition
-  ) {
-    if (isDomRuntime()) {
-      onMounted(async () => {
-        await nextTick()
-
-        watch(this.elementTarget.element, this.makeEvents)
-        watch([...Object.values(this.refs)], this.update, { immediate: true })
-      })
-
-      onUnmounted(() => {
-        this.stopEvents()
-      })
-    }
-  }
-
-  /**
-   * Update all reactive elements.
-   *
-   * Обновить все реактивные элементы.
-   */
-  readonly update = (): void => {
-    requestAnimationFrame(() => {
-      if (this.props.position === 'auto') {
-        this.elementTarget.update()
-      }
-
-      this.position.update()
-    })
-  }
-
-  /**
-   * Start events.
-   *
-   * Запустить события.
-   */
-  protected startEvents(): this {
-    this.eventItem?.start()
-    this.eventTarget?.start()
-    this.eventBody?.start()
-
-    return this
-  }
-
-  /**
-   * Stop events.
-   *
-   * Остановить события.
-   */
-  protected stopEvents(): this {
-    this.eventItem?.stop()
-    this.eventTarget?.stop()
-    this.eventBody?.stop()
-
-    return this
-  }
-
-  /**
-   * Initialize events.
-   *
-   * Инициализировать события.
-   */
-  protected initEvents(): this {
-    if (!this.eventItem) {
-      this.eventItem = new EventRef(this.element, undefined, 'resize', this.update)
-    }
-
-    if (!this.eventTarget) {
-      this.eventTarget = new EventRef(this.elementTarget.element, undefined, 'resize', this.update)
-    }
-
-    if (!this.eventBody) {
-      this.eventBody = new EventItem(window, ['scroll', 'resize'], this.update)
-    }
-
-    return this
-  }
-
-  /**
-   * Create events.
-   *
-   * Создать события.
-   */
-  protected makeEvents = (): void => {
-    if (this.elementTarget.is()) {
-      this.initEvents()
-        .startEvents()
-    } else {
-      this.stopEvents()
-    }
-  }
-}

package/src/constructors/Arrow/ArrowInclude.ts

@@ -1,85 +0,0 @@
-import { computed, type VNode } from 'vue'
-import {
-  type ConstrBind,
-  DesignComponents,
-  getRef,
-  type RefOrNormal,
-  toBinds
-} from '@dxtmisha/functional'
-
-import type { ArrowComponentInclude, ArrowPropsInclude } from './basicTypes'
-import type { ArrowProps } from './props'
-
-/**
- * ArrowInclude class provides functionality for conditionally rendering arrow components
- * within other components. It manages the logic for determining when to display arrow
- * and configures the appropriate properties.
- *
- * Класс ArrowInclude предоставляет функциональность для условного рендеринга компонентов
- * стрелки внутри других компонентов. Он управляет логикой определения необходимости
- * отображения стрелки и настраивает соответствующие свойства.
- */
-export class ArrowInclude<
-  Props extends ArrowPropsInclude = ArrowPropsInclude,
-  PropsExtra extends ConstrBind<ArrowProps> = ConstrBind<ArrowProps>
-> {
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param elementTarget target element or selector/ целевой элемент или селектор
-   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
-   * @param index index identifier/ идентификатор индекса
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<ArrowComponentInclude, Props>,
-    protected readonly elementTarget?: HTMLElement | string,
-    protected readonly extra?: RefOrNormal<PropsExtra>,
-    protected readonly index?: string
-  ) {
-  }
-
-  /**
-   * Checks whether arrow should be displayed/
-   * Проверяет, нужно ли отображать стрелку
-   */
-  readonly is = computed(() => Boolean(
-    this.props.arrowShow
-  ))
-
-  /** Computed bindings for the arrow/ Вычисляемые привязки для стрелки */
-  readonly binds = computed<PropsExtra>(() => {
-    return toBinds<PropsExtra>(
-      getRef(this.extra),
-      this.props.arrowAttrs,
-      {
-        class: `${this.className}__arrow`,
-        elementTarget: this.elementTarget
-      }
-    )
-  })
-
-  /**
-   * Render the Arrow component
-   *
-   * Рендер компонента стрелки
-   */
-  readonly render = (): VNode[] => {
-    if (
-      this.components
-      && this.is.value
-    ) {
-      return this.components.render(
-        'arrow',
-        this.binds.value,
-        undefined,
-        this.index
-      )
-    }
-
-    return []
-  }
-}