@dxtmisha/constructor 0.23.0

package/src/constructors/Mask/MaskCharacter.ts

@@ -0,0 +1,192 @@
+import { ref } from 'vue'
+
+import { MaskRubberItem } from './MaskRubberItem'
+import { MaskCharacterLength } from './MaskCharacterLength'
+import { MaskSpecial } from './MaskSpecial'
+import { MaskItem } from './MaskItem'
+import { MaskSelection } from './MaskSelection'
+
+import { MASK_CHAR_DELETE } from './basicTypes'
+import type { MaskProps } from './props'
+
+/**
+ * Class for working with and storing input characters.
+ *
+ * Класс для работы и хранения вводимых символов.
+ */
+export class MaskCharacter {
+  /** Entered characters list/ Список введённых символов */
+  readonly item = ref<string[]>([])
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param rubberItem object for working with rubber elements/ объект для работы с резиновыми элементами
+   * @param characterLength object for managing input length/ объект управления длиной ввода
+   * @param special object for working with special characters/ объект для работы со специальными символами
+   * @param mask object for managing masks/ объект управления маской
+   * @param selection object for managing cursor position/ объект для управления положением курсора
+   */
+  constructor(
+    protected readonly props: MaskProps,
+    protected readonly rubberItem: MaskRubberItem,
+    protected readonly characterLength: MaskCharacterLength,
+    protected readonly special: MaskSpecial,
+    protected readonly mask: MaskItem,
+    protected readonly selection: MaskSelection
+  ) {
+  }
+
+  /**
+   * Checks if the value is filled.
+   *
+   * Проверяет, заполнено ли значение.
+   */
+  is(): boolean {
+    return this.item.value.length > 0
+  }
+
+  /**
+   * Checks if the selected character was previously deleted.
+   *
+   * Проверяет, является ли выделенный символ ранее удалённым.
+   */
+  isCharDelete(): boolean {
+    const key = this.selection.get()
+
+    return key in this.item.value
+      && this.item.value[key] === MASK_CHAR_DELETE
+  }
+
+  /**
+   * Getting the selected mask character.
+   *
+   * Получение выбранного символа маски.
+   */
+  getFocus(): string {
+    return this.mask.get(this.selection.getFocus())
+  }
+
+  /**
+   * Getting the mask character by the key number of the nearest special character.
+   *
+   * Получение символа маски по номеру ключа ближайшего специального символа.
+   */
+  getImmediate(): string {
+    return this.mask.get(this.selection.getImmediate())
+  }
+
+  /**
+   * Getting the next mask character.
+   *
+   * Получение следующего символа маски.
+   */
+  getNext(): string {
+    return this.mask.get(this.selection.getNext())
+  }
+
+  /**
+   * Adding 1 entered character at its selection location.
+   *
+   * Добавление 1 введённого символа по месту его выделения.
+   * @param char entered character/ введённый символ
+   */
+  add(char: string): this {
+    this.item.value.splice(this.selection.get(), this.isCharDelete() ? 1 : 0, char)
+    this.selection.goNext().resetImmediate()
+    this.updateLength()
+
+    return this
+  }
+
+  /**
+   * Deleting 1 entered character at its selection location.
+   *
+   * Удаление 1 введённого символа по месту его выделения.
+   */
+  pop(): this {
+    const key = this.selection.get() - 1
+
+    if (this.isSpecialNextAnother()) {
+      this.item.value[key] = MASK_CHAR_DELETE
+    } else {
+      this.item.value.splice(key, 1)
+      this.updateLength()
+    }
+
+    this.selection.goBack().resetImmediate()
+
+    return this
+  }
+
+  /**
+   * Resets the values to the initial values.
+   *
+   * Сбрасывает значения до начальных.
+   */
+  reset(): this {
+    this.item.value = []
+    this.selection.set(0).resetImmediate()
+    this.updateLength()
+
+    return this
+  }
+
+  /**
+   * Shifts by 1 value depending on the direction of selection change.
+   *
+   * Сдвигает на 1 значение в зависимости от направления изменения выделения.
+   * @param status shift status/ статус сдвига
+   */
+  shift(status: number = 1): this {
+    this.characterLength.set(this.item.value.length + status)
+    return this
+  }
+
+  /**
+   * Checks if there is another group of special characters ahead.
+   *
+   * Проверяет, есть ли впереди другая группа специальных символов.
+   */
+  protected isSpecialNextAnother(): boolean {
+    const selection = this.selection.get() - 1
+    const length = this.item.value.length
+
+    if (
+      this.props.groupSave
+      && selection >= 0
+      && selection <= length
+    ) {
+      const info = this.mask.info.value
+      const char = info?.[selection]?.char
+
+      if (char && !this.rubberItem.is(char)) {
+        for (let i: number = selection; i < length; i++) {
+          if (info?.[i]) {
+            const charNext = info[i]?.char
+
+            if (
+              charNext
+              && this.special.isSpecial(charNext)
+              && char !== charNext
+            ) {
+              return true
+            }
+          }
+        }
+      }
+    }
+
+    return false
+  }
+
+  /**
+   * Updates the length of entered characters.
+   *
+   * Обновляет длину введённых символов.
+   */
+  protected updateLength(): this {
+    this.characterLength.set(this.item.value.length)
+    return this
+  }
+}

package/src/constructors/Mask/MaskCharacterLength.ts

@@ -0,0 +1,40 @@
+import { ref } from 'vue'
+
+/**
+ * Class for storing the length of entered characters.
+ *
+ * Класс для хранения длины введённых символов.
+ */
+export class MaskCharacterLength {
+  /** Current length value/ Текущее значение длины */
+  protected length = ref<number>(0)
+
+  /**
+   * Checks if there is at least one entered character.
+   *
+   * Проверяет, есть ли хотя бы один введённый символ.
+   */
+  is(): boolean {
+    return this.length.value > 0
+  }
+
+  /**
+   * Returns current length.
+   *
+   * Возвращает текущую длину.
+   */
+  get(): number {
+    return this.length.value
+  }
+
+  /**
+   * Sets new length value.
+   *
+   * Устанавливает новое значение длины.
+   * @param length new length value / новое значение длины
+   */
+  set(length: number): this {
+    this.length.value = length
+    return this
+  }
+}

package/src/constructors/Mask/MaskData.ts

@@ -0,0 +1,287 @@
+import type { Ref } from 'vue'
+import { isFilled, toArray } from '@dxtmisha/functional'
+
+import { MaskType } from './MaskType'
+import { MaskBuffer } from './MaskBuffer'
+import { MaskFocus } from './MaskFocus'
+import { MaskRubberTransition } from './MaskRubberTransition'
+import { MaskDate } from './MaskDate'
+import { MaskSpecial } from './MaskSpecial'
+import { MaskMatch } from './MaskMatch'
+import { MaskRubber } from './MaskRubber'
+import { MaskItem } from './MaskItem'
+import { MaskSelection } from './MaskSelection'
+import { MaskCharacter } from './MaskCharacter'
+import { MaskValueBasic } from './MaskValueBasic'
+import { MaskValue } from './MaskValue'
+import { MaskEmit } from './MaskEmit'
+
+import type { MaskElementInput } from './basicTypes'
+
+/**
+ * Class for working with input behavior (data entering flow)
+ *
+ * Класс для работы с поведением при вводе данных
+ */
+export class MaskData {
+  /**
+   * Constructor
+   * @param type object for working with the mask type/ объект для работы с типом маски
+   * @param buffer object for managing cached input data/ объект управления кешированными вводимыми данными
+   * @param focus object for handling input field focus/ объект для работы с фокусом поля ввода
+   * @param rubberTransition object for managing the transition character/ объект для управления символом перехода
+   * @param date object for working with date types/ объект для работы с типом даты
+   * @param special object for working with special characters/ объект для работы со специальными символами
+   * @param match object for managing the input character match logic/ объект для управления совпадением символов ввода
+   * @param rubber object for working with rubber types/ объект для работы с резиновыми типами
+   * @param mask object for managing masks/ объект управления маской
+   * @param selection object for managing caret position/ объект для управления положением курсора
+   * @param character object for managing entered characters/ объект для управления введёнными символами
+   * @param valueBasic object for working with base values/ объект для работы с базовыми значениями
+   * @param value object for working with transformed value/ объект для работы с преобразованным значением
+   * @param emit object for handling callback events/ объект для работы с событиями
+   * @param element input element ref/ ссылка на элемент ввода
+   */
+  constructor(
+    protected readonly type: MaskType,
+    protected readonly buffer: MaskBuffer,
+    protected readonly focus: MaskFocus,
+    protected readonly rubberTransition: MaskRubberTransition,
+    protected readonly date: MaskDate,
+    protected readonly special: MaskSpecial,
+    protected readonly match: MaskMatch,
+    protected readonly rubber: MaskRubber,
+    protected readonly mask: MaskItem,
+    protected readonly selection: MaskSelection,
+    protected readonly character: MaskCharacter,
+    protected readonly valueBasic: MaskValueBasic,
+    protected readonly value: MaskValue,
+    protected readonly emit: MaskEmit,
+    protected readonly element: Ref<MaskElementInput>
+  ) {
+  }
+
+  /**
+   * Adds new characters entered by user
+   *
+   * Добавляет новые символы, вводимые пользователем
+   * @param selection selected key index/ индекс выделенного ключа
+   * @param chars list of characters (string or array)/ список вводимых символов
+   * @param focus is element focused/ элемент в фокусе ли
+   * @returns was value updated/ было ли обновлено значение
+   */
+  add(
+    selection: number,
+    chars: string | string[],
+    focus = true
+  ): boolean {
+    let update = false
+
+    this.selection.setByMask(selection, focus)
+    this.rubberTransition.reset()
+
+    toArray(chars).forEach((char) => {
+      const groupName = this.character.getFocus()
+      const immediate = this.character.getImmediate()
+
+      this.selection.setShift(
+        this.rubber.update(this.value.info.value, immediate, char)
+      )
+
+      if (this.rubberTransition.is()) {
+        this.selection.setByMask(
+          this.mask.getByChar(
+            this.rubberTransition.item.value,
+            this.selection.getImmediate()
+          ) + 1,
+          focus
+        )
+      }
+
+      if (this.match.is(char, groupName)) {
+        this.character.shift()
+
+        if (
+          this.character.getFocus() && (
+            this.mask.maxLength.value > this.valueBasic.getLength()
+            || this.character.isCharDelete()
+          )
+        ) {
+          this.character.add(char)
+          update = true
+        }
+      }
+    })
+
+    this.goSelection()
+    return update
+  }
+
+  /**
+   * Removes (deletes) selected input characters
+   *
+   * Удаляет выделенные символы ввода
+   * @param start start selection index/ индекс начала выделения
+   * @param end end selection index/ индекс конца выделения
+   * @param focus is element focused/ элемент в фокусе ли
+   */
+  pop(
+    start: number,
+    end: number = start,
+    focus = true
+  ): this {
+    if (
+      start >= 0
+      && end <= this.mask.maxLength.value
+    ) {
+      let quantity = this.mask.getQuantity(start, end)
+
+      if (focus) {
+        this.selection.setByMask(end)
+      }
+
+      while (quantity--) {
+        this.rubberTransition.reset()
+
+        this.character.pop()
+        this.character.shift(0)
+
+        this.selection.setShift(
+          this.rubber.pop(this.character.getFocus())
+        )
+      }
+
+      this.goSelection()
+    }
+
+    return this
+  }
+
+  /**
+   * Resets all values or applies provided value
+   *
+   * Сбрасывает все значения или применяет переданное
+   * @param value new raw value to apply/ новое значение для применения
+   */
+  reset(value = ''): this {
+    this.character.reset()
+    this.rubber.reset()
+
+    if (isFilled(value)) {
+      const chars = this.type.isDate() ? this.date.getValue(value) : value
+      this.add(0, this.extra(chars.split('')))
+    }
+
+    return this
+  }
+
+  /**
+   * Removes redundant characters for paste operation
+   *
+   * Удаляет лишние символы при вставке
+   * @param chars characters to insert/ вставляемые символы
+   */
+  extra(chars: string[]): string[] {
+    if (this.character.is()) {
+      return chars
+    }
+
+    const list = this.mask.item.value
+    const data: string[] = [...chars]
+
+    let match = this.match.get(this.mask.info.value?.[0]?.char)
+    let key = 0
+
+    if (match) {
+      for (const index in list) {
+        const maskChar = list[index]
+        if (maskChar) {
+          if (this.special.isSpecial(maskChar)) {
+            for (let indexChar = key; indexChar < data.length; indexChar++) {
+              key++
+
+              if (data?.[indexChar]?.match(match)) {
+                break
+              }
+            }
+
+            match = this.match.get(maskChar)
+          } else if (maskChar.match(match)) {
+            let exit = false
+
+            for (let indexChar = key; indexChar < data.length; indexChar++) {
+              const dataChar = data[indexChar]
+
+              key++
+
+              if (dataChar?.match(match)) {
+                if (maskChar === dataChar) {
+                  data.splice(indexChar, 1)
+                  key--
+                } else {
+                  exit = true
+                }
+
+                break
+              }
+            }
+
+            if (exit) {
+              break
+            }
+          }
+        }
+      }
+    }
+
+    return data
+  }
+
+  /**
+   * Restores caret (selection) position
+   *
+   * Восстанавливает позицию курсора (выделения)
+   * @param updateBuffer update from buffer first/ сначала обновить из буфера
+   */
+  goSelection(updateBuffer = true): this {
+    if (this.focus.is()) {
+      requestAnimationFrame(() => {
+        if (
+          this.element.value && (
+            !updateBuffer
+            || !this.goBuffer()
+          )
+        ) {
+          const length = this.valueBasic.getLength()
+          const shift = this.selection.getShift()
+          const newSelection = length < shift ? length : shift
+
+          this.element.value.selectionEnd = newSelection
+          this.element.value.selectionStart = newSelection
+        }
+      })
+    }
+
+    return this
+  }
+
+  /**
+   * Processes buffered data if present and emits events
+   *
+   * Обрабатывает данные из буфера (если есть) и вызывает события
+   * @returns was buffer consumed/ был ли использован буфер
+   */
+  protected goBuffer(): boolean {
+    if (this.buffer.is()) {
+      this.add(this.selection.getShift(), this.buffer.get())
+      this.buffer.resetChars()
+
+      return true
+    }
+
+    this.buffer.reset()
+    this.emit.go()
+
+    return false
+  }
+}

package/src/constructors/Mask/MaskDate.ts

@@ -0,0 +1,157 @@
+import { computed } from 'vue'
+import { Datetime } from '@dxtmisha/functional'
+
+import { MaskType } from './MaskType'
+
+import type { FieldMasks, FieldPatternElement, FieldPatternList } from '../../types/fieldTypes'
+import type { MaskProps } from './props'
+
+const PATTERN_FOR_DATE: FieldPatternList = {
+  Y: '[0-9]{4}',
+  M: {
+    type: 'number',
+    min: '1',
+    max: '12'
+  },
+  D: (item: FieldMasks): FieldPatternElement => {
+    const date = new Datetime(`${item?.Y?.value ?? '2000'}-${item?.M?.value ?? '01'}-01`)
+
+    return {
+      type: 'number',
+      min: '1',
+      max: date.getMaxDay().toString()
+    }
+  },
+  h: {
+    type: 'number',
+    min: '0',
+    max: '23'
+  },
+  m: {
+    type: 'number',
+    min: '0',
+    max: '59'
+  },
+  s: {
+    type: 'number',
+    min: '0',
+    max: '59'
+  }
+}
+const VIEW_LIST: Record<string, string> = {
+  Y: 'y',
+  M: 'm',
+  D: 'd',
+  h: 'h',
+  m: 'm',
+  s: 's'
+}
+
+/**
+ * Class for working with date/time masks (date, datetime, time etc.).
+ *
+ * Класс для работы с масками даты/времени (date, datetime, time и т.п.).
+ */
+export class MaskDate {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type mask type helper/ объект помощник типа маски
+   */
+  constructor(
+    protected readonly props: MaskProps,
+    protected readonly type: MaskType
+  ) {
+  }
+
+  /** Mask template for current date type / Шаблон маски для текущего типа даты */
+  readonly mask = computed<string[]>(() => {
+    return this.getDatetime()
+      .setHour24(true)
+      .locale(undefined, '2-digit')
+      .replace('1987', 'YYYY')
+      .replace('12', 'MM')
+      .replace('18', 'DD')
+      .replace('10', 'hh')
+      .replace('20', 'mm')
+      .replace('30', 'ss')
+      .split('')
+  })
+
+  /**
+   * Returns base Datetime helper for given value (or default stub).
+   *
+   * Возвращает базовый помощник Datetime для значения (или дефолтный шаблон).
+   * @param date filled date string/ заполненная строка даты
+   */
+  getDatetime(date?: string): Datetime {
+    return new Datetime(date ?? '1987-12-18T10:20:30', this.type.getByDate(), this.props.language)
+  }
+
+  /**
+   * Returns localized formatted date/time value.
+   *
+   * Возвращает локализованное форматированное значение даты/времени.
+   * @param date filled date string/ заполненная строка даты
+   */
+  getValue(date?: string): string {
+    return this.getDatetime(date).locale(undefined, '2-digit')
+  }
+
+  /**
+   * Returns standardized (ISO-like) date/time value or empty if invalid.
+   *
+   * Возвращает стандартизированное (похоже на ISO) значение или пустую строку при невалидности.
+   * @param date masks data grouped by parts/ данные масок, сгруппированные по частям
+   */
+  getValueStandard(date: FieldMasks): string {
+    const value = this.getValueStandardFull(date)
+    return value === '' ? '' : this.getDatetime(value).standard(false)
+  }
+
+  /**
+   * Returns full raw date/time string assembled from groups (or empty if invalid).
+   *
+   * Возвращает полную «сырую» строку даты/времени, собранную из групп (или пусто если невалидно).
+   * @param date masks data grouped by parts/ данные масок, сгруппированные по частям
+   */
+  getValueStandardFull(date: FieldMasks): string {
+    const value = `${date?.Y?.value || '2000'}`
+      + `-${date?.M?.value || '01'}`
+      + `-${date?.D?.value || '01'}`
+      + `T${date?.h?.value || '00'}`
+      + `:${date?.m?.value || '00'}`
+      + `:${date?.s?.value || '00'}`
+
+    return isNaN(Date.parse(value)) ? '' : value
+  }
+
+  /**
+   * Returns validation patterns object for date/time parts.
+   *
+   * Возвращает объект паттернов валидации для частей даты/времени.
+   */
+  getPattern(): FieldPatternList {
+    return PATTERN_FOR_DATE
+  }
+
+  /** Returns list of date-only group symbols/ Возвращает список символов для даты */
+  getSpecialDate(): string[] {
+    return ['Y', 'M', 'D']
+  }
+
+  /** Returns list of full date-time group symbols/ Возвращает список символов для даты и времени */
+  getSpecialFull(): string[] {
+    return [...this.getSpecialDate(), 'h', 'm', 's']
+  }
+
+  /**
+   * Returns display symbol for group.
+   *
+   * Возвращает отображаемый символ для группы.
+   * @param groupName group name/ название группы
+   */
+  getView(groupName: string): string | undefined {
+    return VIEW_LIST?.[groupName]
+  }
+}