@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/TextareaAutosize/TextareaAutosizeDesign.tsx

@@ -0,0 +1,147 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { TextareaAutosize } from './TextareaAutosize'
+
+import {
+  type TextareaAutosizePropsBasic
+} from './props'
+import {
+  type TextareaAutosizeClasses,
+  type TextareaAutosizeComponents,
+  type TextareaAutosizeEmits,
+  type TextareaAutosizeExpose,
+  type TextareaAutosizeSlots
+} from './types'
+
+/**
+ * TextareaAutosizeDesign
+ */
+export class TextareaAutosizeDesign<
+  COMP extends TextareaAutosizeComponents,
+  EXPOSE extends TextareaAutosizeExpose,
+  CLASSES extends TextareaAutosizeClasses,
+  P extends TextareaAutosizePropsBasic
+> extends DesignConstructorAbstract<
+    HTMLTextAreaElement,
+    COMP,
+    TextareaAutosizeEmits,
+    EXPOSE,
+    TextareaAutosizeSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: TextareaAutosize
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, TextareaAutosizeEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new TextareaAutosize(
+      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
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        clone: this.getSubClass('clone')
+        // :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.renderClone(),
+      this.renderTextarea()
+    ]
+  }
+
+  /**
+   * Renders a textarea element.
+   *
+   * Рендерит элемент textarea.
+   */
+  protected readonly renderTextarea = (): VNode => {
+    return h('textarea', {
+      ...this.getAttrs(),
+      ...this.props.inputAttrs,
+      ref: this.element,
+      value: this.item.value.item.value,
+      class: this.classes?.value.main,
+      onFocus: this.item.resize.on,
+      onInput: this.item.resize.onInput
+    })
+  }
+
+  /**
+   * Renders a clone element.
+   *
+   * Рендерит элемент-клон.
+   */
+  protected readonly renderClone = (): VNode => {
+    return h('div', {
+      ref: this.item.resize.clone,
+      class: this.classes?.value.clone
+    })
+  }
+}

package/src/constructors/TextareaAutosize/TextareaAutosizeResize.ts

@@ -0,0 +1,109 @@
+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

@@ -0,0 +1,69 @@
+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

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

package/src/constructors/TextareaAutosize/properties.json

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

package/src/constructors/TextareaAutosize/props.ts

@@ -0,0 +1,34 @@
+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/style.scss

@@ -0,0 +1,31 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTextareaAutosize {
+  display: block;
+  overflow: hidden;
+
+  max-width: 100%;
+
+  font: inherit;
+  line-height: inherit !important;
+  resize: none;
+
+  min-height: ui.v('?textarea.sys.height', ui.v('??minHeight')) !important;
+  field-sizing: content;
+
+  @supports not (field-sizing: content) {
+    --sys-field-sizing-none: '--YES--';
+    height: ui.v('?textarea.sys.height', ui.v('??minHeight'));
+  }
+
+  &__clone {
+    position: absolute;
+    visibility: hidden;
+
+    width: inherit;
+
+    font: inherit;
+    line-height: inherit;
+    white-space: pre-wrap;
+  }
+}

package/src/constructors/TextareaAutosize/types.ts

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,90 @@
+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
+  }
+}