@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Ripple/Ripple.ts

@@ -27,7 +27,7 @@ export class Ripple {
   constructor(
     protected readonly props: RippleProps,
     protected readonly refs: ToRefs<RippleProps>,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
+    protected readonly element: Ref<HTMLSpanElement | undefined>,
     protected readonly className: string,
     protected readonly components?: DesignComp<RippleComponents, RippleProps>,
     protected readonly slots?: RippleSlots,

package/src/constructors/Ripple/RippleDesign.tsx

@@ -5,6 +5,7 @@ import {
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Ripple } from './Ripple'
 
 import {
@@ -27,7 +28,7 @@ export class RippleDesign<
   CLASSES extends RippleClasses,
   P extends RipplePropsBasic
 > extends DesignConstructorAbstract<
-    HTMLDivElement,
+    HTMLSpanElement,
     COMP,
     RippleEmits,
     EXPOSE,
@@ -99,14 +100,16 @@ export class RippleDesign<
   }
 
   /**
-   * A method for rendering.<br>
+   * A method for rendering.
    * Метод для рендеринга.
    */
   protected initRender(): VNode {
-    return h('div', {
+    return h('span', {
       ref: this.element,
+      key: 'ripple',
       class: this.classes?.value.main,
-      onMousedown: this.item.onClick
+      onPointerdown: this.item.onClick,
+      ...AriaStaticInclude.hidden()
     })
   }
 }

package/src/constructors/Ripple/RippleItem.ts

@@ -24,7 +24,7 @@ export class RippleItem {
 
   constructor(
     protected readonly props: RippleProps,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
+    protected readonly element: Ref<HTMLSpanElement | undefined>,
     protected readonly className: string
   ) {
     this.classItem = `${this.className}__item`

package/src/constructors/Ripple/style.scss

@@ -7,6 +7,10 @@
 
   border-radius: inherit;
 
+  @include ui.mediaPrefersReducedMotion {
+    display: none;
+  }
+
   &__item {
     @include ui.absolute;
 

package/src/constructors/Ripple/types.ts

@@ -35,7 +35,7 @@ export interface RippleSlots {}
  */
 export type RippleClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  item: string
+  // :classes [!] System label / Системная метка
+  item: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Scrollbar/Scrollbar.ts

@@ -3,7 +3,7 @@ import {
   type ConstrClassObject,
   type ConstrEmit,
   type DesignComp,
-  ScrollbarWidth
+  ScrollbarWidthRef
 } from '@dxtmisha/functional'
 
 import { ScrollbarBorder } from './ScrollbarBorder'
@@ -19,7 +19,7 @@ import type { ScrollbarPropsBasic } from './props'
  * Он обрабатывает вычисления ширины скролла и отображение границ на основе позиции скролла.
  */
 export class Scrollbar {
-  readonly width: ScrollbarWidth
+  readonly width: ScrollbarWidthRef
   readonly border: ScrollbarBorder
 
   /**
@@ -45,7 +45,7 @@ export class Scrollbar {
     protected readonly slots?: ScrollbarSlots,
     protected readonly emits?: ConstrEmit<ScrollbarEmits>
   ) {
-    this.width = new ScrollbarWidth()
+    this.width = new ScrollbarWidthRef()
     this.border = new ScrollbarBorder(
       props,
       refs,

package/src/constructors/Scrollbar/ScrollbarDesign.tsx

@@ -86,7 +86,7 @@ export class ScrollbarDesign<
     return {
       main: this.item.classes.value,
       ...{
-        // :classes [!] System label / Системная метка
+        // :classes [!] System label / Системная метка
         // :classes [!] System label / Системная метка
       }
     } as Partial<CLASSES>

package/src/constructors/Scrollbar/properties.json

@@ -1,33 +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": {}
-}
+{
+  "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/types.ts

@@ -47,6 +47,6 @@ export interface ScrollbarSlots {
  */
 export type ScrollbarClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Section/Section.ts

@@ -0,0 +1,33 @@
+import type { Ref, ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import type { SectionComponents, SectionEmits, SectionSlots } from './types'
+import type { SectionProps } from './props'
+
+/**
+ * Section
+ */
+export class Section {
+  /**
+   * 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: SectionProps,
+    protected readonly refs: ToRefs<SectionProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<SectionComponents, SectionProps>,
+    protected readonly slots?: SectionSlots,
+    protected readonly emits?: ConstrEmit<SectionEmits>
+  ) {
+  }
+}

package/src/constructors/Section/SectionDesign.tsx

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

package/src/constructors/Section/index.ts

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

package/src/constructors/Section/properties.json

@@ -0,0 +1,2 @@
+{
+}

package/src/constructors/Section/props.ts

@@ -0,0 +1,29 @@
+interface SectionPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface SectionPropsBasic {
+  // TODO: Location for a custom property / Место для пользовательского свойства
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface SectionProps extends SectionPropsBasic, SectionPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsSection = {
+  // TODO: Location for a user-defined default value / Место для пользовательского значения по умолчанию
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Section/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSection {
+
+}

package/src/constructors/Section/types.ts

@@ -0,0 +1,47 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type SectionComponents = {
+  // componentName: object
+}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type SectionEmits = {
+  // load: [value: string]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface SectionExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface SectionSlots {
+  // default? (props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type SectionClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Select/Select.ts

@@ -0,0 +1,172 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp, executeFunction, isFilled } from '@dxtmisha/functional'
+
+import { FieldElementInclude } from '../../classes/field/FieldElementInclude'
+import { FieldChangeInclude } from '../../classes/field/FieldChangeInclude'
+import { FieldValueInclude } from '../../classes/field/FieldValueInclude'
+import { FieldCodeInclude } from '../../classes/field/FieldCodeInclude'
+import { FieldValidationInclude } from '../../classes/field/FieldValidationInclude'
+import { FieldAttributesInclude } from '../../classes/field/FieldAttributesInclude'
+import { FieldEventInclude } from '../../classes/field/FieldEventInclude'
+
+import { MenuInclude } from '../Menu'
+import { FieldInclude } from '../Field/FieldInclude'
+
+import { SelectInput } from './SelectInput'
+import { SelectFilter } from './SelectFilter'
+
+import type { SelectComponents, SelectEmits, SelectSlots } from './types'
+import type { SelectProps } from './props'
+import type { IconValue } from '../Icon'
+
+/**
+ * Select
+ */
+export class Select {
+  readonly attributes: FieldAttributesInclude
+
+  readonly elementItem: FieldElementInclude
+  readonly change: FieldChangeInclude
+
+  readonly value: FieldValueInclude
+
+  readonly code: FieldCodeInclude
+  readonly validation: FieldValidationInclude
+  readonly event: FieldEventInclude
+
+  readonly field: FieldInclude
+  readonly menu: MenuInclude
+  readonly input: SelectInput
+
+  readonly filter: SelectFilter
+
+  /**
+   * 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: SelectProps,
+    protected readonly refs: ToRefs<SelectProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<SelectComponents, SelectProps>,
+    protected readonly slots?: SelectSlots,
+    protected readonly emits?: ConstrEmit<SelectEmits>
+  ) {
+    this.attributes = new FieldAttributesInclude(this.props)
+
+    this.change = new FieldChangeInclude(this.props)
+    this.elementItem = new FieldElementInclude(
+      this.props,
+      this.element
+    )
+
+    this.value = new FieldValueInclude(
+      this.props,
+      this.refs,
+      this.elementItem
+    )
+
+    this.code = new FieldCodeInclude(this.props)
+    this.validation = new FieldValidationInclude(
+      this.props,
+      this.attributes,
+      this.value,
+      this.change,
+      this.code
+    )
+    this.event = new FieldEventInclude(
+      this.props,
+      this.change,
+      this.value,
+      this.validation,
+      this.emits
+    )
+
+    this.field = new FieldInclude(
+      this.props,
+      this.value,
+      this.components,
+      this.event,
+      undefined,
+      undefined,
+      () => this.menu.getElement()?.toggle,
+      () => this.menu.getElement()?.next(),
+      () => this.menu.getElement()?.previous(),
+      computed(() => ({
+        iconTrailing: this.iconTrailing.value,
+        maxlength: this.props.max,
+        cancel: this.props.cancel ?? (this.props.multiple ? 'auto' : 'none')
+      }))
+    )
+    this.menu = new MenuInclude(
+      this.props,
+      this.className,
+      this.components,
+      computed(() => ({
+        windowAttrs: {
+          hide: !isFilled(props.option) && !this.isSlot.value,
+          widthMatch: true
+        },
+        tag: 'span',
+        barsLabel: props.label,
+        barsDescription: props.helperMessage,
+        disabled: props.disabled || props.readonly,
+        autoClose: !props.multiple,
+        list: executeFunction(props.option),
+        max: this.props.max,
+        filterMode: this.props.filterMode,
+        hideList: props.hideList,
+        onClick: this.event.onSelect,
+        onClickSlot: this.onClick,
+        onUpdateValue: this.isArrow() ? this.event.onValue : undefined,
+        isSelectedByValue: true,
+        roleItem: this.props.multiple ? 'menuitemcheckbox' : 'menuitemradio'
+      }))
+    )
+    this.input = new SelectInput(this.props, this.attributes, this.value, this.event)
+
+    this.filter = new SelectFilter()
+  }
+
+  /** Checks whether there are slots for context areas/ Проверяет, есть ли слоты для контекстных областей */
+  protected readonly isSlot = computed<boolean>(() => {
+    return Boolean(
+      this.slots?.contextTop
+      || this.slots?.contextBottom
+    )
+  })
+
+  /** Computes the trailing icon value/ Вычисляет значение иконки трейлинга */
+  protected readonly iconTrailing = computed<IconValue | undefined>(() => {
+    if (!this.props.disabled && !this.isArrow()) {
+      return this.props.iconTrailing ?? this.props.iconArrowDown
+    }
+
+    return undefined
+  })
+
+  /** Handles click on option in slot/ Обрабатывает клик по опции в слоте */
+  protected readonly onClick = (value?: string) => {
+    if (value) {
+      this.value.set(value)
+    }
+  }
+
+  /**
+   * Checks whether arrow is set.
+   *
+   * Проверяет, установлена ли стрелка.
+   */
+  protected isArrow(): boolean {
+    return Boolean(this.props.arrow) && this.props.arrow !== 'none'
+  }
+}