@dxtmisha/constructor 0.23.0

package/src/classes/LabelHighlightInclude.ts

@@ -0,0 +1,90 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrClass, getExp, isFilled } from '@dxtmisha/functional'
+
+import { LabelInclude } from './LabelInclude'
+import { SkeletonInclude } from '../constructors/Skeleton'
+
+import type { LabelHighlightProps, LabelHighlightSlots } from '../types/labelTypes'
+
+/**
+ * The LabelHighlightInclude class extends LabelInclude to add support for highlighting parts of text.
+ * Used to display a label with the ability to highlight specific parts.
+ *
+ * Класс LabelHighlightInclude расширяет LabelInclude и добавляет поддержку выделения частей текста.
+ * Используется для отображения метки с возможностью выделения определённых частей.
+ */
+export class LabelHighlightInclude extends LabelInclude {
+  /**
+   * Constructor for the LabelHighlightInclude class.
+   *
+   * Конструктор для класса LabelHighlightInclude.
+   * @param props input property/ входное свойство
+   * @param className class name/ название класса
+   * @param classesExtra additional classes/ дополнительные классы
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param elementsExtra additional elements/ дополнительные элементы
+   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   */
+  constructor(
+    protected readonly props: Readonly<LabelHighlightProps>,
+    protected readonly className: string,
+    protected readonly classesExtra?: ConstrClass,
+    protected readonly slots?: LabelHighlightSlots,
+    protected readonly elementsExtra?: () => VNode[],
+    protected readonly skeleton?: SkeletonInclude
+  ) {
+    super(
+      props,
+      className,
+      classesExtra,
+      slots,
+      elementsExtra,
+      computed(() => this.getLabel()),
+      undefined,
+      skeleton
+    )
+  }
+
+  /**
+   * Returns a string with highlighted parts.
+   * If highlighting is not required, returns the original string.
+   *
+   * Возвращает строку с выделенными частями.
+   * Если выделение не требуется, возвращает исходную строку.
+   */
+  protected getLabel = (): string | undefined => {
+    const props = this.props
+
+    if (
+      props.highlight
+      && props.highlight.length >= this.getLengthStart()
+      && props.label
+    ) {
+      const className = `${this.className}__highlight`
+      const label = props.label.toString()
+      const exp = getExp(props.highlight, 'i')
+
+      if (label.match(exp)) {
+        return label.replace(exp, text => `<span class="${className}">${text}</span>`)
+      }
+
+      if (
+        isFilled(props.value)
+        && props.value.toString().match(exp)
+      ) {
+        return `<span class="${className}">${label}</span>`
+      }
+    }
+
+    return undefined
+  }
+
+  /**
+   * Returns the minimum length of the string to start highlighting.
+   *
+   * Возвращает минимальную длину строки для начала выделения.
+   */
+  protected getLengthStart() {
+    return this.props.highlightLengthStart ?? 2
+  }
+}

package/src/classes/LabelInclude.ts

@@ -0,0 +1,171 @@
+import { computed, type Ref, type VNode } from 'vue'
+import { type ConstrClass, isFilled, render } from '@dxtmisha/functional'
+
+import { SkeletonInclude } from '../constructors/Skeleton'
+
+import type { LabelAlternativeSlots, LabelProps, LabelSlots } from '../types/labelTypes'
+
+/**
+ * Use for adding text
+ *
+ * Использование для добавления текста
+ */
+export class LabelInclude {
+  /**
+   * Constructor
+   * @param props input property/ входное свойство
+   * @param className class name/ название класса
+   * @param classesExtra additional classes/ дополнительные классы
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param elementsExtra additional elements/ дополнительные элементы
+   * @param labelReplacing additional elements/ дополнительные элементы
+   * @param alternativeSlots alternative slots/ альтернативные слоты
+   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   */
+  constructor(
+    protected readonly props: Readonly<LabelProps>,
+    protected readonly className: string,
+    protected readonly classesExtra?: ConstrClass,
+    protected readonly slots?: LabelSlots | LabelAlternativeSlots,
+    protected readonly elementsExtra?: () => VNode[],
+    protected readonly labelReplacing?: Ref<string | number | undefined>,
+    protected readonly alternativeSlots?: boolean,
+    protected readonly skeleton?: SkeletonInclude
+  ) {
+  }
+
+  /** Label presence check/ Проверка наличия метки */
+  readonly is = computed<boolean>(() => {
+    if (
+      this.props.label
+      || this.labelReplacing?.value
+    ) {
+      return true
+    }
+
+    if (this.slots) {
+      if (this.alternativeSlots) {
+        return 'label' in this.slots
+      }
+
+      return 'default' in this.slots
+    }
+
+    return false
+  })
+
+  /**
+   * Render the label
+   *
+   * Рендер метки
+   * @param childrenExtra additional children/ дополнительные дочерние элементы
+   */
+  render(
+    childrenExtra?: any[]
+  ): VNode[] {
+    const elements: any[] = []
+
+    if (this.is.value) {
+      const children: any[] = [
+        ...this.initLabel(),
+        ...this.initLabelReplacing(),
+        ...this.initSlot()
+      ]
+
+      if (this.elementsExtra) {
+        children.push(...this.elementsExtra())
+      }
+
+      if (childrenExtra) {
+        children.push(...childrenExtra)
+      }
+
+      if (children.length > 0) {
+        elements.push(
+          render(
+            'span',
+            { class: this.getClassName() },
+            children,
+            'label'
+          )
+        )
+      }
+    }
+
+    return elements
+  }
+
+  /**
+   * Get the class name for the label
+   *
+   * Получение имени класса для метки
+   */
+  protected getClassName(): ConstrClass {
+    const classes: ConstrClass = [`${this.className}__label`]
+
+    if (this.classesExtra) {
+      classes.push(this.classesExtra)
+    }
+
+    if (this.skeleton) {
+      classes.push(this.skeleton.classes.value)
+    }
+
+    return classes
+  }
+
+  /**
+   * Adds the label text if it exists
+   *
+   * Добавляет текст метки, если он есть
+   */
+  protected initLabel(): any[] {
+    if (
+      !this.labelReplacing?.value
+      && isFilled(this.props.label)
+    ) {
+      return [this.props.label]
+    }
+
+    return []
+  }
+
+  /**
+   * Adds alternative label text if it exists
+   *
+   * Добавляет альтернативный текст метки, если он есть
+   */
+  protected initLabelReplacing(): any[] {
+    if (isFilled(this.labelReplacing?.value)) {
+      return [
+        render(
+          'span',
+          { innerHTML: this.labelReplacing.value },
+          undefined,
+          'highlight'
+        )
+      ]
+    }
+
+    return []
+  }
+
+  /**
+   * Adds a slot for the label if it exists
+   *
+   * Добавляет слот для метки, если он есть
+   */
+  protected initSlot(): any[] {
+    if (this.slots) {
+      if (this.alternativeSlots) {
+        if ('label' in this.slots) {
+          return [this.slots.label?.({})]
+        }
+      } else if ('default' in this.slots) {
+        return [this.slots.default?.({})]
+      }
+    }
+
+    return []
+  }
+}

package/src/classes/LabelNumberInclude.ts

@@ -0,0 +1,70 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrClass, GeoRef, isNumber, toNumberByMax } from '@dxtmisha/functional'
+
+import { LabelInclude } from './LabelInclude'
+import { SkeletonInclude } from '../constructors/Skeleton'
+
+import type { LabelNumberProps, LabelNumberSlots } from '../types/labelTypes'
+
+/**
+ * The LabelNumberInclude class extends LabelInclude to handle numeric labels.
+ * Allows converting and displaying numeric values with respect to maximum constraints.
+ *
+ * Класс LabelNumberInclude расширяет LabelInclude для работы с числовыми метками.
+ * Позволяет преобразовывать и отображать числовые значения с учетом максимальных ограничений.
+ */
+export class LabelNumberInclude extends LabelInclude {
+  /**
+   * Constructor for working with text that has maximum values.
+   *
+   * Конструктор для работы с текстом, у которого есть максимальные значения.
+   * @param props input property/ входное свойство
+   * @param className class name/ название класса
+   * @param classesExtra additional classes/ дополнительные классы
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param elementsExtra additional elements/ дополнительные элементы
+   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   */
+  constructor(
+    protected readonly props: Readonly<LabelNumberProps>,
+    protected readonly className: string,
+    protected readonly classesExtra?: ConstrClass,
+    protected readonly slots?: LabelNumberSlots,
+    protected readonly elementsExtra?: () => VNode[],
+    protected readonly skeleton?: SkeletonInclude
+  ) {
+    super(
+      props,
+      className,
+      classesExtra,
+      slots,
+      elementsExtra,
+      computed(() => this.getNumber()),
+      undefined,
+      skeleton
+    )
+  }
+
+  /**
+   * Returns text with conversion to maximum values.
+   *
+   * Возвращает текст с преобразованием в максимальные значения.
+   */
+  protected getNumber(): string | undefined {
+    const props = this.props
+
+    if (
+      props.label
+      && isNumber(props.label)
+    ) {
+      return toNumberByMax(
+        props.label,
+        props.labelMax,
+        props.formatting,
+        GeoRef.getLanguage().value
+      ).toString()
+    }
+
+    return undefined
+  }
+}

package/src/classes/ModelInclude.ts

@@ -0,0 +1,49 @@
+import { watch } from 'vue'
+import {
+  isFunction,
+  type RefType,
+  toCamelCase,
+  toCamelCaseFirst
+} from '@dxtmisha/functional'
+
+/**
+ * Class for managing model synchronization and event emission.
+ * Handles two-way data binding with reactive values and emits update events.
+ *
+ * Класс для управления синхронизацией модели и испусканием событий.
+ * Обрабатывает двустороннюю привязку данных с реактивными значениями и испускает события обновления.
+ */
+export class ModelInclude<Value = string> {
+  /**
+   * Constructor
+   * @param index The index key for the model property/ Ключ индекса для свойства модели
+   * @param emits Function to emit events/ Функция для испускания событий
+   * @param syncValue Reactive value to synchronize/ Реактивное значение для синхронизации
+   */
+  constructor(
+    protected readonly index: string,
+    protected readonly emits?: any,
+    protected readonly syncValue?: RefType<Value>
+  ) {
+    if (syncValue) {
+      watch(syncValue, (newValue: Value) => {
+        this.emit(newValue)
+      }, { immediate: true })
+    }
+  }
+
+  /**
+   * Emits an event to update the model value.
+   * Triggers the corresponding update event with the new value.
+   *
+   * Испускает событие для обновления значения модели.
+   * Запускает соответствующее событие обновления с новым значением.
+   * @param value The new value to set/ Новое значение для установки
+   */
+  emit(value: Value): void {
+    if (isFunction(this.emits)) {
+      this.emits(`update:${toCamelCase(this.index)}`, value)
+      this.emits(`update:model${toCamelCaseFirst(this.index)}`, value)
+    }
+  }
+}

package/src/classes/PrefixInclude.ts

@@ -0,0 +1,71 @@
+import { computed, type VNode } from 'vue'
+import { isFilled, render } from '@dxtmisha/functional'
+
+import { SkeletonInclude } from '../constructors/Skeleton'
+
+import type { PrefixProps, PrefixSlots } from '../types/prefixTypes'
+
+/**
+ * Class for working with prefix.
+ *
+ * Класс для работы с prefix.
+ */
+export class PrefixInclude {
+  /**
+   * Constructor
+   * @param props input property/ входное свойство
+   * @param className class name/ название класса
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   */
+  constructor(
+    protected readonly props: Readonly<PrefixProps>,
+    protected readonly className: string,
+    protected readonly slots?: PrefixSlots,
+    protected readonly skeleton?: SkeletonInclude
+  ) {
+  }
+
+  /**
+   * Returns true if prefix is filled
+   *
+   * Возвращает true, если prefix заполнен
+   */
+  readonly is = computed(() => Boolean(this.props.prefix || this.slots?.prefix))
+
+  /**
+   * Renders prefix element with content from props or slots.
+   *
+   * Отображает элемент prefix с содержимым из props или slots.
+   */
+  render(): VNode[] {
+    const children: any[] = []
+
+    if (isFilled(this.props.prefix)) {
+      children.push(this.props.prefix)
+    }
+
+    if (this.slots?.prefix) {
+      children.push(this.slots.prefix?.({}))
+    }
+
+    if (children.length > 0) {
+      return [
+        render(
+          'div',
+          {
+            'class': {
+              [`${this.className}__prefix`]: true,
+              ...this.skeleton?.classes.value
+            },
+            'data-event-type': 'prefix'
+          },
+          children,
+          'prefix'
+        )
+      ]
+    }
+
+    return []
+  }
+}

package/src/classes/SuffixInclude.ts

@@ -0,0 +1,71 @@
+import { computed, type VNode } from 'vue'
+import { isFilled, render } from '@dxtmisha/functional'
+
+import { SkeletonInclude } from '../constructors/Skeleton'
+
+import type { SuffixProps, SuffixSlots } from '../types/suffixTypes'
+
+/**
+ * Class for working with suffix.
+ *
+ * Класс для работы с suffix.
+ */
+export class SuffixInclude {
+  /**
+   * Constructor
+   * @param props input property/ входное свойство
+   * @param className class name/ название класса
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   */
+  constructor(
+    protected readonly props: Readonly<SuffixProps>,
+    protected readonly className: string,
+    protected readonly slots?: SuffixSlots,
+    protected readonly skeleton?: SkeletonInclude
+  ) {
+  }
+
+  /**
+   * Returns true if suffix is filled
+   *
+   * Возвращает true, если suffix заполнен
+   */
+  readonly is = computed(() => Boolean(this.props.suffix || this.slots?.suffix))
+
+  /**
+   * Renders suffix element with content from props or slots.
+   *
+   * Отображает элемент suffix с содержимым из props или slots.
+   */
+  render(): VNode[] {
+    const children: any[] = []
+
+    if (isFilled(this.props.suffix)) {
+      children.push(this.props.suffix)
+    }
+
+    if (this.slots?.suffix) {
+      children.push(this.slots.suffix?.({}))
+    }
+
+    if (children.length > 0) {
+      return [
+        render(
+          'div',
+          {
+            'class': {
+              [`${this.className}__suffix`]: true,
+              ...this.skeleton?.classes.value
+            },
+            'data-event-type': 'suffix'
+          },
+          children,
+          'suffix'
+        )
+      ]
+    }
+
+    return []
+  }
+}

package/src/classes/field/FieldAttributesInclude.ts

@@ -0,0 +1,100 @@
+import { computed } from 'vue'
+
+import { FieldTypeInclude } from './FieldTypeInclude'
+import { FieldPatternInclude } from './FieldPatternInclude'
+
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+/**
+ * Class for working with input elements.
+ *
+ * Класс для работы с элементами ввода.
+ */
+export class FieldAttributesInclude {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type object for working with input type/ объект для работы с типом ввода
+   * @param pattern object for working with checks by regular expressions/
+   * объект для работы с проверкой по регулярным выражениям
+   */
+  constructor(
+    protected readonly props: FieldAllProps,
+    protected readonly type?: FieldTypeInclude,
+    protected readonly pattern?: FieldPatternInclude
+  ) {
+  }
+
+  /** 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
+    }
+  })
+
+  /** Returns data for verification/ Возвращает данные для проверки */
+  readonly listForCheck = computed<Record<string, any>>(() => {
+    const data = this.list.value
+
+    if (
+      this.props.min
+      || this.props.max
+      || this.props.step
+    ) {
+      return {
+        ...data,
+        type: 'number'
+      }
+    }
+
+    return data
+  })
+
+  /**
+   * Returns the list of attributes to be set on the input element.
+   *
+   * Возвращает список атрибутов, которые нужно установить на элемент ввода.
+   */
+  protected getAttributes(): (keyof typeof this.props)[] {
+    return [
+      'type',
+      'name',
+      'required',
+      'multiple',
+
+      'step',
+      'min',
+      'max',
+
+      'minlength',
+      'maxlength',
+
+      'accept',
+      'pattern'
+    ]
+  }
+}

package/src/classes/field/FieldChangeInclude.ts

@@ -0,0 +1,52 @@
+import { ref } from 'vue'
+import type { FieldAllProps } from '../../types/fieldTypes'
+
+/**
+ * The class tracks field value change state
+ *
+ * Класс возвращает состояние изменения значения поля
+ */
+export class FieldChangeInclude {
+  /** Change state flag/ Флаг состояния изменения */
+  readonly item = ref<boolean>(false)
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(props: FieldAllProps) {
+    if (props.value || props.modelValue) {
+      this.item.value = true
+    }
+  }
+
+  /**
+   * Returns whether value was changed
+   *
+   * Возвращает, было ли значение изменено
+   */
+  is(): boolean {
+    return Boolean(this.item.value)
+  }
+
+  /**
+   * Sets change state
+   *
+   * Устанавливает состояние изменения
+   * @param change new state value/ новое значение состояния
+   */
+  set(change: boolean) {
+    this.item.value = change
+  }
+
+  /**
+   * Force mark as changed
+   *
+   * Принудительно помечает как изменённое
+   */
+  toChange() {
+    if (!this.item.value) {
+      this.set(true)
+    }
+  }
+}