@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Window/WindowDesign.tsx

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

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

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

package/src/constructors/Window/WindowEvent.ts

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

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