@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Field/FieldInclude.ts

@@ -1,202 +0,0 @@
-import { computed, type VNode } from 'vue'
-import {
-  type ConstrBind,
-  type DesignComponents,
-  eventStopPropagation,
-  type RefOrNormal,
-  toBind,
-  toBinds,
-  getRef
-} from '@dxtmisha/functional'
-
-import type { EventClickValue } from '../../types/eventClickTypes'
-import type { FieldValueInclude } from '../../classes/field/FieldValueInclude'
-import type { FieldEventInclude } from '../../classes/field/FieldEventInclude'
-import type { FieldArrowInclude } from '../../classes/field/FieldArrowInclude'
-
-import type { FieldComponentInclude, FieldPropsInclude } from './basicTypes'
-import type { FieldArrowProps } from '../../types/fieldTypes'
-import type { FieldPropsBasic } from './props'
-import type { FieldSlots } from './types'
-
-/**
- * The class returns data for working with the Field framework.
- *
- * Класс возвращает данные для работы с каркасом поля.
- */
-export class FieldInclude<
-  Props extends FieldPropsInclude & FieldArrowProps = FieldPropsInclude,
-  PropsExtra extends ConstrBind<FieldPropsBasic> = ConstrBind<FieldPropsBasic>
-> {
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param value object for working with values/ объект для работы со значениями
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param event object for working with events/ объект для работы с событиями
-   * @param arrow object for working with arrows/ объект для работы со стрелками
-   * @param onIcon Collection icon click handler/ Обработчик клика по иконке коллекции
-   * @param onTrailing Trailing icon click handler/ Обработчик клика по иконке трейлинга
-   * @param onNext Next arrow click handler/ Обработчик клика по следующей стрелке
-   * @param onPrevious Previous arrow click handler/ Обработчик клика по предыдущей стрелке
-   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
-   * @param index index identifier/ идентификатор индекса
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly value: FieldValueInclude,
-    protected readonly components?: DesignComponents<FieldComponentInclude, Props>,
-    protected readonly event?: FieldEventInclude,
-    protected readonly arrow?: FieldArrowInclude,
-    protected readonly onIcon?: () => void,
-    protected readonly onTrailing?: () => void,
-    protected readonly onNext?: () => void,
-    protected readonly onPrevious?: () => void,
-    protected readonly extra?: RefOrNormal<PropsExtra>,
-    protected readonly index?: string
-  ) {
-  }
-
-  /** Returns properties for the field framework/ Возвращает свойства для каркаса поля */
-  readonly binds = computed<PropsExtra>(() => {
-    return toBinds<PropsExtra>(
-      {
-        // Status
-        focus: this.props.focus,
-        selected: this.props.selected,
-        readonly: this.props.readonly,
-        disabled: this.props.disabled,
-
-        loading: this.props.loading,
-        forceShowMessage: this.props.forceShowMessage,
-
-        // Value
-        label: this.props.label,
-        prefix: this.props.prefix,
-        suffix: this.props.suffix,
-        caption: this.props.caption,
-        helperMessage: this.props.helperMessage,
-
-        required: this.props.required,
-
-        detail: this.props.detail,
-
-        // Style
-        cancel: this.props.cancel,
-        counterShow: this.props.counterShow,
-
-        icon: this.props.icon,
-        iconTurn: this.props.iconTurn,
-        iconHide: this.props.iconHide,
-        iconDir: this.props.iconDir,
-        iconPalette: this.props.iconPalette,
-        iconTrailing: this.props.iconTrailing,
-        iconTrailingTurnOnly: this.props.iconTrailingTurnOnly,
-        iconTrailingDirOnly: this.props.iconTrailingDirOnly,
-        iconTrailingPalette: this.props.iconTrailingPalette,
-        iconAttrs: this.props.iconAttrs,
-
-        align: this.props.align,
-
-        arrowCarousel: this.arrow?.isCarousel() ?? this.props.arrow === 'carousel',
-        arrowStepper: this.arrow?.isStepper() ?? this.props.arrow === 'stepper',
-        arrowAlign: this.arrow?.align() ?? this.props.arrowAlign,
-
-        isSkeleton: this.props.isSkeleton,
-
-        fieldLabelAttrs: this.props.fieldLabelAttrs,
-        fieldMessageAttrs: this.props.fieldMessageAttrs,
-        fieldCounterAttrs: this.props.fieldCounterAttrs,
-
-        onClick: this.on
-      },
-      getRef(this.extra),
-      this.props.fieldAttrs
-    )
-  })
-
-  /**
-   * Returns properties for working with the value of the Field framework/
-   * Возвращает свойства для работы со значением каркаса поля
-   */
-  readonly valueBinds = computed<ConstrBind<PropsExtra>>(() => ({
-    ...this.binds.value,
-    isValue: this.value.is.value,
-    value: this.value.item.value,
-    cancelShow: this.value.boolean.value,
-
-    counter: this.value.length.value,
-
-    disabledPrevious: this.arrow?.disabledPrevious.value,
-    disabledNext: this.arrow?.disabledNext.value
-  }))
-
-  /**
-   * Renders the Field framework.
-   *
-   * Отрисовывает каркас поля.
-   * @param slotsChildren
-   * @param attrs
-   */
-  readonly render = (
-    slotsChildren?: FieldSlots,
-    attrs?: Record<string, any>
-  ): VNode[] => {
-    if (this.components) {
-      return this.components.render(
-        'field',
-        toBind(
-          this.valueBinds.value,
-          attrs ?? {}
-        ),
-        slotsChildren as any as Record<string, any>,
-        this.index
-      )
-    }
-
-    return []
-  }
-
-  /**
-   * Method for listening to events.
-   *
-   * Метод для прослушивания событий.
-   * @param event event object/ объект события
-   * @param type type of the object that was clicked/ тип объекта, который был нажат
-   */
-  protected readonly on = (
-    event: MouseEvent,
-    { type }: EventClickValue
-  ) => {
-    if (
-      (event.target as HTMLElement).closest('[data-element="scoreboard"]')
-    ) {
-      switch (type) {
-        case 'icon':
-          this.onIcon?.()
-          eventStopPropagation(event)
-          break
-        case 'icon-trailing':
-          this.onTrailing?.()
-          eventStopPropagation(event)
-          break
-        case 'cancel':
-          this.event?.onClear(event)
-          eventStopPropagation(event)
-          break
-        case 'next':
-          this.onNext?.()
-          this.arrow?.next()
-          this.event?.on(event)
-          eventStopPropagation(event)
-          break
-        case 'previous':
-          this.onPrevious?.()
-          this.arrow?.previous()
-          this.event?.on(event)
-          eventStopPropagation(event)
-          break
-      }
-    }
-  }
-}

package/src/constructors/Field/FieldSize.ts

@@ -1,93 +0,0 @@
-import { onMounted, onUnmounted, onUpdated, type Ref, watch } from 'vue'
-import { EventItem, isDomRuntime } from '@dxtmisha/functional'
-
-/**
- * Input field margin control class.
- *
- * Класс управления отступами для элемента ввода.
- */
-export class FieldSize {
-  protected left: number = 0
-  protected right: number = 0
-  protected title: number = 0
-
-  protected event?: EventItem<Window, Event>
-
-  /**
-   * Constructor
-   * @param element main element/ главный элемент
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly element: Ref<HTMLLabelElement | undefined>,
-    protected readonly className: string
-  ) {
-    watch(element, () => this.update, { immediate: true })
-
-    if (isDomRuntime()) {
-      this.event = new EventItem(window, 'resize', this.update)
-      onUnmounted(() => this.event?.stop())
-    }
-
-    onMounted(this.update)
-    onUpdated(this.update)
-  }
-
-  /**
-   * Update margins.
-   *
-   * Обновление отступов.
-   */
-  readonly update = () => {
-    requestAnimationFrame(() => {
-      const elementSpace = this.getElementSpace()
-      const elementPrefix = this.getElementPrefix()
-
-      if (elementSpace) {
-        this.left = elementSpace.offsetLeft
-        this.right = (elementSpace.parentElement?.offsetWidth ?? 0) - this.left - elementSpace.offsetWidth
-      }
-
-      this.title = elementPrefix?.offsetLeft ?? elementSpace?.offsetLeft ?? 0
-
-      this.make()
-    })
-  }
-
-  /**
-   * Returns separator elements.
-   *
-   * Возвращает элементы-разделители.
-   */
-  protected getElementSpace(): HTMLDivElement | undefined {
-    return this.element.value?.querySelector(`.${this.className}__body__scoreboard__space`) ?? undefined
-  }
-
-  /**
-   * Returns element with prefix.
-   *
-   * Возвращает элемент с префиксом.
-   */
-  protected getElementPrefix(): HTMLDivElement | undefined {
-    return this.element.value?.querySelector(`.${this.className}__prefix`) ?? undefined
-  }
-
-  /**
-   * Update input field margins.
-   *
-   * Обновление отступов для поля ввода.
-   */
-  protected make() {
-    const element = this.element.value
-
-    if (element) {
-      element.style.setProperty(`--${this.className}-sys-left`, `${this.left}px`)
-      element.style.setProperty(`--${this.className}-sys-right`, `${this.right}px`)
-      element.style.setProperty(`--${this.className}-sys-title`, `${this.title}px`)
-
-      if (!element.classList.contains(`${this.className}--show`)) {
-        requestAnimationFrame(() => element.classList.add(`${this.className}--show`))
-      }
-    }
-  }
-}

package/src/constructors/Field/basicTypes.ts

@@ -1,106 +0,0 @@
-import type { ConstrBind } from '@dxtmisha/functional'
-
-import type { IconPropsBasic } from '../Icon'
-import type { FieldMessagePropsBasic } from '../FieldMessage'
-import type { FieldLabelPropsBasic } from '../FieldLabel'
-import type { FieldCounterPropsBasic } from '../FieldCounter'
-import type { ProgressPropsBasic } from '../Progress'
-
-import type { AriaList } from '../../types/ariaTypes'
-import type { FieldPropsBasic } from './props'
-import type { FieldSlots } from './types'
-
-/**
- * Control data passed to slots and subcomponents/
- * Данные управления, передаваемые в слоты и под-компоненты
- */
-export type FieldControl = {
-  /**
-   * Unique element identifier for binding label and input/
-   * Уникальный идентификатор элемента для связывания label и input
-   */
-  id: string
-  /**
-   * CSS classes for the visible input area/
-   * CSS-классы для видимой зоны ввода
-   */
-  className: string
-  /**
-   * CSS classes for the hidden native input element/
-   * CSS-классы для скрытого нативного элемента ввода
-   */
-  classHidden: string
-  /**
-   * CSS classes applied when the field is focused/
-   * CSS-классы, применяемые при фокусировке на поле
-   */
-  classForFocus: string
-
-  binds:
-    AriaList
-    & {
-      id: string
-      className: string
-    }
-}
-
-/**
- * Interface for describing which components need to be connected for Field work/
- * Интерфейс для описания, какие компоненты надо подключить для работы Field
- */
-export type FieldComponentInclude = {
-  field: object
-}
-
-/**
- * Type describing available slots for Field/
- * Тип, описывающий доступные слоты для Field
- */
-export interface FieldSlotsInclude extends Omit<FieldSlots, 'default'> {
-}
-
-/**
- * Properties that can be passed to FieldInclude/
- * Свойства, которые можно передать в FieldInclude
- */
-export interface FieldPropsInclude<
-  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 Omit<
-    FieldPropsBasic<Icon, FieldLabel, FieldMessage, FieldCounter, Progress>,
-    // Status
-    'disabledPrevious'
-    | 'disabledNext'
-
-    // Value
-    | 'to'
-    | 'value'
-    | 'maxlength'
-
-    // Style
-    | 'cancelShow'
-    | 'counter'
-    | 'counterTemplate'
-    | 'counterTop'
-    | 'iconArrowLeft'
-    | 'iconArrowRight'
-    | 'iconPlus'
-    | 'iconMinus'
-    | 'iconClose'
-  > {
-  // Status
-  focus?: boolean
-  selected?: boolean
-  readonly?: boolean
-  disabled?: boolean
-
-  // Style
-  align?: 'center' | 'right' | 'left'
-
-  cancel?: 'auto' | 'always' | 'none'
-  fieldAttrs?: ConstrBind<Field>
-}

package/src/constructors/Field/index.ts

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

package/src/constructors/Field/properties.json

@@ -1,92 +0,0 @@
-{
-  "padding": {
-    "_type": "var"
-  },
-  "space": {
-    "_type": "var"
-  },
-  "height": {
-    "_type": "var"
-  },
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "border-opacity": {
-    "_type": "var"
-  },
-  "border-radius": {
-    "_type": "var"
-  },
-  "focusWithin": {
-    "_type": "var"
-  },
-  "validation": {
-    "_type": "var"
-  },
-  "#body": {
-    "#input": {},
-    "#title": {
-      "#label": {
-        "#text": {}
-      }
-    },
-    "#scoreboard": {
-      "#left": {},
-      "#right": {},
-      "#space": {},
-      "#input": {}
-    },
-    "#border": {}
-  },
-  "#required": {},
-  "focus": {},
-  "active": {},
-  "~selected": {},
-  "readonly": {},
-  "disabled": {},
-  "~block": {},
-  "~isValue": {},
-  "~basic": {
-    "_category": "style"
-  },
-  "~boxed": {
-    "_category": "style"
-  },
-  "~tonal": {
-    "_category": "style"
-  },
-  "~filled": {
-    "_category": "style"
-  },
-  "~outlined": {
-    "_category": "style"
-  },
-  "~classic": {
-    "_category": "style"
-  },
-  "~arrowCarousel": {},
-  "~arrowStepper": {},
-  "~arrowAlign": {
-    "~center": {},
-    "~right": {},
-    "~left": {},
-    "_default": "right"
-  },
-  "~cancel": {
-    "~auto": {},
-    "~always": {},
-    "~none": {},
-    "_default": "auto"
-  },
-  "~align": {
-    "~center": {},
-    "~right": {},
-    "~left": {}
-  },
-  "~width": {
-    "_style": true
-  }
-}

package/src/constructors/Field/props.ts

@@ -1,91 +0,0 @@
-import type { PrefixProps } from '../../types/prefixTypes'
-import type { SuffixProps } from '../../types/suffixTypes'
-import type { CaptionProps } from '../../types/captionTypes'
-import type { EnabledProps } from '../../types/enabledTypes'
-import type { EventClickProps } from '../../types/eventClickTypes'
-
-import type { IconPropsBasic, IconTrailingPropsInclude, IconValue } from '../Icon'
-import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
-import type { FieldLabelPropsBasic, FieldLabelPropsInclude } from '../FieldLabel'
-import type { FieldCounterPropsBasic } from '../FieldCounter'
-import type { FieldMessagePropsBasic, FieldMessagePropsInclude } from '../FieldMessage'
-import type { SkeletonPropsInclude } from '../Skeleton'
-
-interface FieldPropsToken {
-  // :type [!] System label / Системная метка
-  focus?: boolean
-  disabled?: boolean
-  selected?: boolean
-  readonly?: boolean
-  block?: boolean
-  isValue?: boolean
-  basic?: boolean
-  boxed?: boolean
-  tonal?: boolean
-  filled?: boolean
-  outlined?: boolean
-  classic?: boolean
-  arrowCarousel?: boolean
-  arrowStepper?: boolean
-  arrowAlign?: 'center' | 'right' | 'left'
-  cancel?: 'auto' | 'always' | 'none'
-  align?: 'center' | 'right' | 'left'
-  width?: string | 'custom'
-  // :type [!] System label / Системная метка
-}
-
-export interface FieldPropsBasic<
-  Icon extends IconPropsBasic = IconPropsBasic,
-  FieldLabel extends FieldLabelPropsBasic = FieldLabelPropsBasic,
-  FieldMessage extends FieldMessagePropsBasic = FieldMessagePropsBasic,
-  FieldCounter extends FieldCounterPropsBasic = FieldCounterPropsBasic,
-  Progress extends ProgressPropsBasic = ProgressPropsBasic
-> extends IconTrailingPropsInclude<Icon>,
-  PrefixProps,
-  SuffixProps,
-  CaptionProps,
-  FieldLabelPropsInclude<FieldLabel, FieldCounter>,
-  FieldMessagePropsInclude<FieldMessage, FieldCounter>,
-  ProgressPropsInclude<Progress>,
-  EnabledProps,
-  EventClickProps,
-  SkeletonPropsInclude {
-  // Status
-  disabledPrevious?: boolean
-  disabledNext?: boolean
-
-  // Style
-  id?: string | number
-
-  counterTop?: boolean
-
-  cancelShow?: boolean
-
-  iconArrowLeft?: IconValue<Icon>
-  iconArrowRight?: IconValue<Icon>
-  iconPlus?: IconValue<Icon>
-  iconMinus?: IconValue<Icon>
-  iconClose?: IconValue<Icon>
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface FieldProps extends FieldPropsBasic, FieldPropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsField = {
-  ...{
-    // :default [!] System label / Системная метка
-    arrowAlign: 'right',
-    cancel: 'auto'
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/Field/types.ts

@@ -1,78 +0,0 @@
-import type { ConstrClass } from '@dxtmisha/functional'
-
-import type { CaptionSlots } from '../../types/captionTypes'
-import type { PrefixSlots } from '../../types/prefixTypes'
-import type { SuffixSlots } from '../../types/suffixTypes'
-import type { EventClickEmits } from '../../types/eventClickTypes'
-
-import type { IconComponentInclude } from '../Icon'
-import type { FieldLabelComponentInclude, FieldLabelSlotsInclude } from '../FieldLabel'
-import type { FieldMessageComponentInclude } from '../FieldMessage'
-import type { ProgressComponentInclude } from '../Progress'
-
-import type { FieldControl } from './basicTypes'
-
-/**
- * Interface for describing which components need to be connected for work.
- *
- * Интерфейс для описания, какие компоненты надо подключить для работы.
- */
-export type FieldComponents
-  = IconComponentInclude
-    & FieldLabelComponentInclude
-    & FieldMessageComponentInclude
-    & ProgressComponentInclude
-
-/**
- * Type describing available events.
- *
- * Тип, описывающий доступные события.
- */
-export type FieldEmits = EventClickEmits
-
-/**
- * Type describing available properties.
- *
- * Тип, описывающий доступные свойства.
- */
-export interface FieldExpose {
-}
-
-/**
- * Type describing available slots.
- *
- * Тип, описывающий доступные слоты.
- */
-export interface FieldSlots extends CaptionSlots,
-  PrefixSlots,
-  SuffixSlots,
-  FieldLabelSlotsInclude {
-  leading?(props: FieldControl): any
-
-  trailing?(props: FieldControl): any
-
-  default?(props: FieldControl): any
-}
-
-/**
- * Type describing subclasses.
- *
- * Тип, описывающий подклассы.
- */
-export type FieldClasses = {
-  main: ConstrClass
-  // :classes [!] System label / Системная метка
-  body: string
-  bodyInput: string
-  bodyTitle: string
-  bodyTitleLabel: string
-  bodyTitleLabelText: string
-  bodyScoreboard: string
-  bodyScoreboardLeft: string
-  bodyScoreboardRight: string
-  bodyScoreboardSpace: string
-  bodyScoreboardInput: string
-  bodyBorder: string
-  required: string
-  // :classes [!] System label / Системная метка
-}