@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/List/List.ts

@@ -1,292 +0,0 @@
-import { toRef, type Ref, type ToRefs, computed } from 'vue'
-import {
-  type ConstrBind,
-  type ConstrEmit,
-  DesignComp,
-  ListDataRef,
-  type ListDataItem,
-  type ListList,
-  toBinds,
-  type ConstrClass
-} from '@dxtmisha/functional'
-
-import { EventClickInclude } from '../../classes/EventClickInclude'
-
-import { WindowClassesInclude } from '../Window'
-
-import { ListSearch } from './ListSearch'
-import { ListFocus } from './ListFocus'
-import { ListGo } from './ListGo'
-import { ListControl } from './ListControl'
-
-import type { ListComponents, ListEmits, ListSlots } from './types'
-import type { ListProps } from './props'
-import type { IconValue } from '../Icon'
-import type { ListGroupSlotsPropsInclude } from '../ListGroup'
-
-/** Maximum number of lists/ Максимальное количество списков */
-let listIdMax = 1
-
-/**
- * List
- */
-export class List {
-  readonly search: ListSearch
-  readonly focus: ListFocus
-
-  readonly data: ListDataRef
-  readonly event: EventClickInclude
-
-  readonly go: ListGo
-  readonly control: ListControl
-
-  readonly windowClasses: WindowClassesInclude
-
-  /** Unique list identifier/ Уникальный идентификатор списка */
-  protected readonly id: number = ++listIdMax
-
-  /**
-   * 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/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: ListProps,
-    protected readonly refs: ToRefs<ListProps>,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<ListComponents, ListProps>,
-    protected readonly slots?: ListSlots,
-    protected readonly emits?: ConstrEmit<ListEmits>
-  ) {
-    this.search = new ListSearch(this.props)
-    this.focus = new ListFocus(this.props, this.element, this.id)
-
-    this.data = new ListDataRef(
-      toRef(this.props, 'list'),
-      this.focus.focus,
-      this.search.highlight,
-      this.refs.highlightLengthStart,
-      this.refs.filterMode,
-      this.refs.selected,
-      this.refs.keyValue,
-      this.refs.keyLabel,
-      this.refs.liteThreshold,
-      undefined,
-      this.refs.max
-    )
-
-    this.go = new ListGo(this.props, this.focus, this.data, this.emits)
-    this.control = new ListControl(this.props, this.search, this.data, this.go)
-
-    this.event = new EventClickInclude(undefined, undefined, emits)
-    this.windowClasses = new WindowClassesInclude(classDesign)
-  }
-
-  /**
-   * Computed list data
-   *
-   * Вычисляемые данные списка
-   * */
-  readonly list = computed<ListList>(() => {
-    if (this.props.lite) {
-      return this.data.liteData.value
-    }
-
-    return this.data.fullData.value
-  })
-
-  /**
-   * Computed CSS classes for the cell component.
-   *
-   * Вычисляемые CSS классы для компонента ячейки.
-   */
-  readonly classes = computed<ConstrClass>(() => ({
-    [`${this.className}--highlightActive`]: Boolean(this.props.filterMode) && this.data.isHighlight()
-  }))
-
-  /**
-   * Computed binding properties for list items/
-   * Вычисляемые привязочные свойства для элементов списка
-   * */
-  protected readonly itemBinds = computed(() => {
-    return {
-      tag: this.props.tag,
-      divider: this.props.divider,
-      onClick: this.event.onClick,
-      ...(this.props.itemAttrs ?? {}),
-      listId: this.id
-    }
-  })
-
-  /**
-   * Returns information about the opening status of a group item.
-   *
-   * Возвращает информацию о статусе открытия группового элемента.
-   * @param item List item data/ данные элемента списка
-   */
-  isOpenGroup(
-    item: ConstrBind<ListDataItem>
-  ): boolean {
-    const data = this.data.getSubList(item)
-
-    return data.isSelected.value
-      || data.isFocus()
-      || data.isHighlight()
-  }
-
-  /**
-   * Gets binding properties for a list item
-   *
-   * Получает привязочные свойства для элемента списка
-   * @param item List item data/ данные элемента списка
-   */
-  getItem(
-    item: ConstrBind<ListDataItem>
-  ) {
-    return toBinds(
-      this.itemBinds.value,
-      item,
-      {
-        key: item.value,
-        role: this.props.roleItem
-      }
-    )
-  }
-
-  /**
-   * Gets binding properties for a group item in the list
-   *
-   * Получает привязочные свойства для группового элемента в списке
-   * @param item List item data/ данные элемента списка
-   */
-  getItemGroup(
-    item: ConstrBind<ListDataItem>
-  ) {
-    return toBinds(
-      this.itemBinds.value,
-      this.props.itemGroupAttrs,
-      item,
-      {
-        key: item.value,
-        class: `${this.className}__group`
-      }
-    )
-  }
-
-  /**
-   * Gets binding properties for a menu item in the list
-   *
-   * Получает привязочные свойства для элемента меню в списке
-   * @param item List item data/ данные элемента списка
-   */
-  getItemMenu(
-    item: ConstrBind<ListDataItem>
-  ) {
-    return toBinds(
-      this.itemBinds.value,
-      this.props.itemMenuAttrs,
-      item,
-      {
-        key: item.value,
-        class: `${this.className}__menu`
-      }
-    )
-  }
-
-  /**
-   * Gets binding properties for a group management item with down arrow
-   *
-   * Получает привязочные свойства для элемента управления группой со стрелкой вниз
-   * @param item List item data/ данные элемента списка
-   * @param props additional properties/ дополнительные свойства
-   */
-  getItemManagementFormGroup(
-    item: ConstrBind<ListDataItem>,
-    props: ListGroupSlotsPropsInclude
-  ): ConstrBind<ListDataItem> {
-    return this.getItemManagement(
-      {
-        ...item,
-        ...props,
-        filterMode: false
-      },
-      props.open,
-      this.props.iconArrowDown
-    )
-  }
-
-  /**
-   * Gets binding properties for a menu management item with right arrow
-   *
-   * Получает привязочные свойства для элемента управления меню со стрелкой вправо
-   * @param item List item data/ данные элемента списка
-   * @param open Whether the menu is open/ открыто ли меню
-   */
-  getItemManagementFormMenu(
-    item: ConstrBind<ListDataItem>,
-    open: boolean
-  ): ConstrBind<ListDataItem> {
-    return this.getItemManagement(
-      {
-        ...item,
-        filterMode: false,
-        isMenu: true
-      },
-      open,
-      this.props.iconArrowRight
-    )
-  }
-
-  /**
-   * Returns a sublist for a group item.
-   *
-   * Возвращает подсписок для группового элемента.
-   * @param item List item data/ данные элемента списка
-   */
-  getList(
-    item: ConstrBind<ListDataItem>
-  ) {
-    return this.data.getSubList(item).fullData.value
-  }
-
-  /**
-   * Internal method to create management item binding properties
-   *
-   * Внутренний метод для создания привязочных свойств элемента управления
-   * @param item List item data/ данные элемента списка
-   * @param open Whether the item is open/ открыт ли элемент
-   * @param icon Icon to display/ иконка для отображения
-   */
-  protected getItemManagement(
-    item: ConstrBind<ListDataItem>,
-    open: boolean,
-    icon?: IconValue
-  ): ConstrBind<ListDataItem> {
-    return toBinds(
-      this.itemBinds.value,
-      this.props.itemManagementAttrs,
-      item,
-      {
-        'class': [
-          `${this.className}__management`,
-          this.windowClasses.get().static
-        ],
-        'focus': item?.index === this.focus.focus.value,
-        'selectedChild': this.isOpenGroup(item),
-        open,
-        'iconTurn': open,
-        'iconTrailing': icon,
-        'iconTrailingTurnOnly': true,
-        'data-status': open ? 'open' : 'close'
-      }
-    )
-  }
-}

package/src/constructors/List/ListControl.ts

@@ -1,194 +0,0 @@
-import { computed, onUnmounted, watch } from 'vue'
-import { EventItem, isDomRuntime, ListDataRef } from '@dxtmisha/functional'
-
-import { ListSearch } from './ListSearch'
-import { ListGo } from './ListGo'
-
-import type { ListProps } from './props'
-
-/**
- * Class for managing keyboard navigation and event handling in list components.
- * Provides keyboard shortcuts, search functionality, and navigation controls.
- *
- * Класс для управления навигацией с клавиатуры и обработкой событий в компонентах списка.
- * Предоставляет клавиатурные сокращения, функциональность поиска и элементы управления навигацией.
- */
-export class ListControl {
-  protected event?: EventItem<HTMLElement, any>
-
-  /**
-   * Creates an instance of ListControl for managing keyboard navigation and events.
-   *
-   * Создает экземпляр ListControl для управления навигацией с клавиатуры и событиями.
-   * @param props input data/ входные данные
-   * @param search search functionality controller / контроллер функциональности поиска
-   * @param data list data manager / менеджер данных списка
-   * @param go navigation controller / контроллер навигации
-   */
-  constructor(
-    protected readonly props: ListProps,
-    protected readonly search: ListSearch,
-    protected readonly data: ListDataRef,
-    protected readonly go: ListGo
-  ) {
-    watch(
-      this.isActive,
-      (status) => {
-        if (status) {
-          this.start()
-        } else {
-          this.stop()
-        }
-      },
-      { immediate: true }
-    )
-
-    onUnmounted(() => this.stop())
-  }
-
-  /**
-   * Checks if the menu is active.
-   *
-   * Проверяет, активное ли меню.
-   */
-  readonly isActive = computed<boolean>(() => {
-    return Boolean(this.props.control)
-  })
-
-  /**
-   * Checks if the event target is not an input.
-   *
-   * Проверяет, не является ли цель события input.
-   * @param target selected element/ выбранный элемент
-   */
-  protected isNotInput(target: HTMLElement): boolean {
-    return ['INPUT', 'TEXTAREA'].indexOf(target.nodeName) === -1
-      || Boolean(this.getActiveElement())
-  }
-
-  /**
-   * Gets the currently active input element with menu control.
-   *
-   * Получает текущий активный элемент input с управлением меню.
-   * @returns active input element or undefined / активный элемент input или undefined
-   */
-  protected getActiveElement(): HTMLInputElement | undefined {
-    if (isDomRuntime()) {
-      const element = document.activeElement as HTMLInputElement
-
-      if (
-        element
-        && element.dataset?.menuControl === '1'
-      ) {
-        return element
-      }
-    }
-
-    return undefined
-  }
-
-  /**
-   * Starts the event.
-   *
-   * Запускает событие.
-   */
-  protected start() {
-    if (isDomRuntime()) {
-      if (!this.event) {
-        this.event = new EventItem<HTMLElement, any>(
-          document.body,
-          ['keydown', 'keypress'],
-          this.on
-        )
-      }
-
-      this.go.reset()
-      this.event.start()
-    }
-  }
-
-  /**
-   * Stops the event.
-   *
-   * Останавливает событие.
-   */
-  protected stop() {
-    if (this.event) {
-      this.event.stop()
-      this.event = undefined
-      this.go.stop()
-    }
-  }
-
-  /**
-   * Updates the search value based on keyboard input.
-   *
-   * Обновляет значение поиска на основе ввода с клавиатуры.
-   * @param event keyboard event / событие клавиатуры
-   */
-  protected updateSearch(event: KeyboardEvent) {
-    const element = this.getActiveElement()
-
-    if (element) {
-      requestAnimationFrame(() => this.search.set(element.value))
-    } else {
-      this.search.add(event.key)
-    }
-  }
-
-  /**
-   * Method for tracking keys when a window is open.
-   *
-   * Метод для отслеживания нажатий при открытом окне.
-   * @param event event object/ объект события
-   */
-  protected readonly on = (event: KeyboardEvent) => {
-    if (
-      this.isNotInput(event.target as HTMLElement)
-      && this.data.getLength()
-    ) {
-      if (event.type === 'keypress') {
-        this.updateSearch(event)
-      } else {
-        const key = event.code || event.key || (event as any).keyCode
-
-        switch (key) {
-          case 'Backspace':
-          case 8:
-            this.updateSearch(event)
-            break
-          case 'ArrowUp':
-          case 38:
-            event.preventDefault()
-            this.go.previous()
-            break
-          case 'ArrowDown':
-          case 40:
-            event.preventDefault()
-            this.go.next()
-            break
-          case 'Enter':
-          case 'ArrowRight':
-          case ' ':
-          case 13:
-          case 39:
-            event.preventDefault()
-            this.go.open()
-            break
-          case 'ArrowLeft':
-          case 37:
-            event.preventDefault()
-            this.go.close()
-            break
-          case 'Space':
-          case 32:
-            if (!this.getActiveElement()) {
-              event.preventDefault()
-              this.go.open()
-            }
-            break
-        }
-      }
-    }
-  }
-}