@dxtmisha/constructor 0.23.0

package/src/classes/field/FieldCodeInclude.ts

@@ -0,0 +1,69 @@
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+/**
+ * Class for processing standard error text
+ *
+ * Класс для обработки стандартного текста ошибки
+ */
+export class FieldCodeInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: FieldAllProps
+  ) {
+  }
+
+  /**
+   * Returns error text
+   *
+   * Возвращает текст ошибки
+   * @param state object with validity state/ объект с данными валидности
+   */
+  get(state?: ValidityState): string | undefined {
+    const validationCode = this.props.validationCode
+
+    if (
+      state
+      && validationCode
+      && !state.valid
+    ) {
+      if (typeof validationCode === 'string') {
+        return validationCode
+      } else {
+        const index = this.getIndex(state)
+
+        if (
+          index
+          && index in validationCode
+        ) {
+          return validationCode[index]
+        }
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Returns error key (first matched)
+   *
+   * Возвращает ключ ошибки (первый найденный)
+   * @param state object with validity state/ объект с данными валидности
+   */
+  protected getIndex(state: ValidityState): keyof ValidityState | undefined {
+    const data = Object.entries(state) as ([keyof ValidityState, boolean])[]
+
+    for (const [code, value] of data) {
+      if (
+        code !== 'valid'
+        && value
+      ) {
+        return code
+      }
+    }
+
+    return undefined
+  }
+}

package/src/classes/field/FieldElementInclude.ts

@@ -0,0 +1,97 @@
+import type { Ref } from 'vue'
+import type { FieldAllProps, FieldElementInput } from '../../types/fieldTypes'
+
+/**
+ * Class for working with input elements.
+ *
+ * Класс для работы с элементами ввода.
+ */
+export class FieldElementInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param element input element/ элемент ввода
+   */
+
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly element: Ref<FieldElementInput>
+  ) {
+  }
+
+  /**
+   * Returns the input element.
+   *
+   * Возвращает элемент ввода.
+   */
+  get(): HTMLInputElement | undefined {
+    const element = this.element.value
+
+    if (element) {
+      if ('input' in element) {
+        return element.input
+      }
+
+      return element as HTMLInputElement
+    }
+
+    return undefined
+  }
+
+  /**
+   * Returns a reference to the input element.
+   *
+   * Возвращает ссылку на элемент ввода.
+   */
+  getElement(): Ref<FieldElementInput> {
+    return this.element
+  }
+
+  /**
+   * Search for an element by its name inside a group or by selector.
+   *
+   * Поиск элемента по его названию внутри группы или по селектору.
+   * @param nameSelectors element name or selector /<br>название элемента или селектор
+   */
+  findByName(nameSelectors: string | HTMLInputElement): HTMLInputElement | undefined {
+    if (nameSelectors instanceof Element) {
+      return nameSelectors
+    }
+
+    const form = this.get()?.form
+
+    if (form) {
+      const item = form.querySelector<HTMLInputElement>(`[name="${nameSelectors}"]`)
+
+      if (item) {
+        return item
+      }
+    }
+
+    const globalItem = document.querySelector<HTMLInputElement>(nameSelectors)
+
+    if (globalItem) {
+      return globalItem
+    }
+
+    return undefined
+  }
+
+  /**
+   * Clear all values to the original ones.
+   *
+   * Очисти все значения до оригинальных.
+   */
+  clear(): this {
+    const element = this.element.value
+
+    if (
+      element
+      && 'clear' in element
+    ) {
+      element.clear?.()
+    }
+
+    return this
+  }
+}

package/src/classes/field/FieldInputCheckInclude.ts

@@ -0,0 +1,128 @@
+import {
+  anyToString,
+  createElement,
+  executeFunction,
+  isFilled,
+  isString
+} from '@dxtmisha/functional'
+
+import type { FieldCodeInclude } from './FieldCodeInclude'
+
+import type {
+  FieldElementDom,
+  FieldPatternElement,
+  FieldPatternItemOrFunction,
+  FieldValidationItem
+} from '../../types/fieldTypes'
+
+/**
+ * The class creates hidden input and runs native validation for pattern
+ *
+ * Класс создаёт скрытый input и выполняет нативную валидацию по паттерну
+ */
+export class FieldInputCheckInclude<Value = any> {
+  /** Hidden input element for native validation/ Скрытый input для нативной валидации */
+  readonly input: HTMLInputElement | undefined
+
+  /**
+   * Constructor
+   * @param pattern property for verification/ свойство для проверки
+   * @param group group name/ название группы
+   * @param code object for error codes/ объект для работы с кодами ошибок
+   */
+  constructor(
+    readonly pattern: FieldPatternItemOrFunction,
+    readonly group: string = FieldInputCheckInclude.getGroupDefault(),
+    protected readonly code?: FieldCodeInclude
+  ) {
+    this.input = createElement<HTMLInputElement>(
+      undefined,
+      'input',
+      this.getAttributes()
+    )
+  }
+
+  /**
+   * Runs validation and returns result
+   *
+   * Выполняет проверку и возвращает результат
+   */
+  check(value: Value): FieldValidationItem {
+    const input = this.input
+
+    if (input) {
+      if (
+        input.type === 'checkbox'
+        || input.type === 'radio'
+      ) {
+        input.checked = Boolean(value)
+      } else {
+        input.value = anyToString(value)
+      }
+
+      return this.checkByInput(input)
+    }
+
+    return {
+      group: this.group,
+      status: true,
+      value
+    }
+  }
+
+  /**
+   * Runs validation by input and returns result
+   *
+   * Выполняет проверку по инпуту и возвращает результат
+   * @param input input element/ элемент инпута
+   */
+  checkByInput(
+    input: FieldElementDom
+  ): FieldValidationItem {
+    return {
+      group: this.group,
+      input,
+      status: input.checkValidity(),
+      validationMessage: input.validationMessage,
+      validity: input.validity,
+      validityMessage: this.code?.get(input.validity),
+      required: input.required,
+      pattern: this.pattern,
+      value: input.value
+    }
+  }
+
+  /**
+   * Returns attributes for internal input
+   *
+   * Возвращает атрибуты для внутреннего инпута
+   */
+  protected getAttributes(): FieldPatternElement {
+    const pattern = this.pattern
+
+    if (isFilled(pattern)) {
+      const attributes: FieldPatternElement = executeFunction(pattern)
+
+      if (isFilled(attributes)) {
+        if (isString(attributes)) {
+          return { pattern: attributes }
+        }
+
+        return attributes
+      }
+    }
+
+    return {}
+  }
+
+  /**
+   * Returns the default group name
+   *
+   * Возвращает название группы по умолчанию
+   */
+  static getGroupDefault(): string {
+    return 'check'
+  }
+}
+
+export type FieldInputCheckListInclude = Record<string, FieldInputCheckInclude>

package/src/classes/field/FieldMatchInclude.ts

@@ -0,0 +1,101 @@
+import { anyToString, isObject, Translate } from '@dxtmisha/functional'
+
+import { FieldElementInclude } from './FieldElementInclude'
+import { FieldValueInclude } from './FieldValueInclude'
+import { FieldInputCheckInclude } from './FieldInputCheckInclude'
+
+import type { FieldAllProps, FieldValidationItem } from '../../types/fieldTypes'
+
+/**
+ * Class for checking input value matching with another element
+ *
+ * Класс для проверки совпадения вводимого значения с другим элементом
+ */
+export class FieldMatchInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param element object for working with input element/ объект для работы с элементом ввода
+   * @param value object for working with value/ объект для работы со значениями
+   */
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly element: FieldElementInclude,
+    protected readonly value: FieldValueInclude
+  ) {
+  }
+
+  /**
+   * Checks whether matching verification is enabled
+   *
+   * Проверяет, включена ли проверка совпадения
+   */
+  is(): boolean {
+    return Boolean(this.props.match)
+  }
+
+  /**
+   * Returns selector used to find external element
+   *
+   * Возвращает селектор для поиска внешнего элемента
+   */
+  getSelectors() {
+    if (this.is()) {
+      if (isObject(this.props.match)) {
+        return this.props.match.name
+      }
+
+      return this.props.match
+    }
+
+    return undefined
+  }
+
+  /**
+   * Returns validation error text
+   *
+   * Возвращает текст ошибки валидации
+   */
+  getValidationMessage(): string {
+    if (this.is()) {
+      if (
+        isObject(this.props.match)
+        && this.props.match?.validationMessage
+      ) {
+        return this.props.match.validationMessage
+      }
+
+      return Translate.getSync('Your entries must match.')
+    }
+
+    return ''
+  }
+
+  /**
+   * Checks value against external element
+   *
+   * Проверяет совпадение значения с внешним элементом
+   */
+  check(): FieldValidationItem | undefined {
+    const selectors = this.getSelectors()
+
+    if (selectors) {
+      const input = this.element.findByName(selectors)
+
+      if (
+        input
+        && anyToString(input.value) !== this.value.string.value
+      ) {
+        return {
+          group: FieldInputCheckInclude.getGroupDefault(),
+          status: false,
+          input: this.element.get(),
+          validationMessage: this.getValidationMessage(),
+          value: this.value.item.value
+        }
+      }
+    }
+
+    return undefined
+  }
+}

package/src/classes/field/FieldPatternInclude.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue'
+
+import { FieldTypeInclude } from './FieldTypeInclude'
+
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+const PATTERNS: Record<string, string> = {
+  email: '[\\S]+@[\\S]{2,}\\.[\\w]{2,}',
+  password: '[0-9a-zA-Z\\-!@#$%^&*]+'
+}
+
+/**
+ * Class for working with checks by regular expressions.
+ *
+ * Класс для работы с проверкой по регулярным выражениям.
+ */
+export class FieldPatternInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type object for working with input type/ объект для работы с типом ввода
+   */
+
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly type?: FieldTypeInclude
+  ) {
+  }
+
+  /** Returns regular expressions/ Возвращает регулярные выражения */
+  readonly item = computed<string | undefined>(() => {
+    if (this.props.pattern) {
+      return this.props.pattern
+    }
+
+    if (this.type) {
+      return PATTERNS?.[this.type.item.value]
+    }
+
+    return undefined
+  })
+}

package/src/classes/field/FieldTypeInclude.ts

@@ -0,0 +1,42 @@
+import { computed } from 'vue'
+
+import { FieldVisibilityInclude } from './FieldVisibilityInclude'
+
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+/**
+ * Class for working with the input type.
+ *
+ * Класс для работы с типом ввода.
+ */
+export class FieldTypeInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param visibility object for working with visualization/ объект для работы с визуализацией
+   */
+
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly visibility?: FieldVisibilityInclude
+  ) {
+  }
+
+  /** Returns the input type/ Возвращает тип ввода */
+  readonly item = computed<string>(() => {
+    if (this.props.arrow) {
+      return 'number'
+    }
+
+    const type = this.props.type
+
+    if (
+      type === 'password'
+      && this.visibility?.item.value
+    ) {
+      return 'text'
+    }
+
+    return type ?? 'text'
+  })
+}

package/src/classes/field/FieldValidationInclude.ts

@@ -0,0 +1,196 @@
+import { computed, ref } from 'vue'
+
+import { FieldInputCheckInclude } from './FieldInputCheckInclude'
+
+import type { FieldElementInclude } from './FieldElementInclude'
+import type { FieldAttributesInclude } from './FieldAttributesInclude'
+import type { FieldChangeInclude } from './FieldChangeInclude'
+import type { FieldValueInclude } from './FieldValueInclude'
+import type { FieldCodeInclude } from './FieldCodeInclude'
+import type { FieldMatchInclude } from './FieldMatchInclude'
+
+import type { FieldAllProps, FieldValidationItem } from '../../types/fieldTypes'
+
+/**
+ * Class for working with validity
+ *
+ * Класс для работы с валидностью
+ */
+export class InputValidation {
+  /** Internal validation state/ Внутреннее состояние валидации */
+  protected readonly validation = ref<FieldValidationItem>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param element object for working with input element/ объект для работы с элементом ввода
+   * @param attributes object for working with input attributes/ объект для работы с атрибутами ввода
+   * @param value object for value work/ объект для работы со значениями
+   * @param change object for change state/ объект для состояния изменения
+   * @param code object for error codes/ объект для работы с кодами ошибок
+   * @param match object for match checking/ объект для проверки совпадений
+   */
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly element: FieldElementInclude,
+    protected readonly attributes: FieldAttributesInclude,
+    protected readonly value: FieldValueInclude,
+    protected readonly change?: FieldChangeInclude,
+    protected readonly code?: FieldCodeInclude,
+    protected readonly match?: FieldMatchInclude
+  ) {
+  }
+
+  /** Hidden input element for native validation/ Скрытый input для нативной валидации */
+  protected readonly input = computed<FieldInputCheckInclude>(
+    () => new FieldInputCheckInclude(
+      this.attributes.listForCheck.value,
+      undefined,
+      this.code
+    )
+  )
+
+  /** Returns error data/ Возвращает данные об ошибке */
+  readonly item = computed<FieldValidationItem>(() => {
+    const global = this.checkGlobal()
+
+    if (global) {
+      return global
+    }
+
+    const check = this.checkItem() ?? this.match?.check()
+
+    if (check) {
+      return check
+    }
+
+    return this.getValidationItemNone()
+  })
+
+  /** Returns error string/ Возвращает строку об ошибке */
+  readonly message = computed<string>(() => {
+    if (this.props.validationMessage) {
+      return this.props.validationMessage
+    }
+
+    if (
+      !this.change
+      || this.change.is()
+    ) {
+      const data = this.item.value
+
+      return data.validityMessage
+        ?? data.validationMessage
+        ?? ''
+    }
+
+    return ''
+  })
+
+  /**
+   * Checks if there is an error
+   *
+   * Проверяет, есть ли ошибка
+   */
+  isError(): boolean {
+    return !this.item.value?.status
+  }
+
+  /**
+   * Checks whether the element has constraints and satisfies them
+   *
+   * Проверяет, имеет ли элемент ограничения и удовлетворяет ли им
+   */
+  readonly checkValidity = (): boolean => {
+    return !this.isError()
+  }
+
+  /**
+   * Changes the validity data
+   *
+   * Изменяет данные о валидности
+   * @param validation values for validity/ значения для валидности
+   */
+  set(validation: Record<string, any> | FieldValidationItem): this {
+    if (
+      'status' in validation
+      && 'validationMessage' in validation
+      && 'value' in validation
+    ) {
+      this.validation.value = validation as FieldValidationItem
+    } else if (
+      'target' in validation
+      && (
+        validation.target instanceof HTMLInputElement
+        || validation.target instanceof HTMLTextAreaElement
+      )
+      && Number(validation.target.minLength) > -1
+    ) {
+      this.validation.value = this.input.value.checkByInput(validation.target)
+    } else {
+      this.validation.value = undefined
+    }
+
+    return this
+  }
+
+  /**
+   * Returns an empty validation item
+   *
+   * Возвращает пустой элемент валидации
+   */
+  protected getValidationItemNone(): FieldValidationItem {
+    return {
+      group: FieldInputCheckInclude.getGroupDefault(),
+      status: true,
+      value: undefined
+    }
+  }
+
+  /**
+   * Check for global data
+   *
+   * Проверка для глобальных данных
+   */
+  protected checkGlobal(): FieldValidationItem | undefined {
+    if (this.props.validationMessage) {
+      return {
+        group: FieldInputCheckInclude.getGroupDefault(),
+        status: false,
+        validationMessage: this.props.validationMessage,
+        value: this.value.item.value
+      }
+    }
+
+    return this.validation.value ?? undefined
+  }
+
+  /**
+   * Check for selected data
+   *
+   * Проверка для выбранных данных
+   */
+  protected checkItem(): FieldValidationItem | undefined {
+    const values = this.value.getToArray()
+
+    for (const value of values) {
+      const check = this.checkByInput(value)
+
+      if (!check.status) {
+        return check
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Checks the value using hidden input element
+   * @param value value to check/ значение для проверки
+   *
+   * Проверяет значение с помощью скрытого input
+   */
+  protected checkByInput(value: any): FieldValidationItem {
+    return this.input.value.check(value)
+  }
+}