@dxtmisha/constructor 0.23.0

package/src/constructors/FieldCounter/FieldCounterDesign.tsx

@@ -0,0 +1,122 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { FieldCounter } from './FieldCounter'
+
+import {
+  type FieldCounterPropsBasic
+} from './props'
+import {
+  type FieldCounterClasses,
+  type FieldCounterComponents,
+  type FieldCounterEmits,
+  type FieldCounterExpose,
+  type FieldCounterSlots
+} from './types'
+
+/**
+ * FieldCounterDesign
+ */
+export class FieldCounterDesign<
+  COMP extends FieldCounterComponents,
+  EXPOSE extends FieldCounterExpose,
+  CLASSES extends FieldCounterClasses,
+  P extends FieldCounterPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    FieldCounterEmits,
+    EXPOSE,
+    FieldCounterSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: FieldCounter
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, FieldCounterEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new FieldCounter(
+      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: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        // :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(),
+          class: this.classes?.value.main,
+          innerHTML: this.item.item.value
+        }
+      )
+    }
+
+    return undefined
+  }
+}

package/src/constructors/FieldCounter/FieldCounterInclude.ts

@@ -0,0 +1,98 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  isFilled,
+  type RefOrNormal,
+  toBinds
+} from '@dxtmisha/functional'
+
+import type {
+  FieldCounterComponentInclude,
+  FieldCounterPropsInclude
+} from './basicTypes'
+import type { FieldCounterProps } from './props'
+
+/**
+ * The class returns data for working with the FieldCounter component
+ *
+ * Класс возвращает данные для работы с компонентом FieldCounter
+ */
+export class FieldCounterInclude<
+  Props extends FieldCounterPropsInclude = FieldCounterPropsInclude,
+  PropsExtra extends ConstrBind<FieldCounterProps> = ConstrBind<FieldCounterProps>
+> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @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<FieldCounterComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /** Checks if counter should be displayed/ Проверяет, надо ли отображать счетчик */
+  readonly isCounter = computed<boolean>(() =>
+    Boolean(
+      this.props.counterShow && (
+        isFilled(this.props.counter)
+        || isFilled(this.props.maxlength)
+      )
+    )
+  )
+
+  /** Computed bindings for FieldCounter/ Вычисляемые привязки для FieldCounter */
+  readonly binds = computed<PropsExtra>(() => {
+    return toBinds<PropsExtra>(
+      getRef(this.extra),
+      {
+        counter: this.props.counter,
+        maxlength: this.props.maxlength,
+        template: this.props.counterTemplate
+      },
+      this.props.fieldCounterAttrs
+    )
+  })
+
+  /** Intermediate bindings for FieldCounter/ Промежуточные привязки для FieldCounter */
+  readonly bindsIntermediary = computed<FieldCounterPropsInclude>(() => {
+    return {
+      counter: this.props.counter,
+      counterShow: this.props.counterShow,
+      counterTemplate: this.props.counterTemplate,
+      maxlength: this.props.maxlength,
+      fieldCounterAttrs: this.props.fieldCounterAttrs
+    }
+  })
+
+  /**
+   * Render the FieldCounter component/
+   * Рендер компонента FieldCounter
+   */
+  readonly render = (): VNode[] => {
+    if (this.components && this.isCounter.value) {
+      return this.components.render(
+        'fieldCounter',
+        {
+          ...toBinds(
+            this.binds.value,
+            { class: `${this.className}__fieldCounter` }
+          )
+        },
+        undefined,
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/FieldCounter/basicTypes.ts

@@ -0,0 +1,25 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { FieldCounterPropsBasic } from './props'
+
+/**
+ * Interface for describing which components need to be connected for FieldCounter work/
+ * Интерфейс для описания, какие компоненты надо подключить для работы FieldCounter
+ */
+export type FieldCounterComponentInclude = {
+  fieldCounter: object
+}
+
+/**
+ * Properties that can be passed to FieldCounterInclude/
+ * Свойства, которые можно передать в FieldCounterInclude
+ */
+export interface FieldCounterPropsInclude<
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic
+> {
+  counter?: FieldCounterPropsBasic['counter']
+  counterShow?: boolean
+  counterTemplate?: FieldCounterPropsBasic['template']
+  maxlength?: FieldCounterPropsBasic['maxlength']
+  fieldCounterAttrs?: ConstrBind<FieldCounter>
+}

package/src/constructors/FieldCounter/index.ts

@@ -0,0 +1,6 @@
+export * from './FieldCounter'
+export * from './FieldCounterDesign'
+export * from './FieldCounterInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/FieldCounter/properties.json

@@ -0,0 +1,3 @@
+{
+  "white-space": "nowrap"
+}

package/src/constructors/FieldCounter/props.ts

@@ -0,0 +1,32 @@
+interface FieldCounterPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface FieldCounterPropsBasic {
+  // Style
+  counter?: string | number
+  maxlength?: string | number
+
+  template?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface FieldCounterProps extends FieldCounterPropsBasic, FieldCounterPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsFieldCounter = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/FieldCounter/style.scss

@@ -0,0 +1,4 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinFieldCounter {
+}

package/src/constructors/FieldCounter/types.ts

@@ -0,0 +1,42 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type FieldCounterComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type FieldCounterEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface FieldCounterExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface FieldCounterSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type FieldCounterClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/FieldLabel/FieldLabel.ts

@@ -0,0 +1,93 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { LabelInclude } from '../../classes/LabelInclude'
+import { FieldCounterInclude } from '../FieldCounter'
+import { ProgressInclude } from '../Progress'
+import { SkeletonInclude } from '../Skeleton'
+
+import type { FieldLabelComponents, FieldLabelEmits, FieldLabelSlots } from './types'
+import type { FieldLabelProps } from './props'
+
+/**
+ * FieldLabel
+ */
+export class FieldLabel {
+  /** Label include/ Подключение метки */
+  readonly label: LabelInclude
+
+  /** Field counter include/ Подключение счетчика поля */
+  readonly fieldCounter: FieldCounterInclude<FieldLabelProps>
+
+  /** Progress include/ Подключение прогресса */
+  readonly progress: ProgressInclude
+
+  /** 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: FieldLabelProps,
+    protected readonly refs: ToRefs<FieldLabelProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<FieldLabelComponents, FieldLabelProps>,
+    protected readonly slots?: FieldLabelSlots,
+    protected readonly emits?: ConstrEmit<FieldLabelEmits>
+  ) {
+    const skeleton = new SkeletonInclude(this.props, this.classDesign, ['classTextVariant'])
+
+    this.label = new LabelInclude(
+      this.props,
+      this.className,
+      undefined,
+      this.slots,
+      undefined,
+      undefined,
+      true,
+      skeleton
+    )
+
+    this.fieldCounter = new FieldCounterInclude(
+      this.props,
+      this.className,
+      this.components
+    )
+
+    this.progress = new ProgressInclude(
+      this.props,
+      this.className,
+      this.components,
+      {
+        circular: true,
+        position: 'static',
+        dense: true
+      }
+    )
+
+    this.skeleton = skeleton
+  }
+
+  /**
+   * Values for the class.
+   *
+   * Значения для класса.
+   * Возвращает объект классов, включающий классы скелетона, если он активен.
+   */
+  readonly classes = computed<ConstrClassObject>(() => {
+    return {
+      ...this.skeleton.classes.value
+    }
+  })
+}

package/src/constructors/FieldLabel/FieldLabelDesign.tsx

@@ -0,0 +1,156 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { FieldLabel } from './FieldLabel'
+
+import {
+  type FieldLabelPropsBasic
+} from './props'
+import {
+  type FieldLabelClasses,
+  type FieldLabelComponents,
+  type FieldLabelEmits,
+  type FieldLabelExpose,
+  type FieldLabelSlots
+} from './types'
+
+/**
+ * FieldLabelDesign
+ */
+export class FieldLabelDesign<
+  COMP extends FieldLabelComponents,
+  EXPOSE extends FieldLabelExpose,
+  CLASSES extends FieldLabelClasses,
+  P extends FieldLabelPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    FieldLabelEmits,
+    EXPOSE,
+    FieldLabelSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: FieldLabel
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, FieldLabelEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new FieldLabel(
+      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 / Системная метка
+        label: this.getSubClass('label'),
+        required: this.getSubClass('required')
+        // :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 {
+    const children: any[] = [
+      ...this.item.label.render(this.renderRequired()),
+      ...this.item.progress.render(),
+      ...this.item.fieldCounter.render()
+    ]
+
+    if (
+      this.item.label.is.value
+      || this.item.progress.is.value
+      || this.item.fieldCounter.isCounter.value
+    ) {
+      return h(
+        'div',
+        {
+          ...this.getAttrs(),
+          class: this.classes?.value.main
+        },
+        children
+      )
+    }
+
+    return undefined
+  }
+
+  /**
+   * Display of the asterisk, an indication of required fields.
+   *
+   * Вывод звездочки, признак обязательного заполнения.
+   */
+  readonly renderRequired = (): VNode[] => {
+    if (this.props.required) {
+      return [
+        h(
+          'span',
+          {
+            class: this.classes?.value.required
+          },
+          '*'
+        )
+      ]
+    }
+
+    return []
+  }
+}

package/src/constructors/FieldLabel/FieldLabelInclude.ts

@@ -0,0 +1,91 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  isFilled, type RawSlots,
+  type RefOrNormal, type RefType,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { FieldCounterInclude } from '../FieldCounter'
+
+import type { FieldLabelComponentInclude, FieldLabelPropsInclude, FieldLabelSlotsInclude } from './basicTypes'
+import type { FieldLabelPropsBasic } from './props'
+
+/**
+ * The class returns data for working with the FieldLabel component
+ *
+ * Класс возвращает данные для работы с компонентом FieldLabel
+ */
+export class FieldLabelInclude<
+  Props extends FieldLabelPropsInclude = FieldLabelPropsInclude,
+  PropsExtra extends ConstrBind<FieldLabelPropsBasic> = ConstrBind<FieldLabelPropsBasic>
+> {
+  /** Field counter include/ Подключение счетчика поля */
+  private readonly fieldCounter: FieldCounterInclude
+
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param slots object for working with slots/ объект для работы со слотами
+   * @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<FieldLabelComponentInclude, Props>,
+    protected readonly slots?: FieldLabelSlotsInclude,
+    protected readonly isCounter?: RefType<boolean | undefined>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+    this.fieldCounter = new FieldCounterInclude(this.props, this.className)
+  }
+
+  /** Checks if label should be displayed/ Проверяет, надо ли отображать метку */
+  readonly is = computed<boolean>(() => isFilled(this.props.label))
+
+  /** Computed bindings for FieldLabel/ Вычисляемые привязки для FieldLabel */
+  readonly binds = computed<PropsExtra>(() =>
+    toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.isCounter?.value
+        ? this.fieldCounter.bindsIntermediary.value
+        : {},
+      {
+        label: this.props.label,
+        required: this.props.required
+      },
+      this.props.fieldLabelAttrs
+    )
+  )
+
+  /**
+   * Render the FieldLabel component/ Рендер компонента FieldLabel
+   */
+  readonly render = (): VNode[] => {
+    if (
+      this.components
+      && this.is.value
+    ) {
+      return this.components.render(
+        'fieldLabel',
+        {
+          ...toBinds(
+            this.binds.value,
+            { class: `${this.className}__fieldLabel` }
+          )
+        },
+        this.slots as RawSlots,
+        this.index
+      )
+    }
+
+    return []
+  }
+}