@dxtmisha/constructor 0.23.0

package/src/constructors/Menu/index.ts

@@ -0,0 +1,6 @@
+export * from './Menu'
+export * from './MenuDesign'
+export * from './MenuInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Menu/properties.json

@@ -0,0 +1,17 @@
+{
+  "barsDisplay": {
+    "_type": "var"
+  },
+  "#bars": {},
+  "#list": {},
+  "~hideList": {},
+  "~barsAdaptive": {
+    "showAlways": {
+      "barsDisplay": "flex"
+    },
+    "group|show": {
+      "link|barsAdaptive-show": "{??barsAdaptive.showAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/Menu/props.ts

@@ -0,0 +1,79 @@
+import type {
+  ApiFetch,
+  ConstrBind,
+  ListRecord,
+  ListSelectedList,
+  NormalOrPromise
+} from '@dxtmisha/functional'
+
+import type { ListPropsBasic } from '../List'
+import type { ListItemProps, ListItemPropsBasic } from '../ListItem'
+import type { BarsPropsBasic, BarsPropsInclude } from '../Bars'
+import type { WindowPropsBasic, WindowPropsInclude } from '../Window'
+import type { ModelProps } from '../../types/modelTypes'
+
+interface MenuPropsToken {
+  // :type [!] System label / Системная метка
+  hideList?: boolean
+  barsAdaptive?: 'showAlways'
+  // :type [!] System label / Системная метка
+}
+
+export interface MenuPropsBasic<
+  List extends ListPropsBasic = ListPropsBasic,
+  ListItem extends ListItemPropsBasic = ListItemPropsBasic,
+  Bars extends BarsPropsBasic = BarsPropsBasic,
+  Window extends WindowPropsBasic = WindowPropsBasic
+> extends BarsPropsInclude<Bars>,
+  WindowPropsInclude<Window>,
+  ModelProps {
+  // Status
+  selected?: ListSelectedList
+  highlightLengthStart?: number
+  hideList?: boolean
+
+  // Value
+  list?: ListRecord<ListItem>
+  liteThreshold?: number
+
+  ajax?: string | (() => NormalOrPromise<ListRecord<ListItem>>)
+  request?: ApiFetch
+  cache?: boolean
+
+  keyLabel?: string
+  keyValue?: string
+
+  // Style
+  tag?: ListItemProps['tag']
+
+  listAttrs?: ConstrBind<List>
+  itemAttrs?: ConstrBind<ListItem>
+
+  // Technical
+  isSelectedByValue?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface MenuProps extends MenuPropsBasic, MenuPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsMenu = {
+  liteThreshold: 40,
+  barsHide: true,
+  barsBackHide: true,
+  tag: 'a',
+  autoClose: true,
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Menu/style.scss

@@ -0,0 +1,17 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinMenu {
+  &__bars {
+    display: ui.v('??barsDisplay', none) !important;
+  }
+
+  &__list {
+    overflow: hidden;
+  }
+
+  &--hideList {
+    @include ui.subclass('list') {
+      display: none;
+    }
+  }
+}

package/src/constructors/Menu/types.ts

@@ -0,0 +1,79 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { EventClickEmits } from '../../types/eventClickTypes'
+
+import type { ListComponentInclude, ListSlots } from '../List'
+import type { BarsComponentInclude, BarsEmitsInclude } from '../Bars'
+import type { WindowComponentInclude, WindowEmitsInclude, WindowExposeInclude } from '../Window'
+import type { ModelEmits } from '../../types/modelTypes'
+
+import type { MenuControlBasic, MenuControlItem } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type MenuComponents
+  = ListComponentInclude
+    & BarsComponentInclude
+    & WindowComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type MenuEmits
+  = BarsEmitsInclude
+    & EventClickEmits
+    & WindowEmitsInclude
+    & ModelEmits
+    & {
+      clickSlot: [value?: string]
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface MenuExpose extends WindowExposeInclude, MenuControlBasic {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export type MenuSlots
+  = ListSlots
+    & {
+      /** Control slot for window management / Слот управления для управления окном */
+      control?(props: MenuControlItem): any
+
+      /** Footer slot for window bottom / Слот подвала для низа окна */
+      title?(props: MenuControlItem): any
+
+      /** Footer slot for window bottom/ Слот подвала для низа окна */
+      footer?(props: MenuControlItem): any
+
+      /** Context slot for top area / Слот контекстной области сверху */
+      contextTop?(props: MenuControlItem): any
+
+      /** Context slot for bottom area / Слот контекстной области снизу */
+      contextBottom?(props: MenuControlItem): any
+    }
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type MenuClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  bars: string
+  list: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/MotionTransform/MotionTransform.ts

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

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

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