@dxtmisha/constructor 0.23.0 → 0.39.3

package/src/constructors/Progress/Progress.ts

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

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

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

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

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

package/src/constructors/Progress/properties.json

@@ -1,47 +0,0 @@
-{
-  "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

@@ -1,54 +0,0 @@
-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 / Системная метка
-  }
-}

package/src/constructors/Ripple/Ripple.ts

@@ -1,46 +0,0 @@
-import type { Ref, ToRefs } from 'vue'
-import { type ConstrEmit, DesignComp } from '@dxtmisha/functional'
-
-import { RippleItem } from './RippleItem'
-
-import type { RippleComponents, RippleEmits, RippleSlots } from './types'
-import type { RippleProps } from './props'
-
-/**
- * Base Ripple class for working in Vue.
- *
- * Базовый класс Ripple для работы во Vue.
- */
-export class Ripple {
-  protected readonly item: RippleItem
-
-  /**
-   * 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: RippleProps,
-    protected readonly refs: ToRefs<RippleProps>,
-    protected readonly element: Ref<HTMLDivElement | undefined>,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<RippleComponents, RippleProps>,
-    protected readonly slots?: RippleSlots,
-    protected readonly emits?: ConstrEmit<RippleEmits>
-  ) {
-    this.item = new RippleItem(props, element, className)
-  }
-
-  /**
-   * The click event adds a wave effect element.
-   *
-   * Событие клика добавляет элемент эффекта волна.
-   * @param event click event/ событие клика
-   */
-  readonly onClick = (event: MouseEvent) => this.item.add(event.offsetX, event.offsetY)
-}

package/src/constructors/Ripple/RippleDesign.tsx

@@ -1,112 +0,0 @@
-import { h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { Ripple } from './Ripple'
-
-import {
-  type RipplePropsBasic
-} from './props'
-import {
-  type RippleClasses,
-  type RippleComponents,
-  type RippleEmits,
-  type RippleExpose,
-  type RippleSlots
-} from './types'
-
-/**
- * RippleDesign
- */
-export class RippleDesign<
-  COMP extends RippleComponents,
-  EXPOSE extends RippleExpose,
-  CLASSES extends RippleClasses,
-  P extends RipplePropsBasic
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    RippleEmits,
-    EXPOSE,
-    RippleSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Ripple
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, RippleEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Ripple(
-      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 {} as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.<br>
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: {},
-      ...{
-        // :classes [!] System label / Системная метка
-        item: this.getSubClass('item')
-        // :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 {
-    return h('div', {
-      ref: this.element,
-      class: this.classes?.value.main,
-      onMousedown: this.item.onClick
-    })
-  }
-}