@dxtmisha/constructor 0.23.0

package/src/constructors/Menu/MenuDesign.tsx

@@ -0,0 +1,244 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  type RawSlots,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Menu } from './Menu'
+
+import type { WindowControlItem } from '../Window'
+import type { MenuControlItem } from './basicTypes'
+import {
+  type MenuPropsBasic
+} from './props'
+import {
+  type MenuClasses,
+  type MenuComponents,
+  type MenuEmits,
+  type MenuExpose,
+  type MenuSlots
+} from './types'
+
+/**
+ * MenuDesign
+ */
+export class MenuDesign<
+  COMP extends MenuComponents,
+  EXPOSE extends MenuExpose,
+  CLASSES extends MenuClasses,
+  P extends MenuPropsBasic
+> extends DesignConstructorAbstract<
+  HTMLDivElement,
+  COMP,
+  MenuEmits,
+  EXPOSE,
+  MenuSlots,
+  CLASSES,
+  P
+> {
+  protected readonly item: Menu
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, MenuEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Menu(
+      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 {
+      ...this.item.window.expose,
+      ...this.item.getControlBinds()
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        bars: this.getSubClass('bars'),
+        list: this.getSubClass('list')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.window.render(
+      {
+        control: this.renderControl,
+        title: this.renderTitle,
+        default: this.renderList,
+        footer: this.renderFooter
+      },
+      {
+        class: this.classes?.value.main
+      }
+    )
+  }
+
+  /**
+   * Generates data for control.
+   *
+   * Генерирует данные для контроля.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  readonly renderControl = (
+    props: WindowControlItem
+  ): VNode | undefined => {
+    return this.initSlot('control', undefined, this.getBinds(props))
+  }
+
+  /**
+   * Render title element.
+   *
+   * Рендер элемента заголовка.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  readonly renderTitle = (
+    props: WindowControlItem
+  ): VNode[] => {
+    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))
+
+    return children
+  }
+
+  /**
+   * Render list element.
+   *
+   * Рендер элемента списка.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  readonly renderList = (
+    props: WindowControlItem
+  ): VNode | undefined => {
+    const list = this.item.request.item.value
+
+    if (list) {
+      const children: any[] = []
+
+      this.initSlot('contextTop', children, this.getBinds(props))
+
+      if (!this.props.hideList) {
+        children.push(
+          this.components.render(
+            'list',
+            toBinds(
+              {
+                ...this.item.binds.value,
+                class: this.classes?.value.list,
+
+                selected: this.item.value.selected.value,
+                highlight: this.item.search.item.value,
+
+                list,
+                lite: this.item.menuWindow.lite.value
+              },
+              this.props.listAttrs
+            ),
+            this.slots as RawSlots
+          )
+        )
+      }
+
+      this.initSlot('contextBottom', children, this.getBinds(props))
+
+      return h(
+        'div',
+        {
+          ...this.getAttrs(),
+          ref: this.element,
+          onClick: this.item.onClickSlot
+        },
+        children
+      )
+    }
+
+    return undefined
+  }
+
+  /**
+   * Render footer element.
+   *
+   * Рендер элемента футера.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  readonly renderFooter = (
+    props: WindowControlItem
+  ): VNode | undefined => {
+    return this.initSlot('footer', undefined, this.getBinds(props))
+  }
+
+  /**
+   * Generates data for control.
+   *
+   * Генерирует данные для контроля.
+   * @param props data for the transferable property/ данные для передаваемого свойства
+   */
+  protected getBinds(
+    props: WindowControlItem
+  ): MenuControlItem {
+    return {
+      ...props,
+      ...this.item.getControlBinds()
+    }
+  }
+}

package/src/constructors/Menu/MenuInclude.ts

@@ -0,0 +1,110 @@
+import { computed, ref, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  DesignComponents,
+  getRef,
+  type RawSlots,
+  type RefOrNormal,
+  toBind
+} from '@dxtmisha/functional'
+
+import type { MenuComponentInclude, MenuExposeInclude, MenuPropsInclude } from './basicTypes'
+import type { MenuExpose, MenuSlots } from './types'
+import type { MenuProps } from './props'
+
+/**
+ * MenuInclude class provides functionality for conditionally rendering menu components
+ * within other components. It manages the logic for determining when to display menu
+ * and configures the appropriate properties.
+ *
+ * Класс MenuInclude предоставляет функциональность для условного рендеринга компонентов
+ * меню внутри других компонентов. Он управляет логикой определения необходимости
+ * отображения меню и настраивает соответствующие свойства.
+ */
+export class MenuInclude<
+  Props extends MenuPropsInclude = MenuPropsInclude,
+  PropsExtra extends ConstrBind<MenuProps> = ConstrBind<MenuProps>
+> {
+  /** Reference to menu element/ Ссылка на элемент меню */
+  protected readonly element = ref<ConstrBind<MenuExpose> | undefined>()
+
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   * @param index index identifier/ идентификатор индекса
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<MenuComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<PropsExtra>,
+    protected readonly index?: string
+  ) {
+  }
+
+  /**
+   * Checks whether menu should be displayed/
+   * Проверяет, нужно ли отображать меню
+   */
+  readonly is = computed(() => Boolean(!this.props.disabled && this.components))
+
+  /** Computed bindings for the menu/ Вычисляемые привязки для меню */
+  readonly binds = computed<PropsExtra>(() => {
+    const props = toBind<PropsExtra>(
+      toBind(
+        getRef(this.extra) ?? {},
+        this.props.menuAttrs ?? {}
+      ),
+      { class: `${this.className}__menu` }
+    )
+
+    return {
+      ...props,
+      disabled: this.props.disabled
+    }
+  })
+
+  /** Menu expose functionality/ Функциональность экспорта меню */
+  readonly expose: MenuExposeInclude = {
+    open: computed(() => Boolean(this.element.value?.open)),
+    setOpen: async (open: boolean) => this.element.value?.setOpen(open),
+    toOpen: async () => this.element.value?.toOpen(),
+    toClose: async () => this.element.value?.toClose(),
+    toggle: async () => this.element.value?.toggle(),
+
+    menuElement: this.element
+  }
+
+  /**
+   * Render the Menu component
+   *
+   * Рендер компонента меню
+   * @param slotsChildren menu slots/ слоты меню
+   * @param attrs additional attributes/ дополнительные атрибуты
+   * @returns VNode array/ массив VNode
+   */
+  readonly render = (
+    slotsChildren?: MenuSlots,
+    attrs?: Record<string, any>
+  ): VNode[] => {
+    if (this.components && this.is.value) {
+      return this.components.render(
+        'menu',
+        {
+          ref: this.element,
+          ...toBind(
+            attrs ?? {},
+            this.binds.value
+          )
+        },
+        slotsChildren as RawSlots,
+        this.index
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Menu/MenuRequest.ts

@@ -0,0 +1,101 @@
+import { computed, ref } from 'vue'
+import { Api, executePromise, isFunction, type ListRecord } from '@dxtmisha/functional'
+
+import type { MenuProps } from './props'
+
+/**
+ * Class for working with list data requests.
+ *
+ * Класс для работы с запросами данных списка.
+ */
+export class MenuRequest {
+  readonly progress = ref<boolean>(false)
+
+  protected readonly buffer = ref<ListRecord>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   */
+  constructor(
+    protected readonly props: MenuProps
+  ) {
+  }
+
+  /**
+   * Returns current list data.
+   *
+   * Возвращает текущие данные списка.
+   */
+  readonly item = computed(() => this.buffer.value ?? this.props.list ?? [])
+
+  /**
+   * Checks whether a request is needed.
+   *
+   * Проверяет, нужно ли делать запрос.
+   */
+  is(): boolean {
+    return Boolean(
+      this.props.ajax
+      || this.props.request
+    )
+  }
+
+  /**
+   * Prepares data.
+   *
+   * Подготавливает данные.
+   */
+  async preparation(): Promise<boolean> {
+    await this.update()
+
+    return true
+  }
+
+  /**
+   * Updates data.
+   *
+   * Обновляет данные.
+   */
+  async update(): Promise<void> {
+    await this.read(data => (this.buffer.value = data))
+  }
+
+  /**
+   * Returns data from AJAX or request function.
+   *
+   * Возвращает данные из AJAX или функции запроса.
+   */
+  protected async getAjax(): Promise<ListRecord | undefined> {
+    if (isFunction(this.props.ajax)) {
+      return executePromise(this.props.ajax)
+    }
+
+    return await Api.request<Record<string, any>>({
+      path: this.props.ajax,
+      ...this.props.request
+    })
+  }
+
+  /**
+   * Executes a request to retrieve data.
+   *
+   * Выполняет запрос для получения данных.
+   */
+  protected async read(callback: (data: ListRecord | undefined) => void): Promise<void> {
+    if (this.is()) {
+      if (
+        this.props.cache
+        && this.buffer.value !== undefined
+      ) {
+        callback(this.buffer.value)
+      }
+
+      this.progress.value = true
+
+      callback(await this.getAjax())
+
+      this.progress.value = false
+    }
+  }
+}

package/src/constructors/Menu/MenuSearch.ts

@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import { isFilled } from '@dxtmisha/functional'
+
+/**
+ * Class for working with search.
+ *
+ * Класс для работы с поиском.
+ */
+export class MenuSearch {
+  readonly item = ref<string>()
+
+  /**
+   * Sets the search string.
+   *
+   * Устанавливает строку поиска.
+   * @param value new value/ новое значение
+   */
+  set(value?: string) {
+    const data = this.getValue(value)
+
+    if (this.item.value !== data) {
+      this.item.value = data
+    }
+  }
+
+  /**
+   * Resets the search string.
+   *
+   * Сбрасывает строку поиска.
+   */
+  reset(): this {
+    this.set()
+    return this
+  }
+
+  /**
+   * Returns a processed value.
+   *
+   * Возвращает обработанное значение.
+   * @param value source value/ исходное значение
+   */
+  protected getValue(value?: string): string | undefined {
+    if (isFilled(value)) {
+      return value.trim()
+    }
+
+    return undefined
+  }
+}

package/src/constructors/Menu/MenuValue.ts

@@ -0,0 +1,73 @@
+import { computed, ref, type ToRefs, watch } from 'vue'
+import { type ConstrEmit, isObject, type ListSelectedList } from '@dxtmisha/functional'
+
+import { ModelInclude } from '../../classes/ModelInclude'
+
+import type { MenuEmits } from './types'
+import type { MenuProps } from './props'
+
+/**
+ * Value manager for Menu
+ *
+ * Менеджер значения для Menu
+ */
+export class MenuValue {
+  readonly value = ref<ListSelectedList>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: MenuProps,
+    protected readonly refs: ToRefs<MenuProps>,
+    protected readonly emits?: ConstrEmit<MenuEmits>
+  ) {
+    if (this.props.isSelectedByValue) {
+      new ModelInclude('value', this.emits, this.value)
+
+      if (refs.selected) {
+        watch(
+          refs.selected,
+          (value) => {
+            this.value.value = value
+          },
+          { immediate: true }
+        )
+      }
+    }
+  }
+
+  /**
+   * Computed selected value
+   *
+   * Вычисляемое выбранное значение
+   */
+  readonly selected = computed(() => {
+    if (this.props.isSelectedByValue) {
+      return this.value.value
+    }
+
+    return this.props.selected
+  })
+
+  /**
+   * Sets a new selected value if it has changed and returns the instance for chaining.
+   *
+   * Устанавливает новое выбранное значение, если оно изменилось, и возвращает экземпляр для чейнинга.
+   * @param value selected list value/ выбранное значение списка
+   * @returns this
+   */
+  setValue(value: ListSelectedList): this {
+    if (
+      this.props.isSelectedByValue
+      && !isObject(value)
+      && this.value.value !== value
+    ) {
+      this.value.value = value
+    }
+    return this
+  }
+}

package/src/constructors/Menu/MenuWindow.ts

@@ -0,0 +1,89 @@
+import { ref } from 'vue'
+
+import { MenuRequest } from './MenuRequest'
+
+import type { WindowProps } from '../Window'
+import type { MenuProps } from './props'
+
+/**
+ * Window manager for Menu component
+ *
+ * Класс управления окном для компонента Menu
+ */
+export class MenuWindow {
+  readonly lite = ref<boolean>()
+  readonly control = ref<boolean>()
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param request menu request handler/ обработчик запросов меню
+   */
+  constructor(
+    protected readonly props: MenuProps,
+    protected readonly request: MenuRequest
+  ) {
+  }
+
+  /**
+   * Returns extra methods for window management
+   *
+   * Возвращает дополнительные методы для управления окном
+   * @returns object with window management methods/ объект с методами управления окном
+   */
+  getExtra(): WindowProps {
+    return {
+      adaptive: 'menu',
+      preparation: this.preparation,
+      opening: this.opening,
+      closing: this.closing
+    }
+  }
+
+  /**
+   * Preparing data before opening the menu
+   *
+   * Подготовка данных перед открытием меню
+   * @returns Promise that resolves to true when preparation is complete/
+   * Promise, который разрешается в true после завершения подготовки
+   */
+  protected readonly preparation = async (): Promise<void> => {
+    await this.request.preparation()
+
+    if (
+      this.props.list
+      && this.props.liteThreshold
+      && Number(this.props.liteThreshold) <= Object.keys(this.props.list).length
+    ) {
+      this.lite.value = true
+    }
+  }
+
+  /**
+   * Actions performed after opening the window
+   *
+   * Действия, выполняемые после открытия окна
+   * @returns Promise that resolves to true when opening actions are complete/
+   * Promise, который разрешается в true после завершения действий открытия
+   */
+  protected readonly opening = async (): Promise<boolean> => {
+    this.lite.value = false
+    this.control.value = true
+
+    return true
+  }
+
+  /**
+   * Actions performed when closing the window
+   *
+   * Действия, выполняемые при закрытии окна
+   * @returns Promise that resolves to true when closing actions are complete/
+   * Promise, который разрешается в true после завершения действий закрытия
+   */
+  protected readonly closing = async (): Promise<boolean> => {
+    this.lite.value = false
+    this.control.value = false
+
+    return true
+  }
+}

package/src/constructors/Menu/basicTypes.ts

@@ -0,0 +1,41 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { WindowControlItem } from '../Window'
+
+import type { ListExpose } from '../List'
+import type { MenuExpose } from './types'
+import type { MenuProps } from './props'
+
+export type MenuControlBasic
+  = ListExpose
+    & {
+      loading: Ref<boolean>
+    }
+
+export type MenuControlItem
+  = MenuControlBasic
+    & WindowControlItem
+
+export type MenuComponentInclude = {
+  menu?: object
+}
+
+/** Type for menu expose functionality/ Тип для функциональности экспорта меню */
+export interface MenuExposeInclude {
+  open: ComputedRef<boolean>
+
+  setOpen(open: boolean): Promise<void>
+
+  toOpen: MenuExpose['toOpen']
+  toClose: MenuExpose['toClose']
+
+  toggle(): Promise<void>
+
+  menuElement: Ref<ConstrBind<MenuExpose> | undefined>
+}
+
+/** Interface for menu include props/ Интерфейс для свойств включения меню */
+export interface MenuPropsInclude {
+  disabled?: boolean
+  menuAttrs?: ConstrBind<MenuProps>
+}