@dxtmisha/constructor 0.23.0

package/src/constructors/ListItem/ListItemDesign.tsx

@@ -0,0 +1,196 @@
+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/basicTypes.ts

@@ -0,0 +1,3 @@
+export type ListItemComponentInclude = {
+  listItem?: object
+}

package/src/constructors/ListItem/index.ts

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

package/src/constructors/ListItem/properties.json

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

package/src/constructors/ListItem/props.ts

@@ -0,0 +1,78 @@
+import type { IconPropsBasic, IconTrailingPropsInclude } from '../Icon'
+import type { BadgePropsBasic, BadgePropsInclude } from '../Badge'
+import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
+import type { SkeletonPropsInclude } from '../Skeleton'
+
+import type { LabelHighlightProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+import type { PrefixProps } from '../../types/prefixTypes'
+import type { CaptionProps } from '../../types/captionTypes'
+import type { SuffixProps } from '../../types/suffixTypes'
+import type { EnabledProps } from '../../types/enabledTypes'
+import type { EventClickProps } from '../../types/eventClickTypes'
+
+interface ListItemPropsToken {
+  // :type [!] System label / Системная метка
+  focus?: boolean
+  open?: boolean
+  selected?: boolean
+  selectedChild?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  iconTop?: boolean
+  iconAlign?: 'center' | 'edge'
+  fill?: string | 'custom'
+  divider?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ListItemPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Badge extends BadgePropsBasic = BadgePropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> extends LabelHighlightProps,
+  DescriptionProps,
+  PrefixProps,
+  CaptionProps,
+  SuffixProps,
+  IconTrailingPropsInclude<Icon>,
+  BadgePropsInclude<Badge>,
+  ProgressPropsInclude<Progress>,
+  SkeletonPropsInclude,
+  EnabledProps,
+  EventClickProps {
+  // Value
+  index?: any
+
+  // Style
+  tag?: 'button' | 'a' | 'span' | 'div' | string
+  divider?: boolean
+
+  // Technical
+  type?: string
+  parent?: string
+  listId?: number
+  search?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ListItemProps extends ListItemPropsBasic, ListItemPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsListItem = {
+  tag: 'div',
+  ...{
+    // :default [!] System label / Системная метка
+    iconAlign: 'center'
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/ListItem/style.scss

@@ -0,0 +1,152 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinListItem {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  padding: 0;
+
+  --sys-height: #{ui.v('??height', 0)};
+  min-height: ui.v('??height', 0);
+
+  cursor: pointer;
+
+  &__icon,
+  &__trailing {
+    z-index: 4;
+
+    @include ui.marginLeft(ui.v('??margin'));
+    @include ui.marginRight(ui.v('??margin'));
+  }
+
+  &__icon {
+    order: 8;
+  }
+
+  &__body {
+    align-self: center;
+    flex-grow: 1;
+    order: 16;
+    z-index: 4;
+
+    @include ui.paddingX(ui.v('??paddingX', 0));
+    @include ui.paddingY(ui.v('??paddingY', 0));
+
+    & ~ {
+      @include ui.subclass('icon') {
+        @include ui.marginRight(#{calc(ui.v('??margin') - ui.v('??paddingX', 0) - ui.v('??shift', 0))});
+      }
+
+      @include ui.subclass('trailing') {
+        @include ui.marginLeft(#{calc(ui.v('??margin') - ui.v('??paddingX', 0))});
+      }
+    }
+  }
+
+  &__context {
+    @include ui.flexX;
+    order: 16;
+
+    @include ui.subclass('prefix') {
+      order: 8;
+    }
+
+    @include ui.subclass('label') {
+      order: 16;
+    }
+
+    @include ui.subclass('caption') {
+      @include ui.flexDynamic;
+      order: 24;
+    }
+
+    @include ui.subclass('suffix') {
+      @include ui.flexDynamic;
+      order: 32;
+
+      @include ui.textAlign('right');
+    }
+
+    @include ui.subclass('badge') {
+      order: 40;
+      @include ui.marginLeft(auto);
+    }
+  }
+
+  &__trailing {
+    order: 24;
+    z-index: 4;
+  }
+
+  &__ripple {
+    order: 32;
+  }
+
+  &--readonly,
+  &--disabled,
+  &--loading {
+    cursor: default;
+  }
+
+  &--fill {
+    &--custom {
+      position: relative;
+      overflow: hidden;
+
+      &:before {
+        position: absolute;
+        @include ui.inset();
+        z-index: 2;
+
+        background-color: ui.v('??fill', transparent);
+        content: ' ';
+      }
+    }
+  }
+
+  &--iconAlign {
+    &--center {
+      @include ui.subclass('icon') {
+        @include ui.initByCustom('margin', #{calc((ui.v('??height') - ui.v('?icon._width')) / 2)});
+      }
+      @include ui.subclass('trailing') {
+        @include ui.initByCustom('margin', #{calc((ui.v('??height') - ui.v('?icon._width')) / 2)});
+      }
+    }
+
+    &--edge {
+      @include ui.subclass('icon') {
+        @include ui.initByCustom('margin', #{ui.v('??paddingX')});
+      }
+      @include ui.subclass('trailing') {
+        @include ui.initByCustom('margin', #{ui.v('??paddingX')});
+      }
+    }
+  }
+
+  &--iconTop {
+    @include ui.state('description') {
+      align-items: flex-start;
+
+      @include ui.subclass('icon') {
+        @include ui.translateY(#{calc((ui.v('??paddingY') - ((ui.v('?icon._width') - var(--sys-line-height)) / 2)))});
+      }
+
+      @include ui.subclass('trailing') {
+        @include ui.translateY(#{calc((ui.v('??paddingY') - ((ui.v('?icon._width') - var(--sys-line-height)) / 2)))});
+      }
+    }
+  }
+
+  @at-root {
+    & + &[data-divider="active"],
+    #{ui.c('?listGroup')} + &[data-divider="active"],
+    [data-divider="active"] + &[data-divider="active"] {
+      border-top-style: solid;
+      border-top-width: ui.v('??borderWidth');
+      @include ui.borderColor(ui.v('??borderColor'));
+    }
+  }
+}

package/src/constructors/ListItem/types.ts

@@ -0,0 +1,78 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { IconComponentInclude } from '../Icon'
+import type { BadgeComponentInclude } from '../Badge'
+import type { ProgressComponentInclude } from '../Progress'
+import type { RippleComponentsInclude } from '../Ripple'
+
+import type { LabelHighlightSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+import type { PrefixSlots } from '../../types/prefixTypes'
+import type { CaptionSlots } from '../../types/captionTypes'
+import type { SuffixSlots } from '../../types/suffixTypes'
+import type { EventClickEmits, EventClickExpose } from '../../types/eventClickTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ListItemComponents
+  = IconComponentInclude
+    & BadgeComponentInclude
+    & ProgressComponentInclude
+    & RippleComponentsInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ListItemEmits = EventClickEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ListItemExpose extends EventClickExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ListItemSlots extends LabelHighlightSlots,
+  DescriptionSlots,
+  PrefixSlots,
+  CaptionSlots,
+  SuffixSlots {
+  leading?(props: any): any
+
+  trailing?(props: any): any
+
+  body?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ListItemClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  body: string
+  context: string
+  label: string
+  highlight: string
+  prefix: string
+  caption: string
+  description: string
+  icon: string
+  trailing: string
+  badge: string
+  input: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/ListMenu/ListMenu.ts

@@ -0,0 +1,52 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { WindowInclude } from '../Window'
+import { ListGroupOpen } from '../ListGroup/ListGroupOpen'
+
+import type { ListMenuComponents, ListMenuEmits, ListMenuSlots } from './types'
+import type { ListMenuProps } from './props'
+
+/**
+ * ListMenu
+ */
+export class ListMenu {
+  readonly open: ListGroupOpen<ListMenuProps>
+  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/ функция вызывается, когда срабатывает событие
+   */
+  constructor(
+    protected readonly props: ListMenuProps,
+    protected readonly refs: ToRefs<ListMenuProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ListMenuComponents, ListMenuProps>,
+    protected readonly slots?: ListMenuSlots,
+    protected readonly emits?: ConstrEmit<ListMenuEmits>
+  ) {
+    this.open = new ListGroupOpen(this.props)
+
+    this.window = new WindowInclude(
+      this.props,
+      this.className,
+      this.components,
+      this.emits,
+      computed(() => ({
+        adaptive: 'menu',
+        axis: this.props.axis,
+        onWindow: this.open.onOpen
+      }))
+    )
+  }
+}