@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Field/properties.json

@@ -1,86 +1,92 @@
-{
-  "padding": {
-    "_type": "var"
-  },
-  "space": {
-    "_type": "var"
-  },
-  "height": {
-    "_type": "var"
-  },
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "border-opacity": {
-    "_type": "var"
-  },
-  "border-radius": {
-    "_type": "var"
-  },
-  "focusWithin": {
-    "_type": "var"
-  },
-  "validation": {
-    "_type": "var"
-  },
-  "#body": {
-    "#input": {},
-    "#title": {
-      "#label": {
-        "#text": {}
-      }
-    },
-    "#scoreboard": {
-      "#left": {},
-      "#right": {},
-      "#space": {},
-      "#input": {}
-    },
-    "#border": {}
-  },
-  "#required": {},
-  "focus": {},
-  "active": {},
-  "~selected": {},
-  "readonly": {},
-  "disabled": {},
-  "~block": {},
-  "~isValue": {},
-  "~basic": {
-    "_category": "style"
-  },
-  "~boxed": {
-    "_category": "style"
-  },
-  "~tonal": {
-    "_category": "style"
-  },
-  "~filled": {
-    "_category": "style"
-  },
-  "~outlined": {
-    "_category": "style"
-  },
-  "~classic": {
-    "_category": "style"
-  },
-  "~arrowCarousel": {},
-  "~arrowStepper": {},
-  "~cancel": {
-    "~auto": {},
-    "~always": {},
-    "_default": "auto"
-  },
-  "~align": {
-    "~center": {},
-    "~right": {},
-    "~left": {},
-    "_default": "center"
-  },
-  "~width": {
-    "_style": true
-  }
-}
+{
+  "padding": {
+    "_type": "var"
+  },
+  "space": {
+    "_type": "var"
+  },
+  "height": {
+    "_type": "var"
+  },
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "border-radius": {
+    "_type": "var"
+  },
+  "focusWithin": {
+    "_type": "var"
+  },
+  "validation": {
+    "_type": "var"
+  },
+  "#body": {
+    "#input": {},
+    "#title": {
+      "#label": {
+        "#text": {}
+      }
+    },
+    "#scoreboard": {
+      "#left": {},
+      "#right": {},
+      "#space": {},
+      "#input": {}
+    },
+    "#border": {}
+  },
+  "#required": {},
+  "focus": {},
+  "active": {},
+  "~selected": {},
+  "readonly": {},
+  "disabled": {},
+  "~block": {},
+  "~isValue": {},
+  "~basic": {
+    "_category": "style"
+  },
+  "~boxed": {
+    "_category": "style"
+  },
+  "~tonal": {
+    "_category": "style"
+  },
+  "~filled": {
+    "_category": "style"
+  },
+  "~outlined": {
+    "_category": "style"
+  },
+  "~classic": {
+    "_category": "style"
+  },
+  "~arrowCarousel": {},
+  "~arrowStepper": {},
+  "~arrowAlign": {
+    "~center": {},
+    "~right": {},
+    "~left": {},
+    "_default": "right"
+  },
+  "~cancel": {
+    "~auto": {},
+    "~always": {},
+    "~none": {},
+    "_default": "auto"
+  },
+  "~align": {
+    "~center": {},
+    "~right": {},
+    "~left": {}
+  },
+  "~width": {
+    "_style": true
+  }
+}

package/src/constructors/Field/props.ts

@@ -27,7 +27,8 @@ interface FieldPropsToken {
   classic?: boolean
   arrowCarousel?: boolean
   arrowStepper?: boolean
-  cancel?: 'auto' | 'always'
+  arrowAlign?: 'center' | 'right' | 'left'
+  cancel?: 'auto' | 'always' | 'none'
   align?: 'center' | 'right' | 'left'
   width?: string | 'custom'
   // :type [!] System label / Системная метка
@@ -54,6 +55,8 @@ export interface FieldPropsBasic<
   disabledNext?: boolean
 
   // Style
+  id?: string | number
+
   counterTop?: boolean
 
   cancelShow?: boolean
@@ -81,8 +84,8 @@ export interface FieldProps extends FieldPropsBasic, FieldPropsToken {
 export const defaultsField = {
   ...{
     // :default [!] System label / Системная метка
-    cancel: 'auto',
-    align: 'center'
+    arrowAlign: 'right',
+    cancel: 'auto'
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/Field/style.scss

@@ -105,6 +105,7 @@
     max-width: 100%;
 
     border-radius: inherit;
+    outline: transparent solid 0;
 
     transition-timing-function: inherit;
     transition-duration: inherit;
@@ -124,7 +125,9 @@
       min-height: ui.v('??height');
 
       font: inherit;
-      line-height: calc((#{ui.v('??sys.half') - ui.v('??sys.title.half')}) * 2);
+      letter-spacing: inherit;
+      text-align: left;
+      line-height: calc(#{ui.v('??sys.title.half')} * 2);
 
       background-color: transparent;
       border: none;
@@ -146,6 +149,12 @@
       display: none;
     }
 
+    &__focus {
+      @include ui.absolute;
+      z-index: 8;
+      opacity: 0;
+    }
+
     &__title {
       display: flex;
       @include ui.absoluteTop;
@@ -355,6 +364,9 @@
 
   @include ui.focus($this) {
     @include ui.subclass('body') {
+      outline-width: ui.v('??focusWithin.outlineWidth');
+      @include ui.outlineColor(ui.v('??focusWithin.outlineColor'), ui.v('??focusWithin.outlineOpacity'));
+
       &__title {
         @include ui.color(ui.v('??focusWithin.color'), ui.v('??focusWithin.colorOpacity'));
       }
@@ -514,23 +526,37 @@
     width: 100%;
   }
 
-  &--right {
-    @include ui.subclass('body') {
-      &__scoreboard {
-        &__space {
-          @include ui.marginRight(0);
+  &--align {
+    &--right {
+      @include ui.subclass('body') {
+        &__input {
+          text-align: right;
+        }
+
+        &__scoreboard__space {
+          flex-direction: row-reverse;
         }
       }
+
+      @include ui.subclass('caption') {
+        @include ui.textAlign('right');
+      }
     }
 
-    @include ui.subclass('body') {
-      &__input {
-        text-align: right;
+    &--center {
+      @include ui.subclass('caption') {
+        display: none;
+      }
+
+      @include ui.subclass('body') {
+        &__input {
+          text-align: center;
+        }
       }
     }
   }
 
-  &--align {
+  &--arrowAlign {
     &--right {
       @include ui.subclass('previous') {
         order: 94;
@@ -542,15 +568,5 @@
         order: 6;
       }
     }
-
-    &--center {
-      @include ui.state('arrow') {
-        @include ui.subclass('body') {
-          &__input {
-            text-align: center;
-          }
-        }
-      }
-    }
   }
 }

package/src/constructors/Field/types.ts

@@ -61,18 +61,18 @@ export interface FieldSlots extends CaptionSlots,
  */
 export type FieldClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  body: string
-  bodyInput: string
-  bodyTitle: string
-  bodyTitleLabel: string
-  bodyTitleLabelText: string
-  bodyScoreboard: string
-  bodyScoreboardLeft: string
-  bodyScoreboardRight: string
-  bodyScoreboardSpace: string
-  bodyScoreboardInput: string
-  bodyBorder: string
-  required: string
+  // :classes [!] System label / Системная метка
+  body: string
+  bodyInput: string
+  bodyTitle: string
+  bodyTitleLabel: string
+  bodyTitleLabelText: string
+  bodyScoreboard: string
+  bodyScoreboardLeft: string
+  bodyScoreboardRight: string
+  bodyScoreboardSpace: string
+  bodyScoreboardInput: string
+  bodyBorder: string
+  required: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/FieldCounter/FieldCounterDesign.tsx

@@ -111,6 +111,7 @@ export class FieldCounterDesign<
       return h(
         'div', {
           ...this.getAttrs(),
+          id: this.props.id,
           class: this.classes?.value.main,
           innerHTML: this.item.item.value
         }

package/src/constructors/FieldCounter/FieldCounterInclude.ts

@@ -4,6 +4,7 @@ import {
   DesignComponents,
   getRef,
   isFilled,
+  isNull,
   type RefOrNormal,
   toBinds
 } from '@dxtmisha/functional'
@@ -44,7 +45,7 @@ export class FieldCounterInclude<
   readonly isCounter = computed<boolean>(() =>
     Boolean(
       this.props.counterShow && (
-        isFilled(this.props.counter)
+        !isNull(this.props.counter)
         || isFilled(this.props.maxlength)
       )
     )
@@ -55,6 +56,7 @@ export class FieldCounterInclude<
     return toBinds<PropsExtra>(
       getRef(this.extra),
       {
+        id: this.props.counterId,
         counter: this.props.counter,
         maxlength: this.props.maxlength,
         template: this.props.counterTemplate

package/src/constructors/FieldCounter/basicTypes.ts

@@ -20,6 +20,7 @@ export interface FieldCounterPropsInclude<
   counter?: FieldCounterPropsBasic['counter']
   counterShow?: boolean
   counterTemplate?: FieldCounterPropsBasic['template']
+  counterId?: string
   maxlength?: FieldCounterPropsBasic['maxlength']
   fieldCounterAttrs?: ConstrBind<FieldCounter>
 }

package/src/constructors/FieldCounter/properties.json

@@ -1,3 +1,3 @@
-{
-  "white-space": "nowrap"
-}
+{
+  "white-space": "nowrap"
+}

package/src/constructors/FieldCounter/props.ts

@@ -1,5 +1,5 @@
 interface FieldCounterPropsToken {
-  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
   // :type [!] System label / Системная метка
 }
 
@@ -9,6 +9,9 @@ export interface FieldCounterPropsBasic {
   maxlength?: string | number
 
   template?: string
+
+  // Technical
+  id?: string
 }
 
 /**
@@ -26,7 +29,7 @@ export interface FieldCounterProps extends FieldCounterPropsBasic, FieldCounterP
  */
 export const defaultsFieldCounter = {
   ...{
-    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/FieldCounter/types.ts

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

package/src/constructors/FieldLabel/FieldLabelDesign.tsx

@@ -5,6 +5,7 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { FieldLabel } from './FieldLabel'
 
 import {
@@ -74,7 +75,9 @@ export class FieldLabelDesign<
    * Инициализация всех необходимых свойств для работы.
    */
   protected initExpose(): EXPOSE {
-    return {} as EXPOSE
+    return {
+      ...this.item.label.expose
+    } as EXPOSE
   }
 
   /**
@@ -144,7 +147,8 @@ export class FieldLabelDesign<
         h(
           'span',
           {
-            class: this.classes?.value.required
+            class: this.classes?.value.required,
+            ...AriaStaticInclude.hidden()
           },
           '*'
         )

package/src/constructors/FieldLabel/FieldLabelInclude.ts

@@ -3,8 +3,10 @@ import {
   type ConstrBind,
   DesignComponents,
   getRef,
-  isFilled, type RawSlots,
-  type RefOrNormal, type RefType,
+  isFilled,
+  type RawSlots,
+  type RefOrNormal,
+  type RefType,
   toBinds
 } from '@dxtmisha/functional'
 
@@ -32,6 +34,8 @@ export class FieldLabelInclude<
    * @param components object for working with components/ объект для работы с компонентами
    * @param slots object for working with slots/ объект для работы со слотами
    * @param isCounter whether to display the counter/ отображать ли счетчик
+   * @param labelId label identifier/ идентификатор метки
+   * @param counterId counter identifier/ идентификатор счетчика
    * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
    * @param index index identifier/ идентификатор индекса
    */
@@ -41,6 +45,8 @@ export class FieldLabelInclude<
     protected readonly components?: DesignComponents<FieldLabelComponentInclude, Props>,
     protected readonly slots?: FieldLabelSlotsInclude,
     protected readonly isCounter?: RefType<boolean | undefined>,
+    protected readonly labelId?: string,
+    protected readonly counterId?: string,
     protected readonly extra?: RefOrNormal<PropsExtra>,
     protected readonly index?: string
   ) {
@@ -48,7 +54,7 @@ export class FieldLabelInclude<
   }
 
   /** Checks if label should be displayed/ Проверяет, надо ли отображать метку */
-  readonly is = computed<boolean>(() => isFilled(this.props.label))
+  readonly is = computed<boolean>(() => isFilled(this.props.label) || Boolean(this.isCounter?.value))
 
   /** Computed bindings for FieldLabel/ Вычисляемые привязки для FieldLabel */
   readonly binds = computed<PropsExtra>(() =>
@@ -59,7 +65,10 @@ export class FieldLabelInclude<
         : {},
       {
         label: this.props.label,
-        required: this.props.required
+        required: this.props.required,
+
+        labelId: this.props.labelId ?? this.labelId,
+        counterId: this.props.counterId ?? this.counterId
       },
       this.props.fieldLabelAttrs
     )

package/src/constructors/FieldLabel/properties.json

@@ -1,4 +1,4 @@
-{
-  "#label": {},
-  "#required": {}
-}
+{
+  "#label": {},
+  "#required": {}
+}

package/src/constructors/FieldLabel/props.ts

@@ -4,7 +4,7 @@ import type { FieldCounterPropsBasic, FieldCounterPropsInclude } from '../FieldC
 import type { SkeletonPropsInclude } from '../Skeleton'
 
 interface FieldLabelPropsToken {
-  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
   // :type [!] System label / Системная метка
 }
 
@@ -34,7 +34,7 @@ export interface FieldLabelProps extends FieldLabelPropsBasic, FieldLabelPropsTo
  */
 export const defaultsFieldLabel = {
   ...{
-    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/FieldLabel/types.ts

@@ -1,5 +1,5 @@
 import type { ConstrClass } from '@dxtmisha/functional'
-import type { LabelAlternativeSlots } from '../../types/labelTypes'
+import type { LabelAlternativeSlots, LabelExpose } from '../../types/labelTypes'
 import { type FieldCounterComponentInclude } from '../FieldCounter'
 import { type ProgressComponentInclude } from '../Progress'
 
@@ -24,7 +24,7 @@ export type FieldLabelEmits = {}
  *
  * Тип, описывающий доступные свойства.
  */
-export interface FieldLabelExpose {
+export interface FieldLabelExpose extends LabelExpose {
 }
 
 /**

package/src/constructors/FieldMessage/FieldMessage.ts

@@ -6,6 +6,7 @@ import { FieldMessageMessage } from './FieldMessageMessage'
 import { SkeletonInclude } from '../Skeleton'
 
 import type { FieldMessageComponents, FieldMessageEmits, FieldMessageSlots } from './types'
+import type { FieldMessageSlot } from './basicTypes'
 import type { FieldMessageProps } from './props'
 
 /**
@@ -76,4 +77,22 @@ export class FieldMessage {
   readonly classes = computed<ConstrClassObject>(() => ({
     [`${this.className}--validation`]: this.message.isValidation.value
   }))
+
+  /**
+   * Data for helper slot/ Данные для слота helper
+   */
+  readonly slotHelperData = computed<FieldMessageSlot>(() => ({
+    message: this.props.helperMessage,
+    helperMessage: this.props.helperMessage,
+    validationMessage: this.props.validationMessage
+  }))
+
+  /**
+   * Data for validation slot/ Данные для слота validation
+   */
+  readonly slotValidationData = computed<FieldMessageSlot>(() => ({
+    message: this.props.validationMessage,
+    helperMessage: this.props.helperMessage,
+    validationMessage: this.props.validationMessage
+  }))
 }

package/src/constructors/FieldMessage/FieldMessageDesign.tsx

@@ -17,6 +17,7 @@ import {
   type FieldMessageExpose,
   type FieldMessageSlots
 } from './types'
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 
 /**
  * FieldMessageDesign
@@ -87,7 +88,8 @@ export class FieldMessageDesign<
       main: this.item.classes.value,
       ...{
         // :classes [!] System label / Системная метка
-        info: this.getSubClass('info')
+        info: this.getSubClass('info'),
+        error: this.getSubClass('error')
         // :classes [!] System label / Системная метка
       }
     } as Partial<CLASSES>
@@ -118,6 +120,7 @@ export class FieldMessageDesign<
         },
         [
           ...this.renderInfo(),
+          ...this.renderError(),
           ...this.item.fieldCounter.render()
         ]
       )
@@ -135,17 +138,46 @@ export class FieldMessageDesign<
     const children: VNode[] = []
     const props: Record<string, any> = {
       key: 'message',
+      id: this.props.helperId,
       class: [
         this.classes?.value.info,
         this.item.skeleton.classes.value
       ]
     }
 
-    this.initSlot('helper', children)
-    this.initSlot('validation', children)
+    this.initSlot('helper', children, this.item.slotHelperData.value)
 
     if (children.length < 1) {
-      props.innerHTML = this.item.message.item.value
+      props.innerHTML = this.props.helperMessage
+    }
+
+    return [
+      h(
+        'div',
+        props,
+        children
+      )
+    ]
+  }
+
+  /**
+   * Rendering error.
+   *
+   * Рендеринг ошибки.
+   */
+  protected renderError = (): VNode[] => {
+    const children: VNode[] = []
+    const props: Record<string, any> = {
+      key: 'message',
+      id: this.props.validationId,
+      class: this.classes?.value.error,
+      ...AriaStaticInclude.role('alert')
+    }
+
+    this.initSlot('validation', children, this.item.slotValidationData.value)
+
+    if (children.length < 1) {
+      props.innerHTML = this.props.validationMessage
     }
 
     return [