@dxtmisha/constructor 0.23.0

package/src/constructors/List/ListFocus.ts

@@ -0,0 +1,196 @@
+import { computed, type Ref, ref } from 'vue'
+import {
+  goScroll,
+  type ListDataItem,
+  type ListSelectedItem
+} from '@dxtmisha/functional'
+import type { ListProps } from './props'
+
+/**
+ * Class for working with element focus.
+ *
+ * Класс для работы с фокусировкой элемента.
+ */
+export class ListFocus {
+  readonly item = ref<ListDataItem>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param element input element/ элемент ввода
+   * @param listId unique list identifier/ уникальный идентификатор списка
+   */
+  constructor(
+    protected readonly props: ListProps,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly listId: number
+  ) {
+  }
+
+  /** Returns the value of the selected element/ Возвращает значение выбранного элемента */
+  readonly focus = computed<ListSelectedItem | undefined>(() => this.item.value?.index ?? this.props.focus)
+
+  /**
+   * Returns the selected element.
+   *
+   * Возвращает выбранный элемент.
+   * @param index element index/ индекс элемента
+   */
+  isElement(index?: string): boolean {
+    return Boolean(this.getElement(index))
+  }
+
+  /**
+   * Checks if the element is an item.
+   *
+   * Проверяет, является ли элемент элементом.
+   */
+  isItem(): boolean {
+    return this.item.value?.type === 'item'
+  }
+
+  /**
+   * Checks if the element is a group.
+   *
+   * Проверяет, является ли элемент группой.
+   */
+  isGroup(): boolean {
+    return this.item.value?.type === 'group'
+  }
+
+  /**
+   * Checks if the element is a menu.
+   *
+   * Проверяет, является ли элемент меню.
+   */
+  isMenu(): boolean {
+    return this.item.value?.type === 'menu'
+  }
+
+  /**
+   * Checks if the group or menu is open.
+   *
+   * Проверяет, открыта ли группа или меню.
+   */
+  isOpen(): boolean {
+    const element = this.getElement()
+
+    if (
+      element
+      && (this.isGroup() || this.isMenu())
+    ) {
+      return element.dataset.status === 'open'
+    }
+
+    return false
+  }
+
+  /**
+   * Returns the selected element.
+   *
+   * Возвращает выбранный элемент.
+   */
+  get(): ListDataItem | undefined {
+    return this.item.value
+  }
+
+  /**
+   * Returns the selector for the desired element by its index.
+   *
+   * Возвращает селектор нужного элемента по его индексу.
+   * @param index element index/ индекс элемента
+   */
+  getSelector(index?: string): string {
+    return `[data-list-id="${this.listId}"][data-value="${index ?? this.item.value?.index}"]`
+  }
+
+  /**
+   * Returns the HTML element of the selected item.
+   *
+   * Возвращает HTML элемент выбранного элемента.
+   * @param index element index/ индекс элемента
+   */
+  getElement(index?: string): HTMLDivElement | undefined {
+    return document.querySelector<HTMLDivElement>(this.getSelector(index)) ?? undefined
+  }
+
+  /**
+   * Changes the selected element.
+   *
+   * Изменяет выбранный элемент.
+   * @param item new value/ новое значение
+   */
+  set(item: ListDataItem | undefined): this {
+    if (this.item.value !== item) {
+      this.item.value = item
+    }
+
+    return this
+  }
+
+  /**
+   * Resets the selected element.
+   *
+   * Сбрасывает выбранный элемент.
+   */
+  reset(): this {
+    this.set(undefined)
+    return this
+  }
+
+  /**
+   * Performs a click on the selected element.
+   *
+   * Выполняет клик на выбранном элементе.
+   */
+  click() {
+    this.getElement()?.click()
+  }
+
+  /**
+   * Moves to the value in focus.
+   *
+   * Перемещает к значению в фокусе.
+   */
+  toElementFocus(): boolean {
+    if (this.item.value) {
+      const element = this.getElement()
+
+      if (element) {
+        this.toElement(element)
+
+        return true
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Scrolls to the desired element by its index.
+   *
+   * Скроллирует к нужному элементу по его индексу.
+   * @param index element index/ индекс элемента
+   */
+  toElementSelected(index: string): this {
+    this.toElement(this.getElement(index))
+    return this
+  }
+
+  /**
+   * Scrolls to the desired element.
+   *
+   * Скроллирует к нужному элементу.
+   * @param element the element to scroll to/ элемент, до которого надо проскроллить
+   */
+  protected toElement(element?: HTMLElement) {
+    const selector = '*[data-window-body]'
+
+    if (
+      element
+      && element.closest(selector)
+    ) {
+      goScroll(selector, element)
+    }
+  }
+}

package/src/constructors/List/ListGo.ts

@@ -0,0 +1,283 @@
+import {
+  type ConstrEmit,
+  isSelected,
+  ListData
+} from '@dxtmisha/functional'
+
+import { ListFocus } from './ListFocus'
+
+import type { ListProps } from './props'
+import type { ListEmits } from './types'
+
+/**
+ * Class for working with element focus.
+ *
+ * Класс для работы с фокусировкой элемента.
+ */
+export class ListGo {
+  protected index: number = -1
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param focus object of the class for working with focus/ объект класса для работы с фокусировкой
+   * @param data object of the class for working with the list/ объект класса для работы со списком
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: ListProps,
+    protected readonly focus: ListFocus,
+    protected readonly data: ListData,
+    protected readonly emits?: ConstrEmit<ListEmits>
+  ) {
+  }
+
+  /**
+   * Changing the index in focus by the number in the array.
+   *
+   * Изменение значения в фокусе по номеру в массиве.
+   * @param index number in the array/ номер в массиве
+   */
+  set(index: number): boolean {
+    if (this.index !== index) {
+      if (index < 0) {
+        this.reset()
+      } else {
+        this.setByIndex(index)
+      }
+
+      this.focus.toElementFocus()
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Changes the selected element.
+   *
+   * Изменяет выбранный элемент.
+   * @param value new value/ новое значение
+   */
+  preparation(value: any) {
+    const map = this.data.map.value
+    const index = map.findIndex(item => isSelected(item.index, value))
+
+    this.reset()
+
+    if (index) {
+      this.index = index
+
+      if (map?.[index]) {
+        this.focus.toElementSelected(map[index].index)
+      }
+    }
+  }
+
+  /**
+   * Scrolls the element to the selected element
+   *
+   * Прокрутить элемент до выбранного элемента
+   */
+  preparationBySelected() {
+    if (this.props.selected) {
+      requestAnimationFrame(() => this.preparation(this.props.selected))
+    }
+  }
+
+  /**
+   * Moves the selected value back.
+   *
+   * Перемещает выбранное значение назад.
+   */
+  previous() {
+    if (this.isFirstByParent()) {
+      return
+    }
+
+    this.setByIndex(this.index - 1)
+
+    if (!this.focus.toElementFocus()) {
+      this.previous()
+    }
+  }
+
+  /**
+   * Moves the selected value forward.
+   *
+   * Перемещает выбранное значение вперед.
+   */
+  next() {
+    if (this.isLastByParent()) {
+      return
+    }
+
+    this.setByIndex(this.index + 1)
+
+    if (!this.focus.toElementFocus()) {
+      this.next()
+    }
+  }
+
+  /**
+   * Reset all records to the initial state.
+   *
+   * Сброс всех записей до начального состояния.
+   */
+  reset() {
+    this.index = -1
+    this.focus.reset()
+  }
+
+  /**
+   * Opens the window if the element is in it.
+   *
+   * Открывает окно, если элемент в нем.
+   */
+  open(): void {
+    if (
+      this.focus.isGroup()
+      || this.focus.isMenu()
+    ) {
+      this.focus.click()
+      this.nextByType()
+    }
+  }
+
+  /**
+   * Closes the window if the element is in it.
+   *
+   * Закрывает окно, если элемент в нем.
+   */
+  close(): void {
+    const item = this.getMainItem()
+
+    if (item) {
+      item.click()
+
+      const focus = this.data.getItemByIndex(item.dataset.value)
+
+      if (focus) {
+        this.set(focus.key)
+        this.focus.set(focus.item)
+      }
+    } else {
+      this.emits?.('close')
+    }
+  }
+
+  /**
+   * Stops the event.
+   *
+   * Останавливает событие.
+   */
+  stop() {
+    this.focus.reset()
+  }
+
+  /**
+   * Checks if the next element is in the same window.
+   *
+   * Проверяет, находится ли следующий элемент в том же окне.
+   */
+  protected isFirstByParent(): boolean {
+    const parent = this.focus.item.value?.parent
+
+    if (
+      parent
+      && this.focus.isElement()
+    ) {
+      return this.data.getFirstItemByParent(parent)?.index === this.focus.item.value?.index
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if the next element is in the same window.
+   *
+   * Проверяет, находится ли следующий элемент в том же окне.
+   */
+  protected isLastByParent(): boolean {
+    const parent = this.focus.item.value?.parent
+
+    if (
+      parent
+      && this.focus.isElement()
+    ) {
+      return this.data.getLastItemByParent(parent)?.index === this.focus.item.value?.index
+    }
+
+    return false
+  }
+
+  /**
+   * Checks if the element is in a window.
+   *
+   * Проверяет, находится ли элемент в окне.
+   */
+  protected getMainItem(): HTMLDivElement | undefined {
+    const parent = this.focus.item.value?.parent
+
+    if (
+      parent
+      && !this.focus.isOpen()
+    ) {
+      return this.focus.getElement(parent)
+    }
+
+    return undefined
+  }
+
+  /**
+   * Changing the index in focus by the number in the array.
+   *
+   * Изменение значения в фокусе по номеру в массиве.
+   * @param index number in the array/ номер в массиве
+   */
+  protected setByIndex(index: number): void {
+    const length = this.data.getLengthByMap()
+
+    if (index >= length) {
+      this.index = 0
+    } else if (index < 0) {
+      this.index = length - 1
+    } else {
+      this.index = index
+    }
+
+    const item = this.data.map.value[this.index]
+
+    if (
+      item
+      && (
+        item.type === 'item'
+        || item.type === 'group'
+        || item.type === 'menu'
+      )
+    ) {
+      this.focus.set(item)
+    } else {
+      this.focus.reset()
+    }
+  }
+
+  /**
+   * Moves the selected value forward by type.
+   *
+   * Перемещает выбранное значение вперед по типу.
+   */
+  protected nextByType(): void {
+    this.setByIndex(this.index + 1)
+
+    if (
+      this.focus.isItem()
+      || this.focus.isGroup()
+      || this.focus.isMenu()
+    ) {
+      return
+    } else {
+      this.nextByType()
+    }
+  }
+}

package/src/constructors/List/ListSearch.ts

@@ -0,0 +1,113 @@
+import { computed, ref } from 'vue'
+import { isFilled } from '@dxtmisha/functional'
+
+import type { ListProps } from './props'
+
+/**
+ * Class for working with search.
+ *
+ * Класс для работы с поиском.
+ */
+export class ListSearch {
+  readonly item = ref<string>()
+
+  protected timeout?: any
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: ListProps
+  ) {
+  }
+
+  /** Current search string/ Текущая строка поиска */
+  readonly highlight = computed<string | undefined>(() => this.item.value ?? this.props.highlight)
+
+  /**
+   * Adds a new character to the search.
+   *
+   * Добавляет новый символ к поиску.
+   * @param char new character/ новый символ
+   */
+  add(char: string) {
+    this.addChar(char)
+      .makeReset()
+  }
+
+  /**
+   * Sets the search string.
+   *
+   * Устанавливает строку поиска.
+   * @param value new value/ новое значение
+   */
+  set(value?: string) {
+    const data = this.getValue(value)
+
+    if (this.item.value !== data) {
+      this.item.value = data
+    }
+  }
+
+  /**
+   * Resets the search string.
+   *
+   * Сбрасывает строку поиска.
+   */
+  reset(): this {
+    this.set()
+    return this
+  }
+
+  /**
+   * Returns a processed value.
+   *
+   * Возвращает обработанное значение.
+   * @param value source value/ исходное значение
+   */
+  protected getValue(value?: string): string | undefined {
+    if (isFilled(value)) {
+      return value.trim()
+    }
+
+    return undefined
+  }
+
+  /**
+   * Appends a character to the search string.
+   *
+   * Добавляет символ к строке поиска.
+   * @param char new character/ новый символ
+   */
+  protected addChar(char: string): this {
+    if (
+      this.item.value
+      && this.timeout
+    ) {
+      this.item.value += char
+    } else {
+      this.item.value = char
+    }
+
+    return this
+  }
+
+  /**
+   * Schedules reset to the initial state after a delay.
+   *
+   * Планирует сброс к исходному состоянию после задержки.
+   */
+  protected makeReset(): this {
+    if (this.timeout) {
+      clearTimeout(this.timeout)
+    }
+
+    this.timeout = setTimeout(
+      () => (this.timeout = undefined),
+      2000
+    )
+
+    return this
+  }
+}

package/src/constructors/List/basicTypes.ts

@@ -0,0 +1,3 @@
+export type ListComponentInclude = {
+  list?: object
+}

package/src/constructors/List/index.ts

@@ -0,0 +1,5 @@
+export * from './List'
+export * from './ListDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/List/properties.json

@@ -0,0 +1,16 @@
+{
+  "#space": {},
+  "#line": {},
+  "#subtitle": {},
+  "#html": {},
+  "#management": {},
+  "#group": {},
+  "#menu": {},
+  "#menuGroup": {},
+  "~axis": {
+    "~x": {},
+    "~y": {},
+    "_default": "y"
+  },
+  "~divider": {}
+}

package/src/constructors/List/props.ts

@@ -0,0 +1,76 @@
+import type {
+  ConstrBind,
+  ListRecord,
+  ListSelectedItem,
+  ListSelectedList
+} from '@dxtmisha/functional'
+import type { IconPropsBasic, IconValue } from '../Icon'
+import type { ListItemPropsBasic } from '../ListItem'
+
+interface ListPropsToken {
+  // :type [!] System label / Системная метка
+  axis?: 'x' | 'y'
+  divider?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ListPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  ListItem extends ListItemPropsBasic = ListItemPropsBasic
+> {
+  // Status
+  focus?: ListSelectedItem
+  selected?: ListSelectedList
+  disabled?: boolean
+  lite?: boolean
+
+  // Value
+  list?: ListRecord<ListItem>
+  liteThreshold?: number
+  highlight?: string
+  highlightLengthStart?: number
+
+  keyLabel?: string
+  keyValue?: string
+
+  // Style
+  tag?: 'div' | 'button' | 'a' | 'span' | string
+
+  axis?: 'x' | 'y'
+  divider?: boolean
+
+  itemAttrs?: ConstrBind<ListItem>
+  itemManagementAttrs?: ConstrBind<ListItem>
+  itemGroupAttrs?: ConstrBind<ListItem>
+  itemMenuAttrs?: ConstrBind<ListItem>
+
+  iconArrowDown?: IconValue<Icon>
+  iconArrowRight?: IconValue<Icon>
+
+  // Technical
+  control?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ListProps extends ListPropsBasic, ListPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsList = {
+  keyLabel: 'label',
+  keyValue: 'value',
+  tag: 'div',
+  ...{
+    // :default [!] System label / Системная метка
+    axis: 'y'
+    // :default [!] System label / Системная метка
+  }
+}