@dxtmisha/constructor 0.23.0

package/src/constructors/Scrollbar/properties.json

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

package/src/constructors/Scrollbar/props.ts

@@ -0,0 +1,37 @@
+interface ScrollbarPropsToken {
+  // :type [!] System label / Системная метка
+  visible?: boolean
+  divider?: boolean
+  dividerTop?: boolean
+  dividerBottom?: boolean
+  dividerHide?: boolean
+  inverse?: boolean
+  standard?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ScrollbarPropsBasic {
+  // Style
+  tag?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ScrollbarProps extends ScrollbarPropsBasic, ScrollbarPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsScrollbar = {
+  tag: 'div',
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Scrollbar/style.scss

@@ -0,0 +1,117 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinScrollbar {
+  $thisBorder: &;
+
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  -webkit-overflow-scrolling: touch;
+
+  &:not(#{ui.c('??-disabled')}, #{ui.c('??-standard')}) {
+    @-moz-document url-prefix() {
+      scrollbar-color: rgba(ui.v('??thumb.background'), ui.v('??thumb.opacity', .12)) ui.v('??background');
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      appearance: none;
+      width: ui.v('??size');
+      height: ui.v('??size');
+    }
+
+    &::-webkit-scrollbar-thumb {
+      @include ui.backgroundColor(ui.v('??thumb.background'), ui.v('??thumb.opacity'));
+      border: none;
+      border-radius: ui.v('??thumb.rounded');
+    }
+
+    &::-webkit-scrollbar-track {
+      @include ui.backgroundColor(ui.v('??background'), ui.v('??backgroundOpacity'));
+    }
+
+    &:hover {
+      @include ui.initByCustom('thumb.opacity', ui.v('??thumb.hover.opacity'));
+    }
+  }
+
+  &--divider,
+  &--dividerTop,
+  &--dividerBottom {
+    @include ui.initByCustom('sys.outline.top', 0);
+    @include ui.initByCustom('sys.outline.bottom', 0);
+    @include ui.initByCustom('sys.outline.opacity.top', ui.v('??sys.outline.top'));
+    @include ui.initByCustom('sys.outline.opacity.bottom', ui.v('??sys.outline.bottom'));
+
+    &::before,
+    &::after {
+      display: block;
+      position: sticky;
+      margin-left: ui.v('??sys.outline.marginX', 0);
+      margin-right: calc(#{ui.v('??sys.outline.marginX', 0)} - #{ui.v('??size', var(--sys-scrollbar-offset, 0))});
+
+      transition-property: border-color;
+      transition-duration: ui.v('d.sys.transitionDuration.standard');
+      transition-timing-function: linear;
+    }
+
+    &--top {
+      @include ui.initByCustom('sys.outline.top', #{ui.v('??outline.opacity')})
+    }
+
+    &--bottom {
+      @include ui.initByCustom('sys.outline.bottom', #{ui.v('??outline.opacity')})
+    }
+
+    @include ui.state('inverse') {
+      @include ui.initByCustom('sys.outline.opacity.top', ui.v('??sys.outline.bottom'));
+      @include ui.initByCustom('sys.outline.opacity.bottom', ui.v('??sys.outline.top'));
+
+      &#{$thisBorder}--divider--top#{$thisBorder}--divider--bottom {
+        @include ui.initByCustom('sys.outline.opacity.top', 0);
+        @include ui.initByCustom('sys.outline.opacity.bottom', 0);
+      }
+    }
+  }
+
+  &--divider,
+  &--dividerTop {
+    &::before {
+      top: 0;
+
+      content: " ";
+
+      border-top-style: solid;
+      border-top-width: ui.v('??sys.outline.width', ui.v('??outline.width'));
+      border-top-color: rgba(ui.v('??outline.color'), ui.v('??sys.outline.opacity.top'));
+    }
+  }
+
+  &--divider,
+  &--dividerBottom {
+    &::after {
+      bottom: 0;
+
+      content: " ";
+
+      border-bottom-style: solid;
+      border-bottom-width: ui.v('??sys.outline.width', ui.v('??outline.width'));
+      border-bottom-color: rgba(ui.v('??outline.color'), ui.v('??sys.outline.opacity.bottom'));
+    }
+  }
+
+  &--dividerHide {
+    &::before,
+    &::after {
+      content: none;
+    }
+  }
+
+  &--visible {
+    overflow-x: visible;
+    overflow-y: visible;
+
+    height: auto !important;
+  }
+}

package/src/constructors/Scrollbar/types.ts

@@ -0,0 +1,52 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+import type { ScrollbarEdgeType } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type ScrollbarComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type ScrollbarEmits = {
+  top: [isTop: boolean]
+  reachTop: []
+  leaveTop: []
+  bottom: [isBottom: boolean]
+  reachBottom: []
+  leaveBottom: []
+  edge: [isTop: boolean, isBottom: boolean, edge: ScrollbarEdgeType]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface ScrollbarExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface ScrollbarSlots {
+  default?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type ScrollbarClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Skeleton/Skeleton.ts

@@ -0,0 +1,86 @@
+import { computed, type ComputedRef, inject, provide, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import type { SkeletonClassesList } from './basicTypes'
+import type { SkeletonComponents, SkeletonEmits, SkeletonSlots } from './types'
+import type { SkeletonProps } from './props'
+
+import { SKELETON_NAME_STATUS } from './const'
+
+/**
+ * Skeleton
+ */
+export class Skeleton {
+  protected status?: ComputedRef<boolean>
+
+  /**
+   * Returns the list of available classes.
+   *
+   * Возвращает список доступных классов для текуший элемента.
+   */
+  readonly classes: SkeletonClassesList
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param refs input data in the form of reactive elements/ входные данные в виде реактивных элементов
+   * @param element input element/ элемент ввода
+   * @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: SkeletonProps,
+    protected readonly refs: ToRefs<SkeletonProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<SkeletonComponents, SkeletonProps>,
+    protected readonly slots?: SkeletonSlots,
+    protected readonly emits?: ConstrEmit<SkeletonEmits>
+  ) {
+    this.status = inject<ComputedRef<boolean> | undefined>(SKELETON_NAME_STATUS, undefined)
+    this.classes = Skeleton.getClassesList(this.className)
+
+    if (!this.status) {
+      provide(SKELETON_NAME_STATUS, this.isActive)
+    }
+  }
+
+  /**
+   * Checks if the loading mode is enabled.
+   *
+   * Проверяет, включен ли режим загрузки.
+   */
+  readonly isActive = computed<boolean>(() => Boolean(this.status?.value || this.props.active))
+
+  /**
+   * Returns the list of available classes.
+   *
+   * Возвращает список доступных классов.
+   * @param className class name/ название класса
+   */
+  static getClassesList(className: string): SkeletonClassesList {
+    return {
+      classText: `${className}__text`,
+      classTextVariant: `${className}__textVariant`,
+      classBackground: `${className}__background`,
+      classBackgroundAfter: `${className}__backgroundAfter`,
+      classBackgroundBefore: `${className}__backgroundBefore`,
+      classBackgroundVariant: `${className}__backgroundVariant`,
+      classBorder: `${className}__border`,
+      classBorderVariant: `${className}__borderVariant`,
+      classNone: `${className}__none`
+    }
+  }
+
+  /**
+   * Returns a list of available classes by design name.
+   *
+   * Возвращает список доступных классов по названию дизайна.
+   * @param design design name/ названия дизайна
+   */
+  static getClassesListByDesign(design: string): SkeletonClassesList {
+    return this.getClassesList(`${design}-skeleton`)
+  }
+}

package/src/constructors/Skeleton/SkeletonDesign.tsx

@@ -0,0 +1,117 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Skeleton } from './Skeleton'
+
+import {
+  type SkeletonPropsBasic
+} from './props'
+import {
+  type SkeletonClasses,
+  type SkeletonComponents,
+  type SkeletonEmits,
+  type SkeletonExpose,
+  type SkeletonSlots
+} from './types'
+
+/**
+ * SkeletonDesign
+ */
+export class SkeletonDesign<
+  COMP extends SkeletonComponents,
+  EXPOSE extends SkeletonExpose,
+  CLASSES extends SkeletonClasses,
+  P extends SkeletonPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    SkeletonEmits,
+    EXPOSE,
+    SkeletonSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Skeleton
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, SkeletonEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Skeleton(
+      this.props,
+      this.refs,
+      this.element,
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Initialization of all the necessary properties for work<br>
+   * Инициализация всех необходимых свойств для работы.
+   */
+  protected initExpose(): EXPOSE {
+    return {
+      isActive: this.item.isActive
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.<br>
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.<br>
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.<br>
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    const children: any[] = []
+
+    this.initSlot('default', children, this.item.classes)
+
+    return h('div', {
+      ...this.getAttrs(),
+      ref: this.element,
+      class: this.classes?.value.main
+    }, children)
+  }
+}

package/src/constructors/Skeleton/SkeletonInclude.ts

@@ -0,0 +1,61 @@
+import { computed, type ComputedRef, inject } from 'vue'
+import type { ConstrClassObject } from '@dxtmisha/functional'
+
+import { Skeleton } from './Skeleton'
+import type { SkeletonClassesList, SkeletonPropsInclude } from './basicTypes'
+
+import { SKELETON_NAME_STATUS } from './const'
+
+/**
+ * Класс для подключения и работы с компонентом Skeleton.
+ *
+ * A class for connecting to and working with the Skeleton component.
+ */
+export class SkeletonInclude {
+  /**
+   * Skeleton display states/ Состояния отображения Skeleton
+   */
+  protected readonly status = inject<ComputedRef<boolean> | undefined>(SKELETON_NAME_STATUS, undefined)
+
+  /**
+   * A list of available classes for the Skeleton/ Список доступных классов для Skeleton
+   */
+  readonly classesSkeleton: SkeletonClassesList
+
+  /**
+   * Constructor
+   * @param props input data/ входные данные
+   * @param classDesign design name/ название дизайна
+   * @param classesList list of available classes/ список доступных классов
+   */
+  constructor(
+    protected readonly props: SkeletonPropsInclude,
+    classDesign: string,
+    protected readonly classesList?: (keyof SkeletonClassesList)[]
+  ) {
+    this.classesSkeleton = Skeleton.getClassesListByDesign(classDesign)
+  }
+
+  /**
+   * Indicates whether the Skeleton status is enabled/ Указывает, включён ли статус Skeleton
+   */
+  readonly isSkeleton = computed<boolean>(() => Boolean(this.status && this.status.value))
+
+  /**
+   * Returns the available list for the skeleton/ Возвращает доступный список для скелетона
+   */
+  readonly classes = computed<ConstrClassObject>(() => {
+    const classes: ConstrClassObject = {}
+
+    if (
+      this.classesList
+      && this.props.isSkeleton
+    ) {
+      this.classesList.forEach((className) => {
+        classes[this.classesSkeleton[className]] = true
+      })
+    }
+
+    return classes
+  })
+}

package/src/constructors/Skeleton/basicTypes.ts

@@ -0,0 +1,16 @@
+export type SkeletonClassesList = {
+  classText: string
+  classTextVariant: string
+  classBackground: string
+  classBackgroundAfter: string
+  classBackgroundBefore: string
+  classBackgroundVariant: string
+  classBorder: string
+  classBorderVariant: string
+  classNone: string
+}
+
+export interface SkeletonPropsInclude {
+  // Style
+  isSkeleton?: boolean
+}

package/src/constructors/Skeleton/const.ts

@@ -0,0 +1 @@
+export const SKELETON_NAME_STATUS = 'skeleton-status'

package/src/constructors/Skeleton/index.ts

@@ -0,0 +1,6 @@
+export * from './Skeleton'
+export * from './SkeletonDesign'
+export * from './SkeletonInclude'
+export * from './basicTypes'
+export * from './props'
+export * from './types'

package/src/constructors/Skeleton/properties.json

@@ -0,0 +1,24 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "opacity": {
+    "_type": "var"
+  },
+  "~active": {}
+}

package/src/constructors/Skeleton/props.ts

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

package/src/constructors/Skeleton/style.scss

@@ -0,0 +1,112 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSkeletonText {
+  text-decoration-line: line-through !important;
+  text-decoration-thickness: calc(var(--sys-font-size) * .64) !important;
+  text-decoration-skip: #{spaces} !important;
+  -webkit-text-decoration-skip: spaces !important;
+
+  --sys-color: #{ui.v('??color')} !important;
+  --sys-color-opacity: #{ui.v('??colorOpacity', 1)} !important;
+}
+
+@mixin mixinSkeleton {
+  $this: &;
+
+  @include ui.initByCustom('opacity', .32);
+  @include ui.initByCustom('animation', #{ui.n('??animationType1') ui.v('d.ref.transitionFunction.linear') 2.4s infinite});
+
+  &--active {
+    animation: ui.v('??animation');
+
+    @include ui.absoluteAfter {
+      z-index: 999999;
+    }
+
+    *,
+    *::before,
+    *::after,
+    *::placeholder {
+      color: transparent !important;
+      background: transparent !important;
+      border-color: transparent !important;
+
+      box-shadow: none !important;
+    }
+
+    svg {
+      opacity: 0;
+      filter: opacity(0);
+    }
+
+    @include ui.subclass('text') {
+      @include mixinSkeletonText;
+      @include ui.color(ui.v('??color'), ui.v('??colorOpacity'), true, 'text-decoration-color');
+    }
+
+    @include ui.subclass('textVariant') {
+      @include mixinSkeletonText;
+      @include ui.color(ui.v('??backgroundColor'), ui.v('??backgroundOpacity'), true, 'text-decoration-color');
+    }
+
+    @include ui.subclass('background') {
+      @include ui.backgroundColor(ui.v('??backgroundColor'), ui.v('??backgroundOpacity', 1), true);
+    }
+
+    @include ui.subclass('backgroundAfter') {
+      &:after {
+        @include ui.backgroundColor(ui.v('??backgroundColor'), ui.v('??backgroundOpacity', 1), true);
+      }
+    }
+
+    @include ui.subclass('backgroundBefore') {
+      &:before {
+        @include ui.backgroundColor(ui.v('??backgroundColor'), ui.v('??backgroundOpacity', 1), true);
+      }
+    }
+
+    @include ui.subclass('backgroundVariant') {
+      @include ui.backgroundColor(ui.v('??color'), ui.v('??colorOpacity', 1), true);
+    }
+
+    @include ui.subclass('border') {
+      @include ui.borderColor(ui.v('??borderColor'), ui.v('??borderOpacity', 1), true);
+    }
+
+    @include ui.subclass('borderVariant') {
+      @include ui.borderColor(ui.v('??color'), ui.v('??colorOpacity', 1), true);
+    }
+
+    @include ui.subclass('none') {
+      color: transparent !important;
+      text-decoration-thickness: 0 !important;
+      background: transparent !important;
+      border-color: transparent !important;
+
+      * {
+        color: transparent !important;
+        text-decoration-thickness: 0 !important;
+        background: transparent !important;
+        border-color: transparent !important;
+      }
+    }
+  }
+
+  @keyframes #{ui.n('??animationType1')} {
+    0% {
+      opacity: 1;
+    }
+    10% {
+      opacity: 1;
+    }
+    50% {
+      opacity: ui.v('??opacity');
+    }
+    90% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}