@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Field/FieldDesign.tsx

@@ -1,372 +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.getControl()),
-      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 },
-          this.focusValue.value
-        ),
-        ...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 = computed(() => {
-    if (isString(this.props.value)) {
-      return this.props.value
-    }
-
-    const item = this.lengthElement.value ?? this.inputElement.value
-    return item?.nodeName === 'INPUT' ? item.value.toString() : item?.innerText.replace(/[\r\n]+/ig, '').trim()
-  })
-
-  /**
-   * Element for counting characters.
-   *
-   * Элемент для подсчёта символов.
-   */
-  protected readonly lengthElement = computed<HTMLInputElement | undefined>(() => {
-    return this.element.value
-      ?.querySelector<HTMLInputElement>(`.${this.classes?.value.bodyInput} [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'
-    }
-  })
-}

package/src/constructors/Field/FieldInclude.ts

@@ -1,72 +0,0 @@
-import { computed } from 'vue'
-import { type ConstrBind, type RefOrNormal, toBinds, getRef } from '@dxtmisha/functional'
-
-import type { FieldPropsInclude } from './basicTypes'
-import type { FieldPropsBasic } from './props'
-
-/**
- * The class returns data for working with the Field framework.
- *
- * Класс возвращает данные для работы с каркасом поля.
- */
-export class FieldInclude<
-  Props extends FieldPropsInclude = FieldPropsInclude,
-  PropsExtra extends ConstrBind<FieldPropsBasic> = ConstrBind<FieldPropsBasic>
-> {
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly extra?: RefOrNormal<PropsExtra>
-  ) {
-  }
-
-  /** Returns properties for the field framework/ Возвращает свойства для каркаса поля */
-  readonly binds = computed<PropsExtra>(
-    () => toBinds<PropsExtra>(
-      getRef(this.extra),
-      {
-        // Status
-        focus: this.props.focus,
-        selected: this.props.selected,
-        readonly: this.props.readonly,
-        disabled: this.props.disabled,
-
-        loading: this.props.loading,
-        forceShowMessage: this.props.forceShowMessage,
-
-        // Value
-        label: this.props.label,
-        prefix: this.props.prefix,
-        suffix: this.props.suffix,
-        caption: this.props.caption,
-        helperMessage: this.props.helperMessage,
-        validationMessage: this.props.validationMessage,
-
-        required: this.props.required,
-
-        detail: this.props.detail,
-
-        // Style
-        cancel: this.props.cancel,
-        counterShow: this.props.counterShow,
-
-        icon: this.props.icon,
-        iconTurn: this.props.iconTurn,
-        iconHide: this.props.iconHide,
-        iconDir: this.props.iconDir,
-        iconPalette: this.props.iconPalette,
-        iconTrailing: this.props.iconTrailing,
-        iconTrailingTurnOnly: this.props.iconTrailingTurnOnly,
-        iconTrailingDirOnly: this.props.iconTrailingDirOnly,
-        iconTrailingPalette: this.props.iconTrailingPalette,
-        iconAttrs: this.props.iconAttrs,
-
-        isSkeleton: this.props.isSkeleton,
-
-        fieldLabelAttrs: this.props.fieldLabelAttrs,
-        fieldMessageAttrs: this.props.fieldMessageAttrs,
-        fieldCounterAttrs: this.props.fieldCounterAttrs
-      },
-      this.props.fieldAttrs
-    )
-  )
-}

package/src/constructors/Field/FieldSize.ts

@@ -1,93 +0,0 @@
-import { onMounted, onUnmounted, onUpdated, type Ref, watch } from 'vue'
-import { EventItem, isDomRuntime } from '@dxtmisha/functional'
-
-/**
- * Input field margin control class.
- *
- * Класс управления отступами для элемента ввода.
- */
-export class FieldSize {
-  protected left: number = 0
-  protected right: number = 0
-  protected title: number = 0
-
-  protected event?: EventItem<Window, Event>
-
-  /**
-   * Constructor
-   * @param element main element/ главный элемент
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly element: Ref<HTMLLabelElement | undefined>,
-    protected readonly className: string
-  ) {
-    watch(element, () => this.update, { immediate: true })
-
-    if (isDomRuntime()) {
-      this.event = new EventItem(window, 'resize', this.update)
-      onUnmounted(() => this.event?.stop())
-    }
-
-    onMounted(this.update)
-    onUpdated(this.update)
-  }
-
-  /**
-   * Update margins.
-   *
-   * Обновление отступов.
-   */
-  readonly update = () => {
-    requestAnimationFrame(() => {
-      const elementSpace = this.getElementSpace()
-      const elementPrefix = this.getElementPrefix()
-
-      if (elementSpace) {
-        this.left = elementSpace.offsetLeft
-        this.right = (elementSpace.parentElement?.offsetWidth ?? 0) - this.left - elementSpace.offsetWidth
-      }
-
-      this.title = elementPrefix?.offsetLeft ?? elementSpace?.offsetLeft ?? 0
-
-      this.make()
-    })
-  }
-
-  /**
-   * Returns separator elements.
-   *
-   * Возвращает элементы-разделители.
-   */
-  protected getElementSpace(): HTMLDivElement | undefined {
-    return this.element.value?.querySelector(`.${this.className}__body__scoreboard__space`) ?? undefined
-  }
-
-  /**
-   * Returns element with prefix.
-   *
-   * Возвращает элемент с префиксом.
-   */
-  protected getElementPrefix(): HTMLDivElement | undefined {
-    return this.element.value?.querySelector(`.${this.className}__prefix`) ?? undefined
-  }
-
-  /**
-   * Update input field margins.
-   *
-   * Обновление отступов для поля ввода.
-   */
-  protected make() {
-    const element = this.element.value
-
-    if (element) {
-      element.style.setProperty(`--${this.className}-sys-left`, `${this.left}px`)
-      element.style.setProperty(`--${this.className}-sys-right`, `${this.right}px`)
-      element.style.setProperty(`--${this.className}-sys-title`, `${this.title}px`)
-
-      if (!element.classList.contains(`${this.className}--show`)) {
-        requestAnimationFrame(() => element.classList.add(`${this.className}--show`))
-      }
-    }
-  }
-}