@dxtmisha/constructor 0.23.0

package/src/constructors/Cell/props.ts

@@ -0,0 +1,61 @@
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+import type { CaptionProps } from '../../types/captionTypes'
+import type { EnabledProps } from '../../types/enabledTypes'
+import type { SkeletonPropsInclude } from '../Skeleton'
+import type { EventClickProps } from '../../types/eventClickTypes'
+
+import type { IconPropsBasic, IconTrailingPropsInclude } from '../Icon'
+import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
+
+interface CellPropsToken {
+  // :type [!] System label / Системная метка
+  focus?: boolean
+  selected?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  dynamic?: boolean
+  dynamicHover?: boolean
+  divider?: boolean
+  dividerLabel?: 'always' | 'none'
+  iconTop?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface CellPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> extends LabelProps,
+  DescriptionProps,
+  CaptionProps,
+  EnabledProps,
+  IconTrailingPropsInclude<Icon>,
+  ProgressPropsInclude<Progress>,
+  SkeletonPropsInclude,
+  EventClickProps {
+  // Style
+  tag?: string
+  divider?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface CellProps extends CellPropsBasic, CellPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsCell = {
+  tag: 'div',
+  ...{
+    // :default [!] System label / Системная метка
+    divider: true
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Cell/style.scss

@@ -0,0 +1,80 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinCell {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &__context {
+    display: flex;
+    flex-wrap: wrap;
+    @include ui.flexDynamic;
+
+    order: 4;
+  }
+
+  &__label {
+    align-self: center;
+    flex-basis: auto;
+  }
+
+  &__caption {
+    align-self: center;
+    @include ui.flexDynamic;
+  }
+
+  &__description {
+    grid-area: description;
+    flex-basis: 100%;
+  }
+
+  &__contextTrailing {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+
+    order: 8;
+  }
+
+  &__body {
+    flex-basis: 100%;
+    order: 12;
+  }
+
+  &:has(&__body) {
+    flex-wrap: wrap;
+  }
+
+  &__loading {
+    order: 16;
+  }
+
+  &--dynamic {
+    cursor: pointer;
+  }
+
+  @include ui.readonly {
+    cursor: default;
+  }
+
+  @include ui.disabled {
+    cursor: default;
+  }
+
+  &--dividerLabel {
+    &__context {
+      border-bottom-style: solid;
+      border-bottom-width: ui.v('??borderWidth');
+      @include ui.borderColor(ui.v('??borderColor'));
+    }
+  }
+
+  @at-root {
+    [data-divider="active"] + &[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/Cell/types.ts

@@ -0,0 +1,68 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { IconComponentInclude } from '../Icon'
+import type { ProgressComponentInclude } from '../Progress'
+import type { RippleComponentsInclude } from '../Ripple'
+
+import type { EventClickEmits, EventClickExpose } from '../../types/eventClickTypes'
+import type { LabelSlots } from '../../types/labelTypes'
+import type { DescriptionSlots } from '../../types/descriptionTypes'
+import type { CaptionSlots } from '../../types/captionTypes'
+
+import type { CellClassesSub } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type CellComponents
+  = IconComponentInclude
+    & ProgressComponentInclude
+    & RippleComponentsInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type CellEmits = EventClickEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface CellExpose extends EventClickExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface CellSlots extends LabelSlots, DescriptionSlots, CaptionSlots {
+  trailing?(props: CellClassesSub): any
+
+  body?(props: CellClassesSub): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type CellClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  context: string
+  contextTrailing: string
+  label: string
+  description: string
+  caption: string
+  icon: string
+  trailing: string
+  body: string
+  loading: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Chip/Chip.ts

@@ -0,0 +1,33 @@
+import type { Ref, ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import type { ChipComponents, ChipEmits, ChipSlots } from './types'
+import type { ChipPropsBasic } from './props'
+
+/**
+ * Chip
+ */
+export class Chip {
+  /**
+   * 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: ChipPropsBasic,
+    protected readonly refs: ToRefs<ChipPropsBasic>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ChipComponents, ChipPropsBasic>,
+    protected readonly slots?: ChipSlots,
+    protected readonly emits?: ConstrEmit<ChipEmits>
+  ) {
+  }
+}

package/src/constructors/Chip/ChipDesign.tsx

@@ -0,0 +1,26 @@
+import { ButtonDesign } from '../Button'
+
+import {
+  type ChipPropsBasic
+} from './props'
+import {
+  type ChipClasses,
+  type ChipComponents,
+  type ChipExpose
+} from './types'
+
+/**
+ * ChipDesign
+ */
+export class ChipDesign<
+  COMP extends ChipComponents,
+  EXPOSE extends ChipExpose,
+  CLASSES extends ChipClasses,
+  P extends ChipPropsBasic
+> extends ButtonDesign<
+  COMP,
+  EXPOSE,
+  CLASSES,
+  P
+> {
+}

package/src/constructors/Chip/index.ts

@@ -0,0 +1,4 @@
+export * from './ChipDesign'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Chip/properties.json

@@ -0,0 +1,3 @@
+{
+  "link|button": "{d.button}"
+}

package/src/constructors/Chip/props.ts

@@ -0,0 +1,44 @@
+import type { IconPropsBasic } from '../Icon'
+import type { ProgressPropsBasic } from '../Progress'
+import type { ButtonPropsBasic } from '../Button'
+
+interface ChipPropsToken {
+  // :type [!] System label / Системная метка
+  focus?: boolean
+  disabled?: boolean
+  selected?: boolean
+  readonly?: boolean
+  adaptive?: 'iconAlways' | 'block' | 'auto'
+  container?: boolean
+  inverse?: boolean
+  grid?: boolean
+  textAlign?: 'left' | 'center' | 'right'
+  // :type [!] System label / Системная метка
+}
+
+export interface ChipPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> extends ButtonPropsBasic<Icon, Progress> {
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ChipProps extends ChipPropsBasic, ChipPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsChip = {
+  tag: 'span',
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Chip/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Button/style" as button;
+
+@mixin mixinChip {
+  @include button.mixinButton;
+}

package/src/constructors/Chip/types.ts

@@ -0,0 +1,53 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type {
+  ButtonComponents,
+  ButtonEmits,
+  ButtonExpose,
+  ButtonSlots
+} from '../Button'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ChipComponents = ButtonComponents
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ChipEmits = ButtonEmits
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ChipExpose extends ButtonExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ChipSlots extends ButtonSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ChipClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  label: string
+  icon: string
+  trailing: string
+  loading: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Field/Field.ts

@@ -0,0 +1,147 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, getElementId } from '@dxtmisha/functional'
+
+import { CaptionInclude } from '../../classes/CaptionInclude'
+import { PrefixInclude } from '../../classes/PrefixInclude'
+import { SuffixInclude } from '../../classes/SuffixInclude'
+import { EnabledInclude } from '../../classes/EnabledInclude'
+import { EventClickInclude } from '../../classes/EventClickInclude'
+
+import { IconTrailingInclude } from '../Icon'
+import { FieldLabelInclude } from '../FieldLabel'
+import { FieldMessageInclude } from '../FieldMessage'
+import { ProgressInclude } from '../Progress'
+import { SkeletonInclude } from '../Skeleton'
+
+import { FieldIcons } from './FieldIcons'
+import { FieldSize } from './FieldSize'
+
+import type { FieldComponents, FieldEmits, FieldSlots } from './types'
+import type { FieldProps } from './props'
+import type { FieldControl } from './basicTypes'
+
+/**
+ * Field
+ */
+export class Field {
+  readonly icon: IconTrailingInclude
+
+  readonly caption: CaptionInclude
+  readonly prefix: PrefixInclude
+  readonly suffix: SuffixInclude
+
+  readonly fieldLabel: FieldLabelInclude
+  readonly fieldMessage: FieldMessageInclude
+
+  readonly progress: ProgressInclude
+  readonly enabled: EnabledInclude
+  readonly event: EventClickInclude
+  readonly skeleton: SkeletonInclude
+
+  readonly icons: FieldIcons
+  readonly size: FieldSize
+
+  /**
+   * 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: FieldProps,
+    protected readonly refs: ToRefs<FieldProps>,
+    protected readonly element: Ref<HTMLLabelElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<FieldComponents, FieldProps>,
+    protected readonly slots?: FieldSlots,
+    protected readonly emits?: ConstrEmit<FieldEmits>
+  ) {
+    this.icon = new IconTrailingInclude(this.props, this.className, this.components)
+
+    this.caption = new CaptionInclude(this.props, this.className, this.slots)
+    this.prefix = new PrefixInclude(this.props, this.className, this.slots)
+    this.suffix = new SuffixInclude(this.props, this.className, this.slots)
+
+    this.fieldLabel = new FieldLabelInclude(
+      this.props,
+      this.className,
+      this.components,
+      this.slots,
+      this.refs.counterTop,
+      this.propsSkeleton
+    )
+    this.fieldMessage = new FieldMessageInclude(
+      this.props,
+      this.className,
+      this.components,
+      undefined,
+      computed(() => !this.props.counterTop),
+      this.propsSkeleton
+    )
+
+    this.progress = new ProgressInclude(
+      this.props,
+      this.className,
+      this.components,
+      {
+        circular: true,
+        position: 'static',
+        dense: true
+      }
+    )
+
+    this.enabled = new EnabledInclude(this.props, this.progress)
+    this.event = new EventClickInclude(this.props, this.enabled, this.emits)
+    this.skeleton = new SkeletonInclude(
+      this.props,
+      this.classDesign,
+      ['classBackground']
+    )
+
+    this.icons = new FieldIcons(this.props, this.className)
+    this.size = new FieldSize(this.element, this.className)
+  }
+
+  /** Checks if an error needs to be displayed/ Проверяет, надо ли выводить ошибку */
+  readonly isValidation = computed<boolean>(() => Boolean(
+    this.props.validationMessage
+    && (
+      this.props.forceShowMessage
+      || (
+        !this.props.readonly
+        && !this.props.disabled
+      )
+    )
+  ))
+
+  /** Values for the class/ Значения для класса */
+  readonly classes = computed(() => ({
+    [`${this.className}--cancel`]: this.icons.isCancel.value,
+    [`${this.className}--suffix`]: this.props.suffix,
+    [`${this.className}--validation`]: this.isValidation.value
+  }))
+
+  /**
+   * Returns data for the slot.
+   *
+   * Возвращает данные для слота
+   */
+  getControl(): FieldControl {
+    return {
+      id: getElementId(),
+      className: `${this.className}__body__input ${this.skeleton.classesSkeleton.classText}`,
+      classHidden: `${this.className}__body__hidden`
+    }
+  }
+
+  /** Values for the skeleton/ Значения для скелетона */
+  protected readonly propsSkeleton = computed(() => ({
+    isSkeleton: this.props.isSkeleton
+  }))
+}