@dxtmisha/constructor 0.23.0

package/src/constructors/Ripple/props.ts

@@ -0,0 +1,28 @@
+interface RipplePropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface RipplePropsBasic {
+  disabled?: boolean
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface RippleProps extends RipplePropsBasic, RipplePropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsRipple = {
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Ripple/style.scss

@@ -0,0 +1,62 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinRipple {
+  overflow: hidden;
+  @include ui.absolute;
+  z-index: 24;
+
+  border-radius: inherit;
+
+  &__item {
+    @include ui.absolute;
+
+    @include ui.backgroundColor(
+                    ui.v('??sys.color', var(--sys-color, ui.v('??backgroundColor'))),
+                    ui.v('??backgroundOpacity', 1)
+    );
+  }
+
+  %ripple-end {
+    opacity: 0;
+
+    transition-delay: ui.v('d.sys.transitionDuration.fade.enter');
+    transition-duration: ui.v('d.sys.transitionDuration.fade.through');
+    transition-property: opacity;
+  }
+
+  &__item {
+    animation-duration: ui.v('d.sys.transitionDuration.fade.through');
+    animation-fill-mode: forwards;
+    animation-name: ui.n('??start');
+    animation-timing-function: linear;
+
+    &:not(:last-child) {
+      @include ui.state('end') {
+        @extend %ripple-end;
+      }
+    }
+  }
+
+  &:not(:active) {
+    @include ui.subclass('item') {
+      @include ui.state('end') {
+        @extend %ripple-end;
+      }
+    }
+  }
+
+  @keyframes #{ui.n('??start')} {
+    0% {
+      @include ui.gradientOpacity(0);
+      clip-path: circle(000% at ui.v('??sys.x') ui.v('??sys.y'));
+    }
+    50% {
+      @include ui.gradientOpacity(ui.v('??backgroundOpacity', 1));
+      clip-path: circle(075% at ui.v('??sys.x') ui.v('??sys.y'));
+    }
+    100% {
+      @include ui.gradientOpacity(ui.v('??backgroundOpacity', 1));
+      clip-path: circle(150% at ui.v('??sys.x') ui.v('??sys.y'));
+    }
+  }
+}

package/src/constructors/Ripple/types.ts

@@ -0,0 +1,41 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type RippleComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type RippleEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface RippleExpose {}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface RippleSlots {}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type RippleClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  item: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Scrollbar/Scrollbar.ts

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

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

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

@@ -0,0 +1,80 @@
+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/basicTypes.ts

@@ -0,0 +1,42 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { ScrollbarPropsBasic } from './props'
+import type { ScrollbarEmits } from './types'
+
+/**
+ * Type describing the edge position of the scrollbar/
+ * Тип, описывающий позицию края скроллбара
+ */
+export type ScrollbarEdgeType = 'top' | 'bottom'
+
+/**
+ * Interface for describing which components need to be connected for work/
+ * Интерфейс для описания, какие компоненты надо подключить для работы
+ */
+export type ScrollbarComponentsInclude = {
+  scrollbar?: object
+}
+
+/**
+ * Interface for describing available events with scrollbar prefix/
+ * Интерфейс для описания доступных событий с префиксом scrollbar
+ */
+export type ScrollbarEmitsInclude = {
+  scrollbarTop: ScrollbarEmits['top']
+  scrollbarReachTop: ScrollbarEmits['reachTop']
+  scrollbarLeaveTop: ScrollbarEmits['leaveTop']
+  scrollbarBottom: ScrollbarEmits['bottom']
+  scrollbarReachBottom: ScrollbarEmits['reachBottom']
+  scrollbarLeaveBottom: ScrollbarEmits['leaveBottom']
+  scrollbarEdge: ScrollbarEmits['edge']
+}
+
+/**
+ * Interface for describing available properties for scrollbar inclusion/
+ * Интерфейс для описания доступных свойств для включения скроллбара
+ */
+export interface ScrollbarPropsInclude<
+  Scrollbar extends ScrollbarPropsBasic = ScrollbarPropsBasic
+> {
+  scrollbarAttrs?: ConstrBind<Scrollbar>
+}

package/src/constructors/Scrollbar/index.ts

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