@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/classes/ModelValueInclude.ts

@@ -0,0 +1,73 @@
+import { ref, watch } from 'vue'
+import type { RefType } from '@dxtmisha/functional'
+
+import { EventClickInclude } from './EventClickInclude'
+import { ModelInclude } from './ModelInclude'
+
+import type { EventClickValue } from '../types/eventClickTypes'
+
+/**
+ * Class for managing model value with reactive reference and click handling.
+ *
+ * Класс для управления значением модели с реактивной ссылкой и обработкой клика.
+ */
+export class ModelValueInclude<Value = any> {
+  readonly value = ref<Value>()
+
+  /**
+   * Constructor
+   * @param index identifier/ идентификатор
+   * @param emits emits function/ функция эмитов
+   * @param event event click handler/ обработчик клика
+   * @param inputValue input value reference/ ссылка на входное значение
+   * @param readonly readonly flag/ флаг только для чтения
+   */
+  constructor(
+    protected readonly index: string,
+    protected readonly emits?: any,
+    protected readonly event?: EventClickInclude,
+    protected readonly inputValue?: RefType<any>,
+    protected readonly readonly?: RefType<boolean | undefined>
+  ) {
+    new ModelInclude(this.index, this.emits, this.value)
+
+    watch(
+      [this.inputValue],
+      () => {
+        this.value.value = this.inputValue?.value
+      },
+      { immediate: true }
+    )
+  }
+
+  /**
+   * Returns the current value.
+   *
+   * Возвращает текущее значение.
+   */
+  getValue(): Value | undefined {
+    return this.value.value
+  }
+
+  /**
+   * Click handler.
+   *
+   * Обработчик клика.
+   * @param event event object/ объект события
+   * @param options data object/ объект с данными
+   */
+  readonly onClick = (
+    event: MouseEvent,
+    options?: EventClickValue
+  ): void => {
+    if (
+      options
+      && 'value' in options
+      && !this.readonly?.value
+    ) {
+      this.value.value = options.value
+    }
+
+    this.event?.onClick(event, options)
+  }
+}

package/src/classes/TabIndexInclude.ts

@@ -0,0 +1,260 @@
+import { onUnmounted, type Ref } from 'vue'
+import { EventItem, getRef, isDomRuntime, isFunction } from '@dxtmisha/functional'
+
+/**
+ * Class for managing focus and tab index of elements
+ *
+ * Класс для управления фокусом и табиндексом элементов
+ */
+export class TabIndexInclude<E extends HTMLElement = HTMLElement> {
+  /** Previously focused element/ Ранее сфокусированный элемент */
+  protected oldElement?: HTMLElement | Element | null
+
+  /** Event item for focus events/ Элемент события для событий фокуса */
+  protected event?: EventItem<HTMLElement, any>
+
+  /**
+   * Сonstructor
+   * @param element - Reference to the element/ Ссылка на элемент
+   */
+  constructor(
+    protected readonly element: Ref<E | undefined> | (() => E | undefined)
+  ) {
+    onUnmounted(() => {
+      this.stopEvent()
+      this.event = undefined
+    })
+  }
+
+  /**
+   * Set focus to the element.
+   *
+   * Устанавливает фокус на элемент.
+   */
+  goTo(): this {
+    if (
+      this.isElement()
+      && isDomRuntime()
+    ) {
+      this.updateOldElement()
+      this.toFocus()
+      this.startEvent()
+    }
+
+    return this
+  }
+
+  /**
+   * Reset focus to the previously focused element.
+   *
+   * Сбрасывает фокус на ранее сфокусированный элемент.
+   */
+  reset(): this {
+    if (
+      this.oldElement
+      && ('focus' in this.oldElement)
+    ) {
+      this.oldElement.focus()
+    }
+
+    this.stopEvent()
+
+    return this
+  }
+
+  /**
+   * Toggle focus based on status.
+   *
+   * Переключает фокус в зависимости от статуса.
+   * @param status Focus status/ Статус фокуса
+   */
+  toggle(status: boolean): this {
+    if (status) {
+      this.goTo()
+    } else {
+      this.reset()
+    }
+
+    return this
+  }
+
+  /**
+   * Check if the element is defined.
+   *
+   * Проверяет, определен ли элемент.
+   */
+  protected isElement(): this is { element: Ref<E> } {
+    return this.getElement() !== undefined
+  }
+
+  /**
+   * Check if the event is a Tab key event.
+   *
+   * Проверяет, является ли событие событием клавиши Tab.
+   * @param event Keyboard event/ Событие клавиатуры
+   */
+  protected isTab(event: KeyboardEvent): boolean {
+    return event.key === 'Tab'
+      || event.code === 'Tab'
+      || event.keyCode === 9
+  }
+
+  /**
+   * Check if the Shift key is pressed.
+   *
+   * Проверяет, нажата ли клавиша Shift.
+   * @param event Keyboard event/ Событие клавиатуры
+   */
+  protected isShift(event: KeyboardEvent): boolean {
+    return event.shiftKey
+  }
+
+  /**
+   * Get the element.
+   *
+   * Получает элемент.
+   */
+  protected getElement(): E | undefined {
+    if (isFunction(this.element)) {
+      return this.element()
+    }
+
+    return getRef(this.element)
+  }
+
+  /**
+   * Find the first focusable element.
+   *
+   * Находит первый фокусируемый элемент.
+   */
+  findFirstElement(): HTMLElement | undefined {
+    const elements = this.getElement()
+      ?.querySelectorAll<HTMLButtonElement>('*')
+
+    if (elements) {
+      for (const element of elements) {
+        if (
+          'tabIndex' in element
+          && element.tabIndex >= 0
+        ) {
+          return element
+        }
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Find the last focusable element.
+   *
+   * Находит последний фокусируемый элемент.
+   */
+  findLastElement(): HTMLElement | undefined {
+    const elements = this.getElement()
+      ?.querySelectorAll<HTMLButtonElement>('*')
+
+    if (elements) {
+      for (let i = elements.length - 1; i >= 0; i--) {
+        const element = elements[i]
+
+        if (
+          element
+          && 'tabIndex' in element
+          && element.tabIndex >= 0
+        ) {
+          return element
+        }
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Set focus with temporary tab index modification.
+   *
+   * Устанавливает фокус с временным изменением табиндекса.
+   */
+  protected toFocus(): this {
+    const element = this.getElement()
+
+    if (element) {
+      element.setAttribute('tabindex', '-1')
+      element.focus()
+
+      requestAnimationFrame(() => {
+        element.removeAttribute('tabindex')
+      })
+    }
+
+    return this
+  }
+
+  /**
+   * Save the currently focused element.
+   *
+   * Сохраняет текущий сфокусированный элемент.
+   */
+  protected updateOldElement(): void {
+    if (isDomRuntime()) {
+      this.oldElement = document.activeElement
+    }
+  }
+
+  /**
+   * Event listener for keyboard events.
+   *
+   * Слушатель событий для событий клавиатуры.
+   * @param event Keyboard event/ Событие клавиатуры
+   */
+  protected listenEvent = (event: KeyboardEvent): void => {
+    if (!this.isTab(event)) {
+      return
+    }
+
+    const focusActive = document.activeElement as HTMLElement
+
+    if (focusActive) {
+      if (this.isShift(event)) {
+        if (focusActive === this.findFirstElement()) {
+          this.findLastElement()?.focus()
+          event.preventDefault()
+        }
+      } else if (focusActive === this.findLastElement()) {
+        this.findFirstElement()?.focus()
+        event.preventDefault()
+      }
+    }
+  }
+
+  /**
+   * Start the event listener.
+   *
+   * Запускает слушатель событий.
+   */
+  protected startEvent(): void {
+    if (this.event) {
+      this.event.start()
+      return
+    }
+
+    this.event = new EventItem<HTMLElement, any>(
+      document.body,
+      'keydown',
+      this.listenEvent
+    )
+      .start()
+  }
+
+  /**
+   * Stop the event listener.
+   *
+   * Останавливает слушатель событий.
+   */
+  protected stopEvent(): void {
+    if (this.event) {
+      this.event.stop()
+    }
+  }
+}

package/src/classes/TextInclude.ts

@@ -0,0 +1,102 @@
+import { computed, shallowRef } from 'vue'
+import { executeFunction } from '@dxtmisha/functional'
+
+import type {
+  TextAllPropsInclude,
+  TextIndex,
+  TextList,
+  TextValue
+} from '../types/textTypes'
+
+/**
+ * TextInclude class for managing text-related properties.
+ *
+ * Класс TextInclude для управления свойствами, связанными с текстом.
+ */
+export class TextInclude {
+  /**
+   * Global list of texts for all components/ Глобальный список текстов для всех компонентов
+   */
+  static readonly list = shallowRef<TextList>({
+    close: 'Close',
+    copiedClipboard: 'Copied to the clipboard',
+    entriesMatch: 'Entries do not match',
+    ok: 'OK'
+  })
+
+  /**
+   * Initialize global texts.
+   *
+   * Инициализация глобальных текстов.
+   * @param texts List of texts/ Список текстов
+   */
+  static initText(texts: TextList): void {
+    this.list.value = {
+      ...this.list.value,
+      ...texts
+    }
+  }
+
+  /**
+   * Constructor
+   * @param props Component properties/ Свойства компонента
+   */
+  constructor(
+    protected readonly props: TextAllPropsInclude
+  ) {
+  }
+
+  /** Close text/ Текст закрытия */
+  readonly close = computed<string | undefined>(
+    () => this.getText('close', this.props.textClose)
+  )
+
+  /** Copied to the clipboard text/ Текст о копировании в буфер обмена */
+  readonly copiedClipboard = computed<string | undefined>(
+    () => this.getText('copiedClipboard', this.props.textCopiedClipboard)
+  )
+
+  /** Entries match text/ Текст о несовпадении записей */
+  readonly entriesMatch = computed<string | undefined>(
+    () => this.getText('entriesMatch', this.props.textEntriesMatch)
+  )
+
+  /** OK text/ Текст подтверждения */
+  readonly ok = computed<string | undefined>(
+    () => this.getText('ok', this.props.textOk)
+  )
+
+  /**
+   * Get text by index, with priority to local value.
+   *
+   * Получение текста по индексу с приоритетом локального значения.
+   * @param index Text index/ Индекс текста
+   * @param value Local text value/ Локальное значение текста
+   */
+  protected getText(
+    index: TextIndex,
+    value: TextValue
+  ): string | undefined {
+    if (value) {
+      return executeFunction(value)
+    }
+
+    return this.getGlobalText(index)
+  }
+
+  /**
+   * Get text from global list.
+   *
+   * Получение текста из глобального списка.
+   * @param index Text index/ Индекс текста
+   */
+  protected getGlobalText(
+    index: TextIndex
+  ): string | undefined {
+    if (TextInclude.list.value?.[index]) {
+      return executeFunction(TextInclude.list.value[index])
+    }
+
+    return undefined
+  }
+}

package/src/classes/TouchEventInclude.ts

@@ -0,0 +1,284 @@
+import { ref, type Ref } from 'vue'
+import { executePromise } from '@dxtmisha/functional'
+
+import type {
+  TouchEventCallback,
+  TouchEventClient,
+  TouchEventTypeX,
+  TouchEventTypeY
+} from '../types/touchEventTypes'
+
+const MAX_MOVE = 80
+
+/**
+ * Class for handling touch and mouse events with gesture detection.
+ *
+ * Класс для обработки событий касания и мыши с определением жестов.
+ */
+export class TouchEventInclude {
+  /**
+   * Current touch point
+   *
+   * Текущая точка касания
+   */
+  readonly touche = ref<Touch>()
+
+  /**
+   * Touchpoint during move
+   *
+   * Точка касания во время движения
+   */
+  readonly toucheMove = ref<Touch>()
+
+  /**
+   * Current mouse position
+   *
+   * Текущая позиция мыши
+   */
+  readonly mouse = ref<TouchEventClient>()
+
+  /**
+   * Mouse position during move
+   *
+   * Позиция мыши во время движения
+   */
+  readonly mouseMove = ref<TouchEventClient>()
+
+  /**
+   * Constructor
+   * @param start callback on touch/mouse start/ колбэк при начале касания/клика
+   * @param move callback on touch/mouse move/ колбэк при движении
+   * @param end callback on touch/mouse end/ колбэк при завершении
+   * @param element optional element reference/ необязательная ссылка на элемент
+   */
+  constructor(
+    private readonly start?: (mouse: TouchEventClient, touche?: Touch) => void,
+    private readonly move?: TouchEventCallback,
+    private readonly end?: TouchEventCallback,
+    private readonly element?: Ref<HTMLElement | undefined>
+  ) {
+  }
+
+  /**
+   * Touch event handlers
+   *
+   * Обработчики событий касания
+   */
+  readonly onTouch = {
+    onTouchstart: (event: TouchEvent) => {
+      this.touche.value = event.targetTouches?.[0]
+      this.mouse.value = {
+        x: this.touche.value?.clientX ?? 0,
+        y: this.touche.value?.clientY ?? 0
+      }
+
+      this.update(event.target as HTMLElement)
+    },
+    onTouchend: (event: TouchEvent) => this.reset(event.target as HTMLElement),
+    onTouchcancel: (event: TouchEvent) => this.reset(event.target as HTMLElement),
+    onTouchmove: (event: TouchEvent) => {
+      this.toucheMove.value = event.targetTouches?.[0]
+      this.mouseMove.value = {
+        x: this.toucheMove.value?.clientX ?? 0,
+        y: this.toucheMove.value?.clientY ?? 0
+      }
+
+      this.updateMove(event.target as HTMLElement)
+    }
+  }
+
+  /**
+   * Mouse event handlers
+   *
+   * Обработчики событий мыши
+   */
+  readonly onMouse = {
+    onMousedown: (event: MouseEvent) => {
+      this.mouse.value = {
+        x: event.clientX,
+        y: event.clientY
+      }
+
+      this.update(event.target as HTMLElement)
+    },
+    onMouseup: (event: MouseEvent) => this.reset(event.target as HTMLElement),
+    onMousemove: (event: MouseEvent) => {
+      this.mouseMove.value = {
+        x: event.clientX,
+        y: event.clientY
+      }
+
+      this.updateMove(event.target as HTMLElement)
+    }
+  }
+
+  /**
+   * Gets the target element for touch events.
+   *
+   * Получает целевой элемент для событий касания.
+   * @param target event target element/ целевой элемент события
+   */
+  private getElement(target: HTMLElement) {
+    return this.element?.value ?? target.closest<HTMLElement>('[data-touch]')
+  }
+
+  /**
+   * Determines horizontal direction type from client X coordinate.
+   *
+   * Определяет тип горизонтального направления из координаты X.
+   * @param clientX horizontal coordinate/ горизонтальная координата
+   */
+  private getTypeX(clientX: number): TouchEventTypeX {
+    if (clientX >= MAX_MOVE) {
+      return 'right'
+    }
+
+    if (clientX < -MAX_MOVE) {
+      return 'left'
+    }
+
+    return 'none'
+  }
+
+  /**
+   * Determines vertical direction type from client Y coordinate.
+   *
+   * Определяет тип вертикального направления из координаты Y.
+   * @param clientY vertical coordinate/ вертикальная координата
+   */
+  private getTypeY(clientY: number): TouchEventTypeY {
+    if (clientY >= MAX_MOVE) {
+      return 'bottom'
+    }
+
+    if (clientY < -MAX_MOVE) {
+      return 'top'
+    }
+
+    return 'none'
+  }
+
+  /**
+   * Executes callback with calculated movement data.
+   *
+   * Выполняет колбэк с рассчитанными данными движения.
+   * @param callback callback function/ функция обратного вызова
+   */
+  private async callback(callback?: TouchEventCallback): Promise<TouchEventClient | undefined> {
+    const toucheValue = this.mouse.value
+    const toucheMoveValue = this.mouseMove.value
+
+    if (
+      toucheValue
+      && toucheMoveValue
+    ) {
+      const x = toucheMoveValue.x - toucheValue.x
+      const y = toucheMoveValue.y - toucheValue.y
+
+      if (
+        !callback
+        || await executePromise(callback(
+          this.getTypeX(x),
+          this.getTypeY(y),
+          x,
+          y,
+          toucheValue,
+          toucheMoveValue,
+          this.touche.value,
+          this.toucheMove.value
+        ))
+      ) {
+        return {
+          x,
+          y
+        }
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Resets touch/mouse state and CSS properties after interaction ends.
+   *
+   * Сбрасывает состояние касания/мыши и CSS свойства после завершения взаимодействия.
+   * @param target selected item/ выбранный элемент
+   */
+  private reset(target: HTMLElement) {
+    const elementValue = this.getElement(target)
+
+    this
+      .callback(this.end)
+      .then((client) => {
+        if (elementValue) {
+          if (client) {
+            this.resetData(elementValue)
+          } else {
+            setTimeout(() => this.resetData(elementValue), 400)
+          }
+        }
+      })
+  }
+
+  /**
+   * Resets all touch/mouse state and removes CSS custom properties.
+   *
+   * Сбрасывает все состояния касания/мыши и удаляет CSS кастомные свойства.
+   * @param elementValue target element/ целевой элемент
+   */
+  private resetData(elementValue: HTMLElement) {
+    this.touche.value = undefined
+    this.toucheMove.value = undefined
+
+    this.mouse.value = undefined
+    this.mouseMove.value = undefined
+
+    elementValue.style.removeProperty('--sys-touch-start-x')
+    elementValue.style.removeProperty('--sys-touch-start-y')
+    elementValue.style.removeProperty('--sys-touch-move-x')
+    elementValue.style.removeProperty('--sys-touch-move-y')
+  }
+
+  /**
+   * Updates initial touch/mouse position and sets CSS custom properties.
+   *
+   * Обновляет начальную позицию касания/мыши и устанавливает CSS кастомные свойства.
+   * @param target selected item/ выбранный элемент
+   */
+  private update(target: HTMLElement) {
+    const elementValue = this.getElement(target)
+    const toucheValue = this.mouse.value
+
+    if (
+      elementValue
+      && toucheValue
+    ) {
+      elementValue.style.setProperty('--sys-touch-start-x', `${toucheValue.x}px`)
+      elementValue.style.setProperty('--sys-touch-start-y', `${toucheValue.y}px`)
+
+      executePromise(this.start?.(toucheValue, this.touche.value)).then()
+    }
+  }
+
+  /**
+   * Updates touch/mouse position during movement and sets CSS custom properties.
+   *
+   * Обновляет позицию касания/мыши во время движения и устанавливает CSS кастомные свойства.
+   * @param target selected item/ выбранный элемент
+   */
+  private updateMove(target: HTMLElement) {
+    const elementValue = this.getElement(target)
+
+    this
+      .callback(this.move)
+      .then((client) => {
+        if (
+          elementValue
+          && client
+        ) {
+          elementValue.style.setProperty('--sys-touch-move-x', `${client.x}px`)
+          elementValue.style.setProperty('--sys-touch-move-y', `${client.y}px`)
+        }
+      })
+  }
+}