@dxtmisha/constructor 0.23.0

package/src/constructors/MotionTransform/MotionTransformState.ts

@@ -0,0 +1,250 @@
+import { computed, ref, watch } from 'vue'
+
+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 size class object for managing sizes/ объект класса для управления размерами
+   */
+  constructor(
+    props: MotionTransformProps,
+    protected element: MotionTransformElement,
+    protected size: MotionTransformSize
+  ) {
+    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()
+    }
+
+    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

@@ -0,0 +1,121 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { ConstrBind } from '@dxtmisha/functional'
+
+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
+}
+
+/**
+ * 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 {
+  /** 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<MotionTransformProps>
+}

package/src/constructors/MotionTransform/index.ts

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

@@ -0,0 +1,35 @@
+{
+  "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": {
+      "content": "none"
+    },
+    "group|plane": {
+      "link|plane": "{??adaptive.planeAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/MotionTransform/props.ts

@@ -0,0 +1,50 @@
+interface MotionTransformPropsToken {
+  // :type [!] System label / Системная метка
+  section?: boolean
+  animationHeadPosition?: 'top' | 'toBottom'
+  adaptive?: 'planeAlways'
+  // :type [!] System label / Системная метка
+}
+
+export interface MotionTransformPropsBasic {
+  // Status
+  'open'?: boolean
+
+  // Value
+  'ignore'?: HTMLElement | string
+  'ignoreSelector'?: string
+
+  // Style
+  'clickOpen'?: boolean
+  'autoClose'?: boolean
+  'animationShow'?: boolean
+
+  // Event
+  'modelOpen'?: boolean
+  'onUpdate:open'?: (value: boolean) => void
+  'onUpdate:modelOpen'?: (value: boolean) => void
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface MotionTransformProps extends MotionTransformPropsBasic, MotionTransformPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsMotionTransform = {
+  clickOpen: true,
+  autoClose: true,
+  animationShow: true,
+  ...{
+    // :default [!] System label / Системная метка
+    animationHeadPosition: 'top'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/MotionTransform/style.scss

@@ -0,0 +1,180 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinMotionTransform {
+  @include ui.initByCustom('sys.left', auto);
+  @include ui.initByCustom('sys.top', auto);
+  @include ui.initByCustom('sys.height', auto);
+  @include ui.initByCustom('sys.scale', 1);
+  @include ui.initByCustom('sys.context.width', auto);
+  @include ui.initByCustom('sys.context.height', auto);
+  @include ui.initByCustom('sys.head.width', auto);
+  @include ui.initByCustom('sys.head.height', auto);
+  @include ui.initByCustom('sys.head.scale', 1);
+  @include ui.initByCustom('sys.body.height', auto);
+
+  position: relative;
+
+  height: ui.v('??sys.head.height', auto);
+
+  background-color: transparent;
+  box-shadow: none;
+
+  content: "--WINDOW--";
+
+  transition-property: background-color, box-shadow, height, transform, scale;
+  transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
+  transition-duration: ui.v('d.sys.transitionDuration.container.close');
+
+  &__context {
+    width: ui.v('??sys.context.width', auto);
+    height: ui.v('??sys.context.height', auto);
+
+    content: "--ANIMATION--";
+  }
+
+  &__head {
+    opacity: 1;
+  }
+
+  &__body {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+
+    transition: opacity 67ms linear 50ms;
+  }
+
+  &__backdrop {
+    position: sticky;
+    top: 0;
+  }
+
+  &__background {
+    visibility: hidden;
+    position: fixed;
+    inset: 0;
+    opacity: 0;
+
+    transition-property: opacity, visibility;
+    transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
+    transition-duration: ui.v('d.sys.transitionDuration.container.close');
+  }
+
+  &[data-teleport="teleport"] {
+    position: fixed;
+    overflow-x: hidden;
+    overflow-y: auto;
+    @include ui.inset();
+    z-index: ui.v('??zIndex');
+
+    height: ui.v('??sys.height', auto);
+
+    background: ui.v('??backgroundFull');
+    @include ui.gradient(ui.v('??backgroundColor'));
+    @include ui.scale(ui.v('??sys.scale', 1));
+    transform-origin: ui.v('??sys.left', auto) ui.v('??sys.top', auto);
+
+    @include ui.subclass('head') {
+      width: ui.v('??sys.head.width', auto);
+
+      @include ui.scale(ui.v('??sys.head.scale', 1));
+      transform-origin: ui.dirLeft() top;
+    }
+  }
+
+  &[data-show="show"] {
+    overflow-y: hidden;
+
+    @include ui.subclass('head') {
+      transition: opacity 67ms linear 50ms, visibility 67ms linear 50ms;
+
+      > * {
+        margin-top: 0 !important;
+      }
+    }
+  }
+
+  &[data-open="open"] {
+    height: ui.v('??sys.body.height', auto);
+
+    @include ui.subclass('head') {
+      visibility: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      opacity: 0;
+    }
+
+    @include ui.subclass('body') {
+      position: static;
+      opacity: 1;
+
+      transition: opacity 60ms linear 60ms;
+    }
+
+    &[data-show="show"] {
+      @include ui.subclass('head') {
+        transition: opacity 60ms linear 60ms, visibility 60ms linear 60ms;
+      }
+    }
+
+    &[data-teleport="teleport"] {
+      height: 100%;
+
+      box-shadow: ui.v('??boxShadow');
+
+      @include ui.scale(none);
+
+      transition-duration: ui.v('d.sys.transitionDuration.container.open');
+    }
+  }
+
+  &--section {
+    @include ui.subclass('head') {
+      visibility: visible;
+      position: static;
+      opacity: 1;
+
+      transition-property: transform, scale;
+      transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
+      transition-duration: ui.v('d.sys.transitionDuration.container.close');
+    }
+
+    @include ui.subclass('body') {
+      position: static;
+    }
+
+    &[data-open="open"] {
+      @include ui.subclass('head') {
+        visibility: visible;
+        position: static;
+        opacity: 1;
+
+        @include ui.scale(none);
+
+        transition-property: transform, scale;
+        transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
+        transition-duration: ui.v('d.sys.transitionDuration.container.open');
+      }
+    }
+  }
+
+  &--animationHeadPosition--toBottom:not([data-teleport="teleport"]):not(&--section) {
+    &[data-show="show"] {
+      @include ui.subclass('head') {
+        position: absolute;
+      }
+    }
+
+    @include ui.subclass('body') {
+      top: auto;
+      bottom: 0;
+    }
+
+    @include ui.subclass('head') {
+      top: auto;
+      bottom: 0;
+    }
+  }
+}