@dxtmisha/constructor 0.23.0

package/src/constructors/Window/WindowEvent.ts

@@ -0,0 +1,157 @@
+import { watch } from 'vue'
+import { EventItem, getMouseClientX, getMouseClientY } from '@dxtmisha/functional'
+
+import { WindowStatus } from './WindowStatus'
+import { WindowClient } from './WindowClient'
+import { WindowFlash } from './WindowFlash'
+import { WindowOpen } from './WindowOpen'
+import { WindowVerification } from './WindowVerification'
+
+import type { WindowProps } from './props'
+
+/**
+ * A class for working with events.
+ *
+ * Класс для работы с событиями.
+ */
+export class WindowEvent {
+  protected readonly event: EventItem<HTMLBodyElement, MouseEvent>
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param status object for working with statuses/ объект для работы со статусами
+   * @param client object for working with mouse pointer coordinates/ объект для работы с координатами указателя мыши
+   * @param flash class object for working with fast window opening/ объект класса для работы с быстрым открытием окна
+   * @param open the class object for working with the status of closing or opening the window/ объект класса для работы со статусом закрытия или открытия окна
+   * @param verification an object for working with the check for changing the status of opening or closing/ объект для работы с проверкой изменения статуса открытия или закрытия
+   */
+  constructor(
+    protected readonly props: WindowProps,
+    protected readonly status: WindowStatus,
+    protected readonly client: WindowClient,
+    protected readonly flash: WindowFlash,
+    protected readonly open: WindowOpen,
+    protected readonly verification: WindowVerification
+  ) {
+    this.event = new EventItem<HTMLBodyElement, MouseEvent>(
+      'body',
+      ['click', 'contextmenu'],
+      this.onGlobal
+    )
+
+    watch(
+      [
+        this.open.item,
+        this.status.item
+      ],
+      () => this.toggle()
+    )
+  }
+
+  /**
+   * Events of pressing a control element.
+   *
+   * События нажатия на элемент управления.
+   * @param event event object/ объект события
+   */
+  readonly onClick = async (event: MouseEvent & TouchEvent): Promise<void> => {
+    if (!this.props.contextmenu) {
+      await this.on(event)
+    }
+  }
+
+  /**
+   * Events of pressing the right mouse button on a control element.
+   *
+   * События нажатия на правую кнопку мыши на элемент управления.
+   * @param event event object/ объект события
+   */
+  readonly onContextmenu = async (event: MouseEvent & TouchEvent): Promise<void> => {
+    if (this.props.contextmenu) {
+      event.preventDefault()
+      await this.on(event)
+    }
+  }
+
+  /**
+   * Event of animation end when closing the window.
+   *
+   * Событие окончания анимации при закрытии окна.
+   */
+  readonly onTransition = (): void => this.open.closeForEvent()
+
+  /**
+   * Starts listening to global events.
+   *
+   * Стартует прослушивание глобальных событий.
+   */
+  start(): this {
+    this.event.start()
+    return this
+  }
+
+  /**
+   * Stop the global event.
+   *
+   * Остановить глобальное событие.
+   */
+  stop(): this {
+    this.event.stop()
+    return this
+  }
+
+  /**
+   * Changes the event listening status depending on the window's open status.
+   *
+   * Изменяет статус прослушивания события в зависимости от статуса открытия окна.
+   */
+  toggle(): this {
+    if (
+      this.open.item.value
+      && this.status.isOpen()
+    ) {
+      this.start()
+    } else {
+      this.stop()
+    }
+
+    return this
+  }
+
+  /**
+   * Event activation.
+   *
+   * Активация события.
+   * @param event event object/ объект события
+   */
+  protected async on(event: MouseEvent & TouchEvent): Promise<void> {
+    this.client.set(
+      getMouseClientX(event),
+      getMouseClientY(event)
+    )
+
+    await this.verification.update(event.target as HTMLElement)
+  }
+
+  /**
+   * Callback of the event when pressing any area for checking and changing the opening state.
+   *
+   * Callback события при нажатии на любую область для проверки и изменения состояния открытия.
+   * @param event event instance/ экземпляр события
+   */
+  protected readonly onGlobal = async (event?: Event): Promise<void> => {
+    if (
+      !event
+      || (event.type === 'click' && (!this.props.contextmenu || this.open.item.value))
+      || (event.type === 'contextmenu' && this.props.contextmenu)
+    ) {
+      if (this.open.item.value) {
+        this.flash.setControl(event?.target as HTMLElement)
+        await this.verification.update(event?.target as HTMLElement)
+      } else {
+        this.event.stop()
+      }
+    }
+  }
+}

package/src/constructors/Window/WindowFlash.ts

@@ -0,0 +1,70 @@
+import { WindowClasses } from './WindowClasses'
+
+import type { WindowProps } from './props'
+import { WindowStatusItem } from './basicTypes'
+
+/**
+ * The class for working with the flash parameter. The flash property is
+ * responsible for disabling the animation when opening the window. Also,
+ * the animation is disabled when there are already open windows.
+ *
+ * Класс для работы с параметром flash. Свойство flash отвечает за отключение
+ * анимации при открытии окна. А также отключается анимация, когда уже есть
+ * открытые окна.
+ */
+export class WindowFlash {
+  protected control: boolean = false
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param classes an object for working with classes and searching for elements/ объект для работы с классами и поиском элементов
+   */
+
+  constructor(
+    protected readonly props: WindowProps,
+    protected readonly classes: WindowClasses
+  ) {
+  }
+
+  /**
+   * Is the flash property active.
+   *
+   * Активно ли свойство flash.
+   */
+  is(): boolean {
+    return Boolean(this.props.flash)
+  }
+
+  /**
+   * Checks whether the animation needs to be disabled.
+   *
+   * Проверяет, надо ли отключить анимацию.
+   */
+  isOpen(): boolean {
+    return this.is() || this.control
+  }
+
+  /**
+   * Checks whether the animation needs to be disabled when closing.
+   *
+   * Проверяет, надо ли отключить анимацию при закрытии.
+   */
+  isClose(): boolean {
+    return this.is()
+      || Boolean(
+        document.querySelector(`.${this.classes.getClassStatus(WindowStatusItem.hide)}`)
+      )
+  }
+
+  /**
+   * Change the value of the control parameter.
+   *
+   * Изменить значение параметра control.
+   * @param target the element that gets focus on click/ элемент, который получает фокус при клике
+   */
+  setControl(target?: HTMLElement): this {
+    this.control = target?.closest<HTMLElement>(`.${this.classes.list.control}`)?.dataset.window === this.classes.getId()
+    return this
+  }
+}

package/src/constructors/Window/WindowHook.ts

@@ -0,0 +1,110 @@
+import { executePromise } from '@dxtmisha/functional'
+
+import type { WindowProps } from './props'
+
+/**
+ * A class for working with hooks when opening and closing a window.
+ *
+ * Класс для работы с хуками при открытии и закрытии окна.
+ */
+export class WindowHook {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: WindowProps
+  ) {
+  }
+
+  /**
+   * Hook for preparing elements before opening/closing.
+   *
+   * Хук для подготовки элементов перед открытием/закрытием.
+   */
+  async preparation(): Promise<void> {
+    if (this.props.preparation) {
+      await executePromise(this.props.preparation)
+    }
+  }
+
+  /**
+   * Hook before opening/closing.
+   *
+   * Хук перед открытием/закрытием.
+   * @param open current state of the window/ текущее состояние окна
+   */
+  async before(open: boolean) {
+    if (open) {
+      return await this.beforeOpening()
+    }
+
+    return await this.beforeClosing()
+  }
+
+  /**
+   * Hook before opening.
+   *
+   * Хук перед открытием.
+   */
+  async beforeOpening(): Promise<boolean> {
+    if (this.props.beforeOpening) {
+      return await executePromise(this.props.beforeOpening)
+    }
+
+    return true
+  }
+
+  /**
+   * Hook before closing.
+   *
+   * Хук перед закрытием.
+   */
+  async beforeClosing(): Promise<boolean> {
+    if (this.props.beforeClosing) {
+      return await executePromise(this.props.beforeClosing)
+    }
+
+    return true
+  }
+
+  /**
+   * Hook after opening/closing.
+   *
+   * Хук после открытия/закрытия.
+   * @param open current state of the window/ текущее состояние окна
+   */
+  async after(open: boolean): Promise<boolean> {
+    if (open) {
+      return await this.opening()
+    }
+
+    return await this.closing()
+  }
+
+  /**
+   * Hook after opening.
+   *
+   * Хук после открытия.
+   */
+  async opening(): Promise<boolean> {
+    if (this.props.opening) {
+      return await executePromise(this.props.opening)
+    }
+
+    return false
+  }
+
+  /**
+   * Hook after closing.
+   *
+   * Хук после закрытия.
+   */
+  async closing(): Promise<boolean> {
+    if (this.props.closing) {
+      return await executePromise(this.props.closing)
+    }
+
+    return false
+  }
+}

package/src/constructors/Window/WindowInclude.ts

@@ -0,0 +1,134 @@
+import { computed, ref, type VNode } from 'vue'
+import {
+  type ConstrBind, type ConstrEmit,
+  DesignComponents,
+  getRef,
+  type RefOrNormal,
+  toBind
+} from '@dxtmisha/functional'
+
+import type { WindowProps } from './props'
+import type { WindowExpose, WindowSlots } from './types'
+import type {
+  WindowComponentInclude,
+  WindowEmitOptions,
+  WindowEmitsInclude, WindowExposeInclude,
+  WindowPropsInclude
+} from './basicTypes'
+
+/**
+ * The class returns data for working with the Window component
+ *
+ * Класс возвращает данные для работы с компонентом Window
+ */
+export class WindowInclude<
+  Props extends WindowPropsInclude = WindowPropsInclude,
+  PropsExtra extends ConstrBind<WindowProps> = ConstrBind<WindowProps>
+> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<WindowComponentInclude, Props>,
+    protected readonly emits?: ConstrEmit<WindowEmitsInclude>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /** Reference to window element expose/ Ссылка на expose элемента окна */
+  readonly element = ref<ConstrBind<WindowExpose> | undefined>()
+
+  /** Computed bindings for the window/ Вычисляемые привязки для окна */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBind<PropsExtra>(
+      getRef(this.extra) ?? {},
+      this.props.windowAttrs ?? {}
+    )
+
+    return {
+      ...props,
+
+      disabled: this.props.disabled,
+      autoClose: this.props.autoClose,
+
+      preparation: this.getPreparation,
+      opening: this.getOpening,
+      closing: this.getClosing
+    }
+  })
+
+  /**
+   * Expose helpers for window state and actions/
+   * Вспомогательные методы expose для состояния и действий окна
+   */
+  readonly expose: WindowExposeInclude = {
+    id: computed(() => String(this.element.value?.id)),
+    open: computed(() => Boolean(this.element.value?.open)),
+    control: computed(() => this.element.value?.control),
+    setOpen: async (open: boolean) => this.element.value?.setOpen(open),
+    toOpen: async () => this.element.value?.toOpen(),
+    toClose: async () => this.element.value?.toClose(),
+    toggle: async () => this.element.value?.toggle(),
+
+    windowElement: this.element
+  }
+
+  /**
+   * Render the Window component with slots/
+   * Рендер компонента Window со слотами
+   * @param slotsChildren slots passed to the window/ слоты, передаваемые окну
+   * @param attrs additional attributes/ дополнительные атрибуты
+   */
+  readonly render = (
+    slotsChildren: WindowSlots,
+    attrs?: Record<string, any>
+  ): VNode[] => {
+    if (this.components) {
+      return this.components.render(
+        'window',
+        {
+          ...toBind(
+            attrs ?? {},
+            this.binds.value
+          ),
+          ref: this.element,
+          onWindow: this.onWindow
+        },
+        slotsChildren as unknown as Record<string, any>,
+        this.index
+      )
+    }
+
+    return []
+  }
+
+  /** Returns preparation result/ Возвращает результат preparation */
+  protected readonly getPreparation = () =>
+    getRef(this.extra)?.preparation?.() ?? this.props.windowAttrs?.preparation?.()
+
+  /** Returns opening result/ Возвращает результат opening */
+  protected readonly getOpening = () =>
+    getRef(this.extra)?.opening?.() ?? this.props.windowAttrs?.opening?.() ?? true
+
+  /** Returns closing result/ Возвращает результат closing */
+  protected readonly getClosing = () =>
+    getRef(this.extra)?.closing?.() ?? this.props.windowAttrs?.closing?.() ?? true
+
+  /**
+   * Emits 'window' event upward/
+   * Поднимает событие 'window' наверх
+   * @param options event payload/ параметры события
+   */
+  protected readonly onWindow = (options: WindowEmitOptions) => {
+    this.emits?.('window', options)
+  }
+}