@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/classes/field/FieldArrowInclude.ts

@@ -0,0 +1,189 @@
+import { computed } from 'vue'
+import { toNumber } from '@dxtmisha/functional'
+
+import { FieldValueInclude } from './FieldValueInclude'
+import { FieldTypeInclude } from './FieldTypeInclude'
+
+import type { FieldAllProps, FieldArrowProps } from '../../types/fieldTypes'
+
+/**
+ * Class for working with input arrows.
+ *
+ * Класс для работы со стрелками ввода.
+ */
+export class FieldArrowInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param value object for working with values/ объект для работы со значениями
+   * @param type object for working with input type/ объект для работы с типом ввода
+   */
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly value: FieldValueInclude,
+    protected readonly type?: FieldTypeInclude
+  ) {
+  }
+
+  /**
+   * Indicates if arrows are enabled/ Указывает, включены ли стрелки
+   *
+   * @return true if arrows are enabled/ true, если стрелки включены
+   */
+  readonly is = computed<boolean>(() => {
+    return Boolean(this.props.arrow && this.props.arrow !== 'none')
+  })
+
+  /** Indicates if the previous button is disabled/ Указывает, отключена ли кнопка предыдущего */
+  readonly disabledPrevious = computed<boolean>(() => !this.isPrevious(this.value.number.value))
+
+  /** Indicates if the next button is disabled/ Указывает, отключена ли кнопка следующего */
+  readonly disabledNext = computed<boolean>(() => !this.isNext(this.value.number.value))
+
+  /** Returns the change step/ Возвращает шаг изменения */
+  protected readonly step = computed<number>(() => toNumber(this.props.arrowStep ?? this.props.step ?? 1))
+
+  /** Returns the minimum value/ Возвращает минимальное значение */
+  protected readonly min = computed<number | undefined>(() => toNumber(this.props.min) ?? undefined)
+
+  /** Returns the maximum value/ Возвращает максимальное значение */
+  protected readonly max = computed<number | undefined>(() => toNumber(this.props.max) || undefined)
+
+  /**
+   * Checks if the arrow type is carousel.
+   *
+   * Проверяет, является ли тип стрелок carousel.
+   */
+  isCarousel(): boolean {
+    return this.get() === 'carousel'
+  }
+
+  /**
+   * Checks if the arrow type is stepper.
+   *
+   * Проверяет, является ли тип стрелок stepper.
+   */
+  isStepper(): boolean {
+    return this.get() === 'stepper'
+  }
+
+  /**
+   * Checks if it is possible to decrease the value.
+   *
+   * Проверяет, можно ли уменьшить значение.
+   * @param value values for checking/ значения для проверки
+   */
+  isPrevious(value: number): boolean {
+    const min = this.min.value
+    return min === undefined || value > min
+  }
+
+  /**
+   * Checks if it is possible to increase the value.
+   *
+   * Проверяет, можно ли увеличить значение.
+   * @param value values for checking/ значения для проверки
+   */
+  isNext(value: number): boolean {
+    const max = this.max.value
+    return max === undefined || value < max
+  }
+
+  /**
+   * Returns arrow type.
+   *
+   * Возвращает тип стрелок.
+   */
+  get(): FieldArrowProps['arrow'] | undefined {
+    switch (this.props.arrow) {
+      case 'auto':
+        if (
+          this.type?.get() === 'number'
+          || this.type?.get() === 'number-format'
+        ) {
+          return 'stepper'
+        }
+
+        break
+    }
+
+    return this.props.arrow
+  }
+
+  /**
+   * Returns arrow alignment.
+   *
+   * Возвращает выравнивание стрелок.
+   */
+  align(): string | undefined {
+    return this.props.arrowAlign
+  }
+
+  /**
+   * Decreases the value.
+   *
+   * Уменьшает значение.
+   */
+  previous(): this {
+    const value = this.value.number.value - this.step.value
+
+    if (this.isPrevious(value)) {
+      this.value.set(value.toString())
+    } else {
+      this.toMin()
+    }
+
+    return this
+  }
+
+  /**
+   * Increases the value.
+   *
+   * Увеличивает значение.
+   */
+  next(): this {
+    const value = this.value.number.value + this.step.value
+
+    if (this.isNext(value)) {
+      this.value.set(value.toString())
+    } else {
+      this.toMax()
+    }
+
+    return this
+  }
+
+  /**
+   * Decreases to the minimum value.
+   *
+   * Уменьшает до минимального значения.
+   */
+  toMin(): this {
+    if (!this.disabledPrevious.value) {
+      const min = this.min.value
+
+      if (min !== undefined) {
+        this.value.set(min.toString())
+      }
+    }
+
+    return this
+  }
+
+  /**
+   * Increases to the maximum value.
+   * s
+   * Увеличивает до максимального значения.
+   */
+  toMax(): this {
+    if (!this.disabledNext.value) {
+      const max = this.max.value
+
+      if (max !== undefined) {
+        this.value.set(max.toString())
+      }
+    }
+
+    return this
+  }
+}

package/src/classes/field/FieldAttributesInclude.ts

@@ -1,7 +1,9 @@
 import { computed } from 'vue'
+import { toBinds } from '@dxtmisha/functional'
 
 import { FieldTypeInclude } from './FieldTypeInclude'
 import { FieldPatternInclude } from './FieldPatternInclude'
+import { FieldInputModeInclude } from './FieldInputModeInclude'
 
 import type { FieldAllProps } from '../../types/fieldTypes'
 
@@ -17,43 +19,19 @@ export class FieldAttributesInclude {
    * @param type object for working with input type/ объект для работы с типом ввода
    * @param pattern object for working with checks by regular expressions/
    * объект для работы с проверкой по регулярным выражениям
+   * @param inputMode object for working with the keyboard/ объект для работы с клавиатурой
    */
   constructor(
     protected readonly props: FieldAllProps,
     protected readonly type?: FieldTypeInclude,
-    protected readonly pattern?: FieldPatternInclude
+    protected readonly pattern?: FieldPatternInclude,
+    protected readonly inputMode?: FieldInputModeInclude
   ) {
   }
 
   /** Returns data for verification/ Возвращает данные для проверки */
   readonly list = computed<Record<string, any>>(() => {
-    const data: Record<string, any> = {}
-
-    this.getAttributes().forEach((index) => {
-      if (index in this.props) {
-        switch (index) {
-          case 'type':
-            if (this.type) {
-              data[index] = this.type.item.value
-            } else {
-              data[index] = this.props.type
-            }
-            break
-          case 'pattern':
-            if (this.pattern) {
-              data.pattern = this.pattern.item.value
-            }
-            break
-          default:
-            data[index] = this.props[index]
-        }
-      }
-    })
-
-    return {
-      ...data,
-      ...this.props.inputAttrs
-    }
+    return this.getData(this.getAttributes())
   })
 
   /** Returns data for verification/ Возвращает данные для проверки */
@@ -74,6 +52,11 @@ export class FieldAttributesInclude {
     return data
   })
 
+  /** Returns data for the input element/ Возвращает данные для элемента ввода */
+  readonly listForInput = computed<Record<string, any>>(() => {
+    return this.getData(this.getInputAttributes())
+  })
+
   /**
    * Returns the list of attributes to be set on the input element.
    *
@@ -97,4 +80,80 @@ export class FieldAttributesInclude {
       'pattern'
     ]
   }
+
+  /**
+   * Returns the list of attributes to be set on the input element.
+   *
+   * Возвращает список атрибутов, которые нужно установить на элемент ввода.
+   */
+  protected getInputAttributes(): (keyof typeof this.props)[] {
+    return [
+      ...this.getAttributes(),
+
+      // Input
+      'list',
+
+      // Value
+      'placeholder',
+
+      // Basic
+      'readonly',
+      'disabled',
+      'autofocus',
+      'tabindex',
+      'form',
+
+      // UX
+      'autocomplete',
+      'autocapitalize',
+      'inputMode',
+      'enterKeyHint',
+      'spellcheck',
+      'autocorrect'
+    ]
+  }
+
+  /**
+   * Returns data for the specified attributes.
+   *
+   * Возвращает данные для указанных атрибутов.
+   * @param attributes list of attributes/ список атрибутов
+   */
+  protected getData(attributes: (keyof typeof this.props)[]): Record<string, any> {
+    const data: Record<string, any> = {}
+
+    attributes.forEach((index) => {
+      let value: any = undefined
+
+      if (index in this.props) {
+        switch (index) {
+          case 'type':
+            if (this.type) {
+              value = this.type.item.value
+            } else {
+              value = this.props.type
+            }
+            break
+          case 'pattern':
+            if (this.pattern) {
+              value = this.pattern.item.value
+            }
+            break
+          case 'inputMode':
+            if (this.inputMode) {
+              value = this.inputMode.item.value
+            }
+            break
+          default:
+            value = this.props[index]
+        }
+      }
+
+      if (value !== undefined) {
+        data[index] = value
+      }
+    })
+
+    return toBinds(data, this.props.inputAttrs)
+  }
 }

package/src/classes/field/FieldChangeInclude.ts

@@ -44,7 +44,7 @@ export class FieldChangeInclude {
    *
    * Принудительно помечает как изменённое
    */
-  toChange() {
+  to() {
     if (!this.item.value) {
       this.set(true)
     }

package/src/classes/field/FieldElementInclude.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import { type Ref } from 'vue'
 import type { FieldAllProps, FieldElementInput } from '../../types/fieldTypes'
 
 /**

package/src/classes/field/FieldEventInclude.ts

@@ -0,0 +1,253 @@
+import { type ConstrEmit } from '@dxtmisha/functional'
+
+import { ModelInclude } from '../ModelInclude'
+import { FieldChangeInclude } from './FieldChangeInclude'
+import { FieldValueInclude } from './FieldValueInclude'
+import { FieldValidationInclude } from './FieldValidationInclude'
+
+import type { FieldAllProps, FieldBasicEmits, FieldValidationItem } from '../../types/fieldTypes'
+
+/**
+ * Class for working with events.
+ *
+ * Класс для работы с событиями.
+ */
+export class FieldEventInclude {
+  protected readonly model: ModelInclude
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param change object for working with data change label/ объект для работы с меткой об изменении данных
+   * @param value object for working with values/ объект для работы со значениями
+   * @param validation object for working with validity/ объект для работы с валидностью
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly change: FieldChangeInclude,
+    protected readonly value: FieldValueInclude,
+    protected readonly validation?: FieldValidationInclude,
+    protected readonly emits?: ConstrEmit<FieldBasicEmits>
+  ) {
+    this.model = new ModelInclude(
+      'value',
+      this.emits,
+      this.value.itemByFull
+    )
+  }
+
+  /**
+   * Events for losing focus.
+   *
+   * События для потери фокуса.
+   */
+  readonly onBlur = () => {
+    this.change.to()
+  }
+
+  /**
+   * Call of data change event.
+   *
+   * Вызов события изменения данных.
+   * @param event event object/ объект события
+   * @param data object with data/ объект с данными
+   */
+  readonly onInput = (
+    event: InputEvent,
+    data?: Record<string, any>
+  ): void => {
+    if (this.isEnabled()) {
+      const newData = data ?? event
+
+      if (
+        this.change.is()
+        || data
+      ) {
+        this.validation?.set(newData)
+      }
+
+      this.value.setByEvent(newData)
+      this.on(event)
+    }
+  }
+
+  /**
+   * Triggering the change event after losing focus.
+   *
+   * Вызов события изменения после потери фокуса.
+   * @param event event object/ объект события
+   */
+  readonly onChange = (event?: InputEvent | Event): void => {
+    if (this.isEnabled()) {
+      if (event) {
+        this.validation?.set(event)
+      }
+
+      this.change.to()
+      this.on(event, 'change')
+    }
+  }
+
+  /**
+   * Triggering the event for select change.
+   *
+   * Вызов события для изменения селект.
+   * @param event event object/ объект события
+   * @param data object with data/ объект с данными
+   */
+  readonly onSelect = (
+    event: Event,
+    data?: Record<string, any>
+  ): void => {
+    if (this.isEnabled()) {
+      this.value.setByEvent(data ?? event)
+      this.onAndChange(event)
+    }
+  }
+
+  /**
+   * Triggering the event for changes in the checkbox.
+   *
+   * Вызов события для изменения в checkbox.
+   * @param event event object/ объект события
+   */
+  readonly onChecked = (event: Event): void => {
+    if (this.isEnabled()) {
+      this.value.setByChecked(event)
+      this.onAndChange(event)
+    }
+  }
+
+  /**
+   * Triggering the event for changes in the radio.
+   *
+   * Вызов события для изменения в radio.
+   * @param event event object/ объект события
+   */
+  readonly onRadio = (event: Event): void => {
+    if (this.isEnabled()) {
+      this.value.setByRadio(event)
+      this.onAndChange(event)
+    }
+  }
+
+  /**
+   * Triggering the event to delete all values.<br>
+   * Вызов события для удаления всех значений.
+   * @param event event object/ объект события
+   */
+  readonly onClear = (event: MouseEvent): void => {
+    if (this.isEnabled()) {
+      this.value.clear()
+      this.onAndChange(event)
+    }
+  }
+
+  /**
+   * Triggering the event to set a specific value.
+   *
+   * Вызов события для установки конкретного значения.
+   * @param value new value/ новое значение
+   */
+  readonly onValue = (value: any): void => {
+    if (this.isEnabled()) {
+      this.value.set(value)
+      this.onAndChange()
+    }
+  }
+
+  /**
+   * Triggering the event.
+   *
+   * Вызов события.
+   * @param event event object/ объект события
+   * @param type event type/ тип события
+   */
+  readonly on = <E>(
+    event?: E,
+    type: string & keyof FieldBasicEmits = 'input'
+  ): this => {
+    if (type === 'input') {
+      this.model.emit(this.value.itemByFull.value)
+    }
+
+    this.emits?.(type as 'input', event as Event, {
+      ...this.getValidation(type),
+      ...this.getData()
+    })
+
+    return this
+  }
+
+  /**
+   * Checks whether additional data needs to be generated for the current event.
+   *
+   * Проверяет, надо ли генерировать дополнительные данные для текущего события.
+   * @param type event type/ тип события
+   */
+  protected isValue(
+    type: string & keyof FieldBasicEmits
+  ): boolean {
+    return Boolean(type && ['input', 'change'].indexOf(type) >= 0)
+  }
+
+  /**
+   * Checks if it is possible to change the value.
+   *
+   * Проверяет, возможно ли изменение значения.
+   */
+  protected isEnabled(): boolean {
+    return this.props.disabled !== true
+  }
+
+  /**
+   * Returns input data.
+   *
+   * Возвращает данные об вводе.
+   */
+  protected getData(): FieldValidationItem {
+    return {
+      value: this.value.itemByFull.value,
+      valueInput: this.value.item.value,
+      detail: this.props.detail
+    }
+  }
+
+  /**
+   * Returns validity data.
+   *
+   * Возвращает данные валидности.
+   * @param type event type/ тип события
+   */
+  protected getValidation(
+    type: string & keyof FieldBasicEmits
+  ): FieldValidationItem {
+    if (this.isValue(type)) {
+      if (this.validation) {
+        return this.validation.item.value
+      }
+
+      return {
+        group: 'check',
+        value: this.value.item.value
+      }
+    }
+
+    return {} as FieldValidationItem
+  }
+
+  /**
+   * Triggering the event and change event.
+   *
+   * Вызов события и события изменения.
+   * @param event event object/ объект события
+   */
+  protected onAndChange(event?: InputEvent | Event): this {
+    this.on(event)
+      .onChange(event)
+
+    return this
+  }
+}

package/src/classes/field/FieldInputModeInclude.ts

@@ -0,0 +1,48 @@
+import { computed } from 'vue'
+import { FieldTypeInclude } from './FieldTypeInclude'
+
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+/**
+ * Class for getting the type of displayed keyboard.
+ *
+ * Класс для получения типа отображаемой клавиатуры.
+ */
+export class FieldInputModeInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type object for working with input type/ объект для работы с типом ввода
+   */
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly type: FieldTypeInclude
+  ) {
+  }
+
+  /** Returns the keyboard name/ Возвращает название клавиатуры */
+  readonly item = computed<string | undefined>(() => {
+    if (this.props.inputMode) {
+      return this.props.inputMode
+    }
+
+    switch (this.type.item.value) {
+      case 'number':
+      case 'datetime':
+      case 'date':
+      case 'year-month':
+      case 'time':
+      case 'hour-minute':
+        return 'numeric'
+      case 'number-format':
+      case 'currency':
+        return 'decimal'
+      case 'tel':
+        return 'tel'
+      case 'email':
+        return 'email'
+      default:
+        return undefined
+    }
+  })
+}

package/src/classes/field/FieldMatchInclude.ts

@@ -1,4 +1,6 @@
-import { anyToString, isObject, Translate } from '@dxtmisha/functional'
+import { anyToString, isObject } from '@dxtmisha/functional'
+
+import { TextInclude } from '../TextInclude'
 
 import { FieldElementInclude } from './FieldElementInclude'
 import { FieldValueInclude } from './FieldValueInclude'
@@ -17,11 +19,13 @@ export class FieldMatchInclude {
    * @param props input data/ входные данные
    * @param element object for working with input element/ объект для работы с элементом ввода
    * @param value object for working with value/ объект для работы со значениями
+   * @param text object for working with texts/ объект для работы с текстами
    */
   constructor(
     protected readonly props: FieldAllProps,
     protected readonly element: FieldElementInclude,
-    protected readonly value: FieldValueInclude
+    protected readonly value: FieldValueInclude,
+    protected readonly text?: TextInclude
   ) {
   }
 
@@ -65,7 +69,9 @@ export class FieldMatchInclude {
         return this.props.match.validationMessage
       }
 
-      return Translate.getSync('Your entries must match.')
+      if (this.text) {
+        return this.text.entriesMatch.value ?? ''
+      }
     }
 
     return ''