@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Tooltip/TooltipDesign.tsx

@@ -0,0 +1,198 @@
+import { h, Teleport, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+import { Tooltip } from './Tooltip'
+
+import {
+  type TooltipPropsBasic
+} from './props'
+import {
+  type TooltipClasses,
+  type TooltipComponents,
+  type TooltipEmits,
+  type TooltipExpose,
+  type TooltipSlots
+} from './types'
+
+/**
+ * TooltipDesign
+ */
+export class TooltipDesign<
+  COMP extends TooltipComponents,
+  EXPOSE extends TooltipExpose,
+  CLASSES extends TooltipClasses,
+  P extends TooltipPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    TooltipEmits,
+    EXPOSE,
+    TooltipSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Tooltip
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   * @param ItemConstructor tooltip item class/ класс элемента тултипа
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, TooltipEmits, P>,
+    ItemConstructor: typeof Tooltip = Tooltip
+  ) {
+    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()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      toggle: this.item.open.toggle
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        label: this.getSubClass('label'),
+        description: this.getSubClass('description'),
+        body: this.getSubClass('body')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return [
+      ...this.renderControl(),
+      ...this.renderTooltip()
+    ]
+  }
+
+  /**
+   * Rendering of the control slot.
+   *
+   * Рендеринг слота управления.
+   */
+  protected readonly renderControl = (): VNode[] => {
+    return [
+      this.initSlot('control', undefined, this.item.slotData) as VNode
+    ]
+  }
+
+  /**
+   * Rendering of the tooltip.
+   *
+   * Рендеринг тултипа.
+   */
+  protected readonly renderTooltip = (): VNode[] => {
+    if (this.item.status.isShow.value) {
+      const children: any[] = [
+        ...this.item.label.render(),
+        ...this.item.description.render(),
+        ...this.renderBody()
+      ]
+
+      if (this.item.status.isArray.value) {
+        children.push(
+          ...this.item.arrow.render()
+        )
+      }
+
+      return [
+        h(
+          Teleport,
+          {
+            key: 'teleport',
+            to: 'body'
+          },
+          h(
+            'div',
+            {
+              ref: this.element,
+              id: this.item.classes.getIdItem(),
+              class: this.classes?.value.main,
+              onMouseover: this.item.event.onMouseoverTooltip,
+              onMouseout: this.item.event.onMouseout,
+              onTransitionend: this.item.event.onTransitionend,
+              ...AriaStaticInclude.role('tooltip')
+            },
+            children
+          )
+        )
+      ]
+    }
+
+    return []
+  }
+
+  /**
+   * Rendering of the body slot.
+   *
+   * Рендеринг слота тела.
+   */
+  protected readonly renderBody = (): VNode[] => {
+    if (
+      this.slots
+      && 'body' in this.slots
+    ) {
+      return [
+        this.initSlot('body') as VNode
+      ]
+    }
+
+    return []
+  }
+}

package/src/constructors/Tooltip/TooltipEvent.ts

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

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

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

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