@dxtmisha/constructor 0.23.0

package/src/constructors/Window/WindowCoordinates.ts

@@ -0,0 +1,257 @@
+import { WindowClasses } from './WindowClasses'
+import { WindowElement } from './WindowElement'
+
+/**
+ * A class for working with coordinates.
+ *
+ * Класс для работы с координатами.
+ */
+export class WindowCoordinates {
+  protected top: number = 0
+  protected right: number = 0
+  protected bottom: number = 0
+  protected left: number = 0
+  protected width: number = 0
+  protected height: number = 0
+  protected innerWidth: number = 0
+  protected innerHeight: number = 0
+  protected controlWidth: number = 0
+  protected controlHeight: number = 0
+  protected padding: number = 0
+  protected location: string = ''
+
+  /**
+   * Constructor
+   * @param classes an object for working with classes and searching for elements/ объект для работы с классами и поиском элементов
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   */
+  constructor(
+    protected readonly classes: WindowClasses,
+    protected readonly element: WindowElement
+  ) {
+  }
+
+  /**
+   * Returns the distance from the top point.
+   *
+   * Возвращает расстояние от верхней точки.
+   */
+  getTop(): number {
+    return this.top
+  }
+
+  /**
+   * Returns the distance from the right point.
+   *
+   * Возвращает расстояние от правой точки.
+   */
+  getRight(): number {
+    return this.right
+  }
+
+  /**
+   * Returns the distance from the lower point.
+   *
+   * Возвращает расстояние от нижней точки.
+   */
+  getBottom(): number {
+    return this.bottom
+  }
+
+  /**
+   * Returns the distance from the left point.
+   *
+   * Возвращает расстояние от левой точки.
+   */
+  getLeft(): number {
+    return this.left
+  }
+
+  /**
+   * Returns the width of the element.
+   *
+   * Возвращает ширину элемента.
+   */
+  getWidth(): number {
+    return this.width
+  }
+
+  /**
+   * Returns the height of the element.
+   *
+   * Возвращает высоту элемента.
+   */
+  getHeight(): number {
+    return this.height
+  }
+
+  /**
+   * Returns the width of the window.
+   *
+   * Возвращает ширину окна.
+   */
+  getInnerWidth(): number {
+    return this.innerWidth
+  }
+
+  /**
+   * Returns the height of the window.
+   *
+   * Возвращает высоту окна.
+   */
+  getInnerHeight(): number {
+    return this.innerHeight
+  }
+
+  /**
+   * Returns the width of the control element.
+   *
+   * Возвращает ширину элемента управления.
+   */
+  getControlWidth(): number {
+    return this.controlWidth
+  }
+
+  /**
+   * Returns the height of the control element.
+   *
+   * Возвращает высоту элемента управления.
+   */
+  getControlHeight(): number {
+    return this.controlHeight
+  }
+
+  /**
+   * Returns the margins of the element.
+   *
+   * Возвращает отступы у элемента.
+   */
+  getPadding(): number {
+    return this.padding
+  }
+
+  /**
+   * Returns the values of the element's position.
+   *
+   * Возвращает значения положения элемента.
+   */
+  getLocation(): string {
+    return this.location
+  }
+
+  /**
+   * Returns the maximum height of the body.
+   *
+   * Возвращает максимальную высоту у body.
+   */
+  getMaxHeight(): number {
+    return window.innerHeight - (this.padding * 2)
+  }
+
+  /**
+   * Data updates.
+   *
+   * Обновления данных.
+   */
+  update(): boolean {
+    const element = this.element.getMain()
+    const rect = this.element.getControlRect()
+
+    if (
+      element
+      && rect
+      && (
+        this.top !== rect.top
+        || this.right !== rect.right
+        || this.bottom !== rect.bottom
+        || this.left !== rect.left
+        || this.width !== element.offsetWidth
+        || this.height !== element.offsetHeight
+        || this.innerWidth !== window.innerWidth
+        || this.innerHeight !== window.innerHeight
+      )
+    ) {
+      this.top = rect.top
+      this.right = rect.right
+      this.bottom = rect.bottom
+      this.left = rect.left
+      this.width = element.offsetWidth
+      this.height = element.offsetHeight
+      this.innerWidth = window.innerWidth
+      this.innerHeight = window.innerHeight
+      this.controlWidth = rect.width
+      this.controlHeight = rect.height
+      this.padding = this.initPadding()
+      this.location = this.initLocation(rect.top + (rect.height / 2))
+
+      return true
+    }
+
+    return false
+  }
+
+  /**
+   * Resets all data to initial values.
+   *
+   * Сбрасывает все данные к начальным значениям.
+   */
+  reset(): this {
+    this.top = 0
+    this.right = 0
+    this.bottom = 0
+    this.left = 0
+    this.width = 0
+    this.height = 0
+    this.innerWidth = 0
+    this.innerHeight = 0
+
+    return this
+  }
+
+  /**
+   * Initializes padding value from computed styles.
+   *
+   * Инициализирует значение отступов из вычисленных стилей.
+   */
+  protected initPadding(): number {
+    const element = this.element.getMain()
+    let padding = 0
+
+    if (element) {
+      const style = getComputedStyle(element)
+      const paddingTop = style.paddingTop.replace(/[^0-9]+/g, '')
+      const paddingBottom = style.paddingBottom.replace(/[^0-9]+/g, '')
+
+      padding = (parseInt(paddingTop) + parseInt(paddingBottom)) / 2
+    }
+
+    return padding > 0 ? padding : 16
+  }
+
+  /**
+   * Calculates control position values.
+   *
+   * Вычисляет значения положения контроля.
+   * @param top position of an element/ положение элемента
+   */
+  protected initLocation(
+    top: number
+  ): string {
+    const height = this.element.getBody()?.offsetHeight ?? 0
+    const half = height / 2
+    const max = this.innerHeight - (this.padding * 2) - height
+    const position = top - half - this.padding
+
+    if (
+      position < this.padding
+    ) {
+      return '0px'
+    }
+
+    if (top + half >= this.innerHeight - this.padding) {
+      return `${max}px`
+    }
+
+    return `${position}px`
+  }
+}

package/src/constructors/Window/WindowDesign.tsx

@@ -0,0 +1,278 @@
+import { h, Teleport, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Window } from './Window'
+
+import {
+  type WindowPropsBasic
+} from './props'
+import {
+  type WindowClasses,
+  type WindowComponents,
+  type WindowEmits,
+  type WindowExpose,
+  type WindowSlots
+} from './types'
+
+/**
+ * WindowDesign
+ */
+export class WindowDesign<
+  COMP extends WindowComponents,
+  EXPOSE extends WindowExpose,
+  CLASSES extends WindowClasses,
+  P extends WindowPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    WindowEmits,
+    EXPOSE,
+    WindowSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Window
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, WindowEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Window(
+      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 {
+      id: this.item.classes.getId(),
+      open: this.item.open.item,
+      setOpen: this.item.open.set,
+      toOpen: this.item.open.open,
+      toClose: this.item.open.close,
+      toggle: this.item.open.toggle,
+      control: this.item.slotData
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classesList.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        body: this.getSubClass('body'),
+        bodyGroup: this.getSubClass('body__group'),
+        bodyContext: this.getSubClass('body__context'),
+        control: this.getSubClass('control'),
+        image: this.getSubClass('image'),
+        close: this.getSubClass('close'),
+        teleport: this.getSubClass('teleport')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    const main: any[] = []
+
+    this.initSlot('control', main, this.item.slotData)
+
+    if (this.item.open.inDom.value) {
+      if (this.item.staticMode.item.value) {
+        main.push(this.renderMain())
+      } else {
+        main.push(
+          h(
+            Teleport,
+            {
+              key: 'teleport',
+              to: 'body'
+            },
+            h(
+              'div',
+              {
+                'class': this.classes?.value.teleport,
+                'data-window-teleport': this.item.classes.getId()
+              },
+              this.renderMain()
+            )
+          )
+        )
+      }
+    }
+
+    return main
+  }
+
+  /**
+   * Render main window element.
+   *
+   * Рендер главного элемента окна.
+   */
+  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.renderBody()
+    )
+  }
+
+  /**
+   * Render body element.
+   *
+   * Рендер элемента тела.
+   */
+  readonly renderBody = (): VNode => {
+    return h(
+      'div',
+      {
+        key: 'body',
+        ...this.getAttrs(),
+        class: {
+          [String(this.classes?.value.body)]: true,
+          ...this.toClass(this.attrs?.class)
+        }
+      },
+      [
+        ...this.renderBodyImage(),
+        ...this.renderBodyClose(),
+        ...this.renderBodyGroup()
+      ]
+    )
+  }
+
+  /**
+   * Generates an element to group the displayed data.
+   *
+   * Генерирует элемент для группировки выводимых данных.
+   */
+  readonly renderBodyGroup = (): VNode[] => {
+    const children: any[] = []
+
+    this.initSlot('title', children, this.item.slotData)
+    children.push(this.renderBodyContext())
+    this.initSlot('footer', children, this.item.slotData)
+
+    return [
+      h('div', {
+        key: 'group',
+        class: this.classes?.value.bodyGroup
+      }, children)
+    ]
+  }
+
+  /**
+   * Render context element.
+   *
+   * Рендер элемента контекста.
+   */
+  readonly renderBodyContext = (): VNode[] => {
+    return this.item.scrollbar.render(
+      'div',
+      {
+        'key': 'bodyContext',
+        'class': this.classes?.value.bodyContext,
+        'divider': this.props.divider,
+        'data-window-body': '1'
+      },
+      () => this.initSlot('default', undefined, this.item.slotData)
+    )
+  }
+
+  /**
+   * Generates an element to display the image.
+   *
+   * Генерирует элемент для вывода изображения
+   */
+  readonly renderBodyImage = (): VNode[] => {
+    if (this.props.image) {
+      return [h(
+        'div',
+        {
+          class: this.classes?.value.image
+        },
+        this.item.image.render()
+      )]
+    }
+
+    return []
+  }
+
+  /**
+   * Generates an element to display the close button.
+   *
+   * Генерирует элемент для вывода кнопки закрытия.
+   */
+  readonly renderBodyClose = (): VNode[] => {
+    if (this.props.closeButton) {
+      return this.components.render(
+        'button',
+        {
+          class: [
+            this.classes?.value.close,
+            this.item.classes.list.close
+          ],
+          icon: this.props.iconClose
+        }
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Window/WindowElement.ts

@@ -0,0 +1,84 @@
+import type { Ref } from 'vue'
+
+import { WindowClasses } from './WindowClasses'
+
+/**
+ * A class for working with elements.
+ *
+ * Класс для работы с элементами.
+ */
+export class WindowElement {
+  /**
+   * Constructor
+   * @param classes an object for working with classes and searching for elements/ объект для работы с классами и поиском элементов
+   * @param element the element of the window itself/ элемент самого окна
+   */
+  constructor(
+    protected readonly classes: WindowClasses,
+    public readonly element: Ref<HTMLDivElement | undefined>
+  ) {
+  }
+
+  /**
+   * Checks if the main element exists.
+   *
+   * Проверяет, есть ли главный элемент.
+   */
+  isMain(): boolean {
+    return Boolean(this.element.value)
+  }
+
+  /**
+   * Returns the main element.
+   *
+   * Возвращает главного элемента.
+   */
+  getMain(): HTMLDivElement | undefined {
+    return this.element.value
+  }
+
+  /**
+   * Returns the control element of the current component.
+   *
+   * Возвращает элемент управления текущего компонента.
+   */
+  getControl(): HTMLElement | undefined {
+    return this.classes.findControl()
+  }
+
+  /**
+   * Returns the dimensions of the control element.
+   *
+   * Возвращает размеры элемента управления.
+   */
+  getControlRect(): DOMRect | undefined {
+    return this.getControl()?.getBoundingClientRect() || undefined
+  }
+
+  /**
+   * Returns the body element of the window.
+   *
+   * Возвращает элемент тела окна.
+   */
+  getBody(): HTMLDivElement | undefined {
+    return this.classes.findBody()
+  }
+
+  /**
+   * Returns the dimensions of the window's body element.
+   *
+   * Возвращает размеры элемента тела окна.
+   */
+  getBodyRect(): DOMRect | undefined {
+    return this.getBody()?.getBoundingClientRect() || undefined
+  }
+
+  /**
+   * Returns the window context element.
+   *
+   * Возвращает элемент контекста окна.
+   */
+  getBodyContext(): HTMLDivElement | undefined {
+    return this.classes.findBodyContext()
+  }
+}

package/src/constructors/Window/WindowEmit.ts

@@ -0,0 +1,52 @@
+import type { ConstrEmit } from '@dxtmisha/functional'
+
+import { WindowClasses } from './WindowClasses'
+import { WindowElement } from './WindowElement'
+
+import type { WindowEmits } from './types'
+import type { WindowEmitOptions } from './basicTypes'
+
+/**
+ * Class triggering a click status change event.
+ *
+ * Класс, вызывающий событие изменения статуса клика.
+ */
+export class WindowEmit {
+  /**
+   * Constructor
+   * @param classes an object for working with classes and searching for elements/ объект для работы с классами и поиском элементов
+   * @param element an object of the class for working with elements/ объект класса для работы с элементами
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly classes: WindowClasses,
+    protected readonly element: WindowElement,
+    protected readonly emits?: ConstrEmit<WindowEmits>
+  ) {
+  }
+
+  /**
+   * Perform events.
+   *
+   * Выполнить события.
+   * @param open current state of the window/ текущее состояние окна
+   */
+  on(open: boolean) {
+    this.emits?.('window', this.getEmitOptions(open))
+  }
+
+  /**
+   * Returns an object for calling the event handler.
+   *
+   * Возвращает объект для вызова обработчика события.
+   * @param open current state of the window/ текущее состояние окна
+   */
+  protected getEmitOptions(open: boolean): WindowEmitOptions {
+    return {
+      id: this.classes.getId(),
+      element: this.element.getMain() as HTMLDivElement,
+      control: this.element.getControl() as HTMLElement,
+      open
+    }
+  }
+}