@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Mask/MaskData.ts

@@ -1,287 +0,0 @@
-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

@@ -1,157 +0,0 @@
-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]
-  }
-}

package/src/constructors/Mask/MaskDesign.tsx

@@ -1,217 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { Mask } from './Mask'
-
-import {
-  type MaskPropsBasic
-} from './props'
-import {
-  type MaskClasses,
-  type MaskComponents,
-  type MaskEmits,
-  type MaskExpose,
-  type MaskSlots
-} from './types'
-
-/**
- * MaskDesign
- */
-export class MaskDesign<
-  COMP extends MaskComponents,
-  EXPOSE extends MaskExpose,
-  CLASSES extends MaskClasses,
-  P extends MaskPropsBasic
-> extends DesignConstructorAbstract<
-  HTMLInputElement,
-  COMP,
-  MaskEmits,
-  EXPOSE,
-  MaskSlots,
-  CLASSES,
-  P
-> {
-  protected readonly item: Mask
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, MaskEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Mask(
-      this.props,
-      this.refs,
-      this.element,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    )
-
-    this.init()
-  }
-
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  protected initExpose(): EXPOSE {
-    return {
-      valueBasic: this.item.basic,
-      value: this.item.value.item,
-      setValue: this.item.set,
-      clear: this.item.clear
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        input: this.getSubClass('input'),
-        character: this.getSubClass('character'),
-        characterItem: this.getSubClass('character__item')
-        // :classes [!] System label / Системная метка
-      }
-    } as Partial<CLASSES>
-  }
-
-  /**
-   * Refinement of the received list of styles.
-   *
-   * Доработка полученного списка стилей.
-   */
-  protected initStyles(): ConstrStyles {
-    return {}
-  }
-
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  protected initRender(): VNode {
-    const children: any[] = [
-      ...this.renderData(),
-      ...this.renderInput(),
-      ...this.renderView()
-    ]
-
-    return h('span', {
-      ...this.getAttrs(),
-      class: this.classes?.value.main
-    }, children)
-  }
-
-  /**
-   * Element for storing the final data.
-   *
-   * Элемент для хранения конечных данных.
-   */
-  protected renderData = (): VNode[] => {
-    if (this.props.name) {
-      return [
-        h('input', {
-          type: 'hidden',
-          name: this.props.name,
-          value: this.item.value.item.value
-        })
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Rendering method for input.
-   *
-   * Метод рендеринга для ввода.
-   */
-  protected renderInput = (): VNode[] => {
-    return [
-      h(
-        'input',
-        {
-          ...this.props.inputAttrs,
-
-          ref: this.element,
-          class: this.classes?.value.input,
-
-          type: 'text',
-          value: this.item.basic.value,
-
-          onFocus: this.item.event.onFocus,
-          onBlur: this.item.event.onBlur,
-          onKeydown: this.item.event.onKeydown,
-          onKeyup: this.item.event.onKeyup,
-          onBeforeinput: this.item.event.onBeforeinput,
-          onInput: this.item.event.onInput,
-          onChange: this.item.event.onChange,
-          onPaste: this.item.event.onPaste,
-          onClick: this.item.event.onClick
-        }
-      )
-    ]
-  }
-
-  /**
-   * Rendering method for displaying the mask and the input data.
-   *
-   * Метод рендеринга для вывода маски и вводимых данных.
-   */
-  protected renderView = (): VNode[] => {
-    const view = this.item.view.item.value
-    const children: any[] = []
-    let innerHTML: undefined | string = undefined
-
-    if (view.length > 0) {
-      view.forEach((character, key) => {
-        children.push(
-          h('span', {
-            key,
-            class: character.className,
-            innerHTML: character.value === ' ' ? '&nbsp;' : character.value
-          })
-        )
-      })
-    } else {
-      innerHTML = '&nbsp;'
-    }
-
-    return [
-      h(
-        'span',
-        {
-          'class': this.classes?.value.character,
-          'data-length': '1',
-          innerHTML
-        },
-        children
-      )
-    ]
-  }
-}