@dxtmisha/constructor 0.23.0

package/src/constructors/Badge/props.ts

@@ -0,0 +1,43 @@
+import type { IconPropsBasic, IconPropsInclude } from '../Icon'
+import type { LabelNumberProps } from '../../types/labelTypes'
+
+interface BadgePropsToken {
+  // :type [!] System label / Системная метка
+  selected?: boolean
+  hide?: boolean
+  dot?: boolean
+  overlap?: 'rectangular' | 'circular' | 'static'
+  vertical?: 'top' | 'center' | 'bottom'
+  horizontal?: 'right' | 'center' | 'left'
+  // :type [!] System label / Системная метка
+}
+
+export interface BadgePropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic
+> extends IconPropsInclude<Icon>,
+  LabelNumberProps {
+  dot?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface BadgeProps extends BadgePropsBasic, BadgePropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsBadge = {
+  ...{
+    // :default [!] System label / Системная метка
+    overlap: 'rectangular',
+    vertical: 'top',
+    horizontal: 'right'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Badge/style.scss

@@ -0,0 +1,83 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Button/style" as button;
+
+@mixin mixinBadge {
+  @include button.mixinButton;
+
+  & {
+    @include ui.initByCustom('_shift', ui.v('??shift', var(--sys-height, 0)) / 2);
+    @include ui.initByCustom('_shiftOverlap', 0px);
+
+    position: absolute;
+    z-index: 4;
+    opacity: 1;
+
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-image: none;
+    mask-size: 100%;
+
+    cursor: unset;
+
+    @include ui.scale(1);
+
+    &--hide,
+    &--hideAuto {
+      opacity: 0;
+
+      mask-image: radial-gradient(circle at center, transparent 10%, white 20%);
+      mask-size: 1000%;
+
+      @include ui.scale(1.12);
+    }
+
+    &--dot {
+      @include ui.aspectRatio(#{1/1});
+      @include ui.height(#{ui.v('??dotSize', ui.v('??dotFactor', calc(100% / 3))) !important});
+
+      @include ui.subclass('label') {
+        display: none;
+      }
+    }
+
+    &--overlap {
+      &--circular {
+        @include ui.initByCustom('_shiftOverlap', -16%);
+      }
+
+      &--static {
+        position: static;
+      }
+    }
+
+    &--vertical {
+      &--top {
+        top: calc(0% - #{ui.v('??_shiftOverlap')} - #{ui.v('??_shift')});
+      }
+
+      &--center {
+        top: 50%;
+        @include ui.translateY(-50%);
+      }
+
+      &--bottom {
+        bottom: calc(0% - #{ui.v('??_shiftOverlap')} - #{ ui.v('??_shift')});
+      }
+    }
+
+    &--horizontal {
+      &--right {
+        @include ui.left(calc(100% + #{ui.v('??_shiftOverlap')} - #{ui.v('??_shift')}));
+      }
+
+      &--center {
+        left: 50%;
+        @include ui.translateX(-50%);
+      }
+
+      &--left {
+        @include ui.right(calc(100% + #{ui.v('??_shiftOverlap')} - #{ui.v('??_shift')}));
+      }
+    }
+  }
+}

package/src/constructors/Badge/types.ts

@@ -0,0 +1,47 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { IconComponentInclude } from '../Icon'
+import type { LabelNumberSlots } from '../../types/labelTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type BadgeComponents = IconComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type BadgeEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface BadgeExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface BadgeSlots extends LabelNumberSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type BadgeClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  label: string
+  icon: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Bars/Bars.ts

@@ -0,0 +1,188 @@
+import { computed, reactive, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, forEach, getBind, toBind } from '@dxtmisha/functional'
+
+import { LabelInclude } from '../../classes/LabelInclude'
+import { DescriptionInclude } from '../../classes/DescriptionInclude'
+import { EventClickInclude } from '../../classes/EventClickInclude'
+import { ModelInclude } from '../../classes/ModelInclude'
+
+import { WindowClassesInclude } from '../Window'
+import { MotionTransformClassesInclude } from '../MotionTransform'
+import { SkeletonInclude } from '../Skeleton'
+import { BarsAction } from './BarsAction'
+
+import type { BarsComponents, BarsEmits, BarsSlots } from './types'
+import type { BarsProps } from './props'
+import type { EventClickValue } from '../../types/eventClickTypes'
+
+/**
+ * Bars
+ */
+export class Bars {
+  /** Управление action‑режимом */
+  readonly action: BarsAction
+
+  readonly label: LabelInclude
+  readonly description: DescriptionInclude
+
+  readonly event: EventClickInclude
+
+  /** Helper for Window CSS classes/ Вспомогательный класс для CSS‑классов Window */
+  readonly windowClasses: WindowClassesInclude
+  /** Helper for MotionTransform CSS classes/ Вспомогательный класс для CSS‑классов MotionTransform */
+  readonly motionTransformClasses: MotionTransformClassesInclude
+  /** Подключение скелетона для текста/описания */
+  readonly skeleton: SkeletonInclude
+
+  /**
+   * 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: BarsProps,
+    protected readonly refs: ToRefs<BarsProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<BarsComponents, BarsProps>,
+    protected readonly slots?: BarsSlots,
+    protected readonly emits?: ConstrEmit<BarsEmits>
+  ) {
+    const skeleton = new SkeletonInclude(this.props, this.classDesign, ['classTextVariant'])
+
+    this.action = new BarsAction(this.props, this.refs)
+
+    this.label = new LabelInclude(this.labelBinds,
+      className,
+      undefined,
+      slots,
+      undefined,
+      undefined,
+      undefined,
+      skeleton
+    )
+    this.description = new DescriptionInclude(this.descriptionBinds, className, slots, skeleton)
+
+    this.event = new EventClickInclude(undefined, undefined, emits)
+
+    this.windowClasses = new WindowClassesInclude(classDesign)
+    this.motionTransformClasses = new MotionTransformClassesInclude(classDesign)
+    this.skeleton = skeleton
+
+    new ModelInclude('action', this.emits, this.action.action)
+  }
+
+  /** Returns the button data/ Возвращает данные кнопки */
+  readonly backBinds = computed<BarsProps['buttonAttrs']>(
+    () => this.initItem(
+      toBind(
+        {
+          icon: {
+            icon: this.props.iconBack,
+            iconActive: this.props.iconClose
+          },
+          iconDir: true,
+          value: 'back',
+          class: [
+            this.windowClasses.get().close,
+            this.motionTransformClasses.get().close
+          ],
+          onClick: this.onClickBack
+        },
+        this.props.backButton ?? {}
+      ),
+      'main-back'
+    )
+  )
+
+  /** Returns the list of control buttons/ Возвращает список кнопок управления */
+  readonly barsBinds = computed<BarsProps['bars']>(() => this.initList(this.props.bars))
+
+  /**
+   * Returns the list of active control buttons/
+   * Возвращает список активных кнопок управления
+   */
+  readonly actionBarsBinds = computed<BarsProps['bars']>(() => this.initList(this.props.actionBars, true))
+
+  /** Returns the button name/ Возвращает название кнопки */
+  readonly backLabel = computed<string | number | undefined>(() => this.action.is.value ? undefined : this.backBinds.value?.label)
+
+  /** Binds for label text/ Привязки для текста метки */
+  protected readonly labelBinds = reactive({
+    label: computed(() => this.action.is.value ? this.props.actionLabel : this.props.label)
+  })
+
+  /** Binds for description text/ Привязки для текста описания */
+  protected readonly descriptionBinds = reactive({
+    description: computed(() => this.action.is.value ? this.props.actionDescription : this.props.description)
+  })
+
+  /**
+   * Prepares all parameters for the button.
+   *
+   * Подготавливает все параметры для кнопки.
+   * @param item list of buttons/ список параметры
+   * @param key button identifier/ идентификатор кнопки
+   * @param isAction is action button/ является ли кнопка действия
+   */
+  protected initItem(
+    item: BarsProps['buttonAttrs'],
+    key: string | number,
+    isAction: boolean = false
+  ): BarsProps['buttonAttrs'] {
+    return {
+      isSkeleton: this.props.isSkeleton,
+      onClick: this.event.onClick,
+      ...toBind(
+        this.props.buttonAttrs ?? {},
+        item ?? {}
+      ),
+      key: `${isAction ? 'action' : ''}Bar-${item?.value ?? key}`,
+      icon: getBind(item?.icon, { animationShow: isAction }, 'icon')
+    }
+  }
+
+  /**
+   * Prepares all parameters for the button.
+   *
+   * Подготавливает список параметры для кнопки.
+   * @param bars list of buttons/ >список кнопок
+   * @param isAction is action button/ является ли кнопка действия
+   */
+  protected initList(
+    bars?: BarsProps['bars'],
+    isAction: boolean = false
+  ): BarsProps['bars'] {
+    if (bars) {
+      return forEach(
+        bars,
+        (item, key) => this.initItem(item, key, isAction)
+      ) as BarsProps['bars']
+    }
+
+    return undefined
+  }
+
+  /**
+   * Back button click handler: closes action mode and proxies click event.
+   *
+   * Обработчик кл��ка по кнопке «назад»: закрывает action‑режим и проксирует событие.
+   */
+  protected readonly onClickBack = (
+    event: MouseEvent,
+    options?: EventClickValue
+  ) => {
+    if (options?.value === 'back') {
+      this.action.close()
+    }
+
+    this.event.onClick(event, options)
+  }
+}

package/src/constructors/Bars/BarsAction.ts

@@ -0,0 +1,57 @@
+import { computed, ref, type ToRefs, watch } from 'vue'
+import type { BarsProps } from './props'
+
+/**
+ * Управление action‑режимом для Bars.
+ *
+ * Controls Bars action mode.
+ */
+export class BarsAction {
+  /** Текущее состояние action‑режима / Current action mode state */
+  readonly action = ref<boolean>(false)
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   */
+  constructor(
+    protected readonly props: BarsProps,
+    protected readonly refs: ToRefs<BarsProps>
+  ) {
+    if (refs.action) {
+      watch(
+        refs.action,
+        (action) => {
+          this.action.value = Boolean(action)
+        },
+        { immediate: true }
+      )
+    }
+  }
+
+  /** Вычисляемый флаг активности action / Computed active flag */
+  readonly is = computed<boolean>(() => this.props.action || this.action.value)
+
+  /**
+   * Включить action‑режим.
+   *
+   * Enable action mode.
+   */
+  open() {
+    if (!this.action.value) {
+      this.action.value = true
+    }
+  }
+
+  /**
+   * Выключить action‑режим.
+   *
+   * Disable action mode.
+   */
+  close() {
+    if (this.action.value) {
+      this.action.value = false
+    }
+  }
+}

package/src/constructors/Bars/BarsDesign.tsx

@@ -0,0 +1,229 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Bars } from './Bars'
+
+import {
+  type BarsPropsBasic
+} from './props'
+import {
+  type BarsClasses,
+  type BarsComponents,
+  type BarsEmits,
+  type BarsExpose,
+  type BarsSlots
+} from './types'
+
+/**
+ * BarsDesign
+ */
+export class BarsDesign<
+  COMP extends BarsComponents,
+  EXPOSE extends BarsExpose,
+  CLASSES extends BarsClasses,
+  P extends BarsPropsBasic
+> extends DesignConstructorAbstract<
+  HTMLDivElement,
+  COMP,
+  BarsEmits,
+  EXPOSE,
+  BarsSlots,
+  CLASSES,
+  P
+> {
+  protected readonly item: Bars
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, BarsEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Bars(
+      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 / Системная метка
+        context: this.getSubClass('context'),
+        label: this.getSubClass('label'),
+        description: this.getSubClass('description')
+        // :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.renderBackButton(),
+        ...this.renderContext(),
+        ...this.renderBars(),
+        ...this.renderActionBars()
+      ]
+    )
+  }
+
+  /**
+   * Rendering the close button.
+   *
+   * Рендеринг кнопки закрытия.
+   */
+  readonly renderBackButton = (): VNode[] => {
+    if (
+      this.props.backHide
+      && (
+        !this.item.action.is.value
+        || this.props.backActionHide
+      )
+    ) {
+      return []
+    }
+
+    return [
+      this.components.renderOne(
+        'button',
+        {
+          label: this.item.backLabel.value,
+          selected: this.item.action.is.value,
+          ...this.item.backBinds.value
+        }
+      ) as VNode
+    ]
+  }
+
+  /**
+   * Rendering the content.
+   *
+   * Рендеринг контента.
+   */
+  readonly renderContext = (): VNode[] => {
+    return [
+      h(
+        'div',
+        {
+          class: this.classes?.value.context
+        },
+        [
+          ...this.item.label.render(),
+          ...this.item.description.render()
+        ]
+      )
+    ]
+  }
+
+  /**
+   * Rendering the control button.
+   *
+   * Рендеринг кнопки управления.
+   */
+  readonly renderBars = (): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.action.is.value) {
+      return children
+    }
+
+    children.push(...this.renderList(this.item.barsBinds.value))
+    this.initSlot('bars', children)
+
+    return children
+  }
+
+  /**
+   * Rendering the control button.
+   *
+   * Рендеринг кнопки управления.
+   */
+  readonly renderActionBars = (): VNode[] => {
+    const children: any[] = []
+
+    if (this.item.action.is.value) {
+      children.push(...this.renderList(this.item.actionBarsBinds.value))
+      this.initSlot('actionBars', children)
+    }
+
+    return children
+  }
+
+  /**
+   * Rendering a list of buttons from the list.
+   *
+   * Рендеринг списка кнопок по списку.
+   * @param list list of data for the button/ список данных для кнопки
+   */
+  readonly renderList = (
+    list: BarsPropsBasic['bars']
+  ): VNode[] => {
+    const children: VNode[] = []
+
+    if (list) {
+      list.forEach(
+        item => this.components.renderAdd(children, 'button', item)
+      )
+    }
+
+    return children
+  }
+}