@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Ripple/RippleInclude.ts

@@ -1,39 +0,0 @@
-import type { VNode } from 'vue'
-import { DesignComponents } from '@dxtmisha/functional'
-
-import { EnabledInclude } from '../../classes/EnabledInclude'
-
-import type { RippleComponentsInclude } from './basicTypes'
-import type { RipplePropsBasic } from './props'
-
-export class RippleInclude {
-  constructor(
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<RippleComponentsInclude, RipplePropsBasic>,
-    protected readonly enabled?: EnabledInclude
-  ) {
-  }
-
-  /**
-   * Render Ripple
-   *
-   * Рендер Ripple
-   */
-  readonly render = (): VNode[] => {
-    if (
-      this.components
-      && this.components.is('ripple')
-      && (
-        !this.enabled
-        || this.enabled.isEnabled.value
-      )
-    ) {
-      return this.components.render(
-        'ripple',
-        { class: `${this.className}__ripple` }
-      )
-    }
-
-    return []
-  }
-}

package/src/constructors/Ripple/RippleItem.ts

@@ -1,62 +0,0 @@
-import { type Ref } from 'vue'
-import { createElement } from '@dxtmisha/functional'
-
-import type { RippleProps } from './props'
-
-/**
- * Class for managing the effect element.
- *
- * Класс для управления элементом эффекта.
- */
-export class RippleItem {
-  protected readonly classItem: string
-  protected readonly classEnd: string
-
-  protected readonly styleX: string
-  protected readonly styleY: string
-
-  /**
-   * Constructor
-   * @param props input data/ входные данные
-   * @param element image element for scaling/ элемент изображения для масштабирования
-   * @param className list of available classes/ список доступных классов
-   */
-
-  constructor(
-    protected readonly props: RippleProps,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly className: string
-  ) {
-    this.classItem = `${this.className}__item`
-    this.classEnd = `${this.className}--end`
-
-    this.styleX = `--${this.className}-sys-x`
-    this.styleY = `--${this.className}-sys-y`
-  }
-
-  /**
-   * Adding a new light element.
-   *
-   * Добавление нового элемента свечения.
-   * @param x x-coordinate/ x-координата
-   * @param y y-coordinate/ y-координата
-   */
-  add(x: number, y: number): void {
-    if (this.props?.disabled) {
-      return
-    }
-
-    const element = this.element.value
-
-    if (element) {
-      createElement<HTMLSpanElement>(element, 'span', (item) => {
-        item.onanimationend = () => item.classList.add(this.classEnd)
-        item.ontransitionend = () => item.parentElement?.removeChild(item)
-
-        item.style.setProperty(this.styleX, `${x}px`)
-        item.style.setProperty(this.styleY, `${y}px`)
-        item.classList.add(this.classItem)
-      })
-    }
-  }
-}

package/src/constructors/Ripple/index.ts

@@ -1,6 +0,0 @@
-export * from './Ripple'
-export * from './RippleDesign'
-export * from './RippleInclude'
-export * from './props'
-export * from './types'
-export * from './basicTypes'

package/src/constructors/Ripple/properties.json

@@ -1,9 +0,0 @@
-{
-  "background-color": {
-    "_type": "var"
-  },
-  "background-opacity": {
-    "_type": "var"
-  },
-  "#item": {}
-}

package/src/constructors/Scrollbar/Scrollbar.ts

@@ -1,66 +0,0 @@
-import { computed, type Ref, type ToRefs } from 'vue'
-import {
-  type ConstrClassObject,
-  type ConstrEmit,
-  type DesignComp,
-  ScrollbarWidth
-} from '@dxtmisha/functional'
-
-import { ScrollbarBorder } from './ScrollbarBorder'
-
-import type { ScrollbarComponents, ScrollbarEmits, ScrollbarSlots } from './types'
-import type { ScrollbarPropsBasic } from './props'
-
-/**
- * Scrollbar class provides functionality for managing scrollbar behavior and appearance.
- * It handles scroll width calculations and border display based on scroll position.
- *
- * Класс Scrollbar предоставляет функциональность для управления поведением и внешним видом полосы прокрутки.
- * Он обрабатывает вычисления ширины скролла и отображение границ на основе позиции скролла.
- */
-export class Scrollbar {
-  readonly width: ScrollbarWidth
-  readonly border: ScrollbarBorder
-
-  /**
-   * Constructor for Scrollbar class.
-   *
-   * Конструктор класса Scrollbar.
-   * @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: ScrollbarPropsBasic,
-    protected readonly refs: ToRefs<ScrollbarPropsBasic>,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<ScrollbarComponents, ScrollbarPropsBasic>,
-    protected readonly slots?: ScrollbarSlots,
-    protected readonly emits?: ConstrEmit<ScrollbarEmits>
-  ) {
-    this.width = new ScrollbarWidth()
-    this.border = new ScrollbarBorder(
-      props,
-      refs,
-      element as any,
-      className,
-      emits
-    )
-  }
-
-  /**
-   * Returns values for the class.
-   *
-   * Возвращает значения для класса.
-   */
-  readonly classes = computed<ConstrClassObject>(() => ({
-    [`${this.className}--disabled`]: Boolean(this.width.item.value)
-  }))
-}

package/src/constructors/Scrollbar/ScrollbarBorder.ts

@@ -1,243 +0,0 @@
-import { onUnmounted, type ToRefs, watch } from 'vue'
-import {
-  type ConstrEmit,
-  type ConstrValue,
-  EventItem
-} from '@dxtmisha/functional'
-
-import type { ScrollbarProps } from './props'
-import type { ScrollbarEmits } from './types'
-
-const SCROLLBAR_SHIFT = 8
-
-/**
- * ScrollbarBorder class provides functionality for updating scroll position and displaying borders.
- * It monitors scroll events and manages visual feedback for top and bottom scroll boundaries.
- *
- * Класс ScrollbarBorder предоставляет функциональность для обновления положения скролла и отображения границ.
- * Он отслеживает события скролла и управляет визуальной обратной связью для верхней и нижней границ скролла.
- */
-export class ScrollbarBorder {
-  private event?: EventItem<HTMLDivElement, Event, any>
-  private eventSub?: EventItem<HTMLDivElement, Event, any>
-
-  /**
-   * Top boundary state/ состояние верхней границы
-   */
-  private top: boolean = false
-
-  /**
-   * Bottom boundary state/ состояние нижней границы
-   */
-  private bottom: boolean = false
-
-  /**
-   * Constructor for ScrollbarBorder class.
-   *
-   * Конструктор класса ScrollbarBorder.
-   * @param props properties/ свойства
-   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
-   * @param element input element/ элемент ввода
-   * @param className class name/ название класса
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: ScrollbarProps,
-    refs: ToRefs<ScrollbarProps>,
-    protected readonly element: ConstrValue<HTMLDivElement>,
-    protected readonly className: string,
-    protected readonly emits?: ConstrEmit<ScrollbarEmits>
-  ) {
-    watch([
-      this.element,
-      refs.divider,
-      refs.dividerTop,
-      refs.dividerBottom,
-      refs.inverse
-    ], this.reset, { immediate: true })
-
-    onUnmounted(() => this.stop())
-  }
-
-  /**
-   * Changing the monitoring status depending on the border parameter.
-   *
-   * Изменение статуса слежения в зависимости от параметра border.
-   */
-  readonly toggle = (): void => {
-    if (
-      this.props.divider
-      || this.props.dividerTop
-      || this.props.dividerBottom
-    ) {
-      this.start()
-    } else {
-      this.stop()
-    }
-  }
-
-  /**
-   * Updating the monitoring element for the event object.
-   *
-   * Обновление элемента слежения для объекта события.
-   */
-  readonly reset = (): void => {
-    if (this.element.value) {
-      if (this.event) {
-        this.event.setElement(this.element.value)
-
-        if (
-          this.eventSub
-          && this.element.value.children?.[0]
-        ) {
-          this.eventSub.setElement(this.element.value.children[0] as HTMLDivElement)
-        }
-      }
-
-      this.toggle()
-      this.update()
-    } else {
-      this.stop()
-    }
-  }
-
-  /**
-   * Start monitoring the scroll.
-   *
-   * Начать слежение за скроллом.
-   */
-  start(): void {
-    if (this.event) {
-      this.event.start()
-    } else {
-      this.event = new EventItem<HTMLDivElement, Event>(this.element.value, ['scroll-sync'], this.on)
-        .start()
-    }
-
-    if (this.eventSub) {
-      this.eventSub.start()
-    } else if (
-      this.element.value?.children?.[0]
-    ) {
-      this.eventSub = new EventItem<HTMLDivElement, Event>(this.element.value.children[0] as HTMLDivElement, ['resize'], this.on)
-        .start()
-    }
-
-    this.on()
-  }
-
-  /**
-   * Stopping the monitoring of scroll changes.
-   *
-   * Остановка слежения за изменениями скролла.
-   */
-  stop(): void {
-    if (this.event) {
-      this.event.stop()
-      this.event = undefined
-    }
-
-    if (this.eventSub) {
-      this.eventSub.stop()
-      this.eventSub = undefined
-    }
-  }
-
-  /**
-   * Updates the list of active classes.
-   *
-   * Обновляет список активных классов.
-   */
-  protected readonly update = () => {
-    const element = this.element.value
-
-    if (element) {
-      element.classList.toggle(`${this.className}--divider--top`, this.top)
-      element.classList.toggle(`${this.className}--divider--bottom`, this.bottom)
-      element.dataset.scrollbarDivider = this.top || this.bottom ? 'divider' : 'none'
-    }
-  }
-
-  /**
-   * Function for the event of monitoring scroll changes.
-   *
-   * Функция для события слежения за изменениями скролла.
-   */
-  protected readonly on = (): void => {
-    const element = this.element.value
-
-    if (element) {
-      this.setData(
-        element.scrollTop > SCROLLBAR_SHIFT,
-        element.scrollTop < element.scrollHeight - element.clientHeight - SCROLLBAR_SHIFT
-      )
-    }
-  }
-
-  /**
-   * Changing the data for class output.
-   *
-   * Изменение данных для вывода класса.
-   * @param top status of the top border display/ статус отображения верхнего бордера
-   * @param bottom status of the bottom border display/ статус отображения нижнего бордера
-   */
-  protected setData(
-    top: boolean,
-    bottom: boolean
-  ): this {
-    if (
-      this.top !== top
-      || this.bottom !== bottom
-    ) {
-      this.setTop(top)
-        .setBottom(bottom)
-        .update()
-    }
-
-    return this
-  }
-
-  /**
-   * Sets the top boundary state and emits related events.
-   *
-   * Устанавливает состояние верхней границы и генерирует связанные события.
-   * @param top status of the top border display/ статус отображения верхнего бордера
-   */
-  private setTop(top: boolean): this {
-    if (this.top !== top) {
-      this.top = top
-
-      this.emits?.('top', top)
-      this.emits?.('edge', top, this.bottom, 'top')
-
-      if (top) {
-        this.emits?.('reachTop')
-      } else {
-        this.emits?.('leaveTop')
-      }
-    }
-    return this
-  }
-
-  /**
-   * Sets the bottom boundary state and emits related events.
-   *
-   * Устанавливает состояние нижней границы и генерирует связанные события.
-   * @param bottom status of the bottom border display/ статус отображения нижнего бордера
-   */
-  private setBottom(bottom: boolean): this {
-    if (this.bottom !== bottom) {
-      this.bottom = bottom
-
-      this.emits?.('bottom', bottom)
-      this.emits?.('edge', this.top, bottom, 'bottom')
-
-      if (bottom) {
-        this.emits?.('reachBottom')
-      } else {
-        this.emits?.('leaveBottom')
-      }
-    }
-    return this
-  }
-}

package/src/constructors/Scrollbar/ScrollbarDesign.tsx

@@ -1,126 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { Scrollbar } from './Scrollbar'
-
-import {
-  type ScrollbarPropsBasic
-} from './props'
-import {
-  type ScrollbarClasses,
-  type ScrollbarComponents,
-  type ScrollbarEmits,
-  type ScrollbarExpose,
-  type ScrollbarSlots
-} from './types'
-
-/**
- * ScrollbarDesign
- */
-export class ScrollbarDesign<
-  COMP extends ScrollbarComponents,
-  EXPOSE extends ScrollbarExpose,
-  CLASSES extends ScrollbarClasses,
-  P extends ScrollbarPropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    ScrollbarEmits,
-    EXPOSE,
-    ScrollbarSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Scrollbar
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, ScrollbarEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Scrollbar(
-      this.props,
-      this.refs,
-      this.element,
-      this.getDesign(),
-      this.getName(),
-      this.components,
-      this.slots,
-      this.emits
-    )
-
-    this.init()
-  }
-
-  /**
-   * Initialization of all the necessary properties for work
-   *
-   * Инициализация всех необходимых свойств для работы.
-   */
-  protected initExpose(): EXPOSE {
-    return {} as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  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.
-   *
-   * Доработка полученного списка стилей.
-   */
-  protected initStyles(): ConstrStyles {
-    return {}
-  }
-
-  /**
-   * A method for rendering.
-   *
-   * Метод для рендеринга.
-   */
-  protected initRender(): VNode | undefined {
-    const children: any[] = [this.initSlot('default')]
-
-    if (this.item.width.is.value) {
-      return h(
-        this.props.tag ?? 'div',
-        {
-          ...this.getAttrs(),
-          ref: this.element,
-          class: this.classes?.value.main
-        },
-        children
-      )
-    }
-
-    return undefined
-  }
-}

package/src/constructors/Scrollbar/ScrollbarInclude.ts

@@ -1,80 +0,0 @@
-import { h, type VNode } from 'vue'
-import { type ConstrEmit, DesignComponents, toBind } from '@dxtmisha/functional'
-
-import type { ScrollbarComponentsInclude, ScrollbarEmitsInclude, ScrollbarPropsInclude, ScrollbarEdgeType } from './basicTypes'
-
-/**
- * ScrollbarInclude class provides functionality for conditionally rendering scrollbar components
- * within other components. It manages the logic for determining when to display a scrollbar
- * and configures the appropriate properties.
- *
- * Класс ScrollbarInclude предоставляет функциональность для условного рендеринга компонентов
- * скроллбара внутри других компонентов. Он управляет логикой определения необходимости
- * отображения скроллбара и настраивает соответствующие свойства.
- *
- * @template Props - Properties interface extending ScrollbarPropsInclude
- */
-export class ScrollbarInclude<Props extends ScrollbarPropsInclude = ScrollbarPropsInclude> {
-  /**
-   * Constructor
-   * @param props input parameter/ входной параметр
-   * @param className class name/ название класса
-   * @param components object for working with components/ объект для работы с компонентами
-   * @param emits the function is called when an event is triggered/ функция вызывается, когда срабатывает событие
-   */
-  constructor(
-    protected readonly props: Readonly<Props>,
-    protected readonly className: string,
-    protected readonly components?: DesignComponents<ScrollbarComponentsInclude, Props>,
-    protected readonly emits?: ConstrEmit<ScrollbarEmitsInclude>
-  ) {
-  }
-
-  /**
-   * Renders scrollbar component or fallback element
-   * Рендерит компонент скроллбара или элемент по умолчанию
-   */
-  render(
-    tag: string,
-    props?: Record<string, any>,
-    children?: any
-  ): VNode[] {
-    if (this.components) {
-      const scrollbar = this.components.renderOne(
-        'scrollbar',
-        toBind(
-          {
-            tag,
-            class: `${this.className}__scrollbar`,
-            ...(props ?? {}),
-            ...this.getScrollbarEvents()
-          },
-          this.props.scrollbarAttrs ?? {}
-        ),
-        children
-      )
-
-      if (scrollbar) {
-        return [scrollbar]
-      }
-    }
-
-    return [h(tag, props, children)]
-  }
-
-  /**
-   * Returns event handlers for scrollbar
-   * Возвращает обработчики событий для скроллбара
-   */
-  protected getScrollbarEvents() {
-    return {
-      onTop: (isTop: boolean) => this.emits?.('scrollbarTop', isTop),
-      onReachTop: () => this.emits?.('scrollbarReachTop'),
-      onLeaveTop: () => this.emits?.('scrollbarLeaveTop'),
-      onBottom: (isBottom: boolean) => this.emits?.('scrollbarBottom', isBottom),
-      onReachBottom: () => this.emits?.('scrollbarReachBottom'),
-      onLeaveBottom: () => this.emits?.('scrollbarLeaveBottom'),
-      onEdge: (isTop: boolean, isBottom: boolean, edge: ScrollbarEdgeType) => this.emits?.('scrollbarEdge', isTop, isBottom, edge)
-    }
-  }
-}

package/src/constructors/Scrollbar/index.ts

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

package/src/constructors/Scrollbar/properties.json

@@ -1,33 +0,0 @@
-{
-  "size": {
-    "_type": "var"
-  },
-  "background": {
-    "_type": "var"
-  },
-  "backgroundOpacity": {
-    "_type": "var"
-  },
-  "thumb": {
-    "background": {},
-    "opacity": {},
-    "rounded": {},
-    "hover": {
-      "opacity": {}
-    },
-    "_type": "var"
-  },
-  "outline": {
-    "width": {},
-    "color": {},
-    "opacity": {},
-    "_type": "var"
-  },
-  "~visible": {},
-  "~divider": {},
-  "~divider-top": {},
-  "~divider-bottom": {},
-  "~divider-hide": {},
-  "~inverse": {},
-  "~standard": {}
-}