@dxtmisha/constructor 0.23.0

package/src/constructors/Field/FieldDesign.tsx

@@ -0,0 +1,372 @@
+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

@@ -0,0 +1,99 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,93 @@
+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`))
+      }
+    }
+  }
+}