@dxtmisha/constructor 0.23.0

package/src/constructors/Button/properties.json

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

@@ -0,0 +1,55 @@
+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'
+
+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 {
+  // Style
+  tag?: 'button' | 'a' | 'span' | string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface ButtonProps extends ButtonPropsBasic, ButtonPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsButton = {
+  tag: 'button',
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Button/style.scss

@@ -0,0 +1,96 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinButton {
+  @include ui.initByCustom('padding', 0);
+  @include ui.initByCustom('compressed', 1);
+
+  @include ui.flexInlineCenter;
+
+  box-sizing: border-box;
+  position: relative;
+
+  padding: 0;
+
+  min-width: var(--sys-height, 0);
+
+  text-decoration: none;
+
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  @include ui.hover {
+    text-decoration: none;
+  }
+
+  @include ui.focus {
+    outline: none;
+  }
+
+  @include ui.disabled {
+    cursor: default;
+  }
+
+  @include ui.readonly {
+    cursor: default;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    order: 4;
+    @include ui.paddingX(calc(ui.v('??padding') * ui.v('??compressed')));
+    transition: opacity #{ui.v('d.sys.transitionDuration.standard')} linear;
+
+    @include ui.truncate;
+  }
+
+  &__icon,
+  &__trailing {
+    @include ui.initByCustom('margin', #{calc((var(--sys-height) - ui.v('?icon._width')) / 2)});
+    @include ui.marginLeft(calc(ui.v('??margin') * ui.v('??compressed')));
+    @include ui.marginRight(calc(ui.v('??margin') * ui.v('??compressed')));
+  }
+
+  &__label:has(~ &__icon) {
+    @include ui.paddingLeft(ui.v('??padding'));
+  }
+
+  &__label ~ &__icon {
+    @include ui.marginRight(#{calc(ui.v('??margin') - ui.v('??padding'))});
+  }
+
+  &__label:has(~ &__trailing) {
+    @include ui.paddingRight(ui.v('??padding'));
+  }
+
+  &__label ~ &__trailing {
+    @include ui.marginLeft(#{calc(ui.v('??margin') - ui.v('??padding'))});
+  }
+
+  &__loading#{'.'}#{ui.n('?progress--visible')} ~ * {
+    opacity: ui.v('??colorOpacity', 0);
+  }
+
+  &--icon {
+    @include ui.initByCustom('padding', #{calc(var(--sys-height) / 2)});
+  }
+
+  &--loading {
+    cursor: default;
+  }
+
+  &--grid {
+    display: inline-grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, auto));
+    grid-template-rows: 1fr;
+  }
+
+  &--inverse {
+    --sys-color: unset !important;
+    --sys-background: var(--sys-color) !important;
+    --sys-gradient: var(--sys-color) !important;
+  }
+}

package/src/constructors/Button/types.ts

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

@@ -0,0 +1,127 @@
+import { computed, type Ref, type ToRefs } from 'vue'
+import {
+  type ConstrClass,
+  type ConstrEmit,
+  DesignComp
+} from '@dxtmisha/functional'
+import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+
+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 { CellPropsBasic } 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: CellPropsBasic,
+    protected readonly refs: ToRefs<CellPropsBasic>,
+    protected readonly element: Ref<HTMLElement | undefined>,
+    protected readonly classDesign: string,
+    protected readonly className: string,
+    protected readonly components?: DesignComp<CellComponents, CellPropsBasic>,
+    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,
+    [getClassTegAStatic(this.classDesign)]: true
+  }))
+
+  /**
+   * 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

@@ -0,0 +1,203 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { Cell } from './Cell'
+
+import {
+  type CellPropsBasic
+} 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 CellPropsBasic
+> 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
+    } 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.getAttrs(),
+        'class': this.classes?.value.main,
+        'data-value': this.props.value,
+        'data-divider': this.props.divider ? 'active' : undefined,
+        'onClick': this.item.event.onClick
+      },
+      [
+        ...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',
+        { 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',
+          { 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',
+          { class: this.classes?.value.body },
+          this.initSlot('body', undefined, this.item.getClassesSub())
+        )
+      ]
+    }
+
+    return []
+  }
+}

package/src/constructors/Cell/basicTypes.ts

@@ -0,0 +1,6 @@
+export type CellClassesSub = {
+  label: string
+  description: string
+  caption: string
+  trailing: string
+}

package/src/constructors/Cell/index.ts

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

package/src/constructors/Cell/properties.json

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