@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Arrow/props.ts

@@ -0,0 +1,31 @@
+interface ArrowPropsToken {
+  // :type [!] System label / Системная метка
+  position?: 'auto' | 'top' | 'bottom' | 'left' | 'right'
+  inverse?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ArrowPropsBasic {
+  elementTarget?: HTMLElement | string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ArrowProps extends ArrowPropsBasic, ArrowPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsArrow = {
+  ...{
+    // :default [!] System label / Системная метка
+    position: 'auto'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Arrow/style.scss

@@ -0,0 +1,133 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinArrow {
+  @include ui.initByCustom('arrowWidth', 8px);
+  @include ui.initByCustom('arrowHeight', 8px);
+
+  @include ui.initByCustom('sys.url.markBorder', unset);
+  @include ui.initByCustom('sys.background', transparent);
+  @include ui.initByCustom('sys.borderWidth', 0px);
+  @include ui.initByCustom('sys.borderColor', transparent);
+  @include ui.initByCustom('sys.borderRadius', 0px);
+  @include ui.initByCustom('sys.clipPath', unset);
+
+  @include ui.initByCustom('sys.press', calc((#{ui.v('??arrowHeight')} * 2) + (#{ui.v('??sys.borderWidth')} * 2)));
+  @include ui.initByCustom('sys.main.increase', calc(100% + (#{ui.v('??sys.borderWidth')} * 2)));
+  @include ui.initByCustom('sys.area.increase', calc(100% + (#{ui.v('??arrowHeight')} * 2)));
+  @include ui.initByCustom('sys.arrow.translateX', 0px);
+  @include ui.initByCustom('sys.arrow.translateY', 0px);
+  @include ui.initByCustom('sys.arrow.translateShift', 50%);
+
+  @include ui.absolute(calc(#{ui.v('??sys.borderWidth')} * -1));
+  z-index: 8;
+
+  width: ui.v('??sys.main.increase');
+  height: ui.v('??sys.main.increase');
+
+  border-style: inherit;
+  border-radius: inherit;
+
+  pointer-events: none;
+
+  &__parent {
+    &[data-arrow="border"] {
+      border-color: transparent !important;
+    }
+  }
+
+  &__arrow,
+  &__arrowLine {
+    @include ui.translateX(ui.v('??sys.arrow.translateX'));
+    @include ui.translateY(ui.v('??sys.arrow.translateY'));
+  }
+
+  &__arrow {
+    fill: ui.v('??sys.background');
+    stroke: none;
+  }
+
+  &__arrowLine {
+    fill: none;
+    stroke: ui.v('??sys.borderColor');
+    stroke-width: ui.v('??sys.borderWidth');
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  &__arrowArea {
+    @include ui.absolute(calc(#{ui.v('??arrowHeight')} * -1));
+
+    width: ui.v('??sys.area.increase');
+    height: ui.v('??sys.area.increase');
+  }
+
+  &__border {
+    @include ui.absolute;
+
+    border-width: ui.v('??sys.borderWidth');
+    border-color: ui.v('??sys.borderColor');
+    border-radius: inherit;
+
+    clip-path: ui.v('??sys.clipPath');
+  }
+
+  &__borderHidden {
+    width: ui.v('??arrowWidth');
+    height: ui.v('??arrowHeight');
+
+    @include ui.translateX(ui.v('??sys.arrow.translateX'));
+    @include ui.translateY(ui.v('??sys.arrow.translateY'));
+  }
+
+  &--direction {
+    &--top {
+      @include ui.initByCustom('sys.arrow.translateX', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowWidth')} / 2));
+      @include ui.initByCustom('sys.arrow.translateY', 0px);
+    }
+
+    &--bottom {
+      @include ui.initByCustom('sys.arrow.translateX', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowWidth')} / 2));
+      @include ui.initByCustom('sys.arrow.translateY', calc(100% - #{ui.v('??arrowHeight')}));
+    }
+
+    &--left {
+      @include ui.initByCustom('sys.arrow.translateX', 0px);
+      @include ui.initByCustom('sys.arrow.translateY', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowHeight')} / 2));
+    }
+
+    &--right {
+      @include ui.initByCustom('sys.arrow.translateX', calc(100% - #{ui.v('??arrowWidth')}));
+      @include ui.initByCustom('sys.arrow.translateY', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowHeight')} / 2));
+    }
+
+    &--hide {
+      @include ui.subclass('arrowArea') {
+        display: none;
+      }
+    }
+  }
+
+  &--position {
+    &--auto {
+      @include ui.initByCustom('sys.arrow.translateShift.basic', #{calc(#{ui.v('??sys.shift')} + #{ui.v('??arrowWidth')})});
+      @include ui.initByCustom('sys.arrow.translateShift.max', max(#{ui.v('??sys.arrow.translateShift.basic')}, #{ui.v('??sys.borderRadius')}));
+      @include ui.initByCustom('sys.arrow.translateShift', ui.v('??sys.arrow.translateShift.basic'));
+
+      @include ui.state('direction') {
+        &--top,
+        &--bottom {
+          @include ui.subclass('borderHidden') {
+            @include ui.translateX(calc(#{ui.v('??sys.arrow.translateX')} - #{ui.v('??arrowHeight')}));
+          }
+        }
+
+        &--left,
+        &--right {
+          @include ui.subclass('borderHidden') {
+            @include ui.translateY(calc(#{ui.v('??sys.arrow.translateY')} - #{ui.v('??arrowHeight')}));
+          }
+        }
+      }
+    }
+  }
+}

package/src/constructors/Arrow/types.ts

@@ -0,0 +1,54 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ArrowComponents = {
+  // componentName: object
+}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ArrowEmits = {
+  // load: [value: string]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ArrowExpose {
+  update: () => void
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ArrowSlots {
+  // default? (props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ArrowClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  mask: string
+  arrow: string
+  arrowLine: string
+  arrowArea: string
+  border: string
+  borderHidden: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Badge/BadgeDesign.tsx

@@ -5,6 +5,7 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Badge } from './Badge'
 
 import {
@@ -121,7 +122,9 @@ export class BadgeDesign<
     return h('span', {
       ...this.getAttrs(),
       ref: this.element,
-      class: this.classes?.value.main
+      class: this.classes?.value.main,
+      ...AriaStaticInclude.role('status'),
+      ...AriaStaticInclude.label(this.props.ariaLabel)
     }, children)
   }
 }

package/src/constructors/Badge/properties.json

@@ -1,36 +1,36 @@
-{
-  "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"
-  }
-}
+{
+  "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,5 +1,6 @@
 import type { IconPropsBasic, IconPropsInclude } from '../Icon'
 import type { LabelNumberProps } from '../../types/labelTypes'
+import type { AriaLabelPropsInclude } from '../../types/ariaTypes'
 
 interface BadgePropsToken {
   // :type [!] System label / Системная метка
@@ -15,7 +16,8 @@ interface BadgePropsToken {
 export interface BadgePropsBasic<
   Icon extends IconPropsBasic = IconPropsBasic
 > extends IconPropsInclude<Icon>,
-  LabelNumberProps {
+  LabelNumberProps,
+  AriaLabelPropsInclude {
   dot?: boolean
 }
 

package/src/constructors/Badge/types.ts

@@ -40,8 +40,8 @@ export interface BadgeSlots extends LabelNumberSlots {
  */
 export type BadgeClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  label: string
-  icon: string
+  // :classes [!] System label / Системная метка
+  label: string
+  icon: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Bars/Bars.ts

@@ -1,15 +1,17 @@
 import { computed, reactive, type Ref, type ToRefs } from 'vue'
 import { type ConstrEmit, DesignComp, forEach, getBind, toBind } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { LabelInclude } from '../../classes/LabelInclude'
 import { DescriptionInclude } from '../../classes/DescriptionInclude'
 import { EventClickInclude } from '../../classes/EventClickInclude'
 import { ModelInclude } from '../../classes/ModelInclude'
 
+import { BarsAction } from './BarsAction'
 import { WindowClassesInclude } from '../Window'
 import { MotionTransformClassesInclude } from '../MotionTransform'
 import { SkeletonInclude } from '../Skeleton'
-import { BarsAction } from './BarsAction'
+import { TextInclude } from '../../classes/TextInclude'
 
 import type { BarsComponents, BarsEmits, BarsSlots } from './types'
 import type { BarsProps } from './props'
@@ -34,6 +36,8 @@ export class Bars {
   /** Подключение скелетона для текста/описания */
   readonly skeleton: SkeletonInclude
 
+  readonly text: TextInclude
+
   /**
    * Constructor
    * @param props input data/ входные данные
@@ -75,6 +79,7 @@ export class Bars {
     this.windowClasses = new WindowClassesInclude(classDesign)
     this.motionTransformClasses = new MotionTransformClassesInclude(classDesign)
     this.skeleton = skeleton
+    this.text = new TextInclude(this.props)
 
     new ModelInclude('action', this.emits, this.action.action)
   }
@@ -94,7 +99,8 @@ export class Bars {
             this.windowClasses.get().close,
             this.motionTransformClasses.get().close
           ],
-          onClick: this.onClickBack
+          onClick: this.onClickBack,
+          ...AriaStaticInclude.label(this.text.close.value)
         },
         this.props.backButton ?? {}
       ),
@@ -171,9 +177,9 @@ export class Bars {
   }
 
   /**
-   * Back button click handler: closes action mode and proxies click event.
+   * Click handler for the "back" button
    *
-   * Обработчик кл��ка по кнопке «назад»: закрывает action‑режим и проксирует событие.
+   * Обработчик клика по кнопке «назад»: закрывает action‑режим и проксирует событие.
    */
   protected readonly onClickBack = (
     event: MouseEvent,

package/src/constructors/Bars/BarsDesign.tsx

@@ -5,9 +5,11 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Bars } from './Bars'
 
 import {
+  type BarsProps,
   type BarsPropsBasic
 } from './props'
 import {
@@ -25,16 +27,16 @@ export class BarsDesign<
   COMP extends BarsComponents,
   EXPOSE extends BarsExpose,
   CLASSES extends BarsClasses,
-  P extends BarsPropsBasic
+  P extends BarsProps
 > extends DesignConstructorAbstract<
-  HTMLDivElement,
-  COMP,
-  BarsEmits,
-  EXPOSE,
-  BarsSlots,
-  CLASSES,
-  P
-> {
+    HTMLDivElement,
+    COMP,
+    BarsEmits,
+    EXPOSE,
+    BarsSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: Bars
 
   /**
@@ -74,7 +76,10 @@ export class BarsDesign<
    * Инициализация всех необходимых свойств для работы.
    */
   protected initExpose(): EXPOSE {
-    return {} as EXPOSE
+    return {
+      ...this.item.label.expose,
+      ...this.item.description.expose
+    } as EXPOSE
   }
 
   /**
@@ -114,7 +119,8 @@ export class BarsDesign<
       'div',
       {
         ...this.getAttrs(),
-        class: this.classes?.value.main
+        class: this.classes?.value.main,
+        ...AriaStaticInclude.live(this.props.action ? 'polite' : 'off')
       },
       [
         ...this.renderBackButton(),

package/src/constructors/Bars/BarsInclude.ts

@@ -1,4 +1,4 @@
-import { computed, type VNode } from 'vue'
+import { computed, ref, type VNode } from 'vue'
 import {
   type ConstrBind,
   type ConstrEmit,
@@ -11,6 +11,7 @@ import {
 import type { EventClickValue } from '../../types/eventClickTypes'
 
 import type { BarsComponentInclude, BarsEmitsInclude, BarsPropsInclude } from './basicTypes'
+import type { BarsExpose } from './types'
 import type { BarsProps } from './props'
 
 /**
@@ -26,6 +27,8 @@ export class BarsInclude<
   Props extends BarsPropsInclude = BarsPropsInclude,
   PropsExtra extends ConstrBind<BarsProps> = ConstrBind<BarsProps>
 > {
+  readonly element = ref<BarsExpose>()
+
   /**
    * Constructor
    * @param props input parameter/ входной параметр
@@ -79,7 +82,6 @@ export class BarsInclude<
    * Рендер компонента панелей
    */
   readonly render = (): VNode[] => {
-    console.log('this.props.barsHide', this.props.barsHide)
     if (
       this.components
       && !this.props.barsHide
@@ -87,6 +89,7 @@ export class BarsInclude<
       return this.components.render(
         'bars',
         {
+          ref: this.element,
           ...this.binds.value,
           onClick: this.onClick
         },

package/src/constructors/Bars/properties.json

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

package/src/constructors/Bars/props.ts

@@ -6,6 +6,7 @@ import type { SkeletonPropsInclude } from '../Skeleton'
 
 import type { LabelProps } from '../../types/labelTypes'
 import type { DescriptionProps } from '../../types/descriptionTypes'
+import type { TextClosePropsInclude } from '../../types/textTypes'
 
 interface BarsPropsToken {
   // :type [!] System label / Системная метка
@@ -18,7 +19,8 @@ export interface BarsPropsBasic<
   Button extends ButtonPropsBasic = ButtonPropsBasic
 > extends LabelProps,
   DescriptionProps,
-  SkeletonPropsInclude
+  SkeletonPropsInclude,
+  TextClosePropsInclude
 {
   // Value
   'backButton'?: ConstrBind<Button>

package/src/constructors/Bars/style.scss

@@ -5,6 +5,10 @@
 
   transition: background-color ui.v('d.sys.transitionDuration.sm') linear;
 
+  @include ui.mediaPrefersReducedMotion {
+    transition: none;
+  }
+
   &__context,
   &__label {
     @include ui.flexDynamic;

package/src/constructors/Bars/types.ts

@@ -2,8 +2,8 @@ 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'
+import type { LabelExpose, LabelSlots } from '../../types/labelTypes'
+import type { DescriptionExpose, DescriptionSlots } from '../../types/descriptionTypes'
 
 /**
  * Interface for describing which components need to be connected for work.
@@ -29,7 +29,7 @@ export type BarsEmits
  *
  * Тип, описывающий доступные свойства.
  */
-export interface BarsExpose {
+export interface BarsExpose extends LabelExpose, DescriptionExpose {
 }
 
 /**

package/src/constructors/Block/Block.ts

@@ -0,0 +1,105 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { LabelInclude } from '../../classes/LabelInclude'
+import { DescriptionInclude } from '../../classes/DescriptionInclude'
+import { CaptionInclude } from '../../classes/CaptionInclude'
+
+import { IconInclude } from '../Icon'
+
+import type { BlockComponents, BlockEmits, BlockSlots } from './types'
+import type { BlockProps } from './props'
+
+/**
+ * Block
+ */
+export class Block {
+  /**
+   * Object for working with label/
+   * Объект для работы с меткой
+   */
+  readonly label: LabelInclude
+  /**
+   * Object for working with description/
+   * Объект для работы с описанием
+   */
+  readonly description: DescriptionInclude
+  /**
+   * Object for working with caption/
+   * Объект для работы с подписью
+   */
+  readonly caption: CaptionInclude
+
+  /**
+   * Object for working with icon/
+   * Объект для работы с иконкой
+   */
+  readonly icon: IconInclude
+
+  /**
+   * 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: BlockProps,
+    protected readonly refs: ToRefs<BlockProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<BlockComponents, BlockProps>,
+    protected readonly slots?: BlockSlots,
+    protected readonly emits?: ConstrEmit<BlockEmits>
+  ) {
+    this.label = new LabelInclude(
+      props,
+      className,
+      undefined,
+      slots,
+      undefined,
+      undefined,
+      true,
+      undefined,
+      computed(() => this.props.tagHeader || 'h3')
+    )
+    this.caption = new CaptionInclude(props, className, slots)
+    this.description = new DescriptionInclude(props, className, slots)
+
+    this.icon = new IconInclude(props, className, components)
+  }
+
+  /**
+   * Checks if the headline exists/
+   * Проверяет, существует ли заголовок
+   */
+  readonly isHeadline = computed<boolean>(() => {
+    return Boolean(
+      this.props.headline
+      || (this.slots && 'headline' in this.slots)
+    )
+  })
+
+  /**
+   * Checks if the header exists/
+   * Проверяет, существует ли шапка
+   */
+  readonly isHeader = computed<boolean>(() => {
+    return this.label.is.value
+      || this.caption.is.value
+      || this.description.is.value
+  })
+
+  /**
+   * Tag name/
+   * Название тега
+   */
+  readonly tag = computed<string>(() => {
+    return this.props.tag || 'div'
+  })
+}