@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Anchor/AnchorTo.ts

@@ -0,0 +1,46 @@
+import type { Ref } from 'vue'
+import { goScrollSmooth, toNumber } from '@dxtmisha/functional'
+
+import { AnchorHref } from './AnchorHref'
+import type { AnchorProps } from './props'
+
+/**
+ * Anchor scroll handler
+ *
+ * Обработчик прокрутки якоря
+ */
+export class AnchorTo {
+  /**
+   * Constructor
+   * @param props input data / входные данные
+   * @param element input element / элемент ввода
+   * @param href href handler / обработчик ссылки
+   */
+  constructor(
+    protected readonly props: AnchorProps,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly href: AnchorHref
+  ) {
+  }
+
+  /**
+   * Scroll to element
+   *
+   * Прокрутить к элементу
+   */
+  go() {
+    if (this.element.value) {
+      goScrollSmooth(
+        this.element.value,
+        {
+          behavior: this.props.behavior,
+          block: this.props.block,
+          inline: this.props.inline
+        },
+        toNumber(this.props.shift)
+      )
+
+      history.replaceState({}, '', this.href.get())
+    }
+  }
+}

package/src/constructors/Anchor/basicTypes.ts

@@ -0,0 +1,9 @@
+import type { NumberOrString } from '@dxtmisha/functional'
+
+/** Anchor scroll properties/ Свойства прокрутки якоря */
+export interface AnchorScrollProps {
+  shift?: NumberOrString
+  behavior?: ScrollIntoViewOptions['behavior']
+  block?: ScrollIntoViewOptions['block']
+  inline?: ScrollIntoViewOptions['inline']
+}

package/src/constructors/Anchor/index.ts

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

package/src/constructors/Anchor/properties.json

@@ -0,0 +1,3 @@
+{
+  "#label": {}
+}

package/src/constructors/Anchor/props.ts

@@ -0,0 +1,54 @@
+import type { TooltipProps, TooltipPropsInclude } from '../Tooltip'
+
+import type { LabelProps } from '../../types/labelTypes'
+import type { TextCopiedClipboardPropsInclude } from '../../types/textTypes'
+import type { AnchorScrollProps } from './basicTypes'
+
+interface AnchorPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface AnchorPropsBasic<
+  Tooltip extends TooltipProps = TooltipProps
+> extends LabelProps,
+  TooltipPropsInclude<Tooltip>,
+  TextCopiedClipboardPropsInclude,
+  AnchorScrollProps {
+  // Status
+  hide?: boolean
+
+  // Value
+  name?: string
+
+  // Style
+  isCopy?: boolean
+
+  iconLink?: string
+  iconTag?: string
+  iconContentCopy?: string
+
+  delayHide?: number
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface AnchorProps extends AnchorPropsBasic, AnchorPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsAnchor = {
+  shift: 64,
+  delayHide: 3_072,
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Anchor/style.scss

@@ -0,0 +1,10 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinAnchor {
+  display: inline-flex;
+
+  color: inherit;
+  text-decoration: none;
+
+  cursor: pointer;
+}

package/src/constructors/Anchor/types.ts

@@ -0,0 +1,47 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { TooltipComponentInclude } from '../Tooltip'
+import type { LabelExpose, LabelSlots } from '../../types/labelTypes'
+import type { IconComponentInclude } from '../Icon'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type AnchorComponents = TooltipComponentInclude
+  & IconComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type AnchorEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface AnchorExpose extends LabelExpose {
+  go(): void
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface AnchorSlots extends LabelSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type AnchorClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Arrow/Arrow.ts

@@ -0,0 +1,134 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import {
+  type ConstrClassObject,
+  type ConstrEmit,
+  type ConstrStyles,
+  DesignComp,
+  isFilled
+} from '@dxtmisha/functional'
+
+import { ArrowElement } from './ArrowElement'
+import { ArrowElementTarget } from './ArrowElementTarget'
+import { ArrowParent } from './ArrowParent'
+import { ArrowPosition } from './ArrowPosition'
+import { ArrowEvent } from './ArrowEvent'
+
+import { ArrowDirection } from './basicTypes'
+import type { ArrowComponents, ArrowEmits, ArrowSlots } from './types'
+import type { ArrowProps } from './props'
+
+/**
+ * Arrow
+ */
+export class Arrow {
+  readonly elementItem: ArrowElement
+  readonly elementTarget: ArrowElementTarget
+  readonly parent: ArrowParent
+  readonly position: ArrowPosition
+  readonly event: ArrowEvent
+
+  /**
+   * 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/ функция вызывается, когда срабатывает событие
+   * @param ArrowElementConstructor class for working with the arrow element/ класс для работы с элементом стрелки
+   * @param ArrowElementTargetConstructor class for working with the target element of the arrow/ класс для работы с целевым элементом стрелки
+   * @param ArrowParentConstructor class for working with the parent element of the arrow/ класс для работы с родительским элементом стрелки
+   * @param ArrowPositionConstructor class for working with the position of the arrow/ класс для работы с позицией стрелки
+   * @param ArrowEventConstructor class for working with arrow events/ класс для работы с событиями стрелки
+   */
+  constructor(
+    protected readonly props: ArrowProps,
+    protected readonly refs: ToRefs<ArrowProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ArrowComponents, ArrowProps>,
+    protected readonly slots?: ArrowSlots,
+    protected readonly emits?: ConstrEmit<ArrowEmits>,
+    protected readonly ArrowElementConstructor: typeof ArrowElement = ArrowElement,
+    protected readonly ArrowElementTargetConstructor: typeof ArrowElementTarget = ArrowElementTarget,
+    protected readonly ArrowParentConstructor: typeof ArrowParent = ArrowParent,
+    protected readonly ArrowPositionConstructor: typeof ArrowPosition = ArrowPosition,
+    protected readonly ArrowEventConstructor: typeof ArrowEvent = ArrowEvent
+  ) {
+    this.elementItem = new ArrowElementConstructor(
+      this.element,
+      this.className
+    )
+    this.elementTarget = new ArrowElementTargetConstructor(this.props)
+    this.parent = new ArrowParentConstructor(
+      this.element,
+      this.className,
+      this.elementItem
+    )
+
+    this.position = new ArrowPositionConstructor(
+      this.props,
+      this.elementItem,
+      this.elementTarget,
+      this.parent
+    )
+
+    this.event = new ArrowEventConstructor(
+      this.props,
+      this.refs,
+      this.element,
+      this.elementTarget,
+      this.parent,
+      this.position
+    )
+  }
+
+  /** Direction of the arrow/ Направление стрелки */
+  readonly direction = computed<ArrowDirection>(() => {
+    if (isFilled(this.props.position)) {
+      const directionPosition = this.position.direction.value
+
+      if (directionPosition) {
+        return directionPosition
+      }
+    }
+
+    return ArrowDirection.HIDE
+  })
+
+  /** Classes for the component/ Классы для компонента */
+  readonly classes = computed<ConstrClassObject>(() => {
+    return {
+      [`${this.className}--direction--${this.direction.value}`]: Boolean(this.direction.value)
+    }
+  })
+
+  /** Styles for the component/ Стили для компонента */
+  readonly styles = computed<ConstrStyles>(() => {
+    const styles = {
+      [`--${this.className}-sys-background`]: this.parent.background.value,
+      [`--${this.className}-sys-borderWidth`]: this.parent.borderWidth.value,
+      [`--${this.className}-sys-borderColor`]: this.parent.borderColor.value,
+      [`--${this.className}-sys-borderRadius`]: this.parent.borderRadius.value
+    }
+
+    if (
+      this.parent.isBorder.value
+      && this.position.clipPath.value
+    ) {
+      styles[`--${this.className}-sys-clipPath`] = this.position.clipPath.value
+    }
+
+    if (
+      this.elementTarget.is()
+      && this.position.shift.value
+    ) {
+      styles[`--${this.className}-sys-shift`] = this.position.shift.value
+    }
+
+    return styles
+  })
+}

package/src/constructors/Arrow/ArrowDesign.tsx

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

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