@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Modal/ModalDesign.tsx

@@ -0,0 +1,63 @@
+import { ModalDesignAbstract } from './ModalDesignAbstract'
+import { Modal } from './Modal'
+
+import {
+  type ModalPropsBasic
+} from './props'
+import {
+  type ModalClasses,
+  type ModalComponents,
+  type ModalEmits,
+  type ModalExpose,
+  type ModalSlots
+} from './types'
+
+/**
+ * ModalDesign
+ */
+export class ModalDesign<
+  COMP extends ModalComponents,
+  EXPOSE extends ModalExpose,
+  CLASSES extends ModalClasses,
+  P extends ModalPropsBasic
+> extends ModalDesignAbstract<
+    COMP,
+    ModalEmits,
+    EXPOSE,
+    ModalSlots,
+    CLASSES,
+    P,
+    Modal
+  > {
+  protected initItem(): Modal {
+    return new Modal(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        title: this.getSubClass('title'),
+        header: this.getSubClass('header'),
+        body: this.getSubClass('body'),
+        footer: this.getSubClass('footer')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+}

package/src/constructors/Modal/ModalDesignAbstract.tsx

@@ -0,0 +1,226 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  toBinds
+} from '@dxtmisha/functional'
+
+import type { ModalAbstract } from './ModalAbstract'
+import type { WindowControlItem } from '../Window'
+import {
+  type ModalPropsBasic
+} from './props'
+import {
+  type ModalClasses,
+  type ModalComponents,
+  type ModalEmits,
+  type ModalExpose,
+  type ModalSlots
+} from './types'
+
+/**
+ * ModalDesign
+ */
+export abstract class ModalDesignAbstract<
+  COMP extends ModalComponents,
+  EMITS extends ModalEmits,
+  EXPOSE extends ModalExpose,
+  SLOTS extends ModalSlots,
+  CLASSES extends ModalClasses,
+  P extends ModalPropsBasic,
+  ITEM extends ModalAbstract = ModalAbstract
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    EMITS,
+    EXPOSE,
+    SLOTS,
+    CLASSES,
+    P
+  > {
+  protected readonly item: ITEM
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, EMITS, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = this.initItem()
+    this.init()
+  }
+
+  /**
+   * Initialization of the main item
+   *
+   * Инициализация основного элемента
+   */
+  protected abstract initItem(): ITEM
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      ...this.item.window.expose
+    } as EXPOSE
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.window.render(
+      {
+        control: this.renderControl,
+        title: this.renderTitle,
+        default: this.renderDefault,
+        footer: this.renderFooter
+      },
+      toBinds(
+        {
+          class: this.classes?.value.main
+        },
+        this.getAttrs()
+      )
+    )
+  }
+
+  /**
+   * Generates data for control.<br>
+   * Генерирует данные для контроля.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderControl = (
+    props: WindowControlItem
+  ): VNode | undefined => {
+    return this.initSlot('control', undefined, props)
+  }
+
+  /**
+   * Generates data for the header.
+   *
+   * Генерирует данные для заголовка.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderTitle = (
+    props: WindowControlItem
+  ): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.bars.is.value) {
+      children.push(...this.item.bars.render())
+    }
+
+    if (
+      this.slots
+      && 'title' in this.slots
+    ) {
+      children.push(
+        h(
+          'div',
+          { class: this.classes?.value.title },
+          this.initSlot('title', undefined, props)
+        )
+      )
+    }
+
+    return children
+  }
+
+  /**
+   * Generates bodies.
+   *
+   * Генерирует тела.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderDefault = (
+    props: WindowControlItem
+  ): VNode[] => {
+    const children: any[] = []
+
+    if (
+      this.slots
+      && 'header' in this.slots
+    ) {
+      children.push(
+        h(
+          'div',
+          { class: this.classes?.value.header },
+          this.initSlot('header', undefined, props)
+        )
+      )
+    }
+
+    if (
+      this.slots
+      && 'default' in this.slots
+    ) {
+      children.push(
+        h(
+          'div',
+          { class: this.classes?.value.body },
+          this.initSlot('default', undefined, props)
+        )
+      )
+    }
+
+    return children
+  }
+
+  /**
+   * Generates data for the required part.
+   *
+   * Генерирует данные для нужной части.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderFooter = (
+    props: WindowControlItem
+  ): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.actions.is.value) {
+      children.push(...this.item.actions.render())
+    }
+
+    if (
+      this.slots
+      && 'footer' in this.slots
+    ) {
+      children.push(
+        h(
+          'div',
+          { class: this.classes?.value.footer },
+          this.initSlot('footer', undefined, props)
+        )
+      )
+    }
+
+    return children
+  }
+}

package/src/constructors/Modal/index.ts

@@ -0,0 +1,5 @@
+export * from './Modal'
+export * from './ModalDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Modal/properties.json

@@ -0,0 +1,17 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#body": {},
+  "#footer": {},
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  }
+}

package/src/constructors/Modal/props.ts

@@ -0,0 +1,45 @@
+import type { WindowPropsBasic, WindowPropsInclude } from '../Window'
+import type { BarsPropsBasic, BarsPropsInclude } from '../Bars'
+import type { ActionsPropsBasic, ActionsPropsInclude } from '../Actions'
+import type { ImagePropsBasic, ImagePropsInclude } from '../Image'
+
+interface ModalPropsToken {
+  // :type [!] System label / Системная метка
+  imagePosition?: 'top' | 'left'
+  // :type [!] System label / Системная метка
+}
+
+export interface ModalPropsBasic<
+  Window extends WindowPropsBasic = WindowPropsBasic,
+  Bars extends BarsPropsBasic = BarsPropsBasic,
+  Actions extends ActionsPropsBasic = ActionsPropsBasic,
+  Image extends ImagePropsBasic = ImagePropsBasic
+> extends WindowPropsInclude<Window>,
+  BarsPropsInclude<Bars>,
+  ActionsPropsInclude<Actions>,
+  ImagePropsInclude<Image> {
+  // Status
+  open?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ModalProps extends ModalPropsBasic, ModalPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsModal = {
+  barsBackHide: true,
+  ...{
+    // :default [!] System label / Системная метка
+    imagePosition: 'top'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Modal/style.scss

@@ -0,0 +1,20 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinModal {
+  @include ui.initByCustomDesign('window.iconPaddingX', ui.v('??paddingX'));
+  @include ui.initByCustomDesign('window.iconPaddingY', ui.v('??paddingY'));
+
+  &__title,
+  &__header,
+  &__body,
+  &__footer {
+    @include ui.paddingX(ui.v('??paddingX'));
+    @include ui.paddingY(ui.v('??paddingY'));
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+}

package/src/constructors/Modal/types.ts

@@ -0,0 +1,62 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type {
+  WindowComponentInclude,
+  WindowControlItem,
+  WindowEmitsInclude,
+  WindowExposeInclude,
+  WindowSlots
+} from '../Window'
+import type { BarsComponentInclude, BarsEmitsInclude } from '../Bars'
+import type { ActionsComponentInclude, ActionsEmitsInclude } from '../Actions'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ModalComponents
+  = WindowComponentInclude
+    & BarsComponentInclude
+    & ActionsComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ModalEmits
+  = WindowEmitsInclude
+    & BarsEmitsInclude
+    & ActionsEmitsInclude
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ModalExpose extends WindowExposeInclude {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ModalSlots extends WindowSlots {
+  header(props: WindowControlItem): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ModalClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  title: string
+  header: string
+  body: string
+  footer: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/MotionTransform/MotionTransform.ts

@@ -1,16 +1,26 @@
-import { onUnmounted, type Ref, type ToRefs, watch } from 'vue'
+import { computed, onUnmounted, type Ref, type ToRefs, watch } from 'vue'
 import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+import { ModelInclude } from '../../classes/ModelInclude'
+import { TabIndexInclude } from '../../classes/TabIndexInclude'
+
 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 { WindowEsc } from '../Window/WindowEsc'
+
+import type { RoleType } from '../../types/roleTypes'
+import type {
+  MotionTransformComponents,
+  MotionTransformEmits,
+  MotionTransformSlots
+} from './types'
 import type { MotionTransformProps } from './props'
 import type { MotionTransformControlItem } from './basicTypes'
-import { ModelInclude } from '../../classes/ModelInclude'
 
 /**
  * MotionTransform
@@ -18,6 +28,7 @@ import { ModelInclude } from '../../classes/ModelInclude'
 export class MotionTransform {
   /** Reference helper for element interactions/ Вспомогательный класс для работы с элементами */
   readonly element: MotionTransformElement
+  readonly tabIndex: TabIndexInclude<HTMLDivElement>
 
   /** Size calculation manager/ Менеджер расчёта размеров */
   readonly size: MotionTransformSize
@@ -29,6 +40,9 @@ export class MotionTransform {
   /** Control actions manager/ Менеджер действий управления */
   readonly go: MotionTransformGo
 
+  /** Window esc manager/ Менеджер esc окна */
+  readonly esc: WindowEsc
+
   /**
    * Constructor
    * @param props input data/ входные данные
@@ -58,13 +72,27 @@ export class MotionTransform {
       elementContext,
       className
     )
+    this.tabIndex = new TabIndexInclude(
+      () => this.element.getElementBody()
+    )
 
     this.size = new MotionTransformSize(this.element)
-    this.state = new MotionTransformState(props, this.element, this.size)
+    this.state = new MotionTransformState(
+      props,
+      this.element,
+      this.tabIndex,
+      this.size
+    )
 
     this.event = new MotionTransformEvent(props, this.element, this.state, emits)
     this.go = new MotionTransformGo(this.state)
 
+    this.esc = new WindowEsc(
+      this.state.open,
+      () => this.go.close(),
+      () => this.element.isWindow()
+    )
+
     new ModelInclude('open', this.emits, this.state.open)
 
     watch([refs.open], () => this.state.set(Boolean(props.open)))
@@ -72,16 +100,45 @@ export class MotionTransform {
     onUnmounted(() => this.event.stop())
   }
 
+  /**
+   * Computed slot data for managing slots/
+   * Вычисляемые данные слотов для управления слотами
+   */
+  readonly slotData = computed<MotionTransformControlItem>(() => {
+    return {
+      isOpen: this.state.isOpen,
+      isShow: this.state.isShow,
+      classes: MotionTransformElement.getClassesList(this.className),
+      idControl: this.element.idControl,
+      idBody: this.element.idBody,
+      binds: AriaStaticInclude.control(
+        this.element.idControl,
+        this.element.idBody,
+        undefined,
+        this.state.isOpen.value
+      )
+    }
+  })
+
   /**
    * Returns data for managing slot data.
    *
    * Возвращает данные для управления данными слотами.
    */
   getSlotData(): MotionTransformControlItem {
-    return {
-      isOpen: this.state.isOpen,
-      isShow: this.state.isShow,
-      classes: MotionTransformElement.getClassesList(this.className)
+    return this.slotData.value
+  }
+
+  /**
+   * Get the ARIA role.
+   *
+   * Получить ARIA роль.
+   */
+  getRole(): RoleType {
+    if (this.element.isWindow()) {
+      return 'dialog'
     }
+
+    return 'region'
   }
 }

package/src/constructors/MotionTransform/MotionTransformDesign.tsx

@@ -1,10 +1,11 @@
-import { h, ref, Teleport, type VNode } from 'vue'
+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 {
@@ -155,13 +156,7 @@ export class MotionTransformDesign<
     return [
       h(
         'div',
-        {
-          ...this.getAttrs(),
-          ref: this.element,
-          key: 'main',
-          class: this.classes?.value.main,
-          onTransitionend: this.item.event.onTransitionend
-        },
+        this.propsMain.value,
         [
           ...this.renderHead(),
           ...this.renderBody()
@@ -175,15 +170,11 @@ export class MotionTransformDesign<
    *
    * Рендеринг заголовка.
    */
-  readonly renderHead = (): VNode[] => {
+  readonly renderHead = () => {
     return [
       h(
         'div',
-        {
-          key: 'head',
-          class: this.classes?.value.head,
-          onClick: this.item.event.onClick
-        },
+        this.propsHead.value,
         this.initSlot(
           'head',
           undefined,
@@ -198,15 +189,15 @@ export class MotionTransformDesign<
    *
    * Рендеринг содержимого.
    */
-  readonly renderBody = (): VNode[] => {
-    if (this.item.state.isShow.value) {
+  readonly renderBody = () => {
+    if (
+      this.props.inDom
+      || this.item.state.isShow.value
+    ) {
       return [
         h(
-          'div',
-          {
-            key: 'body',
-            class: this.classes?.value.body
-          },
+          this.props.tagBody ?? 'div',
+          this.propsBody.value,
           this.initSlot(
             'body',
             undefined,
@@ -239,4 +230,47 @@ export class MotionTransformDesign<
 
     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
+      )
+    }
+  })
 }