@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Window/WindowDesign.tsx

@@ -1,10 +1,11 @@
-import { h, Teleport, type VNode } from 'vue'
+import { computed, h, Teleport, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Window } from './Window'
 
 import {
@@ -124,7 +125,7 @@ export class WindowDesign<
   protected initRender(): VNode[] {
     const main: any[] = []
 
-    this.initSlot('control', main, this.item.slotData)
+    this.initSlot('control', main, this.item.slotData.value)
 
     if (this.item.open.inDom.value) {
       if (this.item.staticMode.item.value) {
@@ -161,14 +162,7 @@ export class WindowDesign<
   readonly renderMain = (): VNode => {
     return h(
       'div',
-      {
-        'key': 'main',
-        'ref': this.element,
-        'class': this.classes?.value.main,
-        'style': this.styles?.value,
-        'data-window': this.item.classes.getId(),
-        'onTransitionend': this.item.event.onTransition
-      },
+      this.propsMain.value,
       this.renderBody()
     )
   }
@@ -205,9 +199,9 @@ export class WindowDesign<
   readonly renderBodyGroup = (): VNode[] => {
     const children: any[] = []
 
-    this.initSlot('title', children, this.item.slotData)
+    this.initSlot('title', children, this.item.slotData.value)
     children.push(this.renderBodyContext())
-    this.initSlot('footer', children, this.item.slotData)
+    this.initSlot('footer', children, this.item.slotData.value)
 
     return [
       h('div', {
@@ -231,7 +225,7 @@ export class WindowDesign<
         'divider': this.props.divider,
         'data-window-body': '1'
       },
-      () => this.initSlot('default', undefined, this.item.slotData)
+      () => this.initSlot('default', undefined, this.item.slotData.value)
     )
   }
 
@@ -245,6 +239,7 @@ export class WindowDesign<
       return [h(
         'div',
         {
+          key: 'image',
           class: this.classes?.value.image
         },
         this.item.image.render()
@@ -264,15 +259,37 @@ export class WindowDesign<
       return this.components.render(
         'button',
         {
+          key: 'button-close',
           class: [
             this.classes?.value.close,
             this.item.classes.list.close
           ],
-          icon: this.props.iconClose
+          icon: this.props.iconClose,
+          ...AriaStaticInclude.label(this.item.text.close.value)
         }
       )
     }
 
     return []
   }
+
+  /**
+   * Props for the main element.
+   *
+   * Свойства для главного элемента.
+   */
+  protected readonly propsMain = computed(() => ({
+    'key': 'main',
+    'ref': this.element,
+    'class': this.classes?.value.main,
+    'style': this.styles?.value,
+    'data-window': this.item.classes.getId(),
+    'onTransitionend': this.item.event.onTransition,
+    ...AriaStaticInclude.role(this.props.role),
+    ...AriaStaticInclude.modal(
+      !this.item.isMenu(),
+      this.props.ariaLabelledby,
+      this.props.ariaDescribedby
+    )
+  }))
 }

package/src/constructors/Window/WindowEsc.ts

@@ -0,0 +1,114 @@
+import { type Ref, watch } from 'vue'
+import { EventItem, executeFunction, getRef, isDomRuntime, type RefOrNormal } from '@dxtmisha/functional'
+
+/**
+ * Class for handling Escape key press to close windows.
+ *
+ * Класс для обработки нажатия клавиши Escape для закрытия окон.
+ */
+export class WindowEsc {
+  /** Event handler instance/ Экземпляр обработчика событий */
+  protected event?: EventItem<HTMLElement, any>
+
+  /**
+   * Constructor
+   * @param open Reference to the open state/ Ссылка на состояние открытия
+   * @param on Optional callback function when Escape is pressed/ Необязательная функция обратного вызова при нажатии Escape
+   * @param active Reference to the active state/ Ссылка на состояние активности
+   */
+  constructor(
+    protected readonly open: Ref<boolean>,
+    protected readonly on?: () => void,
+    protected readonly active: RefOrNormal<boolean | (() => boolean)> = true
+  ) {
+    watch(
+      open,
+      (value) => {
+        if (executeFunction(getRef(this.active))) {
+          if (value) {
+            this.start()
+          } else {
+            this.stop()
+          }
+        }
+      }
+    )
+  }
+
+  /**
+   * Start listening for Escape key press.
+   *
+   * Начать прослушивание нажатия клавиши Escape.
+   */
+  start(): this {
+    this.make()
+    this.event?.start()
+
+    return this
+  }
+
+  /**
+   * Stop listening for Escape key press.
+   *
+   * Остановить прослушивание нажатия клавиши Escape.
+   */
+  stop(): this {
+    if (this.event) {
+      this.event.stop()
+      this.event = undefined
+    }
+
+    return this
+  }
+
+  /**
+   * Check if the pressed key is Escape.
+   *
+   * Проверяет, является ли нажатая клавиша Escape.
+   * @param event Keyboard event/ Событие клавиатуры
+   */
+  protected isEsc(event: KeyboardEvent): boolean {
+    return (
+      event.key === 'Escape'
+      || event.key === 'Esc'
+      || event.code === 'Escape'
+      || event.code === 'Esc'
+      || event.keyCode === 27
+    )
+  }
+
+  /**
+   * Event listener for keyboard events.
+   *
+   * Обработчик событий клавиатуры.
+   */
+  protected readonly listener = (event: KeyboardEvent): void => {
+    if (this.isEsc(event)) {
+      event.preventDefault()
+      event.stopPropagation()
+
+      if (this.on) {
+        this.on()
+      } else {
+        this.open.value = false
+      }
+
+      this.stop()
+    }
+  }
+
+  /**
+   * Create and initialize the event handler.
+   *
+   * Создать и инициализировать обработчик событий.
+   */
+  protected make(): void {
+    if (isDomRuntime() && !this.event) {
+      this.event = new EventItem<HTMLElement, any>(
+        document.body,
+        'keydown',
+        this.listener
+      )
+    }
+  }
+}

package/src/constructors/Window/WindowHidden.ts

@@ -0,0 +1,120 @@
+import { watch } from 'vue'
+import { isDomRuntime } from '@dxtmisha/functional'
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+
+import { WindowClasses } from './WindowClasses'
+
+import type { WindowOpen } from './WindowOpen'
+
+/**
+ * A class for managing the hiding of elements outside the window when it is open.
+ *
+ * Класс для управления скрытием элементов вне окна при его открытии.
+ */
+export class WindowHidden {
+  protected elements: HTMLElement[] = []
+
+  /**
+   * Constructor
+   * @param classes an object for working with class names / объект для работы с названиями классов
+   * @param open an object for working with the open state of the window / объект для работы с состоянием открытия окна
+   */
+  constructor(
+    protected classes: WindowClasses,
+    protected open: WindowOpen
+  ) {
+    watch(
+      this.open.item,
+      (newValue: boolean) => {
+        if (newValue) {
+          this.toHidden()
+        } else {
+          this.toShow()
+        }
+      },
+      {
+        immediate: true
+      }
+    )
+  }
+
+  /**
+   * Returns the aria attribute data for hiding elements.
+   *
+   * Возвращает данные aria-атрибута для скрытия элементов.
+   */
+  protected getAriaData() {
+    const ariaHidden = AriaStaticInclude.hidden()
+    const ariaKey: any = Object.keys(ariaHidden)[0]
+    const ariaValue: any = Object.values(ariaHidden)[0]
+
+    return {
+      key: ariaKey,
+      value: ariaValue
+    }
+  }
+
+  /**
+   * Finds all elements outside the window that need to be hidden.
+   *
+   * Находит все элементы вне окна, которые нужно скрыть.
+   */
+  protected findElements(): NodeListOf<HTMLElement> | undefined {
+    if (isDomRuntime()) {
+      const id = this.classes.getId()
+      return document.querySelectorAll<HTMLElement>(
+        `body > *:not([data-window-teleport="${id}"]):not(.${id}):not(script):not(style)`
+      )
+    }
+
+    return undefined
+  }
+
+  /**
+   * Hides elements outside the window by adding aria-hidden attribute.
+   *
+   * Скрывает элементы вне окна, добавляя атрибут aria-hidden.
+   */
+  protected toHidden(): void {
+    const elements = this.findElements()
+
+    if (elements) {
+      const aria = this.getAriaData()
+
+      this.elements = []
+      elements.forEach((element: HTMLElement) => {
+        if (
+          element.hasAttribute(aria.key)
+          || element.hasAttribute('inert')
+        ) {
+          return
+        }
+
+        element.setAttribute(aria.key, aria.value)
+
+        if (!this.classes.isWindowOrTeleport(element)) {
+          element.setAttribute('inert', '')
+        }
+
+        this.elements.push(element)
+      })
+    } else {
+      this.elements = []
+    }
+  }
+
+  /**
+   * Shows previously hidden elements by removing aria-hidden attribute.
+   *
+   * Показывает ранее скрытые элементы, удаляя атрибут aria-hidden.
+   */
+  protected toShow(): void {
+    const aria = this.getAriaData()
+    this.elements
+      .forEach((element: HTMLElement) => {
+        element.removeAttribute(aria.key)
+        element.removeAttribute('inert')
+      })
+    this.elements = []
+  }
+}

package/src/constructors/Window/WindowInclude.ts

@@ -72,8 +72,8 @@ export class WindowInclude<
    */
   readonly expose: WindowExposeInclude = {
     id: computed(() => String(this.element.value?.id)),
-    open: computed(() => Boolean(this.element.value?.open)),
-    control: computed(() => this.element.value?.control),
+    open: computed(() => Boolean(this.element.value?.open.value)),
+    control: computed(() => this.element.value?.control.value),
     setOpen: async (open: boolean) => this.element.value?.setOpen(open),
     toOpen: async () => this.element.value?.toOpen(),
     toClose: async () => this.element.value?.toClose(),

package/src/constructors/Window/WindowOpen.ts

@@ -1,6 +1,8 @@
 import { computed, ref } from 'vue'
 import { frame } from '@dxtmisha/functional'
 
+import { TabIndexInclude } from '../../classes/TabIndexInclude'
+
 import { WindowStatus } from './WindowStatus'
 import { WindowClient } from './WindowClient'
 import { WindowHook } from './WindowHook'
@@ -14,6 +16,7 @@ import { WindowOrigin } from './WindowOrigin'
 import { WindowEmit } from './WindowEmit'
 import { WindowStyles } from './WindowStyles'
 
+import { __WINDOW_TYPE_BODY_NAME } from './basicTypes'
 import type { WindowProps } from './props'
 
 /**
@@ -33,6 +36,7 @@ export class WindowOpen {
    * @param client object for working with mouse pointer coordinates/ объект для работы с координатами указателя мыши
    * @param hook object for working with hooks/ объект для работы с хуками
    * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   * @param tabIndex class object for working with tab indices/ объект класса для работы с табуляцией
    * @param status object for working with statuses/ объект для работы со статусами
    * @param flash class object for working with fast window opening/ объект класса для работы с быстрым открытием окна
    * @param coordinates object for working with coordinates/ объект для работы с координатами
@@ -46,6 +50,7 @@ export class WindowOpen {
     protected readonly client: WindowClient,
     protected readonly hook: WindowHook,
     protected readonly element: WindowElement,
+    protected readonly tabIndex: TabIndexInclude,
     protected readonly status: WindowStatus,
     protected readonly flash: WindowFlash,
     protected readonly coordinates: WindowCoordinates,
@@ -144,6 +149,7 @@ export class WindowOpen {
               requestAnimationFrame(() => {
                 this.hook.opening()
                 this.resetClicks()
+                this.tabIndex.goTo()
               })
               this.emit.on(this.item.value)
             })
@@ -160,6 +166,8 @@ export class WindowOpen {
             this.resetClicks()
           })
         }
+
+        this.tabIndex.reset()
       }
     }
   }
@@ -196,6 +204,7 @@ export class WindowOpen {
    */
   pressed(): this {
     this.clicks++
+    setTimeout(() => this.resetClicks(), 128)
     return this
   }
 
@@ -257,7 +266,7 @@ export class WindowOpen {
         const element = this.element.getMain()
 
         if (element) {
-          const isMenu = getComputedStyle(element).content === '"--MENU--"'
+          const isMenu = getComputedStyle(element).getPropertyValue(__WINDOW_TYPE_BODY_NAME) === '"--MENU--"'
 
           if (isMenu && this.position.update()) {
             this.styles.update()

package/src/constructors/Window/WindowOrigin.ts

@@ -2,6 +2,8 @@ import { WindowClient } from './WindowClient'
 import { WindowElement } from './WindowElement'
 import { WindowPosition } from './WindowPosition'
 
+import { __WINDOW_TYPE_BODY_NAME } from './basicTypes'
+
 /**
  * Class for defining the initial position for the animation.
  *
@@ -50,12 +52,14 @@ export class WindowOrigin {
   update(): this {
     const element = this.element.getMain()
 
+    this.client.update()
+
     if (!this.client.is()) {
       this.x = 0
       this.y = 0
     } else if (
       element
-      && getComputedStyle(element).content !== '"--MENU--"'
+      && getComputedStyle(element).getPropertyValue(__WINDOW_TYPE_BODY_NAME) !== '"--MENU--"'
     ) {
       const rect = this.element.getBodyRect()
 

package/src/constructors/Window/WindowStatic.ts

@@ -3,6 +3,7 @@ import { EventItem, setRef } from '@dxtmisha/functional'
 
 import { WindowElement } from './WindowElement'
 
+import { __WINDOW_TYPE_BODY_NAME } from './basicTypes'
 import type { WindowProps } from './props'
 
 /**
@@ -73,7 +74,8 @@ export class WindowStatic {
 
     return Boolean(
       element
-      && getComputedStyle(element).content === '"--STATIC--"'
+      && getComputedStyle(element)
+        .getPropertyValue(__WINDOW_TYPE_BODY_NAME) === '"--STATIC--"'
     )
   }
 

package/src/constructors/Window/WindowVerification.ts

@@ -1,4 +1,4 @@
-import { isDomRuntime, isFilled } from '@dxtmisha/functional'
+import { isDomRuntime } from '@dxtmisha/functional'
 
 import { WindowPersistent } from './WindowPersistent'
 import { WindowClasses } from './WindowClasses'
@@ -6,6 +6,7 @@ import { WindowElement } from './WindowElement'
 import { WindowStatic } from './WindowStatic'
 import { WindowOpen } from './WindowOpen'
 
+import { __WINDOW_TYPE_BODY_NAME } from './basicTypes'
 import type { WindowProps } from './props'
 
 /**
@@ -55,8 +56,6 @@ export class WindowVerification {
       return
     }
 
-    this.open.pressed()
-
     if (!this.isTargetInBody()) {
       return
     }
@@ -65,6 +64,8 @@ export class WindowVerification {
       return
     }
 
+    this.open.pressed()
+
     if (this.open.item.value) {
       if (
         this.isOpenOnly()
@@ -75,7 +76,7 @@ export class WindowVerification {
         await this.open
           .reset()
           .watchPosition()
-      } else if (!isFilled(this.focus)) {
+      } else if (!this.focus) {
         await this.open.toggle()
       } else if (!this.isFocus()) {
         if (this.isNotBlock()) {
@@ -267,7 +268,9 @@ export class WindowVerification {
   protected isMenu(element: HTMLElement | undefined = this.element.getMain()): boolean {
     if (element) {
       const style = getComputedStyle(element)
-      return style.content === '"--MENU--"' || style.content === '"--MENU-WINDOW--"'
+      const value = style.getPropertyValue(__WINDOW_TYPE_BODY_NAME)
+
+      return value === '"--MENU--"' || value === '"--MENU-WINDOW--"'
     }
 
     return false

package/src/constructors/Window/basicTypes.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ConstrBind } from '@dxtmisha/functional'
 
+import type { AriaList } from '../../types/ariaTypes'
 import type { WindowExpose } from './types'
 import type { WindowPropsBasic } from './props'
 
@@ -116,26 +117,29 @@ export type WindowControlBasic = {
  * Control item data for window management/
  * Данные элемента управления для управления окном
  */
-export type WindowControlItem = WindowControlBasic
-  & {
-    /** CSS class string/ Строка CSS класса */
-    class: string
-    /** Reactive open state/ Реактивное состояние открытия */
-    open: Ref<boolean>
-    /** Click event handler/ Обработчик события клика */
-    onclick: WindowEventClick
-    /** Context menu event handler/ Обработчик события контекстного меню */
-    oncontextmenu: WindowEventClick
-    /** Binding properties/ Свойства привязки */
-    binds: {
-      /** Binding class/ Класс привязки */
+export type WindowControlItem
+  = WindowControlBasic
+    & {
+      /** CSS class string/ Строка CSS класса */
       class: string
-      /** Click event handler for binding/ Обработчик события клика для привязки */
+      /** Reactive open state/ Реактивное состояние открытия */
+      open: Ref<boolean>
+      /** Click event handler/ Обработчик события клика */
       onclick: WindowEventClick
-      /** Context menu event handler for binding/ Обработчик события контекстного меню для привязки */
+      /** Context menu event handler/ Обработчик события контекстного меню */
       oncontextmenu: WindowEventClick
+      /** Binding properties/ Свойства привязки */
+      binds:
+        AriaList
+        & {
+        /** Binding class/ Класс привязки */
+          class: string
+          /** Click event handler for binding/ Обработчик события клика для привязки */
+          onclick: WindowEventClick
+          /** Context menu event handler for binding/ Обработчик события контекстного меню для привязки */
+          oncontextmenu: WindowEventClick
+        }
     }
-  }
 
 /**
  * Component map for including the Window component/
@@ -184,3 +188,9 @@ export interface WindowPropsInclude<
   /** Additional attributes for Window component/ Дополнительные атрибуты для компонента Window */
   windowAttrs?: ConstrBind<Window>
 }
+
+/**
+ * CSS variable name for MotionTransform body type/
+ * Имя CSS‑переменной для типа тела MotionTransform
+ */
+export const __WINDOW_TYPE_BODY_NAME = '--sys-type-body'