@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Tooltip/TooltipEvent.ts

@@ -1,103 +0,0 @@
-import { TooltipOpen } from './TooltipOpen'
-import { TooltipStatus } from './TooltipStatus'
-import { TooltipClasses } from './TooltipClasses'
-import { TooltipStyle } from './TooltipStyle.ts'
-
-/**
- * Class for working with events.
- *
- * Класс для работы с событиями.
- */
-export class TooltipEvent {
-  protected next: boolean = false
-  protected timeout?: any
-
-  /**
-   * Constructor
-   * @param classes object for working with the class/ объект для работы с классом
-   * @param style object for working with styles/ объект для работы со стилями
-   * @param status object for working with statuses/ объект для работы со статусами
-   * @param open data opening management/ управление открытием данных
-   */
-  constructor(
-    protected readonly classes: TooltipClasses,
-    protected readonly style: TooltipStyle,
-    protected readonly status: TooltipStatus,
-    protected readonly open: TooltipOpen
-  ) {
-  }
-
-  /**
-   * Events on clicking an element in a mobile application.
-   *
-   * События при клике на элементе в мобильном приложении.
-   */
-  readonly onClick = () => {
-    requestAnimationFrame(async () => {
-      if (!this.next) {
-        clearTimeout(this.timeout)
-        await this.open.toggle(!this.status.open.value, true)
-        this.next = false
-      }
-    })
-  }
-
-  /**
-   * Element management events on receiving focus.
-   *
-   * События управления элементом при получении фокуса.
-   * @param target selected element/ выбранный элемент
-   */
-  readonly onMouseover = ({ target }: MouseEvent): void => {
-    clearTimeout(this.timeout)
-    this.next = true
-
-    requestAnimationFrame(async () => {
-      await this.open.toggle(
-        Boolean(this.classes.findControlByTarget(target as HTMLDivElement))
-      )
-
-      this.timeout = setTimeout(() => {
-        this.next = false
-      }, 640)
-    })
-  }
-
-  /**
-   * Element management events on receiving focus on the tooltip itself.
-   *
-   * События управления элементом при получении фокуса на самом тултипе.
-   */
-  readonly onMouseoverTooltip = (): void => {
-    this.open.noHide()
-  }
-
-  /**
-   * Element management events on losing focus.
-   *
-   * События управления элементом при потере фокуса.
-   * @param relatedTarget selected element/ выбранный элемент
-   */
-  readonly onMouseout = ({ relatedTarget }: MouseEvent): void => {
-    if (relatedTarget) {
-      this.open.toggle(
-        Boolean(this.classes.findControlByTarget(relatedTarget as HTMLDivElement))
-      ).then()
-    }
-  }
-
-  /**
-   * Event of the end of the transition.
-   *
-   * Событие окончания трансформации.
-   * @param event event data/ данные события
-   */
-  readonly onTransitionend = (event: TransitionEvent): void => {
-    if (
-      event.propertyName === 'transform'
-      && this.status.open.value
-    ) {
-      this.style.setMove(true)
-    }
-  }
-}

package/src/constructors/Tooltip/TooltipInclude.ts

@@ -1,114 +0,0 @@
-import { computed, ref, type VNode } from 'vue'
-import {
-  type ConstrBind,
-  DesignComponents,
-  getRef,
-  type RefOrNormal,
-  toBinds
-} from '@dxtmisha/functional'
-
-import type { TooltipComponentInclude, TooltipPropsInclude } from './basicTypes'
-import type { TooltipExpose, TooltipSlots } from './types'
-import type { TooltipProps } from './props'
-
-/**
- * TooltipInclude class provides functionality for conditionally rendering tooltip components
- * within other components. It manages the logic for determining when to display tooltip
- * and configures the appropriate properties.
- *
- * Класс TooltipInclude предоставляет функциональность для условного рендеринга компонентов
- * подсказки внутри других компонентов. Он управляет логикой определения необходимости
- * отображения подсказки и настраивает соответствующие свойства.
- */
-export class TooltipInclude<
-  Props extends TooltipPropsInclude = TooltipPropsInclude,
-  PropsExtra extends ConstrBind<TooltipProps> = ConstrBind<TooltipProps>
-> {
-  readonly element = ref<TooltipExpose>()
-
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @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<TooltipComponentInclude, Props>,
-    protected readonly extra?: RefOrNormal<PropsExtra>,
-    protected readonly index?: string
-  ) {
-  }
-
-  /** Computed bindings for the tooltip/ Вычисляемые привязки для подсказки */
-  readonly binds = computed<PropsExtra>(() => {
-    return toBinds<PropsExtra>(
-      getRef(this.extra),
-      this.props.tooltipAttrs,
-      {
-        ref: this.element,
-        class: `${this.className}__tooltip`
-      }
-    )
-  })
-
-  /**
-   * Render the Tooltip component
-   *
-   * Рендер компонента подсказки
-   */
-  readonly render = (
-    slotsChildren: TooltipSlots
-  ): VNode[] => {
-    if (this.components) {
-      return this.components.render(
-        'tooltip',
-        this.binds.value,
-        slotsChildren as unknown as Record<string, any>,
-        this.index
-      )
-    }
-
-    return []
-  }
-
-  /**
-   * Get the tooltip element.
-   *
-   * Получить элемент подсказки.
-   */
-  getElement(): TooltipExpose | undefined {
-    return this.element.value
-  }
-
-  /**
-   * Open the tooltip.
-   *
-   * Открыть подсказку.
-   */
-  open() {
-    this.toggle(true)
-  }
-
-  /**
-   * Close the tooltip.
-   *
-   * Закрыть подсказку.
-   */
-  close() {
-    this.toggle(false)
-  }
-
-  /**
-   * Toggle the tooltip.
-   *
-   * Переключить подсказку.
-   * @param open open status/ статус открытия
-   */
-  toggle(open: boolean): void {
-    this.getElement()?.toggle(open)
-  }
-}

package/src/constructors/Tooltip/TooltipOpen.ts

@@ -1,128 +0,0 @@
-import { nextTick, type ToRefs, watch } from 'vue'
-import { type ConstrEmit, EventItem } from '@dxtmisha/functional'
-
-import { TooltipStyle } from './TooltipStyle'
-import { TooltipStatus } from './TooltipStatus'
-import { TooltipPosition } from './TooltipPosition'
-
-import type { TooltipProps } from './props'
-import type { TooltipEmits } from './types.ts'
-
-/**
- * Class for managing the status of an open window.
- *
- * Класс для управления статусом открытого окна.
- */
-export class TooltipOpen {
-  protected timeout?: any
-  protected timeoutHide?: any
-  protected timeoutTo?: any
-
-  protected readonly event: EventItem<Window, Event, any>
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param style object for working with styles/ объект для работы со стилями
-   * @param status object for working with statuses/ объект для работы со статусами
-   * @param position object for working with the position of the element/ объект для работы с положением элемента
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: Readonly<TooltipProps>,
-    refs: ToRefs<TooltipProps>,
-    protected readonly style: TooltipStyle,
-    protected readonly status: TooltipStatus,
-    protected readonly position: TooltipPosition,
-    protected readonly emits?: ConstrEmit<TooltipEmits>
-  ) {
-    this.event = new EventItem(window, ['scroll-sync'], this.onScroll)
-
-    watch([refs.open], () => {
-      this.toggle(Boolean(this.props.open)).then()
-    }, { immediate: this.props.open })
-  }
-
-  /**
-   * Element display management.
-   *
-   * Управление отображением элемента.
-   * @param open display status/ статус отображения
-   * @param flesh immediate display without delay/ мгновенное отображение без задержки
-   */
-  readonly toggle = async (
-    open: boolean,
-    flesh?: boolean
-  ) => {
-    if (
-      this.status.isText.value
-      && !this.status.isMatch(open)
-    ) {
-      clearTimeout(this.timeout)
-      clearTimeout(this.timeoutHide)
-
-      if (open) {
-        this.status.setOpen(open)
-        this.status.setShow(true)
-
-        await nextTick()
-        this.position.update()
-        this.status.setPreparation(true)
-        await nextTick()
-
-        requestAnimationFrame(() => {
-          this.timeout = setTimeout(() => {
-            this.style.setPreparation(true)
-            requestAnimationFrame(() => {
-              this.style.setShow(true)
-              this.event.start()
-              this.emits?.('tooltip', true)
-
-              if (this.props.delayHide) {
-                this.timeoutHide = setTimeout(() => this.toggle(false), Number(this.props.delayHide))
-              }
-            })
-          }, flesh ? 48 : this.props.delay)
-        })
-      } else {
-        this.timeoutTo = setTimeout(() => {
-          this.status.setOpen(open)
-          this.style.resetShow()
-          this.event.stop()
-
-          this.timeout = setTimeout(() => {
-            this.status.setShow(false)
-            this.status.setPreparation(false)
-            this.emits?.('tooltip', false)
-          }, 128)
-        }, flesh ? 48 : 256)
-      }
-    }
-  }
-
-  /**
-   * Cancel hiding the element.
-   *
-   * Отмена скрытия элемента.
-   */
-  noHide() {
-    clearTimeout(this.timeoutTo)
-  }
-
-  /**
-   * Start listening to scroll events.
-   *
-   * Запуск прослушивания событий скролла.
-   */
-  eventStop() {
-    this.event.stop()
-  }
-
-  /**
-   * Scroll event management.
-   *
-   * Управление событиями скролла.
-   */
-  protected readonly onScroll = () => this.toggle(false, true)
-}

package/src/constructors/Tooltip/TooltipPosition.ts

@@ -1,92 +0,0 @@
-import { type Ref } from 'vue'
-
-import { TooltipClasses } from './TooltipClasses'
-import { TooltipStyle } from './TooltipStyle'
-
-import type { TooltipProps } from './props'
-
-/**
- * A class for working with position.
- *
- * Класс для работы с позицией.
- */
-export class TooltipPosition {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element instance of the element itself/ экземпляр самого элемента
-   * @param classes object for working with the class/ объект для работы с классом
-   * @param style object for working with styles/ объект для работы со стилями
-   */
-  constructor(
-    protected readonly props: Readonly<TooltipProps>,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly classes: TooltipClasses,
-    protected readonly style: TooltipStyle
-  ) {
-  }
-
-  /**
-   * Update all sizes.
-   *
-   * Обновить все размеры.
-   */
-  update() {
-    const element = this.element.value
-    const control = this.classes.findControl()
-
-    if (
-      element
-      && control
-    ) {
-      const rect = control.getBoundingClientRect()
-      const tooltipRect = element.getBoundingClientRect()
-      const indent = this.getIndent()
-
-      const top = this.isTop(rect, tooltipRect)
-      const x = rect.left + (rect.width / 2) - (tooltipRect.width / 2)
-      const y = top ? rect.top - tooltipRect.height - indent : rect.bottom + indent
-
-      let shift = 0
-
-      if (x < 0) {
-        shift = 0 - x
-      } else if (x + tooltipRect.width > window.innerWidth) {
-        shift = window.innerWidth - (x + tooltipRect.width)
-      }
-
-      this.style.set(
-        top,
-        x,
-        y,
-        shift
-      )
-    }
-  }
-
-  /**
-   * Checks whether the element should be displayed on top.
-   *
-   * Проверяет, надо ли отображать элемент сверху.
-   * @param rect the current position of the control element/ данное положение элемента контроля
-   * @param tooltipRect the current position of the element itself/ данное положение самого элемента
-   */
-  protected isTop(
-    rect: DOMRect,
-    tooltipRect: DOMRect
-  ) {
-    const indent = this.getIndent()
-
-    return (this.props.top && rect.top - tooltipRect.height - indent >= 0)
-      || (rect.bottom + tooltipRect.height + indent > window.innerHeight)
-  }
-
-  /**
-   * Returns the margins for the element.
-   *
-   * Возвращает отступы для элемента.
-   */
-  protected getIndent(): number {
-    return this.props.indent ?? 0
-  }
-}

package/src/constructors/Tooltip/TooltipStatus.ts

@@ -1,97 +0,0 @@
-import { computed, ref } from 'vue'
-
-import type { TooltipSlots } from './types'
-import type { TooltipProps } from './props'
-
-/**
- * Class for working with display statuses.
- *
- * Класс для работы со статусами отображения.
- */
-export class TooltipStatus {
-  readonly open = ref(false)
-  readonly show = ref(false)
-  readonly preparation = ref(false)
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param slots object for working with slots/ объект для работы со слотами
-   */
-  constructor(
-    protected readonly props: Readonly<TooltipProps>,
-    protected readonly slots?: TooltipSlots
-  ) {
-  }
-
-  /**
-   * Checks if there is text to display.
-   *
-   * Проверяет, есть ли текст для отображения.
-   */
-  readonly isText = computed<boolean>(() =>
-    !this.props.disabled
-    && Boolean(
-      this.props.label
-      || this.props.description
-      || (
-        this.slots
-        && (
-          'default' in this.slots
-          || 'description' in this.slots
-          || 'body' in this.slots
-        )
-      )
-    )
-  )
-
-  /** Checks if the element needs to be displayed/ Проверяет, нужно ли отображать элемент */
-  readonly isShow = computed<boolean>(
-    () => Boolean(this.show.value || this.open.value || this.props.inDom) && this.isText.value
-  )
-
-  /** Checks if the content is an array/ Проверяет, является ли содержимое массивом */
-  readonly isArray = computed<boolean>(
-    () => Boolean(this.props.arrowShow && this.preparation.value)
-  )
-
-  /**
-   * Checks if the current status matches the selected one.
-   *
-   * Проверяет, соответствует ли текущий статус выбранному.
-   * @param open the value of the current state/ значение текущего состояния
-   */
-  isMatch(open: boolean): boolean {
-    return this.open.value === open
-  }
-
-  /**
-   * Changes the open state.
-   *
-   * Изменяет состояние открытия.
-   * @param open the value of the current state/ значение текущего состояния
-   */
-  setOpen(open: boolean) {
-    this.open.value = open
-  }
-
-  /**
-   * Changes the display state.
-   *
-   * Изменяет состояние показа.
-   * @param show the value of the current state/ значение текущего состояния
-   */
-  setShow(show: boolean) {
-    this.show.value = show
-  }
-
-  /**
-   * Changes the preparation status.
-   *
-   * Изменяет статус подготовки.
-   * @param preparation the value of the current state/ значение текущего состояния
-   */
-  setPreparation(preparation: boolean) {
-    this.preparation.value = preparation
-  }
-}

package/src/constructors/Tooltip/TooltipStyle.ts

@@ -1,123 +0,0 @@
-import { type Ref } from 'vue'
-
-/**
- * Style management class.
- *
- * Класс управления стилями.
- */
-export class TooltipStyle {
-  /**
-   * Constructor
-   * @param element instance of the element itself/ экземпляр самого элемента
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly className: string
-  ) {
-  }
-
-  /**
-   * Changing styles.
-   *
-   * Изменение стилей.
-   * @param top should the element be placed on top/ нужно ли поместить элемент сверху
-   * @param x value of X/ значение X
-   * @param y value of Y/ значение Y
-   * @param shift value for shift/ значение для сдвига
-   */
-  set(
-    top: boolean,
-    x: number,
-    y: number,
-    shift: number
-  ) {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.toggle(`${this.className}--top`, top)
-      element.style.setProperty(`--${this.className}-sys-x`, `${x}px`)
-      element.style.setProperty(`--${this.className}-sys-y`, `${y}px`)
-      element.style.setProperty(`--${this.className}-sys-shift`, `${shift}px`)
-    }
-  }
-
-  /**
-   * Changes the preparation status.
-   *
-   * Изменяет статус подготовки.
-   * @param status the value of the current state/ значение текущего состояния
-   */
-  setPreparation(status: boolean) {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.toggle(`${this.className}--preparation`, status)
-    }
-  }
-
-  /**
-   * Changes the preparation status.
-   *
-   * Изменяет статус подготовки.
-   * @param status the value of the current state/ значение текущего состояния
-   */
-  setShow(status: boolean) {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.toggle(`${this.className}--show`, status)
-
-      if (!status) {
-        this.setMove(status)
-      }
-    }
-  }
-
-  /**
-   * Changes the move status.
-   *
-   * Изменяет статус перемещения.
-   * @param status the value of the current state/ значение текущего состояния
-   */
-  setMove(status: boolean) {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.toggle(`${this.className}--move`, status)
-    }
-  }
-
-  /**
-   * Reset all records to the initial state.
-   *
-   * Сброс всех записей до начального состояния.
-   */
-  reset() {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.remove(`${this.className}--top`)
-      element.classList.remove(`${this.className}--preparation`)
-      element.classList.remove(`${this.className}--show`)
-
-      element.style.removeProperty(`--${this.className}-sys-x`)
-      element.style.removeProperty(`--${this.className}-sys-y`)
-      element.style.removeProperty(`--${this.className}-sys-shift`)
-    }
-  }
-
-  /**
-   * Resets the display state.
-   *
-   * Сбрасывает состояние показа.
-   */
-  resetShow() {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.remove(`${this.className}--preparation`)
-      element.classList.remove(`${this.className}--show`)
-    }
-  }
-}

package/src/constructors/Tooltip/basicTypes.ts

@@ -1,39 +0,0 @@
-import type { Ref } from 'vue'
-import type { ConstrBind } from '@dxtmisha/functional'
-
-import type { AriaList } from '../../types/ariaTypes'
-import type { TooltipProps } from './props'
-
-export type TooltipControlBinds
-  = AriaList
-    & {
-      class: string
-      onclick: () => void
-      onmouseover: (event: MouseEvent) => void
-      onmouseout: (event: MouseEvent) => void
-    }
-export type TooltipControl
-  = TooltipControlBinds
-    & {
-      open: Ref<boolean>
-      binds: TooltipControlBinds
-    }
-
-/**
- * Component map for including the Tooltip component/
- * Карта компонентов для подключения компонента Tooltip
- */
-export type TooltipComponentInclude = {
-  tooltip?: object
-}
-
-/**
- * Props used to include and configure the Tooltip component/
- * Свойства для подключения и настройки компонента Tooltip
- */
-export interface TooltipPropsInclude<
-  Tooltip extends TooltipProps = TooltipProps
-> {
-  /** Additional attributes for Tooltip component/ Дополнительные атрибуты для компонента Tooltip */
-  tooltipAttrs?: ConstrBind<Tooltip>
-}

package/src/constructors/Tooltip/index.ts

@@ -1,6 +0,0 @@
-export * from './Tooltip'
-export * from './TooltipDesign'
-export * from './TooltipInclude'
-export * from './props'
-export * from './types'
-export * from './basicTypes'