@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/types/ariaTypes.ts

@@ -0,0 +1,366 @@
+import type { NumberOrString } from '@dxtmisha/functional'
+import type { RoleType } from './roleTypes'
+
+/** ARIA true or false type/ ARIA тип true или false */
+export type AriaTrueOrFalse = 'true' | 'false' | boolean
+
+/** ARIA list type/ ARIA тип списка */
+export type AriaList = {
+  /** Element ID/ ID элемента */
+  'id'?: string
+
+  /** ARIA role type/ Тип ARIA роли */
+  'role'?: RoleType
+
+  /**
+   * Tabindex attribute - indicates if the element can be focused/
+   * Атрибут Tabindex - указывает, может ли элемент получать фокус
+   */
+  'tabindex'?: NumberOrString
+
+  /**
+   * ARIA activedescendant attribute - identifies the currently active element/
+   * Атрибут ARIA activedescendant - идентифицирует текущий активный элемент
+   */
+  'aria-activedescendant'?: string
+
+  /**
+   * ARIA atomic attribute - indicates whether assistive technologies will present all or only parts of the changed region/
+   * Атрибут ARIA atomic - указывает, будут ли вспомогательные технологии представлять весь или только части измененного региона
+   */
+  'aria-atomic'?: AriaTrueOrFalse
+
+  /**
+   * ARIA autocomplete attribute - indicates whether inputting text could trigger display of suggestions/
+   * Атрибут ARIA autocomplete - указывает, может ли ввод текста вызвать отображение предложений
+   */
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both'
+
+  /**
+   * ARIA busy attribute - indicates an element is being modified/
+   * Атрибут ARIA busy - указывает, что элемент изменяется
+   */
+  'aria-busy'?: AriaTrueOrFalse
+
+  /**
+   * ARIA checked attribute - indicates the current checked state/
+   * Атрибут ARIA checked - указывает текущее состояние отметки
+   */
+  'aria-checked'?: AriaTrueOrFalse | 'mixed'
+
+  /**
+   * ARIA colcount attribute - defines the total number of columns/
+   * Атрибут ARIA colcount - определяет общее количество столбцов
+   */
+  'aria-colcount'?: number
+
+  /**
+   * ARIA colindex attribute - defines an element's column index/
+   * Атрибут ARIA colindex - определяет индекс столбца элемента
+   */
+  'aria-colindex'?: number
+
+  /**
+   * ARIA colspan attribute - defines the number of columns spanned by a cell/
+   * Атрибут ARIA colspan - определяет количество столбцов, занимаемых ячейкой
+   */
+  'aria-colspan'?: number
+
+  /**
+   * ARIA controls attribute - identifies controlled element/
+   * Атрибут ARIA controls - идентифицирует управляемый элемент
+   */
+  'aria-controls'?: string
+
+  /**
+   * ARIA current attribute - indicates the current item within a container/
+   * Атрибут ARIA current - указывает текущий элемент в контейнере
+   */
+  'aria-current'?: AriaTrueOrFalse | 'page' | 'step' | 'location' | 'date' | 'time'
+
+  /**
+   * ARIA describedby attribute - identifies describing element/
+   * Атрибут ARIA describedby - идентифицирует описывающий элемент
+   */
+  'aria-describedby'?: string
+
+  /**
+   * ARIA details attribute - identifies the element that provides detailed information/
+   * Атрибут ARIA details - идентифицирует элемент, предоставляющий подробную информацию
+   */
+  'aria-details'?: string
+
+  /**
+   * ARIA disabled attribute - indicates that the element is not editable or operable/
+   * Атрибут ARIA disabled - указывает, что элемент не редактируется и не работает
+   */
+  'aria-disabled'?: AriaTrueOrFalse
+
+  /**
+   * ARIA errormessage attribute - identifies the element that provides an error message/
+   * Атрибут ARIA errormessage - идентифицирует элемент, предоставляющий сообщение об ошибке
+   */
+  'aria-errormessage'?: string
+
+  /**
+   * ARIA expanded state attribute/
+   * Атрибут ARIA состояния развёрнутости
+   */
+  'aria-expanded'?: AriaTrueOrFalse
+
+  /**
+   * ARIA flowto attribute - identifies the next element in an alternate reading order/
+   * Атрибут ARIA flowto - идентифицирует следующий элемент в альтернативном порядке чтения
+   */
+  'aria-flowto'?: string
+
+  /**
+   * ARIA grabbed attribute - indicates an element's grabbed state in a drag-and-drop operation/
+   * Атрибут ARIA grabbed - указывает состояние захвата элемента в операции перетаскивания
+   */
+  'aria-grabbed'?: AriaTrueOrFalse
+
+  /**
+   * ARIA haspopup attribute - indicates the availability of a popup element/
+   * Атрибут ARIA haspopup - указывает на наличие всплывающего элемента
+   */
+  'aria-haspopup'?: AriaTrueOrFalse | 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid'
+
+  /**
+   * ARIA hidden attribute - indicates whether the element is exposed to an accessibility API/
+   * Атрибут ARIA hidden - указывает, открыт ли элемент для API доступности
+   */
+  'aria-hidden'?: AriaTrueOrFalse
+
+  /**
+   * ARIA invalid attribute - indicates the entered value does not conform to the format expected/
+   * Атрибут ARIA invalid - указывает, что введенное значение не соответствует ожидаемому формату
+   */
+  'aria-invalid'?: AriaTrueOrFalse | 'grammar' | 'spelling'
+
+  /**
+   * ARIA keyshortcuts attribute - indicates keyboard shortcuts that an author has implemented/
+   * Атрибут ARIA keyshortcuts - указывает сочетания клавиш, реализованные автором
+   */
+  'aria-keyshortcuts'?: string
+
+  /**
+   * ARIA label attribute - defines a string value that labels the current element/
+   * Атрибут ARIA label - определяет строковое значение, которое обозначает текущий элемент
+   */
+  'aria-label'?: string
+
+  /**
+   * ARIA labelledby attribute - identifies labeling element/
+   * Атрибут ARIA labelledby - идентифицирует обозначающий элемент
+   */
+  'aria-labelledby'?: string
+
+  /**
+   * ARIA level attribute - defines the hierarchical level of an element/
+   * Атрибут ARIA level - определяет иерархический уровень элемента
+   */
+  'aria-level'?: number
+
+  /**
+   * ARIA live attribute - indicates that an element will be updated/
+   * Атрибут ARIA live - указывает, что элемент будет обновляться
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive'
+
+  /**
+   * ARIA modal attribute - indicates modal state/
+   * Атрибут ARIA modal - указывает модальное состояние
+   */
+  'aria-modal'?: AriaTrueOrFalse
+
+  /**
+   * ARIA multiline attribute - indicates whether a text box accepts multiple lines of input/
+   * Атрибут ARIA multiline - указывает, принимает ли текстовое поле несколько строк ввода
+   */
+  'aria-multiline'?: AriaTrueOrFalse
+
+  /**
+   * ARIA multiselectable attribute - indicates that the user may select more than one item/
+   * Атрибут ARIA multiselectable - указывает, что пользователь может выбрать более одного элемента
+   */
+  'aria-multiselectable'?: AriaTrueOrFalse
+
+  /**
+   * ARIA orientation attribute - indicates whether the element's orientation is horizontal, vertical, or unknown/
+   * Атрибут ARIA orientation - указывает, является ли ориентация элемента горизонтальной, вертикальной или неизвестной
+   */
+  'aria-orientation'?: 'horizontal' | 'vertical' | 'undefined'
+
+  /**
+   * ARIA owns attribute - identifies an element to define a visual, functional, or contextual parent/
+   * Атрибут ARIA owns - идентифицирует элемент для определения визуального, функционального или контекстного родителя
+   */
+  'aria-owns'?: string
+
+  /**
+   * ARIA placeholder attribute - defines a short hint to help the user with data entry/
+   * Атрибут ARIA placeholder - определяет краткую подсказку для помощи пользователю при вводе данных
+   */
+  'aria-placeholder'?: string
+
+  /**
+   * ARIA posinset attribute - defines an element's number or position in the current set/
+   * Атрибут ARIA posinset - определяет номер или позицию элемента в текущем наборе
+   */
+  'aria-posinset'?: number
+
+  /**
+   * ARIA pressed attribute - indicates the current pressed state of toggle buttons/
+   * Атрибут ARIA pressed - указывает текущее состояние нажатия кнопок-переключателей
+   */
+  'aria-pressed'?: AriaTrueOrFalse | 'mixed'
+
+  /**
+   * ARIA readonly attribute - indicates that the element is not editable/
+   * Атрибут ARIA readonly - указывает, что элемент не редактируется
+   */
+  'aria-readonly'?: AriaTrueOrFalse
+
+  /**
+   * ARIA relevant attribute - indicates what notifications the user agent will trigger/
+   * Атрибут ARIA relevant - указывает, какие уведомления будет вызывать пользовательский агент
+   */
+  'aria-relevant'?: 'additions' | 'removals' | 'text' | 'all' | string
+
+  /**
+   * ARIA required attribute - indicates that user input is required/
+   * Атрибут ARIA required - указывает, что требуется ввод пользователя
+   */
+  'aria-required'?: AriaTrueOrFalse
+
+  /**
+   * ARIA roledescription attribute - defines a human-readable description for the role/
+   * Атрибут ARIA roledescription - определяет читаемое человеком описание роли
+   */
+  'aria-roledescription'?: string
+
+  /**
+   * ARIA rowcount attribute - defines the total number of rows/
+   * Атрибут ARIA rowcount - определяет общее количество строк
+   */
+  'aria-rowcount'?: number
+
+  /**
+   * ARIA rowindex attribute - defines an element's row index/
+   * Атрибут ARIA rowindex - определяет индекс строки элемента
+   */
+  'aria-rowindex'?: number
+
+  /**
+   * ARIA rowspan attribute - defines the number of rows spanned by a cell/
+   * Атрибут ARIA rowspan - определяет количество строк, занимаемых ячейкой
+   */
+  'aria-rowspan'?: number
+
+  /**
+   * ARIA selected attribute - indicates the current selected state/
+   * Атрибут ARIA selected - указывает текущее состояние выбора
+   */
+  'aria-selected'?: AriaTrueOrFalse
+
+  /**
+   * ARIA setsize attribute - defines the number of items in the current set/
+   * Атрибут ARIA setsize - определяет количество элементов в текущем наборе
+   */
+  'aria-setsize'?: number
+
+  /**
+   * ARIA sort attribute - indicates if items are sorted/
+   * Атрибут ARIA sort - указывает, отсортированы ли элементы
+   */
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other'
+
+  /**
+   * ARIA valuemax attribute - defines the maximum allowed value/
+   * Атрибут ARIA valuemax - определяет максимально допустимое значение
+   */
+  'aria-valuemax'?: string | number
+
+  /**
+   * ARIA valuemin attribute - defines the minimum allowed value/
+   * Атрибут ARIA valuemin - определяет минимально допустимое значение
+   */
+  'aria-valuemin'?: string | number
+
+  /**
+   * ARIA valuenow attribute - defines the current value/
+   * Атрибут ARIA valuenow - определяет текущее значение
+   */
+  'aria-valuenow'?: string | number
+
+  /**
+   * ARIA valuetext attribute - defines the human readable text alternative of aria-valuenow/
+   * Атрибут ARIA valuetext - определяет читаемую человеком текстовую альтернативу aria-valuenow
+   */
+  'aria-valuetext'?: string
+}
+
+/** Basic ARIA role props/ Базовые ARIA пропсы роли */
+export interface AriaRolePropsInclude {
+  role?: RoleType
+}
+
+/**
+ * ARIA label prop/
+ * ARIA проп label
+ */
+export interface AriaLabelPropsInclude {
+  ariaLabel?: string
+}
+
+/**
+ * ARIA description prop/
+ * ARIA проп description
+ */
+export interface AriaDescriptionPropsInclude {
+  ariaDescription?: string
+}
+
+/**
+ * ARIA haspopup prop/
+ * ARIA проп haspopup
+ */
+export interface AriaHaspopupPropsInclude {
+  ariaHaspopup?: AriaList['aria-haspopup']
+}
+
+/**
+ * ARIA live prop/
+ * ARIA проп live
+ */
+export interface AriaLivePropsInclude {
+  ariaLive?: AriaList['aria-live']
+}
+
+/**
+ * ARIA props with labelledby and describedby/
+ * ARIA пропсы с labelledby и describedby
+ */
+export interface AriaByPropsInclude {
+  ariaLabelledby?: string
+  ariaDescribedby?: string
+}
+
+/**
+ * ARIA role props with labelledby and describedby/
+ * ARIA пропсы роли с labelledby и describedby
+ */
+export interface AriaRoleByPropsInclude extends AriaRolePropsInclude, AriaByPropsInclude {
+}
+
+/**
+ * ARIA control role props with controls and expanded/
+ * ARIA пропсы роли управления с controls и expanded
+ */
+export interface AriaRoleControlPropsInclude extends AriaRolePropsInclude, AriaHaspopupPropsInclude {
+  id?: string
+  ariaControls?: string
+  ariaHaspopup?: AriaList['aria-haspopup']
+  ariaExpanded?: string
+}

package/src/types/descriptionTypes.ts

@@ -1,3 +1,11 @@
+/**
+ * Expose for description functionality/ Экспоз для функциональности описания
+ */
+export interface DescriptionExpose {
+  /** Description identifier/ Идентификатор описания */
+  descriptionId: string
+}
+
 /**
  * Slots for description functionality/ Слоты для функциональности описания
  */

package/src/types/fieldTypes.ts

@@ -1,5 +1,25 @@
-import type { NumberOrString } from '@dxtmisha/functional'
-import type { ModelProps } from './modelTypes'
+import type { ComputedRef, ShallowRef } from 'vue'
+import type { ListRecord, NumberOrString } from '@dxtmisha/functional'
+import type { ModelEmits, ModelProps } from './modelTypes'
+
+/** Supported field types/ Поддерживаемые типы полей */
+export type FieldType
+  = 'text'
+    | 'search'
+    | 'number'
+    | 'number-format'
+    | 'currency'
+    | 'email'
+    | 'password'
+    | 'datetime'
+    | 'date'
+    | 'year-month'
+    | 'time'
+    | 'hour-minute'
+    | 'tel'
+    | 'url'
+    | 'checkbox'
+    | 'radio'
 
 /** Base input or textarea element/ Базовый элемент input или textarea */
 export type FieldElementDom = HTMLInputElement | HTMLTextAreaElement
@@ -98,6 +118,42 @@ export type FieldValidationItem<Value = any>
       detail?: Record<string, any>
     }
 
+/**
+ * Emitted events for field components/
+ * Эмитируемые события для компонентов поля
+ */
+export type FieldBasicEmits<T = string>
+  = ModelEmits
+    & {
+      /**
+       * Emitted on input events (every change while typing)/
+       * Эмит при вводе (каждое изменение): [event, value]
+       */
+      input: [event: InputEvent | Event, value: FieldValidationItem<T>]
+      /**
+       * Lightweight input emit without DOM event/
+       * Лёгкий эмит ввода без DOM-события: [value]
+       */
+      inputLite: [value: FieldValidationItem<T>]
+      /**
+       * Emitted when value is committed (blur/confirm)/
+       * Эмит при подтверждении значения (blur/confirm): [event, value]
+       */
+      change: [event: InputEvent | Event, value: FieldValidationItem<T>]
+      /**
+       * Lightweight change emit without DOM event/
+       * Лёгкий эмит подтверждения без события: [value]
+       */
+      changeLite: [value: FieldValidationItem<T>]
+    }
+
+export type FieldBasicExpose<T = string> = {
+  value: ShallowRef<T | undefined>
+
+  checkValidity: () => boolean
+  validationMessage: ComputedRef<string>
+}
+
 /**
  * Properties that describe the value and its handling/
  * Свойства, описывающие значение и работу с ним
@@ -114,6 +170,8 @@ export interface FieldValueProps<Value = any> extends ModelProps<Value> {
   maxlength?: NumberOrString
   /** Controlled value (without v-model)/ Контролируемое значение (без v-model) */
   value?: Value
+  /** Additional event details/ Дополнительные детали события */
+  detail?: Record<string, any> | undefined
 }
 
 /**
@@ -123,11 +181,27 @@ export interface FieldValueProps<Value = any> extends ModelProps<Value> {
 export interface FieldBasicProps<Value = any>
   extends Omit<FieldValueProps<Value>, 'multiple' | 'maxlength'> {
   /** Input type/ Тип инпута */
-  type?: string
+  type?: 'text'
+    | 'search'
+    | 'number'
+    | 'number-format'
+    | 'currency'
+    | 'email'
+    | 'password'
+    | 'datetime'
+    | 'date'
+    | 'year-month'
+    | 'time'
+    | 'hour-minute'
+    | 'tel'
+    | 'url'
+    | 'checkbox'
+    | 'radio'
+
   /** Input name attribute/ Атрибут name */
   name?: string
   /** Input id attribute/ Атрибут id */
-  id?: string
+  id?: string | number
 
   /** Required flag/ Обязательное поле */
   required?: boolean
@@ -172,17 +246,39 @@ export interface FieldStepProps {
   max?: NumberOrString
 }
 
+/**
+ * Input arrow controls (for type="number")/
+ * Управление стрелками ввода (для type="number")
+ */
+export interface FieldArrowProps {
+  /** Arrow type/ Тип стрелок */
+  arrow?: 'auto' | 'carousel' | 'stepper' | 'none'
+  /** Step size for input arrows (type="number" only)/ Шаг для стрелок ввода (только для type="number") */
+  arrowStep?: NumberOrString
+  /** Arrow alignment/ Выравнивание стрелок */
+  arrowAlign?: 'center' | 'right' | 'left'
+}
+
 /**
  * Text length constraints (characters, items)/
  * Ограничения длины текста (символы, элементы)
  */
-export interface FieldLength {
+export interface FieldLengthProps {
   /** Minimum length/ Минимальная длина */
   minlength?: NumberOrString
   /** Maximum length/ Максимальная длина */
   maxlength?: NumberOrString
 }
 
+/**
+ * Validation pattern attribute/
+ * Атрибут паттерна валидации
+ */
+export interface FieldPatternProps {
+  /** Validation pattern (regexp)/ Паттерн валидации (рег. выражение) */
+  pattern?: string
+}
+
 /**
  * UX input control attributes/
  * Атрибуты управления UX вводом
@@ -193,9 +289,9 @@ export interface FieldUxProps {
   /** Auto capitalization mode/ Режим авто-капитализации */
   autocapitalize?: 'off' | 'none' | 'sentences' | 'words' | 'characters' | string
   /** Input mode hint (virtual keyboard)/ Подсказка режима ввода (виртуальная клавиатура) */
-  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | string
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | string
   /** Enter key hint/ Подсказка для клавиши Enter */
-  enterkeyhint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | string
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | string
   /** Spellcheck flag/ Проверка орфографии */
   spellcheck?: boolean | 'true' | 'false'
   /** Autocorrect mode (iOS/Safari)/ Режим автокоррекции (iOS/Safari) */
@@ -207,11 +303,18 @@ export interface FieldUxProps {
  * Составные свойства стандартных текстовых / числовых инпутов
  */
 export interface FieldInputProps<Value = any>
-  extends FieldBasicProps<Value>, FieldStepProps, FieldLength, FieldUxProps {
-  /** Validation pattern (regexp)/ Паттерн валидации (рег. выражение) */
-  pattern?: string
+  extends FieldBasicProps<Value>,
+  FieldStepProps,
+  FieldArrowProps,
+  FieldLengthProps,
+  FieldPatternProps,
+  FieldUxProps {
   /** Datalist id reference/ Ссылка на datalist */
   list?: string
+
+  // Style
+  iconVisibility?: string
+  iconVisibilityOff?: string
 }
 
 /**
@@ -219,16 +322,13 @@ export interface FieldInputProps<Value = any>
  * Свойства для инпутов выбора файлов (type="file")
  */
 export interface FieldInputFileProps<Value = any>
-  extends Omit<FieldBasicProps<Value>, 'type'>, FieldLength, FieldUxProps {
+  extends Omit<FieldBasicProps<Value>, 'type'>, FieldLengthProps, FieldUxProps {
   /** Multiple files selection flag/ Флаг выбора нескольких файлов */
   multiple?: boolean
   /** Accept file types list (MIME, extensions)/ Список допустимых типов (MIME, расширения) */
   accept?: string
   /** Capture mode for media input (mobile)/ Режим захвата для медиа (мобильные устройства) */
   capture?: string | boolean
-
-  /** Show number input arrows (type="number" only)/ Показать стрелки числового ввода (только для type="number") */
-  arrow?: string
 }
 
 /**
@@ -248,7 +348,7 @@ export interface FieldInputCheckProps<Value = any>
  * Свойства для textarea с поддержкой размеров и переноса
  */
 export interface FieldTextareaProps<Value = any>
-  extends Omit<FieldBasicProps<Value>, 'type'>, FieldLength, FieldUxProps {
+  extends Omit<FieldBasicProps<Value>, 'type'>, FieldLengthProps, FieldUxProps {
   /** Number of visible text lines/ Количество видимых строк */
   rows?: NumberOrString
   /** Number of visible columns/ Количество видимых колонок */
@@ -264,7 +364,11 @@ export interface FieldTextareaProps<Value = any>
  * Свойства для select элементов (одиночный и множественный выбор)
  */
 export interface FieldSelectProps<Value = any>
-  extends Omit<FieldBasicProps<Value>, 'type'> {
+  extends Omit<FieldBasicProps<Value>, 'type'>, Omit<FieldStepProps, 'min' | 'step'>, FieldArrowProps, FieldUxProps {
+  // Value
+  option?: ListRecord
+
+  // Style
   /** Multiple selection mode/ Режим множественного выбора */
   multiple?: boolean
 }

package/src/types/labelTypes.ts

@@ -1,30 +1,69 @@
 import type { NumberOrString } from '@dxtmisha/functional'
 
+/**
+ * Exposed properties for label components/ Экспонируемые свойства для компонентов меток
+ */
+export interface LabelExpose {
+  /** Label element ID/ Идентификатор элемента метки */
+  labelId: string
+}
+
+/**
+ * Slot definitions for label components/ Определения слотов для компонентов меток
+ */
 export interface LabelSlots {
+  /** Default slot content/ Содержимое слота по умолчанию */
   default?(props: any): any
 }
 
+/**
+ * Alternative slot definitions for label components/ Альтернативные определения слотов для компонентов меток
+ */
 export interface LabelAlternativeSlots {
+  /** Label slot content/ Содержимое слота метки */
   label?(props: any): any
 }
 
+/**
+ * Slot definitions for numeric label components/ Определения слотов для числовых компонентов меток
+ */
 export interface LabelNumberSlots extends LabelSlots {
 }
 
+/**
+ * Slot definitions for highlighted label components/ Определения слотов для компонентов меток с подсветкой
+ */
 export interface LabelHighlightSlots extends LabelSlots {
 }
 
+/**
+ * Properties for label components/ Свойства для компонентов меток
+ */
 export interface LabelProps {
+  /** Label text or number/ Текст или число метки */
   label?: NumberOrString
+  /** Label element ID/ Идентификатор элемента метки */
+  labelId?: string
 }
 
+/**
+ * Properties for numeric label components/ Свойства для числовых компонентов меток
+ */
 export interface LabelNumberProps extends LabelProps {
+  /** Maximum value for the label/ Максимальное значение для метки */
   labelMax?: NumberOrString
+  /** Enable number formatting/ Включить форматирование чисел */
   formatting?: boolean
 }
 
+/**
+ * Properties for highlighted label components/ Свойства для компонентов меток с подсветкой
+ */
 export interface LabelHighlightProps extends LabelProps {
+  /** Text to highlight/ Текст для подсветки */
   highlight?: string
+  /** Starting length for highlight/ Начальная длина для подсветки */
   highlightLengthStart?: number
+  /** Current value/ Текущее значение */
   value?: any
 }