@dxtmisha/constructor 0.23.0

package/src/constructors/Mask/MaskView.ts

@@ -0,0 +1,169 @@
+import { computed } from 'vue'
+
+import { MaskType } from './MaskType'
+import { MaskDate } from './MaskDate'
+import { MaskFormat } from './MaskFormat'
+import { MaskSpecial } from './MaskSpecial'
+import { MaskRubber } from './MaskRubber'
+import { MaskItem } from './MaskItem'
+import { MaskValueBasic } from './MaskValueBasic'
+import { MaskValidation } from './MaskValidation'
+
+import { MASK_CHAR_DELETE, type MaskViewList, MASK_VIEW_DEFAULT } from './basicTypes'
+import type { MaskProps } from './props'
+
+/**
+ * Class for working with data to output to the screen.
+ *
+ * Класс для работы с данными для вывода на экран.
+ */
+export class MaskView {
+  /** Class name prefix for item/ Класс для элемента */
+  protected classNameItem: string
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param type object for working with the mask type/ объект для работы с типом маски
+   * @param date object for working with date types/ объект для работы с типом даты
+   * @param format object for managing numeric mask types/ объект для управления числовыми типами масок
+   * @param special object for working with special characters/ объект для работы со специальными символами
+   * @param rubber object for working with rubber types/ объект для работы с резиновыми типами
+   * @param mask object for managing masks/ объект управления маской
+   * @param valueBasic object for working with base values/ объект для работы с базовыми значениями
+   * @param validation object for working with validation/ объект для работы с валидацией
+   * @param className define class names for each symbol/ определить название класса для каждого символа
+   */
+  constructor(
+    protected readonly props: MaskProps,
+    protected readonly type: MaskType,
+    protected readonly date: MaskDate,
+    protected readonly format: MaskFormat,
+    protected readonly special: MaskSpecial,
+    protected readonly rubber: MaskRubber,
+    protected readonly mask: MaskItem,
+    protected readonly valueBasic: MaskValueBasic,
+    protected readonly validation: MaskValidation,
+    className: string
+  ) {
+    this.classNameItem = `${className}__character__item`
+  }
+
+  /** View items list/ Список данных для отображения */
+  readonly item = computed<MaskViewList>(() => {
+    const data: MaskViewList = []
+    const valueBasic = this.valueBasic.item.value
+
+    this.mask.item.value.forEach((char, index) => {
+      const value = valueBasic?.[index]
+
+      data.push({
+        className: `${this.classNameItem} ${this.classNameItem}--${this.getStatus(char, value)}`,
+        value: this.getValue(char, value)
+      })
+    })
+
+    return data
+  })
+
+  /** Input value with special view characters/ Значение ввода со спецсимволами отображения */
+  readonly input = computed<string>(() => {
+    const value: string[] = []
+    const list = this.mask.item.value
+
+    this.valueBasic.item.value.split('').forEach((char, index) => {
+      if (char === MASK_CHAR_DELETE) {
+        value.push(
+          this.getSpecialToView(list?.[index] ?? '') ?? char
+        )
+      } else {
+        value.push(char)
+      }
+    })
+
+    return value.join('')
+  })
+
+  /**
+   * Checks if the value is filled in.
+   *
+   * Проверяет, заполнено ли значение.
+   * @param value checked value/ проверяемое значение
+   */
+  protected isValue(value?: string): value is string {
+    return Boolean(value && value !== MASK_CHAR_DELETE)
+  }
+
+  /**
+   * Returns the status by mask symbol and its position.
+   *
+   * Возвращает статус по символу маски и месту его расположения.
+   * @param char mask symbol/ символ маски
+   * @param value entered value for this position/ введённое значение для позиции
+   */
+  protected getStatus(char: string, value?: string): string {
+    if (this.isValue(value)) {
+      if (!this.special.isSpecial(char)) {
+        return 'standard'
+      }
+
+      if (this.validation.isError(char)) {
+        return 'error'
+      }
+
+      return 'special'
+    }
+
+    if (this.rubber.isTransition(char)) {
+      return 'transition'
+    }
+
+    return 'placeholder'
+  }
+
+  /**
+   * Returns symbol for rendering: real value or placeholder.
+   *
+   * Возвращает символ для отображения: реальное значение или плейсхолдер.
+   * @param char mask symbol/ символ маски
+   * @param value entered value for position/ введённое значение позиции
+   */
+  protected getValue(char: string, value?: string): string {
+    return this.isValue(value) ? value : this.getSpecialToView(char)
+  }
+
+  /**
+   * Returns display version of special mask symbol (placeholder).
+   *
+   * Возвращает отображаемую версию специального символа маски (плейсхолдер).
+   * @param char mask symbol/ символ маски
+   */
+  protected getSpecialToView(char: string): string {
+    if (this.special.isSpecial(char)) {
+      return this.getViewChar(char)
+        ?? this.special.getView(char)
+        ?? this.props.view
+        ?? MASK_VIEW_DEFAULT
+    }
+
+    return char
+  }
+
+  /**
+   * Returns special character for view by its group name.
+   *
+   * Возвращает специальный символ для отображения по имени группы.
+   * @param groupName group name/ имя группы
+   */
+  protected getViewChar(groupName: string): string | undefined {
+    if (this.type.isDate()) {
+      return this.date.getView(groupName)
+    }
+
+    if (this.type.isCurrencyOrNumber()) {
+      return this.format.view.value
+    }
+
+    return undefined
+  }
+}

package/src/constructors/Mask/basicTypes.ts

@@ -0,0 +1,49 @@
+import type { GeoDate } from '@dxtmisha/functional'
+import type { FieldPatternItemOrFunction, FieldValidationItem } from '../../types/fieldTypes'
+
+export type MaskTypeItem = GeoDate
+  | 'text'
+  | 'number'
+  | 'number-format'
+  | 'currency'
+
+export type MaskElementInput = HTMLInputElement | undefined
+export type MaskMatchItem = RegExp | string
+export type MaskFractionItem = string | boolean | number
+
+export type MaskSpecialItem = {
+  defaultValue?: string
+  rubber?: boolean
+  transitionChar?: string | string[]
+  minLength?: number
+  maxLength?: number
+  match?: MaskMatchItem
+  pattern?: FieldPatternItemOrFunction
+  view?: string
+}
+export type MaskSpecialInfo = {
+  index: number
+  key: number
+  char: string
+}
+export type MaskSpecialList = Record<string, MaskSpecialItem>
+export type MaskSpecialProp = string | string[] | MaskSpecialList
+
+export type MaskViewItem = {
+  className: string
+  value: string
+}
+export type MaskViewList = MaskViewItem[]
+
+export type MaskList = string | string[]
+
+export type MaskEventData = FieldValidationItem
+export type MaskEventSelection = {
+  target: HTMLInputElement
+  start: number
+  end: number
+  length: number
+}
+
+export const MASK_CHAR_DELETE = '~'
+export const MASK_VIEW_DEFAULT = '_'

package/src/constructors/Mask/index.ts

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

package/src/constructors/Mask/properties.json

@@ -0,0 +1,29 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "caret-opacity": {
+    "_type": "var"
+  },
+  "#input": {},
+  "#character": {
+    "#item": {
+      "~placeholder": {}
+    }
+  },
+  "~visible": {
+    "_default": true
+  },
+  "~visiblePartly": {},
+  "~align": {
+    "~left": {},
+    "~right": {}
+  },
+  "~dir": {
+    "~ltr": {},
+    "~rtl": {}
+  }
+}

package/src/constructors/Mask/props.ts

@@ -0,0 +1,70 @@
+import type { FieldPatternItemOrFunction } from '../../types/fieldTypes'
+import type {
+  MaskFractionItem,
+  MaskList,
+  MaskMatchItem,
+  MaskSpecialProp,
+  MaskTypeItem
+} from './basicTypes'
+
+interface MaskPropsToken {
+  // :type [!] System label / Системная метка
+  visible?: boolean
+  visiblePartly?: boolean
+  align?: 'left' | 'right'
+  dir?: 'ltr' | 'rtl'
+  // :type [!] System label / Системная метка
+}
+
+export interface MaskPropsBasic {
+  // Value
+  name?: string
+  value?: string | number
+  valueDefault?: string | number
+  currency?: string
+  currencyHide?: boolean
+  fullOnly?: boolean
+
+  mask?: MaskList
+  special?: MaskSpecialProp
+  match?: MaskMatchItem
+  groupSave?: boolean
+
+  pattern?: FieldPatternItemOrFunction
+  check?: FieldPatternItemOrFunction
+  fraction?: MaskFractionItem
+
+  // Style
+  type?: MaskTypeItem
+  view?: string
+
+  inputAttrs?: Partial<HTMLInputElement>
+
+  language?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface MaskProps extends MaskPropsBasic, MaskPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsMask = {
+  special: '*',
+  match: /[0-9]/,
+  type: 'text',
+  groupSave: true,
+  view: '_',
+  ...{
+    // :default [!] System label / Системная метка
+    visible: true
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Mask/style.scss

@@ -0,0 +1,104 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinMask {
+  @include ui.initByCustom('sys.align', left);
+  @include ui.initByCustom('sys.align.flex', flex-start);
+  @include ui.initByCustom('sys.color', ui.v('??color', var(--sys-color, inherit)));
+  @include ui.initByCustom('sys.opacity', 0);
+  @include ui.initByCustom('sys.opacity.all', 0);
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  position: relative;
+
+  text-align: ui.v('??sys.align');
+
+  &__input {
+    box-sizing: border-box;
+    position: absolute;
+    @include ui.inset(0);
+    z-index: 4;
+
+    padding: inherit;
+
+    width: 100%;
+
+    font: inherit;
+    line-height: inherit;
+    letter-spacing: inherit;
+    color: transparent;
+    @include ui.color(ui.v('??sys.color'), ui.v('??caretOpacity', 1), null, 'caret-color');
+    text-align: ui.v('??sys.align');
+
+    background: transparent;
+    border: none;
+
+    -webkit-tap-highlight-color: transparent;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  &__character {
+    display: flex;
+    align-items: center;
+    justify-content: ui.v('??sys.align.flex');
+    opacity: ui.v('??sys.opacity.all');
+    position: relative;
+    z-index: 8;
+    pointer-events: none;
+
+    &__item {
+      @include ui.color(ui.v('??sys.color'), ui.v('??colorOpacity', 1));
+      pointer-events: none;
+
+      &--placeholder {
+        opacity: ui.v('??sys.opacity');
+      }
+    }
+  }
+
+  &--visible {
+    @include ui.initByCustom('sys.opacity', 1);
+    @include ui.initByCustom('sys.opacity.all', 1);
+  }
+
+  &--visiblePartly {
+    @include ui.initByCustom('sys.opacity.all', 1);
+  }
+
+  &--value,
+  &:focus-within {
+    @include ui.initByCustom('sys.opacity.all', 1);
+
+    @include ui.subclass('input') {
+      &:-webkit-autofill {
+        -webkit-text-fill-color: transparent;
+      }
+    }
+  }
+
+  &--align {
+    &--right,
+    &--end {
+      @include ui.initByCustom('sys.align', ui.dirRight());
+      @include ui.initByCustom('sys.align.flex', flex-end);
+    }
+
+    &--left {
+      @include ui.initByCustom('sys.align', ui.dirLeft());
+    }
+
+    &--center {
+      @include ui.subclass('input') {
+        text-align: center;
+      }
+
+      @include ui.subclass('character') {
+        justify-content: center;
+      }
+    }
+  }
+}

package/src/constructors/Mask/types.ts

@@ -0,0 +1,71 @@
+import type { ComputedRef } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { FieldValidationItem } from '../../types/fieldTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type MaskComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type MaskEmits = {
+  focus: [event: FocusEvent]
+  blur: [event: FocusEvent]
+  keydown: [event: KeyboardEvent]
+  keyup: [event: KeyboardEvent]
+  beforeinput: [event: InputEvent]
+  input: [
+    event: InputEvent,
+    value: FieldValidationItem
+  ]
+  inputLite: [value: FieldValidationItem]
+  change: [
+    event: InputEvent,
+    value: FieldValidationItem
+  ]
+  changeLite: [value: FieldValidationItem]
+  paste: [event: ClipboardEvent]
+  reset: [event: Event]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface MaskExpose {
+  valueBasic: ComputedRef<string>
+  value: ComputedRef<string>
+
+  setValue(value: string): boolean
+
+  clear(): boolean
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface MaskSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type MaskClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  input: string
+  character: string
+  characterItem: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Menu/Menu.ts

@@ -0,0 +1,179 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, ListData } from '@dxtmisha/functional'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+
+import { BarsInclude } from '../Bars'
+import { WindowInclude } from '../Window'
+
+import { MenuRequest } from './MenuRequest'
+import { MenuSearch } from './MenuSearch'
+
+import { MenuWindow } from './MenuWindow'
+import { MenuValue } from './MenuValue'
+
+import type { MenuComponents, MenuEmits, MenuSlots } from './types'
+import type { MenuProps } from './props'
+import type { MenuControlBasic } from './basicTypes'
+import type { ListPropsBasic } from '../List'
+import type { EventClickValue } from '../../types/eventClickTypes'
+
+/**
+ * Menu
+ */
+export class Menu {
+  /** Request handler for list data/ Обработчик запросов данных списка */
+  readonly request: MenuRequest
+  /** Search helper for menu filtering/ Вспомогательный класс поиска для фильтрации меню */
+  readonly search: MenuSearch
+  /** Value manager for selected handling/ Менеджер выбранного значения */
+  readonly value: MenuValue
+
+  /** Data manager for list selection and mapping/ Менеджер данных списка для выбора и сопоставления */
+  readonly data: ListData
+
+  /** Include for working with the Bars component/ Подключение для работы с компонентом Bars */
+  readonly bars: BarsInclude
+  /** Include for working with the Window component/ Подключение для работы с компонентом Window */
+  readonly window: WindowInclude
+
+  /** Window manager for Menu/ Класс управления окном Menu */
+  readonly menuWindow: MenuWindow
+
+  /** Click event helper to unify click emissions/ Вспомогательный класс кликов для унифицированной отправки событий */
+  readonly event: EventClickInclude
+
+  /** Data for binding to controls/ Данные для привязки к контролам */
+  readonly slotData: MenuControlBasic
+
+  /**
+   * 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: MenuProps,
+    protected readonly refs: ToRefs<MenuProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<MenuComponents, MenuProps>,
+    protected readonly slots?: MenuSlots,
+    protected readonly emits?: ConstrEmit<MenuEmits>
+  ) {
+    this.request = new MenuRequest(this.props)
+    this.search = new MenuSearch()
+    this.value = new MenuValue(this.props, this.refs, this.emits)
+
+    this.data = new ListData(
+      this.request.item,
+      undefined,
+      undefined,
+      undefined,
+      this.value.selected,
+      this.refs.keyValue,
+      this.refs.keyLabel
+    )
+
+    this.bars = new BarsInclude(
+      this.props,
+      this.className,
+      this.components,
+      this.emits
+    )
+
+    this.menuWindow = new MenuWindow(this.props, this.request)
+    this.window = new WindowInclude(
+      this.props,
+      this.className,
+      this.components,
+      this.emits,
+      this.menuWindow.getExtra()
+    )
+
+    this.event = new EventClickInclude(undefined, undefined, this.emits)
+
+    this.slotData = {
+      loading: this.request.progress,
+
+      isSelected: this.data.isSelected,
+      selectedList: this.data.selectedList,
+      selectedNames: this.data.selectedNames,
+      selectedValues: this.data.selectedValues
+    }
+  }
+
+  /**
+   * Getting data for binding to the List component.
+   *
+   * Получение данных для привязки к компоненту List.
+   */
+  readonly binds = computed<ListPropsBasic>(() => {
+    return {
+      liteThreshold: this.props.liteThreshold,
+      keyLabel: this.props.keyLabel,
+      keyValue: this.props.keyValue,
+
+      tag: this.props.tag,
+      onClick: this.onClick,
+      onClose: this.window.expose.toClose,
+
+      control: true
+    }
+  })
+
+  /**
+   * Getting data for binding to controls.
+   *
+   * Получение данных для привязки к контролам.
+   * @returns data for binding to controls/ данные для привязки к контролам
+   */
+  getControlBinds(): MenuControlBasic {
+    return this.slotData
+  }
+
+  /**
+   * Click handler.
+   *
+   * Обработчик клика.
+   * @param event event object/ объект события
+   * @param options data object/ объект с данными
+   */
+  readonly onClick = (
+    event: MouseEvent,
+    options?: EventClickValue
+  ): void => {
+    if (
+      options
+      && 'value' in options
+    ) {
+      this.value.setValue(options.value)
+    }
+
+    this.event.onClick(event, options)
+  }
+
+  /**
+   * Click on the slot handler.
+   *
+   * Обработчик клика по слоту.
+   * @param event event object/ объект события
+   */
+  readonly onClickSlot = (event: Event) => {
+    const element = event.target as HTMLElement
+    const item = element.closest<HTMLElement>('*[data-value]')
+
+    if (
+      item
+      && !element.closest(`.${this.className}__list`)
+    ) {
+      this.emits?.('clickSlot', item.dataset.value)
+    }
+  }
+}