@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/TextareaAutosize/TextareaAutosizeResize.ts

@@ -1,109 +0,0 @@
-import { nextTick, type Ref, ref, watch } from 'vue'
-import { TextareaAutosizeValue } from './TextareaAutosizeValue'
-import type { TextareaAutosizeProps } from './props'
-
-/**
- * Class for managing the height of the field.
- *
- * Класс управления высотой поля.
- */
-export class TextareaAutosizeResize {
-  readonly clone = ref<HTMLDivElement>()
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element input element/ элемент ввода
-   * @param value object for working with values/ объект для работы со значениями
-   */
-  constructor(
-    protected readonly props: Readonly<TextareaAutosizeProps>,
-    protected readonly element: Ref<HTMLTextAreaElement | undefined>,
-    protected readonly value: TextareaAutosizeValue
-  ) {
-    watch(this.value.item, this.on)
-    nextTick().then(() => requestAnimationFrame(this.on))
-  }
-
-  /**
-   * Changes the size of the field.
-   *
-   * Изменяет размер поля.
-   */
-  readonly updateSize = () => {
-    if (this.isElements()) {
-      const style = getComputedStyle(this.element.value)
-      const styleClone = this.clone.value.style
-
-      styleClone.paddingTop = style.paddingTop
-      styleClone.paddingRight = style.paddingRight
-      styleClone.paddingBottom = style.paddingBottom
-      styleClone.paddingLeft = style.paddingLeft
-      styleClone.width = `${this.element.value.offsetWidth}px`
-    }
-  }
-
-  /**
-   * Event for updating size and value.
-   *
-   * Событие для обновления размера и значения.
-   */
-  readonly on = () => {
-    this.updateSize()
-    this.updateValue()
-  }
-
-  /**
-   * Event for changing the value.
-   *
-   * Событие для изменения значения.
-   * @param event invoked event/ вызываемое событие
-   */
-  readonly onInput = (event: InputEvent) => {
-    this.value.on(event)
-
-    this.updateSize()
-    this.updateValue()
-  }
-
-  /**
-   * Checks if all elements are present.
-   *
-   * Проверяет, есть ли все элементы.
-   */
-  protected isElements(): this is {
-    element: Ref<HTMLInputElement>
-    clone: Ref<HTMLDivElement>
-  } {
-    return Boolean(
-      this.props.autosize
-      && this.element.value
-      && getComputedStyle(this.element.value).getPropertyValue('--sys-field-sizing-none') === '"--YES--"'
-      && this.clone.value
-    )
-  }
-
-  /**
-   * Updates the content of the clone element.
-   *
-   * Обновляет содержимое элемента клона.
-   */
-  protected updateValue() {
-    if (this.isElements()) {
-      this.clone.value.innerText = `${this.value.item.value} --`
-
-      requestAnimationFrame(this.updateHeight)
-    }
-  }
-
-  /**
-   * Updates the height of the field.
-   *
-   * Обновляет высоту поля.
-   */
-  protected readonly updateHeight = () => {
-    if (this.isElements()) {
-      this.element.value.style.height = `${this.clone.value.offsetHeight}px`
-    }
-  }
-}

package/src/constructors/TextareaAutosize/TextareaAutosizeValue.ts

@@ -1,69 +0,0 @@
-import { ref, type ToRefs, watch } from 'vue'
-import { type ConstrEmit } from '@dxtmisha/functional'
-
-import type { TextareaAutosizeEmits } from './types'
-import type { TextareaAutosizeProps } from './props'
-
-/**
- * Class for working with values.
- *
- * Класс для работы со значениями.
- */
-export class TextareaAutosizeValue {
-  readonly item = ref('')
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: TextareaAutosizeProps,
-    protected readonly refs: ToRefs<TextareaAutosizeProps>,
-    protected readonly emits?: ConstrEmit<TextareaAutosizeEmits>
-  ) {
-    watch(
-      [refs.value],
-      () => this.set(props.value),
-      { immediate: true }
-    )
-  }
-
-  /**
-   * Changes values.
-   *
-   * Изменяет значения.
-   * @param value changeable value/ изменяемое значение
-   */
-  set(value?: string): boolean {
-    if (this.isDifference(value)) {
-      this.item.value = value ?? ''
-      return true
-    }
-
-    return false
-  }
-
-  /**
-   * Event for changing the value.
-   *
-   * Событие для изменения значения.
-   * @param event invoked event/ вызываемое событие
-   */
-  on(event: InputEvent) {
-    if (this.set((event.target as HTMLInputElement).value)) {
-      this.emits?.('input', event)
-    }
-  }
-
-  /**
-   * Checks if the value has actually been changed.
-   *
-   * Проверяет, было ли значение действительно изменено.
-   * @param value changeable value/ изменяемое значение
-   */
-  protected isDifference(value?: string) {
-    return this.item.value !== value
-  }
-}

package/src/constructors/TextareaAutosize/index.ts

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

package/src/constructors/TextareaAutosize/properties.json

@@ -1,6 +0,0 @@
-{
-  "min-height": {
-    "_type": "var"
-  },
-  "#clone": {}
-}

package/src/constructors/TextareaAutosize/props.ts

@@ -1,34 +0,0 @@
-interface TextareaAutosizePropsToken {
-  // :type [!] System label / Системная метка
-  // :type [!] System label / Системная метка
-}
-
-export interface TextareaAutosizePropsBasic {
-  // Value
-  value?: string
-
-  // Style
-  autosize?: boolean
-  inputAttrs?: Record<string, any>
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface TextareaAutosizeProps extends TextareaAutosizePropsBasic, TextareaAutosizePropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsTextareaAutosize = {
-  autosize: true,
-  ...{
-    // :default [!] System label / Системная метка
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/TextareaAutosize/types.ts

@@ -1,50 +0,0 @@
-import type { Ref } from 'vue'
-import type { ConstrClass } from '@dxtmisha/functional'
-
-/**
- * Interface for describing which components need to be connected for work.
- *
- * Интерфейс для описания, какие компоненты надо подключить для работы.
- */
-export type TextareaAutosizeComponents = {
-  // componentName: object
-}
-
-/**
- * Type describing available events.
- *
- * Тип, описывающий доступные события.
- */
-export type TextareaAutosizeEmits = {
-  input: [event: InputEvent]
-}
-
-/**
- * Type describing available properties.
- *
- * Тип, описывающий доступные свойства.
- */
-export interface TextareaAutosizeExpose {
-  value: Ref<string>
-}
-
-/**
- * Type describing available slots.
- *
- * Тип, описывающий доступные слоты.
- */
-export interface TextareaAutosizeSlots {
-  // default? (props: any): any
-}
-
-/**
- * Type describing subclasses.
- *
- * Тип, описывающий подклассы.
- */
-export type TextareaAutosizeClasses = {
-  main: ConstrClass
-  // :classes [!] System label / Системная метка
-  clone: string
-  // :classes [!] System label / Системная метка
-}

package/src/constructors/Tooltip/Tooltip.ts

@@ -1,138 +0,0 @@
-import { onUnmounted, type Ref, type ToRefs } from 'vue'
-import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { LabelInclude } from '../../classes/LabelInclude'
-import { DescriptionInclude } from '../../classes/DescriptionInclude'
-
-import { ArrowInclude } from '../Arrow'
-
-import { TooltipClasses } from './TooltipClasses'
-import { TooltipStyle } from './TooltipStyle'
-import { TooltipStatus } from './TooltipStatus'
-import { TooltipPosition } from './TooltipPosition'
-import { TooltipOpen } from './TooltipOpen'
-import { TooltipEvent } from './TooltipEvent'
-
-import type { TooltipControl } from './basicTypes'
-import type { TooltipComponents, TooltipEmits, TooltipSlots } from './types'
-import type { TooltipProps } from './props'
-
-/**
- * Tooltip
- */
-export class Tooltip {
-  readonly classes: TooltipClasses
-  readonly style: TooltipStyle
-  readonly status: TooltipStatus
-  readonly position: TooltipPosition
-  readonly open: TooltipOpen
-  readonly event: TooltipEvent
-
-  readonly arrow: ArrowInclude
-  readonly label: LabelInclude
-  readonly description: DescriptionInclude
-
-  /** Data for the control slot/ Данные для слота управления */
-  readonly slotData: TooltipControl
-
-  /**
-   * 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/ функция вызывается, когда срабатывает событие
-   * @param TooltipClassesConstructor class for working with classes/ класс для работы с классами
-   * @param TooltipStyleConstructor class for working with styles/ класс для работы со стилями
-   * @param TooltipStatusConstructor class for working with status/ класс для работы со статусом
-   * @param TooltipPositionConstructor class for working with position/ класс для работы с позицией
-   * @param TooltipOpenConstructor class for working with open state/ класс для работы с состоянием открытия
-   * @param TooltipEventConstructor class for working with events/ класс для работы с событиями
-   * @param ArrowIncludeConstructor class for working with arrow/ класс для работы со стрелкой
-   * @param LabelIncludeConstructor class for working with label/ класс для работы с меткой
-   * @param DescriptionIncludeConstructor class for working with description/ класс для работы с описанием
-   */
-  constructor(
-    protected readonly props: TooltipProps,
-    protected readonly refs: ToRefs<TooltipProps>,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<TooltipComponents, TooltipProps>,
-    protected readonly slots?: TooltipSlots,
-    protected readonly emits?: ConstrEmit<TooltipEmits>,
-    protected readonly TooltipClassesConstructor: typeof TooltipClasses = TooltipClasses,
-    protected readonly TooltipStyleConstructor: typeof TooltipStyle = TooltipStyle,
-    protected readonly TooltipStatusConstructor: typeof TooltipStatus = TooltipStatus,
-    protected readonly TooltipPositionConstructor: typeof TooltipPosition = TooltipPosition,
-    protected readonly TooltipOpenConstructor: typeof TooltipOpen = TooltipOpen,
-    protected readonly TooltipEventConstructor: typeof TooltipEvent = TooltipEvent,
-    protected readonly ArrowIncludeConstructor: typeof ArrowInclude = ArrowInclude,
-    protected readonly LabelIncludeConstructor: typeof LabelInclude = LabelInclude,
-    protected readonly DescriptionIncludeConstructor: typeof DescriptionInclude = DescriptionInclude
-  ) {
-    this.classes = new TooltipClassesConstructor(this.className)
-    this.style = new TooltipStyleConstructor(this.element, this.className)
-    this.status = new TooltipStatusConstructor(this.props, this.slots)
-    this.position = new TooltipPositionConstructor(
-      this.props,
-      this.element,
-      this.classes,
-      this.style
-    )
-    this.open = new TooltipOpenConstructor(
-      this.props,
-      this.refs,
-      this.style,
-      this.status,
-      this.position
-    )
-    this.event = new TooltipEventConstructor(
-      this.classes,
-      this.style,
-      this.status,
-      this.open
-    )
-
-    this.arrow = new ArrowIncludeConstructor(
-      this.props,
-      this.className,
-      this.components,
-      this.classes.getSelectorControl()
-    )
-
-    this.label = new LabelIncludeConstructor(
-      this.props,
-      this.className,
-      undefined,
-      this.slots
-    )
-    this.description = new DescriptionIncludeConstructor(
-      this.props,
-      this.className,
-      this.slots
-    )
-
-    const binds = {
-      class: this.classes.getControl(),
-      onclick: this.event.onClick,
-      onmouseover: this.event.onMouseover,
-      onmouseout: this.event.onMouseout,
-      ...AriaStaticInclude.describedby(this.classes.getIdItem())
-    }
-
-    this.slotData = {
-      ...binds,
-      open: this.status.open,
-      binds
-    }
-
-    onUnmounted(() => {
-      this.open.eventStop()
-    })
-  }
-}

package/src/constructors/Tooltip/TooltipClasses.ts

@@ -1,90 +0,0 @@
-import { getElementId, isDomRuntime } from '@dxtmisha/functional'
-
-/**
- * Class for working with class names.
- *
- * Класс для работы с названиями классов.
- */
-export class TooltipClasses {
-  /**
-   * Identification of the current window. Used to search for the current component and its control/
-   * Идентификация текущего окна. Используется для поиска текущего компонента и его контроля
-   */
-  protected readonly id = `tooltip--${getElementId()}`
-  protected readonly idItem = `tooltip--${getElementId()}-item`
-
-  /**
-   * Constructor
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly className: string
-  ) {
-  }
-
-  /**
-   * Returns the identifier of the current window.
-   *
-   * Возвращает идентификатор текущего окна.
-   */
-  getId(): string {
-    return this.id
-  }
-
-  /**
-   * Returns the identifier of the current item.
-   *
-   * Возвращает идентификатор текущего элемента.
-   */
-  getIdItem(): string {
-    return this.idItem
-  }
-
-  /**
-   * Returns a class for control.
-   *
-   * Возвращает класс для контроля.
-   */
-  getClassControl(): string {
-    return `${this.className}__control`
-  }
-
-  /**
-   * Returns a class for control.
-   *
-   * Возвращает класс для контроля.
-   */
-  getControl(): string {
-    return `${this.getClassControl()} ${this.getId()}`
-  }
-
-  /**
-   * Returns the class selector for control.
-   *
-   * Возвращает селектор класса для управления.
-   */
-  getSelectorControl(): string {
-    return `.${this.getClassControl()}.${this.id}`
-  }
-
-  /**
-   * Finds the control element.
-   *
-   * Находит элемент управления.
-   */
-  findControl(): HTMLElement | undefined {
-    if (isDomRuntime()) {
-      return document.querySelector<HTMLElement>(this.getSelectorControl()) ?? undefined
-    }
-  }
-
-  /**
-   * Finds the control element among its descendants.
-   *
-   * Находит элемент управления среди его потомков.
-   * @param target selected element/ выбранный элемент
-   */
-  findControlByTarget(target: HTMLElement): HTMLElement | undefined {
-    return target.closest<HTMLElement>(this.getSelectorControl()) ?? undefined
-  }
-}

package/src/constructors/Tooltip/TooltipDesign.tsx

@@ -1,198 +0,0 @@
-import { h, Teleport, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { Tooltip } from './Tooltip'
-
-import {
-  type TooltipPropsBasic
-} from './props'
-import {
-  type TooltipClasses,
-  type TooltipComponents,
-  type TooltipEmits,
-  type TooltipExpose,
-  type TooltipSlots
-} from './types'
-
-/**
- * TooltipDesign
- */
-export class TooltipDesign<
-  COMP extends TooltipComponents,
-  EXPOSE extends TooltipExpose,
-  CLASSES extends TooltipClasses,
-  P extends TooltipPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    TooltipEmits,
-    EXPOSE,
-    TooltipSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Tooltip
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   * @param ItemConstructor tooltip item class/ класс элемента тултипа
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, TooltipEmits, P>,
-    ItemConstructor: typeof Tooltip = Tooltip
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new ItemConstructor(
-      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 {
-      toggle: this.item.open.toggle
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: {},
-      ...{
-        // :classes [!] System label / Системная метка
-        label: this.getSubClass('label'),
-        description: this.getSubClass('description'),
-        body: this.getSubClass('body')
-        // :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.renderControl(),
-      ...this.renderTooltip()
-    ]
-  }
-
-  /**
-   * Rendering of the control slot.
-   *
-   * Рендеринг слота управления.
-   */
-  protected readonly renderControl = (): VNode[] => {
-    return [
-      this.initSlot('control', undefined, this.item.slotData) as VNode
-    ]
-  }
-
-  /**
-   * Rendering of the tooltip.
-   *
-   * Рендеринг тултипа.
-   */
-  protected readonly renderTooltip = (): VNode[] => {
-    if (this.item.status.isShow.value) {
-      const children: any[] = [
-        ...this.item.label.render(),
-        ...this.item.description.render(),
-        ...this.renderBody()
-      ]
-
-      if (this.item.status.isArray.value) {
-        children.push(
-          ...this.item.arrow.render()
-        )
-      }
-
-      return [
-        h(
-          Teleport,
-          {
-            key: 'teleport',
-            to: 'body'
-          },
-          h(
-            'div',
-            {
-              ref: this.element,
-              id: this.item.classes.getIdItem(),
-              class: this.classes?.value.main,
-              onMouseover: this.item.event.onMouseoverTooltip,
-              onMouseout: this.item.event.onMouseout,
-              onTransitionend: this.item.event.onTransitionend,
-              ...AriaStaticInclude.role('tooltip')
-            },
-            children
-          )
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Rendering of the body slot.
-   *
-   * Рендеринг слота тела.
-   */
-  protected readonly renderBody = (): VNode[] => {
-    if (
-      this.slots
-      && 'body' in this.slots
-    ) {
-      return [
-        this.initSlot('body') as VNode
-      ]
-    }
-
-    return []
-  }
-}