@dxtmisha/constructor 0.23.0

package/src/constructors/MotionTransform/types.ts

@@ -0,0 +1,86 @@
+import type { ComputedRef, Ref } from 'vue'
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { MotionTransformControlItem, MotionTransformEmitOptions } from './basicTypes'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type MotionTransformComponents = {}
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type MotionTransformEmits = {
+  'transform': [
+    event: Event | undefined,
+    options: MotionTransformEmitOptions
+  ]
+  'transformLite': [
+    options: MotionTransformEmitOptions
+  ]
+
+  'update:open': [value: boolean]
+  'update:modelOpen': [value: boolean]
+}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface MotionTransformExpose {
+  /** Reactive state of window visibility/ Реактивное состояние видимости окна */
+  open: Ref<boolean>
+
+  /**
+   * Computed state indicating if component is shown or being prepared for display/
+   * Вычисляемое состояние, указывающее отображается ли компонент или готовится к отображению
+   */
+  isShow: ComputedRef<boolean>
+
+  /** Sets open state/ Устанавливает состояние открытия */
+  setOpen(open: boolean): void
+
+  /** Transition to opening state/ Переход в состояние открытия */
+  toOpen(): void
+
+  /** Transition to closing state/ Переход в состояние закрытия */
+  toClose(): void
+
+  /** Toggles open state/ Переключает состояние открытия */
+  toggle(): void
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface MotionTransformSlots {
+  /** Head slot for controls/ Слот шапки для элементов управления */
+  head? (props: MotionTransformControlItem): any
+  /** Body slot for content/ Слот тела для содержимого */
+  body? (props: MotionTransformControlItem): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type MotionTransformClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  context: string
+  head: string
+  body: string
+  backdrop: string
+  scrim: string
+  clickNone: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Progress/Progress.ts

@@ -0,0 +1,184 @@
+import { computed, ref, type Ref, type ToRefs, watch } from 'vue'
+import { type ConstrClassObject, type ConstrEmit, type ConstrStyles, DesignComp, toNumber } from '@dxtmisha/functional'
+
+import type { ProgressComponents, ProgressEmits, ProgressSlots } from './types'
+import type { ProgressProps } from './props'
+
+/**
+ * Base class for working with the loader.
+ *
+ * Базовый класс для работы с загрузчиком.
+ */
+export class Progress {
+  protected timeout?: any
+
+  readonly hide = ref<boolean>(false)
+  readonly visible = ref<boolean>(false)
+
+  /**
+   * 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: ProgressProps,
+    protected readonly refs: ToRefs<ProgressProps>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<ProgressComponents, ProgressProps>,
+    protected readonly slots?: ProgressSlots,
+    protected readonly emits?: ConstrEmit<ProgressEmits>
+  ) {
+    watch(
+      [refs.visible],
+      this.switch,
+      { immediate: true }
+    )
+  }
+
+  /**
+   * Returns the tag type for the element.
+   *
+   * Возвращает тип тега для элемента.
+   */
+  readonly tag = computed<string>(() => this.props.circular ? 'svg' : 'div')
+
+  /**
+   * Returns values.
+   *
+   * Возвращает значения.
+   */
+  readonly value = computed(() => toNumber(this.props.value ?? 0))
+
+  /**
+   * Returns values in percentages.
+   *
+   * Возвращает значения в процентах.
+   */
+  readonly valueInPercent = computed<string | null>(() => {
+    if (this.isValue()) {
+      const value = this.value.value
+      const percent = (100 / this.getMax() * value)
+
+      if (this.props.circular) {
+        return percent.toString()
+      }
+
+      return `${100 - percent}%`
+    }
+
+    return null
+  })
+
+  /**
+   * Values for the class.
+   *
+   * Значения для класса.
+   */
+  readonly classes = computed<ConstrClassObject>(() => {
+    return {
+      [`${this.className}--hide`]: this.hide.value,
+      [`${this.className}--visible`]: this.visible.value,
+      [`${this.className}--value`]: this.isValue()
+    }
+  })
+
+  /**
+   * Returns the property for style.
+   *
+   * Возвращает свойство для стиля.
+   */
+  readonly styles = computed<ConstrStyles>(() => {
+    return {
+      [`--${this.className}-sys-value`]: this.valueInPercent.value
+    }
+  })
+
+  /**
+   * Monitors the animation event for hiding the element.
+   *
+   * Следит за событием анимации для скрытия элемента.
+   * @param animationName A string containing the value of the animation-name that generated the animation/
+   * Является DOMString содержащей значения animation-name CSS-свойств связанных с transition
+   */
+  readonly onAnimation = ({ animationName }: AnimationEvent): void => {
+    if (animationName.match('-hidden')) {
+      this.hide.value = false
+    }
+  }
+
+  /**
+   * Checks if there are any values.
+   *
+   * Проверяет, есть ли значения.
+   */
+  isValue(): this is { props: { value: number } } {
+    return this.value.value > 0
+  }
+
+  /**
+   * Returns the maximum allowable value.
+   *
+   * Возвращает максимально допустимое значение.
+   */
+  getMax(): number {
+    return toNumber(this.props.max ?? 100)
+  }
+
+  /**
+   * The mode is triggered when the visible property changes to change the output status of the element.
+   *
+   * Метод срабатывает при изменении свойства visible для изменения статуса вывода элемента.
+   */
+  protected readonly switch = (): void => {
+    const visible = this.props.visible
+
+    clearTimeout(this.timeout)
+
+    if (this.isValue()) {
+      this.reset()
+    } else if (Boolean(this.visible.value) !== visible) {
+      const delay = toNumber(this.props.delay ?? 0)
+      const delayHide = toNumber(this.props.delayHide ?? 0)
+
+      if (visible && delay) {
+        this.timeout = setTimeout(() => this.update(), delay)
+      } else if (!visible && delayHide) {
+        this.timeout = setTimeout(() => this.update(), delayHide)
+      } else {
+        this.update()
+      }
+    }
+  }
+
+  /**
+   * Updates dependent data when the visible property changes.
+   *
+   * Обновляет зависимые данные при изменении свойства visible.
+   */
+  protected update(): this {
+    this.hide.value = !this.props.visible
+    this.visible.value = Boolean(this.props.visible)
+
+    return this
+  }
+
+  /**
+   * Resets values to their initial state.
+   *
+   * Сбрасывает значения до начального положения.
+   */
+  protected reset(): this {
+    this.hide.value = false
+    this.visible.value = false
+
+    return this
+  }
+}

package/src/constructors/Progress/ProgressDesign.tsx

@@ -0,0 +1,175 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Progress } from './Progress'
+
+import {
+  type ProgressPropsBasic
+} from './props'
+import {
+  type ProgressClasses,
+  type ProgressComponents,
+  type ProgressEmits,
+  type ProgressExpose,
+  type ProgressSlots
+} from './types'
+
+/**
+ * ProgressDesign
+ */
+export class ProgressDesign<
+  COMP extends ProgressComponents,
+  EXPOSE extends ProgressExpose,
+  CLASSES extends ProgressClasses,
+  P extends ProgressPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    ProgressEmits,
+    EXPOSE,
+    ProgressSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Progress
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, ProgressEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Progress(
+      this.props,
+      this.refs,
+      this.element,
+      this.getDesign(),
+      this.getName(),
+      this.components,
+      this.slots,
+      this.emits
+    )
+
+    this.init()
+  }
+
+  /**
+   * Render elements for the circular loader.
+   *
+   * Рендер элементов для кругового загрузчика.
+   */
+  readonly renderCircle = (): VNode[] => {
+    if (this.props.circular) {
+      return [
+        h('circle', {
+          class: this.classes?.value.circleSub,
+          cx: '24',
+          cy: '24',
+          r: '20'
+        }),
+        h('circle', {
+          class: this.classes?.value.circle,
+          cx: '24',
+          cy: '24',
+          r: '20'
+        })
+      ]
+    }
+
+    return []
+  }
+
+  /**
+   * Render dot at the end.
+   *
+   * Рендер точки в конце.
+   */
+  readonly renderPoint = (): VNode[] => {
+    if (
+      this.props.linear
+      && this.props.point && (
+        this.props.value
+        || ((this.props as any).indeterminate) === 'type1'
+      )
+    ) {
+      return [h('span', { class: this.classes?.value.point })]
+    }
+
+    return []
+  }
+
+  /**
+   * 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 / Системная метка
+        circle: this.getSubClass('circle'),
+        circleSub: this.getSubClass('circleSub'),
+        point: this.getSubClass('point')
+        // :classes [!] System label / Системная метка
+      }
+    } as Partial<CLASSES>
+  }
+
+  /**
+   * Refinement of the received list of styles.
+   *
+   * Доработка полученного списка стилей.
+   */
+  protected initStyles(): ConstrStyles {
+    return this.item.styles.value
+  }
+
+  /**
+   * A method for rendering.
+   *
+   * Метод для рендеринга.
+   */
+  protected initRender(): VNode {
+    const children: any[] = [
+      ...this.renderCircle(),
+      ...this.renderPoint()
+    ]
+
+    return h(
+      this.item.tag.value,
+      {
+        ...this.getAttrs(),
+        class: this.classes?.value.main,
+        style: this.styles?.value,
+        viewBox: '0 0 48 48',
+        onAnimationend: this.item.onAnimation
+      },
+      children
+    )
+  }
+}

package/src/constructors/Progress/ProgressInclude.ts

@@ -0,0 +1,67 @@
+import { computed, type VNode } from 'vue'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
+
+import type { ProgressComponentInclude, ProgressPropsInclude } from './basicTypes'
+import type { ProgressProps } from './props'
+
+/**
+ * The class returns data for working with the Progress component
+ *
+ * Класс возвращает данные для работы с компонентом Progress
+ */
+export class ProgressInclude {
+  /**
+   * Constructor
+   * @param props input parameter/ входной параметр
+   * @param className class name/ название класса
+   * @param components object for working with components/ объект для работы с компонентами
+   * @param extra additional parameter or property name/ дополнительный параметр или имя свойства
+   */
+  constructor(
+    protected readonly props: ProgressPropsInclude,
+    protected readonly className: string,
+    protected readonly components?: DesignComponents<ProgressComponentInclude, ProgressPropsInclude>,
+    protected readonly extra?: RefOrNormal<ConstrBind<ProgressProps>>
+  ) {
+  }
+
+  /**
+   * Checks if data is available for the Progress component/ Проверяет, есть ли данные для компонента Progress
+   */
+  readonly is = computed<boolean>(() => Boolean(this.props.loading))
+
+  /**
+   * list of properties for the progress component/ список свойств для компонента Progress
+   */
+  readonly binds = computed(() => {
+    const extra = getRef(this.extra)
+
+    return getBind(
+      this.props.loading,
+      {
+        ...extra,
+        class: [extra?.class, `${this.className}__loading`]
+      },
+      'visible'
+    )
+  })
+
+  /**
+   * Рендер компонента Progress
+   */
+  readonly render = (): VNode[] => {
+    if (
+      this.components
+      && this.props.loading
+    ) {
+      return this.components.render(
+        'progress',
+        this.binds.value,
+        undefined,
+        'progress'
+      )
+    }
+
+    return []
+  }
+}

package/src/constructors/Progress/basicTypes.ts

@@ -0,0 +1,12 @@
+import type { ConstrBind } from '@dxtmisha/functional'
+import type { ProgressPropsBasic } from './props'
+
+export type ProgressComponentInclude = {
+  progress?: object
+}
+
+export interface ProgressPropsInclude<
+  Progress extends ProgressPropsBasic = ProgressPropsBasic
+> {
+  loading?: boolean | ConstrBind<Progress>
+}

package/src/constructors/Progress/index.ts

@@ -0,0 +1,6 @@
+export * from './Progress'
+export * from './ProgressDesign'
+export * from './ProgressInclude'
+export * from './props'
+export * from './types'
+export * from './basicTypes'

package/src/constructors/Progress/properties.json

@@ -0,0 +1,47 @@
+{
+  "height": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "border-radius": {
+    "_type": "var"
+  },
+  "opacity": {
+    "_type": "var"
+  },
+  "#circle": {},
+  "#circleSub": {},
+  "point": {
+    "_type": "state",
+    "_subclass": true
+  },
+  "~linear": {
+    "_category": "appearance",
+    "_default": true
+  },
+  "~circular": {
+    "inset": {
+      "_type": "var"
+    },
+    "width": {
+      "_type": "var"
+    },
+    "_category": "appearance"
+  },
+  "~indeterminate": {
+    "~type1": {},
+    "~type2": {},
+    "~type3": {},
+    "_default": "type1"
+  },
+  "~position": {
+    "~top": {},
+    "~bottom": {},
+    "~static": {},
+    "_default": "top"
+  },
+  "~dense": {},
+  "~inverse": {}
+}

package/src/constructors/Progress/props.ts

@@ -0,0 +1,54 @@
+interface ProgressPropsToken {
+  // :type [!] System label / Системная метка
+  point?: boolean
+  linear?: boolean
+  circular?: boolean
+  indeterminate?: 'type1' | 'type2' | 'type3'
+  position?: 'top' | 'bottom' | 'static'
+  dense?: boolean
+  inverse?: boolean
+  // :type [!] System label / Системная метка
+}
+
+export interface ProgressPropsBasic {
+  // Status
+  visible?: boolean
+
+  // Value
+  value?: number | string
+  max?: number | string
+
+  // Style
+  linear?: boolean
+  circular?: boolean
+  point?: boolean
+
+  delay?: number | string
+  delayHide?: number | string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ProgressProps extends ProgressPropsBasic, ProgressPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsProgress = {
+  max: 100,
+  delay: 360,
+  delayHide: 200,
+  ...{
+    // :default [!] System label / Системная метка
+    linear: true,
+    indeterminate: 'type1',
+    position: 'top'
+    // :default [!] System label / Системная метка
+  }
+}