@dxtmisha/constructor 0.23.0

package/src/constructors/Image/basicTypes.ts

@@ -0,0 +1,70 @@
+import type { ConstrBind, Undefined } from '@dxtmisha/functional'
+import type { ImageEmits } from './types'
+import type { ImagePropsBasic } from './props'
+
+export enum ImageTypeValue {
+  pdf = 'pdf',
+  file = 'file',
+  image = 'image',
+  flag = 'flag',
+  color = 'color',
+  public = 'public',
+  filled = 'filled',
+  outlined = 'outlined',
+  round = 'round',
+  sharp = 'sharp',
+  twoTone = 'two-tone',
+  material = 'material',
+  icon = 'icon'
+}
+
+export type ImageElement = HTMLElement | undefined
+
+export type ImageCoordinatorItem
+  = [number]
+    | [number, number]
+    | [number, number, number]
+    | [number, number, number, number]
+    | Undefined
+
+export type ImageSize<T = number> = {
+  width: T
+  height: T
+}
+
+/**
+ * Parameters for the uploaded image or the one available by a direct link.
+ *
+ * Параметры для загруженного изображения или доступного по прямой ссылке.
+ */
+export type ImageItem
+  = ImageSize
+    & {
+      image: HTMLImageElement
+      src: string
+    }
+
+export type ImageTypeItem = ImageTypeValue | Undefined
+
+export type ImageEventItem = ImageItem | string | undefined
+export type ImageEventType = {
+  type: ImageTypeItem
+}
+export type ImageEventData
+  = ImageEventType
+    & {
+      image: ImageEventItem
+    }
+
+export type ImageValue<
+  Image extends ImagePropsBasic = ImagePropsBasic
+> = string | ConstrBind<Image> | null
+
+export type ImageComponentsInclude = {
+  image: object
+}
+export type ImageEmitsInclude = ImageEmits
+
+export interface ImagePropsInclude<Image extends ImagePropsBasic = ImagePropsBasic> {
+  image?: string | ConstrBind<Image>
+}

package/src/constructors/Image/index.ts

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

package/src/constructors/Image/properties.json

@@ -0,0 +1,17 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~adaptive": {},
+  "~size": {
+    "~auto": {},
+    "~contain": {},
+    "~cover": {}
+  }
+}

package/src/constructors/Image/props.ts

@@ -0,0 +1,66 @@
+interface ImagePropsToken {
+  // :type [!] System label / Системная метка
+  turn?: boolean
+  disabled?: boolean
+  hide?: boolean
+  adaptive?: boolean
+  size?: 'auto' | 'contain' | 'cover'
+  // :type [!] System label / Системная метка
+}
+
+export interface ImagePropsBasic {
+  // Value
+  /**
+   * Accepts icon name, image URL, File object or PDF link/
+   * Принимает название иконки, ссылку на изображение, объект File или ссылку на PDF файл
+   */
+  value?: string | any
+
+  /** Image URL/ URL изображения */
+  url?: string
+
+  // Adaptive
+  /**
+   * Adaptive group (e.g. for different resolutions)/
+   * Группа адаптивности (например, для разных разрешений)
+   */
+  adaptiveGroup?: string
+  /** Always use adaptivity/ Всегда использовать адаптивность */
+  adaptiveAlways?: boolean
+  /** Image object width/ Ширина объекта изображения */
+  objectWidth?: string | number
+  /** Image object height/ Высота объекта изображения */
+  objectHeight?: string | number
+
+  // Style
+  /**
+   * Image coordinates (e.g. for cropping or positioning)/
+   * Координаты изображения (например, для обрезки или позиционирования)
+   */
+  coordinator?: number[] | any
+  /** X position/ Позиция по оси X */
+  x?: string | number
+  /** Y position/ Позиция по оси Y */
+  y?: string | number
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ImageProps extends ImagePropsBasic, ImagePropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsImage = {
+  adaptiveGroup: 'basic',
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Image/style.scss

@@ -0,0 +1,77 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinImage {
+  direction: ltr;
+  @include ui.flexCenter;
+  @include ui.absolute;
+  overflow: hidden;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: inherit;
+
+  transition-property: background-size, filter, opacity, transform, rotate, scale, clip-path;
+  transition-duration: ui.v('d.sys.transitionDuration.standard');
+  transform: none;
+
+  &--type {
+    &--public {
+      -webkit-mask-position: center;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: ui.v('??publicMaskSize', contain);
+
+      @include ui.state('background') {
+        @include ui.backgroundAsColor;
+      }
+    }
+
+    &--icon {
+      background-size: cover;
+    }
+
+    &--color,
+    &--file,
+    &--image {
+      @include ui.disabled(ui.$designsClassName) {
+        filter: grayscale(1) opacity(#{var(--sys-color-opacity, ui.v('??color.opacity', 1))});
+      }
+    }
+
+    &--pdf {
+      > object {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &--adaptive {
+    background-size: 100%;
+  }
+
+  &--turn {
+    @include ui.rotate(180deg);
+  }
+
+  &--disabled {
+    color: rgba(var(--sys-color, ui.v('??color')), var(--sys-color-opacity, ui.v('??colorOpacity', 1)));
+  }
+
+  &--hide {
+    opacity: 0;
+    @include ui.scale(.8);
+  }
+
+  &.material-icons,
+  &.material-symbols-outlined,
+  &.material-symbols-rounded,
+  &.material-symbols-sharp {
+    direction: ltr;
+    display: inline-flex;
+    font-size: ui.v('??font-size', 1.5em);
+  }
+}

package/src/constructors/Image/types.ts

@@ -0,0 +1,49 @@
+import type { ComputedRef, Ref } from 'vue'
+import { type ConstrClass } from '@dxtmisha/functional'
+
+import type { ImageEventData, ImageEventItem, ImageTypeItem } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ImageComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ImageEmits = {
+  load: [image: ImageEventData]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export type ImageExpose = {
+  type: ComputedRef<ImageTypeItem>
+  data: Ref<ImageEventItem>
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ImageSlots {
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ImageClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/List/List.ts

@@ -0,0 +1,267 @@
+import { toRef, type Ref, type ToRefs, computed } from 'vue'
+import {
+  type ConstrBind,
+  type ConstrEmit,
+  DesignComp,
+  ListData,
+  type ListDataItem,
+  type ListList,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+
+import { WindowClassesInclude } from '../Window'
+
+import { ListSearch } from './ListSearch'
+import { ListFocus } from './ListFocus'
+import { ListGo } from './ListGo'
+import { ListControl } from './ListControl'
+
+import type { ListComponents, ListEmits, ListSlots } from './types'
+import type { ListProps } from './props'
+import type { IconValue } from '../Icon'
+
+/** Maximum number of lists/ Максимальное количество списков */
+let listIdMax = 1
+
+/**
+ * List
+ */
+export class List {
+  readonly search: ListSearch
+  readonly focus: ListFocus
+
+  readonly data: ListData
+  readonly event: EventClickInclude
+
+  readonly go: ListGo
+  readonly control: ListControl
+
+  readonly windowClasses: WindowClassesInclude
+
+  /** Unique list identifier/ Уникальный идентификатор списка */
+  protected readonly id: number = ++listIdMax
+
+  /**
+   * 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: ListProps,
+    protected readonly refs: ToRefs<ListProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ListComponents, ListProps>,
+    protected readonly slots?: ListSlots,
+    protected readonly emits?: ConstrEmit<ListEmits>
+  ) {
+    this.search = new ListSearch(this.props)
+    this.focus = new ListFocus(this.props, this.element, this.id)
+
+    this.data = new ListData(
+      toRef(this.props, 'list'),
+      this.focus.focus,
+      this.search.highlight,
+      this.refs.highlightLengthStart,
+      this.refs.selected,
+      this.refs.keyValue,
+      this.refs.keyLabel,
+      this.refs.liteThreshold
+    )
+
+    this.go = new ListGo(this.props, this.focus, this.data, this.emits)
+    this.control = new ListControl(this.props, this.search, this.data, this.go)
+
+    this.event = new EventClickInclude(undefined, undefined, emits)
+    this.windowClasses = new WindowClassesInclude(classDesign)
+  }
+
+  /**
+   * Computed list data
+   *
+   * Вычисляемые данные списка
+   * */
+  readonly list = computed<ListList>(() => {
+    if (this.props.lite) {
+      return this.data.liteData.value
+    }
+
+    return this.data.fullData.value
+  })
+
+  /**
+   * Computed binding properties for list items/
+   * Вычисляемые привязочные свойства для элементов списка
+   * */
+  protected readonly itemBinds = computed(() => {
+    return {
+      tag: this.props.tag,
+      divider: this.props.divider,
+      onClick: this.event.onClick,
+      ...(this.props.itemAttrs ?? {}),
+      listId: this.id
+    }
+  })
+
+  /**
+   * Returns information about the opening status of a group item.
+   *
+   * Возвращает информацию о статусе открытия группового элемента.
+   * @param item List item data/ данные элемента списка
+   */
+  isOpenGroup(
+    item: ConstrBind<ListDataItem>
+  ): boolean {
+    const data = this.data.getSubList(item)
+
+    return data.isSelected.value
+      || data.isFocus()
+      || data.isHighlight()
+  }
+
+  /**
+   * Gets binding properties for a list item
+   *
+   * Получает привязочные свойства для элемента списка
+   * @param item List item data/ данные элемента списка
+   */
+  getItem(
+    item: ConstrBind<ListDataItem>
+  ) {
+    return toBinds(
+      this.itemBinds.value,
+      item,
+      { key: item.value }
+    )
+  }
+
+  /**
+   * Gets binding properties for a group item in the list
+   *
+   * Получает привязочные свойства для группового элемента в списке
+   * @param item List item data/ данные элемента списка
+   */
+  getItemGroup(
+    item: ConstrBind<ListDataItem>
+  ) {
+    return toBinds(
+      this.itemBinds.value,
+      this.props.itemGroupAttrs,
+      item,
+      {
+        key: item.value,
+        class: `${this.className}__group`
+      }
+    )
+  }
+
+  /**
+   * Gets binding properties for a menu item in the list
+   *
+   * Получает привязочные свойства для элемента меню в списке
+   * @param item List item data/ данные элемента списка
+   */
+  getItemMenu(
+    item: ConstrBind<ListDataItem>
+  ) {
+    return toBinds(
+      this.itemBinds.value,
+      this.props.itemMenuAttrs,
+      item,
+      {
+        key: item.value,
+        class: `${this.className}__menu`
+      }
+    )
+  }
+
+  /**
+   * Gets binding properties for a group management item with down arrow
+   *
+   * Получает привязочные свойства для элемента управления группой со стрелкой вниз
+   * @param item List item data/ данные элемента списка
+   * @param open Whether the group is open/ открыта ли группа
+   */
+  getItemManagementFormGroup(
+    item: ConstrBind<ListDataItem>,
+    open: boolean
+  ): ConstrBind<ListDataItem> {
+    return this.getItemManagement(
+      item,
+      open,
+      this.props.iconArrowDown
+    )
+  }
+
+  /**
+   * Gets binding properties for a menu management item with right arrow
+   *
+   * Получает привязочные свойства для элемента управления меню со стрелкой вправо
+   * @param item List item data/ данные элемента списка
+   * @param open Whether the menu is open/ открыто ли меню
+   */
+  getItemManagementFormMenu(
+    item: ConstrBind<ListDataItem>,
+    open: boolean
+  ): ConstrBind<ListDataItem> {
+    return this.getItemManagement(
+      item,
+      open,
+      this.props.iconArrowRight
+    )
+  }
+
+  /**
+   * Returns a sublist for a group item.
+   *
+   * Возвращает подсписок для группового элемента.
+   * @param item List item data/ данные элемента списка
+   */
+  getList(
+    item: ConstrBind<ListDataItem>
+  ) {
+    return this.data.getSubList(item).fullData.value
+  }
+
+  /**
+   * Internal method to create management item binding properties
+   *
+   * Внутренний метод для создания привязочных свойств элемента управления
+   * @param item List item data/ данные элемента списка
+   * @param open Whether the item is open/ открыт ли элемент
+   * @param icon Icon to display/ иконка для отображения
+   */
+  protected getItemManagement(
+    item: ConstrBind<ListDataItem>,
+    open: boolean,
+    icon?: IconValue
+  ): ConstrBind<ListDataItem> {
+    return toBinds(
+      this.itemBinds.value,
+      this.props.itemManagementAttrs,
+      item,
+      {
+        'class': [
+          `${this.className}__management`,
+          this.windowClasses.get().static
+        ],
+        'focus': item?.index === this.focus.focus.value,
+        'selectedChild': this.isOpenGroup(item),
+        open,
+        'iconTurn': open,
+        'iconTrailing': icon,
+        'iconTrailingTurnOnly': true,
+        'data-status': open ? 'open' : 'close'
+      }
+    )
+  }
+}