@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Input/Input.ts

@@ -0,0 +1,146 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { FieldChangeInclude } from '../../classes/field/FieldChangeInclude'
+import { FieldVisibilityInclude } from '../../classes/field/FieldVisibilityInclude'
+import { FieldTypeInclude } from '../../classes/field/FieldTypeInclude'
+import { FieldPatternInclude } from '../../classes/field/FieldPatternInclude'
+import { FieldAttributesInclude } from '../../classes/field/FieldAttributesInclude'
+
+import { FieldElementInclude } from '../../classes/field/FieldElementInclude'
+
+import { FieldValueInclude } from '../../classes/field/FieldValueInclude'
+import { FieldArrowInclude } from '../../classes/field/FieldArrowInclude'
+import { InputPassword } from './InputPassword'
+import { FieldMatchInclude } from '../../classes/field/FieldMatchInclude'
+
+import { FieldInputModeInclude } from '../../classes/field/FieldInputModeInclude'
+import { FieldCodeInclude } from '../../classes/field/FieldCodeInclude'
+import { FieldValidationInclude } from '../../classes/field/FieldValidationInclude'
+import { FieldEventInclude } from '../../classes/field/FieldEventInclude'
+
+import { FieldInclude } from '../Field/FieldInclude'
+import { MaskInclude } from '../Mask/MaskInclude'
+
+import type { FieldElementInput } from '../../types/fieldTypes'
+import type { InputComponents, InputEmits, InputSlots } from './types'
+import type { InputProps } from './props'
+
+/**
+ * Input
+ */
+export class Input {
+  readonly visibility: FieldVisibilityInclude
+  readonly type: FieldTypeInclude
+  readonly pattern: FieldPatternInclude
+  readonly inputMode: FieldInputModeInclude
+  readonly attributes: FieldAttributesInclude
+
+  readonly elementItem: FieldElementInclude
+  readonly change: FieldChangeInclude
+
+  readonly value: FieldValueInclude
+  readonly arrow: FieldArrowInclude
+  readonly password: InputPassword
+  readonly match: FieldMatchInclude
+
+  readonly code: FieldCodeInclude
+  readonly validation: FieldValidationInclude
+  readonly event: FieldEventInclude
+
+  readonly field: FieldInclude
+  readonly mask: MaskInclude
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element input element/ элемент ввода
+   * @param classDesign design name/ название дизайна
+   * @param className class name/ название класса
+   * @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/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: InputProps,
+    protected readonly refs: ToRefs<InputProps>,
+    protected readonly element: Ref<FieldElementInput>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<InputComponents, InputProps>,
+    protected readonly slots?: InputSlots,
+    protected readonly emits?: ConstrEmit<InputEmits>
+  ) {
+    this.change = new FieldChangeInclude(this.props)
+    this.visibility = new FieldVisibilityInclude()
+    this.type = new FieldTypeInclude(this.props, this.visibility)
+    this.pattern = new FieldPatternInclude(this.props, this.type)
+    this.inputMode = new FieldInputModeInclude(this.props, this.type)
+    this.attributes = new FieldAttributesInclude(
+      this.props,
+      this.type,
+      this.pattern,
+      this.inputMode
+    )
+
+    this.elementItem = new FieldElementInclude(
+      this.props,
+      this.element
+    )
+
+    this.value = new FieldValueInclude(
+      this.props,
+      this.refs,
+      this.elementItem
+    )
+    this.arrow = new FieldArrowInclude(this.props, this.value, this.type)
+    this.password = new InputPassword(this.props, this.visibility)
+    this.match = new FieldMatchInclude(
+      this.props,
+      this.elementItem,
+      this.value
+    )
+
+    this.code = new FieldCodeInclude(this.props)
+    this.validation = new FieldValidationInclude(
+      this.props,
+      this.attributes,
+      this.value,
+      this.change,
+      this.code,
+      this.match
+    )
+    this.event = new FieldEventInclude(
+      this.props,
+      this.change,
+      this.value,
+      this.validation,
+      this.emits
+    )
+
+    this.field = new FieldInclude(
+      this.props,
+      this.value,
+      this.components,
+      this.event,
+      this.arrow,
+      undefined,
+      () => this.password.toggle(),
+      undefined,
+      undefined,
+      computed(() => ({
+        iconTrailing: this.password.icon.value ?? this.props.iconTrailing,
+        maxlength: this.props.maxlength ?? this.props.max
+      }))
+    )
+    this.mask = new MaskInclude(
+      this.props,
+      this.className,
+      this.value,
+      '',
+      this.components,
+      this.type
+    )
+  }
+}

package/src/constructors/Input/InputDesign.tsx

@@ -0,0 +1,174 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Input } from './Input'
+
+import type { FieldControl } from '../Field'
+import {
+  type InputPropsBasic
+} from './props'
+import {
+  type InputClasses,
+  type InputComponents,
+  type InputEmits,
+  type InputExpose,
+  type InputSlots
+} from './types'
+
+/**
+ * InputDesign
+ */
+export class InputDesign<
+  COMP extends InputComponents,
+  EXPOSE extends InputExpose,
+  CLASSES extends InputClasses,
+  P extends InputPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    InputEmits,
+    EXPOSE,
+    InputSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Input
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, InputEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Input(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      value: this.item.value.item,
+      checkValidity: this.item.validation.checkValidity,
+      validationMessage: this.item.validation.message
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.field.render(
+      {
+        default: this.renderInput
+      },
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main,
+        validationMessage: this.item.validation.message.value
+      }
+    )
+  }
+
+  /**
+   * Rendering the input element.
+   *
+   * Рендер элемент input.
+   * @param input data for the input element/ данные для элемента ввода
+   */
+  protected readonly renderInput = (input: FieldControl): VNode[] => {
+    if (this.item.mask.isActive()) {
+      return this.renderMask(input)
+    }
+
+    return [h(
+      'input',
+      toBinds(
+        this.item.attributes.listForInput.value,
+        input.binds,
+        {
+          ref: this.element,
+          value: this.item.value.item.value,
+          onBlur: this.item.event.onBlur,
+          onInput: this.item.event.onInput,
+          onChange: this.item.event.onChange
+        }
+      )
+    )]
+  }
+
+  /**
+   * Rendering mask element.
+   *
+   * Рендеринг элемента маски.
+   * @param input data for the input element/ данные для элемента ввода
+   */
+  protected readonly renderMask = (input: FieldControl): VNode[] => {
+    return this.item.mask.render({
+      ref: this.element,
+      class: input.className,
+      align: this.props.align,
+      inputAttrs: toBinds(
+        this.item.attributes.listForInput.value,
+        input.binds
+      ),
+      onBlur: this.item.event.onBlur,
+      onInput: this.item.event.onInput
+    })
+  }
+}

package/src/constructors/Input/InputPassword.ts

@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { FieldVisibilityInclude } from '../../classes/field/FieldVisibilityInclude'
+
+import type { IconProps } from '../Icon'
+import type { InputProps } from './props'
+
+/**
+ * Class for retrieving data to manage the password type.
+ *
+ * Класс для получения данных для управления типом пароля.
+ */
+export class InputPassword {
+  protected visible: boolean = false
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param visibility object for working with visualization/ объект для работы с визуализацией
+   */
+
+  constructor(
+    protected readonly props: InputProps,
+    protected readonly visibility: FieldVisibilityInclude
+  ) {
+  }
+
+  /** Checks if the type is a password/ Проверяет, является ли тип паролем. */
+  readonly is = computed<boolean>(() => this.props.type === 'password')
+
+  /** Returns the icon value/ Возвращает значение иконки */
+  readonly icon = computed<IconProps | undefined>(() => {
+    if (this.is.value) {
+      return {
+        active: this.visibility.item.value,
+        icon: this.props.iconVisibilityOff,
+        iconActive: this.props.iconVisibility,
+        dynamic: true
+      }
+    }
+
+    return undefined
+  })
+
+  /**
+   * Toggle value.
+   *
+   * Переключение значения.
+   */
+  toggle() {
+    if (this.is.value) {
+      this.visibility.toggle()
+    }
+  }
+}

package/src/constructors/Input/basicTypes.ts

@@ -0,0 +1,3 @@
+export type InputComponentInclude = {
+  input?: object
+}

package/src/constructors/Input/index.ts

@@ -0,0 +1,5 @@
+export * from './Input'
+export * from './InputDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Input/properties.json

@@ -0,0 +1,2 @@
+{
+}

package/src/constructors/Input/props.ts

@@ -0,0 +1,53 @@
+import type { NumberOrString } from '@dxtmisha/functional'
+
+import type { MaskPropsBasic, MaskPropsInclude } from '../Mask'
+import type { IconPropsBasic } from '../Icon'
+import type { FieldPropsBasic, FieldPropsInclude } from '../Field'
+import type { FieldLabelPropsBasic } from '../FieldLabel'
+import type { FieldMessagePropsBasic } from '../FieldMessage'
+import type { FieldCounterPropsBasic } from '../FieldCounter'
+import type { ProgressPropsBasic } from '../Progress'
+
+import type { FieldInputProps } from '../../types/fieldTypes'
+
+interface InputPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface InputPropsBasic<
+  Mask extends MaskPropsBasic = MaskPropsBasic,
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Field extends FieldPropsBasic = FieldPropsBasic,
+  FieldLabel extends FieldLabelPropsBasic = FieldLabelPropsBasic,
+  FieldMessage extends FieldMessagePropsBasic = FieldMessagePropsBasic,
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> extends MaskPropsInclude<Mask>,
+  FieldPropsInclude<Icon, Field, FieldLabel, FieldMessage, FieldCounter, Progress>,
+  FieldInputProps<NumberOrString> {
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface InputProps extends InputPropsBasic, InputPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsInput = {
+  type: 'text',
+  autocomplete: 'off',
+  arrow: 'auto',
+  maskVisible: true,
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Input/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinInput {
+
+}

package/src/constructors/Input/types.ts

@@ -0,0 +1,48 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { MaskComponentInclude } from '../Mask'
+import type { FieldComponentInclude, FieldSlotsInclude } from '../Field'
+
+import type { FieldBasicEmits, FieldBasicExpose } from '../../types/fieldTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type InputComponents
+  = MaskComponentInclude
+    & FieldComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type InputEmits = FieldBasicEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface InputExpose extends FieldBasicExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface InputSlots extends FieldSlotsInclude {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type InputClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/List/List.ts

@@ -3,10 +3,11 @@ import {
   type ConstrBind,
   type ConstrEmit,
   DesignComp,
-  ListData,
+  ListDataRef,
   type ListDataItem,
   type ListList,
-  toBinds
+  toBinds,
+  type ConstrClass
 } from '@dxtmisha/functional'
 
 import { EventClickInclude } from '../../classes/EventClickInclude'
@@ -21,6 +22,7 @@ import { ListControl } from './ListControl'
 import type { ListComponents, ListEmits, ListSlots } from './types'
 import type { ListProps } from './props'
 import type { IconValue } from '../Icon'
+import type { ListGroupSlotsPropsInclude } from '../ListGroup'
 
 /** Maximum number of lists/ Максимальное количество списков */
 let listIdMax = 1
@@ -32,7 +34,7 @@ export class List {
   readonly search: ListSearch
   readonly focus: ListFocus
 
-  readonly data: ListData
+  readonly data: ListDataRef
   readonly event: EventClickInclude
 
   readonly go: ListGo
@@ -67,15 +69,18 @@ export class List {
     this.search = new ListSearch(this.props)
     this.focus = new ListFocus(this.props, this.element, this.id)
 
-    this.data = new ListData(
+    this.data = new ListDataRef(
       toRef(this.props, 'list'),
       this.focus.focus,
       this.search.highlight,
       this.refs.highlightLengthStart,
+      this.refs.filterMode,
       this.refs.selected,
       this.refs.keyValue,
       this.refs.keyLabel,
-      this.refs.liteThreshold
+      this.refs.liteThreshold,
+      undefined,
+      this.refs.max
     )
 
     this.go = new ListGo(this.props, this.focus, this.data, this.emits)
@@ -98,6 +103,15 @@ export class List {
     return this.data.fullData.value
   })
 
+  /**
+   * Computed CSS classes for the cell component.
+   *
+   * Вычисляемые CSS классы для компонента ячейки.
+   */
+  readonly classes = computed<ConstrClass>(() => ({
+    [`${this.className}--highlightActive`]: Boolean(this.props.filterMode) && this.data.isHighlight()
+  }))
+
   /**
    * Computed binding properties for list items/
    * Вычисляемые привязочные свойства для элементов списка
@@ -140,7 +154,10 @@ export class List {
     return toBinds(
       this.itemBinds.value,
       item,
-      { key: item.value }
+      {
+        key: item.value,
+        role: this.props.roleItem
+      }
     )
   }
 
@@ -189,15 +206,19 @@ export class List {
    *
    * Получает привязочные свойства для элемента управления группой со стрелкой вниз
    * @param item List item data/ данные элемента списка
-   * @param open Whether the group is open/ открыта ли группа
+   * @param props additional properties/ дополнительные свойства
    */
   getItemManagementFormGroup(
     item: ConstrBind<ListDataItem>,
-    open: boolean
+    props: ListGroupSlotsPropsInclude
   ): ConstrBind<ListDataItem> {
     return this.getItemManagement(
-      item,
-      open,
+      {
+        ...item,
+        ...props,
+        filterMode: false
+      },
+      props.open,
       this.props.iconArrowDown
     )
   }
@@ -214,7 +235,11 @@ export class List {
     open: boolean
   ): ConstrBind<ListDataItem> {
     return this.getItemManagement(
-      item,
+      {
+        ...item,
+        filterMode: false,
+        isMenu: true
+      },
       open,
       this.props.iconArrowRight
     )

package/src/constructors/List/ListControl.ts

@@ -1,5 +1,5 @@
 import { computed, onUnmounted, watch } from 'vue'
-import { EventItem, isDomRuntime, ListData } from '@dxtmisha/functional'
+import { EventItem, isDomRuntime, ListDataRef } from '@dxtmisha/functional'
 
 import { ListSearch } from './ListSearch'
 import { ListGo } from './ListGo'
@@ -28,7 +28,7 @@ export class ListControl {
   constructor(
     protected readonly props: ListProps,
     protected readonly search: ListSearch,
-    protected readonly data: ListData,
+    protected readonly data: ListDataRef,
     protected readonly go: ListGo
   ) {
     watch(