@dxtmisha/constructor 0.23.0

package/src/constructors/FieldMessage/types.ts

@@ -0,0 +1,49 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { FieldCounterComponentInclude } from '../FieldCounter'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type FieldMessageComponents = FieldCounterComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type FieldMessageEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface FieldMessageExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface FieldMessageSlots {
+  /** Slot for helper message/ Слот для вспомогательного сообщения */
+  helper?(props: any): any
+
+  /** Slot for validation message/Слот для сообщения об ошибке */
+  validation?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type FieldMessageClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  info: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Icon/Icon.ts

@@ -0,0 +1,105 @@
+import { computed, type ComputedRef, type Ref, type ToRefs } from 'vue'
+import {
+  type ConstrClassObject,
+  type ConstrEmit,
+  DesignComp,
+  getBindRef
+} from '@dxtmisha/functional'
+
+import { type ImageEventData } from '../Image'
+import { SkeletonInclude } from '../Skeleton'
+
+import type { IconComponents, IconEmits, IconSlots } from './types'
+import type { IconProps } from './props'
+import type { IconEventLoad } from './basicTypes'
+
+/**
+ * Base class for working with icons.
+ *
+ * Базовый класс для работы с иконками.
+ */
+export class Icon {
+  /**
+   * Returns the property for the base icon/ Возвращает свойство для базовой иконки
+   */
+  readonly iconBind: ComputedRef<IconEventLoad['iconBind']>
+
+  /**
+   * Returns the property for the additional icon/ Возвращает свойство для дополнительной иконки
+   */
+  readonly iconActiveBind: ComputedRef<IconEventLoad['iconActiveBind']>
+
+  /**
+   * An object for working with the Skeleton/ Объект для работы с Skeleton
+   */
+  readonly skeleton: SkeletonInclude
+
+  /**
+   * 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: IconProps,
+    protected readonly refs: ToRefs<IconProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<IconComponents, IconProps>,
+    protected readonly slots?: IconSlots,
+    protected readonly emits?: ConstrEmit<IconEmits>
+  ) {
+    this.iconBind = getBindRef(
+      refs.icon,
+      computed(() => ({
+        class: `${className}__icon`,
+        turn: this.props.turn,
+        disabled: this.props.disabled,
+        hide: this.isActive.value,
+        onLoad: this.onLoad
+      }))
+    )
+
+    this.iconActiveBind = getBindRef(
+      refs.iconActive,
+      computed(() => ({
+        class: `${className}__iconActive`,
+        turn: this.props.turn,
+        disabled: this.props.disabled,
+        hide: !this.isActive.value
+      }))
+    )
+
+    this.skeleton = new SkeletonInclude(
+      props,
+      classDesign,
+      ['classBackgroundVariant']
+    )
+  }
+
+  /**
+   * Checks if the additional icon is active/ Проверяет, активна ли дополнительная иконка
+   */
+  readonly isActive = computed<boolean>(() => Boolean(this.props.active && this.props.iconActive))
+
+  /**
+   * Values for the class/ Значения для класса
+   */
+  readonly classes = computed<ConstrClassObject>(() => ({
+    ...this.skeleton.classes.value
+  }))
+
+  /**
+   * Triggers an event when the image loading is complete.
+   *
+   * Вызывает событие, когда завершится загрузка картинки.
+   * @param event event object/ объект события
+   */
+  protected readonly onLoad = (event: ImageEventData) => this.emits?.('load', event)
+}

package/src/constructors/Icon/IconDesign.tsx

@@ -0,0 +1,157 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Icon } from './Icon'
+
+import {
+  type IconPropsBasic
+} from './props'
+import {
+  type IconClasses,
+  type IconComponents,
+  type IconEmits,
+  type IconExpose,
+  type IconSlots
+} from './types'
+
+/**
+ * IconDesign
+ */
+export class IconDesign<
+  COMP extends IconComponents,
+  EXPOSE extends IconExpose,
+  CLASSES extends IconClasses,
+  P extends IconPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    IconEmits,
+    EXPOSE,
+    IconSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Icon
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, IconEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Icon(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Render the main icon.
+   *
+   * Рендер основной иконки.
+   */
+  readonly renderIcon = (): VNode | undefined => {
+    return this.components.renderOne(
+      'image',
+      this.item.iconBind.value,
+      undefined,
+      'icon'
+    )
+  }
+
+  /**
+   * Render the secondary icon.
+   *
+   * Рендер вторичной иконки.
+   */
+  readonly renderIconActive = (): VNode | undefined => {
+    return this.components.renderOne(
+      'image',
+      this.item.iconActiveBind.value,
+      undefined,
+      'iconActive'
+    )
+  }
+
+  /**
+   * Initialization of all the necessary properties for work<br>
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      isActive: this.item.isActive
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.<br>
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: this.item.classes.value,
+      ...{
+        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.<br>
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.<br>
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    const children: any[] = []
+
+    this.initSlot('default', children)
+
+    if (this.props.icon) {
+      children.push(this.renderIcon())
+    }
+
+    if (this.props.iconActive) {
+      children.push(this.renderIconActive())
+    }
+
+    return h(
+      'span',
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main
+      },
+      children
+    )
+  }
+}

package/src/constructors/Icon/IconInclude.ts

@@ -0,0 +1,64 @@
+import { computed } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal, toBinds } from '@dxtmisha/functional'
+
+import { IconLiteInclude } from './IconLiteInclude'
+
+import type { IconComponentInclude, IconPropsInclude } from './basicTypes'
+import type { IconPropsBasic } from './props'
+
+/**
+ * Class for simplified integration of the icon-handling component
+ *
+ * Класс для упрощённого внедрения компонента для работы с иконками
+ */
+export class IconInclude<
+  Props extends IconPropsInclude = IconPropsInclude
+> extends IconLiteInclude<Props> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter/ дополнительный параметр
+   * @param turn should the icon be flipped/ надо ли перевернуть иконку
+   * @param dir should the icon be mirrored/ надо ли зеркально отображать иконка
+   * @param start add sorting at the beginning/ добавить сортировку в начале
+   * @param end add sorting at the end/ добавить сортировку в конце
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<IconComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<ConstrBind<IconPropsBasic>>,
+    protected readonly turn?: RefOrNormal<boolean>,
+    protected readonly dir?: RefOrNormal<boolean>,
+    protected readonly start: RefOrNormal<boolean | undefined> = false,
+    protected readonly end: RefOrNormal<boolean | undefined> = false
+  ) {
+    super(props, className, components, extra)
+  }
+
+  /**
+   * List of properties for the icon component/ Список свойств для компонента иконки
+   */
+  readonly iconBind = computed(() => getBind(
+    this.props.icon,
+    {
+      active: this.props.selected,
+      turn: getRef(this.turn) ?? this.props.iconTurn,
+      hide: this.props.iconHide,
+      asPalette: this.props.iconPalette,
+      animationType: 'type2',
+      dir: getRef(this.dir) ?? this.props.iconDir,
+      start: this.start,
+      end: this.end,
+      ...toBinds(
+        this.getExtra(),
+        this.props.iconAttrs,
+        this.getClasses(this.props.iconAttrs?.class)
+      ),
+      ...this.getEventType()
+    },
+    'icon'
+  ))
+}

package/src/constructors/Icon/IconLiteInclude.ts

@@ -0,0 +1,121 @@
+import { computed, type VNode } from 'vue'
+import {
+  type ConstrBind,
+  type ConstrClass,
+  DesignComponents,
+  getBind,
+  getRef,
+  isFilled,
+  type RefOrNormal
+} from '@dxtmisha/functional'
+
+import type { IconComponentInclude, IconLitePropsInclude } from './basicTypes'
+import type { IconPropsBasic } from './props'
+
+/**
+ * Class for simplified integration of the icon-handling component
+ *
+ * Класс для упрощённого внедрения компонента для работы с иконками
+ */
+export class IconLiteInclude<Props extends IconLitePropsInclude = IconLitePropsInclude> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter/ дополнительный параметр
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<IconComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<ConstrBind<IconPropsBasic>>
+  ) {
+  }
+
+  /**
+   * Checks whether an icon is specified for rendering the component/
+   * Проверяет, указана ли иконка для отображения компонента
+   */
+  readonly isIcon = computed<boolean>(() => Boolean(this.props.icon))
+
+  /**
+   * List of properties for the icon component/ Список свойств для компонента иконки
+   */
+  readonly iconBind = computed(() => getBind(
+    this.props.icon,
+    {
+      ...this.getExtra(),
+      ...this.getClasses(),
+      ...this.getEventType()
+    },
+    'icon'
+  ))
+
+  /**
+   * Render of the Icon component
+   *
+   * Рендер компонента иконка
+   */
+  readonly renderIcon = (): VNode[] => {
+    if (
+      this.components
+      && isFilled(this.props.icon)
+    ) {
+      return this.components.render(
+        'icon',
+        this.iconBind.value
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Returns an additional property
+   *
+   * Возвращает дополнительное свойство
+   */
+  protected getExtra() {
+    return getRef(this.extra)
+  }
+
+  /**
+   * Returns a list of classes
+   *
+   * Возвращает список классов
+   * @param classesUser list of additional classes/ список дополнительных классов
+   * @param name class name/ название класса
+   */
+  protected getClasses(
+    classesUser?: ConstrClass,
+    name: string = 'icon'
+  ): { class: ConstrClass } {
+    const classes: ConstrClass = [`${this.className}__${name}`]
+    const classesExtra = this.getExtra()?.class
+
+    if (classesExtra) {
+      classes.push(classesExtra)
+    }
+
+    if (classesUser) {
+      classes.push(classesUser)
+    }
+
+    return {
+      class: classes
+    }
+  }
+
+  /**
+   * Returns the type used to determine when an event is triggered
+   *
+   * Возвращает тип для определения при срабатывании события
+   * @param type event type/ тип события
+   */
+  protected getEventType(type: string = 'icon'): Record<string, string> {
+    return {
+      'data-event-type': type
+    }
+  }
+}

package/src/constructors/Icon/IconTrailingInclude.ts

@@ -0,0 +1,106 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, isFilled, type RefOrNormal, toBinds } from '@dxtmisha/functional'
+
+import { IconInclude } from './IconInclude'
+
+import type { IconComponentInclude, IconTrailingPropsInclude } from './basicTypes'
+import type { IconPropsBasic } from './props'
+
+/**
+ * Class for simplified integration of the icon-handling component
+ *
+ * Класс для упрощённого внедрения компонента для работы с иконками
+ */
+export class IconTrailingInclude<
+  Props extends IconTrailingPropsInclude = IconTrailingPropsInclude
+> extends IconInclude<Props> {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter/ дополнительный параметр
+   */
+  constructor(
+    protected readonly props: Readonly<Props>,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<IconComponentInclude, Props>,
+    protected readonly extra?: RefOrNormal<ConstrBind<IconPropsBasic>>
+  ) {
+    super(
+      props,
+      className,
+      components,
+      extra,
+      computed(() => Boolean(!props.iconTrailing && !props.iconTrailingTurnOnly && props.iconTurn)),
+      computed(() => Boolean(!props.iconTrailing && !props.iconTrailingDirOnly && props.iconDir)),
+      true
+    )
+  }
+
+  /**
+   * Checks whether an icon is specified for rendering the component/
+   * Проверяет, указана ли иконка для отображения компонента
+   */
+  readonly isIconTrailing = computed<boolean>(() => Boolean(this.props.iconTrailing))
+
+  /**
+   * Checks if there is at least one icon/
+   * Проверяет, есть ли хотя бы одна иконка
+   */
+  readonly hasAtLeastOneIcon = computed<boolean>(() => Boolean(this.props.iconTrailing || this.props.icon))
+
+  /**
+   * list of properties for the secondary icon component/ список свойств для вторичного компонента иконки
+   */
+  readonly trailingBind = computed(() => getBind(
+    this.props.iconTrailing,
+    {
+      turn: this.props.iconTurn,
+      asPalette: this.props.iconPalette,
+      dir: this.props.iconDir,
+      end: true,
+      high: true,
+      ...toBinds(
+        this.getExtra(),
+        this.props.iconAttrs,
+        this.getClasses(this.props.iconAttrs?.class, 'trailing')
+      ),
+      ...this.getEventType('icon-trailing')
+    },
+    'icon'
+  ))
+
+  /**
+   * Render of the secondary icon component
+   *
+   * Рендер вторичного компонента иконки
+   */
+  readonly renderIconTrailing = (): VNode[] => {
+    if (
+      this.components
+      && isFilled(this.props.iconTrailing)
+    ) {
+      return this.components.render(
+        'icon',
+        this.trailingBind.value,
+        undefined,
+        'iconTrailing'
+      )
+    }
+
+    return []
+  }
+
+  /**
+   * Method for rendering all icons — first the main ones, then the additional icons
+   *
+   * Метод для рендеринга всех иконок — сначала основных, затем дополнительных
+   */
+  readonly render = (): VNode[] => {
+    return [
+      ...this.renderIcon(),
+      ...this.renderIconTrailing()
+    ]
+  }
+}

package/src/constructors/Icon/basicTypes.ts

@@ -0,0 +1,50 @@
+import type { ConstrBind, ConstrItem } from '@dxtmisha/functional'
+
+import type { IconPropsBasic } from './props'
+
+export type IconEventLoad = {
+  isActive: boolean
+  iconBind: ConstrItem | undefined
+  iconActiveBind: ConstrItem | undefined
+}
+
+export type IconValue<
+  Icon extends IconPropsBasic = IconPropsBasic
+> = string | ConstrBind<Icon> | null
+
+export type IconComponentInclude = {
+  icon?: object
+}
+
+export interface IconLitePropsInclude<
+  Icon extends IconPropsBasic = IconPropsBasic
+> {
+  // Values
+  icon?: IconValue<Icon>
+}
+
+export interface IconPropsInclude<
+  Icon extends IconPropsBasic = IconPropsBasic
+> extends IconLitePropsInclude<Icon> {
+  // Status
+  selected?: boolean
+  iconTurn?: boolean
+  iconHide?: boolean
+
+  // Style
+  iconDir?: boolean
+  iconPalette?: boolean
+  iconAttrs?: ConstrBind<Icon>
+}
+
+export interface IconTrailingPropsInclude<
+  Icon extends IconPropsBasic = IconPropsBasic
+> extends IconPropsInclude<Icon> {
+  // Values
+  iconTrailing?: IconValue<Icon>
+
+  // Style
+  iconTrailingTurnOnly?: boolean
+  iconTrailingDirOnly?: boolean
+  iconTrailingPalette?: boolean
+}

package/src/constructors/Icon/index.ts

@@ -0,0 +1,8 @@
+export * from './Icon'
+export * from './IconDesign'
+export * from './IconInclude'
+export * from './IconLiteInclude'
+export * from './IconTrailingInclude'
+export * from './basicTypes'
+export * from './props'
+export * from './types'

package/src/constructors/Icon/properties.json

@@ -0,0 +1,25 @@
+{
+  "width": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~asPalette": {},
+  "~dir": {},
+  "~overlay": {},
+  "~dynamic": {},
+  "~start": {
+    "_category": "order"
+  },
+  "~end": {
+    "_category": "order"
+  },
+  "~high": {},
+  "~animation-type": {
+    "~type1": {},
+    "~type2": {},
+    "_default": "type1"
+  },
+  "~animation-show": {}
+}