@dxtmisha/constructor 0.23.0

package/src/constructors/Mask/MaskRight.ts

@@ -0,0 +1,43 @@
+import { MaskType } from './MaskType'
+
+import { type MaskProps } from './props'
+
+/**
+ * Class for handling alignment of masked value (direction & numeric rules).
+ *
+ * Класс для управления выравниванием маски (направление и числовые правила).
+ */
+export class MaskRight {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type mask type helper/ объект помощник типа маски
+   */
+  constructor(
+    protected readonly props: MaskProps,
+    protected readonly type: MaskType
+  ) {
+  }
+
+  /**
+   * Returns whether the content should visually end-align (numeric, rtl, currency).
+   *
+   * Возвращает, нужно ли визуально выравнивать по концу (числа, rtl, валюта).
+   */
+  isEnd(): boolean {
+    return this.props.align !== 'left' && (
+      this.props.dir === 'rtl'
+      || (this.type.isCurrency() && !this.props.currencyHide)
+      || this.type.isNumberFormat()
+    )
+  }
+
+  /**
+   * Checks if alignment is right (explicit right or end alignment).
+   *
+   * Проверяет, что выравнивание справа (явно right или конечное).
+   */
+  isRight(): boolean {
+    return this.props.align === 'right' || this.isEnd()
+  }
+}

package/src/constructors/Mask/MaskRubber.ts

@@ -0,0 +1,156 @@
+import { computed } from 'vue'
+import { getColumn, isArray, isSelected, isString, replaceRecursive } from '@dxtmisha/functional'
+
+import { MaskType } from './MaskType'
+import { MaskRubberItem } from './MaskRubberItem'
+import { MaskRubberTransition } from './MaskRubberTransition'
+
+import { MaskSpecial } from './MaskSpecial'
+import { MaskMatch } from './MaskMatch'
+import { MaskFormat } from './MaskFormat'
+
+import type { FieldMasks } from '../../types/fieldTypes'
+import type {
+  MaskSpecialItem,
+  MaskSpecialList
+} from './basicTypes'
+import type { MaskProps } from './props'
+
+/**
+ * Class for working with the rubber type.
+ *
+ * Класс для работы с резиновым типом.
+ */
+export class MaskRubber {
+  /**
+   * Constructor
+   * @param props base data/ базовые данные
+   * @param type object for working with the mask type/ объект для работы с типом маски
+   * @param rubberItem object for working with rubber elements/ объект для работы с резиновыми элементами
+   * @param rubberTransition object for managing the transition character/ объект для управления символом перехода
+   * @param special object for working with special characters/ объект для работы со специальными символами
+   * @param match object for managing the input character/ объект для управления символом ввода
+   * @param format object for managing numeric mask types/ объект для управления числовыми типами масок
+   */
+  constructor(
+    protected readonly props: MaskProps,
+    protected readonly type: MaskType,
+    protected readonly rubberItem: MaskRubberItem,
+    protected readonly rubberTransition: MaskRubberTransition,
+    protected readonly special: MaskSpecial,
+    protected readonly match: MaskMatch,
+    protected readonly format: MaskFormat
+  ) {
+  }
+
+  /**
+   * Checks if the symbol is a transition.
+   *
+   * Проверяет, является ли символ перехода.
+   * @param char checkable symbol/ проверяемый символ
+   */
+  isTransition(char: string): boolean {
+    return this.transition.value.indexOf(char) >= 0
+  }
+
+  /**
+   * Getting properties for the rubber group.
+   *
+   * Получение свойства для резиновой группы.
+   * @param groupName group name/ название группы
+   */
+  get(groupName: string): MaskSpecialItem | undefined {
+    return this.list.value?.[groupName]
+  }
+
+  /**
+   * Updates the group of rubber symbols if all conditions are met and returns true.
+   *
+   * Обновляет группу резиновых символов, если все условия подходят, и возвращает true.
+   * @param data values for verification/ значения для проверки
+   * @param groupName group name/ название группы
+   * @param char symbol for checking/ символ для проверки
+   */
+  update(
+    data: FieldMasks,
+    groupName: string,
+    char: string
+  ): boolean {
+    const item = this.get(groupName)
+    const value = data?.[groupName]
+
+    if (item && value) {
+      if (
+        isSelected(char, item?.transitionChar) || (
+          item?.maxLength
+          && item?.maxLength <= value?.chars.length
+        )
+      ) {
+        this.rubberTransition.set(groupName)
+        return false
+      }
+
+      if (
+        value.end
+        && this.match.is(char, groupName)
+        && !this.rubberTransition.isChar(groupName)
+      ) {
+        this.rubberItem.add(groupName)
+        this.rubberTransition.reset()
+      }
+
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Reduces the length of the entered symbol by its group.
+   *
+   * Уменьшает длину вводимого символа по его группе.
+   * @param groupName group name/ название группы
+   */
+  pop(groupName: string): boolean {
+    return this.rubberItem.pop(groupName)
+  }
+
+  /**
+   * Resets all states of all groups to the initial one.
+   *
+   * Сбрасывает все состояния всех групп до начального.
+   */
+  reset(): this {
+    this.rubberItem.reset()
+    this.rubberTransition.reset()
+
+    return this
+  }
+
+  /** List of rubber groups/ Список резиновых групп */
+  protected readonly list = computed<MaskSpecialList>(() => {
+    const special = this.special.rubberList.value
+
+    if (this.type.isCurrencyOrNumber()) {
+      return replaceRecursive(
+        this.format.rubber.value,
+        special
+      )
+    }
+
+    return special
+  })
+
+  /** List of transition symbols/ Список символов перехода */
+  protected readonly transition = computed<string[]>(() => {
+    return getColumn(
+      Object.values(this.list.value).filter(
+        item => 'transitionChar' in item && (
+          isString(item.transitionChar)
+          || isArray(item.transitionChar)
+        )
+      ),
+      'transitionChar'
+    ).flat() as string[]
+  })
+}

package/src/constructors/Mask/MaskRubberItem.ts

@@ -0,0 +1,96 @@
+import { ref } from 'vue'
+import { forEach, getExp, strFill } from '@dxtmisha/functional'
+
+/**
+ * Class for storing counts of entered characters for elastic ("rubber") groups.
+ *
+ * Класс для хранения количества введённых символов для «резиновых» групп.
+ */
+export class MaskRubberItem {
+  /** Map: group name -> entered length/ Карта: имя группы -> введённая длина */
+  protected readonly item = ref<Record<string, number>>({})
+
+  /**
+   * Checks whether group has a non‑zero stored length.
+   *
+   * Проверяет, есть ли у группы ненулевая длина.
+   * @param groupName group name / название группы
+   */
+  is(groupName: string): boolean {
+    return Number(this.item.value?.[groupName]) > 0
+  }
+
+  /**
+   * Returns stored length for group (0 if none).
+   *
+   * Возвращает сохранённую длину группы (0 если нет).
+   * @param groupName group name / название группы
+   */
+  getByIndex(groupName: string): number {
+    return this.item.value?.[groupName] ?? 0
+  }
+
+  /**
+   * Increments stored length for group by 1.
+   *
+   * Увеличивает сохранённую длину группы на 1.
+   * @param groupName group name / название группы
+   */
+  add(groupName: string): this {
+    this.item.value = {
+      ...this.item.value,
+      [groupName]: this.getByIndex(groupName) + 1
+    }
+
+    return this
+  }
+
+  /**
+   * Decreases stored length for group by 1 (if > 0).
+   *
+   * Уменьшает сохранённую длину группы на 1 (если > 0).
+   * @param groupName group name / название группы
+   * @returns true if decreased / true если уменьшено
+   */
+  pop(groupName: string): boolean {
+    if (this.is(groupName)) {
+      this.item.value = {
+        ...this.item.value,
+        [groupName]: this.getByIndex(groupName) - 1
+      }
+
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Resets all stored lengths.
+   *
+   * Сбрасывает все сохранённые длины.
+   */
+  reset(): this {
+    this.item.value = {}
+    return this
+  }
+
+  /**
+   * Expands mask by duplicating matched group placeholders according to stored lengths.
+   *
+   * Расширяет маску, дублируя плейсхолдеры групп по сохранённым длинам.
+   * @param mask original mask / исходная маска
+   */
+  expandMask(mask: string): string {
+    let value = mask
+
+    forEach(this.item.value, (length, index) => {
+      value = value.replace(
+        getExp(index, 'g', '([:value]+)'),
+        (all: string) => `${all}${strFill(index, length)}`
+      )
+    })
+
+    return value
+  }
+}

package/src/constructors/Mask/MaskRubberTransition.ts

@@ -0,0 +1,50 @@
+import { ref } from 'vue'
+
+/**
+ * Class for storing and working with the transition symbol for the active group.
+ *
+ * Класс для хранения и работы с символом перехода для активной группы.
+ */
+export class MaskRubberTransition {
+  /** Transition symbol value/ Значение символа перехода */
+  readonly item = ref<string>('')
+
+  /**
+   * Checks if a transition symbol is set.
+   *
+   * Проверяет, установлен ли символ перехода.
+   */
+  is(): boolean {
+    return this.item.value !== ''
+  }
+
+  /**
+   * Checks if provided char equals current transition symbol.
+   *
+   * Проверяет, совпадает ли символ с текущим символом перехода.
+   * @param char candidate char / проверяемый символ
+   */
+  isChar(char: string): boolean {
+    return this.item.value === char
+  }
+
+  /**
+   * Sets new transition symbol.
+   *
+   * Устанавливает новый символ перехода.
+   * @param char transition symbol / символ перехода
+   */
+  set(char: string): this {
+    this.item.value = char
+    return this
+  }
+
+  /**
+   * Resets transition symbol to empty.
+   *
+   * Сбрасывает символ перехода в пустой.
+   */
+  reset(): this {
+    return this.set('')
+  }
+}

package/src/constructors/Mask/MaskSelection.ts

@@ -0,0 +1,208 @@
+import { MaskSpecial } from './MaskSpecial'
+import { MaskItem } from './MaskItem'
+
+/**
+ * Class for working with the character input location.
+ *
+ * Класс для работы с местом ввода символа.
+ */
+export class MaskSelection {
+  /** Selection value/ Значение выделения */
+  protected value: number = 0
+  /** Immediate selection value/ Значение непосредственного выделения */
+  protected immediate: number = 0
+  /** Shift flag/ Флаг сдвига */
+  protected shift: boolean = false
+
+  /**
+   * Constructor
+   * @param special object for working with special characters/ объект для работы со специальными символами
+   * @param mask object for managing masks/ объект управления маской
+   */
+  constructor(
+    protected readonly special: MaskSpecial,
+    protected readonly mask: MaskItem
+  ) {
+  }
+
+  /**
+   * Getting the selection key number.
+   *
+   * Получение номера ключа выделения.
+   */
+  get(): number {
+    return this.value
+  }
+
+  /**
+   * Returns the selection number for the first element that is a special symbol.
+   *
+   * Возвращает номер выделения для первого элемента, являющегося специальным символом.
+   */
+  getFirst(): number {
+    return this.mask.info.value?.[0]?.key ?? 0
+  }
+
+  /**
+   * Getting the current key of the selected character.
+   *
+   * Получение текущего ключа выделенного символа.
+   */
+  getFocus(): number {
+    return this.getCharacter(this.value)
+  }
+
+  /**
+   * Getting the next key of the selected character.
+   *
+   * Получение следующего ключа выделенного символа.
+   */
+  getNext(): number {
+    return this.getCharacter(this.value + 1)
+  }
+
+  /**
+   * Getting the previous key of the selected symbol.
+   *
+   * Получение предыдущего ключа выделенного символа.
+   */
+  getPrevious(): number {
+    return this.getCharacter(this.value - 1)
+  }
+
+  /**
+   * Getting the key number of the nearest special character.
+   *
+   * Получение номера ключа ближайшего специального символа.
+   */
+  getImmediate(): number {
+    return this.getCharacter(this.immediate)
+  }
+
+  /**
+   * Getting the number of the key shifted to the left direction.
+   *
+   * Получение номера ключа, сдвинутого в левом направлении.
+   */
+  getShift(): number {
+    if (this.shift) {
+      return this.value > 0 ? (this.getCharacter(this.value - 1) + 1) : 0
+    }
+
+    return this.getFocus()
+  }
+
+  /**
+   * Changing the selection key number.
+   *
+   * Изменение номера ключа выделения.
+   * @param selection selection number/ номер выделения
+   */
+  set(selection: number): this {
+    this.value = selection
+    return this
+  }
+
+  /**
+   * Changes the selection key number according to the mask structure.
+   *
+   * Изменяет номер ключа выделения по структуре маски.
+   * @param selection selection number/ номер выделения
+   * @param focus is the element in focus/ элемент в фокусе ли
+   */
+  setByMask(selection: number, focus = true): this {
+    if (focus) {
+      let value: number | undefined
+      let immediate: number | undefined
+
+      this.mask.info.value.forEach((item) => {
+        if (value === undefined && item.key >= selection) {
+          value = item.index
+        }
+
+        if (item.key <= selection) {
+          immediate = item.index
+        }
+      })
+
+      this.set(value !== undefined ? value : this.mask.getLengthBySpecial())
+      this.setImmediate(immediate !== undefined ? immediate : this.mask.getLengthBySpecial())
+    }
+
+    return this
+  }
+
+  /**
+   * Changing the selection key for the nearest special character.
+   *
+   * Изменение ключа выделения для ближайшего специального символа.
+   * @param immediate selection key number/ номер ключа выделения
+   */
+  setImmediate(immediate: number): this {
+    this.immediate = immediate
+    return this
+  }
+
+  /**
+   * Turning shift on or off.
+   *
+   * Включение или отключение сдвига.
+   * @param shift value for shift/ значение для сдвига
+   */
+  setShift(shift: boolean): this {
+    this.shift = shift
+    return this
+  }
+
+  /**
+   * Resets the selection key for the nearest special character to the selection location.
+   *
+   * Сбрасывает ключ выделения для ближайшего специального символа до места выделения.
+   */
+  resetImmediate(): this {
+    this.immediate = this.value <= 0 ? 0 : this.value - 1
+    return this
+  }
+
+  /**
+   * Move the selection location back by 1 step.
+   *
+   * Передвигаем место выделения назад на 1 шаг.
+   */
+  goBack(): this {
+    if (this.value > 0) {
+      this.value--
+    }
+
+    return this
+  }
+
+  /**
+   * Move the selection location forward by 1 step.
+   *
+   * Передвигаем место выделения вперед на 1 шаг.
+   */
+  goNext(): this {
+    if (this.value <= this.mask.getLength()) {
+      this.value++
+    }
+
+    return this
+  }
+
+  /**
+   * Getting the key number at the selection location.
+   *
+   * Получение номера ключа по месту выделения.
+   * @param selection selection location/ место выделения
+   */
+  protected getCharacter(selection: number): number {
+    for (const item of this.mask.info.value) {
+      if (item.index >= selection) {
+        return item.key
+      }
+    }
+
+    return this.mask.getLength()
+  }
+}