@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Badge/BadgeDesign.tsx

@@ -1,127 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { Badge } from './Badge'
-
-import {
-  type BadgePropsBasic
-} from './props'
-import {
-  type BadgeClasses,
-  type BadgeComponents,
-  type BadgeEmits,
-  type BadgeExpose,
-  type BadgeSlots
-} from './types'
-
-/**
- * BadgeDesign
- */
-export class BadgeDesign<
-  COMP extends BadgeComponents,
-  EXPOSE extends BadgeExpose,
-  CLASSES extends BadgeClasses,
-  P extends BadgePropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    BadgeEmits,
-    EXPOSE,
-    BadgeSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Badge
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, BadgeEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Badge(
-      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: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        label: this.getSubClass('label'),
-        icon: this.getSubClass('icon')
-        // :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[] = []
-
-    if (!this.props.dot) {
-      children.push(
-        ...this.item.label.render(),
-        ...this.item.icon.renderIcon()
-      )
-    }
-
-    return h('span', {
-      ...this.getAttrs(),
-      ref: this.element,
-      class: this.classes?.value.main
-    }, children)
-  }
-}

package/src/constructors/Badge/BadgeInclude.ts

@@ -1,78 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal, toBind } from '@dxtmisha/functional'
-
-import type { BadgeComponentInclude, BadgePropsInclude } from './basicTypes'
-import type { BadgeProps } from './props'
-
-/**
- * BadgeInclude class provides functionality for conditionally rendering badge components
- * within other components. It manages the logic for determining when to display a badge
- * and configures the appropriate properties.
- *
- * Класс BadgeInclude предоставляет функциональность для условного рендеринга компонентов
- * бейджа внутри других компонентов. Он управляет логикой определения необходимости
- * отображения бейджа и настраивает соответствующие свойства.
- *
- * @template Props - Properties interface extending BadgePropsInclude
- */
-export class BadgeInclude<Props extends BadgePropsInclude = BadgePropsInclude> {
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param extra additional parameter/ дополнительный параметр
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<BadgeComponentInclude, Props>,
-    protected readonly extra?: RefOrNormal<ConstrBind<BadgeProps>>
-  ) {
-  }
-
-  /**
-   * Checks whether a badge is specified for rendering the component/
-   * Проверяет, указан ли бейдж для отображения компонента
-   */
-  readonly is = computed(() => Boolean(this.props.badge || this.props.badgeDot))
-
-  /**
-   * list of properties for the badge component/ список свойств для компонента бейджа
-   */
-  readonly binds = computed(() => getBind(
-    this.props.badgeDot ? {} : this.props.badge,
-    {
-      dot: this.props.badgeDot,
-      ...toBind(
-        getRef(this.extra) ?? {},
-        {
-          class: `${this.className}__badge`
-        }
-      )
-    },
-    'label',
-    true
-  ))
-
-  /**
-   * Render of the badge component
-   *
-   * Рендер компонента бейджа
-   */
-  readonly render = (): VNode[] => {
-    if (
-      this.components
-      && this.is.value
-    ) {
-      return this.components.render(
-        'badge',
-        this.binds.value,
-        undefined,
-        'badge'
-      )
-    }
-
-    return []
-  }
-}

package/src/constructors/Badge/basicTypes.ts

@@ -1,15 +0,0 @@
-import type { ConstrBind } from '@dxtmisha/functional'
-
-import type { BadgePropsBasic } from './props'
-
-export type BadgeComponentInclude = {
-  badge?: object
-}
-
-export interface BadgePropsInclude<
-  Badge extends BadgePropsBasic = BadgePropsBasic
-> {
-  // Values
-  badge?: string | number | ConstrBind<Badge>
-  badgeDot?: boolean
-}

package/src/constructors/Badge/index.ts

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

package/src/constructors/Badge/properties.json

@@ -1,36 +0,0 @@
-{
-  "padding": {
-    "_type": "var"
-  },
-  "dotSize": {
-    "_type": "var"
-  },
-  "transition-property": "clip-path, mask-image, mask-size, opacity, transform, scale",
-  "transition-duration": "{d.sys.transitionDuration.lg.open}",
-  "transition-function": "{d.sys.transitionFunction.standard}",
-  "#label": {},
-  "#icon": {},
-  "selected": {},
-  "~hide": {
-    "transition-duration": "{d.sys.transitionDuration.lg.close}"
-  },
-  "~dot": {},
-  "~overlap": {
-    "~rectangular": {},
-    "~circular": {},
-    "~static": {},
-    "_default": "rectangular"
-  },
-  "~vertical": {
-    "~top": {},
-    "~center": {},
-    "~bottom": {},
-    "_default": "top"
-  },
-  "~horizontal": {
-    "~right": {},
-    "~center": {},
-    "~left": {},
-    "_default": "right"
-  }
-}

package/src/constructors/Badge/props.ts

@@ -1,43 +0,0 @@
-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/Bars/Bars.ts

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

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