@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Field/Field.ts

@@ -1,186 +0,0 @@
-import { computed, type Ref, type ToRefs } from 'vue'
-import { type ConstrEmit, DesignComp, getElementId } from '@dxtmisha/functional'
-
-import { CaptionInclude } from '../../classes/CaptionInclude'
-import { PrefixInclude } from '../../classes/PrefixInclude'
-import { SuffixInclude } from '../../classes/SuffixInclude'
-import { EnabledInclude } from '../../classes/EnabledInclude'
-import { EventClickInclude } from '../../classes/EventClickInclude'
-
-import { IconTrailingInclude } from '../Icon'
-import { FieldLabelInclude } from '../FieldLabel'
-import { FieldMessageInclude } from '../FieldMessage'
-import { ProgressInclude } from '../Progress'
-import { SkeletonInclude } from '../Skeleton'
-
-import { FieldIcons } from './FieldIcons'
-import { FieldSize } from './FieldSize'
-
-import type { FieldComponents, FieldEmits, FieldSlots } from './types'
-import type { FieldProps } from './props'
-import type { FieldControl } from './basicTypes'
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-
-/**
- * Field
- */
-export class Field {
-  readonly id: string = getElementId()
-  readonly labelId: string = `${this.id}-label`
-  readonly helperId: string = `${this.id}-helper`
-  readonly validationId: string = `${this.id}-validation`
-  readonly counterId: string = `${this.id}-counter`
-
-  readonly icon: IconTrailingInclude
-
-  readonly caption: CaptionInclude
-  readonly prefix: PrefixInclude
-  readonly suffix: SuffixInclude
-
-  readonly fieldLabel: FieldLabelInclude
-  readonly fieldMessage: FieldMessageInclude
-
-  readonly progress: ProgressInclude
-  readonly enabled: EnabledInclude
-  readonly event: EventClickInclude
-  readonly skeleton: SkeletonInclude
-
-  readonly icons: FieldIcons
-  readonly size: FieldSize
-
-  /**
-   * 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: FieldProps,
-    protected readonly refs: ToRefs<FieldProps>,
-    protected readonly element: Ref<HTMLLabelElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<FieldComponents, FieldProps>,
-    protected readonly slots?: FieldSlots,
-    protected readonly emits?: ConstrEmit<FieldEmits>
-  ) {
-    this.skeleton = new SkeletonInclude(
-      this.props,
-      this.classDesign,
-      ['classBackground']
-    )
-    this.icon = new IconTrailingInclude(this.props, this.className, this.components)
-
-    this.caption = new CaptionInclude(this.props, this.className, this.slots)
-    this.prefix = new PrefixInclude(this.props, this.className, this.slots)
-    this.suffix = new SuffixInclude(this.props, this.className, this.slots)
-
-    this.fieldLabel = new FieldLabelInclude(
-      this.props,
-      this.className,
-      this.components,
-      this.slots,
-      this.refs.counterTop,
-      this.labelId,
-      this.counterId,
-      this.skeleton.binds
-    )
-    this.fieldMessage = new FieldMessageInclude(
-      this.props,
-      this.className,
-      this.components,
-      undefined,
-      computed(() => !this.props.counterTop),
-      this.helperId,
-      this.validationId,
-      this.counterId,
-      this.skeleton.binds
-    )
-
-    this.progress = new ProgressInclude(
-      this.props,
-      this.className,
-      this.components,
-      {
-        circular: true,
-        position: 'static',
-        dense: true
-      }
-    )
-
-    this.enabled = new EnabledInclude(this.props, this.progress)
-    this.event = new EventClickInclude(this.props, this.enabled, this.emits)
-
-    this.icons = new FieldIcons(this.props, this.className)
-    this.size = new FieldSize(this.element, this.className)
-  }
-
-  /** Checks if an error needs to be displayed/ Проверяет, надо ли выводить ошибку */
-  readonly isValidation = computed<boolean>(() => Boolean(
-    this.props.validationMessage
-    && (
-      this.props.forceShowMessage
-      || (
-        !this.props.readonly
-        && !this.props.disabled
-      )
-    )
-  ))
-
-  /** Values for the class/ Значения для класса */
-  readonly classes = computed(() => ({
-    [`${this.className}--cancel`]: this.icons.isCancel.value,
-    [`${this.className}--suffix`]: this.props.suffix,
-    [`${this.className}--validation`]: this.isValidation.value
-  }))
-
-  /**
-   * Returns data for the slot/ Возвращает данные для слота
-   */
-  readonly control = computed<FieldControl>(() => {
-    const id = String(this.props.id || this.id)
-    const className = `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`
-
-    return {
-      id,
-      className,
-      classHidden: `${this.className}__body__hidden`,
-      classForFocus: `${this.className}__body__focus`,
-      binds: {
-        id,
-        className,
-        ...AriaStaticInclude.labelledby(this.labelId),
-        ...AriaStaticInclude.describedby(this.getDescribedby()),
-        ...AriaStaticInclude.invalid(this.isValidation.value)
-      }
-    }
-  })
-
-  /**
-   * Get ARIA describedby attribute.
-   *
-   * Получить атрибут ARIA describedby.
-   */
-  protected getDescribedby(): string {
-    const describedby = []
-
-    if (this.props.helperMessage) {
-      describedby.push(this.helperId)
-    }
-
-    if (this.isValidation.value) {
-      describedby.push(this.validationId)
-    }
-
-    if (this.props.counterShow) {
-      describedby.push(this.counterId)
-    }
-
-    return describedby.join(' ')
-  }
-}

package/src/constructors/Field/FieldDesign.tsx

@@ -1,390 +0,0 @@
-import { computed, h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract,
-  isString
-} from '@dxtmisha/functional'
-
-import { Field } from './Field'
-
-import {
-  type FieldPropsBasic
-} from './props'
-import {
-  type FieldClasses,
-  type FieldComponents,
-  type FieldEmits,
-  type FieldExpose,
-  type FieldSlots
-} from './types'
-
-/**
- * FieldDesign
- */
-export class FieldDesign<
-  COMP extends FieldComponents,
-  EXPOSE extends FieldExpose,
-  CLASSES extends FieldClasses,
-  P extends FieldPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLLabelElement,
-    COMP,
-    FieldEmits,
-    EXPOSE,
-    FieldSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Field
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, FieldEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Field(
-      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 / Системная метка
-        body: this.getSubClass('body'),
-        bodyInput: this.getSubClass('body__input'),
-        bodyTitle: this.getSubClass('body__title'),
-        bodyTitleLabel: this.getSubClass('body__title__label'),
-        bodyTitleLabelText: this.getSubClass('body__title__label__text'),
-        bodyScoreboard: this.getSubClass('body__scoreboard'),
-        bodyScoreboardLeft: this.getSubClass('body__scoreboard__left'),
-        bodyScoreboardRight: this.getSubClass('body__scoreboard__right'),
-        bodyScoreboardSpace: this.getSubClass('body__scoreboard__space'),
-        bodyScoreboardInput: this.getSubClass('body__scoreboard__input'),
-        bodyBorder: this.getSubClass('body__border'),
-        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 {
-    const children: any[] = []
-
-    if (
-      (this.props as any).classic
-      && !(this.props as any).basic
-      && !(this.props as any).boxed
-      && !(this.props as any).filled
-      && !(this.props as any).outlined
-      && !(this.props as any).tonal
-    ) {
-      children.push(...this.item.fieldLabel.render())
-    }
-
-    children.push(
-      ...this.renderBody(),
-      ...this.item.fieldMessage.render()
-    )
-
-    return h(
-      'label',
-      {
-        ...this.getAttrs(),
-        ref: this.element,
-        class: this.classes?.value.main,
-        style: this.styles?.value
-      },
-      children
-    )
-  }
-
-  /**
-   * Generates body.
-   *
-   * Генерирует тело.
-   */
-  readonly renderBody = (): VNode[] => {
-    const children: any[] = [
-      this.initSlot('default', undefined, this.item.control.value),
-      this.renderBodyLabel(),
-      this.renderBodyScoreboard(),
-      this.renderBodyBorder()
-    ]
-
-    return [
-      h(
-        'span',
-        {
-          class: [
-            this.classes?.value.body,
-            this.item.skeleton.classes.value
-          ],
-          onClick: this.item.event.onClick
-        },
-        children
-      )
-    ]
-  }
-
-  /**
-   * Generates data for the title.
-   *
-   * Генерирует данные для заголовка.
-   */
-  readonly renderBodyLabel = (): VNode => {
-    const children: any[] = [
-      this.props.label
-    ]
-
-    if (this.props.required) {
-      children.push(h(
-        'span',
-        { class: this.classes?.value.required }
-      ))
-    }
-
-    return h(
-      'span',
-      { class: this.classes?.value.bodyTitle },
-      h(
-        'span',
-        { class: this.classes?.value.bodyTitleLabel },
-        h(
-          'span',
-          { class: this.classes?.value.bodyTitleLabelText },
-          children
-        )
-      )
-    )
-  }
-
-  /**
-   * Generates data for additional controls.
-   *
-   * Генерирует данные для дополнительных управлений.
-   */
-  readonly renderBodyScoreboard = (): VNode => {
-    const children: any[] = [
-      ...this.renderBodyScoreboardSlot(),
-      ...this.renderBodyScoreboardIcon(),
-      ...this.item.prefix.render(),
-      ...this.item.suffix.render(),
-      ...this.item.progress.render(),
-      ...this.renderBodyScoreboardSpace()
-    ]
-
-    return h('span', {
-      'class': this.classes?.value.bodyScoreboard,
-      'data-element': 'scoreboard'
-    }, children)
-  }
-
-  /**
-   * Generates data for the slot.
-   *
-   * Генерирует данные для слота.
-   */
-  readonly renderBodyScoreboardSlot = (): VNode[] => {
-    const slots: any[] = []
-
-    if (this.slots) {
-      if ('leading' in this.slots) {
-        slots.push(h(
-          'span',
-          { class: this.classes?.value.bodyScoreboardLeft },
-          this.initSlot('leading')
-        ))
-      }
-
-      if ('trailing' in this.slots) {
-        slots.push(h(
-          'span',
-          { class: this.classes?.value.bodyScoreboardRight },
-          this.initSlot('trailing')
-        ))
-      }
-    }
-
-    return slots
-  }
-
-  /**
-   * Generates all available icons.
-   *
-   * Генерирует все доступные иконки.
-   */
-  readonly renderBodyScoreboardIcon = (): VNode[] => {
-    const icons: any[] = [...this.item.icon.render()]
-
-    if (this.item.icons.isCancel.value) {
-      this.components.renderAdd(
-        icons,
-        'icon',
-        this.item.icons.cancelBind.value,
-        undefined,
-        'cancel'
-      )
-    }
-
-    if (this.item.icons.isArrow.value) {
-      this.components.renderAdd(
-        icons,
-        'icon',
-        this.item.icons.previousBind.value,
-        undefined,
-        'previous'
-      )
-
-      this.components.renderAdd(
-        icons,
-        'icon',
-        this.item.icons.nextBind.value,
-        undefined,
-        'next'
-      )
-    }
-
-    return icons
-  }
-
-  /**
-   * Generates separators and additional descriptions.
-   *
-   * Генерирует разделители и дополнительные описания.
-   */
-  readonly renderBodyScoreboardSpace = (): VNode[] => {
-    const children: any[] = []
-
-    if (this.item.caption.is.value) {
-      children.push(
-        h(
-          'span',
-          {
-            class: this.classes?.value.bodyScoreboardInput,
-            style: `min-width: ${this.lengthValue()};`
-          },
-          this.focusValue()
-        ),
-        ...this.item.caption.render()
-      )
-    }
-
-    return [
-      h(
-        'span',
-        { class: this.classes?.value.bodyScoreboardSpace },
-        children
-      )
-    ]
-  }
-
-  /**
-   * Generates border.
-   *
-   * Генерирует border.
-   */
-  readonly renderBodyBorder = (): VNode => {
-    return h('span', { class: this.classes?.value.bodyBorder })
-  }
-
-  /**
-   * Value for focus.
-   *
-   * Значение для фокуса.
-   */
-  protected readonly focusValue = (): string => {
-    if (
-      !this.lengthElement.value
-      && isString(this.props.value)
-    ) {
-      return this.props.value
-    }
-
-    return ''
-  }
-
-  /**
-   * Length value.
-   *
-   * Значение длины.
-   */
-  protected readonly lengthValue = (): string | undefined => {
-    if (this.lengthElement.value) {
-      return `${this.lengthElement.value.offsetWidth}px`
-    }
-
-    return undefined
-  }
-
-  /**
-   * Element for counting characters.
-   *
-   * Элемент для подсчёта символов.
-   */
-  protected readonly lengthElement = computed<HTMLInputElement | undefined>(() => {
-    return this.element.value
-      ?.querySelector<HTMLInputElement>(`*[data-length]`) ?? undefined
-  })
-
-  /**
-   * Input element.
-   *
-   * Элемент ввода.
-   */
-  protected readonly inputElement = computed<HTMLInputElement | undefined>(() => {
-    return this.element.value
-      ?.querySelector<HTMLInputElement>(`input.${this.classes?.value.bodyInput}, .${this.classes?.value.bodyInput} input`) ?? undefined
-  })
-}

package/src/constructors/Field/FieldIcons.ts

@@ -1,99 +0,0 @@
-import { computed } from 'vue'
-import type { ConstrBind } from '@dxtmisha/functional'
-
-import type { IconProps } from '../Icon'
-import type { FieldProps } from './props'
-
-/**
- * Class for displaying an icon for arrow control.
- *
- * Класс для вывода иконки для управления стрелками.
- */
-export class FieldIcons {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly props: FieldProps,
-    protected readonly className: string
-  ) {
-  }
-
-  /**
-   * Determines whether to display arrows.
-   *
-   * Определяет, требуется ли отображение стрелок.
-   */
-  readonly isArrow = computed<boolean>(
-    () => Boolean(
-      (
-        this.props.arrowCarousel
-        || this.props.arrowStepper
-      )
-      && !this.props.disabled
-    )
-  )
-
-  /**
-   * Determines whether to display the "Delete" button.
-   *
-   * Определяет, требуется ли отображение кнопки "Удалить".
-   */
-  readonly isCancel = computed<boolean>(() => Boolean(
-    this.props.cancel
-    && !this.props.readonly
-    && !this.props.disabled
-    && !this.props.arrowCarousel
-    && !this.props.arrowStepper
-    && (
-      (this.props.cancel === 'auto' && this.props.cancelShow)
-      || this.props.cancel === 'always'
-    )
-  ))
-
-  /**
-   * Returns data for the data deletion button.
-   *
-   * Возвращает данные для кнопки удаления данных.
-   */
-  readonly cancelBind = computed<ConstrBind<IconProps>>(() => {
-    return {
-      'class': `${this.className}__cancel`,
-      'icon': this.props.iconClose,
-      'dynamic': true,
-      'data-event-type': 'cancel'
-    }
-  })
-
-  /**
-   * Returns data for the left arrow.
-   *
-   * Возвращает данные для стрелки слева.
-   */
-  readonly previousBind = computed<ConstrBind<IconProps>>(() => {
-    return {
-      'class': `${this.className}__previous`,
-      'icon': this.props.arrowCarousel ? this.props.iconArrowLeft : this.props.iconMinus,
-      'disabled': this.props.disabled || this.props.disabledPrevious,
-      'dynamic': true,
-      'data-event-type': 'previous'
-    }
-  })
-
-  /**
-   * Returns data for the right arrow.
-   *
-   * Возвращает данные для стрелки справа.
-   */
-  readonly nextBind = computed<ConstrBind<IconProps>>(() => {
-    return {
-      'class': `${this.className}__next`,
-      'icon': this.props.arrowCarousel ? this.props.iconArrowRight : this.props.iconPlus,
-      'disabled': this.props.disabled || this.props.disabledNext,
-      'dynamic': true,
-      'data-event-type': 'next'
-    }
-  })
-}