@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/MotionTransform/MotionTransformDesign.tsx

@@ -1,276 +0,0 @@
-import { computed, h, ref, Teleport, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { MotionTransform } from './MotionTransform'
-
-import {
-  type MotionTransformPropsBasic
-} from './props'
-import {
-  type MotionTransformClasses,
-  type MotionTransformComponents,
-  type MotionTransformEmits,
-  type MotionTransformExpose,
-  type MotionTransformSlots
-} from './types'
-
-/**
- * MotionTransformDesign
- */
-export class MotionTransformDesign<
-  COMP extends MotionTransformComponents,
-  EXPOSE extends MotionTransformExpose,
-  CLASSES extends MotionTransformClasses,
-  P extends MotionTransformPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    MotionTransformEmits,
-    EXPOSE,
-    MotionTransformSlots,
-    CLASSES,
-    P
-  > {
-  protected elementContext = ref<HTMLDivElement>()
-  protected readonly item: MotionTransform
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, MotionTransformEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new MotionTransform(
-      this.props,
-      this.refs,
-      this.element,
-      this.elementContext,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    )
-
-    this.init()
-  }
-
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  protected initExpose(): EXPOSE {
-    return {
-      open: this.item.state.open,
-      isShow: this.item.state.isShow,
-
-      setOpen: this.item.go.to,
-      toOpen: this.item.go.open,
-      toClose: this.item.go.close,
-      toggle: this.item.go.toggle
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: {},
-      ...{
-        // :classes [!] System label / Системная метка
-        context: this.getSubClass('context'),
-        head: this.getSubClass('head'),
-        body: this.getSubClass('body'),
-        backdrop: this.getSubClass('backdrop'),
-        scrim: this.getSubClass('scrim'),
-        clickNone: this.getSubClass('clickNone')
-        // :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 children: any[] = [
-      ...this.renderMain(),
-      ...this.renderScrim()
-    ]
-
-    return h(
-      'div',
-      {
-        ref: this.elementContext,
-        class: this.classes?.value.context
-      },
-      h(
-        Teleport,
-        {
-          key: 'teleport',
-          disabled: !this.item.state.teleport.value,
-          to: 'body'
-        },
-        children
-      )
-    )
-  }
-
-  /**
-   * Rendering the main element.
-   *
-   * Рендеринг главного элемента.
-   */
-  readonly renderMain = (): VNode[] => {
-    return [
-      h(
-        'div',
-        this.propsMain.value,
-        [
-          ...this.renderHead(),
-          ...this.renderBody()
-        ]
-      )
-    ]
-  }
-
-  /**
-   * Rendering the title.
-   *
-   * Рендеринг заголовка.
-   */
-  readonly renderHead = () => {
-    return [
-      h(
-        'div',
-        this.propsHead.value,
-        this.initSlot(
-          'head',
-          undefined,
-          this.item.getSlotData()
-        )
-      )
-    ]
-  }
-
-  /**
-   * Rendering the content.
-   *
-   * Рендеринг содержимого.
-   */
-  readonly renderBody = () => {
-    if (
-      this.props.inDom
-      || this.item.state.isShow.value
-    ) {
-      return [
-        h(
-          this.props.tagBody ?? 'div',
-          this.propsBody.value,
-          this.initSlot(
-            'body',
-            undefined,
-            this.item.getSlotData()
-          )
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Rendering the background.
-   *
-   * Рендеринг задника.
-   */
-  readonly renderScrim = (): VNode[] => {
-    if (this.item.state.teleport.value) {
-      return [
-        h(
-          'div',
-          {
-            key: 'scrim',
-            class: this.classes?.value.scrim
-          }
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Props for the main element.
-   *
-   * Свойства для главного элемента.
-   */
-  protected readonly propsMain = computed(() => ({
-    ...this.getAttrs(),
-    ref: this.element,
-    key: 'main',
-    class: this.classes?.value.main,
-    onTransitionend: this.item.event.onTransitionend
-  }))
-
-  /**
-   * Props for the head element.
-   *
-   * Свойства для элемента заголовка.
-   */
-  protected readonly propsHead = computed(() => ({
-    key: 'head',
-    class: this.classes?.value.head,
-    onClick: this.item.event.onClick
-  }))
-
-  /**
-   * Props for the body element.
-   *
-   * Свойства для элемента тела.
-   */
-  protected readonly propsBody = computed(() => {
-    return {
-      key: 'body',
-      id: this.item.element.idBody,
-      class: this.classes?.value.body,
-      ...AriaStaticInclude.role(this.item.getRole()),
-      ...AriaStaticInclude.modal(
-        this.item.element.isWindow(),
-        this.props.ariaLabelledby,
-        this.props.ariaDescribedby
-      )
-    }
-  })
-}

package/src/constructors/MotionTransform/MotionTransformElement.ts

@@ -1,225 +0,0 @@
-import { computed, type Ref } from 'vue'
-import { getElementId } from '@dxtmisha/functional'
-
-import { __MOTION_TRANSFORM_TYPE_BODY_NAME, type MotionTransformClassList, type MotionTransformStyle } from './basicTypes'
-import type { MotionTransformProps } from './props'
-
-/**
- * Class for working with elements and classes.
- *
- * Класс для работы с элементами и классами.
- */
-export class MotionTransformElement {
-  readonly id = getElementId()
-  readonly idControl = `${this.id}-control`
-  readonly idBody = `${this.id}-body`
-
-  readonly classes: MotionTransformClassList
-  readonly style: MotionTransformStyle
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element window element/ элемент окна
-   * @param elementContext substrate element/ элемент подложка
-   * @param className class name/ название класса
-   */
-  constructor(
-    protected readonly props: MotionTransformProps,
-    readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly elementContext: Ref<HTMLDivElement | undefined>,
-    protected readonly className: string
-  ) {
-    this.classes = MotionTransformElement.getClassesList(className)
-
-    this.style = {
-      top: `--${this.className}-sys-top`,
-      left: `--${this.className}-sys-left`,
-      height: `--${this.className}-sys-height`,
-      scale: `--${this.className}-sys-scale`,
-
-      contextWidth: `--${this.className}-sys-context-width`,
-      contextHeight: `--${this.className}-sys-context-height`,
-
-      headWidth: `--${this.className}-sys-head-width`,
-      headHeight: `--${this.className}-sys-head-height`,
-      headScale: `--${this.className}-sys-head-scale`,
-
-      bodyHeight: `--${this.className}-sys-body-height`
-    }
-  }
-
-  /** Checks if the element exists/ Проверяет, есть ли элемент */
-  readonly is = computed<boolean>(() => Boolean(this.element.value))
-
-  /**
-   * Checks if the click event is prohibited.
-   *
-   * Проверяет, запрещено ли событие клика.
-   * @param target selected element/ выбранный элемент
-   */
-  isClick(target: HTMLElement): boolean {
-    return Boolean(
-      target.closest<HTMLElement>(`.${this.classes.click}`)
-      || !target.closest<HTMLElement>(`.${this.classes.none}`)
-    )
-  }
-
-  /**
-   * Checks if the click event is prohibited in the global area.
-   *
-   * Проверяет, запрещено ли событие клика в глобальной области.
-   * @param target selected element/ выбранный элемент
-   */
-  isClickGlobal(target: HTMLElement): boolean {
-    return !target.closest<HTMLElement>(`.${this.classes.noneGlobal}`)
-  }
-
-  /**
-   * Checks if the window needs to be closed on click.
-   *
-   * Проверяет, нужно ли закрыть окно при клике.
-   * @param target selected element/ выбранный элемент
-   */
-  isClose(target: HTMLElement): boolean {
-    return Boolean(target.closest<HTMLElement>(`${this.getId()} .${this.classes.close}`))
-  }
-
-  /**
-   * Checks if the element is outside the body.
-   *
-   * Проверяет, является ли элемент за предел тела.
-   * @param target selected element/ выбранный элемент
-   */
-  isOutside(target: HTMLElement): boolean {
-    return !target.closest(this.getId())
-  }
-
-  /**
-   * Checks if the element needs to be ignored.
-   *
-   * Проверяет, нужно ли игнорировать элемент.
-   * @param target selected element/ выбранный элемент
-   */
-  isIgnore(target: HTMLElement): boolean {
-    return !(this.props.ignore && target.closest(getElementId(this.props.ignore, '')))
-      && !(this.props.ignoreSelector && target.closest(this.props.ignoreSelector))
-  }
-
-  /**
-   * Is the animation for slide changes enabled.
-   *
-   * Включено ли анимация на изменения слайда.
-   */
-  isAnimation(): boolean {
-    return Boolean(
-      this.elementContext.value
-      && this.props.animationShow
-    )
-  }
-
-  /**
-   * Is window mode enabled.
-   *
-   * Включен ли режим окна.
-   */
-  isWindow(): boolean {
-    return Boolean(
-      this.element.value
-      && getComputedStyle(this.element.value)
-        .getPropertyValue(__MOTION_TRANSFORM_TYPE_BODY_NAME) === '"--WINDOW--"'
-    )
-  }
-
-  /**
-   * Checks whether the title needs to be left.
-   *
-   * Проверяет, надо ли оставить заголовок.
-   */
-  isSection(): boolean {
-    return Boolean(this.props.section)
-  }
-
-  /**
-   * Returns the main element.
-   *
-   * Возвращает главного элемента.
-   */
-  getElement(): HTMLDivElement | undefined {
-    return this.element.value
-  }
-
-  /**
-   * Returns the context element.
-   *
-   * Возвращает элемент контекста.
-   */
-  getElementContext(): HTMLDivElement | undefined {
-    return this.elementContext.value
-  }
-
-  /**
-   * Returns the title element.
-   *
-   * Возвращает элемент заголовка.
-   */
-  getElementHead(): HTMLDivElement | undefined {
-    return this.getElement()?.querySelector<HTMLDivElement>(`.${this.className}__head`) || undefined
-  }
-
-  /**
-   * Returns the body element.
-   *
-   * Возвращает элемент тела.
-   */
-  getElementBody(): HTMLDivElement | undefined {
-    return this.getElement()?.querySelector<HTMLDivElement>(`.${this.className}__body`) || undefined
-  }
-
-  /**
-   * Returns the identifier.
-   *
-   * Возвращает идентификатор.
-   */
-  getId(): string {
-    return `#${getElementId(this.element.value)}`
-  }
-
-  /**
-   * Returns the sizes of elements.
-   *
-   * Возвращает размеры элементов.
-   */
-  getRect(): DOMRect | undefined {
-    return this.getElementContext()?.getBoundingClientRect()
-  }
-
-  /**
-   * Returns the list of available classes.
-   *
-   * Возвращает список доступных классов.
-   * @param className class name/ название класса
-   */
-  static getClassesList(className: string): MotionTransformClassList {
-    return {
-      show: `${className}--show`,
-      open: `${className}--open`,
-      window: `${className}--window`,
-
-      click: `${className}--click`,
-      close: `${className}--close`,
-      none: `${className}--none`,
-      noneGlobal: `${className}--noneGlobal`
-    }
-  }
-
-  /**
-   * Returns a list of available classes by design name.
-   *
-   * Возвращает список доступных классов по названию дизайна.
-   * @param design design name/ названия дизайна
-   */
-  static getClassesListByDesign(design: string) {
-    return this.getClassesList(`${design}-motionTransform`)
-  }
-}

package/src/constructors/MotionTransform/MotionTransformEvent.ts

@@ -1,118 +0,0 @@
-import { watch } from 'vue'
-import { type ConstrEmit, EventItem } from '@dxtmisha/functional'
-
-import { MotionTransformElement } from './MotionTransformElement'
-import { MotionTransformState } from './MotionTransformState'
-
-import type { MotionTransformEmitOptions } from './basicTypes'
-import type { MotionTransformEmits } from './types'
-import type { MotionTransformProps } from './props'
-
-/**
- * Class for event management.
- *
- * Класс для управления событиями.
- */
-export class MotionTransformEvent {
-  protected readonly item: EventItem<HTMLElement, PointerEvent>
-
-  /**
-   * Constructor.
-   *
-   * Конструктор.
-   * @param props input data/ входные данные
-   * @param element class object for managing an element/ объект класса для управления элементом
-   * @param state class object for status management/ объект класса для управления статусом
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: MotionTransformProps,
-    protected readonly element: MotionTransformElement,
-    protected readonly state: MotionTransformState,
-    protected readonly emits?: ConstrEmit<MotionTransformEmits>
-  ) {
-    this.item = new EventItem(document.body, 'click', this.listener)
-
-    watch(this.state.open, () => this.item.toggle(this.state.open.value))
-  }
-
-  /**
-   * Stopping event listening.
-   *
-   * Остановка прослушивания события.
-   */
-  stop(): this {
-    this.item.stop()
-    return this
-  }
-
-  /**
-   * Click event on the title.
-   *
-   * Событие клика на заголовок.
-   * @param event event object/ объект события
-   */
-  readonly onClick = (event: Event) => {
-    if (
-      this.props.clickOpen
-      && this.element.isClick(event.target as HTMLElement)
-    ) {
-      this.emit(event, 'head')
-      this.state.toggle()
-    }
-  }
-
-  /**
-   * End of animation event.
-   *
-   * Событие окончания анимации.
-   * @param event event object/ объект события
-   */
-  readonly onTransitionend = (event: TransitionEvent) => {
-    if (
-      this.element.getElement() === event.target
-      && event.propertyName === 'height'
-    ) {
-      this.state.reset()
-    }
-  }
-
-  /**
-   * Event call.
-   *
-   * Вызов события.
-   * @param event event object/ объект события
-   * @param type event type/ тип события
-   */
-  emit(
-    event: Event | undefined,
-    type: MotionTransformEmitOptions['type']
-  ): void {
-    const options: MotionTransformEmitOptions = {
-      type,
-      open: !this.state.open.value
-    }
-
-    this.emits?.('transform', event, options)
-    this.emits?.('transformLite', options)
-  }
-
-  protected listener = (event: PointerEvent) => {
-    const target = event.target as HTMLDivElement
-
-    if (
-      this.state.open.value
-      && this.element.isClickGlobal(target) && (
-        this.element.isClose(target)
-        || (
-          this.props.autoClose
-          && this.element.isOutside(target)
-          && this.element.isIgnore(target)
-        )
-      )
-    ) {
-      this.emit(event, 'body')
-      this.state.set(false)
-    }
-  }
-}

package/src/constructors/MotionTransform/MotionTransformGo.ts

@@ -1,47 +0,0 @@
-import { MotionTransformState } from './MotionTransformState'
-
-/**
- * Class for managing control actions.
- *
- * Класс для управления действиями управления.
- */
-export class MotionTransformGo {
-  /**
-   * Constructor.
-   *
-   * Конструктор.
-   * @param state class object for status management/ объект класса для управления статусом
-   */
-  constructor(
-    protected readonly state: MotionTransformState
-  ) {}
-
-  /**
-   * Opens.
-   *
-   * Открывает.
-   */
-  readonly open = () => this.state.set(true)
-
-  /**
-   * Closes.
-   *
-   * Закрывает.
-   */
-  readonly close = () => this.state.set(false)
-
-  /**
-   * Switching.
-   *
-   * Переключение.
-   */
-  readonly toggle = () => this.state.toggle()
-
-  /**
-   * State changes.
-   *
-   * Изменение состояния.
-   * @param open opening status/ статус открытия
-   */
-  readonly to = (open: boolean) => this.state.set(open)
-}