@dxtmisha/constructor 0.30.1 → 0.39.3

package/src/constructors/Button/properties.json

@@ -1,84 +0,0 @@
-{
-  "padding": {
-    "_type": "var"
-  },
-  "border-radius": "0",
-  "transition-property": "grid-template-columns, background-color, background-image, border, box-shadow",
-  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
-  "transition-function": "{d.sys.transitionFunction.standard}",
-  "#label": {},
-  "#icon": {},
-  "#trailing": {},
-  "#loading": {
-    "color-opacity": {
-      "_type": "var"
-    }
-  },
-  "focus": {},
-  "hover": {
-    "transition-duration": "{d.sys.transitionDuration.sm}"
-  },
-  "active": {
-    "transition-duration": "{d.sys.transitionDuration.sm}"
-  },
-  "selected": {
-    "_type": "state"
-  },
-  "readonly": {
-    "_type": "state"
-  },
-  "disabled": {
-    "transition-duration": "{d.sys.transitionDuration.sm}"
-  },
-  "~adaptive": {
-    "~iconAlways": {
-      "justify-content": "flex-start",
-      "& > .??__icon": {
-        "padding": {
-          "value": "calc((var(--sys-height) - {?icon-_width}) / 2)",
-          "_important": true
-        }
-      },
-      "& > *:not(.??__icon)": {
-        "display": "none"
-      }
-    },
-    "~block": {
-      "width": "100%"
-    },
-    "~auto": {
-      "width": "fit-content"
-    },
-    "group|icon": {
-      "link|adaptive-icon": "{??adaptive.iconAlways}",
-      "_type": "media-group"
-    },
-    "group|full": {
-      "link|adaptive-icon": "{??adaptive.iconAlways}",
-      "_type": "media-max-group"
-    }
-  },
-  "container": {
-    "group|icon": {
-      "link|adaptive-icon": "{??adaptive.iconAlways}",
-      "_type": "container-group"
-    },
-    "group|full": {
-      "link|adaptive-icon": "{??adaptive.iconAlways}",
-      "_type": "container-max-group"
-    }
-  },
-  "~inverse": {},
-  "~grid": {},
-  "~textAlign": {
-    "left": {
-      "justify-content": "flex-start",
-      "text-align": "left"
-    },
-    "center": {},
-    "right": {
-      "justify-content": "flex-end",
-      "text-align": "right"
-    }
-  }
-}

package/src/constructors/Button/props.ts

@@ -1,59 +0,0 @@
-import type { IconPropsBasic, IconTrailingPropsInclude } from '../Icon'
-import type { ProgressPropsBasic, ProgressPropsInclude } from '../Progress'
-import type { SkeletonPropsInclude } from '../Skeleton'
-
-import type { LabelProps } from '../../types/labelTypes'
-import type { EnabledProps } from '../../types/enabledTypes'
-import type { EventClickProps } from '../../types/eventClickTypes'
-import type { AriaLabelPropsInclude } from '../../types/ariaTypes'
-
-interface ButtonPropsToken {
-  // :type [!] System label / Системная метка
-  focus?: boolean
-  disabled?: boolean
-  selected?: boolean
-  readonly?: boolean
-  adaptive?: 'iconAlways' | 'block' | 'auto'
-  container?: boolean
-  inverse?: boolean
-  grid?: boolean
-  textAlign?: 'left' | 'center' | 'right'
-  // :type [!] System label / Системная метка
-}
-
-export interface ButtonPropsBasic<
-  Icon extends IconPropsBasic = IconPropsBasic,
-  Progress extends ProgressPropsBasic = ProgressPropsBasic
-> extends LabelProps,
-  EnabledProps,
-  IconTrailingPropsInclude<Icon>,
-  ProgressPropsInclude<Progress>,
-  SkeletonPropsInclude,
-  EventClickProps,
-  AriaLabelPropsInclude {
-  // Style
-  tag?: 'button' | 'a' | 'span' | string
-  type?: 'button' | 'submit' | 'reset' | string
-}
-
-/**
- * Type describing incoming properties.
- *
- * Тип, описывающий входящие свойства.
- */
-export interface ButtonProps extends ButtonPropsBasic, ButtonPropsToken {
-}
-
-/**
- * Default value for property.
- *
- * Значение по умолчанию для свойства.
- */
-export const defaultsButton = {
-  tag: 'button',
-  type: 'button',
-  ...{
-    // :default [!] System label / Системная метка
-    // :default [!] System label / Системная метка
-  }
-}

package/src/constructors/Button/types.ts

@@ -1,56 +0,0 @@
-import type { ConstrClass } from '@dxtmisha/functional'
-
-import type { IconComponentInclude } from '../Icon'
-import type { ProgressComponentInclude } from '../Progress'
-import type { RippleComponentsInclude } from '../Ripple'
-
-import type { EventClickEmits, EventClickExpose } from '../../types/eventClickTypes'
-import type { LabelExpose, LabelSlots } from '../../types/labelTypes'
-
-/**
- * Interface for describing which components need to be connected for work.
- *
- * Интерфейс для описания, какие компоненты надо подключить для работы.
- */
-export type ButtonComponents
-  = IconComponentInclude
-    & ProgressComponentInclude
-    & RippleComponentsInclude
-
-/**
- * Type describing available events.
- *
- * Тип, описывающий доступные события.
- */
-export type ButtonEmits = EventClickEmits
-
-/**
- * Type describing available properties.
- *
- * Тип, описывающий доступные свойства.
- */
-export interface ButtonExpose extends LabelExpose, EventClickExpose {
-}
-
-/**
- * Type describing available slots.
- *
- * Тип, описывающий доступные слоты.
- */
-export interface ButtonSlots extends LabelSlots {
-}
-
-/**
- * Type describing subclasses.
- *
- * Тип, описывающий подклассы.
- */
-export type ButtonClasses = {
-  main: ConstrClass
-  // :classes [!] System label / Системная метка
-  label: string
-  icon: string
-  trailing: string
-  loading: string
-  // :classes [!] System label / Системная метка
-}

package/src/constructors/Cell/Cell.ts

@@ -1,144 +0,0 @@
-import { computed, type Ref, type ToRefs } from 'vue'
-import {
-  type ConstrClass,
-  type ConstrEmit,
-  DesignComp
-} from '@dxtmisha/functional'
-import { getClassTagAStatic } from '../../functions/getClassTagAStatic'
-
-import { LabelInclude } from '../../classes/LabelInclude'
-import { CaptionInclude } from '../../classes/CaptionInclude'
-import { DescriptionInclude } from '../../classes/DescriptionInclude'
-import { EnabledInclude } from '../../classes/EnabledInclude'
-
-import { IconTrailingInclude } from '../Icon'
-import { ProgressInclude } from '../Progress'
-import { RippleInclude } from '../Ripple'
-import { SkeletonInclude } from '../Skeleton'
-
-import { EventClickInclude } from '../../classes/EventClickInclude'
-
-import type { CellComponents, CellEmits, CellSlots } from './types'
-import type { CellProps } from './props'
-import type { CellClassesSub } from './basicTypes'
-
-/**
- * Cell
- */
-export class Cell {
-  readonly progress: ProgressInclude
-  readonly skeleton: SkeletonInclude
-
-  readonly label: LabelInclude
-  readonly description: DescriptionInclude
-  readonly caption: CaptionInclude
-  readonly enabled: EnabledInclude
-
-  readonly icon: IconTrailingInclude
-  readonly ripple: RippleInclude
-
-  readonly event: EventClickInclude
-
-  /**
-   * 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: CellProps,
-    protected readonly refs: ToRefs<CellProps>,
-    protected readonly element: Ref<HTMLElement | undefined>,
-    protected readonly classDesign: string,
-    protected readonly className: string,
-    protected readonly components?: DesignComp<CellComponents, CellProps>,
-    protected readonly slots?: CellSlots,
-    protected readonly emits?: ConstrEmit<CellEmits>
-  ) {
-    const progress = new ProgressInclude(
-      props,
-      className,
-      components,
-      {
-        inverse: true,
-        position: 'bottom'
-      }
-    )
-
-    this.skeleton = new SkeletonInclude(
-      props,
-      classDesign,
-      ['classTextVariant']
-    )
-
-    this.label = new LabelInclude(
-      props,
-      className,
-      undefined,
-      slots,
-      undefined,
-      undefined,
-      undefined,
-      this.skeleton
-    )
-    this.caption = new CaptionInclude(props, className, slots)
-    this.description = new DescriptionInclude(props, className, slots, this.skeleton)
-    this.enabled = new EnabledInclude(props, progress)
-
-    this.icon = new IconTrailingInclude(props, className, components)
-    this.progress = progress
-    this.ripple = new RippleInclude(className, components, this.enabled)
-
-    this.event = new EventClickInclude(
-      props,
-      this.enabled,
-      emits
-    )
-  }
-
-  /**
-   * Computed CSS classes for the cell component.
-   *
-   * Вычисляемые CSS классы для компонента ячейки.
-   */
-  readonly classes = computed<ConstrClass>(() => ({
-    [`${this.className}--description`]: this.description.is.value,
-    [getClassTagAStatic(this.classDesign)]: true
-  }))
-
-  /**
-   * Computed role for the cell component.
-   *
-   * Вычисляемая роль для компонента ячейки.
-   */
-  readonly role = computed<string | undefined>(() => {
-    if (this.props.role) {
-      return this.props.role
-    }
-
-    if (this.props.dynamic) {
-      return 'button'
-    }
-
-    return undefined
-  })
-
-  /**
-   * Returns a list of sub-element CSS classes for the cell component.
-   *
-   * Возвращает список CSS классов для под-элементов компонента ячейки.
-   */
-  getClassesSub(): CellClassesSub {
-    return {
-      label: `${this.className}__label`,
-      description: `${this.className}__description`,
-      caption: `${this.className}__caption`,
-      trailing: `${this.className}__trailing`
-    }
-  }
-}

package/src/constructors/Cell/CellDesign.tsx

@@ -1,234 +0,0 @@
-import { computed, h, type VNode } from 'vue'
-import {
-  type ConstrOptions,
-  type ConstrStyles,
-  DesignConstructorAbstract
-} from '@dxtmisha/functional'
-
-import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
-import { Cell } from './Cell'
-
-import {
-  type CellProps
-} from './props'
-import {
-  type CellClasses,
-  type CellComponents,
-  type CellEmits,
-  type CellExpose,
-  type CellSlots
-} from './types'
-
-/**
- * CellDesign
- */
-export class CellDesign<
-  COMP extends CellComponents,
-  EXPOSE extends CellExpose,
-  CLASSES extends CellClasses,
-  P extends CellProps
-> extends DesignConstructorAbstract<
-    HTMLDivElement,
-    COMP,
-    CellEmits,
-    EXPOSE,
-    CellSlots,
-    CLASSES,
-    P
-  > {
-  protected readonly item: Cell
-
-  /**
-   * Constructor
-   * @param name class name/ название класса
-   * @param props properties/ свойства
-   * @param options list of additional parameters/ список дополнительных параметров
-   */
-  constructor(
-    name: string,
-    props: Readonly<P>,
-    options?: ConstrOptions<COMP, CellEmits, P>
-  ) {
-    super(
-      name,
-      props,
-      options
-    )
-
-    this.item = new Cell(
-      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.event.expose,
-      ...this.item.label.expose,
-      ...this.item.description.expose
-    } as EXPOSE
-  }
-
-  /**
-   * Improvement of the obtained list of classes.
-   *
-   * Доработка полученного списка классов.
-   */
-  protected initClasses(): Partial<CLASSES> {
-    return {
-      main: this.item.classes.value,
-      ...{
-        // :classes [!] System label / Системная метка
-        context: this.getSubClass('context'),
-        contextTrailing: this.getSubClass('contextTrailing'),
-        label: this.getSubClass('label'),
-        description: this.getSubClass('description'),
-        caption: this.getSubClass('caption'),
-        icon: this.getSubClass('icon'),
-        trailing: this.getSubClass('trailing'),
-        body: this.getSubClass('body'),
-        loading: this.getSubClass('loading')
-        // :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 h(
-      this.props.tag ?? 'div',
-      this.propsMain.value,
-      [
-        ...this.item.icon.render(),
-        ...this.renderContext(),
-        ...this.renderTrailing(),
-        ...this.renderBody(),
-        ...this.item.ripple.render(),
-        ...this.item.progress.render()
-      ]
-    )
-  }
-
-  /**
-   * Generates text elements.
-   *
-   * Генерирует элементы текста.
-   */
-  protected renderContext = (): VNode[] => {
-    return [
-      h(
-        'div',
-        {
-          key: 'context',
-          class: this.classes?.value.context
-        },
-        [
-          ...this.item.label.render(),
-          ...this.item.caption.render(),
-          ...this.item.description.render()
-        ]
-      )
-    ]
-  }
-
-  /**
-   * Generates a slot for elements on the right.
-   *
-   * Генерирует слот для элементов справа.
-   */
-  protected renderTrailing = (): VNode[] => {
-    if (
-      this.slots
-      && 'trailing' in this.slots
-    ) {
-      return [
-        h(
-          'div',
-          {
-            key: 'trailing',
-            class: this.classes?.value.contextTrailing
-          },
-          this.initSlot('trailing', undefined, this.item.getClassesSub())
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Generates a slot for elements on the right.
-   *
-   * Генерирует слот для элементов справа.
-   */
-  protected renderBody = (): VNode[] => {
-    if (
-      this.slots
-      && 'body' in this.slots
-    ) {
-      return [
-        h(
-          'div',
-          {
-            key: 'body',
-            class: this.classes?.value.body
-          },
-          this.initSlot('body', undefined, this.item.getClassesSub())
-        )
-      ]
-    }
-
-    return []
-  }
-
-  /**
-   * Props for the main element.
-   *
-   * Свойства для главного элемента.
-   */
-  protected readonly propsMain = computed(() => {
-    const props = {
-      ...this.getAttrs(),
-      'class': this.classes?.value.main,
-      'data-value': this.props.value,
-      'data-divider': this.props.divider ? 'active' : undefined,
-      'onClick': this.item.event.onClick,
-      ...AriaStaticInclude.role(this.item.role.value)
-    }
-
-    if (this.props.dynamic) {
-      return {
-        ...props,
-        tabindex: '0'
-      }
-    }
-
-    return props
-  })
-}

package/src/constructors/Cell/basicTypes.ts

@@ -1,39 +0,0 @@
-import type { LabelAlternativeSlots } from '../../types/labelTypes'
-import type { DescriptionSlots } from '../../types/descriptionTypes'
-import type { CaptionSlots } from '../../types/captionTypes'
-
-/**
- * CSS class names for Cell sub-elements/
- * Имена CSS классов для под-элементов Cell
- */
-export type CellClassesSub = {
-  /** Label element class/ Класс элемента метки */
-  label: string
-  /** Description element class/ Класс элемента описания */
-  description: string
-  /** Caption element class/ Класс элемента подписи */
-  caption: string
-  /** Trailing element class/ Класс завершающего элемента */
-  trailing: string
-}
-
-/**
- * Component map for including Cell/
- * Карта компонентов для подключения Cell
- */
-export type CellComponentInclude = {
-  /** Cell component key/ Ключ компонента Cell */
-  cell: object
-}
-
-/**
- * Type describing available slots/
- * Тип, описывающий доступные слоты
- */
-export interface CellSlotsInclude extends LabelAlternativeSlots,
-  DescriptionSlots,
-  CaptionSlots {
-  trailing?(props: CellClassesSub): any
-
-  body?(props: CellClassesSub): any
-}

package/src/constructors/Cell/index.ts

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

package/src/constructors/Cell/properties.json

@@ -1,52 +0,0 @@
-{
-  "border-width": {
-    "_type": "var"
-  },
-  "border-color": {
-    "_type": "var"
-  },
-  "transition-property": "background-color, background-image, border, box-shadow",
-  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
-  "transition-function": "{d.sys.transitionFunction.standard}",
-  "#context": {},
-  "#contextTrailing": {},
-  "#label": {},
-  "#description": {},
-  "#caption": {},
-  "#icon": {},
-  "#trailing": {},
-  "#body": {},
-  "#loading": {},
-  "~focus": {},
-  "~selected": {},
-  "~readonly": {},
-  "~disabled": {},
-  "~dynamic": {},
-  "~dynamicHover": {},
-  "~divider": {
-    "_default": true
-  },
-  "~dividerLabel": {
-    "~always": {
-      "#context": {
-        "border-bottom-style": "solid",
-        "border-bottom-width": "{??borderWidth}",
-        "border-color": "{'??borderColor}"
-      }
-    },
-    "group|adaptive": {
-      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
-      "_type": "media-max-group"
-    },
-    "group|container": {
-      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
-      "_type": "container-max-group"
-    },
-    "none": {}
-  },
-  "~iconTop": {
-    "#icon": {
-      "align-self": "start"
-    }
-  }
-}