@dxtmisha/constructor 0.30.1 → 0.39.5

package/src/classes/LabelNumberInclude.ts

@@ -1,70 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { type ConstrClass, GeoRef, isNumber, toNumberByMax } from '@dxtmisha/functional'
-
-import { LabelInclude } from './LabelInclude'
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { LabelNumberProps, LabelNumberSlots } from '../types/labelTypes'
-
-/**
- * The LabelNumberInclude class extends LabelInclude to handle numeric labels.
- * Allows converting and displaying numeric values with respect to maximum constraints.
- *
- * Класс LabelNumberInclude расширяет LabelInclude для работы с числовыми метками.
- * Позволяет преобразовывать и отображать числовые значения с учетом максимальных ограничений.
- */
-export class LabelNumberInclude extends LabelInclude {
-  /**
-   * Constructor for working with text that has maximum values.
-   *
-   * Конструктор для работы с текстом, у которого есть максимальные значения.
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param classesExtra additional classes/ дополнительные классы
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param elementsExtra additional elements/ дополнительные элементы
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<LabelNumberProps>,
-    protected readonly className: string,
-    protected readonly classesExtra?: ConstrClass,
-    protected readonly slots?: LabelNumberSlots,
-    protected readonly elementsExtra?: () => VNode[],
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-    super(
-      props,
-      className,
-      classesExtra,
-      slots,
-      elementsExtra,
-      computed(() => this.getNumber()),
-      undefined,
-      skeleton
-    )
-  }
-
-  /**
-   * Returns text with conversion to maximum values.
-   *
-   * Возвращает текст с преобразованием в максимальные значения.
-   */
-  protected getNumber(): string | undefined {
-    const props = this.props
-
-    if (
-      props.label
-      && isNumber(props.label)
-    ) {
-      return toNumberByMax(
-        props.label,
-        props.labelMax,
-        props.formatting,
-        GeoRef.getLanguage().value
-      ).toString()
-    }
-
-    return undefined
-  }
-}

package/src/classes/ModelInclude.ts

@@ -1,98 +0,0 @@
-import { isReadonly, isRef, type Ref, watch } from 'vue'
-import {
-  isFunction,
-  type RefType,
-  toCamelCase,
-  toCamelCaseFirst
-} from '@dxtmisha/functional'
-
-/**
- * Class for managing model synchronization and event emission.
- * Handles two-way data binding with reactive values and emits update events.
- *
- * Класс для управления синхронизацией модели и испусканием событий.
- * Обрабатывает двустороннюю привязку данных с реактивными значениями и испускает события обновления.
- */
-export class ModelInclude<Value = string> {
-  /**
-   * Constructor
-   * @param index The index key for the model property/ Ключ индекса для свойства модели
-   * @param emits Function to emit events/ Функция для испускания событий
-   * @param syncValue Reactive value to synchronize/ Реактивное значение для синхронизации
-   */
-  constructor(
-    protected readonly index: string,
-    protected readonly emits?: any,
-    protected readonly syncValue?: RefType<Value>
-  ) {
-    if (syncValue) {
-      watch(syncValue, (newValue: Value) => {
-        this.emit(newValue)
-      }, { immediate: true })
-    }
-  }
-
-  /**
-   * Type guard to check if syncValue is a mutable Ref.
-   * Returns true if syncValue is a reference and not readonly.
-   *
-   * Проверка типа, является ли syncValue изменяемым Ref.
-   * Возвращает true, если syncValue является ссылкой и не readonly.
-   * @returns Type predicate indicating syncValue is a mutable Ref/ Предикат типа, указывающий что syncValue - изменяемый Ref
-   */
-  isValue(): this is { syncValue: Ref<Value> } {
-    return isRef(this.syncValue)
-      && !isReadonly(this.syncValue)
-  }
-
-  /**
-   * Generates binding object for v-model integration.
-   * Creates properties for two-way data binding with model and update handlers.
-   *
-   * Генерирует объект привязок для интеграции v-model.
-   * Создает свойства для двусторонней привязки данных с обработчиками модели и обновления.
-   * @returns Object with model value and update handlers/ Объект со значением модели и обработчиками обновления
-   */
-  getBinds() {
-    if (this.isValue()) {
-      const name = toCamelCaseFirst(this.index)
-
-      return {
-        [`model${name}`]: this.syncValue.value,
-        [`onUpdate:${toCamelCase(this.index)}`]: this.update,
-        [`onUpdate:model${name}`]: this.update
-      }
-    }
-
-    return {}
-  }
-
-  /**
-   * Updates the synchronized value.
-   * Sets the value of the reactive reference if it's a mutable Ref.
-   *
-   * Обновляет синхронизированное значение.
-   * Устанавливает значение реактивной ссылки, если это изменяемый Ref.
-   * @param value The new value to set/ Новое значение для установки
-   */
-  readonly update = (value: Value): void => {
-    if (this.isValue()) {
-      this.syncValue.value = value
-    }
-  }
-
-  /**
-   * Emits an event to update the model value.
-   * Triggers the corresponding update event with the new value.
-   *
-   * Испускает событие для обновления значения модели.
-   * Запускает соответствующее событие обновления с новым значением.
-   * @param value The new value to set/ Новое значение для установки
-   */
-  emit(value: Value): void {
-    if (isFunction(this.emits)) {
-      this.emits(`update:${toCamelCase(this.index)}`, value)
-      this.emits(`update:model${toCamelCaseFirst(this.index)}`, value)
-    }
-  }
-}

package/src/classes/ModelValueInclude.ts

@@ -1,73 +0,0 @@
-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/PrefixInclude.ts

@@ -1,71 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { PrefixProps, PrefixSlots } from '../types/prefixTypes'
-
-/**
- * Class for working with prefix.
- *
- * Класс для работы с prefix.
- */
-export class PrefixInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<PrefixProps>,
-    protected readonly className: string,
-    protected readonly slots?: PrefixSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Returns true if prefix is filled
-   *
-   * Возвращает true, если prefix заполнен
-   */
-  readonly is = computed(() => Boolean(this.props.prefix || this.slots?.prefix))
-
-  /**
-   * Renders prefix element with content from props or slots.
-   *
-   * Отображает элемент prefix с содержимым из props или slots.
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.prefix)) {
-      children.push(this.props.prefix)
-    }
-
-    if (this.slots?.prefix) {
-      children.push(this.slots.prefix?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            'class': {
-              [`${this.className}__prefix`]: true,
-              ...this.skeleton?.classes.value
-            },
-            'data-event-type': 'prefix'
-          },
-          children,
-          'prefix'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/SuffixInclude.ts

@@ -1,71 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { SuffixProps, SuffixSlots } from '../types/suffixTypes'
-
-/**
- * Class for working with suffix.
- *
- * Класс для работы с suffix.
- */
-export class SuffixInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<SuffixProps>,
-    protected readonly className: string,
-    protected readonly slots?: SuffixSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Returns true if suffix is filled
-   *
-   * Возвращает true, если suffix заполнен
-   */
-  readonly is = computed(() => Boolean(this.props.suffix || this.slots?.suffix))
-
-  /**
-   * Renders suffix element with content from props or slots.
-   *
-   * Отображает элемент suffix с содержимым из props или slots.
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.suffix)) {
-      children.push(this.props.suffix)
-    }
-
-    if (this.slots?.suffix) {
-      children.push(this.slots.suffix?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            'class': {
-              [`${this.className}__suffix`]: true,
-              ...this.skeleton?.classes.value
-            },
-            'data-event-type': 'suffix'
-          },
-          children,
-          'suffix'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/TabIndexInclude.ts

@@ -1,260 +0,0 @@
-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()
-    }
-  }
-}