@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/ListGroup/ListGroupDesign.tsx

@@ -1,180 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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

package/src/constructors/ListGroup/index.ts

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

package/src/constructors/ListGroup/properties.json

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

package/src/constructors/ListItem/ListItem.ts

@@ -1,115 +0,0 @@
-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
-  }))
-}

package/src/constructors/ListItem/ListItemDesign.tsx

@@ -1,196 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { ListItem } from './ListItem'
-
-import {
-  type ListItemPropsBasic
-} from './props'
-import {
-  type ListItemClasses,
-  type ListItemComponents,
-  type ListItemEmits,
-  type ListItemExpose,
-  type ListItemSlots
-} from './types'
-
-/**
- * ListItemDesign
- */
-export class ListItemDesign<
-  COMP extends ListItemComponents,
-  EXPOSE extends ListItemExpose,
-  CLASSES extends ListItemClasses,
-  P extends ListItemPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    ListItemEmits,
-    EXPOSE,
-    ListItemSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: ListItem
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, ListItemEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new ListItem(
-      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.event.expose
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        body: this.getSubClass('body'),
-        context: this.getSubClass('context'),
-        label: this.getSubClass('label'),
-        highlight: this.getSubClass('highlight'),
-        prefix: this.getSubClass('prefix'),
-        caption: this.getSubClass('caption'),
-        description: this.getSubClass('description'),
-        icon: this.getSubClass('icon'),
-        trailing: this.getSubClass('trailing'),
-        badge: this.getSubClass('badge'),
-        input: this.getSubClass('input')
-        // :classes [!] System label / Системная метка
-      }
-    } as Partial<CLASSES>
-  }
-
-  /**
-   * Refinement of the received list of styles.
-   *
-   * Доработка полученного списка стилей.
-   */
-  protected initStyles(): ConstrStyles {
-    return {}
-  }
-
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  protected initRender(): VNode {
-    const children: any[] = []
-
-    this.initSlot('leading', children)
-    children.push(...this.renderBody())
-    this.initSlot('trailing', children)
-
-    children.push(
-      ...this.item.icon.render(),
-      ...this.item.progress.render(),
-      ...this.item.ripple.render()
-    )
-
-    return h(
-      this.props.tag ?? 'div',
-      {
-        ...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
-      },
-      children
-    )
-  }
-
-  /**
-   * Method for rendering the main part of the component.
-   *
-   * Метод для рендеринга основной части компонента.
-   */
-  readonly renderBody = (): VNode[] => {
-    const children: any[] = [
-      ...this.renderContext(),
-      ...this.item.description.render()
-    ]
-
-    this.initSlot('body', children)
-
-    return [
-      h(
-        'div',
-        { class: this.classes?.value.body },
-        children
-      )
-    ]
-  }
-
-  /**
-   * Method for rendering the context part of the component.
-   * This includes prefix, caption, suffix, badge, and label.
-   *
-   * Метод для рендеринга контекстной части компонента.
-   * Включает в себя префикс, подпись, суффикс, значок и метку.
-   */
-  readonly renderContext = (): VNode[] => {
-    return [
-      h(
-        'div',
-        { class: this.classes?.value.context },
-        [
-          ...this.item.prefix.render(),
-          ...this.item.caption.render(),
-          ...this.item.suffix.render(),
-          ...this.item.label.render(),
-          ...this.item.badge.render()
-        ]
-      )
-    ]
-  }
-}

package/src/constructors/ListItem/index.ts

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

package/src/constructors/ListItem/properties.json

@@ -1,52 +0,0 @@
-{
-  "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": {}
-}