@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Icon/IconTrailingInclude.ts

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

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

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

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

package/src/constructors/Icon/props.ts

@@ -1,60 +0,0 @@
-import type { RoleType } from '../../types/roleTypes'
-import type { ImagePropsBasic, ImageValue } from '../Image'
-import type { SkeletonPropsInclude } from '../Skeleton'
-import type { AriaLabelPropsInclude } from '../../types/ariaTypes.ts'
-
-interface IconPropsToken {
-  // :type [!] System label / Системная метка
-  turn?: boolean
-  disabled?: boolean
-  hide?: boolean
-  asPalette?: boolean
-  dir?: boolean
-  overlay?: boolean
-  dynamic?: boolean
-  start?: boolean
-  end?: boolean
-  high?: boolean
-  animationType?: 'type1' | 'type2'
-  animationShow?: boolean
-  // :type [!] System label / Системная метка
-}
-
-export interface IconPropsBasic<
-  Image extends ImagePropsBasic = ImagePropsBasic
-> extends SkeletonPropsInclude,
-  AriaLabelPropsInclude {
-  // Status
-  /** Активное состояние иконки/ Active state of the icon */
-  active?: boolean
-
-  // Icon
-  /** Value of the main icon/ Значение основной иконки */
-  icon?: ImageValue<Image>
-  /** Value of the active icon/ Значение активной иконки */
-  iconActive?: ImageValue<Image>
-
-  // ARIA
-  role?: RoleType
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface IconProps extends IconPropsBasic, IconPropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsIcon = {
-  ...{
-    // :default [!] System label / Системная метка
-    animationType: 'type1'
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/Icon/types.ts

@@ -1,46 +0,0 @@
-import type { ComputedRef } from 'vue'
-import type { ConstrClass } from '@dxtmisha/functional'
-import type { ImageComponentsInclude, ImageEmitsInclude } from '../Image'
-
-/**
- * Interface for describing which components need to be connected for work.
- *
- * Интерфейс для описания, какие компоненты надо подключить для работы.
- */
-export type IconComponents = ImageComponentsInclude
-
-/**
- * Type describing available events.
- *
- * Тип, описывающий доступные события.
- */
-export type IconEmits = ImageEmitsInclude
-
-/**
- * Type describing available properties.
- *
- * Тип, описывающий доступные свойства.
- */
-export interface IconExpose {
-  isActive: ComputedRef<boolean>
-}
-
-/**
- * Type describing available slots.
- *
- * Тип, описывающий доступные слоты.
- */
-export interface IconSlots {
-  default? (props: any): any
-}
-
-/**
- * Type describing subclasses.
- *
- * Тип, описывающий подклассы.
- */
-export type IconClasses = {
-  main: ConstrClass
-  // :classes [!] System label / Системная метка
-  // :classes [!] System label / Системная метка
-}

package/src/constructors/Image/Image.ts

@@ -1,242 +0,0 @@
-import { computed, onUnmounted, type Ref, watch } from 'vue'
-import {
-  type ConstrBind,
-  type ConstrClassObject,
-  type ConstrEmit,
-  type ConstrStyles,
-  isString
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-
-import { ImageType } from './ImageType'
-import { ImageData } from './ImageData'
-
-import { ImageCoordinator } from './ImageCoordinator'
-import { ImagePosition } from './ImagePosition'
-import { ImageAdaptiveItem } from './ImageAdaptiveItem'
-import { ImageBackground } from './ImageBackground'
-import { ImageImg } from './ImageImg'
-
-import { ImageTypeValue } from './basicTypes'
-import type { ImageEmits } from './types'
-import type { ImageProps } from './props'
-
-/**
- * Base class for working with images and icons.
- *
- * Базовый класс для работы с изображениями и иконками.
- */
-export class Image {
-  readonly type: ImageType
-  readonly data: ImageData
-
-  readonly coordinator: ImageCoordinator
-  readonly position: ImagePosition
-  readonly adaptiveItem: ImageAdaptiveItem
-  readonly background: ImageBackground
-
-  readonly img: ImageImg
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element input element/ элемент ввода
-   * @param className class name/ название класса
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   * @param ImageTypeConstructor class for working with image type/ класс для работы с типом изображения
-   * @param ImageDataConstructor class for working with image data/ класс для работы с данными изображения
-   * @param ImageCoordinatorConstructor class for working with image coordinates/ класс для работы с координатами изображения
-   * @param ImagePositionConstructor class for working with image position/ класс для работы с позицией изображения
-   * @param ImageAdaptiveItemConstructor class for working with adaptive image item/ класс для работы с адаптивным элементом изображения
-   * @param ImageBackgroundConstructor class for working with image background/ класс для работы с фоном изображения
-   * @param ImageImgConstructor class for working with image tag/ класс для работы с тегом изображения
-   */
-  constructor(
-    protected readonly props: ImageProps,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly className: string,
-    protected readonly emits?: ConstrEmit<ImageEmits>,
-    protected readonly ImageTypeConstructor: typeof ImageType = ImageType,
-    protected readonly ImageDataConstructor: typeof ImageData = ImageData,
-    protected readonly ImageCoordinatorConstructor: typeof ImageCoordinator = ImageCoordinator,
-    protected readonly ImagePositionConstructor: typeof ImagePosition = ImagePosition,
-    protected readonly ImageAdaptiveItemConstructor: typeof ImageAdaptiveItem = ImageAdaptiveItem,
-    protected readonly ImageBackgroundConstructor: typeof ImageBackground = ImageBackground,
-    protected readonly ImageImgConstructor: typeof ImageImg = ImageImg
-  ) {
-    this.type = new ImageTypeConstructor(props)
-    this.data = new ImageDataConstructor(props, this.type)
-
-    this.coordinator = new ImageCoordinatorConstructor(props)
-    this.position = new ImagePositionConstructor(props, this.coordinator)
-
-    this.adaptiveItem = new ImageAdaptiveItemConstructor(
-      props,
-      this.data,
-      element
-    )
-
-    this.background = new ImageBackgroundConstructor(
-      props,
-      this.data,
-      this.coordinator,
-      this.adaptiveItem
-    )
-
-    this.img = new ImageImgConstructor(
-      this.props,
-      element,
-      this.type,
-      this.position,
-      this.background
-    )
-
-    if (emits) {
-      watch(this.data.image, (image) => {
-        emits('load', {
-          type: this.type.item.value,
-          image
-        })
-      })
-    }
-
-    onUnmounted(() => this.adaptiveItem.remove())
-  }
-
-  /**
-   * Determines the tag to use/ Определяет используемый тег
-   */
-  readonly tag = computed<string>(() => this.img.is.value ? 'img' : 'span')
-
-  /**
-   * Values for the text. Text is used for the type of icon that works as a background.
-   *
-   * Значения для текста. Текст используется для типа иконки, который работает как фон.
-   */
-  readonly text = computed<string | undefined>(() => {
-    const type = this.type.item.value
-
-    if (type === ImageTypeValue.pdf) {
-      const image = this.data.image.value
-
-      if (isString(image)) {
-        return image
-      }
-    }
-
-    const value = this.props.value
-
-    if (
-      type
-      && isString(value)
-      && [
-        'filled',
-        'outlined',
-        'round',
-        'sharp',
-        'two-tone',
-        'material'
-      ].indexOf(type) !== -1
-    ) {
-      return value.replace(/^(filled|outlined|round|sharp|two-tone)-/, '')
-    }
-
-    return undefined
-  })
-
-  /**
-   * Values for the class.
-   *
-   * Значения для класса.
-   */
-  readonly classes = computed<ConstrClassObject>(() => {
-    const type = this.type.item.value
-    const data = {
-      [`${this.className}--type--${type}`]: type !== undefined,
-      [`${this.className}--background`]: this.background.isImage(),
-      notranslate: true
-    }
-
-    if (this.img.is.value) {
-      data[`${this.className}--img`] = true
-    }
-
-    switch (type) {
-      case 'outlined':
-        data['material-symbols-outlined'] = true
-        break
-      case 'round':
-        data['material-symbols-rounded'] = true
-        break
-      case 'sharp':
-        data['material-symbols-sharp'] = true
-        break
-      case 'material':
-        data['material-icons'] = true
-        break
-    }
-
-    return data
-  })
-
-  /**
-   * Calculates all properties for the style of the element/
-   * Вычисляет все свойства для стиля элемента
-   */
-  readonly styles = computed<ConstrStyles>(() => {
-    const value = this.props.value
-
-    if (value) {
-      switch (this.type.item.value) {
-        case ImageTypeValue.file:
-        case ImageTypeValue.image:
-          return {
-            'background-image': this.background.image.value,
-            'background-size': this.background.size.value,
-            'background-position-x': this.position.x.value,
-            'background-position-y': this.position.y.value
-          }
-        case ImageTypeValue.icon:
-          return {
-            'background-image': this.background.image.value
-          }
-        case ImageTypeValue.flag:
-          return {
-            'background-image': this.background.image.value,
-            'background-size': 'contain'
-          }
-        case ImageTypeValue.public:
-          return { 'mask-image': this.background.image.value }
-        case ImageTypeValue.color:
-          if (isString(value)) {
-            return { 'background-color': value }
-          }
-      }
-    }
-
-    return {} as ConstrStyles
-  })
-
-  /**
-   * Computed bindings for the image element.
-   *
-   * Вычисляемые привязки для элемента изображения.
-   */
-  readonly binds = computed(() => ({
-    translate: 'no',
-    ...AriaStaticInclude.role('img'),
-    ...AriaStaticInclude.label(this.props.alt),
-    ...AriaStaticInclude.hidden()
-  }))
-
-  /**
-   * Bindings for the image value.
-   *
-   * Привязки для значения изображения.
-   */
-  readonly valueBinds = computed<ConstrBind<any>>(() => ({
-    key: 'value',
-    data: this.data.image.value
-  }))
-}