@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/classes/field/FieldTypeInclude.ts

@@ -2,7 +2,7 @@ import { computed } from 'vue'
 
 import { FieldVisibilityInclude } from './FieldVisibilityInclude'
 
-import type { FieldAllProps } from '../../types/fieldTypes'
+import type { FieldAllProps, FieldType } from '../../types/fieldTypes'
 
 /**
  * Class for working with the input type.
@@ -23,11 +23,7 @@ export class FieldTypeInclude {
   }
 
   /** Returns the input type/ Возвращает тип ввода */
-  readonly item = computed<string>(() => {
-    if (this.props.arrow) {
-      return 'number'
-    }
-
+  readonly item = computed<FieldType>(() => {
     const type = this.props.type
 
     if (
@@ -39,4 +35,13 @@ export class FieldTypeInclude {
 
     return type ?? 'text'
   })
+
+  /**
+   * Returns the input type.
+   *
+   * Возвращает тип ввода.
+   */
+  get(): FieldType {
+    return this.item.value
+  }
 }

package/src/classes/field/FieldValidationInclude.ts

@@ -2,7 +2,6 @@ import { computed, ref } from 'vue'
 
 import { FieldInputCheckInclude } from './FieldInputCheckInclude'
 
-import type { FieldElementInclude } from './FieldElementInclude'
 import type { FieldAttributesInclude } from './FieldAttributesInclude'
 import type { FieldChangeInclude } from './FieldChangeInclude'
 import type { FieldValueInclude } from './FieldValueInclude'
@@ -16,14 +15,13 @@ import type { FieldAllProps, FieldValidationItem } from '../../types/fieldTypes'
  *
  * Класс для работы с валидностью
  */
-export class InputValidation {
+export class FieldValidationInclude {
   /** Internal validation state/ Внутреннее состояние валидации */
   protected readonly validation = ref<FieldValidationItem>()
 
   /**
    * Constructor
    * @param props input data/ входные данные
-   * @param element object for working with input element/ объект для работы с элементом ввода
    * @param attributes object for working with input attributes/ объект для работы с атрибутами ввода
    * @param value object for value work/ объект для работы со значениями
    * @param change object for change state/ объект для состояния изменения
@@ -32,7 +30,6 @@ export class InputValidation {
    */
   constructor(
     protected readonly props: FieldAllProps,
-    protected readonly element: FieldElementInclude,
     protected readonly attributes: FieldAttributesInclude,
     protected readonly value: FieldValueInclude,
     protected readonly change?: FieldChangeInclude,

package/src/classes/field/FieldValueInclude.ts

@@ -97,6 +97,15 @@ export class FieldValueInclude<Value = any> {
     return this.string.value.length ?? 0
   })
 
+  /**
+   * Returns the current value.
+   *
+   * Возвращает текущее значение.
+   */
+  get(): Value | undefined {
+    return this.item.value
+  }
+
   /**
    * Returns the current value as an array.
    *
@@ -147,6 +156,7 @@ export class FieldValueInclude<Value = any> {
   setByEvent(value: Record<string, any>): this
   setByEvent(value: any): this
   setByEvent(eventValue: Event | Record<string, any> | any): this {
+    console.log('setByEvent')
     switch (typeof eventValue) {
       case 'object':
         if (eventValue) {

package/src/constructors/Accordion/Accordion.ts

@@ -0,0 +1,68 @@
+import { computed, ref, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { EventClickInclude } from '../../classes/EventClickInclude'
+import { MotionTransformInclude } from '../MotionTransform'
+import { ModelInclude } from '../../classes/ModelInclude'
+
+import type { CellExpose } from '../Cell'
+import type { AccordionComponents, AccordionEmits, AccordionSlots } from './types'
+import type { AccordionProps } from './props'
+
+/**
+ * Accordion
+ */
+export class Accordion {
+  readonly motionTransform: MotionTransformInclude
+
+  readonly event: EventClickInclude
+
+  readonly open = ref<boolean>(false)
+  readonly model: ModelInclude<boolean>
+
+  readonly elementHead = ref<CellExpose>()
+
+  /**
+   * 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: AccordionProps,
+    protected readonly refs: ToRefs<AccordionProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<AccordionComponents, AccordionProps>,
+    protected readonly slots?: AccordionSlots,
+    protected readonly emits?: ConstrEmit<AccordionEmits>
+  ) {
+    this.motionTransform = new MotionTransformInclude(
+      this.props,
+      this.className,
+      this.components,
+      this.emits,
+      computed(() => ({
+        section: true,
+        adaptive: 'planeAlways',
+        inDom: true,
+        ariaLabelledby: this.elementHead.value?.labelId,
+        ariaDescribedby: this.elementHead.value?.descriptionId
+      }))
+    )
+
+    this.event = new EventClickInclude(
+      undefined,
+      undefined,
+      emits
+    )
+
+    this.model = new ModelInclude('open', this.emits, this.open)
+  }
+}

package/src/constructors/Accordion/AccordionDesign.tsx

@@ -0,0 +1,192 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract,
+  toBinds
+} from '@dxtmisha/functional'
+
+import { Accordion } from './Accordion'
+
+import type { MotionTransformControlItem } from '../MotionTransform'
+import {
+  type AccordionProps
+} from './props'
+import {
+  type AccordionClasses,
+  type AccordionComponents,
+  type AccordionEmits,
+  type AccordionExpose,
+  type AccordionSlots
+} from './types'
+
+/**
+ * AccordionDesign
+ */
+export class AccordionDesign<
+  COMP extends AccordionComponents,
+  EXPOSE extends AccordionExpose,
+  CLASSES extends AccordionClasses,
+  P extends AccordionProps
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    AccordionEmits,
+    EXPOSE,
+    AccordionSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Accordion
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, AccordionEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Accordion(
+      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 {
+      ...this.item.motionTransform.expose
+    } as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        head: this.getSubClass('head'),
+        body: this.getSubClass('body')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return {}
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode[] {
+    return this.item.motionTransform.render(
+      {
+        head: this.renderHead,
+        body: this.renderBody
+      },
+      {
+        ...this.getAttrs(),
+        'class': this.classes?.value.main,
+        'data-divider': this.props.divider ? 'divider' : undefined,
+        ...this.item.model.getBinds()
+      }
+    )
+  }
+
+  /**
+   * Generates data for the header.
+   *
+   * Генерирует данные для заголовка.
+   * @param open open status/ статус открытия
+   */
+  protected readonly renderHead = (
+    { isOpen, binds }: MotionTransformControlItem
+  ): VNode | undefined => {
+    const slots: Record<string, any> = {}
+
+    if (this.slots) {
+      if ('label' in this.slots) {
+        slots.label = (props: any) => this.initSlot('label', undefined, props)
+      }
+      if ('description' in this.slots) {
+        slots.description = (props: any) => this.initSlot('description', undefined, props)
+      }
+      if ('caption' in this.slots) {
+        slots.caption = (props: any) => this.initSlot('caption', undefined, props)
+      }
+      if ('trailing' in this.slots) {
+        slots.trailing = (props: any) => this.initSlot('trailing', undefined, props)
+      }
+      if ('body' in this.slots) {
+        slots.body = (props: any) => this.initSlot('body', undefined, props)
+      }
+    }
+
+    return this.components.renderOne(
+      'cell',
+      toBinds(
+        {
+          ref: this.item.elementHead,
+          icon: this.props.icon,
+          iconTrailing: this.props.iconArrowDown,
+          iconTurn: isOpen.value,
+          label: this.props.label,
+          description: this.props.description,
+          class: this.classes?.value.head,
+          dynamic: true,
+          onClick: this.item.event.onClick,
+          ...binds
+        },
+        this.props.cellAttrs
+      ),
+      slots
+    )
+  }
+
+  /**
+   * Generates data for the body.
+   *
+   * Генерирует данные для тела.
+   */
+  protected readonly renderBody = (props: any): VNode => {
+    return h(
+      'div',
+      { class: this.classes?.value.body },
+      this.initSlot('default', undefined, props)
+    )
+  }
+}

package/src/constructors/Accordion/index.ts

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

package/src/constructors/Accordion/properties.json

@@ -0,0 +1,16 @@
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#body": {},
+  "~divider": {
+    "_default": true
+  }
+}

package/src/constructors/Accordion/props.ts

@@ -0,0 +1,55 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+
+import type { IconLitePropsInclude, IconPropsBasic, IconValue } from '../Icon'
+import type { CellPropsBasic } from '../Cell'
+import type { MotionTransformPropsBasic, MotionTransformPropsInclude } from '../MotionTransform'
+
+interface AccordionPropsToken {
+  // :type [!] System label / Системная метка
+  divider?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface AccordionPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic,
+  Cell extends CellPropsBasic = CellPropsBasic,
+  MotionTransform extends MotionTransformPropsBasic = MotionTransformPropsBasic
+> extends LabelProps,
+  DescriptionProps,
+  IconLitePropsInclude<Icon>,
+  MotionTransformPropsInclude<MotionTransform> {
+  // Style
+  'cellAttrs'?: ConstrBind<Cell>
+  'iconArrowDown'?: IconValue<Icon>
+
+  // Event
+  'modelOpen'?: boolean
+  'onUpdate:open'?: (value: boolean) => void
+  'onUpdate:modelOpen'?: (value: boolean) => void
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface AccordionProps extends AccordionPropsBasic, AccordionPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsAccordion = {
+  clickOpen: true,
+  autoClose: true,
+  ...{
+    // :default [!] System label / Системная метка
+    divider: true
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Accordion/style.scss

@@ -0,0 +1,12 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinAccordion {
+  @at-root {
+    &--divider + &--divider,
+    [data-divider="divider"] + &[data-divider="divider"] {
+      border-top-style: solid;
+      border-top-width: ui.v('??borderWidth');
+      @include ui.borderColor(ui.v('??borderColor'), ui.v('??borderOpacity'));
+    }
+  }
+}

package/src/constructors/Accordion/types.ts

@@ -0,0 +1,63 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { EventClickEmits } from '../../types/eventClickTypes'
+
+import type { CellComponentInclude, CellSlotsInclude } from '../Cell'
+import type {
+  MotionTransformComponentInclude,
+  MotionTransformControlItem,
+  MotionTransformEmitsInclude,
+  MotionTransformExposeInclude
+} from '../MotionTransform'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type AccordionComponents
+  = CellComponentInclude
+    & MotionTransformComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type AccordionEmits
+  = EventClickEmits
+    & MotionTransformEmitsInclude
+    & {
+      'update:open': [value: boolean]
+      'update:modelOpen': [value: boolean]
+    }
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface AccordionExpose extends MotionTransformExposeInclude {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface AccordionSlots extends CellSlotsInclude {
+  default?(props: MotionTransformControlItem): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type AccordionClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  head: string
+  body: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/ActionSheet/ActionSheet.ts

@@ -0,0 +1,78 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
+
+import { ModalAbstract } from '../Modal/ModalAbstract'
+import { TouchEventInclude } from '../../classes/TouchEventInclude'
+
+import type { TouchEventTypeY } from '../../types/touchEventTypes'
+import type { ActionSheetComponents, ActionSheetEmits, ActionSheetSlots } from './types'
+import type { ActionSheetProps } from './props'
+
+/**
+ * ActionSheet
+ */
+export class ActionSheet extends ModalAbstract {
+  readonly touchEvent: TouchEventInclude
+
+  /**
+   * 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: ActionSheetProps,
+    protected readonly refs: ToRefs<ActionSheetProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ActionSheetComponents, ActionSheetProps>,
+    protected readonly slots?: ActionSheetSlots,
+    protected readonly emits?: ConstrEmit<ActionSheetEmits>
+  ) {
+    super(
+      props,
+      refs,
+      element,
+      classDesign,
+      className,
+      components,
+      slots,
+      emits,
+      computed(() => ({
+        open: props.open,
+
+        adaptive: 'actionSheet',
+        closeButton: props.barsBackHide,
+        closeMobileHide: props.touchClose
+      })),
+      undefined,
+      {
+        align: 'auto'
+      }
+    )
+
+    this.touchEvent = new TouchEventInclude(
+      undefined,
+      (
+        _,
+        __,
+        ___,
+        clientY: number
+      ) => clientY >= 0,
+      (_, type: TouchEventTypeY) => {
+        if (type === 'bottom') {
+          this.window.expose.setOpen(false).then()
+          return false
+        }
+
+        return true
+      }
+    )
+  }
+}