@dxtmisha/constructor 0.23.0

package/src/constructors/List/style.scss

@@ -0,0 +1,36 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinList {
+  &__menuGroup {
+    @include ui.subclass('menu') {
+      display: none;
+    }
+  }
+
+  &--axis {
+    &--x {
+      display: flex;
+      align-items: stretch;
+
+      @include ui.subclass('space') {
+        width: var(--sys-height);
+        height: auto;
+      }
+
+      @include ui.subclass('line') {
+        @include ui.marginY(0);
+
+        width: var(--sys-height);
+        height: 100%;
+      }
+
+      @include ui.subclass('subtitle') {
+        display: none;
+      }
+
+      @include ui.subclass('group') {
+        display: none;
+      }
+    }
+  }
+}

package/src/constructors/List/types.ts

@@ -0,0 +1,66 @@
+import type { ConstrClass, ListList, ListNames } from '@dxtmisha/functional'
+import type { EventClickEmits } from '../../types/eventClickTypes'
+
+import type { ListItemComponentInclude } from '../ListItem'
+import type { ListGroupComponentInclude } from '../ListGroup'
+import type { ListMenuComponentInclude } from '../ListMenu'
+import type { ComputedRef } from 'vue'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ListComponents
+  = ListItemComponentInclude
+    & ListGroupComponentInclude
+    & ListMenuComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ListEmits
+  = EventClickEmits
+    & {
+      close: []
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ListExpose {
+  isSelected: ComputedRef<boolean>
+  selectedList: ComputedRef<ListList>
+  selectedNames: ComputedRef<ListNames>
+  selectedValues: ComputedRef<any[]>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export type ListSlots = Record<string, (props: any) => any>
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+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 / Системная метка
+}

package/src/constructors/ListGroup/ListGroup.ts

@@ -0,0 +1,53 @@
+import { type Ref, type ToRefs } from 'vue'
+import { type ConstrBind, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { ListGroupOpen } from './ListGroupOpen'
+
+import type { MotionTransformProps } from '../MotionTransform'
+import type { ListGroupComponents, ListGroupEmits, ListGroupSlots } from './types'
+import type { ListGroupProps } from './props'
+
+/**
+ * ListGroup
+ */
+export class ListGroup {
+  readonly open: ListGroupOpen<ListGroupProps>
+
+  /**
+   * 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: ListGroupProps,
+    protected readonly refs: ToRefs<ListGroupProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ListGroupComponents, ListGroupProps>,
+    protected readonly slots?: ListGroupSlots,
+    protected readonly emits?: ConstrEmit<ListGroupEmits>
+  ) {
+    this.open = new ListGroupOpen(this.props)
+  }
+
+  /**
+   * Returns the property for the transformation component.
+   *
+   * Возвращает свойство для компонента трансформации.
+   */
+  readonly transformBinds = (): ConstrBind<MotionTransformProps> => {
+    return {
+      autoClose: false,
+      section: true,
+      adaptive: 'planeAlways',
+      onTransformLite: this.open.onOpen
+    }
+  }
+}

package/src/constructors/ListGroup/ListGroupDesign.tsx

@@ -0,0 +1,180 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { ListGroup } from './ListGroup'
+
+import {
+  type ListGroupPropsBasic
+} from './props'
+import {
+  type ListGroupClasses,
+  type ListGroupComponents,
+  type ListGroupEmits,
+  type ListGroupExpose,
+  type ListGroupSlots
+} from './types'
+
+/**
+ * ListGroupDesign
+ */
+export class ListGroupDesign<
+  COMP extends ListGroupComponents,
+  EXPOSE extends ListGroupExpose,
+  CLASSES extends ListGroupClasses,
+  P extends ListGroupPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ListGroupEmits,
+    EXPOSE,
+    ListGroupSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: ListGroup
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ListGroupEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new ListGroup(
+      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 {
+      open: this.item.open.is
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        head: this.getSubClass('head'),
+        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 h(
+      'div',
+      {
+        ...this.getAttrs(),
+        'class': this.classes?.value.main,
+        'data-open': this.item.open.is.value ? 'open' : 'close',
+        'data-divider': this.props.divider ? 'divider' : undefined
+      },
+      this.renderTransform()
+    )
+  }
+
+  /**
+   * Render transformation element.
+   *
+   * Рендер элемента трансформации.
+   */
+  readonly renderTransform = (): VNode[] => {
+    return this.components.render(
+      'motionTransform',
+      {
+        ...this.item.transformBinds(),
+        open: this.item.open.is.value
+      },
+      {
+        head: this.renderHead,
+        body: this.renderList
+      }
+    )
+  }
+
+  /**
+   * Render title element.
+   *
+   * Рендер элемента заголовка.
+   */
+  readonly renderHead = (): VNode => {
+    return h(
+      'div',
+      {
+        class: this.classes?.value.head
+      },
+      this.initSlot(
+        'head',
+        undefined,
+        {
+          open: this.item.open.is.value
+        }
+      )
+    )
+  }
+
+  /**
+   * Render list element.
+   *
+   * Рендер элемента списка.
+   */
+  readonly renderList = (): VNode => {
+    return h(
+      'div',
+      {
+        class: this.classes?.value.list
+      },
+      this.initSlot('list')
+    )
+  }
+}

package/src/constructors/ListGroup/ListGroupOpen.ts

@@ -0,0 +1,56 @@
+import { computed, ref } from 'vue'
+import type { MotionTransformEmitOptions } from '../MotionTransform'
+
+/**
+ * Class for managing the open/close state of ListGroup component.
+ * Handles the visibility state and provides computed properties and methods
+ * for controlling group expansion and collapse.
+ *
+ * Класс для управления состоянием открытия/закрытия компонента ListGroup.
+ * Управляет состоянием видимости и предоставляет вычисляемые свойства и методы
+ * для контроля разворачивания и сворачивания группы.
+ */
+export class ListGroupOpen<T extends { open?: boolean }> {
+  /**
+   * Internal reactive state for group open/close status.
+   * This state is independent from props and can be controlled programmatically.
+   *
+   * Внутреннее реактивное состояние для статуса открытия/закрытия группы.
+   * Это состояние независимо от пропсов и может контролироваться программно.
+   */
+  readonly open = ref<boolean>(false)
+
+  /**
+   * Constructor initializes the ListGroupOpen with component props.
+   *
+   * Конструктор инициализирует ListGroupOpen с пропсами компонента.
+   * @param props - ListGroup component properties / свойства компонента ListGroup
+   */
+  constructor(
+    protected readonly props: T
+  ) {
+  }
+
+  /**
+   * Returns information about the opening status.
+   *
+   * Возвращает информацию о статусе открытия.
+   */
+  readonly is = computed<boolean>(
+    () => this.open.value || Boolean(this.props.open)
+  )
+
+  /**
+   * Events for opening the element.
+   *
+   * События для открытия элемента.
+   * @param options event parameters/ параметры события
+   */
+  readonly onOpen = (
+    { open }: MotionTransformEmitOptions
+  ) => {
+    if (this.open.value !== open) {
+      this.open.value = open
+    }
+  }
+}

package/src/constructors/ListGroup/basicTypes.ts

@@ -0,0 +1,3 @@
+export type ListGroupComponentInclude = {
+  listGroup?: object
+}

package/src/constructors/ListGroup/index.ts

@@ -0,0 +1,5 @@
+export * from './ListGroup'
+export * from './ListGroupDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/ListGroup/properties.json

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

package/src/constructors/ListGroup/props.ts

@@ -0,0 +1,30 @@
+interface ListGroupPropsToken {
+  // :type [!] System label / Системная метка
+  open?: boolean
+  divider?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ListGroupPropsBasic {
+  divider?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ListGroupProps extends ListGroupPropsBasic, ListGroupPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsListGroup = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/ListGroup/style.scss

@@ -0,0 +1,18 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinListGroup {
+  &__head,
+  &__list {
+    display: flow-root;
+  }
+
+  @at-root {
+    & + &[data-divider="divider"],
+    #{ui.c('?listItem')} + &[data-divider="divider"],
+    #{ui.c('?list__menuGroup--divider')}:not(:first-child) > &[data-divider="divider"] {
+      border-top-style: solid;
+      border-top-width: ui.v('??borderWidth');
+      @include ui.borderColor(ui.v('??borderColor'), ui.v('??borderOpacity'));
+    }
+  }
+}

package/src/constructors/ListGroup/types.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { MotionTransformComponentInclude } from '../MotionTransform'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ListGroupComponents
+  = MotionTransformComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ListGroupEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ListGroupExpose {
+  open: ComputedRef<boolean>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ListGroupSlots {
+  head?(props: { open: boolean }): any
+  list?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ListGroupClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  head: string
+  list: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/ListItem/ListItem.ts

@@ -0,0 +1,115 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrClassObject, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+
+import { IconTrailingInclude } from '../Icon'
+import { ProgressInclude } from '../Progress'
+import { RippleInclude } from '../Ripple'
+import { SkeletonInclude } from '../Skeleton'
+
+import { LabelHighlightInclude } from '../../classes/LabelHighlightInclude'
+import { PrefixInclude } from '../../classes/PrefixInclude'
+import { CaptionInclude } from '../../classes/CaptionInclude'
+import { SuffixInclude } from '../../classes/SuffixInclude'
+import { DescriptionInclude } from '../../classes/DescriptionInclude'
+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'
+
+/**
+ * ListItem
+ */
+export class ListItem {
+  readonly icon: IconTrailingInclude
+  readonly label: LabelHighlightInclude
+  readonly prefix: PrefixInclude
+  readonly caption: CaptionInclude
+  readonly suffix: SuffixInclude
+  readonly description: DescriptionInclude
+  readonly badge: BadgeInclude
+
+  readonly ripple: RippleInclude
+  readonly progress: ProgressInclude
+  readonly skeleton: SkeletonInclude
+
+  readonly enabled: EnabledInclude
+  readonly event: EventClickInclude
+
+  /**
+   * 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: ListItemPropsBasic,
+    protected readonly refs: ToRefs<ListItemPropsBasic>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ListItemComponents, ListItemPropsBasic>,
+    protected readonly slots?: ListItemSlots,
+    protected readonly emits?: ConstrEmit<ListItemEmits>
+  ) {
+    const progress = new ProgressInclude(
+      props,
+      className,
+      components,
+      {
+        circular: true,
+        inverse: true
+      }
+    )
+    const skeleton = new SkeletonInclude(
+      props,
+      classDesign,
+      ['classTextVariant']
+    )
+    const enabled = new EnabledInclude(props, progress)
+
+    this.icon = new IconTrailingInclude(props, className, components)
+    this.label = new LabelHighlightInclude(
+      props,
+      className,
+      undefined,
+      slots,
+      undefined,
+      skeleton
+    )
+    this.prefix = new PrefixInclude(props, className, slots, skeleton)
+    this.caption = new CaptionInclude(props, className, slots)
+    this.suffix = new SuffixInclude(props, className, slots)
+    this.description = new DescriptionInclude(props, className, slots, skeleton)
+    this.badge = new BadgeInclude(
+      props,
+      className,
+      components,
+      {
+        overlap: 'static'
+      }
+    )
+
+    this.ripple = new RippleInclude(className, components, enabled)
+    this.progress = progress
+    this.skeleton = skeleton
+
+    this.enabled = enabled
+    this.event = new EventClickInclude(props, enabled, emits)
+  }
+
+  /** values for the class/ значения для класса */
+  readonly classes = computed<ConstrClassObject>(() => ({
+    [`${this.className}--description`]: this.description.is.value,
+    [getClassTegAStatic(this.classDesign)]: true
+  }))
+}