@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Select/SelectDesign.tsx

@@ -0,0 +1,288 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Select } from './Select'
+
+import type { MenuControlItem } from '../Menu'
+import type { FieldControl } from '../Field'
+import {
+  type SelectPropsBasic
+} from './props'
+import {
+  type SelectClasses,
+  type SelectComponents,
+  type SelectEmits,
+  type SelectExpose,
+  type SelectSlots
+} from './types'
+
+/**
+ * SelectDesign
+ */
+export class SelectDesign<
+  COMP extends SelectComponents,
+  EXPOSE extends SelectExpose,
+  CLASSES extends SelectClasses,
+  P extends SelectPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    SelectEmits,
+    EXPOSE,
+    SelectSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Select
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, SelectEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Select(
+      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 {
+      ...this.item.menu.expose,
+      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 / Системная метка
+        input: this.getSubClass('input')
+        // :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.renderMenu
+      },
+      {
+        ...this.getAttrs(),
+        iconTurn: this.item.menu.expose.open.value,
+        class: this.classes?.value.main,
+        validationMessage: this.item.validation.message.value
+      }
+    )
+  }
+
+  /**
+   * Rendering the menu element.
+   *
+   * Рендер элемента меню.
+   * @param input data for the input element/ данные для элемента ввода
+   */
+  protected readonly renderMenu = (input: FieldControl): VNode[] => {
+    return this.item.menu.render(
+      {
+        control: (props: MenuControlItem) => this.renderMenuControl(input, props),
+        title: props => this.renderTitle(props),
+        footer: props => this.initSlot('footer', undefined, props),
+        contextTop: props => this.initSlot('contextTop', undefined, props),
+        contextBottom: props => this.initSlot('contextBottom', undefined, props)
+      },
+      {
+        selected: this.item.value.item.value,
+        highlight: this.item.filter.get()
+      }
+    )
+  }
+
+  /**
+   * Render menu control.
+   *
+   * Рендер элемента управления меню.
+   * @param input data for the input element/ данные для элемента ввода
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderMenuControl = (
+    input: FieldControl,
+    props: MenuControlItem
+  ): VNode | VNode[] => {
+    const children: any[] = []
+
+    if (!this.item.input.isEdit.value) {
+      children.push(this.renderMenuControlValue(input, props))
+    }
+
+    children.push(
+      this.renderMenuControlInput(input, props)
+    )
+
+    return children
+  }
+
+  /**
+   * Render input element.
+   *
+   * Рендер элемента ввода.
+   * @param input data for the input element/ данные для элемента ввода
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderMenuControlInput = (
+    input: FieldControl,
+    props: MenuControlItem
+  ): VNode => {
+    const isEdit = this.item.input.isEdit.value
+    const className = isEdit ? input.className : input.classForFocus
+    const menuControl = {
+    }
+
+    return h(
+      'input',
+      toBinds(
+        this.item.input.binds.value,
+        props.binds,
+        {
+          ref: this.element,
+          id: input.id,
+          value: this.item.value.get(),
+          class: [
+            props.classesWindow.controlOpenOnly,
+            className
+          ]
+        },
+        isEdit ? undefined : menuControl
+      )
+    )
+  }
+
+  /**
+   * Render menu control in static mode.
+   *
+   * Рендер элемента управления меню в статическом режиме.
+   * @param input data for the input element/ данные для элемента ввода
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderMenuControlValue = (
+    input: FieldControl,
+    props: MenuControlItem
+  ): VNode => {
+    return this.components.renderOne(
+      'selectValue',
+      toBinds(
+        props.binds,
+        {
+          class: input.className,
+          disabled: this.props.disabled,
+          value: props.selectedList.value,
+          multiple: this.props.multiple,
+          placeholder: this.props.placeholder,
+          onClick: this.item.event.onSelect
+        }
+      )
+    ) as VNode
+  }
+
+  /**
+   * Render title element.
+   *
+   * Рендер элемента заголовка.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderTitle = (props: MenuControlItem) => {
+    const children: any[] = []
+
+    if (this.props.showSearch) {
+      children.push(this.renderFilterInput(props))
+    }
+
+    this.initSlot('title', children, props)
+
+    return children
+  }
+
+  /**
+   * Render filter input.
+   *
+   * Рендер фильтра ввода.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderFilterInput = (props: MenuControlItem): VNode => {
+    return h(
+      'div',
+      {
+        class: [
+          this.classes?.value.input,
+          props.classesWindow.static
+        ]
+      },
+      this.components.renderOne(
+        'input',
+        toBinds(
+          {
+            icon: this.props.iconSearch,
+            onInputLite: this.item.filter.onInput,
+            inputAttrs: {
+              'data-menu-control': '1'
+            }
+          },
+          this.props.inputSearchAttrs
+        )
+      )
+    )
+  }
+}

package/src/constructors/Select/SelectFilter.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue'
+import type { FieldValidationItem } from '../../types/fieldTypes'
+
+/**
+ * SelectFilter class manages filter/search functionality for select components.
+ * Provides value storage and input handling for filtering items.
+ *
+ * Класс SelectFilter управляет функциональностью фильтрации/поиска для компонентов выбора.
+ * Предоставляет хранение значения и обработку ввода для фильтрации элементов.
+ */
+export class SelectFilter {
+  /** Reactive filter value/ Реактивное значение фильтра */
+  readonly value = ref<string>('')
+
+  /**
+   * Get current filter value.
+   *
+   * Получить текущее значение фильтра.
+   */
+  get(): string {
+    return this.value.value
+  }
+
+  /**
+   * Set filter value.
+   *
+   * Установить значение фильтра.
+   * @param value filter string/ строка фильтра
+   */
+  set(value: string) {
+    this.value.value = value
+  }
+
+  /**
+   * Input event handler.
+   *
+   * Обработчик события ввода.
+   * @param value validation item with input value/ элемент валидации со значением ввода
+   */
+  readonly onInput = (value: FieldValidationItem): void => {
+    this.value.value = String(value.value ?? '')
+  }
+}

package/src/constructors/Select/SelectInput.ts

@@ -0,0 +1,68 @@
+import { computed } from 'vue'
+import { type ConstrBind, toBinds } from '@dxtmisha/functional'
+
+import { FieldAttributesInclude } from '../../classes/field/FieldAttributesInclude'
+import { FieldValueInclude } from '../../classes/field/FieldValueInclude'
+import { FieldEventInclude } from '../../classes/field/FieldEventInclude'
+
+import type { SelectProps } from './props'
+
+/**
+ * Class for working with the select input.
+ *
+ * Класс для работы с input селекта.
+ */
+export class SelectInput {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param attributes object for working with input attributes/ объект для работы с атрибутами ввода
+   * @param value object for working with values/ объект для работы со значениями
+   * @param event object for working with events/ объект для работы с событиями
+   */
+
+  constructor(
+    protected readonly props: Readonly<SelectProps>,
+    protected readonly attributes: FieldAttributesInclude,
+    protected readonly value: FieldValueInclude,
+    protected readonly event: FieldEventInclude
+  ) {
+  }
+
+  /** Indicates if it is in edit mode/ Указывает, находится ли в режиме редактирования */
+  readonly isEdit = computed<boolean>(
+    () => Boolean(this.props.editValue && !this.props.multiple)
+  )
+
+  /**
+   * Returns data for the input field.
+   *
+   * Возвращает данные для поля input.
+   */
+  readonly binds = computed<ConstrBind<Partial<HTMLInputElement>> | undefined>(() => {
+    return toBinds(
+      this.attributes.listForInput.value,
+      {
+        'name': this.props.name,
+        'type': 'text',
+        'required': this.props.required,
+        'readonly': !this.isEdit.value,
+        'placeholder': this.props.placeholder,
+        'data-menu-control': '1',
+        'onInput': this.isEdit.value ? this.event.onInput : this.event.onSelect
+        // 'onKeydown': this.onKeydown
+      }
+    ) as ConstrBind<Partial<HTMLInputElement>>
+  })
+
+  /**
+   * Handles the keydown event to simulate a click on the input element.
+   *
+   * Обрабатывает событие нажатия клавиши для имитации клика по элементу ввода.
+   * @param event The keydown event object/ Объект события нажатия клавиши
+   */
+  protected onKeydown = (event: Event) => {
+    (event.target as HTMLInputElement).click()
+    event.preventDefault()
+  }
+}

package/src/constructors/Select/index.ts

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

package/src/constructors/Select/properties.json

@@ -0,0 +1,3 @@
+{
+  "#input": {}
+}

package/src/constructors/Select/props.ts

@@ -0,0 +1,63 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { IconPropsBasic, IconValue } 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 { InputPropsBasic } from '../Input'
+import type { ProgressPropsBasic } from '../Progress'
+import type { MenuPropsBasic, MenuPropsInclude } from '../Menu'
+
+import type { FieldSelectProps } from '../../types/fieldTypes'
+
+interface SelectPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface SelectPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Field extends FieldPropsBasic = FieldPropsBasic,
+  FieldLabel extends FieldLabelPropsBasic = FieldLabelPropsBasic,
+  FieldMessage extends FieldMessagePropsBasic = FieldMessagePropsBasic,
+  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic,
+  Input extends InputPropsBasic = InputPropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic,
+  Menu extends MenuPropsBasic = MenuPropsBasic
+> extends FieldPropsInclude<Icon, Field, FieldLabel, FieldMessage, FieldCounter, Progress>,
+  FieldSelectProps,
+  MenuPropsInclude<Menu> {
+  // Value
+  editValue?: boolean
+
+  // Style
+  hideList?: boolean
+  showSearch?: boolean
+  filterMode?: boolean
+
+  iconArrowDown?: IconValue<Icon>
+  iconSearch?: IconValue<Icon>
+
+  inputSearchAttrs?: ConstrBind<Input>
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface SelectProps extends SelectPropsBasic, SelectPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsSelect = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Select/style.scss

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

package/src/constructors/Select/types.ts

@@ -0,0 +1,53 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { MenuComponentInclude, MenuExposeInclude, MenuSlotInclude } from '../Menu'
+import type { FieldComponentInclude, FieldSlotsInclude } from '../Field'
+import type { SelectValueComponentInclude } from '../SelectValue'
+import type { InputComponentInclude } from '../Input'
+
+import type { FieldBasicEmits, FieldBasicExpose } from '../../types/fieldTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type SelectComponents
+  = MenuComponentInclude
+    & FieldComponentInclude
+    & SelectValueComponentInclude
+    & InputComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type SelectEmits = FieldBasicEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface SelectExpose extends FieldBasicExpose, MenuExposeInclude {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface SelectSlots extends FieldSlotsInclude, MenuSlotInclude {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type SelectClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  input: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/SelectValue/SelectValue.ts

@@ -0,0 +1,95 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrBind, type ConstrClassObject, type ConstrEmit, DesignComp, isFilled } from '@dxtmisha/functional'
+
+import { EnabledInclude } from '../../classes/EnabledInclude'
+import { EventClickInclude } from '../../classes/EventClickInclude'
+import { type IconProps } from '../Icon'
+import { WindowClassesInclude } from '../Window'
+
+import type { EventClickValue } from '../../types/eventClickTypes'
+import type { SelectValueComponents, SelectValueEmits, SelectValueSlots } from './types'
+import type { SelectValueProps } from './props'
+
+/**
+ * SelectValue
+ */
+export class SelectValue {
+  readonly enabled: EnabledInclude
+  readonly event: EventClickInclude
+
+  readonly window: WindowClassesInclude
+
+  /**
+   * 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: SelectValueProps,
+    protected readonly refs: ToRefs<SelectValueProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<SelectValueComponents, SelectValueProps>,
+    protected readonly slots?: SelectValueSlots,
+    protected readonly emits?: ConstrEmit<SelectValueEmits>
+  ) {
+    this.enabled = new EnabledInclude(this.props)
+    this.event = new EventClickInclude(
+      this.props,
+      this.enabled,
+      this.emits
+    )
+
+    this.window = new WindowClassesInclude(classDesign)
+  }
+
+  /** Is placeholder/ Является ли плейсхолдером */
+  readonly isPlaceholder = computed<boolean>(
+    () => !isFilled(this.props.value) && Boolean(this.props.placeholder)
+  )
+
+  /** Icon for canceling selection/ Иконка для отмены выбора */
+  readonly iconTrailing = computed<ConstrBind<IconProps> | undefined>(() => {
+    if (this.enabled.isEnabled.value) {
+      return {
+        icon: this.props.iconCancel,
+        dynamic: true,
+        class: [
+          `${this.className}__trailing`,
+          this.window.get().controlStatic
+        ]
+      }
+    }
+
+    return undefined
+  })
+
+  /** Returns data for the main style class/ Возвращает данные для главного класса стиля */
+  readonly classes = computed<ConstrClassObject>(() => ({
+    [`${this.className}--placeholder`]: this.isPlaceholder.value,
+    [`${this.className}--multiple`]: Boolean(this.props.multiple)
+  }))
+
+  /**
+   * Click event handler.
+   *
+   * Обработчик события клика.
+   * @param event event object/ объект события
+   * @param options additional event options/ дополнительные опции события
+   */
+  readonly onClick = (
+    event: MouseEvent,
+    options?: EventClickValue
+  ) => {
+    event.preventDefault()
+    event.stopPropagation()
+    this.event.onClick(event, options)
+  }
+}