@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Tooltip/TooltipStatus.ts

@@ -0,0 +1,97 @@
+import { computed, ref } from 'vue'
+
+import type { TooltipSlots } from './types'
+import type { TooltipProps } from './props'
+
+/**
+ * Class for working with display statuses.
+ *
+ * Класс для работы со статусами отображения.
+ */
+export class TooltipStatus {
+  readonly open = ref(false)
+  readonly show = ref(false)
+  readonly preparation = ref(false)
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param slots object for working with slots/ объект для работы со слотами
+   */
+  constructor(
+    protected readonly props: Readonly<TooltipProps>,
+    protected readonly slots?: TooltipSlots
+  ) {
+  }
+
+  /**
+   * Checks if there is text to display.
+   *
+   * Проверяет, есть ли текст для отображения.
+   */
+  readonly isText = computed<boolean>(() =>
+    !this.props.disabled
+    && Boolean(
+      this.props.label
+      || this.props.description
+      || (
+        this.slots
+        && (
+          'default' in this.slots
+          || 'description' in this.slots
+          || 'body' in this.slots
+        )
+      )
+    )
+  )
+
+  /** Checks if the element needs to be displayed/ Проверяет, нужно ли отображать элемент */
+  readonly isShow = computed<boolean>(
+    () => Boolean(this.show.value || this.open.value || this.props.inDom) && this.isText.value
+  )
+
+  /** Checks if the content is an array/ Проверяет, является ли содержимое массивом */
+  readonly isArray = computed<boolean>(
+    () => Boolean(this.props.arrowShow && this.preparation.value)
+  )
+
+  /**
+   * Checks if the current status matches the selected one.
+   *
+   * Проверяет, соответствует ли текущий статус выбранному.
+   * @param open the value of the current state/ значение текущего состояния
+   */
+  isMatch(open: boolean): boolean {
+    return this.open.value === open
+  }
+
+  /**
+   * Changes the open state.
+   *
+   * Изменяет состояние открытия.
+   * @param open the value of the current state/ значение текущего состояния
+   */
+  setOpen(open: boolean) {
+    this.open.value = open
+  }
+
+  /**
+   * Changes the display state.
+   *
+   * Изменяет состояние показа.
+   * @param show the value of the current state/ значение текущего состояния
+   */
+  setShow(show: boolean) {
+    this.show.value = show
+  }
+
+  /**
+   * Changes the preparation status.
+   *
+   * Изменяет статус подготовки.
+   * @param preparation the value of the current state/ значение текущего состояния
+   */
+  setPreparation(preparation: boolean) {
+    this.preparation.value = preparation
+  }
+}

package/src/constructors/Tooltip/TooltipStyle.ts

@@ -0,0 +1,123 @@
+import { type Ref } from 'vue'
+
+/**
+ * Style management class.
+ *
+ * Класс управления стилями.
+ */
+export class TooltipStyle {
+  /**
+   * Constructor
+   * @param element instance of the element itself/ экземпляр самого элемента
+   * @param className class name/ название класса
+   */
+  constructor(
+    protected readonly element: Ref<HTMLDivElement | undefined>,
+    protected readonly className: string
+  ) {
+  }
+
+  /**
+   * Changing styles.
+   *
+   * Изменение стилей.
+   * @param top should the element be placed on top/ нужно ли поместить элемент сверху
+   * @param x value of X/ значение X
+   * @param y value of Y/ значение Y
+   * @param shift value for shift/ значение для сдвига
+   */
+  set(
+    top: boolean,
+    x: number,
+    y: number,
+    shift: number
+  ) {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.toggle(`${this.className}--top`, top)
+      element.style.setProperty(`--${this.className}-sys-x`, `${x}px`)
+      element.style.setProperty(`--${this.className}-sys-y`, `${y}px`)
+      element.style.setProperty(`--${this.className}-sys-shift`, `${shift}px`)
+    }
+  }
+
+  /**
+   * Changes the preparation status.
+   *
+   * Изменяет статус подготовки.
+   * @param status the value of the current state/ значение текущего состояния
+   */
+  setPreparation(status: boolean) {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.toggle(`${this.className}--preparation`, status)
+    }
+  }
+
+  /**
+   * Changes the preparation status.
+   *
+   * Изменяет статус подготовки.
+   * @param status the value of the current state/ значение текущего состояния
+   */
+  setShow(status: boolean) {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.toggle(`${this.className}--show`, status)
+
+      if (!status) {
+        this.setMove(status)
+      }
+    }
+  }
+
+  /**
+   * Changes the move status.
+   *
+   * Изменяет статус перемещения.
+   * @param status the value of the current state/ значение текущего состояния
+   */
+  setMove(status: boolean) {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.toggle(`${this.className}--move`, status)
+    }
+  }
+
+  /**
+   * Reset all records to the initial state.
+   *
+   * Сброс всех записей до начального состояния.
+   */
+  reset() {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.remove(`${this.className}--top`)
+      element.classList.remove(`${this.className}--preparation`)
+      element.classList.remove(`${this.className}--show`)
+
+      element.style.removeProperty(`--${this.className}-sys-x`)
+      element.style.removeProperty(`--${this.className}-sys-y`)
+      element.style.removeProperty(`--${this.className}-sys-shift`)
+    }
+  }
+
+  /**
+   * Resets the display state.
+   *
+   * Сбрасывает состояние показа.
+   */
+  resetShow() {
+    const element = this.element.value
+
+    if (element) {
+      element.classList.remove(`${this.className}--preparation`)
+      element.classList.remove(`${this.className}--show`)
+    }
+  }
+}

package/src/constructors/Tooltip/basicTypes.ts

@@ -0,0 +1,39 @@
+import type { Ref } from 'vue'
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { AriaList } from '../../types/ariaTypes'
+import type { TooltipProps } from './props'
+
+export type TooltipControlBinds
+  = AriaList
+    & {
+      class: string
+      onclick: () => void
+      onmouseover: (event: MouseEvent) => void
+      onmouseout: (event: MouseEvent) => void
+    }
+export type TooltipControl
+  = TooltipControlBinds
+    & {
+      open: Ref<boolean>
+      binds: TooltipControlBinds
+    }
+
+/**
+ * Component map for including the Tooltip component/
+ * Карта компонентов для подключения компонента Tooltip
+ */
+export type TooltipComponentInclude = {
+  tooltip?: object
+}
+
+/**
+ * Props used to include and configure the Tooltip component/
+ * Свойства для подключения и настройки компонента Tooltip
+ */
+export interface TooltipPropsInclude<
+  Tooltip extends TooltipProps = TooltipProps
+> {
+  /** Additional attributes for Tooltip component/ Дополнительные атрибуты для компонента Tooltip */
+  tooltipAttrs?: ConstrBind<Tooltip>
+}

package/src/constructors/Tooltip/index.ts

@@ -0,0 +1,6 @@
+export * from './Tooltip'
+export * from './TooltipDesign'
+export * from './TooltipInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Tooltip/properties.json

@@ -0,0 +1,14 @@
+{
+  "arrowSize": {
+    "_type": "var"
+  },
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#label": {},
+  "#description": {},
+  "#body": {}
+}

package/src/constructors/Tooltip/props.ts

@@ -0,0 +1,49 @@
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+
+import type { ArrowProps, ArrowPropsInclude } from '../Arrow'
+
+interface TooltipPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface TooltipPropsBasic<
+  Arrow extends ArrowProps = ArrowProps
+> extends LabelProps,
+  DescriptionProps,
+  ArrowPropsInclude<Arrow> {
+  // Status
+  open?: boolean
+  disabled?: boolean
+
+  // Style
+  inDom?: boolean
+  top?: boolean
+  indent?: number
+  delay?: number
+  delayHide?: number
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface TooltipProps extends TooltipPropsBasic, TooltipPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsTooltip = {
+  indent: 4,
+  delay: 64,
+  delayHide: 0,
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Tooltip/style.scss

@@ -0,0 +1,43 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTooltip {
+  @include ui.initByCustom('origin', -50%);
+
+  position: fixed;
+  top: calc(#{ui.v('??sys.y', 0px)});
+  left: calc(#{ui.v('??sys.x', 0px)} + #{ui.v('??sys.shift', 0px)});
+
+  @include ui.flexY;
+  align-items: stretch;
+  opacity: 0;
+  pointer-events: none;
+
+  @include ui.paddingX(ui.v('??paddingX'));
+  padding-top: ui.v('??paddingY');
+  padding-bottom: ui.v('??paddingY');
+
+  transition: opacity ui.v('d.sys.transitionDuration.xs') linear;
+  transform-origin: calc(50% - #{ui.v('??sys.shift', 0px)}) #{ui.v('??origin')};
+
+  z-index: 999999;
+
+  &--top {
+    @include ui.initByCustom('origin', 150%);
+  }
+
+  &--preparation {
+    transform: scale(0.4);
+  }
+
+  &--show {
+    opacity: 1;
+
+    transform: none;
+    transition: opacity ui.v('d.sys.transitionDuration.xs') linear,
+    transform ui.v('d.sys.transitionDuration.sm') ui.v('d.sys.transitionFunction.deceleration');
+  }
+
+  &--move {
+    pointer-events: unset;
+  }
+}

package/src/constructors/Tooltip/types.ts

@@ -0,0 +1,58 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { LabelSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+
+import type { ArrowComponentInclude } from '../Arrow'
+
+import type { TooltipControl } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type TooltipComponents = ArrowComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type TooltipEmits = {
+  tooltip: [open: boolean]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface TooltipExpose {
+  toggle(open: boolean, flash?: boolean): Promise<void>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface TooltipSlots extends LabelSlots, DescriptionSlots {
+  control?(props: TooltipControl): any
+
+  body?(): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type TooltipClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  label: string
+  description: string
+  body: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Window/Window.ts

@@ -1,9 +1,12 @@
 import { computed, onMounted, onUnmounted, type Ref, type ToRefs, watch } from 'vue'
 import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { ScrollbarInclude } from '../Scrollbar/ScrollbarInclude'
 import { ImageInclude } from '../Image/ImageInclude'
 import { ModelInclude } from '../../classes/ModelInclude'
+import { TabIndexInclude } from '../../classes/TabIndexInclude'
+import { TextInclude } from '../../classes/TextInclude'
 
 import { WindowClient } from './WindowClient'
 import { WindowHook } from './WindowHook'
@@ -24,6 +27,8 @@ import { WindowStyles } from './WindowStyles'
 import { WindowOpen } from './WindowOpen'
 import { WindowVerification } from './WindowVerification'
 import { WindowEvent } from './WindowEvent'
+import { WindowEsc } from './WindowEsc'
+import { WindowHidden } from './WindowHidden'
 
 import type { WindowControlItem } from './basicTypes'
 import type { WindowComponents, WindowEmits, WindowSlots } from './types'
@@ -48,6 +53,7 @@ export class Window {
   readonly classes: WindowClasses
   /** Element manager for window DOM element/ Менеджер элементов для DOM элемента окна */
   readonly element: WindowElement
+  readonly tabIndex: TabIndexInclude
 
   /** Status manager for window state/ Менеджер статуса для состояния окна */
   readonly status: WindowStatus
@@ -80,8 +86,13 @@ export class Window {
   /** Image manager for window content/ Менеджер изображений для содержимого окна */
   readonly image: ImageInclude
 
-  /** Returns data for managing slot data/ Возвращает данные для управления данными слотами */
-  readonly slotData: WindowControlItem
+  /** Escape key manager for window closing/ Менеджер клавиши Escape для закрытия окна */
+  readonly esc: WindowEsc
+
+  readonly text: TextInclude
+
+  /** Hidden manager for hiding elements outside the window when open/ Менеджер скрытия элементов вне окна при открытии */
+  readonly hidden: WindowHidden
 
   /**
    * Constructor
@@ -104,11 +115,14 @@ export class Window {
     protected readonly slots?: WindowSlots,
     protected readonly emits?: ConstrEmit<WindowEmits>
   ) {
-    this.client = new WindowClient()
     this.hook = new WindowHook(props)
 
     this.classes = new WindowClasses(className)
     this.element = new WindowElement(this.classes, element)
+    this.client = new WindowClient(this.element)
+    this.tabIndex = new TabIndexInclude(
+      () => this.element.getBody()
+    )
 
     this.status = new WindowStatus(this.element)
     this.persistent = new WindowPersistent(props, this.classes, this.element)
@@ -131,6 +145,7 @@ export class Window {
       this.client,
       this.hook,
       this.element,
+      this.tabIndex,
       this.status,
       this.flash,
       this.coordinates,
@@ -168,19 +183,13 @@ export class Window {
       components,
       emits
     )
-
-    this.slotData = {
-      classesWindow: this.classes.list,
-      class: this.classes.list.controlId,
-      open: this.open.item,
-      onclick: this.event.onClick,
-      oncontextmenu: this.event.onContextmenu,
-      binds: {
-        class: this.classes.list.controlId,
-        onclick: this.event.onClick,
-        oncontextmenu: this.event.onContextmenu
-      }
-    }
+    this.esc = new WindowEsc(
+      this.open.item,
+      () => this.open.close(),
+      () => !this.props.persistent
+    )
+    this.text = new TextInclude(this.props)
+    this.hidden = new WindowHidden(this.classes, this.open)
 
     new ModelInclude<boolean>('open', this.emits, this.open.item)
 
@@ -190,6 +199,33 @@ export class Window {
     onUnmounted(this.stop)
   }
 
+  /** Checks if the role is a menu/ Проверяет, является ли роль меню */
+  isMenu(): boolean {
+    return this.props.role === 'menu'
+      || this.props.role === 'menuitemcheckbox'
+      || this.props.role === 'menuitemradio'
+  }
+
+  /** Returns data for managing slot data/ Возвращает данные для управления данными слотами */
+  readonly slotData = computed<WindowControlItem>(() => ({
+    classesWindow: this.classes.list,
+    class: this.classes.list.controlId,
+    open: this.open.item,
+    onclick: this.event.onClick,
+    oncontextmenu: this.event.onContextmenu,
+    binds: {
+      class: this.classes.list.controlId,
+      onclick: this.event.onClick,
+      oncontextmenu: this.event.onContextmenu,
+      ...AriaStaticInclude.control(
+        this.classes.getControlId(),
+        this.classes.getId(),
+        this.props.ariaHaspopup,
+        this.open.item.value
+      )
+    }
+  }))
+
   /**
    * Returns the list of available classes.
    *

package/src/constructors/Window/WindowClasses.ts

@@ -13,6 +13,7 @@ export class WindowClasses {
    * Идентификация текущего окна. Используется для поиска текущего компонента и его контроля.
    */
   protected readonly id = `window--${getElementId()}`
+  protected readonly controlId = `${this.id}-control`
 
   readonly list: WindowClassesList
 
@@ -39,6 +40,29 @@ export class WindowClasses {
     )
   }
 
+  /**
+   * Checks if the selected element is a window teleport.
+   *
+   * Проверяет, является ли выбранный элемент телепортом окна.
+   * @param target selected item/ выбранный элемент
+   */
+  isWindowTeleport(target?: HTMLElement): boolean {
+    return Boolean(
+      target
+      && target.classList.contains(`${this.className}__teleport`)
+    )
+  }
+
+  /**
+   * Checks if the selected element is a window or a window teleport.
+   *
+   * Проверяет, является ли выбранный элемент окном или телепортом окна.
+   * @param target selected item/ выбранный элемент
+   */
+  isWindowOrTeleport(target?: HTMLElement): boolean {
+    return this.isWindow(target) || this.isWindowTeleport(target)
+  }
+
   /**
    * Returns the identifier of the current window.
    *
@@ -48,6 +72,15 @@ export class WindowClasses {
     return this.id
   }
 
+  /**
+   * Returns the identifier of the control of the current window.
+   *
+   * Возвращает идентификатор контроля текущего окна.
+   */
+  getControlId(): string {
+    return this.controlId
+  }
+
   /**
    * Returns the full name of the class for the status.
    *

package/src/constructors/Window/WindowClient.ts

@@ -1,3 +1,5 @@
+import type { WindowElement } from './WindowElement'
+
 /**
  * Sentinel value for an "unset" client coordinate.
  * Used to distinguish the absence of data from a valid point (including 0,0).
@@ -20,6 +22,11 @@ export class WindowClient {
   protected x: number = WINDOW_NULL_VALUE
   protected y: number = WINDOW_NULL_VALUE
 
+  constructor(
+    protected readonly element: WindowElement
+  ) {
+  }
+
   /**
    * Checks if the button was pressed.
    *
@@ -29,6 +36,15 @@ export class WindowClient {
     return this.x !== WINDOW_NULL_VALUE && this.y !== WINDOW_NULL_VALUE
   }
 
+  /**
+   * Checks if the coordinates are at the origin (0,0).
+   *
+   * Проверяет, находятся ли координаты в начале координат (0,0).
+   */
+  isZero(): boolean {
+    return this.x === 0 && this.y === 0
+  }
+
   /**
    * Returns the X coordinate.
    *
@@ -90,4 +106,27 @@ export class WindowClient {
 
     return this
   }
+
+  /**
+   * The method updates the current position.
+   *
+   * Метод обновляет текущее положение.
+   */
+  update(): this {
+    if (
+      this.is()
+      && this.isZero()
+    ) {
+      const rect = this.element.getControlRect()
+
+      if (rect) {
+        this.set(
+          rect.left + (rect.width / 2),
+          rect.top + (rect.height / 2)
+        )
+      }
+    }
+
+    return this
+  }
 }