@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Block/BlockDesign.tsx

@@ -0,0 +1,219 @@
+import { h, type VNode } from 'vue'
+import {
+  type ConstrOptions,
+  type ConstrStyles,
+  DesignConstructorAbstract
+} from '@dxtmisha/functional'
+
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+import { Block } from './Block'
+
+import {
+  type BlockPropsBasic
+} from './props'
+import {
+  type BlockClasses,
+  type BlockComponents,
+  type BlockEmits,
+  type BlockExpose,
+  type BlockSlots
+} from './types'
+
+/**
+ * BlockDesign
+ */
+export class BlockDesign<
+  COMP extends BlockComponents,
+  EXPOSE extends BlockExpose,
+  CLASSES extends BlockClasses,
+  P extends BlockPropsBasic
+> extends DesignConstructorAbstract<
+    HTMLDivElement,
+    COMP,
+    BlockEmits,
+    EXPOSE,
+    BlockSlots,
+    CLASSES,
+    P
+  > {
+  protected readonly item: Block
+
+  /**
+   * Constructor
+   * @param name class name/ название класса
+   * @param props properties/ свойства
+   * @param options list of additional parameters/ список дополнительных параметров
+   */
+  constructor(
+    name: string,
+    props: Readonly<P>,
+    options?: ConstrOptions<COMP, BlockEmits, P>
+  ) {
+    super(
+      name,
+      props,
+      options
+    )
+
+    this.item = new Block(
+      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 {} as EXPOSE
+  }
+
+  /**
+   * Improvement of the obtained list of classes.
+   *
+   * Доработка полученного списка классов.
+   */
+  protected initClasses(): Partial<CLASSES> {
+    return {
+      main: {},
+      ...{
+        // :classes [!] System label / Системная метка
+        headline: this.getSubClass('headline'),
+        header: this.getSubClass('header'),
+        label: this.getSubClass('label'),
+        description: this.getSubClass('description'),
+        caption: this.getSubClass('caption'),
+        icon: this.getSubClass('icon'),
+        space: this.getSubClass('space'),
+        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 {
+    const children: any[] = [
+      ...this.renderHeadline(),
+      ...this.renderHeader(),
+      ...this.item.description.render(),
+      ...this.renderBody()
+    ]
+
+    return h(this.item.tag.value, {
+      ...this.getAttrs(),
+      class: this.classes?.value.main
+    }, children)
+  }
+
+  /**
+   * Headline rendering.
+   *
+   * Рендеринг заголовка.
+   */
+  protected readonly renderHeadline = (): VNode[] => {
+    if (this.item.isHeadline.value) {
+      const children: any[] = []
+
+      if (this.props.headline) {
+        children.push(this.props.headline)
+      }
+
+      this.initSlot('headline', children)
+
+      return [
+        h('div', {
+          key: 'headline',
+          class: this.classes?.value.headline
+        }, children)
+      ]
+    }
+
+    return []
+  }
+
+  /**
+   * Header rendering.
+   *
+   * Рендеринг заголовка.
+   */
+  protected readonly renderHeader = (): VNode[] => {
+    if (this.item.isHeader.value) {
+      const children: any[] = [
+        ...this.item.icon.renderIcon(),
+        ...this.item.label.render(),
+        ...this.item.caption.render(),
+        ...this.renderTrailing()
+      ]
+
+      return [
+        h('div', {
+          key: 'header',
+          class: this.classes?.value.header,
+          ...AriaStaticInclude.labelledby(this.item.label.idElement.value)
+        }, children)
+      ]
+    }
+
+    return []
+  }
+
+  /**
+   * Trailing rendering.
+   *
+   * Рендеринг правого контента.
+   */
+  protected readonly renderTrailing = (): VNode[] => {
+    const children: any[] = []
+
+    if (this.slots?.trailing) {
+      children.push(h('div', {
+        key: 'spacer',
+        class: this.classes?.value.space
+      }))
+
+      this.initSlot('trailing', children)
+    }
+
+    return children
+  }
+
+  /**
+   * Body rendering.
+   *
+   * Рендеринг тела.
+   */
+  protected readonly renderBody = (): VNode[] => {
+    this.initSlot('default')
+
+    return [
+      h('div', {
+        key: 'body',
+        class: this.classes?.value.body
+      }, this.initSlot('default'))
+    ]
+  }
+}

package/src/constructors/Block/index.ts

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

package/src/constructors/Block/properties.json

@@ -0,0 +1,10 @@
+{
+  "#headline": {},
+  "#header": {},
+  "#label": {},
+  "#description": {},
+  "#caption": {},
+  "#icon": {},
+  "#space": {},
+  "#body": {}
+}

package/src/constructors/Block/props.ts

@@ -0,0 +1,46 @@
+import type { IconPropsBasic, IconPropsInclude } from '../Icon'
+
+import type { LabelProps } from '../../types/labelTypes'
+import type { DescriptionProps } from '../../types/descriptionTypes'
+import type { CaptionProps } from '../../types/captionTypes'
+
+interface BlockPropsToken {
+  // :type [!] System label / Системная метка
+  // :type [!] System label / Системная метка
+}
+
+export interface BlockPropsBasic<
+  Icon extends IconPropsBasic = IconPropsBasic
+> extends LabelProps,
+  DescriptionProps,
+  CaptionProps,
+  IconPropsInclude<Icon> {
+  // Value
+  headline?: string
+
+  // Style
+  tag?: string
+  tagHeader?: string
+}
+
+/**
+ * Type describing incoming properties.
+ *
+ * Тип, описывающий входящие свойства.
+ */
+export interface BlockProps extends BlockPropsBasic, BlockPropsToken {
+}
+
+/**
+ * Default value for property.
+ *
+ * Значение по умолчанию для свойства.
+ */
+export const defaultsBlock = {
+  tag: 'div',
+  tagHeader: 'h3',
+  ...{
+    // :default [!] System label / Системная метка
+    // :default [!] System label / Системная метка
+  }
+}

package/src/constructors/Block/style.scss

@@ -0,0 +1,11 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinBlock {
+  &__header {
+    @include ui.flexX;
+  }
+
+  &__space {
+    @include ui.flexDynamic
+  }
+}

package/src/constructors/Block/types.ts

@@ -0,0 +1,64 @@
+import type { ConstrClass } from '@dxtmisha/functional'
+
+import type { LabelAlternativeSlots, LabelExpose } from '../../types/labelTypes'
+import type { DescriptionExpose, DescriptionSlots } from '../../types/descriptionTypes'
+import type { CaptionSlots } from '../../types/captionTypes'
+
+import type { IconComponentInclude } from '../Icon'
+
+/**
+ * Interface for describing which components need to be connected for work.
+ *
+ * Интерфейс для описания, какие компоненты надо подключить для работы.
+ */
+export type BlockComponents = IconComponentInclude
+
+/**
+ * Type describing available events.
+ *
+ * Тип, описывающий доступные события.
+ */
+export type BlockEmits = {}
+
+/**
+ * Type describing available properties.
+ *
+ * Тип, описывающий доступные свойства.
+ */
+export interface BlockExpose extends LabelExpose, DescriptionExpose {
+}
+
+/**
+ * Type describing available slots.
+ *
+ * Тип, описывающий доступные слоты.
+ */
+export interface BlockSlots extends LabelAlternativeSlots, DescriptionSlots, CaptionSlots {
+  /** Slot for trailing content/ Слот для правого контента */
+  trailing?(props: any): any
+
+  /** Slot for headline/ Слот для заголовка */
+  headline?(props: any): any
+
+  /** Default slot/ Слот по умолчанию */
+  default?(props: any): any
+}
+
+/**
+ * Type describing subclasses.
+ *
+ * Тип, описывающий подклассы.
+ */
+export type BlockClasses = {
+  main: ConstrClass
+  // :classes [!] System label / Системная метка
+  headline: string
+  header: string
+  label: string
+  description: string
+  caption: string
+  icon: string
+  space: string
+  body: string
+  // :classes [!] System label / Системная метка
+}

package/src/constructors/Button/Button.ts

@@ -1,6 +1,6 @@
 import { computed, type Ref, type ToRefs } from 'vue'
 import { type ConstrClass, type ConstrEmit, DesignComp } from '@dxtmisha/functional'
-import { getClassTegAStatic } from '../../functions/getClassTegAStatic'
+import { getClassTagAStatic } from '../../functions/getClassTagAStatic'
 
 import { LabelInclude } from '../../classes/LabelInclude'
 import { EnabledInclude } from '../../classes/EnabledInclude'
@@ -10,8 +10,10 @@ import { ProgressInclude } from '../Progress'
 import { RippleInclude } from '../Ripple'
 import { SkeletonInclude } from '../Skeleton'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { EventClickInclude } from '../../classes/EventClickInclude'
 
+import type { AriaList } from '../../types/ariaTypes'
 import type { ButtonComponents, ButtonEmits, ButtonSlots } from './types'
 import type { ButtonPropsBasic } from './props'
 
@@ -82,7 +84,29 @@ export class Button {
   /** values for the class/ значения для класса */
   readonly classes = computed<ConstrClass>(() => ({
     [`${this.className}--icon`]: this.icon.isIcon.value,
-    [getClassTegAStatic(this.classDesign)]: true,
+    [getClassTagAStatic(this.classDesign)]: true,
     ...this.skeleton.classes.value
   }))
+
+  /**
+   * list of aria properties for the button component/
+   * список aria свойств для компонента Button
+   */
+  readonly aria = computed<AriaList>(() => {
+    const aria: AriaList = {
+      ...this.progress.aria.value,
+      ...AriaStaticInclude.label(this.props.ariaLabel)
+    }
+
+    if (this.props.tag !== 'button') {
+      return {
+        tabindex: '0',
+        ...aria,
+        ...AriaStaticInclude.role('button'),
+        ...this.enabled.aria.value
+      }
+    }
+
+    return aria
+  })
 }

package/src/constructors/Button/ButtonDesign.tsx

@@ -75,7 +75,8 @@ export class ButtonDesign<
    */
   protected initExpose(): EXPOSE {
     return {
-      ...this.item.event.expose
+      ...this.item.event.expose,
+      ...this.item.label.expose
     } as EXPOSE
   }
 
@@ -117,13 +118,17 @@ export class ButtonDesign<
       this.props.tag || 'button',
       {
         ...this.getAttrs(),
-        ref: this.element,
+        'ref': this.element,
+        'type': this.props.type,
 
-        class: this.classes?.value.main,
-        style: this.styles?.value,
+        'class': this.classes?.value.main,
+        'style': this.styles?.value,
 
-        disabled: this.item.enabled.isDisabledOrUndefined.value,
-        onClick: this.item.event.onClick
+        'data-value': this.props.value,
+
+        'disabled': this.item.enabled.isDisabledOrUndefined.value,
+        'onClick': this.item.event.onClick,
+        ...this.item.aria.value
       },
       [
         ...this.item.progress.render(),

package/src/constructors/Button/ButtonInclude.ts

@@ -1,5 +1,5 @@
 import { computed, type VNode } from 'vue'
-import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
+import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal, toBinds } from '@dxtmisha/functional'
 
 import type { ButtonComponentInclude, ButtonPropsInclude } from './basicTypes'
 import type { ButtonPropsBasic } from './props'
@@ -37,10 +37,13 @@ export class ButtonInclude<Props extends ButtonPropsInclude = ButtonPropsInclude
    * Computed bindings for the button/ Вычисляемые привязки для кнопки
    */
   readonly binds = computed(
-    () => getBind(
-      getRef(this.props),
-      getRef(this.extra),
-      'label'
+    () => toBinds(
+      this.props.buttonAttrs,
+      getBind(
+        getRef(this.props),
+        getRef(this.extra),
+        'label'
+      )
     )
   )
 

package/src/constructors/Button/index.ts

@@ -1,5 +1,6 @@
 export * from './Button'
 export * from './ButtonDesign'
+export * from './ButtonInclude'
 export * from './props'
 export * from './types'
 export * from './basicTypes'

package/src/constructors/Button/properties.json

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

@@ -5,6 +5,7 @@ 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 / Системная метка
@@ -28,9 +29,11 @@ export interface ButtonPropsBasic<
   IconTrailingPropsInclude<Icon>,
   ProgressPropsInclude<Progress>,
   SkeletonPropsInclude,
-  EventClickProps {
+  EventClickProps,
+  AriaLabelPropsInclude {
   // Style
   tag?: 'button' | 'a' | 'span' | string
+  type?: 'button' | 'submit' | 'reset' | string
 }
 
 /**
@@ -48,6 +51,7 @@ export interface ButtonProps extends ButtonPropsBasic, ButtonPropsToken {
  */
 export const defaultsButton = {
   tag: 'button',
+  type: 'button',
   ...{
     // :default [!] System label / Системная метка
     // :default [!] System label / Системная метка

package/src/constructors/Button/style.scss

@@ -24,7 +24,7 @@
   }
 
   @include ui.focus {
-    outline: none;
+    outline-style: solid;
   }
 
   @include ui.disabled {