@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Button/types.ts

@@ -5,7 +5,7 @@ import type { ProgressComponentInclude } from '../Progress'
 import type { RippleComponentsInclude } from '../Ripple'
 
 import type { EventClickEmits, EventClickExpose } from '../../types/eventClickTypes'
-import type { LabelSlots } from '../../types/labelTypes'
+import type { LabelExpose, LabelSlots } from '../../types/labelTypes'
 
 /**
  * Interface for describing which components need to be connected for work.
@@ -29,7 +29,7 @@ export type ButtonEmits = EventClickEmits
  *
  * Тип, описывающий доступные свойства.
  */
-export interface ButtonExpose extends EventClickExpose {
+export interface ButtonExpose extends LabelExpose, EventClickExpose {
 }
 
 /**

package/src/constructors/Cell/Cell.ts

@@ -4,7 +4,7 @@ import {
   type ConstrEmit,
   DesignComp
 } from '@dxtmisha/functional'
-import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+import { getClassTagAStatic } from '../../functions/getClassTagAStatic'
 
 import { LabelInclude } from '../../classes/LabelInclude'
 import { CaptionInclude } from '../../classes/CaptionInclude'
@@ -19,7 +19,7 @@ import { SkeletonInclude } from '../Skeleton'
 import { EventClickInclude } from '../../classes/EventClickInclude'
 
 import type { CellComponents, CellEmits, CellSlots } from './types'
-import type { CellPropsBasic } from './props'
+import type { CellProps } from './props'
 import type { CellClassesSub } from './basicTypes'
 
 /**
@@ -51,12 +51,12 @@ export class Cell {
    * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
    */
   constructor(
-    protected readonly props: CellPropsBasic,
-    protected readonly refs: ToRefs<CellPropsBasic>,
+    protected readonly props: CellProps,
+    protected readonly refs: ToRefs<CellProps>,
     protected readonly element: Ref<HTMLElement | undefined>,
     protected readonly classDesign: string,
     protected readonly className: string,
-    protected readonly components?: DesignComp<CellComponents, CellPropsBasic>,
+    protected readonly components?: DesignComp<CellComponents, CellProps>,
     protected readonly slots?: CellSlots,
     protected readonly emits?: ConstrEmit<CellEmits>
   ) {
@@ -108,9 +108,26 @@ export class Cell {
    */
   readonly classes = computed<ConstrClass>(() => ({
     [`${this.className}--description`]: this.description.is.value,
-    [getClassTegAStatic(this.classDesign)]: true
+    [getClassTagAStatic(this.classDesign)]: true
   }))
 
+  /**
+   * Computed role for the cell component.
+   *
+   * Вычисляемая роль для компонента ячейки.
+   */
+  readonly role = computed<string | undefined>(() => {
+    if (this.props.role) {
+      return this.props.role
+    }
+
+    if (this.props.dynamic) {
+      return 'button'
+    }
+
+    return undefined
+  })
+
   /**
    * Returns a list of sub-element CSS classes for the cell component.
    *

package/src/constructors/Cell/CellDesign.tsx

@@ -1,14 +1,15 @@
-import { h, type VNode } from 'vue'
+import { computed, h, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Cell } from './Cell'
 
 import {
-  type CellPropsBasic
+  type CellProps
 } from './props'
 import {
   type CellClasses,
@@ -25,16 +26,16 @@ export class CellDesign<
   COMP extends CellComponents,
   EXPOSE extends CellExpose,
   CLASSES extends CellClasses,
-  P extends CellPropsBasic
+  P extends CellProps
 > extends DesignConstructorAbstract<
-  HTMLDivElement,
-  COMP,
-  CellEmits,
-  EXPOSE,
-  CellSlots,
-  CLASSES,
-  P
-> {
+    HTMLDivElement,
+    COMP,
+    CellEmits,
+    EXPOSE,
+    CellSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: Cell
 
   /**
@@ -75,7 +76,9 @@ export class CellDesign<
    */
   protected initExpose(): EXPOSE {
     return {
-      ...this.item.event.expose
+      ...this.item.event.expose,
+      ...this.item.label.expose,
+      ...this.item.description.expose
     } as EXPOSE
   }
 
@@ -120,13 +123,7 @@ export class CellDesign<
   protected initRender(): VNode {
     return h(
       this.props.tag ?? 'div',
-      {
-        ...this.getAttrs(),
-        'class': this.classes?.value.main,
-        'data-value': this.props.value,
-        'data-divider': this.props.divider ? 'active' : undefined,
-        'onClick': this.item.event.onClick
-      },
+      this.propsMain.value,
       [
         ...this.item.icon.render(),
         ...this.renderContext(),
@@ -147,7 +144,10 @@ export class CellDesign<
     return [
       h(
         'div',
-        { class: this.classes?.value.context },
+        {
+          key: 'context',
+          class: this.classes?.value.context
+        },
         [
           ...this.item.label.render(),
           ...this.item.caption.render(),
@@ -170,7 +170,10 @@ export class CellDesign<
       return [
         h(
           'div',
-          { class: this.classes?.value.contextTrailing },
+          {
+            key: 'trailing',
+            class: this.classes?.value.contextTrailing
+          },
           this.initSlot('trailing', undefined, this.item.getClassesSub())
         )
       ]
@@ -192,7 +195,10 @@ export class CellDesign<
       return [
         h(
           'div',
-          { class: this.classes?.value.body },
+          {
+            key: 'body',
+            class: this.classes?.value.body
+          },
           this.initSlot('body', undefined, this.item.getClassesSub())
         )
       ]
@@ -200,4 +206,29 @@ export class CellDesign<
 
     return []
   }
+
+  /**
+   * Props for the main element.
+   *
+   * Свойства для главного элемента.
+   */
+  protected readonly propsMain = computed(() => {
+    const props = {
+      ...this.getAttrs(),
+      'class': this.classes?.value.main,
+      'data-value': this.props.value,
+      'data-divider': this.props.divider ? 'active' : undefined,
+      'onClick': this.item.event.onClick,
+      ...AriaStaticInclude.role(this.item.role.value)
+    }
+
+    if (this.props.dynamic) {
+      return {
+        ...props,
+        tabindex: '0'
+      }
+    }
+
+    return props
+  })
 }

package/src/constructors/Cell/basicTypes.ts

@@ -1,6 +1,39 @@
+import type { LabelAlternativeSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+import type { CaptionSlots } from '../../types/captionTypes'
+
+/**
+ * CSS class names for Cell sub-elements/
+ * Имена CSS классов для под-элементов Cell
+ */
 export type CellClassesSub = {
+  /** Label element class/ Класс элемента метки */
   label: string
+  /** Description element class/ Класс элемента описания */
   description: string
+  /** Caption element class/ Класс элемента подписи */
   caption: string
+  /** Trailing element class/ Класс завершающего элемента */
   trailing: string
 }
+
+/**
+ * Component map for including Cell/
+ * Карта компонентов для подключения Cell
+ */
+export type CellComponentInclude = {
+  /** Cell component key/ Ключ компонента Cell */
+  cell: object
+}
+
+/**
+ * Type describing available slots/
+ * Тип, описывающий доступные слоты
+ */
+export interface CellSlotsInclude extends LabelAlternativeSlots,
+  DescriptionSlots,
+  CaptionSlots {
+  trailing?(props: CellClassesSub): any
+
+  body?(props: CellClassesSub): any
+}

package/src/constructors/Cell/properties.json

@@ -1,52 +1,52 @@
-{
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "transition-property": "background-color, background-image, border, box-shadow",
-  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
-  "transition-function": "{d.sys.transitionFunction.standard}",
-  "#context": {},
-  "#contextTrailing": {},
-  "#label": {},
-  "#description": {},
-  "#caption": {},
-  "#icon": {},
-  "#trailing": {},
-  "#body": {},
-  "#loading": {},
-  "~focus": {},
-  "~selected": {},
-  "~readonly": {},
-  "~disabled": {},
-  "~dynamic": {},
-  "~dynamicHover": {},
-  "~divider": {
-    "_default": true
-  },
-  "~dividerLabel": {
-    "~always": {
-      "#context": {
-        "border-bottom-style": "solid",
-        "border-bottom-width": "{??borderWidth}",
-        "border-color": "{'??borderColor}"
-      }
-    },
-    "group|adaptive": {
-      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
-      "_type": "media-max-group"
-    },
-    "group|container": {
-      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
-      "_type": "container-max-group"
-    },
-    "none": {}
-  },
-  "~iconTop": {
-    "#icon": {
-      "align-self": "start"
-    }
-  }
-}
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "transition-property": "background-color, background-image, border, box-shadow",
+  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
+  "transition-function": "{d.sys.transitionFunction.standard}",
+  "#context": {},
+  "#contextTrailing": {},
+  "#label": {},
+  "#description": {},
+  "#caption": {},
+  "#icon": {},
+  "#trailing": {},
+  "#body": {},
+  "#loading": {},
+  "~focus": {},
+  "~selected": {},
+  "~readonly": {},
+  "~disabled": {},
+  "~dynamic": {},
+  "~dynamicHover": {},
+  "~divider": {
+    "_default": true
+  },
+  "~dividerLabel": {
+    "~always": {
+      "#context": {
+        "border-bottom-style": "solid",
+        "border-bottom-width": "{??borderWidth}",
+        "border-color": "{'??borderColor}"
+      }
+    },
+    "group|adaptive": {
+      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
+      "_type": "media-max-group"
+    },
+    "group|container": {
+      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
+      "_type": "container-max-group"
+    },
+    "none": {}
+  },
+  "~iconTop": {
+    "#icon": {
+      "align-self": "start"
+    }
+  }
+}

package/src/constructors/Cell/props.ts

@@ -8,17 +8,19 @@ import type { EventClickProps } from '../../types/eventClickTypes'
 import type { IconPropsBasic, IconTrailingPropsInclude } from '../Icon'
 import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
 
+import type { AriaRolePropsInclude } from '../../types/ariaTypes'
+
 interface CellPropsToken {
-  // :type [!] System label / Системная метка
-  focus?: boolean
-  selected?: boolean
-  readonly?: boolean
-  disabled?: boolean
-  dynamic?: boolean
-  dynamicHover?: boolean
-  divider?: boolean
-  dividerLabel?: 'always' | 'none'
-  iconTop?: boolean
+  // :type [!] System label / Системная метка
+  focus?: boolean
+  selected?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  dynamic?: boolean
+  dynamicHover?: boolean
+  divider?: boolean
+  dividerLabel?: 'always' | 'none'
+  iconTop?: boolean
   // :type [!] System label / Системная метка
 }
 
@@ -32,7 +34,8 @@ export interface CellPropsBasic<
   IconTrailingPropsInclude<Icon>,
   ProgressPropsInclude<Progress>,
   SkeletonPropsInclude,
-  EventClickProps {
+  EventClickProps,
+  AriaRolePropsInclude {
   // Style
   tag?: string
   divider?: boolean
@@ -54,8 +57,8 @@ export interface CellProps extends CellPropsBasic, CellPropsToken {
 export const defaultsCell = {
   tag: 'div',
   ...{
-    // :default [!] System label / Системная метка
-    divider: true
+    // :default [!] System label / Системная метка
+    divider: true
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/Cell/style.scss

@@ -38,7 +38,7 @@
 
   &__body {
     flex-basis: 100%;
-    order: 12;
+    order: 1999999;
   }
 
   &:has(&__body) {

package/src/constructors/Cell/types.ts

@@ -5,8 +5,8 @@ import type { ProgressComponentInclude } from '../Progress'
 import type { RippleComponentsInclude } from '../Ripple'
 
 import type { EventClickEmits, EventClickExpose } 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'
 import type { CaptionSlots } from '../../types/captionTypes'
 
 import type { CellClassesSub } from './basicTypes'
@@ -33,7 +33,7 @@ export type CellEmits = EventClickEmits
  *
  * Тип, описывающий доступные свойства.
  */
-export interface CellExpose extends EventClickExpose {
+export interface CellExpose extends LabelExpose, DescriptionExpose, EventClickExpose {
 }
 
 /**

package/src/constructors/Chip/ChipDesign.tsx

@@ -18,9 +18,9 @@ export class ChipDesign<
   CLASSES extends ChipClasses,
   P extends ChipPropsBasic
 > extends ButtonDesign<
-  COMP,
-  EXPOSE,
-  CLASSES,
-  P
-> {
+    COMP,
+    EXPOSE,
+    CLASSES,
+    P
+  > {
 }

package/src/constructors/Chip/ChipInclude.ts

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

package/src/constructors/Chip/basicTypes.ts

@@ -0,0 +1,12 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { ChipPropsBasic } from './props'
+
+export type ChipComponentInclude = {
+  chip?: object
+}
+
+export interface ChipPropsInclude<
+  Chip extends ChipPropsBasic = ChipPropsBasic
+> {
+  chipAttrs?: ConstrBind<Chip>
+}

package/src/constructors/Chip/index.ts

@@ -1,4 +1,6 @@
+export * from './Chip'
 export * from './ChipDesign'
+export * from './ChipInclude'
 export * from './props'
 export * from './types'
 export * from './basicTypes'

package/src/constructors/Chip/properties.json

@@ -1,3 +1,3 @@
-{
-  "link|button": "{d.button}"
-}
+{
+  "link|button": "{d.button}"
+}

package/src/constructors/Chip/types.ts

@@ -44,10 +44,10 @@ export interface ChipSlots extends ButtonSlots {
  */
 export type ChipClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  label: string
-  icon: string
-  trailing: string
-  loading: string
+  // :classes [!] System label / Системная метка
+  label: string
+  icon: string
+  trailing: string
+  loading: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/ChipGroup/ChipGroup.ts

@@ -0,0 +1,74 @@
+import { type Ref, type ToRefs } from 'vue'
+import {
+  type ConstrEmit,
+  DesignComp,
+  ListDataRef,
+  type ListList,
+  type ListSelectedList
+} from '@dxtmisha/functional'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+import { ModelValueInclude } from '../../classes/ModelValueInclude'
+
+import type { ChipGroupComponents, ChipGroupEmits, ChipGroupSlots } from './types'
+import type { ChipGroupProps } from './props'
+
+/**
+ * ChipGroup
+ */
+export class ChipGroup {
+  readonly data: ListDataRef
+  readonly event: EventClickInclude
+  readonly model: ModelValueInclude<ListSelectedList>
+
+  /**
+   * 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: ChipGroupProps,
+    protected readonly refs: ToRefs<ChipGroupProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ChipGroupComponents, ChipGroupProps>,
+    protected readonly slots?: ChipGroupSlots,
+    protected readonly emits?: ConstrEmit<ChipGroupEmits>
+  ) {
+    this.event = new EventClickInclude(undefined, undefined, this.emits)
+    this.model = new ModelValueInclude<ListSelectedList>(
+      'selected',
+      this.emits,
+      this.event,
+      this.refs.selected,
+      this.refs.readonly
+    )
+
+    this.data = new ListDataRef(
+      this.refs.list,
+      undefined,
+      undefined,
+      undefined,
+      undefined,
+      this.model.value,
+      this.refs.keyValue,
+      this.refs.keyLabel
+    )
+  }
+
+  /**
+   * Get list of items.
+   *
+   * Получить список элементов.
+   */
+  getList(): ListList {
+    return this.data.fullData.value
+  }
+}