@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/MotionTransform/MotionTransform.ts

@@ -1,87 +0,0 @@
-import { onUnmounted, type Ref, type ToRefs, watch } from 'vue'
-import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
-
-import { MotionTransformElement } from './MotionTransformElement'
-import { MotionTransformSize } from './MotionTransformSize'
-import { MotionTransformState } from './MotionTransformState'
-import { MotionTransformEvent } from './MotionTransformEvent'
-import { MotionTransformGo } from './MotionTransformGo'
-
-import type { MotionTransformComponents, MotionTransformEmits, MotionTransformSlots } from './types'
-import type { MotionTransformProps } from './props'
-import type { MotionTransformControlItem } from './basicTypes'
-import { ModelInclude } from '../../classes/ModelInclude'
-
-/**
- * MotionTransform
- */
-export class MotionTransform {
-  /** Reference helper for element interactions/ Вспомогательный класс для работы с элементами */
-  readonly element: MotionTransformElement
-
-  /** Size calculation manager/ Менеджер расчёта размеров */
-  readonly size: MotionTransformSize
-  /** State manager/ Менеджер состояния */
-  readonly state: MotionTransformState
-
-  /** Event manager/ Менеджер событий */
-  readonly event: MotionTransformEvent
-  /** Control actions manager/ Менеджер действий управления */
-  readonly go: MotionTransformGo
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param element input element/ элемент ввода
-   * @param elementContext substrate 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: MotionTransformProps,
-    protected readonly refs: ToRefs<MotionTransformProps>,
-    element: Ref<HTMLDivElement | undefined>,
-    elementContext: Ref<HTMLDivElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<MotionTransformComponents, MotionTransformProps>,
-    protected readonly slots?: MotionTransformSlots,
-    protected readonly emits?: ConstrEmit<MotionTransformEmits>
-  ) {
-    this.element = new MotionTransformElement(
-      props,
-      element,
-      elementContext,
-      className
-    )
-
-    this.size = new MotionTransformSize(this.element)
-    this.state = new MotionTransformState(props, this.element, this.size)
-
-    this.event = new MotionTransformEvent(props, this.element, this.state, emits)
-    this.go = new MotionTransformGo(this.state)
-
-    new ModelInclude('open', this.emits, this.state.open)
-
-    watch([refs.open], () => this.state.set(Boolean(props.open)))
-
-    onUnmounted(() => this.event.stop())
-  }
-
-  /**
-   * Returns data for managing slot data.
-   *
-   * Возвращает данные для управления данными слотами.
-   */
-  getSlotData(): MotionTransformControlItem {
-    return {
-      isOpen: this.state.isOpen,
-      isShow: this.state.isShow,
-      classes: MotionTransformElement.getClassesList(this.className)
-    }
-  }
-}

package/src/constructors/MotionTransform/MotionTransformClassesInclude.ts

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

package/src/constructors/MotionTransform/MotionTransformDesign.tsx

@@ -1,242 +0,0 @@
-import { h, ref, Teleport, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-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.getAttrs(),
-          ref: this.element,
-          key: 'main',
-          class: this.classes?.value.main,
-          onTransitionend: this.item.event.onTransitionend
-        },
-        [
-          ...this.renderHead(),
-          ...this.renderBody()
-        ]
-      )
-    ]
-  }
-
-  /**
-   * Rendering the title.
-   *
-   * Рендеринг заголовка.
-   */
-  readonly renderHead = (): VNode[] => {
-    return [
-      h(
-        'div',
-        {
-          key: 'head',
-          class: this.classes?.value.head,
-          onClick: this.item.event.onClick
-        },
-        this.initSlot(
-          'head',
-          undefined,
-          this.item.getSlotData()
-        )
-      )
-    ]
-  }
-
-  /**
-   * Rendering the content.
-   *
-   * Рендеринг содержимого.
-   */
-  readonly renderBody = (): VNode[] => {
-    if (this.item.state.isShow.value) {
-      return [
-        h(
-          'div',
-          {
-            key: 'body',
-            class: this.classes?.value.body
-          },
-          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 []
-  }
-}

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)
-}

package/src/constructors/MotionTransform/MotionTransformInclude.ts

@@ -1,123 +0,0 @@
-import { computed, ref, type VNode } from 'vue'
-import {
-  type ConstrBind,
-  DesignComponents,
-  getRef,
-  type RefOrNormal,
-  toBind,
-  type ConstrEmit
-} from '@dxtmisha/functional'
-
-import type { MotionTransformProps } from './props'
-import type { MotionTransformEmits, MotionTransformExpose, MotionTransformSlots } from './types'
-import type {
-  MotionTransformComponentInclude,
-  MotionTransformEmitOptions, MotionTransformExposeInclude,
-  MotionTransformPropsInclude
-} from './basicTypes'
-
-/**
- * The class returns data for working with the MotionTransform component
- *
- * Класс возвращает данные для работы с компонентом MotionTransform
- */
-export class MotionTransformInclude<
-  Props extends MotionTransformPropsInclude = MotionTransformPropsInclude,
-  PropsExtra extends ConstrBind<MotionTransformProps> = ConstrBind<MotionTransformProps>
-> {
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param emits the function is called when an event is triggered/ функция вызывается при срабатывании события
-   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
-   * @param index index identifier/ идентификатор индекса
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<MotionTransformComponentInclude, Props>,
-    protected readonly emits?: ConstrEmit<MotionTransformEmits>,
-    protected readonly extra?: RefOrNormal<PropsExtra>,
-    protected readonly index?: string
-  ) {
-  }
-
-  /** Reference to MotionTransform element expose/ Ссылка на expose элемента MotionTransform */
-  readonly element = ref<ConstrBind<MotionTransformExpose> | undefined>()
-
-  /** Computed bindings for MotionTransform/ Вычисляемые привязки для MotionTransform */
-  readonly binds = computed<PropsExtra>(() => {
-    const props = toBind<PropsExtra>(
-      getRef(this.extra) ?? {},
-      this.props.motionTransformAttrs ?? {}
-    )
-
-    return {
-      ...props,
-
-      open: this.props.open,
-      clickOpen: this.props.clickOpen,
-      autoClose: this.props.autoClose
-    }
-  })
-
-  /**
-   * Expose helpers for MotionTransform state and actions/
-   * Вспомогательные методы expose для состояния и действий MotionTransform
-   */
-  readonly expose: MotionTransformExposeInclude = {
-    open: computed(() => Boolean(this.element.value?.open)),
-    isShow: computed(() => Boolean(this.element.value?.isShow)),
-    setOpen: async (open: boolean) => this.element.value?.setOpen(open),
-    toOpen: async () => this.element.value?.toOpen(),
-    toClose: async () => this.element.value?.toClose(),
-    toggle: async () => this.element.value?.toggle(),
-
-    motionTransformElement: this.element
-  }
-
-  /**
-   * Emits 'transform' event upward/
-   * Поднимает событие 'transform' наверх
-   * @param event native event/ нативное событие
-   * @param options payload/ параметры события
-   */
-  readonly onTransform = (
-    event: Event | undefined,
-    options: MotionTransformEmitOptions
-  ) => {
-    this.emits?.('transform', event, options)
-    this.emits?.('transformLite', options)
-  }
-
-  /**
-   * Render the MotionTransform component with slots/
-   * Рендер компонента MotionTransform со слотами
-   * @param slotsChildren slots passed to the component/ слоты, передаваемые компоненту
-   * @param attrs additional attributes/ дополнительные атрибуты
-   */
-  readonly render = (
-    slotsChildren: MotionTransformSlots,
-    attrs?: ConstrBind<MotionTransformProps>
-  ): VNode[] => {
-    if (this.components) {
-      return this.components.render(
-        'motionTransform',
-        {
-          onTransform: this.onTransform,
-          ...toBind(
-            attrs ?? {},
-            this.binds.value
-          ),
-          ref: this.element
-        },
-        slotsChildren as unknown as Record<string, any>,
-        this.index
-      )
-    }
-
-    return []
-  }
-}