@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Window/WindowClient.ts

@@ -1,132 +0,0 @@
-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).
- * -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
-
-  constructor(
-    protected readonly element: WindowElement
-  ) {
-  }
-
-  /**
-   * Checks if the button was pressed.
-   *
-   * Проверяет, было ли нажатие на кнопку.
-   */
-  is(): boolean {
-    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.
-   *
-   * Возвращает координату 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
-  }
-
-  /**
-   * 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
-  }
-}

package/src/constructors/Window/WindowCoordinates.ts

@@ -1,257 +0,0 @@
-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

@@ -1,295 +0,0 @@
-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 {
-  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.value)
-
-    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',
-      this.propsMain.value,
-      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.value)
-    children.push(this.renderBodyContext())
-    this.initSlot('footer', children, this.item.slotData.value)
-
-    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.value)
-    )
-  }
-
-  /**
-   * Generates an element to display the image.
-   *
-   * Генерирует элемент для вывода изображения
-   */
-  readonly renderBodyImage = (): VNode[] => {
-    if (this.props.image) {
-      return [h(
-        'div',
-        {
-          key: 'image',
-          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',
-        {
-          key: 'button-close',
-          class: [
-            this.classes?.value.close,
-            this.item.classes.list.close
-          ],
-          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
-    )
-  }))
-}