@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/MotionTransform/MotionTransformElement.ts

@@ -1,7 +1,7 @@
 import { computed, type Ref } from 'vue'
 import { getElementId } from '@dxtmisha/functional'
 
-import type { MotionTransformClassList, MotionTransformStyle } from './basicTypes'
+import { __MOTION_TRANSFORM_TYPE_BODY_NAME, type MotionTransformClassList, type MotionTransformStyle } from './basicTypes'
 import type { MotionTransformProps } from './props'
 
 /**
@@ -10,6 +10,10 @@ import type { MotionTransformProps } from './props'
  * Класс для работы с элементами и классами.
  */
 export class MotionTransformElement {
+  readonly id = getElementId()
+  readonly idControl = `${this.id}-control`
+  readonly idBody = `${this.id}-body`
+
   readonly classes: MotionTransformClassList
   readonly style: MotionTransformStyle
 
@@ -122,7 +126,8 @@ export class MotionTransformElement {
   isWindow(): boolean {
     return Boolean(
       this.element.value
-      && getComputedStyle(this.element.value).content === '"--WINDOW--"'
+      && getComputedStyle(this.element.value)
+        .getPropertyValue(__MOTION_TRANSFORM_TYPE_BODY_NAME) === '"--WINDOW--"'
     )
   }
 

package/src/constructors/MotionTransform/MotionTransformInclude.ts

@@ -12,7 +12,8 @@ import type { MotionTransformProps } from './props'
 import type { MotionTransformEmits, MotionTransformExpose, MotionTransformSlots } from './types'
 import type {
   MotionTransformComponentInclude,
-  MotionTransformEmitOptions, MotionTransformExposeInclude,
+  MotionTransformEmitOptions,
+  MotionTransformExposeInclude,
   MotionTransformPropsInclude
 } from './basicTypes'
 

package/src/constructors/MotionTransform/MotionTransformState.ts

@@ -1,5 +1,6 @@
 import { computed, ref, watch } from 'vue'
 
+import { TabIndexInclude } from '../../classes/TabIndexInclude'
 import { MotionTransformElement } from './MotionTransformElement'
 import { MotionTransformSize } from './MotionTransformSize'
 
@@ -24,13 +25,16 @@ export class MotionTransformState {
    * Конструктор.
    * @param props input data/ входные данные
    * @param element class object for managing an element/ объект класса для управления элементом
+   * @param tabIndex class object for managing tab indices/ объект класса для управления табуляцией
    * @param size class object for managing sizes/ объект класса для управления размерами
    */
   constructor(
     props: MotionTransformProps,
     protected element: MotionTransformElement,
+    protected tabIndex: TabIndexInclude<HTMLDivElement>,
     protected size: MotionTransformSize
   ) {
+    watch([this.element.element, this.show], this.makeShow)
     watch([this.element.element, this.open], this.makeOpen)
     watch([this.element.element, this.teleport], this.makeTeleport)
 
@@ -115,6 +119,7 @@ export class MotionTransformState {
       }
 
       this.make()
+      this.tabIndex.toggle(this.open.value)
     }
 
     return this

package/src/constructors/MotionTransform/basicTypes.ts

@@ -1,6 +1,7 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ConstrBind } from '@dxtmisha/functional'
 
+import type { AriaRoleControlPropsInclude } from '../../types/ariaTypes'
 import type { MotionTransformEmits, MotionTransformExpose } from './types'
 import type { MotionTransformProps } from './props'
 
@@ -75,6 +76,13 @@ export type MotionTransformControlItem = {
   isShow: ComputedRef<boolean>
   /** Helper CSS classes/ Вспомогательные CSS‑классы */
   classes: MotionTransformClassList
+  /** Helper style variables/ Вспомогательные стилевые переменные */
+  idControl: string
+  /** Helper style variables/ Вспомогательные стилевые переменные */
+  idBody: string
+
+  /** Binding attributes for element/ Атрибуты привязки для элемента */
+  binds: AriaRoleControlPropsInclude
 }
 
 /**
@@ -109,7 +117,9 @@ export interface MotionTransformExposeInclude extends MotionTransformExpose {
  * Props used to include and configure MotionTransform/
  * Свойства для подключения и настройки MotionTransform
  */
-export interface MotionTransformPropsInclude {
+export interface MotionTransformPropsInclude<
+  MotionTransform extends MotionTransformProps = MotionTransformProps
+> {
   /** Open state/ Состояние открытия */
   open?: boolean
   /** Click on head opens component/ Клик по заголовку открывает компонент */
@@ -117,5 +127,11 @@ export interface MotionTransformPropsInclude {
   /** Auto close on outside click/ Авто‑закрытие при клике вне */
   autoClose?: boolean
   /** Additional attributes for MotionTransform/ Дополнительные атрибуты для MotionTransform */
-  motionTransformAttrs?: ConstrBind<MotionTransformProps>
+  motionTransformAttrs?: ConstrBind<MotionTransform>
 }
+
+/**
+ * CSS variable name for MotionTransform body type/
+ * Имя CSS‑переменной для типа тела MotionTransform
+ */
+export const __MOTION_TRANSFORM_TYPE_BODY_NAME = '--sys-type-body'

package/src/constructors/MotionTransform/properties.json

@@ -1,35 +1,35 @@
-{
-  "z-index": {
-    "_type": "var"
-  },
-  "background-full": {
-    "_type": "var"
-  },
-  "background-color": {
-    "_type": "var"
-  },
-  "box-shadow": {
-    "_type": "var"
-  },
-  "#context": {},
-  "#head": {},
-  "#body": {},
-  "#backdrop": {},
-  "#scrim": {},
-  "#clickNone": {},
-  "~section": {},
-  "~animationHeadPosition": {
-    "~top": {},
-    "~toBottom": {},
-    "_default": "top"
-  },
-  "~adaptive": {
-    "~planeAlways": {
-      "content": "none"
-    },
-    "group|plane": {
-      "link|plane": "{??adaptive.planeAlways}",
-      "_type": "media-group"
-    }
-  }
-}
+{
+  "z-index": {
+    "_type": "var"
+  },
+  "background-full": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "box-shadow": {
+    "_type": "var"
+  },
+  "#context": {},
+  "#head": {},
+  "#body": {},
+  "#backdrop": {},
+  "#scrim": {},
+  "#clickNone": {},
+  "~section": {},
+  "~animationHeadPosition": {
+    "~top": {},
+    "~toBottom": {},
+    "_default": "top"
+  },
+  "~adaptive": {
+    "~planeAlways": {
+      "=sys-type-body": "unset"
+    },
+    "group|plane": {
+      "link|plane": "{??adaptive.planeAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/MotionTransform/props.ts

@@ -1,14 +1,17 @@
+import type { AriaRoleByPropsInclude } from '../../types/ariaTypes'
+
 interface MotionTransformPropsToken {
-  // :type [!] System label / Системная метка
-  section?: boolean
-  animationHeadPosition?: 'top' | 'toBottom'
-  adaptive?: 'planeAlways'
+  // :type [!] System label / Системная метка
+  section?: boolean
+  animationHeadPosition?: 'top' | 'toBottom'
+  adaptive?: 'planeAlways'
   // :type [!] System label / Системная метка
 }
 
-export interface MotionTransformPropsBasic {
+export interface MotionTransformPropsBasic extends AriaRoleByPropsInclude {
   // Status
   'open'?: boolean
+  'inDom'?: boolean
 
   // Value
   'ignore'?: HTMLElement | string
@@ -19,6 +22,8 @@ export interface MotionTransformPropsBasic {
   'autoClose'?: boolean
   'animationShow'?: boolean
 
+  'tagBody'?: string
+
   // Event
   'modelOpen'?: boolean
   'onUpdate:open'?: (value: boolean) => void
@@ -42,9 +47,10 @@ export const defaultsMotionTransform = {
   clickOpen: true,
   autoClose: true,
   animationShow: true,
+  tagBody: 'section',
   ...{
-    // :default [!] System label / Системная метка
-    animationHeadPosition: 'top'
+    // :default [!] System label / Системная метка
+    animationHeadPosition: 'top'
     // :default [!] System label / Системная метка
   }
 }

package/src/constructors/MotionTransform/style.scss

@@ -19,8 +19,9 @@
   background-color: transparent;
   box-shadow: none;
 
-  content: "--WINDOW--";
+  --sys-type-body: "--WINDOW--";
 
+  will-change: background-color, box-shadow, height, transform, scale;
   transition-property: background-color, box-shadow, height, transform, scale;
   transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
   transition-duration: ui.v('d.sys.transitionDuration.container.close');
@@ -29,18 +30,22 @@
     width: ui.v('??sys.context.width', auto);
     height: ui.v('??sys.context.height', auto);
 
-    content: "--ANIMATION--";
+    --sys-type-body: "--ANIMATION--";
   }
 
   &__head {
     opacity: 1;
+    will-change: inherit;
   }
 
   &__body {
+    display: flow-root block;
     position: absolute;
     top: 0;
     opacity: 0;
+    outline: none;
 
+    will-change: inherit;
     transition: opacity 67ms linear 50ms;
   }
 
@@ -82,10 +87,17 @@
     }
   }
 
+  &[data-open="none"][data-show="none"] {
+    @include ui.subclass('body') {
+      display: none;
+    }
+  }
+
   &[data-show="show"] {
     overflow-y: hidden;
 
     @include ui.subclass('head') {
+      overflow: hidden;
       transition: opacity 67ms linear 50ms, visibility 67ms linear 50ms;
 
       > * {
@@ -177,4 +189,14 @@
       bottom: 0;
     }
   }
+
+  @include ui.mediaPrefersReducedMotion {
+    &,
+    &__head,
+    &__body,
+    &__background {
+      transition-delay: 0.1ms !important;
+      transition-duration: 0.1ms !important;
+    }
+  }
 }

package/src/constructors/MotionTransform/types.ts

@@ -75,12 +75,12 @@ export interface MotionTransformSlots {
  */
 export type MotionTransformClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  context: string
-  head: string
-  body: string
-  backdrop: string
-  scrim: string
-  clickNone: string
+  // :classes [!] System label / Системная метка
+  context: string
+  head: string
+  body: string
+  backdrop: string
+  scrim: string
+  clickNone: string
   // :classes [!] System label / Системная метка
 }

package/src/constructors/Progress/Progress.ts

@@ -1,5 +1,11 @@
-import { computed, ref, type Ref, type ToRefs, watch } from 'vue'
-import { type ConstrClassObject, type ConstrEmit, type ConstrStyles, DesignComp, toNumber } from '@dxtmisha/functional'
+import { computed, onUnmounted, 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'
@@ -41,6 +47,10 @@ export class Progress {
       this.switch,
       { immediate: true }
     )
+
+    onUnmounted(() => {
+      clearTimeout(this.timeout)
+    })
   }
 
   /**

package/src/constructors/Progress/ProgressDesign.tsx

@@ -1,10 +1,11 @@
-import { h, type VNode } from 'vue'
+import { computed, h, type VNode } from 'vue'
 import {
   type ConstrOptions,
   type ConstrStyles,
   DesignConstructorAbstract
 } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
 import { Progress } from './Progress'
 
 import {
@@ -68,51 +69,6 @@ export class ProgressDesign<
     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
    *
@@ -162,14 +118,80 @@ export class ProgressDesign<
 
     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
-      },
+      this.propsMain.value,
       children
     )
   }
+
+  /**
+   * 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 []
+  }
+
+  /**
+   * Props for the main element/ Свойства для главного элемента
+   */
+  protected readonly propsMain = computed(() => {
+    const props = {
+      ...this.getAttrs(),
+      class: this.classes?.value.main,
+      style: this.styles?.value,
+      viewBox: '0 0 48 48',
+      onAnimationend: this.item.onAnimation,
+      ...AriaStaticInclude.role('progressbar')
+    }
+
+    if (this.props.value) {
+      return {
+        ...props,
+        ...AriaStaticInclude.valueMinMax(
+          this.props.value,
+          0,
+          this.props.max
+        )
+      }
+    }
+
+    return props
+  })
 }

package/src/constructors/Progress/ProgressInclude.ts

@@ -1,6 +1,9 @@
 import { computed, type VNode } from 'vue'
 import { type ConstrBind, DesignComponents, getBind, getRef, type RefOrNormal } from '@dxtmisha/functional'
 
+import { AriaStaticInclude } from '../../classes/AriaStaticInclude'
+
+import type { AriaList } from '../../types/ariaTypes'
 import type { ProgressComponentInclude, ProgressPropsInclude } from './basicTypes'
 import type { ProgressProps } from './props'
 
@@ -26,10 +29,19 @@ export class ProgressInclude {
   }
 
   /**
-   * Checks if data is available for the Progress component/ Проверяет, есть ли данные для компонента Progress
+   * Checks if data is available for the Progress component/
+   * Проверяет, есть ли данные для компонента Progress
    */
   readonly is = computed<boolean>(() => Boolean(this.props.loading))
 
+  /**
+   * list of aria properties for the progress component/
+   * список aria свойств для компонента Progress
+   */
+  readonly aria = computed<AriaList>(
+    () => AriaStaticInclude.busy(this.is.value)
+  )
+
   /**
    * list of properties for the progress component/ список свойств для компонента Progress
    */

package/src/constructors/Progress/properties.json

@@ -1,47 +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": {}
-}
+{
+  "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,3 +1,5 @@
+import type { AriaLabelPropsInclude, AriaLivePropsInclude } from '../../types/ariaTypes'
+
 interface ProgressPropsToken {
   // :type [!] System label / Системная метка
   point?: boolean
@@ -10,7 +12,8 @@ interface ProgressPropsToken {
   // :type [!] System label / Системная метка
 }
 
-export interface ProgressPropsBasic {
+export interface ProgressPropsBasic extends AriaLabelPropsInclude,
+  AriaLivePropsInclude {
   // Status
   visible?: boolean
 
@@ -44,6 +47,7 @@ export const defaultsProgress = {
   max: 100,
   delay: 360,
   delayHide: 200,
+  ariaLive: 'polite',
   ...{
     // :default [!] System label / Системная метка
     linear: true,

package/src/constructors/Progress/style.scss

@@ -64,7 +64,7 @@
 
     @include ui.subclass('circle') {
       animation-name: none !important;
-      stroke-dasharray: calc(#{ui.v('??sys.value')} * #{ui.v('??circular.dasharray')}) #{ui.v('??circular.length')} !important;
+      stroke-dasharray: calc(#{ui.v('??sys.value', '0%')} * #{ui.v('??circular.dasharray')}) #{ui.v('??circular.length')} !important;
       stroke-linecap: butt;
     }
   }
@@ -107,7 +107,7 @@
       }
 
       &::before {
-        right: ui.v('??sys.value');
+        right: ui.v('??sys.value', '0%');
         transition-property: right;
       }
     }

package/src/constructors/Progress/types.ts

@@ -35,9 +35,9 @@ export interface ProgressSlots {}
  */
 export type ProgressClasses = {
   main: ConstrClass
-  // :classes [!] System label / Системная метка
-  circle: string
-  circleSub: string
-  point: string
+  // :classes [!] System label / Системная метка
+  circle: string
+  circleSub: string
+  point: string
   // :classes [!] System label / Системная метка
 }