@dxtmisha/constructor 0.23.0

package/src/constructors/Bars/BarsInclude.ts

@@ -0,0 +1,116 @@
+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 { BarsComponentInclude, BarsEmitsInclude, BarsPropsInclude } from './basicTypes'
+import type { BarsProps } from './props'
+
+/**
+ * BarsInclude class provides functionality for conditionally rendering bars components
+ * within other components. It manages the logic for determining when to display bars
+ * and configures the appropriate properties.
+ *
+ * Класс BarsInclude предоставляет функциональность для условного рендеринга компонентов
+ * панелей действий внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения панелей и настраивает соответствующие свойства.
+ */
+export class BarsInclude<
+  Props extends BarsPropsInclude = BarsPropsInclude,
+  PropsExtra extends ConstrBind<BarsProps> = ConstrBind<BarsProps>
+> {
+  /**
+   * 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<BarsComponentInclude, Props>,
+    protected readonly emits?: ConstrEmit<BarsEmitsInclude>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Checks whether bars should be displayed/
+   * Проверяет, нужно ли отображать панели
+   */
+  readonly is = computed(() => Boolean(
+    this.props.barsLabel
+    || this.props.barsDescription
+    || this.props.barsBackHide !== true
+  ))
+
+  /** Computed bindings for the bars/ Вычисляемые привязки для панелей */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.props.barsAttrs,
+      { class: `${this.className}__bars` }
+    )
+
+    return {
+      ...props,
+
+      label: this.props.barsLabel,
+      description: this.props.barsDescription,
+      backHide: this.props.barsBackHide,
+      bars: this.props.barsList
+    }
+  })
+
+  /**
+   * Render the Bars component
+   *
+   * Рендер компонента панелей
+   */
+  readonly render = (): VNode[] => {
+    console.log('this.props.barsHide', this.props.barsHide)
+    if (
+      this.components
+      && !this.props.barsHide
+    ) {
+      return this.components.render(
+        'bars',
+        {
+          ...this.binds.value,
+          onClick: this.onClick
+        },
+        undefined,
+        this.index ?? 'bars'
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Handles click events from Bars 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?.('bars', event, value)
+    this.emits?.('barsLite', value)
+
+    if (value.type === 'back') {
+      this.emits?.('barsBack', value)
+    }
+  }
+}

package/src/constructors/Bars/basicTypes.ts

@@ -0,0 +1,40 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { EventClickEmits } from '../../types/eventClickTypes'
+import type { BarsPropsBasic } from './props'
+
+/**
+ * Component map for including the Bars component/
+ * Карта компонентов для подключения компонента Bars
+ */
+export type BarsComponentInclude = {
+  bars?: object
+}
+
+/** Available events for Bars/ Доступные события для Bars */
+export type BarsEmitsInclude = {
+  bars: EventClickEmits['click']
+  barsLite: EventClickEmits['clickLite']
+  barsBack: EventClickEmits['clickLite']
+}
+
+/**
+ * Props used to include and configure the Bars component/
+ * Свойства для подключения и настройки компонента Bars
+ */
+export interface BarsPropsInclude<
+  Bars extends BarsPropsBasic = BarsPropsBasic
+> {
+  /** Bars label/ Метка панелей */
+  barsLabel?: string | number
+  /** Bars description/ Описание панелей */
+  barsDescription?: string
+  /** Hide back button/ Скрыть кнопку назад */
+  barsBackHide?: boolean
+  /** Hide bars/ Скрыть панели */
+  barsHide?: boolean
+  /** List of bar buttons/ Список кнопок панелей */
+  barsList?: Bars['bars']
+  /** Additional attributes for Bars component/ Дополнительные атрибуты для компонента Bars */
+  barsAttrs?: ConstrBind<Bars>
+}

package/src/constructors/Bars/index.ts

@@ -0,0 +1,6 @@
+export * from './Bars'
+export * from './BarsDesign'
+export * from './BarsInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Bars/properties.json

@@ -0,0 +1,6 @@
+{
+  "#context": {},
+  "#label": {},
+  "#description": {},
+  "~action": {}
+}

package/src/constructors/Bars/props.ts

@@ -0,0 +1,63 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { IconPropsBasic, IconValue } from '../Icon'
+import type { ButtonPropsBasic } from '../Button'
+import type { SkeletonPropsInclude } from '../Skeleton'
+
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+
+interface BarsPropsToken {
+  // :type [!] System label / Системная метка
+  action?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface BarsPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Button extends ButtonPropsBasic = ButtonPropsBasic
+> extends LabelProps,
+  DescriptionProps,
+  SkeletonPropsInclude
+{
+  // Value
+  'backButton'?: ConstrBind<Button>
+  'backHide'?: boolean
+  'backActionHide'?: boolean
+  'bars'?: ConstrBind<Button>[]
+
+  'actionLabel'?: LabelProps['label']
+  'actionDescription'?: DescriptionProps['description']
+  'actionBars'?: ConstrBind<Button>[]
+
+  // Style
+  'buttonAttrs'?: ConstrBind<Button>
+
+  'iconBack'?: IconValue<Icon>
+  'iconClose'?: IconValue<Icon>
+
+  // Event
+  'modelAction'?: boolean
+  'onUpdate:action'?: (value: boolean) => void
+  'onUpdate:modelAction'?: (value: boolean) => void
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface BarsProps extends BarsPropsBasic, BarsPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsBars = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Bars/style.scss

@@ -0,0 +1,18 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinBars {
+  display: flex;
+
+  transition: background-color ui.v('d.sys.transitionDuration.sm') linear;
+
+  &__context,
+  &__label {
+    @include ui.flexDynamic;
+  }
+
+  &__context > &__label {
+    width: calc(100% - 64px);
+    min-width: 80%;
+    @include ui.clamp(2);
+  }
+}

package/src/constructors/Bars/types.ts

@@ -0,0 +1,58 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { ButtonComponentInclude } from '../Button'
+import type { EventClickEmits } from '../../types/eventClickTypes'
+import type { LabelSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type BarsComponents = ButtonComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type BarsEmits
+  = EventClickEmits
+    & {
+      'update:action': [value: boolean]
+      'update:modelAction': [value: boolean]
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface BarsExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface BarsSlots extends LabelSlots, DescriptionSlots {
+  bars?(props: any): any
+
+  actionBars?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type BarsClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  context: string
+  label: string
+  description: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Button/Button.ts

@@ -0,0 +1,88 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrClass, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+
+import { LabelInclude } from '../../classes/LabelInclude'
+import { EnabledInclude } from '../../classes/EnabledInclude'
+
+import { IconTrailingInclude } from '../Icon'
+import { ProgressInclude } from '../Progress'
+import { RippleInclude } from '../Ripple'
+import { SkeletonInclude } from '../Skeleton'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+
+import type { ButtonComponents, ButtonEmits, ButtonSlots } from './types'
+import type { ButtonPropsBasic } from './props'
+
+/**
+ * Button
+ */
+export class Button {
+  readonly label: LabelInclude
+  readonly enabled: EnabledInclude
+
+  readonly icon: IconTrailingInclude
+  readonly progress: ProgressInclude
+  readonly ripple: RippleInclude
+  readonly skeleton: SkeletonInclude
+
+  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: ButtonPropsBasic,
+    protected readonly refs: ToRefs<ButtonPropsBasic>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ButtonComponents, ButtonPropsBasic>,
+    protected readonly slots?: ButtonSlots,
+    protected readonly emits?: ConstrEmit<ButtonEmits>
+  ) {
+    const progress = new ProgressInclude(
+      props,
+      className,
+      components,
+      {
+        circular: true,
+        inverse: true
+      }
+    )
+
+    this.label = new LabelInclude(props, className, undefined, slots)
+    this.enabled = new EnabledInclude(props, progress)
+
+    this.icon = new IconTrailingInclude(props, className, components)
+    this.progress = progress
+    this.ripple = new RippleInclude(className, components, this.enabled)
+    this.skeleton = new SkeletonInclude(
+      props,
+      classDesign,
+      ['classBackground']
+    )
+
+    this.event = new EventClickInclude(
+      props,
+      this.enabled,
+      emits
+    )
+  }
+
+  /** values for the class/ значения для класса */
+  readonly classes = computed<ConstrClass>(() => ({
+    [`${this.className}--icon`]: this.icon.isIcon.value,
+    [getClassTegAStatic(this.classDesign)]: true,
+    ...this.skeleton.classes.value
+  }))
+}

package/src/constructors/Button/ButtonDesign.tsx

@@ -0,0 +1,136 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Button } from './Button'
+
+import {
+  type ButtonPropsBasic
+} from './props'
+import {
+  type ButtonClasses,
+  type ButtonComponents,
+  type ButtonEmits,
+  type ButtonExpose,
+  type ButtonSlots
+} from './types'
+
+/**
+ * ButtonDesign
+ */
+export class ButtonDesign<
+  COMP extends ButtonComponents,
+  EXPOSE extends ButtonExpose,
+  CLASSES extends ButtonClasses,
+  P extends ButtonPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ButtonEmits,
+    EXPOSE,
+    ButtonSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Button
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ButtonEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Button(
+      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 {
+      ...this.item.event.expose
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classes.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        label: this.getSubClass('label'),
+        icon: this.getSubClass('icon'),
+        trailing: this.getSubClass('trailing'),
+        loading: this.getSubClass('loading')
+        // :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(
+      this.props.tag || 'button',
+      {
+        ...this.getAttrs(),
+        ref: this.element,
+
+        class: this.classes?.value.main,
+        style: this.styles?.value,
+
+        disabled: this.item.enabled.isDisabledOrUndefined.value,
+        onClick: this.item.event.onClick
+      },
+      [
+        ...this.item.progress.render(),
+        ...this.item.label.render(),
+        ...this.item.icon.render(),
+        ...this.item.ripple.render()
+      ]
+    )
+  }
+}

package/src/constructors/Button/ButtonInclude.ts

@@ -0,0 +1,80 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
+
+import type { ButtonComponentInclude, ButtonPropsInclude } from './basicTypes'
+import type { ButtonPropsBasic } from './props'
+
+/**
+ * ButtonInclude class provides functionality for conditionally rendering button components
+ * within other components. It manages the logic for determining when to display a button
+ * and configures the appropriate properties.
+ *
+ * Класс ButtonInclude предоставляет функциональность для условного рендеринга компонентов
+ * кнопки внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения кнопки и настраивает соответствующие свойства.
+ *
+ * @template Props - Properties interface extending ButtonPropsInclude
+ */
+export class ButtonInclude<Props extends ButtonPropsInclude = ButtonPropsInclude> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter/ дополнительный параметр
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<ButtonComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<ConstrBind<ButtonPropsBasic>>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Computed bindings for the button/ Вычисляемые привязки для кнопки
+   */
+  readonly binds = computed(
+    () => getBind(
+      getRef(this.props),
+      getRef(this.extra),
+      'label'
+    )
+  )
+
+  /**
+   * Renders the button component with provided properties and configuration.
+   * Returns an array of VNode elements representing the rendered button, or an empty
+   * array if the component cannot be rendered.
+   *
+   * Обрисовывает компонент кнопки с предоставленными свойствами и конфигурацией.
+   * Возвращает массив VNode элементов, представляющих отрисованную кнопку, или пустой
+   * массив, если компонент не может быть отрисованы.
+   *
+   * @param props additional properties/ дополнительные свойства
+   */
+  readonly render = (props?: RefOrNormal<ConstrBind<ButtonPropsBasic>>): VNode[] => {
+    if (
+      this.components
+      && (
+        ('label' in this.binds.value)
+        || ('icon' in this.binds.value)
+        || ('iconTrailing' in this.binds.value)
+      )
+    ) {
+      return this.components.render(
+        'button',
+        {
+          ...this.binds.value,
+          ...getRef(props)
+        },
+        undefined,
+        this.index ?? 'button'
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Button/basicTypes.ts

@@ -0,0 +1,12 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { ButtonPropsBasic } from './props'
+
+export type ButtonComponentInclude = {
+  button?: object
+}
+
+export interface ButtonPropsInclude<
+  Button extends ButtonPropsBasic = ButtonPropsBasic
+> {
+  buttonAttrs?: ConstrBind<Button>
+}

package/src/constructors/Button/index.ts

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