@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/ActionSheet/ActionSheetDesign.tsx

@@ -0,0 +1,125 @@
+import { h, type VNode } from 'vue'
+import { toBinds } from '@dxtmisha/functional'
+
+import { ModalDesignAbstract } from '../Modal/ModalDesignAbstract'
+import { ActionSheet } from './ActionSheet'
+
+import { type WindowControlItem } from '../Window'
+import {
+  type ActionSheetPropsBasic
+} from './props'
+import {
+  type ActionSheetClasses,
+  type ActionSheetComponents,
+  type ActionSheetEmits,
+  type ActionSheetExpose,
+  type ActionSheetSlots
+} from './types'
+
+/**
+ * ActionSheetDesign
+ */
+export class ActionSheetDesign<
+  COMP extends ActionSheetComponents,
+  EXPOSE extends ActionSheetExpose,
+  CLASSES extends ActionSheetClasses,
+  P extends ActionSheetPropsBasic
+> extends ModalDesignAbstract<
+    COMP,
+    ActionSheetEmits,
+    EXPOSE,
+    ActionSheetSlots,
+    CLASSES,
+    P,
+    ActionSheet
+  > {
+  /**
+   * Creates an instance of the item class.
+   *
+   * Создает экземпляр класса элемента.
+   */
+  protected initItem(): ActionSheet {
+    return new ActionSheet(
+      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'),
+        touch: this.getSubClass('touch'),
+        tab: this.getSubClass('tab')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.window.render(
+      {
+        control: this.renderControl,
+        title: this.renderTitleTouch,
+        default: this.renderDefault,
+        footer: this.renderFooter
+      },
+      toBinds(
+        {
+          'class': this.classes?.value.main,
+          'data-touch': 'touch'
+        },
+        this.getAttrs()
+      )
+    )
+  }
+
+  /**
+   * Generates data for the header.
+   *
+   * Генерирует данные для заголовка.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected readonly renderTitleTouch = (
+    props: WindowControlItem
+  ): VNode[] => {
+    const children: any[] = this.renderTitle(props)
+
+    if (this.props.touchClose) {
+      return [h(
+        'div',
+        {
+          class: this.classes?.value.touch,
+          ...this.item.touchEvent.onTouch
+        },
+        [
+          h('div', { class: this.classes?.value.tab }),
+          ...children
+        ]
+      )]
+    }
+
+    return children
+  }
+}

package/src/constructors/ActionSheet/index.ts

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

package/src/constructors/ActionSheet/properties.json

@@ -0,0 +1,14 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#body": {},
+  "#footer": {},
+  "#touch": {},
+  "#tab": {}
+}

package/src/constructors/ActionSheet/props.ts

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

package/src/constructors/ActionSheet/style.scss

@@ -0,0 +1,25 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Modal/style" as modal;
+
+@mixin mixinActionSheet {
+  @include modal.mixinModal;
+
+  top: var(--sys-touch-move-y, 0);
+
+  &__footer {
+    justify-content: center;
+  }
+
+  &__tab {
+    display: none;
+
+    @media (hover: none) and (pointer: coarse) {
+      display: block;
+      margin: auto;
+    }
+  }
+
+  &__touch {
+    touch-action: none;
+  }
+}

package/src/constructors/ActionSheet/types.ts

@@ -0,0 +1,54 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type {
+  ModalComponents,
+  ModalEmits,
+  ModalExpose,
+  ModalSlots
+} from '../Modal'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ActionSheetComponents = ModalComponents
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ActionSheetEmits = ModalEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ActionSheetExpose extends ModalExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ActionSheetSlots extends ModalSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ActionSheetClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  title: string
+  header: string
+  body: string
+  footer: string
+  touch: string
+  tab: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Actions/Actions.ts

@@ -0,0 +1,60 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+
+import type { ActionsComponents, ActionsEmits, ActionsSlots } from './types'
+import type { ActionsProps } from './props'
+
+/**
+ * Actions
+ */
+export class Actions {
+  readonly event: EventClickInclude
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element input 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: ActionsProps,
+    protected readonly refs: ToRefs<ActionsProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ActionsComponents, ActionsProps>,
+    protected readonly slots?: ActionsSlots,
+    protected readonly emits?: ConstrEmit<ActionsEmits>
+  ) {
+    this.event = new EventClickInclude(
+      undefined,
+      undefined,
+      emits
+    )
+  }
+
+  /**
+   * Checks if the main list needs to be displayed/
+   * Проверяет, нужно ли выводить главный список
+   */
+  readonly isList = computed<boolean>(() => Boolean(
+    this.props.list
+    || (this.slots && 'default' in this.slots)
+  ))
+
+  /**
+   * Checks if the secondary list needs to be displayed/
+   * Проверяет, нужно ли выводить второстепенный список
+   */
+  readonly isSecondary = computed<boolean>(() => Boolean(
+    this.props.listSecondary
+    || (this.slots && 'secondary' in this.slots)
+  ))
+}

package/src/constructors/Actions/ActionsDesign.tsx

@@ -0,0 +1,212 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Actions } from './Actions'
+
+import {
+  type ActionsPropsBasic
+} from './props'
+import {
+  type ActionsClasses,
+  type ActionsComponents,
+  type ActionsEmits,
+  type ActionsExpose,
+  type ActionsSlots
+} from './types'
+
+/**
+ * ActionsDesign
+ */
+export class ActionsDesign<
+  COMP extends ActionsComponents,
+  EXPOSE extends ActionsExpose,
+  CLASSES extends ActionsClasses,
+  P extends ActionsPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ActionsEmits,
+    EXPOSE,
+    ActionsSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Actions
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ActionsEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Actions(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work
+   *
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {} as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        item: this.getSubClass('item'),
+        list: this.getSubClass('list'),
+        secondary: this.getSubClass('secondary'),
+        spacer: this.getSubClass('spacer')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    return h(
+      'div',
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main
+      },
+      [
+        ...this.renderList(),
+        ...this.renderSpacer(),
+        ...this.renderSecondary()
+      ]
+    )
+  }
+
+  /**
+   * List rendering.
+   *
+   * Рендеринг списка.
+   */
+  protected readonly renderList = (): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.isList.value) {
+      if (this.props.list) {
+        this.props.list.forEach((item, key) => {
+          this.components.renderAdd(
+            children,
+            'button',
+            toBinds(
+              {
+                onClick: this.item.event.onClick
+              },
+              this.props.buttonAttrs,
+              item,
+              {
+                class: [
+                  this.classes?.value.item,
+                  this.classes?.value.list
+                ]
+              }
+            ),
+            undefined,
+            `list-${key}`
+          )
+        })
+      }
+
+      this.initSlot('default', children)
+    }
+
+    return children
+  }
+
+  /**
+   * Secondary list rendering.
+   *
+   * Рендеринг вторичного списка.
+   */
+  protected readonly renderSecondary = (): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.isSecondary.value) {
+      if (this.props.listSecondary) {
+        this.props.listSecondary.forEach((item, key) => {
+          this.components.renderAdd(
+            children,
+            'button',
+            toBinds(
+              this.props.buttonSecondaryAttrs,
+              item,
+              {
+                class: [
+                  this.classes?.value.item,
+                  this.classes?.value.secondary
+                ]
+              }
+            ),
+            undefined,
+            `secondary-${key}`
+          )
+        })
+      }
+
+      this.initSlot('secondary', children)
+    }
+
+    return children
+  }
+
+  /**
+   * Separator rendering.
+   *
+   * Рендеринг разделителя.
+   */
+  protected readonly renderSpacer = (): VNode[] => {
+    return [h('div', { class: this.classes?.value.spacer })]
+  }
+}

package/src/constructors/Actions/ActionsInclude.ts

@@ -0,0 +1,109 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  type ConstrEmit,
+  DesignComponents,
+  getRef,
+  type RefOrNormal,
+  toBinds
+} from '@dxtmisha/functional'
+
+import type { EventClickValue } from '../../types/eventClickTypes'
+
+import type { ActionsComponentInclude, ActionsEmitsInclude, ActionsPropsInclude } from './basicTypes'
+import type { ActionsProps } from './props'
+
+/**
+ * ActionsInclude class provides functionality for conditionally rendering actions components
+ * within other components. It manages the logic for determining when to display actions
+ * and configures the appropriate properties.
+ *
+ * Класс ActionsInclude предоставляет функциональность для условного рендеринга компонентов
+ * действий внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения действий и настраивает соответствующие свойства.
+ */
+export class ActionsInclude<
+  Props extends ActionsPropsInclude = ActionsPropsInclude,
+  PropsExtra extends ConstrBind<ActionsProps> = ConstrBind<ActionsProps>
+> {
+  /**
+   * 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<ActionsComponentInclude, Props>,
+    protected readonly emits?: ConstrEmit<ActionsEmitsInclude>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Checks whether actions should be displayed/
+   * Проверяет, нужно ли отображать действия
+   */
+  readonly is = computed(() => Boolean(
+    !this.props.actionsHide
+    && (
+      this.binds.value.list
+      || this.binds.value.listSecondary
+    )
+  ))
+
+  /** Computed bindings for the actions/ Вычисляемые привязки для действий */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.props.actionsAttrs,
+      { class: `${this.className}__actions` }
+    )
+
+    return {
+      ...props,
+
+      list: this.props.actionsList ?? props.list,
+      listSecondary: this.props.actionsSecondary ?? props.listSecondary,
+      onClick: this.onClick
+    }
+  })
+
+  /**
+   * Render the Actions component
+   *
+   * Рендер компонента действий
+   */
+  readonly render = (): VNode[] => {
+    if (
+      this.components
+      && this.is.value
+    ) {
+      return this.components.render(
+        'actions',
+        this.binds.value,
+        undefined,
+        this.index
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Handles click events from Actions and emits related events/
+   * Обрабатывает клики по действиям и испускает связанные события
+   *
+   * @param event native mouse event/ native событие мыши
+   * @param value payload with { type, value, detail }/ данные события с { type, value, detail }
+   */
+  protected readonly onClick = (event: MouseEvent, value: EventClickValue) => {
+    this.emits?.('actions', event, value)
+    this.emits?.('actionsLite', value)
+  }
+}

package/src/constructors/Actions/basicTypes.ts

@@ -0,0 +1,40 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { EventClickEmits } from '../../types/eventClickTypes'
+import type { ActionsPropsBasic } from './props'
+
+/**
+ * Component map for including the Actions component/
+ * Карта компонентов для подключения компонента Actions
+ */
+export type ActionsComponentInclude = {
+  actions?: object
+}
+
+/** Available events for Actions/ Доступные события для Actions */
+export type ActionsEmitsInclude = {
+  actions: EventClickEmits['click']
+  actionsLite: EventClickEmits['clickLite']
+}
+
+/**
+ * Props used to include and configure the Actions component/
+ * Свойства для подключения и настройки компонента Actions
+ */
+export interface ActionsPropsInclude<
+  Actions extends ActionsPropsBasic = ActionsPropsBasic
+> {
+  // Status
+  /** Hide actions/ Скрыть действия */
+  actionsHide?: boolean
+
+  // Value
+  /** List of action buttons/ Список кнопок действий */
+  actionsList?: ConstrBind<Actions['list']>
+  /** List of secondary action buttons/ Список вторичных кнопок действий */
+  actionsSecondary?: ConstrBind<Actions['listSecondary']>
+
+  // Style
+  /** Additional attributes for Actions component/ Дополнительные атрибуты для компонента Actions */
+  actionsAttrs?: ConstrBind<Actions>
+}

package/src/constructors/Actions/index.ts

@@ -0,0 +1,6 @@
+export * from './Actions'
+export * from './ActionsDesign'
+export * from './ActionsInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'