@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/List/ListDesign.tsx

@@ -23,6 +23,7 @@ import {
   type ListSlots
 } from './types'
 import type { WindowControlItem } from '../Window'
+import type { ListGroupSlotsPropsInclude } from '../ListGroup'
 
 /**
  * ListDesign
@@ -33,14 +34,14 @@ export class ListDesign<
   CLASSES extends ListClasses,
   P extends ListPropsBasic
 > extends DesignConstructorAbstract<
-  HTMLDivElement,
-  COMP,
-  ListEmits,
-  EXPOSE,
-  ListSlots,
-  CLASSES,
-  P
-> {
+    HTMLDivElement,
+    COMP,
+    ListEmits,
+    EXPOSE,
+    ListSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: List
 
   /**
@@ -95,7 +96,7 @@ export class ListDesign<
    */
   protected initClasses(): Partial<CLASSES> {
     return {
-      main: {},
+      main: this.item.classes.value,
       ...{
         // :classes [!] System label / Системная метка
         space: this.getSubClass('space'),
@@ -168,12 +169,12 @@ export class ListDesign<
    *
    * Генерирует групповой элемент.
    * @param item selected element/ выбранный элемент
-   * @param open is the group open/ открыта ли группа
+   * @param props data for working with the group/ данные для работы с группой
    */
-  readonly renderItemGroup = (item: ListDataItem, open: boolean): VNode => {
+  readonly renderItemGroup = (item: ListDataItem, props: ListGroupSlotsPropsInclude): VNode => {
     return this.components.renderOne(
       'listItem',
-      this.item.getItemManagementFormGroup(item, open)
+      this.item.getItemManagementFormGroup(item, props)
     ) as VNode
   }
 
@@ -284,10 +285,11 @@ export class ListDesign<
       'listGroup',
       {
         open: this.item.isOpenGroup(item),
-        divider: this.props.divider
+        divider: this.props.divider,
+        disabled: item.disabled
       },
       {
-        head: ({ open }: { open: boolean }) => this.renderItemGroup(item, open),
+        head: (props: ListGroupSlotsPropsInclude) => this.renderItemGroup(item, props),
         list: () => this.renderDataByItem('group', this.item.getList(item))
       }
     ) as VNode
@@ -305,7 +307,8 @@ export class ListDesign<
       'listMenu',
       {
         divider: this.props.divider,
-        axis: first ? (this.props.axis === 'x' ? 'y' : 'x') : 'x'
+        axis: first ? (this.props.axis === 'x' ? 'y' : 'x') : 'x',
+        disabled: item.disabled
       },
       {
         head: (props: WindowControlItem) => this.renderItemMenu(item, props),
@@ -314,27 +317,6 @@ export class ListDesign<
     ) as VNode
   }
 
-  /**
-   * Returns binding properties for the item.
-   *
-   * Возвращает привязочные свойства для элемента.
-   * @param type type of list/ тип списка
-   * @param item selected element/ выбранный элемент
-   */
-  protected getItemAttrs(
-    type: ListType,
-    item: ListDataItem
-  ) {
-    switch (type) {
-      case 'group':
-        return this.item.getItemGroup(item)
-      case 'menu':
-        return this.item.getItemMenu(item)
-      default:
-        return this.item.getItem(item)
-    }
-  }
-
   /**
    * Generates all elements from the list.
    *
@@ -365,10 +347,14 @@ export class ListDesign<
           children.push(this.renderHtml(item))
           break
         case 'group':
-          children.push(this.renderGroup(item))
+          if (this.isHighlight(item)) {
+            children.push(this.renderGroup(item))
+          }
           break
         case 'menu':
-          children.push(this.renderMenu(item, first))
+          if (this.isHighlight(item)) {
+            children.push(this.renderMenu(item, first))
+          }
           break
         default:
           children.push(this.renderItem(type, item))
@@ -379,4 +365,39 @@ export class ListDesign<
     children.push(h('div'))
     return children
   }
+
+  /**
+   * Determines if highlighting is required.
+   *
+   * Определяет, требуется ли выделение.
+   * @param item selected element/ выбранный элемент
+   */
+  protected isHighlight(item: ListDataItem): boolean {
+    if (!this.props.filterMode) {
+      return true
+    }
+
+    return this.item.data.getSubList(item).isHighlightActive()
+  }
+
+  /**
+   * Returns binding properties for the item.
+   *
+   * Возвращает привязочные свойства для элемента.
+   * @param type type of list/ тип списка
+   * @param item selected element/ выбранный элемент
+   */
+  protected getItemAttrs(
+    type: ListType,
+    item: ListDataItem
+  ) {
+    switch (type) {
+      case 'group':
+        return this.item.getItemGroup(item)
+      case 'menu':
+        return this.item.getItemMenu(item)
+      default:
+        return this.item.getItem(item)
+    }
+  }
 }

package/src/constructors/List/ListGo.ts

@@ -1,7 +1,7 @@
 import {
   type ConstrEmit,
   isSelected,
-  ListData
+  ListDataRef
 } from '@dxtmisha/functional'
 
 import { ListFocus } from './ListFocus'
@@ -27,7 +27,7 @@ export class ListGo {
   constructor(
     protected readonly props: ListProps,
     protected readonly focus: ListFocus,
-    protected readonly data: ListData,
+    protected readonly data: ListDataRef,
     protected readonly emits?: ConstrEmit<ListEmits>
   ) {
   }
@@ -135,7 +135,9 @@ export class ListGo {
    * Открывает окно, если элемент в нем.
    */
   open(): void {
-    if (
+    if (this.focus.isItem()) {
+      this.focus.click()
+    } else if (
       this.focus.isGroup()
       || this.focus.isMenu()
     ) {

package/src/constructors/List/properties.json

@@ -1,16 +1,16 @@
-{
-  "#space": {},
-  "#line": {},
-  "#subtitle": {},
-  "#html": {},
-  "#management": {},
-  "#group": {},
-  "#menu": {},
-  "#menuGroup": {},
-  "~axis": {
-    "~x": {},
-    "~y": {},
-    "_default": "y"
-  },
-  "~divider": {}
-}
+{
+  "#space": {},
+  "#line": {},
+  "#subtitle": {},
+  "#html": {},
+  "#management": {},
+  "#group": {},
+  "#menu": {},
+  "#menuGroup": {},
+  "~axis": {
+    "~x": {},
+    "~y": {},
+    "_default": "y"
+  },
+  "~divider": {}
+}

package/src/constructors/List/props.ts

@@ -5,6 +5,7 @@ import type {
   ListSelectedList
 } from '@dxtmisha/functional'
 import type { IconPropsBasic, IconValue } from '../Icon'
+import type { RoleType } from '../../types/roleTypes'
 import type { ListItemPropsBasic } from '../ListItem'
 
 interface ListPropsToken {
@@ -29,10 +30,13 @@ export interface ListPropsBasic<
   liteThreshold?: number
   highlight?: string
   highlightLengthStart?: number
+  filterMode?: boolean
 
   keyLabel?: string
   keyValue?: string
 
+  max?: string | number
+
   // Style
   tag?: 'div' | 'button' | 'a' | 'span' | string
 
@@ -47,6 +51,9 @@ export interface ListPropsBasic<
   iconArrowDown?: IconValue<Icon>
   iconArrowRight?: IconValue<Icon>
 
+  // ARIA
+  roleItem?: RoleType
+
   // Technical
   control?: boolean
 }

package/src/constructors/List/style.scss

@@ -33,4 +33,18 @@
       }
     }
   }
+
+  &--highlightActive {
+    @include ui.subclass('space') {
+      display: none;
+    }
+
+    @include ui.subclass('line') {
+      display: none;
+    }
+
+    @include ui.subclass('subtitle') {
+      display: none;
+    }
+  }
 }

package/src/constructors/List/types.ts

@@ -53,14 +53,14 @@ export type ListSlots = Record<string, (props: any) => any>
  */
 export type ListClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  space: string
-  line: string
-  subtitle: string
-  html: string
-  management: string
-  group: string
-  menu: string
-  menuGroup: string
+  // :classes [!] System label / Системная метка
+  space: string
+  line: string
+  subtitle: string
+  html: string
+  management: string
+  group: string
+  menu: string
+  menuGroup: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/ListGroup/ListGroupDesign.tsx

@@ -5,6 +5,7 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { ListGroup } from './ListGroup'
 
 import {
@@ -17,6 +18,7 @@ import {
   type ListGroupExpose,
   type ListGroupSlots
 } from './types'
+import type { MotionTransformControlItem } from '../MotionTransform'
 
 /**
  * ListGroupDesign
@@ -117,7 +119,8 @@ export class ListGroupDesign<
         ...this.getAttrs(),
         'class': this.classes?.value.main,
         'data-open': this.item.open.is.value ? 'open' : 'close',
-        'data-divider': this.props.divider ? 'divider' : undefined
+        'data-divider': this.props.divider ? 'divider' : undefined,
+        ...AriaStaticInclude.role('group')
       },
       this.renderTransform()
     )
@@ -146,8 +149,9 @@ export class ListGroupDesign<
    * Render title element.
    *
    * Рендер элемента заголовка.
+   * @param item motion transform item/ элемент движения трансформации
    */
-  readonly renderHead = (): VNode => {
+  readonly renderHead = (item: MotionTransformControlItem): VNode => {
     return h(
       'div',
       {
@@ -157,7 +161,8 @@ export class ListGroupDesign<
         'head',
         undefined,
         {
-          open: this.item.open.is.value
+          open: this.item.open.is.value,
+          ...item.binds
         }
       )
     )

package/src/constructors/ListGroup/basicTypes.ts

@@ -1,3 +1,10 @@
+import type { MotionTransformControlItem } from '../MotionTransform'
+
 export type ListGroupComponentInclude = {
   listGroup?: object
 }
+
+export interface ListGroupSlotsPropsInclude
+  extends MotionTransformControlItem {
+  open: boolean
+}

package/src/constructors/ListGroup/properties.json

@@ -1,15 +1,15 @@
-{
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "border-opacity": {
-    "_type": "var"
-  },
-  "#head": {},
-  "#list": {},
-  "~open": {},
-  "~divider": {}
-}
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#list": {},
+  "~open": {},
+  "~divider": {}
+}

package/src/constructors/ListGroup/props.ts

@@ -1,7 +1,7 @@
 interface ListGroupPropsToken {
-  // :type [!] System label / Системная метка
-  open?: boolean
-  divider?: boolean
+  // :type [!] System label / Системная метка
+  open?: boolean
+  divider?: boolean
   // :type [!] System label / Системная метка
 }
 
@@ -24,7 +24,7 @@ export interface ListGroupProps extends ListGroupPropsBasic, ListGroupPropsToken
  */
 export const defaultsListGroup = {
   ...{
-    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/ListGroup/types.ts

@@ -2,6 +2,7 @@ import type { ComputedRef } from 'vue'
 import type { ConstrClass } from '@dxtmisha/functional'
 
 import type { MotionTransformComponentInclude } from '../MotionTransform'
+import type { ListGroupSlotsPropsInclude } from './basicTypes'
 
 /**
  * Interface for describing which components need to be connected for work.
@@ -33,7 +34,7 @@ export interface ListGroupExpose {
  * Тип, описывающий доступные слоты.
  */
 export interface ListGroupSlots {
-  head?(props: { open: boolean }): any
+  head?(props: ListGroupSlotsPropsInclude): any
   list?(props: any): any
 }
 

package/src/constructors/ListItem/ListItem.ts

@@ -1,12 +1,14 @@
 import { computed, type Ref, type ToRefs } from 'vue'
 import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
 
-import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+import { getClassTagAStatic } from '../../functions/getClassTagAStatic'
 
 import { IconTrailingInclude } from '../Icon'
 import { ProgressInclude } from '../Progress'
 import { RippleInclude } from '../Ripple'
 import { SkeletonInclude } from '../Skeleton'
+import { EventClickInclude } from '../../classes/EventClickInclude'
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 
 import { LabelHighlightInclude } from '../../classes/LabelHighlightInclude'
 import { PrefixInclude } from '../../classes/PrefixInclude'
@@ -18,8 +20,7 @@ import { BadgeInclude } from '../Badge/BadgeInclude'
 import { EnabledInclude } from '../../classes/EnabledInclude'
 
 import type { ListItemComponents, ListItemEmits, ListItemSlots } from './types'
-import type { ListItemPropsBasic } from './props'
-import { EventClickInclude } from '../../classes/EventClickInclude'
+import type { ListItemProps } from './props'
 
 /**
  * ListItem
@@ -52,12 +53,12 @@ export class ListItem {
    * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
    */
   constructor(
-    protected readonly props: ListItemPropsBasic,
-    protected readonly refs: ToRefs<ListItemPropsBasic>,
+    protected readonly props: ListItemProps,
+    protected readonly refs: ToRefs<ListItemProps>,
     protected readonly element: Ref<HTMLElement | undefined>,
     protected readonly classDesign: string,
     protected readonly className: string,
-    protected readonly components?: DesignComp<ListItemComponents, ListItemPropsBasic>,
+    protected readonly components?: DesignComp<ListItemComponents, ListItemProps>,
     protected readonly slots?: ListItemSlots,
     protected readonly emits?: ConstrEmit<ListItemEmits>
   ) {
@@ -107,9 +108,68 @@ export class ListItem {
     this.event = new EventClickInclude(props, enabled, emits)
   }
 
+  /** tag type/ тип тега */
+  readonly tag = computed<string>(() => {
+    if (this.props.tag) {
+      return this.props.tag
+    }
+
+    if (this.props.href) {
+      return 'a'
+    }
+
+    return 'div'
+  })
+
   /** values for the class/ значения для класса */
   readonly classes = computed<ConstrClassObject>(() => ({
     [`${this.className}--description`]: this.description.is.value,
-    [getClassTegAStatic(this.classDesign)]: true
+    [getClassTagAStatic(this.classDesign)]: true
   }))
+
+  /** values for attributes/ значения для атрибутов */
+  readonly binds = computed(() => {
+    const data = {
+      'data-value': this.props.index ?? this.props.value,
+      'data-divider': this.props.divider ? 'active' : undefined,
+      'data-parent': this.props.parent,
+      'data-list-id': this.props.listId,
+      'tabindex': this.props.tabindex,
+      'role': this.props.role,
+      ...AriaStaticInclude.disabled(Boolean(this.props.disabled)),
+      'onClick': this.event.onClick
+    }
+
+    if (this.props.isMenu) {
+      Object.assign(
+        data,
+        AriaStaticInclude.haspopup('menu')
+      )
+    }
+
+    return data
+  })
+
+  /** values for attributes with open state/ значения для атрибутов с состоянием open */
+  readonly bindsAndOpen = computed(() => {
+    const data = {
+      ...this.binds.value
+    }
+
+    if (this.props.isMenu) {
+      Object.assign(
+        data,
+        AriaStaticInclude.expanded(Boolean(this.props.open))
+      )
+    }
+
+    if (this.props.isItemMenu) {
+      Object.assign(
+        data,
+        AriaStaticInclude.checked(Boolean(this.props.selected))
+      )
+    }
+
+    return data
+  })
 }

package/src/constructors/ListItem/ListItemDesign.tsx

@@ -119,7 +119,14 @@ export class ListItemDesign<
    *
    * Метод для рендеринга.
    */
-  protected initRender(): VNode {
+  protected initRender(): VNode | undefined {
+    if (
+      this.props.filterMode
+      && !this.item.label.isHighlight()
+    ) {
+      return undefined
+    }
+
     const children: any[] = []
 
     this.initSlot('leading', children)
@@ -133,17 +140,13 @@ export class ListItemDesign<
     )
 
     return h(
-      this.props.tag ?? 'div',
+      this.item.tag.value,
       {
         ...this.getAttrs(),
-        'ref': this.element,
-        'class': this.classes?.value.main,
-        'style': this.styles?.value,
-        'data-value': this.props.index ?? this.props.value,
-        'data-divider': this.props.divider ? 'active' : undefined,
-        'data-parent': this.props.parent,
-        'data-list-id': this.props.listId,
-        'onClick': this.item.event.onClick
+        ref: this.element,
+        class: this.classes?.value.main,
+        style: this.styles?.value,
+        ...this.item.bindsAndOpen.value
       },
       children
     )

package/src/constructors/ListItem/properties.json

@@ -1,52 +1,52 @@
-{
-  "paddingX": {
-    "_type": "var"
-  },
-  "paddingY": {
-    "_type": "var"
-  },
-  "shift": {
-    "_type": "var"
-  },
-  "height": {
-    "_type": "var"
-  },
-  "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}",
-  "#body": {},
-  "#context": {},
-  "#label": {},
-  "#highlight": {},
-  "#prefix": {},
-  "#caption": {},
-  "#description": {},
-  "#icon": {},
-  "#trailing": {},
-  "#badge": {},
-  "#input": {},
-  "~focus": {},
-  "~open": {},
-  "~selected": {},
-  "~selectedChild": {},
-  "~readonly": {},
-  "~disabled": {},
-  "~iconTop": {},
-  "~iconAlign": {
-    "~center": {},
-    "~edge": {},
-    "_default": "center"
-  },
-  "~fill": {
-    "_type": "state",
-    "_var": true,
-    "_style": true
-  },
-  "~divider": {}
-}
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "shift": {
+    "_type": "var"
+  },
+  "height": {
+    "_type": "var"
+  },
+  "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}",
+  "#body": {},
+  "#context": {},
+  "#label": {},
+  "#highlight": {},
+  "#prefix": {},
+  "#caption": {},
+  "#description": {},
+  "#icon": {},
+  "#trailing": {},
+  "#badge": {},
+  "#input": {},
+  "~focus": {},
+  "~open": {},
+  "~selected": {},
+  "~selectedChild": {},
+  "~readonly": {},
+  "~disabled": {},
+  "~iconTop": {},
+  "~iconAlign": {
+    "~center": {},
+    "~edge": {},
+    "_default": "center"
+  },
+  "~fill": {
+    "_type": "state",
+    "_var": true,
+    "_style": true
+  },
+  "~divider": {}
+}