@dxtmisha/constructor 0.23.0

package/src/constructors/Skeleton/types.ts

@@ -0,0 +1,46 @@
+import type { ComputedRef } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { SkeletonClassesList } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type SkeletonComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type SkeletonEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface SkeletonExpose {
+  isActive: ComputedRef<boolean>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface SkeletonSlots {
+  default?(props: SkeletonClassesList): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type SkeletonClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Window/Window.ts

@@ -0,0 +1,212 @@
+import { computed, onMounted, onUnmounted, type Ref, type ToRefs, watch } from 'vue'
+import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { ScrollbarInclude } from '../Scrollbar/ScrollbarInclude'
+import { ImageInclude } from '../Image/ImageInclude'
+import { ModelInclude } from '../../classes/ModelInclude'
+
+import { WindowClient } from './WindowClient'
+import { WindowHook } from './WindowHook'
+
+import { WindowClasses } from './WindowClasses'
+import { WindowElement } from './WindowElement'
+
+import { WindowStatus } from './WindowStatus'
+import { WindowPersistent } from './WindowPersistent'
+import { WindowFlash } from './WindowFlash'
+import { WindowCoordinates } from './WindowCoordinates'
+import { WindowPosition } from './WindowPosition'
+import { WindowOrigin } from './WindowOrigin'
+import { WindowStatic } from './WindowStatic'
+import { WindowEmit } from './WindowEmit'
+
+import { WindowStyles } from './WindowStyles'
+import { WindowOpen } from './WindowOpen'
+import { WindowVerification } from './WindowVerification'
+import { WindowEvent } from './WindowEvent'
+
+import type { WindowControlItem } from './basicTypes'
+import type { WindowComponents, WindowEmits, WindowSlots } from './types'
+import type { WindowPropsBasic } from './props'
+
+/**
+ * Main Window class that manages all window-related functionality including positioning,
+ * events, styles, animations, and component integrations. This class serves as the central
+ * coordinator for window operations in the design system.
+ *
+ * Основной класс Window, который управляет всей функциональностью окон, включая позиционирование,
+ * события, стили, анимации и интеграции компонентов. Этот класс служит центральным координатором
+ * для операций с окнами в дизайн-системе.
+ */
+export class Window {
+  /** Client instance for window management/ Экземпляр клиента для управления окном */
+  readonly client: WindowClient
+  /** Hook instance for window events/ Экземпляр хука для событий окна */
+  readonly hook: WindowHook
+
+  /** Class manager for window styles/ Менеджер классов для стилей окна */
+  readonly classes: WindowClasses
+  /** Element manager for window DOM element/ Менеджер элементов для DOM элемента окна */
+  readonly element: WindowElement
+
+  /** Status manager for window state/ Менеджер статуса для состояния окна */
+  readonly status: WindowStatus
+  /** Persistent manager for window data/ Менеджер постоянных данных для окна */
+  readonly persistent: WindowPersistent
+  /** Flash manager for window animations/ Менеджер анимаций для окна */
+  readonly flash: WindowFlash
+  /** Coordinates manager for window positioning/ Менеджер координат для позиционирования окна */
+  readonly coordinates: WindowCoordinates
+  /** Position manager for window placement/ Менеджер позиции для размещения окна */
+  readonly position: WindowPosition
+  /** Origin manager for window transformations/ Менеджер начальной точки для трансформаций окна */
+  readonly origin: WindowOrigin
+  /** Static mode manager for window behavior/ Менеджер статического режима для поведения окна */
+  readonly staticMode: WindowStatic
+  /** Emit manager for window events/ Менеджер событий для окна */
+  readonly emit: WindowEmit
+
+  /** Styles manager for window appearance/ Менеджер стилей для внешнего вида окна */
+  readonly styles: WindowStyles
+  /** Open manager for window visibility/ Менеджер открытия для видимости окна */
+  readonly open: WindowOpen
+  /** Verification manager for window state validation/ Менеджер проверки для валидации состояния окна */
+  readonly verification: WindowVerification
+  /** Event manager for window interactions/ Менеджер событий для взаимодействий с окном */
+  readonly event: WindowEvent
+
+  /** Scrollbar manager for window content/ Менеджер скроллбара для содержимого окна */
+  readonly scrollbar: ScrollbarInclude
+  /** Image manager for window content/ Менеджер изображений для содержимого окна */
+  readonly image: ImageInclude
+
+  /** Returns data for managing slot data/ Возвращает данные для управления данными слотами */
+  readonly slotData: WindowControlItem
+
+  /**
+   * 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/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: WindowPropsBasic,
+    protected readonly refs: ToRefs<WindowPropsBasic>,
+    element: Ref<HTMLDivElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<WindowComponents, WindowPropsBasic>,
+    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.status = new WindowStatus(this.element)
+    this.persistent = new WindowPersistent(props, this.classes, this.element)
+    this.flash = new WindowFlash(props, this.classes)
+    this.coordinates = new WindowCoordinates(this.classes, this.element)
+    this.position = new WindowPosition(props, this.client, this.element, this.coordinates)
+    this.origin = new WindowOrigin(this.client, this.element, this.position)
+    this.staticMode = new WindowStatic(props, refs, this.element)
+    this.emit = new WindowEmit(this.classes, this.element, emits)
+
+    this.styles = new WindowStyles(
+      this.element,
+      this.coordinates,
+      this.position,
+      this.origin,
+      className
+    )
+    this.open = new WindowOpen(
+      props,
+      this.client,
+      this.hook,
+      this.element,
+      this.status,
+      this.flash,
+      this.coordinates,
+      this.position,
+      this.origin,
+      this.emit,
+      this.styles
+    )
+
+    this.verification = new WindowVerification(
+      props,
+      this.persistent,
+      this.classes,
+      this.element,
+      this.staticMode,
+      this.open
+    )
+    this.event = new WindowEvent(
+      props,
+      this.status,
+      this.client,
+      this.flash,
+      this.open,
+      this.verification
+    )
+
+    this.scrollbar = new ScrollbarInclude(
+      props,
+      className,
+      components,
+      emits
+    )
+    this.image = new ImageInclude(
+      props,
+      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
+      }
+    }
+
+    new ModelInclude<boolean>('open', this.emits, this.open.item)
+
+    onMounted(() => {
+      watch([refs.open], () => this.open.set(props.open), { immediate: true })
+    })
+    onUnmounted(this.stop)
+  }
+
+  /**
+   * Returns the list of available classes.
+   *
+   * Возвращает список доступных классов.
+   */
+  readonly classesList = computed<ConstrClassObject>(() => ({
+    [this.classes.getId()]: true,
+    [`${this.className}--staticMode`]: this.staticMode.item.value
+  }))
+
+  /**
+   * Restores the data to its previous state.
+   *
+   * Восстанавливает данные в прежнее состояние.
+   */
+  protected readonly stop = (): void => {
+    this.event.stop()
+    this.staticMode.stop()
+  }
+}

package/src/constructors/Window/WindowClasses.ts

@@ -0,0 +1,180 @@
+import { domQuerySelector, getElementId } from '@dxtmisha/functional'
+import { type WindowClassesList, WindowStatusControlItem, WindowStatusItem } from './basicTypes'
+
+/**
+ * Class for working with class names.
+ *
+ * Класс для работы с названиями классов.
+ */
+export class WindowClasses {
+  /**
+   * Identification of the current window. Used to search for the current component and its control.
+   *
+   * Идентификация текущего окна. Используется для поиска текущего компонента и его контроля.
+   */
+  protected readonly id = `window--${getElementId()}`
+
+  readonly list: WindowClassesList
+
+  /**
+   * Constructor
+   * @param className class name/ название класса
+   */
+  constructor(
+    protected readonly className: string
+  ) {
+    this.list = WindowClasses.getClassesList(className, this.id)
+  }
+
+  /**
+   * Checks if the selected element is a window.
+   *
+   * Проверяет, является ли выбранный элемент окном.
+   * @param target selected item/ выбранный элемент
+   */
+  isWindow(target?: HTMLElement): boolean {
+    return Boolean(
+      target
+      && target.classList.contains(this.className)
+    )
+  }
+
+  /**
+   * Returns the identifier of the current window.
+   *
+   * Возвращает идентификатор текущего окна.
+   */
+  getId(): string {
+    return this.id
+  }
+
+  /**
+   * Returns the full name of the class for the status.
+   *
+   * Возвращает полное название класса для статуса.
+   * @param status названия статуса
+   */
+  getClassStatus(status: WindowStatusItem): string {
+    return `${this.className}[data-status="${status}"]`
+  }
+
+  /**
+   * Returns the class selector for control.
+   *
+   * Возвращает селектор класса для управления.
+   */
+  getSelectorControl(): string {
+    return `.${this.list.control}.${this.id}`
+  }
+
+  /**
+   * Search and return the window element at the selected item.
+   *
+   * Поиск и возврат элемента окна у выбранного элемента.
+   * @param target selected item/ выбранный элемент
+   */
+  findMain<T extends HTMLElement>(target: HTMLElement): T | undefined {
+    return target?.closest<T>(`.${this.className}`) ?? undefined
+  }
+
+  /**
+   * Search and return of the control element of the current component.
+   *
+   * Поиск и возврат элемента управления текущего компонента.
+   */
+  findControl(): HTMLElement | undefined {
+    return domQuerySelector<HTMLElement>(`.${this.list.control}.${this.id}`)
+  }
+
+  /**
+   * Find the control at the selected window.
+   *
+   * Найди элемент управления у выбранного окна.
+   * @param element window element/ элемент окна
+   */
+  findControlByElement(element?: HTMLElement): HTMLElement | undefined {
+    if (element) {
+      return domQuerySelector<HTMLElement>(`.${this.list.control}.${element.dataset?.window}`)
+    }
+
+    return undefined
+  }
+
+  /**
+   * Search and return of the window body element for the current component.
+   *
+   * Поиск и возврат элемента тела окна для текущего компонента.
+   */
+  findBody(): HTMLDivElement | undefined {
+    return domQuerySelector<HTMLDivElement>(`.${this.className}.${this.id} .${this.className}__body`)
+  }
+
+  /**
+   * Search and return of the context body element of the window for the current component.
+   *
+   * Поиск и возврат элемента контекста тела окна для текущего компонента.
+   */
+  findBodyContext(): HTMLDivElement | undefined {
+    return domQuerySelector<HTMLDivElement>(`.${this.className}.${this.id} .${this.className}__body__context`)
+  }
+
+  /**
+   * Search and return of the window body element for other components (not current)
+   * with additional selectors.
+   *
+   * Поиск и возврат элемента тела окна для других компонентов (не текущего)
+   * с дополнительными селекторами.
+   * @param selectors additional CSS selectors/ дополнительные CSS селекторы
+   * @param status status of the window/ статус окна
+   */
+  findBodyOther(selectors: string, status: WindowStatusItem = WindowStatusItem.open): HTMLDivElement | undefined {
+    if (status === WindowStatusItem.open) {
+      const element = domQuerySelector<HTMLDivElement>(
+        `.${this.className}:not(.${this.id})[data-status="${WindowStatusItem.flash}"] .${this.className}__body ${selectors}`
+      )
+
+      if (element) {
+        return element
+      }
+    }
+
+    return domQuerySelector<HTMLDivElement>(
+      `.${this.className}:not(.${this.id})[data-status="${status}"] .${this.className}__body ${selectors}`
+    )
+  }
+
+  /**
+   * Returns the list of available classes.
+   *
+   * Возвращает список доступных классов.
+   * @param className class name/ название класса
+   * @param id identification of the current window/ идентификация текущего окна
+   */
+  static getClassesList(className: string, id: string = 'id'): WindowClassesList {
+    return {
+      block: `${className}--${WindowStatusControlItem.block}`,
+      blockChildren: `${className}--${WindowStatusControlItem.blockChildren}`,
+      blockOther: `${className}--${WindowStatusControlItem.blockOther}`,
+      close: `${className}--${WindowStatusControlItem.close}`,
+      static: `${className}--${WindowStatusControlItem.static}`,
+
+      control: `${className}__control`,
+      controlId: `${className}__control window__control ${id}`,
+      controlStatic: `${className}--${WindowStatusControlItem.controlStatic}`,
+      controlOpenOnly: `${className}--${WindowStatusControlItem.controlOpenOnly}`,
+      controlActive: `${className}--${WindowStatusControlItem.controlActive}`,
+
+      persistent: `${className}--${WindowStatusControlItem.persistent}`
+    }
+  }
+
+  /**
+   * Returns a list of available classes by design name.
+   *
+   * Возвращает список доступных классов по названию дизайна.
+   * @param design design name/ названия дизайна
+   */
+  static getClassesListByDesign(design: string) {
+    return this.getClassesList(`${design}-window`)
+  }
+}

package/src/constructors/Window/WindowClassesInclude.ts

@@ -0,0 +1,39 @@
+import { WindowClasses } from './WindowClasses'
+
+import type { WindowClassesList } from './basicTypes'
+
+/**
+ * Helper class to access window CSS classes by design.
+ *
+ * Вспомогательный класс для доступа к CSS-классам окна по дизайну.
+ */
+export class WindowClassesInclude {
+  /**
+   * Constructor
+   * @param design design name/ название дизайна
+   */
+  constructor(
+    protected readonly design: string
+  ) {
+  }
+
+  /**
+   * Returns list of window classes for the specified design.
+   *
+   * Возвращает список классов окна для указанного дизайна.
+   */
+  get(): WindowClassesList {
+    return WindowClasses.getClassesListByDesign(this.design)
+  }
+
+  /**
+   * Returns an object with window classes under classesWindow key.
+   *
+   * Возвращает объект с классами окна под ключом classesWindow.
+   */
+  getObject() {
+    return {
+      classesWindow: this.get()
+    }
+  }
+}

package/src/constructors/Window/WindowClient.ts

@@ -0,0 +1,93 @@
+/**
+ * Sentinel value for an "unset" client coordinate.
+ * Used to distinguish the absence of data from a valid point (including 0,0).
+ * -1 is chosen as a value that cannot occur for clientX/clientY within the visible viewport.
+ *
+ * Маркерное значение для «не заданных» координат клика пользователя.
+ * Используется, чтобы отличать отсутствие данных от валидной точки (включая 0,0).
+ * -1 выбран как значение, невозможное для clientX/clientY в видимой области.
+ */
+const WINDOW_NULL_VALUE = -1
+
+/**
+ * The class stores the coordinates of the mouse click. It is used for the opening
+ * animation, when the element appears from the point of click. And also for the contextmenu event.
+ *
+ * Класс хранит координаты нажатия мыши. Используется для анимации открытия,
+ * когда элемент появляется от точки нажатия. А также для события contextmenu.
+ */
+export class WindowClient {
+  protected x: number = WINDOW_NULL_VALUE
+  protected y: number = WINDOW_NULL_VALUE
+
+  /**
+   * Checks if the button was pressed.
+   *
+   * Проверяет, было ли нажатие на кнопку.
+   */
+  is(): boolean {
+    return this.x !== WINDOW_NULL_VALUE && this.y !== WINDOW_NULL_VALUE
+  }
+
+  /**
+   * Returns the X coordinate.
+   *
+   * Возвращает координату X.
+   */
+  getX(): number {
+    return this.x
+  }
+
+  /**
+   * Returns the Y coordinate.
+   *
+   * Возвращает координату Y.
+   */
+  getY(): number {
+    return this.y
+  }
+
+  /**
+   * Returns the shift along the X coordinate.
+   *
+   * Возвращает сдвиг по координате X.
+   */
+  getShiftX(value: number): number {
+    return this.x - value
+  }
+
+  /**
+   * Returns the shift along the Y coordinate.
+   *
+   * Возвращает сдвиг по координате Y.
+   */
+  getShiftY(value: number): number {
+    return this.y - value
+  }
+
+  /**
+   * Changes the coordinates.
+   *
+   * Изменяет координаты.
+   * @param x value of X/ значение X
+   * @param y value of Y/ значение Y
+   */
+  set(x: number, y: number): this {
+    this.x = x
+    this.y = y
+
+    return this
+  }
+
+  /**
+   * Resets all data to initial values.
+   *
+   * Сбрасывает все данные к начальным значениям.
+   */
+  reset(): this {
+    this.x = WINDOW_NULL_VALUE
+    this.y = WINDOW_NULL_VALUE
+
+    return this
+  }
+}