@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/MotionTransform/MotionTransformInclude.ts

@@ -1,124 +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 []
-  }
-}

package/src/constructors/MotionTransform/MotionTransformSize.ts

@@ -1,97 +0,0 @@
-import { MotionTransformElement } from './MotionTransformElement'
-
-/**
- * Class for managing size calculation.
- *
- * Класс для управления вычислением размера.
- */
-export class MotionTransformSize {
-  /** Top offset for transform/ Верхнее смещение для трансформации */
-  top: string | null = null
-  /** Left offset for transform/ Левое смещение для трансформации */
-  left: string | null = null
-  /** Head width value/ Ширина шапки */
-  headWidth: string | null = null
-  /** Total height value/ Общая высота */
-  height: string | null = null
-  /** Scale factor/ Коэффициент масштаба */
-  scale: string | null = null
-
-  /** Context width/ Ширина контекста */
-  contextWidth: string | null = null
-  /** Context height/ Высота контекста */
-  contextHeight: string | null = null
-
-  /** Head height value/ Высота шапки */
-  headHeight: string | null = null
-  /** Head scale factor/ Коэффициент масштаба шапки */
-  headScale: string | null = null
-
-  /** Body height value/ Высота тела */
-  bodyHeight: string | null = null
-
-  /**
-   * Constructor
-   * @param element class object for managing an element/ объект класса для управления элементом
-   */
-  constructor(
-    protected element: MotionTransformElement
-  ) {
-  }
-
-  /**
-   * Update all sizes.
-   *
-   * Обновить все размеры.
-   */
-  update(): void {
-    const rect = this.element.getRect()
-
-    if (rect) {
-      const elementHead = this.element.getElementHead()
-      const elementBody = this.element.getElementBody()
-
-      const scale = 1 / window.innerWidth * rect.width
-      const headScale = 1 / rect.width * window.innerWidth
-
-      this.top = `${rect.top - (scale * rect.top / (scale - 1))}px`
-      this.left = `${rect.left - (scale * rect.left / (scale - 1))}px`
-      this.height = `${100 / window.innerHeight * rect.height * headScale}%`
-      this.scale = scale.toString()
-
-      this.contextWidth = `${rect.width}px`
-      this.contextHeight = `${rect.height}px`
-
-      if (elementHead) {
-        this.headWidth = `${rect.width}px`
-        this.headHeight = `${elementHead.offsetHeight ?? '0'}px`
-        this.headScale = headScale.toString()
-
-        if (elementBody) {
-          this.bodyHeight = `${elementBody.offsetHeight + (this.element.isSection() ? elementHead.offsetHeight : 0)}px`
-        }
-      }
-    }
-  }
-
-  /**
-   * Restores all data to original.
-   *
-   * Восстанавливает все данные на изначальные.
-   */
-  reset(): void {
-    this.top = null
-    this.left = null
-    this.height = null
-    this.scale = null
-
-    this.contextWidth = null
-    this.contextHeight = null
-
-    this.headWidth = null
-    this.headHeight = null
-    this.headScale = null
-
-    this.bodyHeight = null
-  }
-}

package/src/constructors/MotionTransform/MotionTransformState.ts

@@ -1,255 +0,0 @@
-import { computed, ref, watch } from 'vue'
-
-import { TabIndexInclude } from '../../classes/TabIndexInclude'
-import { MotionTransformElement } from './MotionTransformElement'
-import { MotionTransformSize } from './MotionTransformSize'
-
-import type { MotionTransformProps } from './props'
-
-/**
- * State management class.
- *
- * Класс управления состоянием.
- */
-export class MotionTransformState {
-  /** Open state flag/ Флаг состояния открытия */
-  readonly open = ref<boolean>(false)
-  /** Temporary show state for animation/ Временный флаг показа для анимации */
-  readonly show = ref<boolean>(false)
-  /** Teleportation state flag/ Флаг состояния телепортации */
-  readonly teleport = ref<boolean>(false)
-
-  /**
-   * Constructor.
-   *
-   * Конструктор.
-   * @param props input data/ входные данные
-   * @param element class object for managing an element/ объект класса для управления элементом
-   * @param tabIndex class object for managing tab indices/ объект класса для управления табуляцией
-   * @param size class object for managing sizes/ объект класса для управления размерами
-   */
-  constructor(
-    props: MotionTransformProps,
-    protected element: MotionTransformElement,
-    protected tabIndex: TabIndexInclude<HTMLDivElement>,
-    protected size: MotionTransformSize
-  ) {
-    watch([this.element.element, this.show], this.makeShow)
-    watch([this.element.element, this.open], this.makeOpen)
-    watch([this.element.element, this.teleport], this.makeTeleport)
-
-    if (props.open) {
-      requestAnimationFrame(() => {
-        this.open.value = Boolean(props.open)
-        this.calculations()
-      })
-    }
-  }
-
-  /** Computed open flag/ Вычисляемый флаг открытия */
-  readonly isOpen = computed(() => this.open.value)
-
-  /** Checks if the element should be shown/ Проверяет, следует ли показывать элемент */
-  readonly isShow = computed<boolean>(() => this.open.value || this.show.value)
-
-  /**
-   * Checks if teleportation should be disabled.
-   *
-   * Проверяет, нужно ли отключить телепортацию.
-   */
-  isTeleportClose(): boolean {
-    return this.teleport.value && !this.open.value
-  }
-
-  /**
-   * Changes in the state of the open window.
-   *
-   * Изменения состояния открытого окна.
-   * @param open opening status/ статус открытия
-   * @param animation opening with animation/ открытие с анимацией
-   */
-  set(
-    open: boolean,
-    animation = true
-  ) {
-    if (this.open.value !== open) {
-      if (
-        animation
-        && this.element.isAnimation()
-      ) {
-        this.show.value = true
-
-        requestAnimationFrame(() => {
-          this.calculations()
-          this.make()
-
-          requestAnimationFrame(() => {
-            this.open.value = open
-          })
-        })
-      } else {
-        this.open.value = open
-        this.calculations()
-      }
-
-      setTimeout(() => this.reset(), 480)
-    }
-  }
-
-  /**
-   * Status switching.
-   *
-   * Переключение статуса.
-   */
-  toggle(): void {
-    this.set(!this.open.value)
-  }
-
-  /**
-   * Resets the data to the initial state.
-   *
-   * Сбрасывает данные в первичное состояние.
-   */
-  reset(): this {
-    if (this.show.value) {
-      this.show.value = false
-
-      if (this.isTeleportClose()) {
-        this.teleport.value = false
-      }
-
-      this.make()
-      this.tabIndex.toggle(this.open.value)
-    }
-
-    return this
-  }
-
-  /**
-   * Update of the display class.
-   *
-   * Обновление класса показа.
-   */
-  protected readonly makeShow = () => {
-    const element = this.element.getElement()
-
-    if (element) {
-      element.dataset.show = this.show.value ? 'show' : 'none'
-    }
-  }
-
-  /**
-   * Update of the opening class.
-   *
-   * Обновление класса открытия.
-   */
-  protected readonly makeOpen = () => {
-    const element = this.element.getElement()
-
-    if (element) {
-      element.dataset.open = this.open.value ? 'open' : 'none'
-    }
-  }
-
-  /**
-   * Update of the teleport class.
-   *
-   * Обновление класса телепорта.
-   */
-  protected readonly makeTeleport = () => {
-    const element = this.element.getElement()
-
-    if (element) {
-      element.dataset.teleport = this.teleport.value ? 'teleport' : 'none'
-    }
-  }
-
-  /**
-   * Calculations before animation.
-   *
-   * Вычисления перед анимацией.
-   */
-  protected calculations(): void {
-    this.size.update()
-    this.toTeleport()
-  }
-
-  /**
-   * Animation control.
-   *
-   * Управление анимацией.
-   */
-  protected toTeleport(): void {
-    if (this.element.isWindow()) {
-      this.teleport.value = this.isShow.value
-    }
-  }
-
-  /**
-   * Updates the list of styles.
-   *
-   * Обновляет список стилей.
-   */
-  protected make() {
-    this.makeShow()
-    this.makeMain()
-    this.makeContext()
-  }
-
-  /**
-   * Updates the list of styles for the main element.
-   *
-   * Обновляет список стилей для главного элемента.
-   */
-  protected makeMain(): void {
-    const element = this.element.getElement()
-
-    if (element) {
-      const style = this.element.style
-
-      if (this.show.value) {
-        element.style.setProperty(style.top, this.size.top)
-        element.style.setProperty(style.left, this.size.left)
-        element.style.setProperty(style.height, this.size.height)
-        element.style.setProperty(style.scale, this.size.scale)
-        element.style.setProperty(style.headWidth, this.size.headWidth)
-        element.style.setProperty(style.headHeight, this.size.headHeight)
-        element.style.setProperty(style.headScale, this.size.headScale)
-        element.style.setProperty(style.bodyHeight, this.size.bodyHeight)
-      } else {
-        element.style.removeProperty(style.top)
-        element.style.removeProperty(style.left)
-        element.style.removeProperty(style.height)
-        element.style.removeProperty(style.scale)
-        element.style.removeProperty(style.headWidth)
-        element.style.removeProperty(style.headHeight)
-        element.style.removeProperty(style.headScale)
-        element.style.removeProperty(style.bodyHeight)
-      }
-    }
-  }
-
-  /**
-   * Updates the list of styles for the context element.
-   *
-   * Обновляет список стилей для элемента контекста.
-   */
-  protected makeContext(): void {
-    const context = this.element.getElementContext()
-
-    if (context) {
-      const style = this.element.style
-
-      if (
-        this.element.isWindow()
-        && this.isShow.value
-      ) {
-        context.style.setProperty(style.contextWidth, this.size.contextWidth)
-        context.style.setProperty(style.contextHeight, this.size.contextHeight)
-      } else {
-        context.style.removeProperty(style.contextWidth)
-        context.style.removeProperty(style.contextHeight)
-      }
-    }
-  }
-}

package/src/constructors/MotionTransform/basicTypes.ts

@@ -1,137 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { ConstrBind } from '@dxtmisha/functional'
-
-import type { AriaRoleControlPropsInclude } from '../../types/ariaTypes'
-import type { MotionTransformEmits, MotionTransformExpose } from './types'
-import type { MotionTransformProps } from './props'
-
-/**
- * Options for MotionTransform events/
- * Опции для событий MotionTransform
- */
-export type MotionTransformEmitOptions = {
-  /** Source area type (head, body, top, script)/ Тип области источника (head, body, top, script) */
-  type: 'head' | 'body' | 'top' | 'script'
-  /** Open state after transform/ Состояние открытия после трансформации */
-  open: boolean
-}
-
-/**
- * List of CSS classes for MotionTransform styling/
- * Список CSS классов для стилизации MotionTransform
- */
-export type MotionTransformClassList = {
-  /** Show state class/ Класс состояния видимости */
-  show: string
-  /** Open state class/ Класс состояния открытия */
-  open: string
-  /** Window mode class/ Класс режима окна */
-  window: string
-
-  /** Click feedback class/ Класс отклика на клик */
-  click: string
-  /** Ignore element class/ Класс игнорирования элемента */
-  none: string
-  /** Global ignore class/ Глобальный класс игнорирования */
-  noneGlobal: string
-  /** Close trigger class/ Класс триггера закрытия */
-  close: string
-}
-
-/**
- * Style variable names for MotionTransform layout/
- * Имена стилевых переменных для раскладки MotionTransform
- */
-export type MotionTransformStyle = {
-  /** Context width CSS var/ CSS‑переменная ширины контекста */
-  contextWidth: string
-  /** Context height CSS var/ CSS‑переменная высоты контекста */
-  contextHeight: string
-  /** Head scale CSS var/ CSS‑переменная масштаба заголовка */
-  headScale: string
-  /** Top position CSS var/ CSS‑переменная верхней позиции */
-  top: string
-  /** Left position CSS var/ CSS‑переменная левой позиции */
-  left: string
-  /** Head width CSS var/ CSS‑переменная ширины заголовка */
-  headWidth: string
-  /** Height CSS var/ CSS‑переменная высоты */
-  height: string
-  /** Scale CSS var/ CSS‑переменная масштаба */
-  scale: string
-  /** Head height CSS var/ CSS‑переменная высоты заголовка */
-  headHeight: string
-  /** Body height CSS var/ CSS‑переменная высоты тела */
-  bodyHeight: string
-}
-
-/**
- * Slot props passed to head/body slots/
- * Параметры слота, передаваемые в head/body
- */
-export type MotionTransformControlItem = {
-  /** Reactive open state/ Реактивное состояние открытия */
-  isOpen: ComputedRef<boolean>
-  /** Visible or preparing to show/ Видим либо готовится к показу */
-  isShow: ComputedRef<boolean>
-  /** Helper CSS classes/ Вспомогательные CSS‑классы */
-  classes: MotionTransformClassList
-  /** Helper style variables/ Вспомогательные стилевые переменные */
-  idControl: string
-  /** Helper style variables/ Вспомогательные стилевые переменные */
-  idBody: string
-
-  /** Binding attributes for element/ Атрибуты привязки для элемента */
-  binds: AriaRoleControlPropsInclude
-}
-
-/**
- * Component map for including MotionTransform/
- * Карта компонентов для подключения MotionTransform
- */
-export type MotionTransformComponentInclude = {
-  /** MotionTransform component key/ Ключ компонента MotionTransform */
-  motionTransform?: object
-}
-
-/**
- * Event map for MotionTransform include/
- * Карта событий для подключения MotionTransform
- */
-export type MotionTransformEmitsInclude = {
-  /** Transform event with native event and options/ Событие трансформации с нативным событием и опциями */
-  transform?: MotionTransformEmits['transform']
-  /** Lightweight transform event with options only/ Облегчённое событие трансформации только с опциями */
-  transformLite?: MotionTransformEmits['transformLite']
-}
-
-/**
- * Interface for MotionTransform expose inclusion/
- * Интерфейс для включения expose MotionTransform
- */
-export interface MotionTransformExposeInclude extends MotionTransformExpose {
-  motionTransformElement: Ref<ConstrBind<MotionTransformExpose> | undefined>
-}
-
-/**
- * Props used to include and configure MotionTransform/
- * Свойства для подключения и настройки MotionTransform
- */
-export interface MotionTransformPropsInclude<
-  MotionTransform extends MotionTransformProps = MotionTransformProps
-> {
-  /** Open state/ Состояние открытия */
-  open?: boolean
-  /** Click on head opens component/ Клик по заголовку открывает компонент */
-  clickOpen?: boolean
-  /** Auto close on outside click/ Авто‑закрытие при клике вне */
-  autoClose?: boolean
-  /** Additional attributes for MotionTransform/ Дополнительные атрибуты для MotionTransform */
-  motionTransformAttrs?: ConstrBind<MotionTransform>
-}
-
-/**
- * CSS variable name for MotionTransform body type/
- * Имя CSS‑переменной для типа тела MotionTransform
- */
-export const __MOTION_TRANSFORM_TYPE_BODY_NAME = '--sys-type-body'

package/src/constructors/MotionTransform/index.ts

@@ -1,7 +0,0 @@
-export * from './MotionTransform'
-export * from './MotionTransformDesign'
-export * from './MotionTransformInclude'
-export * from './MotionTransformClassesInclude'
-export * from './props'
-export * from './types'
-export * from './basicTypes'

package/src/constructors/MotionTransform/properties.json

@@ -1,35 +0,0 @@
-{
-  "z-index": {
-    "_type": "var"
-  },
-  "background-full": {
-    "_type": "var"
-  },
-  "background-color": {
-    "_type": "var"
-  },
-  "box-shadow": {
-    "_type": "var"
-  },
-  "#context": {},
-  "#head": {},
-  "#body": {},
-  "#backdrop": {},
-  "#scrim": {},
-  "#clickNone": {},
-  "~section": {},
-  "~animationHeadPosition": {
-    "~top": {},
-    "~toBottom": {},
-    "_default": "top"
-  },
-  "~adaptive": {
-    "~planeAlways": {
-      "=sys-type-body": "unset"
-    },
-    "group|plane": {
-      "link|plane": "{??adaptive.planeAlways}",
-      "_type": "media-group"
-    }
-  }
-}