@dxtmisha/constructor 0.23.0

package/src/constructors/FieldLabel/basicTypes.ts

@@ -0,0 +1,34 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { LabelAlternativeSlots, LabelProps } from '../../types/labelTypes'
+import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldCounter'
+import type { FieldLabelPropsBasic } from './props'
+
+/**
+ * Interface for describing which components need to be connected for FieldLabel work/
+ * Интерфейс для описания, какие компоненты надо подключить для работы FieldLabel
+ */
+export type FieldLabelComponentInclude = {
+  fieldLabel: object
+}
+
+/**
+ * Slots contract that FieldLabelInclude can expose or map to Label component slots.
+ * Extends LabelAlternativeSlots to reuse standard label-related slots (leading, trailing, etc.).
+ *
+ * Контракт слотов, которые может предоставлять FieldLabelInclude или прокидывать в Label.
+ * Расширяет LabelAlternativeSlots, чтобы переиспользовать стандартные слоты лейбла (leading, trailing и др.).
+ */
+export interface FieldLabelSlotsInclude extends LabelAlternativeSlots {
+}
+
+/**
+ * Properties that can be passed to FieldLabelInclude/
+ * Свойства, которые можно передать в FieldLabelInclude
+ */
+export interface FieldLabelPropsInclude<
+  FieldLabel extends FieldLabelPropsBasic = FieldLabelPropsBasic,
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic
+> extends LabelProps, FieldCounterPropsInclude<FieldCounter> {
+  required?: boolean
+  fieldLabelAttrs?: ConstrBind<FieldLabel>
+}

package/src/constructors/FieldLabel/index.ts

@@ -0,0 +1,6 @@
+export * from './FieldLabel'
+export * from './FieldLabelDesign'
+export * from './FieldLabelInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/FieldLabel/properties.json

@@ -0,0 +1,4 @@
+{
+  "#label": {},
+  "#required": {}
+}

package/src/constructors/FieldLabel/props.ts

@@ -0,0 +1,40 @@
+import type { LabelProps } from '../../types/labelTypes'
+import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
+import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldCounter'
+import type { SkeletonPropsInclude } from '../Skeleton'
+
+interface FieldLabelPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface FieldLabelPropsBasic<
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> extends LabelProps,
+  FieldCounterPropsInclude<FieldCounter>,
+  ProgressPropsInclude<Progress>,
+  SkeletonPropsInclude {
+  // Style
+  required?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface FieldLabelProps extends FieldLabelPropsBasic, FieldLabelPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsFieldLabel = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/FieldLabel/style.scss

@@ -0,0 +1,10 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinFieldLabel {
+  display: flex;
+  @include ui.justifyContent('flex-end');
+
+  &__label {
+    @include ui.flexDynamic;
+  }
+}

package/src/constructors/FieldLabel/types.ts

@@ -0,0 +1,49 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { LabelAlternativeSlots } from '../../types/labelTypes'
+import { type FieldCounterComponentInclude } from '../FieldCounter'
+import { type ProgressComponentInclude } from '../Progress'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type FieldLabelComponents
+  = FieldCounterComponentInclude
+    & ProgressComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type FieldLabelEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface FieldLabelExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface FieldLabelSlots extends LabelAlternativeSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type FieldLabelClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  label: string
+  required: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/FieldMessage/FieldMessage.ts

@@ -0,0 +1,79 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { FieldCounterInclude } from '../FieldCounter'
+import { FieldMessageMessage } from './FieldMessageMessage'
+import { SkeletonInclude } from '../Skeleton'
+
+import type { FieldMessageComponents, FieldMessageEmits, FieldMessageSlots } from './types'
+import type { FieldMessageProps } from './props'
+
+/**
+ * FieldMessage
+ */
+export class FieldMessage {
+  /** Field counter functionality/ Функциональность счетчика поля */
+  readonly fieldCounter: FieldCounterInclude<FieldMessageProps>
+
+  /** Message functionality/ Функциональность сообщений */
+  readonly message: FieldMessageMessage
+
+  /** Skeleton include/ Подключение скелетона */
+  readonly skeleton: SkeletonInclude
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element input element/ элемент ввода
+   * @param classDesign design name/ название дизайна
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: FieldMessageProps,
+    protected readonly refs: ToRefs<FieldMessageProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<FieldMessageComponents, FieldMessageProps>,
+    protected readonly slots?: FieldMessageSlots,
+    protected readonly emits?: ConstrEmit<FieldMessageEmits>
+  ) {
+    this.fieldCounter = new FieldCounterInclude(
+      this.props,
+      this.className,
+      this.components
+    )
+
+    this.message = new FieldMessageMessage(this.props, this.slots)
+    this.skeleton = new SkeletonInclude(
+      this.props as any,
+      this.classDesign,
+      ['classTextVariant']
+    )
+  }
+
+  /**
+   * Checks if there are values for outputting the element/ Проверяет, есть ли значения для вывода элемента
+   */
+  readonly is = computed<boolean>(() => {
+    return (
+      this.props.forceShow
+      || !this.props.disabled
+    )
+    && (
+      this.message.is.value
+      || this.fieldCounter.isCounter.value
+    )
+  })
+
+  /**
+   * Returns data for the main style class/ Возвращает данные для главного класса стиля
+   */
+  readonly classes = computed<ConstrClassObject>(() => ({
+    [`${this.className}--validation`]: this.message.isValidation.value
+  }))
+}

package/src/constructors/FieldMessage/FieldMessageDesign.tsx

@@ -0,0 +1,159 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { FieldMessage } from './FieldMessage'
+
+import {
+  type FieldMessagePropsBasic
+} from './props'
+import {
+  type FieldMessageClasses,
+  type FieldMessageComponents,
+  type FieldMessageEmits,
+  type FieldMessageExpose,
+  type FieldMessageSlots
+} from './types'
+
+/**
+ * FieldMessageDesign
+ */
+export class FieldMessageDesign<
+  COMP extends FieldMessageComponents,
+  EXPOSE extends FieldMessageExpose,
+  CLASSES extends FieldMessageClasses,
+  P extends FieldMessagePropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    FieldMessageEmits,
+    EXPOSE,
+    FieldMessageSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: FieldMessage
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, FieldMessageEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new FieldMessage(
+      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 {} as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classes.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        info: this.getSubClass('info')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode | undefined {
+    if (this.item.is.value) {
+      return h(
+        'div',
+        {
+          ...this.getAttrs(),
+          key: 'main',
+          class: this.classes?.value.main
+        },
+        [
+          ...this.renderInfo(),
+          ...this.item.fieldCounter.render()
+        ]
+      )
+    }
+
+    return undefined
+  }
+
+  /**
+   * Rendering text.
+   *
+   * Рендеринг текста.
+   */
+  protected renderInfo = (): VNode[] => {
+    const children: VNode[] = []
+    const props: Record<string, any> = {
+      key: 'message',
+      class: [
+        this.classes?.value.info,
+        this.item.skeleton.classes.value
+      ]
+    }
+
+    this.initSlot('helper', children)
+    this.initSlot('validation', children)
+
+    if (children.length < 1) {
+      props.innerHTML = this.item.message.item.value
+    }
+
+    return [
+      h(
+        'div',
+        props,
+        children
+      )
+    ]
+  }
+}

package/src/constructors/FieldMessage/FieldMessageInclude.ts

@@ -0,0 +1,105 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  isFilled,
+  type RefOrNormal,
+  type RefType,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { FieldCounterInclude } from '../FieldCounter'
+
+import type {
+  FieldMessageComponentInclude,
+  FieldMessagePropsInclude
+} from './basicTypes'
+import type { FieldMessagePropsBasic } from './props'
+
+/**
+ * The class returns data for working with the FieldMessage component
+ *
+ * Класс возвращает данные для работы с компонентом FieldMessage
+ */
+export class FieldMessageInclude<
+  Props extends FieldMessagePropsInclude = FieldMessagePropsInclude,
+  PropsExtra extends ConstrBind<FieldMessagePropsBasic> = ConstrBind<FieldMessagePropsBasic>
+> {
+  /** Field counter include/ Подключение счетчика поля */
+  private readonly fieldCounter: FieldCounterInclude
+
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param validationMessage error line/ строка ошибки
+   * @param isCounter whether to display the counter/ отображать ли счетчик
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<FieldMessageComponentInclude, Props>,
+    protected readonly validationMessage?: RefOrNormal<string>,
+    protected readonly isCounter?: RefType<boolean | undefined>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+    this.fieldCounter = new FieldCounterInclude(this.props, this.className)
+  }
+
+  /** Validation message computed/ Вычисляемое сообщение валидации */
+  readonly validation = computed<string | undefined>(() =>
+    isFilled(this.props.validationMessage)
+      ? this.props.validationMessage
+      : getRef(this.validationMessage)
+  )
+
+  /** Checks if validation message should be displayed/ Проверяет, надо ли отображать сообщение валидации */
+  readonly isValidationMessage = computed<boolean>(() =>
+    isFilled(this.validation.value)
+  )
+
+  /** Computed bindings for FieldMessage/ Вычисляемые привязки для FieldMessage */
+  readonly binds = computed<PropsExtra>(() => {
+    return toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.isCounter?.value
+        ? this.fieldCounter.bindsIntermediary.value
+        : {},
+      {
+        disabled: this.props.disabled,
+        forceShow: this.props.forceShowMessage,
+        helperMessage: this.props.helperMessage,
+        validationMessage: this.validation.value
+      },
+      this.props.fieldMessageAttrs
+    )
+  })
+
+  /**
+   * Render the FieldMessage component.
+   *
+   * Рендер компонента FieldMessage.
+   */
+  readonly render = (): VNode[] => {
+    if (this.components) {
+      return this.components.render(
+        'fieldMessage',
+        {
+          ...toBinds(
+            this.binds.value,
+            { class: `${this.className}__fieldMessage` }
+          )
+        },
+        undefined,
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/FieldMessage/FieldMessageMessage.ts

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { isFilled } from '@dxtmisha/functional'
+
+import type { FieldMessageProps } from './props'
+import type { FieldMessageSlots } from './types'
+
+/**
+ * Class for working with text
+ *
+ * Класс для работы с текстом
+ */
+export class FieldMessageMessage {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param slots object for working with slots/ объект для работы со слотами
+   */
+  constructor(
+    protected readonly props: Readonly<FieldMessageProps>,
+    protected readonly slots?: FieldMessageSlots
+  ) {
+  }
+
+  /** Checks if there is text/ Проверяет, есть ли текст */
+  readonly is = computed<boolean>(() =>
+    isFilled(this.item.value)
+    || Boolean(
+      this.slots
+      && (
+        'helper' in this.slots
+        || 'validation' in this.slots
+      )
+    )
+  )
+
+  /** Checks if there is an error/ Проверяет, есть ли ошибка */
+  readonly isValidation = computed<boolean>(() =>
+    isFilled(this.props.validationMessage)
+    || Boolean(this.slots && 'validation' in this.slots)
+  )
+
+  /** Returns text/ Возвращает текст */
+  readonly item = computed<string>(() => {
+    if (this.props.validationMessage) {
+      return this.props.validationMessage
+    }
+
+    if (this.props.helperMessage) {
+      return this.props.helperMessage
+    }
+
+    return ''
+  })
+}

package/src/constructors/FieldMessage/basicTypes.ts

@@ -0,0 +1,27 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { FieldMessagePropsBasic } from './props'
+import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldCounter'
+
+/**
+ * Interface for describing which components need to be connected for FieldMessage work/
+ * Интерфейс для описания, какие компоненты надо подключить для работы FieldMessage
+ */
+export type FieldMessageComponentInclude = {
+  fieldMessage: object
+}
+
+/**
+ * Properties that can be passed to FieldMessageInclude/
+ * Свойства, которые можно передать в FieldMessageInclude
+ */
+export interface FieldMessagePropsInclude<
+  FieldMessage extends FieldMessagePropsBasic = FieldMessagePropsBasic,
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic
+> extends FieldCounterPropsInclude<FieldCounter> {
+  forceShowMessage?: boolean
+  disabled?: boolean
+  helperMessage?: string
+  validationMessage?: string
+  fieldMessageAttrs?: ConstrBind<FieldMessage>
+}

package/src/constructors/FieldMessage/index.ts

@@ -0,0 +1,6 @@
+export * from './FieldMessage'
+export * from './FieldMessageDesign'
+export * from './FieldMessageInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/FieldMessage/properties.json

@@ -0,0 +1,9 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "#info": {},
+  "~validation": {
+    "_prop": false
+  }
+}

package/src/constructors/FieldMessage/props.ts

@@ -0,0 +1,40 @@
+import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldCounter'
+import type { SkeletonPropsInclude } from '../Skeleton'
+
+interface FieldMessagePropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface FieldMessagePropsBasic<
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic
+> extends FieldCounterPropsInclude<FieldCounter>,
+  SkeletonPropsInclude {
+  // Status
+  forceShow?: boolean
+  disabled?: boolean
+
+  // Value
+  helperMessage?: string
+  validationMessage?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface FieldMessageProps extends FieldMessagePropsBasic, FieldMessagePropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsFieldMessage = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/FieldMessage/style.scss

@@ -0,0 +1,13 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinFieldMessage {
+  display: flex;
+  align-items: ui.dirFlexLeft();
+
+  @include ui.paddingX(ui.v('??-padding', 0));
+
+  &__info {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+}