@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Menu/Menu.ts

@@ -1,5 +1,5 @@
 import { computed, type Ref, type ToRefs } from 'vue'
-import { type ConstrEmit, DesignComp, ListData } from '@dxtmisha/functional'
+import { type ConstrEmit, DesignComp, ListDataRef } from '@dxtmisha/functional'
 
 import { EventClickInclude } from '../../classes/EventClickInclude'
 
@@ -11,6 +11,7 @@ import { MenuSearch } from './MenuSearch'
 
 import { MenuWindow } from './MenuWindow'
 import { MenuValue } from './MenuValue'
+import { MenuGo } from './MenuGo'
 
 import type { MenuComponents, MenuEmits, MenuSlots } from './types'
 import type { MenuProps } from './props'
@@ -30,7 +31,8 @@ export class Menu {
   readonly value: MenuValue
 
   /** Data manager for list selection and mapping/ Менеджер данных списка для выбора и сопоставления */
-  readonly data: ListData
+  readonly data: ListDataRef
+  readonly go: MenuGo
 
   /** Include for working with the Bars component/ Подключение для работы с компонентом Bars */
   readonly bars: BarsInclude
@@ -68,18 +70,20 @@ export class Menu {
     protected readonly emits?: ConstrEmit<MenuEmits>
   ) {
     this.request = new MenuRequest(this.props)
-    this.search = new MenuSearch()
+    this.search = new MenuSearch(this.props)
     this.value = new MenuValue(this.props, this.refs, this.emits)
 
-    this.data = new ListData(
+    this.data = new ListDataRef(
       this.request.item,
       undefined,
       undefined,
       undefined,
+      undefined,
       this.value.selected,
       this.refs.keyValue,
       this.refs.keyLabel
     )
+    this.go = new MenuGo(this.props, this.value, this.data)
 
     this.bars = new BarsInclude(
       this.props,
@@ -105,7 +109,10 @@ export class Menu {
       isSelected: this.data.isSelected,
       selectedList: this.data.selectedList,
       selectedNames: this.data.selectedNames,
-      selectedValues: this.data.selectedValues
+      selectedValues: this.data.selectedValues,
+
+      previous: this.go.previous,
+      next: this.go.next
     }
   }
 
@@ -116,14 +123,19 @@ export class Menu {
    */
   readonly binds = computed<ListPropsBasic>(() => {
     return {
+      filterMode: this.props.filterMode,
+
       liteThreshold: this.props.liteThreshold,
       keyLabel: this.props.keyLabel,
       keyValue: this.props.keyValue,
+      max: this.props.max,
 
       tag: this.props.tag,
       onClick: this.onClick,
       onClose: this.window.expose.toClose,
 
+      itemAttrs: this.props.itemAttrs,
+
       control: true
     }
   })

package/src/constructors/Menu/MenuDesign.tsx

@@ -31,14 +31,14 @@ export class MenuDesign<
   CLASSES extends MenuClasses,
   P extends MenuPropsBasic
 > extends DesignConstructorAbstract<
-  HTMLDivElement,
-  COMP,
-  MenuEmits,
-  EXPOSE,
-  MenuSlots,
-  CLASSES,
-  P
-> {
+    HTMLDivElement,
+    COMP,
+    MenuEmits,
+    EXPOSE,
+    MenuSlots,
+    CLASSES,
+    P
+  > {
   protected readonly item: Menu
 
   /**
@@ -153,7 +153,6 @@ export class MenuDesign<
     const children: any[] = []
     if (this.item.bars.is.value) {
       children.push(...this.item.bars.render())
-      console.log('this.item.bars.is.value', children)
     }
 
     this.initSlot('title', children, this.getBinds(props))
@@ -187,10 +186,11 @@ export class MenuDesign<
                 class: this.classes?.value.list,
 
                 selected: this.item.value.selected.value,
-                highlight: this.item.search.item.value,
+                highlight: this.item.search.value.value,
 
                 list,
-                lite: this.item.menuWindow.lite.value
+                lite: this.item.menuWindow.lite.value,
+                roleItem: this.props.roleItem
               },
               this.props.listAttrs
             ),

package/src/constructors/Menu/MenuGo.ts

@@ -0,0 +1,72 @@
+import { ListDataRef, type NumberOrStringOrBoolean } from '@dxtmisha/functional'
+
+import { MenuValue } from './MenuValue'
+
+import type { MenuProps } from './props'
+
+/**
+ * Navigation manager for Menu component
+ *
+ * Менеджер навигации для компонента Menu
+ */
+export class MenuGo {
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param value value manager/ менеджер значений
+   * @param data data manager for list/ менеджер данных списка
+   */
+  constructor(
+    protected readonly props: MenuProps,
+    protected readonly value: MenuValue,
+    protected readonly data: ListDataRef
+  ) {
+  }
+
+  /**
+   * Navigates to the previous item in the menu
+   *
+   * Переходит к предыдущему элементу меню
+   * @returns value of the previous item or undefined/ значение предыдущего элемента или undefined
+   */
+  readonly previous = (): NumberOrStringOrBoolean | undefined => {
+    return this.go(-1)
+  }
+
+  /**
+   * Navigates to the next item in the menu
+   *
+   * Переходит к следующему элементу меню
+   * @returns value of the next item or undefined/ значение следующего элемента или undefined
+   */
+  readonly next = (): NumberOrStringOrBoolean | undefined => {
+    return this.go(1)
+  }
+
+  /**
+   * Returns the step value for navigation
+   *
+   * Возвращает значение шага для навигации
+   * @returns step value/ значение шага
+   */
+  protected getStep(): number {
+    return Number(this.props.step) || 1
+  }
+
+  /**
+   * Navigates through the menu items by the specified direction
+   *
+   * Перемещается по элементам меню в указанном направлении
+   * @param directions direction multiplier (-1 for previous, 1 for next)/ множитель направления (-1 для предыдущего, 1 для следующего)
+   * @returns value of the selected item or undefined/ значение выбранного элемента или undefined
+   */
+  protected go(directions: number): NumberOrStringOrBoolean | undefined {
+    const value = this.data.getSelectedByStep(this.getStep() * directions)
+
+    if (value) {
+      this.value.setValue(value, true)
+    }
+
+    return value
+  }
+}

package/src/constructors/Menu/MenuInclude.ts

@@ -5,7 +5,8 @@ import {
   getRef,
   type RawSlots,
   type RefOrNormal,
-  toBind
+  toBind,
+  toBinds
 } from '@dxtmisha/functional'
 
 import type { MenuComponentInclude, MenuExposeInclude, MenuPropsInclude } from './basicTypes'
@@ -53,17 +54,17 @@ export class MenuInclude<
 
   /** Computed bindings for the menu/ Вычисляемые привязки для меню */
   readonly binds = computed<PropsExtra>(() => {
-    const props = toBind<PropsExtra>(
-      toBind(
-        getRef(this.extra) ?? {},
-        this.props.menuAttrs ?? {}
-      ),
-      { class: `${this.className}__menu` }
+    const props = toBinds<PropsExtra>(
+      getRef(this.extra),
+      this.props.menuAttrs,
+      {
+        class: `${this.className}__menu`
+      }
     )
 
     return {
-      ...props,
-      disabled: this.props.disabled
+      disabled: this.props.disabled,
+      ...props
     }
   })
 
@@ -78,6 +79,15 @@ export class MenuInclude<
     menuElement: this.element
   }
 
+  /**
+   * Get the menu element
+   *
+   * Получить элемент меню
+   */
+  getElement() {
+    return this.element.value
+  }
+
   /**
    * Render the Menu component
    *
@@ -90,7 +100,7 @@ export class MenuInclude<
     slotsChildren?: MenuSlots,
     attrs?: Record<string, any>
   ): VNode[] => {
-    if (this.components && this.is.value) {
+    if (this.components) {
       return this.components.render(
         'menu',
         {

package/src/constructors/Menu/MenuSearch.ts

@@ -1,5 +1,6 @@
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { isFilled } from '@dxtmisha/functional'
+import type { MenuProps } from './props'
 
 /**
  * Class for working with search.
@@ -9,6 +10,24 @@ import { isFilled } from '@dxtmisha/functional'
 export class MenuSearch {
   readonly item = ref<string>()
 
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: MenuProps
+  ) {
+  }
+
+  /** Returns the search string/ Возвращает строку поиска */
+  readonly value = computed<string | undefined>(() => {
+    if (this.props.highlight) {
+      return this.props.highlight
+    }
+
+    return this.item.value
+  })
+
   /**
    * Sets the search string.
    *

package/src/constructors/Menu/MenuValue.ts

@@ -26,7 +26,7 @@ export class MenuValue {
     protected readonly emits?: ConstrEmit<MenuEmits>
   ) {
     if (this.props.isSelectedByValue) {
-      new ModelInclude('value', this.emits, this.value)
+      new ModelInclude('selected', this.emits, this.value)
 
       if (refs.selected) {
         watch(
@@ -58,15 +58,19 @@ export class MenuValue {
    *
    * Устанавливает новое выбранное значение, если оно изменилось, и возвращает экземпляр для чейнинга.
    * @param value selected list value/ выбранное значение списка
-   * @returns this
+   * @param isEmit whether to emit the update event/ нужно ли вызвать событие обновления
    */
-  setValue(value: ListSelectedList): this {
+  setValue(value: ListSelectedList, isEmit: boolean = false): this {
     if (
       this.props.isSelectedByValue
       && !isObject(value)
       && this.value.value !== value
     ) {
       this.value.value = value
+
+      if (isEmit) {
+        this.emits?.('updateValue', value)
+      }
     }
     return this
   }

package/src/constructors/Menu/MenuWindow.ts

@@ -36,7 +36,8 @@ export class MenuWindow {
       adaptive: 'menu',
       preparation: this.preparation,
       opening: this.opening,
-      closing: this.closing
+      closing: this.closing,
+      role: 'menu'
     }
   }
 

package/src/constructors/Menu/basicTypes.ts

@@ -1,15 +1,18 @@
 import type { ComputedRef, Ref } from 'vue'
-import type { ConstrBind } from '@dxtmisha/functional'
+import type { ConstrBind, NumberOrStringOrBoolean } from '@dxtmisha/functional'
 import type { WindowControlItem } from '../Window'
 
 import type { ListExpose } from '../List'
 import type { MenuExpose } from './types'
-import type { MenuProps } from './props'
+import type { MenuPropsBasic } from './props'
 
 export type MenuControlBasic
   = ListExpose
     & {
       loading: Ref<boolean>
+
+      previous(): NumberOrStringOrBoolean | undefined
+      next(): NumberOrStringOrBoolean | undefined
     }
 
 export type MenuControlItem
@@ -34,8 +37,22 @@ export interface MenuExposeInclude {
   menuElement: Ref<ConstrBind<MenuExpose> | undefined>
 }
 
+export type MenuSlotInclude = {
+  /** Title slot for window title/ Слот заголовка для заголовка окна */
+  title?(props: MenuControlItem): any
+
+  /** Footer slot for window bottom/ Слот подвала для низа окна */
+  footer?(props: MenuControlItem): any
+
+  /** Context slot for top area / Слот контекстной области сверху */
+  contextTop?(props: MenuControlItem): any
+
+  /** Context slot for bottom area / Слот контекстной области снизу */
+  contextBottom?(props: MenuControlItem): any
+}
+
 /** Interface for menu include props/ Интерфейс для свойств включения меню */
-export interface MenuPropsInclude {
+export interface MenuPropsInclude<Menu extends MenuPropsBasic = MenuPropsBasic> {
   disabled?: boolean
-  menuAttrs?: ConstrBind<MenuProps>
+  menuAttrs?: ConstrBind<Menu>
 }

package/src/constructors/Menu/properties.json

@@ -1,17 +1,17 @@
-{
-  "barsDisplay": {
-    "_type": "var"
-  },
-  "#bars": {},
-  "#list": {},
-  "~hideList": {},
-  "~barsAdaptive": {
-    "showAlways": {
-      "barsDisplay": "flex"
-    },
-    "group|show": {
-      "link|barsAdaptive-show": "{??barsAdaptive.showAlways}",
-      "_type": "media-group"
-    }
-  }
-}
+{
+  "barsDisplay": {
+    "_type": "var"
+  },
+  "#bars": {},
+  "#list": {},
+  "~hideList": {},
+  "~barsAdaptive": {
+    "showAlways": {
+      "barsDisplay": "flex"
+    },
+    "group|show": {
+      "link|barsAdaptive-show": "{??barsAdaptive.showAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/Menu/props.ts

@@ -10,7 +10,9 @@ import type { ListPropsBasic } from '../List'
 import type { ListItemProps, ListItemPropsBasic } from '../ListItem'
 import type { BarsPropsBasic, BarsPropsInclude } from '../Bars'
 import type { WindowPropsBasic, WindowPropsInclude } from '../Window'
-import type { ModelProps } from '../../types/modelTypes'
+
+import type { ModelPropsSelected } from '../../types/modelTypes'
+import type { RoleType } from '../../types/roleTypes'
 
 interface MenuPropsToken {
   // :type [!] System label / Системная метка
@@ -26,15 +28,17 @@ export interface MenuPropsBasic<
   Window extends WindowPropsBasic = WindowPropsBasic
 > extends BarsPropsInclude<Bars>,
   WindowPropsInclude<Window>,
-  ModelProps {
+  ModelPropsSelected {
   // Status
   selected?: ListSelectedList
-  highlightLengthStart?: number
   hideList?: boolean
 
   // Value
   list?: ListRecord<ListItem>
   liteThreshold?: number
+  highlight?: string
+  highlightLengthStart?: number
+  filterMode?: boolean
 
   ajax?: string | (() => NormalOrPromise<ListRecord<ListItem>>)
   request?: ApiFetch
@@ -43,12 +47,18 @@ export interface MenuPropsBasic<
   keyLabel?: string
   keyValue?: string
 
+  max?: string | number
+
   // Style
   tag?: ListItemProps['tag']
+  step?: string | number
 
   listAttrs?: ConstrBind<List>
   itemAttrs?: ConstrBind<ListItem>
 
+  // ARIA
+  roleItem?: RoleType
+
   // Technical
   isSelectedByValue?: boolean
 }
@@ -71,7 +81,9 @@ export const defaultsMenu = {
   barsHide: true,
   barsBackHide: true,
   tag: 'a',
+  step: 1,
   autoClose: true,
+  roleItem: 'menuitem',
   ...{
     // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка

package/src/constructors/Menu/types.ts

@@ -1,13 +1,13 @@
-import type { ConstrClass } from '@dxtmisha/functional'
+import type { ConstrClass, NumberOrStringOrBoolean } from '@dxtmisha/functional'
 
 import type { EventClickEmits } from '../../types/eventClickTypes'
 
 import type { ListComponentInclude, ListSlots } from '../List'
 import type { BarsComponentInclude, BarsEmitsInclude } from '../Bars'
 import type { WindowComponentInclude, WindowEmitsInclude, WindowExposeInclude } from '../Window'
-import type { ModelEmits } from '../../types/modelTypes'
+import type { ModelEmitsSelected } from '../../types/modelTypes'
 
-import type { MenuControlBasic, MenuControlItem } from './basicTypes'
+import type { MenuControlBasic, MenuControlItem, MenuSlotInclude } from './basicTypes'
 
 /**
  * Interface for describing which components need to be connected for work.
@@ -28,8 +28,9 @@ export type MenuEmits
   = BarsEmitsInclude
     & EventClickEmits
     & WindowEmitsInclude
-    & ModelEmits
+    & ModelEmitsSelected
     & {
+      updateValue: [value?: NumberOrStringOrBoolean]
       clickSlot: [value?: string]
     }
 
@@ -48,21 +49,10 @@ export interface MenuExpose extends WindowExposeInclude, MenuControlBasic {
  */
 export type MenuSlots
   = ListSlots
+    & MenuSlotInclude
     & {
       /** Control slot for window management / Слот управления для управления окном */
       control?(props: MenuControlItem): any
-
-      /** Footer slot for window bottom / Слот подвала для низа окна */
-      title?(props: MenuControlItem): any
-
-      /** Footer slot for window bottom/ Слот подвала для низа окна */
-      footer?(props: MenuControlItem): any
-
-      /** Context slot for top area / Слот контекстной области сверху */
-      contextTop?(props: MenuControlItem): any
-
-      /** Context slot for bottom area / Слот контекстной области снизу */
-      contextBottom?(props: MenuControlItem): any
     }
 
 /**

package/src/constructors/Modal/Modal.ts

@@ -0,0 +1,53 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { ModalAbstract } from './ModalAbstract'
+
+import type { ModalComponents, ModalEmits, ModalSlots } from './types'
+import type { ModalProps } from './props'
+
+/**
+ * Modal
+ */
+export class Modal extends ModalAbstract {
+  /**
+   * 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: ModalProps,
+    protected readonly refs: ToRefs<ModalProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ModalComponents, ModalProps>,
+    protected readonly slots?: ModalSlots,
+    protected readonly emits?: ConstrEmit<ModalEmits>
+  ) {
+    super(
+      props,
+      refs,
+      element,
+      classDesign,
+      className,
+      components,
+      slots,
+      emits,
+      computed(() => ({
+        open: props.open,
+        image: props.image,
+
+        adaptive: 'modal',
+        imagePosition: props.imagePosition,
+        closeButton: props.barsBackHide
+      }))
+    )
+  }
+}

package/src/constructors/Modal/ModalAbstract.ts

@@ -0,0 +1,74 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, getRef, type RefOrNormal } from '@dxtmisha/functional'
+
+import { WindowInclude } from '../Window'
+import { BarsInclude } from '../Bars'
+import { ActionsInclude } from '../Actions'
+
+import type { ModalComponents, ModalEmits, ModalSlots } from './types'
+import type { ModalProps } from './props'
+
+/**
+ * ModalAbstract
+ */
+export abstract class ModalAbstract {
+  readonly bars: BarsInclude
+  readonly actions: ActionsInclude
+  readonly window: WindowInclude
+
+  /**
+   * 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/ функция вызывается, когда срабатывает событие
+   * @param extraWindow additional parameters for WindowInclude/ дополнительные параметры для WindowInclude
+   * @param extraBars additional parameters for BarsInclude/ дополнительные параметры для BarsInclude
+   * @param extraActions additional parameters for ActionsInclude/ дополнительные параметры для ActionsInclude
+   */
+  protected constructor(
+    protected readonly props: ModalProps,
+    protected readonly refs: ToRefs<ModalProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ModalComponents, ModalProps>,
+    protected readonly slots?: ModalSlots,
+    protected readonly emits?: ConstrEmit<ModalEmits>,
+    protected readonly extraWindow?: RefOrNormal<any>,
+    protected readonly extraBars?: RefOrNormal<any>,
+    protected readonly extraActions?: RefOrNormal<any>
+  ) {
+    this.bars = new BarsInclude(
+      props,
+      className,
+      components,
+      emits,
+      extraBars
+    )
+
+    this.actions = new ActionsInclude(
+      props,
+      className,
+      components,
+      emits,
+      extraActions
+    )
+
+    this.window = new WindowInclude(
+      props,
+      className,
+      components,
+      emits,
+      computed(() => ({
+        ...getRef(extraWindow),
+        ariaLabelledby: this.bars.element.value?.labelId,
+        ariaDescribedby: this.bars.element.value?.descriptionId
+      }))
+    )
+  }
+}