@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Dialog/types.ts

@@ -0,0 +1,67 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type {
+  ModalComponents,
+  ModalEmits,
+  ModalExpose,
+  ModalSlots
+} from '../Modal'
+import type { IconComponentInclude } from '../Icon'
+
+import type { LabelAlternativeSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type DialogComponents = ModalComponents & IconComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type DialogEmits
+  = ModalEmits
+    & {
+      ok: []
+      close: []
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface DialogExpose extends ModalExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface DialogSlots extends ModalSlots,
+  LabelAlternativeSlots,
+  DescriptionSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type DialogClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  title: string
+  header: string
+  information: string
+  icon: string
+  label: string
+  description: string
+  body: string
+  footer: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Field/Field.ts

@@ -19,11 +19,18 @@ 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
@@ -62,6 +69,11 @@ export class Field {
     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)
@@ -74,7 +86,9 @@ export class Field {
       this.components,
       this.slots,
       this.refs.counterTop,
-      this.propsSkeleton
+      this.labelId,
+      this.counterId,
+      this.skeleton.binds
     )
     this.fieldMessage = new FieldMessageInclude(
       this.props,
@@ -82,7 +96,10 @@ export class Field {
       this.components,
       undefined,
       computed(() => !this.props.counterTop),
-      this.propsSkeleton
+      this.helperId,
+      this.validationId,
+      this.counterId,
+      this.skeleton.binds
     )
 
     this.progress = new ProgressInclude(
@@ -98,11 +115,6 @@ export class Field {
 
     this.enabled = new EnabledInclude(this.props, this.progress)
     this.event = new EventClickInclude(this.props, this.enabled, this.emits)
-    this.skeleton = new SkeletonInclude(
-      this.props,
-      this.classDesign,
-      ['classBackground']
-    )
 
     this.icons = new FieldIcons(this.props, this.className)
     this.size = new FieldSize(this.element, this.className)
@@ -128,20 +140,47 @@ export class Field {
   }))
 
   /**
-   * Returns data for the slot.
-   *
-   * Возвращает данные для слота
+   * Returns data for the slot/ Возвращает данные для слота
    */
-  getControl(): FieldControl {
+  readonly control = computed<FieldControl>(() => {
+    const id = String(this.props.id || this.id)
+    const className = `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`
+
     return {
-      id: getElementId(),
-      className: `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`,
-      classHidden: `${this.className}__body__hidden`
+      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)
+      }
     }
-  }
+  })
 
-  /** Values for the skeleton/ Значения для скелетона */
-  protected readonly propsSkeleton = computed(() => ({
-    isSkeleton: this.props.isSkeleton
-  }))
+  /**
+   * 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

@@ -28,14 +28,14 @@ export class FieldDesign<
   CLASSES extends FieldClasses,
   P extends FieldPropsBasic
 > extends DesignConstructorAbstract<
-  HTMLLabelElement,
-  COMP,
-  FieldEmits,
-  EXPOSE,
-  FieldSlots,
-  CLASSES,
-  P
-> {
+    HTMLLabelElement,
+    COMP,
+    FieldEmits,
+    EXPOSE,
+    FieldSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: Field
 
   /**
@@ -157,7 +157,7 @@ export class FieldDesign<
    */
   readonly renderBody = (): VNode[] => {
     const children: any[] = [
-      this.initSlot('default', undefined, this.item.getControl()),
+      this.initSlot('default', undefined, this.item.control.value),
       this.renderBodyLabel(),
       this.renderBodyScoreboard(),
       this.renderBodyBorder()
@@ -311,8 +311,11 @@ export class FieldDesign<
       children.push(
         h(
           'span',
-          { class: this.classes?.value.bodyScoreboardInput },
-          this.focusValue.value
+          {
+            class: this.classes?.value.bodyScoreboardInput,
+            style: `min-width: ${this.lengthValue()};`
+          },
+          this.focusValue()
         ),
         ...this.item.caption.render()
       )
@@ -341,14 +344,29 @@ export class FieldDesign<
    *
    * Значение для фокуса.
    */
-  protected readonly focusValue = computed(() => {
-    if (isString(this.props.value)) {
+  protected readonly focusValue = (): string => {
+    if (
+      !this.lengthElement.value
+      && 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()
-  })
+    return ''
+  }
+
+  /**
+   * Length value.
+   *
+   * Значение длины.
+   */
+  protected readonly lengthValue = (): string | undefined => {
+    if (this.lengthElement.value) {
+      return `${this.lengthElement.value.offsetWidth}px`
+    }
+
+    return undefined
+  }
 
   /**
    * Element for counting characters.
@@ -357,7 +375,7 @@ export class FieldDesign<
    */
   protected readonly lengthElement = computed<HTMLInputElement | undefined>(() => {
     return this.element.value
-      ?.querySelector<HTMLInputElement>(`.${this.classes?.value.bodyInput} [data-length]`) ?? undefined
+      ?.querySelector<HTMLInputElement>(`*[data-length]`) ?? undefined
   })
 
   /**

package/src/constructors/Field/FieldInclude.ts

@@ -1,8 +1,23 @@
-import { computed } from 'vue'
-import { type ConstrBind, type RefOrNormal, toBinds, getRef } from '@dxtmisha/functional'
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  type DesignComponents,
+  eventStopPropagation,
+  type RefOrNormal,
+  toBind,
+  toBinds,
+  getRef
+} from '@dxtmisha/functional'
 
-import type { FieldPropsInclude } from './basicTypes'
+import type { EventClickValue } from '../../types/eventClickTypes'
+import type { FieldValueInclude } from '../../classes/field/FieldValueInclude'
+import type { FieldEventInclude } from '../../classes/field/FieldEventInclude'
+import type { FieldArrowInclude } from '../../classes/field/FieldArrowInclude'
+
+import type { FieldComponentInclude, FieldPropsInclude } from './basicTypes'
+import type { FieldArrowProps } from '../../types/fieldTypes'
 import type { FieldPropsBasic } from './props'
+import type { FieldSlots } from './types'
 
 /**
  * The class returns data for working with the Field framework.
@@ -10,19 +25,41 @@ import type { FieldPropsBasic } from './props'
  * Класс возвращает данные для работы с каркасом поля.
  */
 export class FieldInclude<
-  Props extends FieldPropsInclude = FieldPropsInclude,
+  Props extends FieldPropsInclude & FieldArrowProps = FieldPropsInclude,
   PropsExtra extends ConstrBind<FieldPropsBasic> = ConstrBind<FieldPropsBasic>
 > {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param value object for working with values/ объект для работы со значениями
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param event object for working with events/ объект для работы с событиями
+   * @param arrow object for working with arrows/ объект для работы со стрелками
+   * @param onIcon Collection icon click handler/ Обработчик клика по иконке коллекции
+   * @param onTrailing Trailing icon click handler/ Обработчик клика по иконке трейлинга
+   * @param onNext Next arrow click handler/ Обработчик клика по следующей стрелке
+   * @param onPrevious Previous arrow click handler/ Обработчик клика по предыдущей стрелке
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
   constructor(
     protected readonly props: Readonly<Props>,
-    protected readonly extra?: RefOrNormal<PropsExtra>
+    protected readonly value: FieldValueInclude,
+    protected readonly components?: DesignComponents<FieldComponentInclude, Props>,
+    protected readonly event?: FieldEventInclude,
+    protected readonly arrow?: FieldArrowInclude,
+    protected readonly onIcon?: () => void,
+    protected readonly onTrailing?: () => void,
+    protected readonly onNext?: () => void,
+    protected readonly onPrevious?: () => void,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
   ) {
   }
 
   /** Returns properties for the field framework/ Возвращает свойства для каркаса поля */
-  readonly binds = computed<PropsExtra>(
-    () => toBinds<PropsExtra>(
-      getRef(this.extra),
+  readonly binds = computed<PropsExtra>(() => {
+    return toBinds<PropsExtra>(
       {
         // Status
         focus: this.props.focus,
@@ -39,7 +76,6 @@ export class FieldInclude<
         suffix: this.props.suffix,
         caption: this.props.caption,
         helperMessage: this.props.helperMessage,
-        validationMessage: this.props.validationMessage,
 
         required: this.props.required,
 
@@ -60,13 +96,107 @@ export class FieldInclude<
         iconTrailingPalette: this.props.iconTrailingPalette,
         iconAttrs: this.props.iconAttrs,
 
+        align: this.props.align,
+
+        arrowCarousel: this.arrow?.isCarousel() ?? this.props.arrow === 'carousel',
+        arrowStepper: this.arrow?.isStepper() ?? this.props.arrow === 'stepper',
+        arrowAlign: this.arrow?.align() ?? this.props.arrowAlign,
+
         isSkeleton: this.props.isSkeleton,
 
         fieldLabelAttrs: this.props.fieldLabelAttrs,
         fieldMessageAttrs: this.props.fieldMessageAttrs,
-        fieldCounterAttrs: this.props.fieldCounterAttrs
+        fieldCounterAttrs: this.props.fieldCounterAttrs,
+
+        onClick: this.on
       },
+      getRef(this.extra),
       this.props.fieldAttrs
     )
-  )
+  })
+
+  /**
+   * Returns properties for working with the value of the Field framework/
+   * Возвращает свойства для работы со значением каркаса поля
+   */
+  readonly valueBinds = computed<ConstrBind<PropsExtra>>(() => ({
+    ...this.binds.value,
+    isValue: this.value.is.value,
+    value: this.value.item.value,
+    cancelShow: this.value.boolean.value,
+
+    counter: this.value.length.value,
+
+    disabledPrevious: this.arrow?.disabledPrevious.value,
+    disabledNext: this.arrow?.disabledNext.value
+  }))
+
+  /**
+   * Renders the Field framework.
+   *
+   * Отрисовывает каркас поля.
+   * @param slotsChildren
+   * @param attrs
+   */
+  readonly render = (
+    slotsChildren?: FieldSlots,
+    attrs?: Record<string, any>
+  ): VNode[] => {
+    if (this.components) {
+      return this.components.render(
+        'field',
+        toBind(
+          this.valueBinds.value,
+          attrs ?? {}
+        ),
+        slotsChildren as any as Record<string, any>,
+        this.index
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Method for listening to events.
+   *
+   * Метод для прослушивания событий.
+   * @param event event object/ объект события
+   * @param type type of the object that was clicked/ тип объекта, который был нажат
+   */
+  protected readonly on = (
+    event: MouseEvent,
+    { type }: EventClickValue
+  ) => {
+    if (
+      (event.target as HTMLElement).closest('[data-element="scoreboard"]')
+    ) {
+      switch (type) {
+        case 'icon':
+          this.onIcon?.()
+          eventStopPropagation(event)
+          break
+        case 'icon-trailing':
+          this.onTrailing?.()
+          eventStopPropagation(event)
+          break
+        case 'cancel':
+          this.event?.onClear(event)
+          eventStopPropagation(event)
+          break
+        case 'next':
+          this.onNext?.()
+          this.arrow?.next()
+          this.event?.on(event)
+          eventStopPropagation(event)
+          break
+        case 'previous':
+          this.onPrevious?.()
+          this.arrow?.previous()
+          this.event?.on(event)
+          eventStopPropagation(event)
+          break
+      }
+    }
+  }
 }

package/src/constructors/Field/basicTypes.ts

@@ -6,6 +6,7 @@ import type { FieldLabelPropsBasic } from '../FieldLabel'
 import type { FieldCounterPropsBasic } from '../FieldCounter'
 import type { ProgressPropsBasic } from '../Progress'
 
+import type { AriaList } from '../../types/ariaTypes'
 import type { FieldPropsBasic } from './props'
 import type { FieldSlots } from './types'
 
@@ -29,6 +30,18 @@ export type FieldControl = {
    * CSS-классы для скрытого нативного элемента ввода
    */
   classHidden: string
+  /**
+   * CSS classes applied when the field is focused/
+   * CSS-классы, применяемые при фокусировке на поле
+   */
+  classForFocus: string
+
+  binds:
+    AriaList
+    & {
+      id: string
+      className: string
+    }
 }
 
 /**
@@ -58,26 +71,27 @@ export interface FieldPropsInclude<
   FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic,
   Progress extends ProgressPropsBasic = ProgressPropsBasic
 > extends Omit<
-  FieldPropsBasic<Icon, FieldLabel, FieldMessage, FieldCounter, Progress>,
-  // Status
-  'disabledPrevious'
-  | 'disabledNext'
+    FieldPropsBasic<Icon, FieldLabel, FieldMessage, FieldCounter, Progress>,
+    // Status
+    'disabledPrevious'
+    | 'disabledNext'
 
-  // Value
-  | 'to'
-  | 'value'
-  | 'maxlength'
+    // Value
+    | 'to'
+    | 'value'
+    | 'maxlength'
 
-  // Style
-  | 'counter'
-  | 'counterTemplate'
-  | 'counterTop'
-  | 'iconArrowLeft'
-  | 'iconArrowRight'
-  | 'iconPlus'
-  | 'iconMinus'
-  | 'iconClose'
-> {
+    // Style
+    | 'cancelShow'
+    | 'counter'
+    | 'counterTemplate'
+    | 'counterTop'
+    | 'iconArrowLeft'
+    | 'iconArrowRight'
+    | 'iconPlus'
+    | 'iconMinus'
+    | 'iconClose'
+  > {
   // Status
   focus?: boolean
   selected?: boolean
@@ -85,6 +99,8 @@ export interface FieldPropsInclude<
   disabled?: boolean
 
   // Style
-  cancel?: 'auto' | 'always'
+  align?: 'center' | 'right' | 'left'
+
+  cancel?: 'auto' | 'always' | 'none'
   fieldAttrs?: ConstrBind<Field>
 }