@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/classes/CaptionInclude.ts

@@ -1,71 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { CaptionProps, CaptionSlots } from '../types/captionTypes'
-
-/**
- * Class for working with caption.
- *
- * Класс для работы с caption.
- */
-export class CaptionInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<CaptionProps>,
-    protected readonly className: string,
-    protected readonly slots?: CaptionSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Returns true if caption is filled
-   *
-   * Возвращает true, если caption заполнен
-   */
-  readonly is = computed(() => Boolean(this.props.caption || this.slots?.caption))
-
-  /**
-   * Renders caption element with content from props or slots.
-   *
-   * Отображает элемент caption с содержимым из props или slots.
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.caption)) {
-      children.push(this.props.caption)
-    }
-
-    if (this.slots?.caption) {
-      children.push(this.slots.caption?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            'class': {
-              [`${this.className}__caption`]: true,
-              ...this.skeleton?.classes.value
-            },
-            'data-event-type': 'caption'
-          },
-          children,
-          'caption'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/DescriptionInclude.ts

@@ -1,87 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { getElementId, isFilled, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { DescriptionExpose, DescriptionProps, DescriptionSlots } from '../types/descriptionTypes'
-
-/**
- * Use for adding description text
- *
- * Использование для добавления описания текста
- */
-export class DescriptionInclude {
-  /** Unique identifier/ Уникальный идентификатор */
-  protected id = getElementId()
-
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<DescriptionProps>,
-    protected readonly className: string,
-    protected readonly slots?: DescriptionSlots,
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-  }
-
-  /**
-   * Check for the presence of a description
-   *
-   * Проверка наличия описания
-   */
-  readonly is = computed(() => Boolean(this.props.description || this.slots?.description))
-
-  /** Description expose reference/ Ссылка на expose описания */
-  readonly expose: DescriptionExpose = {
-    descriptionId: this.id
-  }
-
-  /**
-   * Get description ID
-   *
-   * Получить ID описания
-   */
-  getId(): string {
-    return this.id
-  }
-
-  /**
-   * Render the description
-   *
-   * Рендер описания
-   */
-  render(): VNode[] {
-    const children: any[] = []
-
-    if (isFilled(this.props.description)) {
-      children.push(this.props.description)
-    }
-
-    if (this.slots?.description) {
-      children.push(this.slots.description?.({}))
-    }
-
-    if (children.length > 0) {
-      return [
-        render(
-          'div',
-          {
-            class: {
-              [`${this.className}__description`]: true,
-              ...this.skeleton?.classes.value
-            }
-          },
-          children,
-          'description'
-        )
-      ]
-    }
-
-    return []
-  }
-}

package/src/classes/EnabledInclude.ts

@@ -1,67 +0,0 @@
-import { computed } from 'vue'
-
-import { AriaStaticInclude } from './AriaStaticInclude'
-import { ProgressInclude } from '../constructors/Progress'
-
-import type { AriaList } from '../types/ariaTypes'
-import type { EnabledProps } from '../types/enabledTypes'
-
-/**
- * Use to control the activity of the item.
- *
- * Использование для управления активности элемента.
- */
-export class EnabledInclude {
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param progress object for working with progress/ объект для работы с прогрессами
-   */
-  constructor(
-    protected readonly props: EnabledProps,
-    protected readonly progress?: ProgressInclude
-  ) {
-  }
-
-  /**
-   * Checks if the element is active
-   *
-   * Проверяет, активен ли элемент
-   */
-  readonly isEnabled = computed<boolean>(() =>
-    !this.props.disabled
-    && !this.props.readonly
-    && (
-      !this.progress
-      || !this.progress.is.value
-    )
-    && Boolean(
-      !('dynamic' in this.props)
-      || this.props.dynamic
-    )
-  )
-
-  /**
-   * checks if the read-only status is enabled/ проверяет, включён ли статус "только для чтения"
-   */
-  readonly isReadonly = computed<boolean>(() => Boolean(this.props.readonly))
-
-  /**
-   * checks if the element is disabled/ проверяет, отключён ли элемент
-   */
-  readonly isDisabled = computed<boolean>(() => Boolean(this.props.disabled))
-
-  /**
-   * checks if the element is disabled or the value is empty/
-   * проверяет, отключён ли элемент или пустое ли значение
-   */
-  readonly isDisabledOrUndefined = computed<boolean | undefined>(() => this.isDisabled.value || undefined)
-
-  /**
-   * list of aria properties for the enabled state/
-   * список aria свойств для состояния активности
-   */
-  readonly aria = computed<AriaList>(
-    () => AriaStaticInclude.disabled(!this.isEnabled.value)
-  )
-}

package/src/classes/EventClickInclude.ts

@@ -1,138 +0,0 @@
-import { toRefs, type ToRefs } from 'vue'
-import { type ConstrEmit, RouterItemRef } from '@dxtmisha/functional'
-
-import { EnabledInclude } from './EnabledInclude'
-
-import type {
-  EventClickEmits,
-  EventClickExpose,
-  EventClickProps,
-  EventClickValue
-} from '../types/eventClickTypes'
-
-/**
- * Base class for working with button events
- *
- * Базовый класс для работы с событиями кнопки
- */
-export class EventClickInclude {
-  protected readonly refs?: ToRefs<EventClickProps>
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param enabled Object for working with activity status/ Объект для работы со статусом активности
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props?: EventClickProps,
-    protected readonly enabled?: EnabledInclude,
-    protected readonly emits?: ConstrEmit<EventClickEmits>
-  ) {
-    this.refs = props ? toRefs(props) : undefined
-  }
-
-  /**
-   * Exported values
-   *
-   * Экспортируемые значения
-   */
-  get expose(): EventClickExpose {
-    return {
-      value: this.refs?.value,
-      detail: this.refs?.detail
-    }
-  }
-
-  /**
-   * Event trigger function
-   *
-   * Функция вызова события
-   * @param event event object/ объект события
-   * @param options data object/ объект с данными
-   */
-  readonly onClick = (
-    event: MouseEvent,
-    options?: EventClickValue
-  ) => {
-    if (this.emits) {
-      if (options) {
-        this.emit(event, options)
-      } else if (this.toRouter()) {
-        event.preventDefault()
-      } else if (this.enabled) {
-        const optionsItem = this.getOptions(event)
-
-        if (
-          this.enabled.isEnabled.value
-          || (
-            optionsItem.type === 'icon-trailing'
-            && !this.enabled.isDisabled.value
-          )
-        ) {
-          this.emit(event, optionsItem)
-        }
-      } else {
-        this.emit(event, this.getOptions(event))
-      }
-    }
-  }
-
-  /**
-   * Parameters for the event
-   *
-   * Параметры для события
-   */
-  protected getOptions(event: MouseEvent): EventClickValue {
-    return {
-      type: this.getTargetType(event),
-      value: this.props?.value,
-      detail: this.props?.detail
-    }
-  }
-
-  /**
-   * Returns the type of the selected item
-   *
-   * Возвращает тип выбранного элемента
-   */
-  protected getTargetType(event: MouseEvent) {
-    const type = (event.target as HTMLElement)
-      ?.closest<HTMLElement>('[data-event-type]')
-      ?.dataset
-      ?.eventType
-
-    return type ?? 'click'
-  }
-
-  /**
-   * Changing the link through the router
-   *
-   * Изменение ссылки через router
-   */
-  protected toRouter(): boolean {
-    if (this.props?.to) {
-      RouterItemRef.push(this.props?.to)
-      return true
-    }
-
-    return false
-  }
-
-  /**
-   * Triggers the click event
-   *
-   * Вызывает событие клика
-   * @param event event object/ объект события
-   * @param options data object/ объект с данными
-   */
-  protected emit(
-    event: MouseEvent,
-    options: EventClickValue
-  ) {
-    if (this.emits) {
-      this.emits('click', event, options)
-      this.emits('clickLite', options)
-    }
-  }
-}

package/src/classes/LabelHighlightInclude.ts

@@ -1,125 +0,0 @@
-import { computed, type VNode } from 'vue'
-import { type ConstrClass, getExp, isFilled } from '@dxtmisha/functional'
-
-import { LabelInclude } from './LabelInclude'
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { LabelHighlightProps, LabelHighlightSlots } from '../types/labelTypes'
-
-/**
- * The LabelHighlightInclude class extends LabelInclude to add support for highlighting parts of text.
- * Used to display a label with the ability to highlight specific parts.
- *
- * Класс LabelHighlightInclude расширяет LabelInclude и добавляет поддержку выделения частей текста.
- * Используется для отображения метки с возможностью выделения определённых частей.
- */
-export class LabelHighlightInclude extends LabelInclude {
-  /**
-   * Constructor for the LabelHighlightInclude class.
-   *
-   * Конструктор для класса LabelHighlightInclude.
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param classesExtra additional classes/ дополнительные классы
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param elementsExtra additional elements/ дополнительные элементы
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   */
-  constructor(
-    protected readonly props: Readonly<LabelHighlightProps>,
-    protected readonly className: string,
-    protected readonly classesExtra?: ConstrClass,
-    protected readonly slots?: LabelHighlightSlots,
-    protected readonly elementsExtra?: () => VNode[],
-    protected readonly skeleton?: SkeletonInclude
-  ) {
-    super(
-      props,
-      className,
-      classesExtra,
-      slots,
-      elementsExtra,
-      computed(() => this.getLabel()),
-      undefined,
-      skeleton
-    )
-  }
-
-  /**
-   * Determines if highlighting is required.
-   *
-   * Определяет, требуется ли выделение.
-   */
-  isHighlight(): boolean {
-    const props = this.props
-
-    if (
-      !props.highlight
-      || props.highlight.length < this.getLengthStart()
-    ) {
-      return true
-    }
-
-    if (!(
-      props.highlight
-      && props.highlight.length >= this.getLengthStart()
-      && props.label
-    )) {
-      return false
-    }
-
-    const label = props.label.toString()
-    const exp = getExp(props.highlight, 'i')
-
-    return Boolean(
-      label.match(exp)
-      || (
-        isFilled(props.value)
-        && props.value.toString().match(exp)
-      )
-    )
-  }
-
-  /**
-   * Returns a string with highlighted parts.
-   * If highlighting is not required, returns the original string.
-   *
-   * Возвращает строку с выделенными частями.
-   * Если выделение не требуется, возвращает исходную строку.
-   */
-  protected getLabel = (): string | undefined => {
-    const props = this.props
-
-    if (
-      props.highlight
-      && props.highlight.length >= this.getLengthStart()
-      && props.label
-    ) {
-      const className = `${this.className}__highlight`
-      const label = props.label.toString()
-      const exp = getExp(props.highlight, 'i')
-
-      if (label.match(exp)) {
-        return label.replace(exp, text => `<span class="${className}">${text}</span>`)
-      }
-
-      if (
-        isFilled(props.value)
-        && props.value.toString().match(exp)
-      ) {
-        return `<span class="${className}">${label}</span>`
-      }
-    }
-
-    return undefined
-  }
-
-  /**
-   * Returns the minimum length of the string to start highlighting.
-   *
-   * Возвращает минимальную длину строки для начала выделения.
-   */
-  protected getLengthStart() {
-    return this.props.highlightLengthStart ?? 2
-  }
-}

package/src/classes/LabelInclude.ts

@@ -1,206 +0,0 @@
-import { computed, type Ref, type VNode } from 'vue'
-import { type ConstrClass, getElementId, getRef, isFilled, type RefOrNormal, render } from '@dxtmisha/functional'
-
-import { SkeletonInclude } from '../constructors/Skeleton'
-
-import type { LabelAlternativeSlots, LabelExpose, LabelProps, LabelSlots } from '../types/labelTypes'
-
-/**
- * Use for adding text
- *
- * Использование для добавления текста
- */
-export class LabelInclude {
-  /** Unique identifier/ Уникальный идентификатор */
-  protected id = getElementId()
-
-  /**
-   * Constructor
-   * @param props input property/ входное свойство
-   * @param className class name/ название класса
-   * @param classesExtra additional classes/ дополнительные классы
-   * @param slots object for working with slots/ объект для работы со слотами
-   * @param elementsExtra additional elements/ дополнительные элементы
-   * @param labelReplacing additional elements/ дополнительные элементы
-   * @param alternativeSlots alternative slots/ альтернативные слоты
-   * @param skeleton optional skeleton for loading state/ необязательный скелетон для состояния загрузки
-   * @param tag tag name/ имя тега
-   */
-  constructor(
-    protected readonly props: Readonly<LabelProps>,
-    protected readonly className: string,
-    protected readonly classesExtra?: ConstrClass,
-    protected readonly slots?: LabelSlots | LabelAlternativeSlots,
-    protected readonly elementsExtra?: () => VNode[],
-    protected readonly labelReplacing?: Ref<string | number | undefined>,
-    protected readonly alternativeSlots?: boolean,
-    protected readonly skeleton?: SkeletonInclude,
-    protected readonly tag: RefOrNormal<string> = 'span'
-  ) {
-  }
-
-  /** Label presence check/ Проверка наличия метки */
-  readonly is = computed<boolean>(() => {
-    if (
-      this.props.label
-      || this.labelReplacing?.value
-    ) {
-      return true
-    }
-
-    if (this.slots) {
-      if (this.alternativeSlots) {
-        return 'label' in this.slots
-      }
-
-      return 'default' in this.slots
-    }
-
-    return false
-  })
-
-  /** Identifier for the element/ Идентификатор для элемента */
-  readonly idElement = computed<string | undefined>(() => {
-    if (this.is.value) {
-      return this.getId()
-    }
-
-    return undefined
-  })
-
-  /**
-   * Expose helpers for Label state and actions.
-   *
-   * Вспомогательные методы expose для состояния и действий Label.
-   */
-  readonly expose: LabelExpose = {
-    labelId: this.getId()
-  }
-
-  /**
-   * Get the unique identifier.
-   *
-   * Получение уникального идентификатора.
-   */
-  getId(): string {
-    return this.props?.labelId || this.id
-  }
-
-  /**
-   * Render the label
-   *
-   * Рендер метки
-   * @param childrenExtra additional children/ дополнительные дочерние элементы
-   */
-  render(
-    childrenExtra?: any[]
-  ): VNode[] {
-    const elements: any[] = []
-
-    if (this.is.value) {
-      const children: any[] = [
-        ...this.initLabel(),
-        ...this.initLabelReplacing(),
-        ...this.initSlot()
-      ]
-
-      if (this.elementsExtra) {
-        children.push(...this.elementsExtra())
-      }
-
-      if (childrenExtra) {
-        children.push(...childrenExtra)
-      }
-
-      if (children.length > 0) {
-        elements.push(
-          render(
-            getRef(this.tag),
-            {
-              id: this.getId(),
-              class: this.getClassName()
-            },
-            children,
-            'label'
-          )
-        )
-      }
-    }
-
-    return elements
-  }
-
-  /**
-   * Get the class name for the label
-   *
-   * Получение имени класса для метки
-   */
-  protected getClassName(): ConstrClass {
-    const classes: ConstrClass = [`${this.className}__label`]
-
-    if (this.classesExtra) {
-      classes.push(this.classesExtra)
-    }
-
-    if (this.skeleton) {
-      classes.push(this.skeleton.classes.value)
-    }
-
-    return classes
-  }
-
-  /**
-   * Adds the label text if it exists
-   *
-   * Добавляет текст метки, если он есть
-   */
-  protected initLabel(): any[] {
-    if (
-      !this.labelReplacing?.value
-      && isFilled(this.props.label)
-    ) {
-      return [this.props.label]
-    }
-
-    return []
-  }
-
-  /**
-   * Adds alternative label text if it exists
-   *
-   * Добавляет альтернативный текст метки, если он есть
-   */
-  protected initLabelReplacing(): any[] {
-    if (isFilled(this.labelReplacing?.value)) {
-      return [
-        render(
-          'span',
-          { innerHTML: this.labelReplacing.value },
-          undefined,
-          'highlight'
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Adds a slot for the label if it exists
-   *
-   * Добавляет слот для метки, если он есть
-   */
-  protected initSlot(): any[] {
-    if (this.slots) {
-      if (this.alternativeSlots) {
-        if ('label' in this.slots) {
-          return [this.slots.label?.({})]
-        }
-      } else if ('default' in this.slots) {
-        return [this.slots.default?.({})]
-      }
-    }
-
-    return []
-  }
-}