@dxtmisha/constructor 0.23.0 → 0.30.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/constructor",
   "private": false,
-  "version": "0.23.0",
+  "version": "0.30.1",
   "type": "module",
   "description": "Vue component constructors for DXT UI design system - ready-to-use constructors with TypeScript support and SCSS styling",
   "keywords": [
@@ -36,7 +36,7 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "dxt-library": "dxt-library",
-    "dxt-constructor": "dxt-constructor mask"
+    "dxt-constructor": "dxt-constructor tooltip"
   },
   "files": [
     "src/",
@@ -49,16 +49,30 @@
   "types": "./src/library.ts",
   "exports": {
     ".": "./src/library.ts",
+    "./Accordion": "./src/constructors/Accordion/index.ts",
+    "./Accordion/style": "./src/constructors/Accordion/style.scss",
+    "./ActionSheet": "./src/constructors/ActionSheet/index.ts",
+    "./ActionSheet/style": "./src/constructors/ActionSheet/style.scss",
+    "./Actions": "./src/constructors/Actions/index.ts",
+    "./Actions/style": "./src/constructors/Actions/style.scss",
+    "./Anchor": "./src/constructors/Anchor/index.ts",
+    "./Anchor/style": "./src/constructors/Anchor/style.scss",
     "./Badge": "./src/constructors/Badge/index.ts",
     "./Badge/style": "./src/constructors/Badge/style.scss",
     "./Bars": "./src/constructors/Bars/index.ts",
     "./Bars/style": "./src/constructors/Bars/style.scss",
+    "./Block": "./src/constructors/Block/index.ts",
+    "./Block/style": "./src/constructors/Block/style.scss",
     "./Button": "./src/constructors/Button/index.ts",
     "./Button/style": "./src/constructors/Button/style.scss",
     "./Cell": "./src/constructors/Cell/index.ts",
     "./Cell/style": "./src/constructors/Cell/style.scss",
     "./Chip": "./src/constructors/Chip/index.ts",
     "./Chip/style": "./src/constructors/Chip/style.scss",
+    "./ChipGroup": "./src/constructors/ChipGroup/index.ts",
+    "./ChipGroup/style": "./src/constructors/ChipGroup/style.scss",
+    "./Dialog": "./src/constructors/Dialog/index.ts",
+    "./Dialog/style": "./src/constructors/Dialog/style.scss",
     "./Field": "./src/constructors/Field/index.ts",
     "./Field/style": "./src/constructors/Field/style.scss",
     "./FieldCounter": "./src/constructors/FieldCounter/index.ts",
@@ -71,6 +85,8 @@
     "./Icon/style": "./src/constructors/Icon/style.scss",
     "./Image": "./src/constructors/Image/index.ts",
     "./Image/style": "./src/constructors/Image/style.scss",
+    "./Input": "./src/constructors/Input/index.ts",
+    "./Input/style": "./src/constructors/Input/style.scss",
     "./List": "./src/constructors/List/index.ts",
     "./List/style": "./src/constructors/List/style.scss",
     "./ListGroup": "./src/constructors/ListGroup/index.ts",
@@ -83,6 +99,8 @@
     "./Mask/style": "./src/constructors/Mask/style.scss",
     "./Menu": "./src/constructors/Menu/index.ts",
     "./Menu/style": "./src/constructors/Menu/style.scss",
+    "./Modal": "./src/constructors/Modal/index.ts",
+    "./Modal/style": "./src/constructors/Modal/style.scss",
     "./MotionTransform": "./src/constructors/MotionTransform/index.ts",
     "./MotionTransform/style": "./src/constructors/MotionTransform/style.scss",
     "./Motiontransform": "./src/constructors/Motiontransform/index.ts",
@@ -93,10 +111,22 @@
     "./Ripple/style": "./src/constructors/Ripple/style.scss",
     "./Scrollbar": "./src/constructors/Scrollbar/index.ts",
     "./Scrollbar/style": "./src/constructors/Scrollbar/style.scss",
+    "./Section": "./src/constructors/Section/index.ts",
+    "./Section/style": "./src/constructors/Section/style.scss",
+    "./Select": "./src/constructors/Select/index.ts",
+    "./Select/style": "./src/constructors/Select/style.scss",
+    "./SelectValue": "./src/constructors/SelectValue/index.ts",
+    "./SelectValue/style": "./src/constructors/SelectValue/style.scss",
     "./Skeleton": "./src/constructors/Skeleton/index.ts",
     "./Skeleton/style": "./src/constructors/Skeleton/style.scss",
+    "./TextareaAutosize": "./src/constructors/TextareaAutosize/index.ts",
+    "./TextareaAutosize/style": "./src/constructors/TextareaAutosize/style.scss",
     "./Window": "./src/constructors/Window/index.ts",
-    "./Window/style": "./src/constructors/Window/style.scss"
+    "./Window/style": "./src/constructors/Window/style.scss",
+    "./Arrow": "./src/constructors/Arrow/index.ts",
+    "./Arrow/style": "./src/constructors/Arrow/style.scss",
+    "./Tooltip": "./src/constructors/Tooltip/index.ts",
+    "./Tooltip/style": "./src/constructors/Tooltip/style.scss"
   },
   "buildOptions": {
     "name": "@dxtmisha/constructor",
@@ -108,8 +138,8 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "@dxtmisha/functional": ">=1.0.3",
-    "vue": ">=3.0.0"
+    "@dxtmisha/functional": "*",
+    "vue": "*"
   },
   "peerDependenciesMeta": {
     "@dxtmisha/functional": {
@@ -121,4 +151,4 @@
   },
   "dependencies": {},
   "sideEffects": false
-}
+}

package/src/classes/AriaStaticInclude.ts

@@ -0,0 +1,269 @@
+import type { AriaList, AriaTrueOrFalse } from '../types/ariaTypes'
+import type { RoleType } from '../types/roleTypes'
+import { isString } from '@dxtmisha/functional'
+
+/**
+ * The class returns static ARIA attributes.
+ *
+ * Класс возвращает статические ARIA атрибуты.
+ */
+export class AriaStaticInclude {
+  /**
+   * Get role by props.
+   *
+   * Получить роль по пропсам.
+   * @param role ARIA role type/ Тип ARIA роли
+   */
+  static role(role?: RoleType): AriaList {
+    return {
+      role
+    }
+  }
+
+  /**
+   * Get ARIA atomic attribute.
+   *
+   * Получить атрибут ARIA atomic.
+   * @param isAtomic is atomic/ является атомарным
+   */
+  static atomic(isAtomic?: boolean): AriaList {
+    return {
+      'aria-atomic': this.isTrueOrFalse(isAtomic)
+    }
+  }
+
+  /**
+   * Get ARIA checked attribute.
+   *
+   * Получить атрибут ARIA checked.
+   * @param isChecked is checked/ является отмеченным
+   */
+  static checked(isChecked?: boolean): AriaList {
+    return {
+      'aria-checked': this.isTrueOrFalse(isChecked)
+    }
+  }
+
+  /**
+   * Get ARIA current attribute.
+   *
+   * Получить атрибут ARIA current.
+   * @param value ARIA current attribute/ Атрибут ARIA current
+   */
+  static current(value?: AriaList['aria-current']): AriaList {
+    const current = isString(value)
+      ? value
+      : this.isTrueOrFalse(value)
+
+    return this.isDataToData('aria-current', current)
+  }
+
+  /**
+   * Get ARIA busy attribute.
+   *
+   * Получить атрибут ARIA busy.
+   * @param isBusy is busy/ является занятым
+   */
+  static busy(isBusy?: boolean): AriaList {
+    return {
+      'aria-busy': this.isTrueOrFalse(isBusy)
+    }
+  }
+
+  /**
+   * Get ARIA describedby attribute.
+   *
+   * Получить атрибут ARIA describedby.
+   * @param id Element ID/ Идентификатор элемента
+   */
+  static describedby(id?: string): AriaList {
+    return this.isDataToData('aria-describedby', id)
+  }
+
+  /**
+   * Get ARIA disabled attribute.
+   *
+   * Получить атрибут ARIA disabled.
+   * @param isDisabled is disabled/ является отключенным
+   */
+  static disabled(isDisabled: boolean = true): AriaList {
+    return {
+      'aria-disabled': this.isTrueOrFalse(isDisabled)
+    }
+  }
+
+  /**
+   * Get ARIA expanded attribute.
+   *
+   * Получить атрибут ARIA expanded.
+   * @param isExpanded is expanded/ является расширенным
+   */
+  static expanded(isExpanded?: boolean): AriaList {
+    return {
+      'aria-expanded': this.isTrueOrFalse(isExpanded)
+    }
+  }
+
+  /**
+   * Get ARIA haspopup attribute.
+   *
+   * Получить атрибут ARIA haspopup.
+   * @param haspopup ARIA haspopup attribute/ Атрибут ARIA haspopup
+   */
+  static haspopup(haspopup?: AriaList['aria-haspopup']): AriaList {
+    return this.isDataToData('aria-haspopup', haspopup)
+  }
+
+  /**
+   * Get ARIA label.
+   *
+   * Получить ARIA label.
+   * @param label ARIA label/ ARIA метка
+   */
+  static label(label?: string): AriaList {
+    return this.isDataToData('aria-label', label)
+  }
+
+  /**
+   * Get ARIA labelledby attribute.
+   *
+   * Получить атрибут ARIA labelledby.
+   * @param id Element ID/ Идентификатор элемента
+   */
+  static labelledby(id?: string): AriaList {
+    return this.isDataToData('aria-labelledby', id)
+  }
+
+  /**
+   * Get ARIA invalid attribute.
+   *
+   * Получить атрибут ARIA invalid.
+   * @param isInvalid is invalid/ является недействительным
+   */
+  static invalid(isInvalid: boolean = true): AriaList {
+    return {
+      'aria-invalid': this.isTrueOrFalse(isInvalid)
+    }
+  }
+
+  /**
+   * Get control role.
+   *
+   * Получить роль управления.
+   * @param id Element ID/ Идентификатор элемента
+   * @param controls ARIA controls attribute/ Атрибут ARIA controls
+   * @param haspopup ARIA haspopup attribute/ Атрибут ARIA haspopup
+   * @param expanded ARIA expanded state/ Состояние ARIA expanded
+   */
+  static control(
+    id?: string,
+    controls?: string,
+    haspopup?: AriaList['aria-haspopup'],
+    expanded?: boolean
+  ): AriaList {
+    return {
+      id,
+      'aria-controls': controls,
+      ...this.haspopup(haspopup),
+      ...this.expanded(expanded)
+    }
+  }
+
+  /**
+   * Get ARIA hidden attribute.
+   *
+   * Получить атрибут ARIA hidden.
+   * @param isHidden is hidden/ является скрытым
+   */
+  static hidden(
+    isHidden: boolean = true
+  ): AriaList {
+    return {
+      'aria-hidden': this.isTrueOrFalse(isHidden)
+    }
+  }
+
+  /**
+   * Get ARIA live attribute.
+   *
+   * Получить атрибут ARIA live.
+   * @param live ARIA live attribute/ Атрибут ARIA live
+   */
+  static live(
+    live?: AriaList['aria-live']
+  ): AriaList {
+    return {
+      'aria-live': live
+    }
+  }
+
+  /**
+   * Get modal role.
+   *
+   * Получить модальную роль.
+   * @param isModal is modal/ является модальным
+   * @param ariaLabelledby ARIA labelledby attribute/ Атрибут ARIA labelledby
+   * @param ariaDescribedby ARIA describedby attribute/ Атрибут ARIA describedby
+   */
+  static modal(
+    isModal: boolean = true,
+    ariaLabelledby?: string,
+    ariaDescribedby?: string
+  ): AriaList {
+    return {
+      ...this.isDataToData('aria-modal', isModal),
+      ...this.labelledby(ariaLabelledby),
+      ...this.describedby(ariaDescribedby)
+    }
+  }
+
+  /**
+   * Returns ARIA value now, min and max.
+   *
+   * Возвращает ARIA value now, min и max.
+   * @param value Current value/ Текущее значение
+   * @param min Minimum value/ Минимальное значение
+   * @param max Maximum value/ Максимальное значение
+   */
+  static valueMinMax(
+    value?: string | number,
+    min?: string | number,
+    max?: string | number
+  ): AriaList {
+    return {
+      'aria-valuenow': value,
+      'aria-valuemin': min,
+      'aria-valuemax': max
+    }
+  }
+
+  /**
+   * Returns 'true' or 'false' based on the boolean value.
+   *
+   * Возвращает 'true' или 'false' в зависимости от булевого значения.
+   * @param value boolean value/ булевое значение
+   */
+  static isTrueOrFalse(value?: boolean): AriaTrueOrFalse | undefined {
+    return value ? 'true' : 'false'
+  }
+
+  /**
+   * Returns data as ARIA attribute.
+   *
+   * Возвращает данные в виде ARIA атрибута.
+   * @param name attribute name/ имя атрибута
+   * @param value attribute value/ значение атрибута
+   */
+  protected static isDataToData<V>(
+    name: string,
+    value?: V
+  ): AriaList {
+    if (value) {
+      return {
+        [name]: value
+      }
+    }
+
+    return {}
+  }
+}

package/src/classes/DescriptionInclude.ts

@@ -1,9 +1,9 @@
 import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
+import { getElementId, isFilled, render } from '@dxtmisha/functional'
 
 import { SkeletonInclude } from '../constructors/Skeleton'
 
-import type { DescriptionProps, DescriptionSlots } from '../types/descriptionTypes'
+import type { DescriptionExpose, DescriptionProps, DescriptionSlots } from '../types/descriptionTypes'
 
 /**
  * Use for adding description text
@@ -11,6 +11,9 @@ import type { DescriptionProps, DescriptionSlots } from '../types/descriptionTyp
  * Использование для добавления описания текста
  */
 export class DescriptionInclude {
+  /** Unique identifier/ Уникальный идентификатор */
+  protected id = getElementId()
+
   /**
    * Constructor
    * @param props input property/ входное свойство
@@ -33,6 +36,20 @@ export class DescriptionInclude {
    */
   readonly is = computed(() => Boolean(this.props.description || this.slots?.description))
 
+  /** Description expose reference/ Ссылка на expose описания */
+  readonly expose: DescriptionExpose = {
+    descriptionId: this.id
+  }
+
+  /**
+   * Get description ID
+   *
+   * Получить ID описания
+   */
+  getId(): string {
+    return this.id
+  }
+
   /**
    * Render the description
    *

package/src/classes/EnabledInclude.ts

@@ -1,6 +1,9 @@
 import { computed } from 'vue'
+
+import { AriaStaticInclude } from './AriaStaticInclude'
 import { ProgressInclude } from '../constructors/Progress'
 
+import type { AriaList } from '../types/ariaTypes'
 import type { EnabledProps } from '../types/enabledTypes'
 
 /**
@@ -53,4 +56,12 @@ export class EnabledInclude {
    * проверяет, отключён ли элемент или пустое ли значение
    */
   readonly isDisabledOrUndefined = computed<boolean | undefined>(() => this.isDisabled.value || undefined)
+
+  /**
+   * list of aria properties for the enabled state/
+   * список aria свойств для состояния активности
+   */
+  readonly aria = computed<AriaList>(
+    () => AriaStaticInclude.disabled(!this.isEnabled.value)
+  )
 }

package/src/classes/EventClickInclude.ts

@@ -1,5 +1,5 @@
 import { toRefs, type ToRefs } from 'vue'
-import { type ConstrEmit, RouterItem } from '@dxtmisha/functional'
+import { type ConstrEmit, RouterItemRef } from '@dxtmisha/functional'
 
 import { EnabledInclude } from './EnabledInclude'
 
@@ -112,7 +112,7 @@ export class EventClickInclude {
    */
   protected toRouter(): boolean {
     if (this.props?.to) {
-      RouterItem.push(this.props?.to)
+      RouterItemRef.push(this.props?.to)
       return true
     }
 

package/src/classes/LabelHighlightInclude.ts

@@ -45,6 +45,41 @@ export class LabelHighlightInclude extends LabelInclude {
     )
   }
 
+  /**
+   * Determines if highlighting is required.
+   *
+   * Определяет, требуется ли выделение.
+   */
+  isHighlight(): boolean {
+    const props = this.props
+
+    if (
+      !props.highlight
+      || props.highlight.length < this.getLengthStart()
+    ) {
+      return true
+    }
+
+    if (!(
+      props.highlight
+      && props.highlight.length >= this.getLengthStart()
+      && props.label
+    )) {
+      return false
+    }
+
+    const label = props.label.toString()
+    const exp = getExp(props.highlight, 'i')
+
+    return Boolean(
+      label.match(exp)
+      || (
+        isFilled(props.value)
+        && props.value.toString().match(exp)
+      )
+    )
+  }
+
   /**
    * Returns a string with highlighted parts.
    * If highlighting is not required, returns the original string.

package/src/classes/LabelInclude.ts

@@ -1,9 +1,9 @@
 import { computed, type Ref, type VNode } from 'vue'
-import { type ConstrClass, isFilled, render } from '@dxtmisha/functional'
+import { type ConstrClass, getElementId, getRef, isFilled, type RefOrNormal, render } from '@dxtmisha/functional'
 
 import { SkeletonInclude } from '../constructors/Skeleton'
 
-import type { LabelAlternativeSlots, LabelProps, LabelSlots } from '../types/labelTypes'
+import type { LabelAlternativeSlots, LabelExpose, LabelProps, LabelSlots } from '../types/labelTypes'
 
 /**
  * Use for adding text
@@ -11,6 +11,9 @@ import type { LabelAlternativeSlots, LabelProps, LabelSlots } from '../types/lab
  * Использование для добавления текста
  */
 export class LabelInclude {
+  /** Unique identifier/ Уникальный идентификатор */
+  protected id = getElementId()
+
   /**
    * Constructor
    * @param props input property/ входное свойство
@@ -21,6 +24,7 @@ export class LabelInclude {
    * @param labelReplacing additional elements/ дополнительные элементы
    * @param alternativeSlots alternative slots/ альтернативные слоты
    * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
+   * @param tag tag name/ имя тега
    */
   constructor(
     protected readonly props: Readonly<LabelProps>,
@@ -30,7 +34,8 @@ export class LabelInclude {
     protected readonly elementsExtra?: () => VNode[],
     protected readonly labelReplacing?: Ref<string | number | undefined>,
     protected readonly alternativeSlots?: boolean,
-    protected readonly skeleton?: SkeletonInclude
+    protected readonly skeleton?: SkeletonInclude,
+    protected readonly tag: RefOrNormal<string> = 'span'
   ) {
   }
 
@@ -54,6 +59,33 @@ export class LabelInclude {
     return false
   })
 
+  /** Identifier for the element/ Идентификатор для элемента */
+  readonly idElement = computed<string | undefined>(() => {
+    if (this.is.value) {
+      return this.getId()
+    }
+
+    return undefined
+  })
+
+  /**
+   * Expose helpers for Label state and actions.
+   *
+   * Вспомогательные методы expose для состояния и действий Label.
+   */
+  readonly expose: LabelExpose = {
+    labelId: this.getId()
+  }
+
+  /**
+   * Get the unique identifier.
+   *
+   * Получение уникального идентификатора.
+   */
+  getId(): string {
+    return this.props?.labelId || this.id
+  }
+
   /**
    * Render the label
    *
@@ -83,8 +115,11 @@ export class LabelInclude {
       if (children.length > 0) {
         elements.push(
           render(
-            'span',
-            { class: this.getClassName() },
+            getRef(this.tag),
+            {
+              id: this.getId(),
+              class: this.getClassName()
+            },
             children,
             'label'
           )

package/src/classes/ModelInclude.ts

@@ -1,4 +1,4 @@
-import { watch } from 'vue'
+import { isReadonly, isRef, type Ref, watch } from 'vue'
 import {
   isFunction,
   type RefType,
@@ -32,6 +32,55 @@ export class ModelInclude<Value = string> {
     }
   }
 
+  /**
+   * Type guard to check if syncValue is a mutable Ref.
+   * Returns true if syncValue is a reference and not readonly.
+   *
+   * Проверка типа, является ли syncValue изменяемым Ref.
+   * Возвращает true, если syncValue является ссылкой и не readonly.
+   * @returns Type predicate indicating syncValue is a mutable Ref/ Предикат типа, указывающий что syncValue - изменяемый Ref
+   */
+  isValue(): this is { syncValue: Ref<Value> } {
+    return isRef(this.syncValue)
+      && !isReadonly(this.syncValue)
+  }
+
+  /**
+   * Generates binding object for v-model integration.
+   * Creates properties for two-way data binding with model and update handlers.
+   *
+   * Генерирует объект привязок для интеграции v-model.
+   * Создает свойства для двусторонней привязки данных с обработчиками модели и обновления.
+   * @returns Object with model value and update handlers/ Объект со значением модели и обработчиками обновления
+   */
+  getBinds() {
+    if (this.isValue()) {
+      const name = toCamelCaseFirst(this.index)
+
+      return {
+        [`model${name}`]: this.syncValue.value,
+        [`onUpdate:${toCamelCase(this.index)}`]: this.update,
+        [`onUpdate:model${name}`]: this.update
+      }
+    }
+
+    return {}
+  }
+
+  /**
+   * Updates the synchronized value.
+   * Sets the value of the reactive reference if it's a mutable Ref.
+   *
+   * Обновляет синхронизированное значение.
+   * Устанавливает значение реактивной ссылки, если это изменяемый Ref.
+   * @param value The new value to set/ Новое значение для установки
+   */
+  readonly update = (value: Value): void => {
+    if (this.isValue()) {
+      this.syncValue.value = value
+    }
+  }
+
   /**
    * Emits an event to update the model value.
    * Triggers the corresponding update event with the new value.