@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/FieldMessage/FieldMessageInclude.ts

@@ -36,6 +36,9 @@ export class FieldMessageInclude<
    * @param components object for working with components/ объект для работы с компонентами
    * @param validationMessage error line/ строка ошибки
    * @param isCounter whether to display the counter/ отображать ли счетчик
+   * @param helperId helper message identifier/ идентификатор сообщения помощника
+   * @param validationId validation message identifier/ идентификатор сообщения проверки
+   * @param counterId counter identifier/ идентификатор счетчика
    * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
    * @param index index identifier/ идентификатор индекса
    */
@@ -45,6 +48,9 @@ export class FieldMessageInclude<
     protected readonly components?: DesignComponents<FieldMessageComponentInclude, Props>,
     protected readonly validationMessage?: RefOrNormal<string>,
     protected readonly isCounter?: RefType<boolean | undefined>,
+    protected readonly helperId?: RefOrNormal<string>,
+    protected readonly validationId?: RefOrNormal<string>,
+    protected readonly counterId?: RefOrNormal<string>,
     protected readonly extra?: RefOrNormal<PropsExtra>,
     protected readonly index?: string
   ) {
@@ -74,7 +80,11 @@ export class FieldMessageInclude<
         disabled: this.props.disabled,
         forceShow: this.props.forceShowMessage,
         helperMessage: this.props.helperMessage,
-        validationMessage: this.validation.value
+        validationMessage: this.validation.value,
+
+        helperId: this.props.helperId ?? this.helperId,
+        validationId: this.props.validationId ?? this.validationId,
+        counterId: this.props.counterId ?? this.counterId
       },
       this.props.fieldMessageAttrs
     )

package/src/constructors/FieldMessage/basicTypes.ts

@@ -1,7 +1,19 @@
 import type { ConstrBind } from '@dxtmisha/functional'
 
 import type { FieldMessagePropsBasic } from './props'
-import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldCounter'
+import type {
+  FieldCounterPropsBasic,
+  FieldCounterPropsInclude
+} from '../FieldCounter'
+
+/**
+ * Type describing available slots/ Тип, описывающий доступные слоты
+ */
+export type FieldMessageSlot = {
+  message?: string
+  helperMessage?: string
+  validationMessage?: string
+}
 
 /**
  * Interface for describing which components need to be connected for FieldMessage work/
@@ -24,4 +36,6 @@ export interface FieldMessagePropsInclude<
   helperMessage?: string
   validationMessage?: string
   fieldMessageAttrs?: ConstrBind<FieldMessage>
+  helperId?: string
+  validationId?: string
 }

package/src/constructors/FieldMessage/properties.json

@@ -1,9 +1,10 @@
-{
-  "padding": {
-    "_type": "var"
-  },
-  "#info": {},
-  "~validation": {
-    "_prop": false
-  }
-}
+{
+  "padding": {
+    "_type": "var"
+  },
+  "#info": {},
+  "#error": {},
+  "~validation": {
+    "_prop": false
+  }
+}

package/src/constructors/FieldMessage/props.ts

@@ -17,6 +17,10 @@ export interface FieldMessagePropsBasic<
   // Value
   helperMessage?: string
   validationMessage?: string
+
+  // Technical
+  helperId?: string
+  validationId?: string
 }
 
 /**

package/src/constructors/FieldMessage/style.scss

@@ -6,8 +6,23 @@
 
   @include ui.paddingX(ui.v('??-padding', 0));
 
-  &__info {
+  &__info,
+  &__error {
     flex-grow: 1;
     flex-shrink: 1;
   }
+
+  &__error {
+    display: none;
+  }
+
+  &--validation {
+    @include ui.subclass('info') {
+      display: none;
+    }
+
+    @include ui.subclass('error') {
+      display: unset;
+    }
+  }
 }

package/src/constructors/FieldMessage/types.ts

@@ -1,5 +1,6 @@
 import type { ConstrClass } from '@dxtmisha/functional'
 import type { FieldCounterComponentInclude } from '../FieldCounter'
+import type { FieldMessageSlot } from './basicTypes'
 
 /**
  * Interface for describing which components need to be connected for work.
@@ -30,10 +31,10 @@ export interface FieldMessageExpose {
  */
 export interface FieldMessageSlots {
   /** Slot for helper message/ Слот для вспомогательного сообщения */
-  helper?(props: any): any
+  helper?(props: FieldMessageSlot): any
 
   /** Slot for validation message/Слот для сообщения об ошибке */
-  validation?(props: any): any
+  validation?(props: FieldMessageSlot): any
 }
 
 /**
@@ -45,5 +46,6 @@ export type FieldMessageClasses = {
   main: ConstrClass
   // :classes [!] System label / Системная метка
   info: string
+  error: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Icon/Icon.ts

@@ -6,6 +6,7 @@ import {
   getBindRef
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { type ImageEventData } from '../Image'
 import { SkeletonInclude } from '../Skeleton'
 
@@ -44,6 +45,7 @@ export class Icon {
    * @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/ функция вызывается, когда срабатывает событие
+   * @param SkeletonIncludeConstructor class for working with Skeleton/ класс для работы с Skeleton
    */
   constructor(
     protected readonly props: IconProps,
@@ -53,11 +55,13 @@ export class Icon {
     protected readonly className: string,
     protected readonly components?: DesignComp<IconComponents, IconProps>,
     protected readonly slots?: IconSlots,
-    protected readonly emits?: ConstrEmit<IconEmits>
+    protected readonly emits?: ConstrEmit<IconEmits>,
+    protected readonly SkeletonIncludeConstructor: typeof SkeletonInclude = SkeletonInclude
   ) {
     this.iconBind = getBindRef(
       refs.icon,
       computed(() => ({
+        key: 'mainIcon',
         class: `${className}__icon`,
         turn: this.props.turn,
         disabled: this.props.disabled,
@@ -69,6 +73,7 @@ export class Icon {
     this.iconActiveBind = getBindRef(
       refs.iconActive,
       computed(() => ({
+        key: 'activeIcon',
         class: `${className}__iconActive`,
         turn: this.props.turn,
         disabled: this.props.disabled,
@@ -76,7 +81,7 @@ export class Icon {
       }))
     )
 
-    this.skeleton = new SkeletonInclude(
+    this.skeleton = new SkeletonIncludeConstructor(
       props,
       classDesign,
       ['classBackgroundVariant']
@@ -95,6 +100,36 @@ export class Icon {
     ...this.skeleton.classes.value
   }))
 
+  /**
+   * Computed bindings for the icon element.
+   *
+   * Вычисляемые привязки для элемента иконки.
+   */
+  readonly binds = computed<any>(() => ({
+    key: 'icon',
+    tabindex: this.props.dynamic ? 0 : undefined,
+    ...AriaStaticInclude.role(this.getRole()),
+    ...AriaStaticInclude.label(this.props.ariaLabel),
+    ...AriaStaticInclude.hidden(!this.props.dynamic)
+  }))
+
+  /**
+   * Get the ARIA role for the icon element.
+   *
+   * Получить ARIA роль для элемента иконки.
+   */
+  protected getRole(): string | undefined {
+    if (this.props.role) {
+      return this.props.role
+    }
+
+    if (this.props.dynamic) {
+      return 'button'
+    }
+
+    return undefined
+  }
+
   /**
    * Triggers an event when the image loading is complete.
    *

package/src/constructors/Icon/IconDesign.tsx

@@ -1,4 +1,4 @@
-import { h, type VNode } from 'vue'
+import { computed, h, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
@@ -42,11 +42,13 @@ export class IconDesign<
    * @param name class name/ название класса
    * @param props properties/ свойства
    * @param options list of additional parameters/ список дополнительных параметров
+   * @param ItemConstructor icon item class/ класс элемента иконки
    */
   constructor(
     name: string,
     props: Readonly<P>,
-    options?: ConstrOptions<COMP, IconEmits, P>
+    options?: ConstrOptions<COMP, IconEmits, P>,
+    ItemConstructor: typeof Icon = Icon
   ) {
     super(
       name,
@@ -54,7 +56,7 @@ export class IconDesign<
       options
     )
 
-    this.item = new Icon(
+    this.item = new ItemConstructor(
       this.props,
       this.refs,
       this.element,
@@ -68,34 +70,6 @@ export class IconDesign<
     this.init()
   }
 
-  /**
-   * Render the main icon.
-   *
-   * Рендер основной иконки.
-   */
-  readonly renderIcon = (): VNode | undefined => {
-    return this.components.renderOne(
-      'image',
-      this.item.iconBind.value,
-      undefined,
-      'icon'
-    )
-  }
-
-  /**
-   * Render the secondary icon.
-   *
-   * Рендер вторичной иконки.
-   */
-  readonly renderIconActive = (): VNode | undefined => {
-    return this.components.renderOne(
-      'image',
-      this.item.iconActiveBind.value,
-      undefined,
-      'iconActive'
-    )
-  }
-
   /**
    * Initialization of all the necessary properties for work<br>
    * Инициализация всех необходимых свойств для работы.
@@ -129,7 +103,8 @@ export class IconDesign<
   }
 
   /**
-   * A method for rendering.<br>
+   * A method for rendering.
+   *
    * Метод для рендеринга.
    */
   protected initRender(): VNode {
@@ -145,13 +120,45 @@ export class IconDesign<
       children.push(this.renderIconActive())
     }
 
-    return h(
-      'span',
-      {
-        ...this.getAttrs(),
-        class: this.classes?.value.main
-      },
-      children
+    return h('span', this.propsMain.value, children)
+  }
+
+  /**
+   * Computed properties for the main element.
+   *
+   * Вычисляемые свойства для главного элемента.
+   */
+  readonly propsMain = computed<any>(() => ({
+    ...this.getAttrs(),
+    ...this.item.binds.value,
+    class: this.classes?.value.main
+  }))
+
+  /**
+   * Render the main icon.
+   *
+   * Рендер основной иконки.
+   */
+  readonly renderIcon = (): VNode | undefined => {
+    return this.components.renderOne(
+      'image',
+      this.item.iconBind.value,
+      undefined,
+      'icon'
+    )
+  }
+
+  /**
+   * Render the secondary icon.
+   *
+   * Рендер вторичной иконки.
+   */
+  readonly renderIconActive = (): VNode | undefined => {
+    return this.components.renderOne(
+      'image',
+      this.item.iconActiveBind.value,
+      undefined,
+      'iconActive'
     )
   }
 }

package/src/constructors/Icon/properties.json

@@ -1,25 +1,25 @@
-{
-  "width": {
-    "_type": "var"
-  },
-  "~turn": {},
-  "~disabled": {},
-  "~hide": {},
-  "~asPalette": {},
-  "~dir": {},
-  "~overlay": {},
-  "~dynamic": {},
-  "~start": {
-    "_category": "order"
-  },
-  "~end": {
-    "_category": "order"
-  },
-  "~high": {},
-  "~animation-type": {
-    "~type1": {},
-    "~type2": {},
-    "_default": "type1"
-  },
-  "~animation-show": {}
-}
+{
+  "width": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~asPalette": {},
+  "~dir": {},
+  "~overlay": {},
+  "~dynamic": {},
+  "~start": {
+    "_category": "order"
+  },
+  "~end": {
+    "_category": "order"
+  },
+  "~high": {},
+  "~animation-type": {
+    "~type1": {},
+    "~type2": {},
+    "_default": "type1"
+  },
+  "~animation-show": {}
+}

package/src/constructors/Icon/props.ts

@@ -1,26 +1,29 @@
+import type { RoleType } from '../../types/roleTypes'
 import type { ImagePropsBasic, ImageValue } from '../Image'
 import type { SkeletonPropsInclude } from '../Skeleton'
+import type { AriaLabelPropsInclude } from '../../types/ariaTypes.ts'
 
 interface IconPropsToken {
-  // :type [!] System label / Системная метка
-  turn?: boolean
-  disabled?: boolean
-  hide?: boolean
-  asPalette?: boolean
-  dir?: boolean
-  overlay?: boolean
-  dynamic?: boolean
-  start?: boolean
-  end?: boolean
-  high?: boolean
-  animationType?: 'type1' | 'type2'
-  animationShow?: boolean
+  // :type [!] System label / Системная метка
+  turn?: boolean
+  disabled?: boolean
+  hide?: boolean
+  asPalette?: boolean
+  dir?: boolean
+  overlay?: boolean
+  dynamic?: boolean
+  start?: boolean
+  end?: boolean
+  high?: boolean
+  animationType?: 'type1' | 'type2'
+  animationShow?: boolean
   // :type [!] System label / Системная метка
 }
 
 export interface IconPropsBasic<
   Image extends ImagePropsBasic = ImagePropsBasic
-> extends SkeletonPropsInclude {
+> extends SkeletonPropsInclude,
+  AriaLabelPropsInclude {
   // Status
   /** Активное состояние иконки/ Active state of the icon */
   active?: boolean
@@ -30,6 +33,9 @@ export interface IconPropsBasic<
   icon?: ImageValue<Image>
   /** Value of the active icon/ Значение активной иконки */
   iconActive?: ImageValue<Image>
+
+  // ARIA
+  role?: RoleType
 }
 
 /**
@@ -47,8 +53,8 @@ export interface IconProps extends IconPropsBasic, IconPropsToken {
  */
 export const defaultsIcon = {
   ...{
-    // :default [!] System label / Системная метка
-    animationType: 'type1'
+    // :default [!] System label / Системная метка
+    animationType: 'type1'
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/Icon/types.ts

@@ -41,6 +41,6 @@ export interface IconSlots {
  */
 export type IconClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Image/Image.ts

@@ -1,11 +1,14 @@
 import { computed, onUnmounted, type Ref, watch } from 'vue'
 import {
+  type ConstrBind,
   type ConstrClassObject,
   type ConstrEmit,
   type ConstrStyles,
   isString
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+
 import { ImageType } from './ImageType'
 import { ImageData } from './ImageData'
 
@@ -13,6 +16,7 @@ import { ImageCoordinator } from './ImageCoordinator'
 import { ImagePosition } from './ImagePosition'
 import { ImageAdaptiveItem } from './ImageAdaptiveItem'
 import { ImageBackground } from './ImageBackground'
+import { ImageImg } from './ImageImg'
 
 import { ImageTypeValue } from './basicTypes'
 import type { ImageEmits } from './types'
@@ -32,38 +36,62 @@ export class Image {
   readonly adaptiveItem: ImageAdaptiveItem
   readonly background: ImageBackground
 
+  readonly img: ImageImg
+
   /**
    * Constructor
    * @param props input data/ входные данные
    * @param element input element/ элемент ввода
    * @param className class name/ название класса
    * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   * @param ImageTypeConstructor class for working with image type/ класс для работы с типом изображения
+   * @param ImageDataConstructor class for working with image data/ класс для работы с данными изображения
+   * @param ImageCoordinatorConstructor class for working with image coordinates/ класс для работы с координатами изображения
+   * @param ImagePositionConstructor class for working with image position/ класс для работы с позицией изображения
+   * @param ImageAdaptiveItemConstructor class for working with adaptive image item/ класс для работы с адаптивным элементом изображения
+   * @param ImageBackgroundConstructor class for working with image background/ класс для работы с фоном изображения
+   * @param ImageImgConstructor class for working with image tag/ класс для работы с тегом изображения
    */
   constructor(
     protected readonly props: ImageProps,
     protected readonly element: Ref<HTMLElement | undefined>,
     protected readonly className: string,
-    protected readonly emits?: ConstrEmit<ImageEmits>
+    protected readonly emits?: ConstrEmit<ImageEmits>,
+    protected readonly ImageTypeConstructor: typeof ImageType = ImageType,
+    protected readonly ImageDataConstructor: typeof ImageData = ImageData,
+    protected readonly ImageCoordinatorConstructor: typeof ImageCoordinator = ImageCoordinator,
+    protected readonly ImagePositionConstructor: typeof ImagePosition = ImagePosition,
+    protected readonly ImageAdaptiveItemConstructor: typeof ImageAdaptiveItem = ImageAdaptiveItem,
+    protected readonly ImageBackgroundConstructor: typeof ImageBackground = ImageBackground,
+    protected readonly ImageImgConstructor: typeof ImageImg = ImageImg
   ) {
-    this.type = new ImageType(props)
-    this.data = new ImageData(props, this.type)
+    this.type = new ImageTypeConstructor(props)
+    this.data = new ImageDataConstructor(props, this.type)
 
-    this.coordinator = new ImageCoordinator(props)
-    this.position = new ImagePosition(props, this.coordinator)
+    this.coordinator = new ImageCoordinatorConstructor(props)
+    this.position = new ImagePositionConstructor(props, this.coordinator)
 
-    this.adaptiveItem = new ImageAdaptiveItem(
+    this.adaptiveItem = new ImageAdaptiveItemConstructor(
       props,
       this.data,
       element
     )
 
-    this.background = new ImageBackground(
+    this.background = new ImageBackgroundConstructor(
       props,
       this.data,
       this.coordinator,
       this.adaptiveItem
     )
 
+    this.img = new ImageImgConstructor(
+      this.props,
+      element,
+      this.type,
+      this.position,
+      this.background
+    )
+
     if (emits) {
       watch(this.data.image, (image) => {
         emits('load', {
@@ -76,6 +104,11 @@ export class Image {
     onUnmounted(() => this.adaptiveItem.remove())
   }
 
+  /**
+   * Determines the tag to use/ Определяет используемый тег
+   */
+  readonly tag = computed<string>(() => this.img.is.value ? 'img' : 'span')
+
   /**
    * Values for the text. Text is used for the type of icon that works as a background.
    *
@@ -125,6 +158,10 @@ export class Image {
       notranslate: true
     }
 
+    if (this.img.is.value) {
+      data[`${this.className}--img`] = true
+    }
+
     switch (type) {
       case 'outlined':
         data['material-symbols-outlined'] = true
@@ -144,9 +181,8 @@ export class Image {
   })
 
   /**
-   * Calculates all properties for the style of the element.
-   *
-   * Вычисляет все свойства для стиля элемента.
+   * Calculates all properties for the style of the element/
+   * Вычисляет все свойства для стиля элемента
    */
   readonly styles = computed<ConstrStyles>(() => {
     const value = this.props.value
@@ -181,4 +217,26 @@ export class Image {
 
     return {} as ConstrStyles
   })
+
+  /**
+   * Computed bindings for the image element.
+   *
+   * Вычисляемые привязки для элемента изображения.
+   */
+  readonly binds = computed(() => ({
+    translate: 'no',
+    ...AriaStaticInclude.role('img'),
+    ...AriaStaticInclude.label(this.props.alt),
+    ...AriaStaticInclude.hidden()
+  }))
+
+  /**
+   * Bindings for the image value.
+   *
+   * Привязки для значения изображения.
+   */
+  readonly valueBinds = computed<ConstrBind<any>>(() => ({
+    key: 'value',
+    data: this.data.image.value
+  }))
 }

package/src/constructors/Image/ImageBackground.ts

@@ -34,13 +34,26 @@ export class ImageBackground {
    * Возвращает значения для свойства background-image.
    */
   readonly image = computed<string | null>(() => {
+    const image = this.imageSrc.value
+
+    if (image) {
+      return `url("${image}")`
+    }
+
+    return null
+  })
+
+  /**
+   * Returns the image source/ Возвращает источник изображения
+   */
+  readonly imageSrc = computed<string | null>(() => {
     const image = this.data.image.value
 
     switch (typeof image) {
       case 'string':
-        return `url("${image}")`
+        return image
       case 'object':
-        return `url("${image.src}")`
+        return image.src
       default:
         return null
     }

package/src/constructors/Image/ImageCoordinator.ts

@@ -95,10 +95,12 @@ export class ImageCoordinator {
    */
   getSize(): ImageSize<string> {
     const item = this.size.value
+    const width = item.width === 0 ? 100 : item.width
+    const height = item.height === 0 ? 100 : item.height
 
     return {
-      width: `${100 / item.width * 100}%`,
-      height: `${100 / item.height * 100}%`
+      width: `${100 / width * 100}%`,
+      height: `${100 / height * 100}%`
     }
   }
 }