@dxtmisha/constructor 0.23.0 → 0.30.1

package/src/constructors/Window/properties.json

@@ -1,236 +1,239 @@
-{
-  "menuSizeMultiplier": "1",
-  "padding": {
-    "_type": "var"
-  },
-  "width": {
-    "value": {
-      "auto": "auto",
-      "max": "100%"
-    },
-    "_var": true,
-    "_style": true
-  },
-  "height": {
-    "value": {
-      "auto": "auto",
-      "max": "100%"
-    },
-    "_var": true,
-    "_style": true
-  },
-  "imageSizeValue": {
-    "_type": "var"
-  },
-  "iconPadding": {
-    "_type": "var"
-  },
-  "background-color": {
-    "_type": "var"
-  },
-  "background-opacity": {
-    "_type": "var"
-  },
-  "transform": {
-    "_type": "var"
-  },
-  "transform-origin": {
-    "_type": "var"
-  },
-  "#body": {
-    "#group": {},
-    "#context": {},
-    "_settingClone": true
-  },
-  "#control": {},
-  "#image": {},
-  "#close": {},
-  "#teleport": {},
-  "~hide": {},
-  "~axis": {
-    "x": {},
-    "y": {},
-    "on": {},
-    "_default": "y"
-  },
-  "~imagePosition": {
-    "~top": {},
-    "~left": {},
-    "_default": "top"
-  },
-  "~dense": {
-    "padding": {
-      "value": "0 !important",
-      "_type": "property"
-    },
-    "#body": {
-      "border-radius": "0"
-    }
-  },
-  "~alignment": {
-    "~center": {},
-    "~top": {
-      "align-items": "flex-start"
-    },
-    "~topRight": {
-      "align-items": "flex-start",
-      "justify-content": "flex-end"
-    },
-    "~topLeft": {
-      "align-items": "flex-start",
-      "justify-content": "flex-start"
-    },
-    "~topFull": {
-      "align-items": "flex-start",
-      "#body": {
-        "width": "100%"
-      }
-    },
-    "~right": {
-      "justify-content": "flex-end"
-    },
-    "~rightFull": {
-      "justify-content": "flex-end",
-      "#body": {
-        "top": "auto !important",
-        "height": "100%"
-      }
-    },
-    "~bottom": {
-      "align-items": "flex-end"
-    },
-    "~bottomRight": {
-      "align-items": "flex-end",
-      "justify-content": "flex-end"
-    },
-    "~bottomLeft": {
-      "align-items": "flex-end",
-      "justify-content": "flex-start"
-    },
-    "~bottomFull": {
-      "align-items": "flex-end",
-      "#body": {
-        "width": "100%"
-      }
-    },
-    "~left": {
-      "justify-content": "flex-start"
-    },
-    "~leftFull": {
-      "justify-content": "flex-start",
-      "#body": {
-        "top": "auto !important",
-        "height": "100%"
-      }
-    }
-  },
-  "~origin": {
-    "~center": {
-      "transform-origin": "center"
-    },
-    "~top": {
-      "transform-origin": "top center"
-    },
-    "~right": {
-      "transform-origin": "center \\#{ui.dirRight()}"
-    },
-    "~bottom": {
-      "transform-origin": "bottom center"
-    },
-    "~left": {
-      "transform-origin": "center \\#{ui.dirLeft()}"
-    },
-    "~topToBottom": {
-      "transform-preparation": "translateY(-64px)",
-      "transform-origin": "top center"
-    },
-    "~rightToLeft": {
-      "transform-preparation": "translateX(calc(64px * \\#{ui.isDir()}))",
-      "transform-origin": "center \\#{ui.dirRight()}"
-    },
-    "~bottomToTop": {
-      "transform-preparation": "translateY(64px)",
-      "transform-origin": "bottom center"
-    },
-    "~leftToRight": {
-      "transform-preparation": "translateX(calc(-64px * \\#{ui.isDir()}))",
-      "transform-origin": "center \\#{ui.dirLeft()}"
-    }
-  },
-  "~adaptive": {
-    "~menu": {
-      "menuSizeMultiplier": "0.5",
-      "content": "'--MENU--'",
-      "position": "fixed",
-      "top": "{??sys.inset.y}",
-      "right": "auto",
-      "bottom": "auto",
-      "left": {
-        "value": "{??sys.inset.x}",
-        "_modification": false
-      },
-      "padding": {
-        "value": "0",
-        "_type": "property"
-      },
-      "height": "auto",
-      "background-opacity": "0",
-      "transform-preparation": "scale(.8)",
-      "transform-origin": "{??origin.x} {??origin.y}",
-      "body": {
-        "top": "auto",
-        "max-width": "100dvw - ({??padding} * 2)",
-        "max-height": "100dvh - ({??padding} * 2)"
-      },
-      "#teleport": {
-        "position": "static",
-        "after": {
-          "content": "none"
-        }
-      },
-      "~widthMatch": {
-        "#body": {
-          "min-width": "{??sys.control.width}"
-        }
-      }
-    },
-    "~menuWindow": {
-      "content": "'--MENU-WINDOW--'"
-    },
-    "~modal": {},
-    "~modalDynamic": {
-      "align-items": "flex-start",
-      "body": {
-        "position": "relative",
-        "top": "{??sys.location}"
-      }
-    },
-    "~actionSheetRight": {
-      "link|dense": "{??dense}",
-      "link|alignment": "{??alignment.rightFull}",
-      "link|origin": "{??origin.rightToLeft}"
-    },
-    "~actionSheetBottom": {
-      "link|dense": "{??dense}",
-      "link|alignment": "{??alignment.bottomFull}",
-      "link|origin": "{??origin.bottomToTop}"
-    },
-    "~static": {
-      "content": "'--STATIC--'"
-    }
-  },
-  "~fullscreen": {
-    "link|dense": "{??dense}",
-    "#body": {
-      "width": "100%",
-      "height": "100%",
-      "max-width": "none",
-      "max-height": "none"
-    }
-  },
-  "~overscroll": {
-    "_default": true
-  },
-  "~closeMobileHide": {},
-  "~widthMatch": {}
-}
+{
+  "menuSizeMultiplier": "1",
+  "padding": {
+    "_type": "var"
+  },
+  "width": {
+    "value": {
+      "auto": "auto",
+      "max": "100%"
+    },
+    "_var": true,
+    "_style": true
+  },
+  "height": {
+    "value": {
+      "auto": "auto",
+      "max": "100%"
+    },
+    "_var": true,
+    "_style": true
+  },
+  "imageSizeValue": {
+    "_type": "var"
+  },
+  "iconPadding": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "transform": {
+    "_type": "var"
+  },
+  "transform-origin": {
+    "_type": "var"
+  },
+  "#body": {
+    "#group": {},
+    "#context": {},
+    "_settingClone": true
+  },
+  "#control": {},
+  "#image": {},
+  "#close": {},
+  "#teleport": {},
+  "~hide": {},
+  "~axis": {
+    "x": {},
+    "y": {},
+    "on": {},
+    "_default": "y"
+  },
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  },
+  "~dense": {
+    "padding": {
+      "value": "0 !important",
+      "_type": "property"
+    },
+    "#body": {
+      "border-radius": "0"
+    }
+  },
+  "~alignment": {
+    "~center": {},
+    "~top": {
+      "align-items": "flex-start"
+    },
+    "~topRight": {
+      "align-items": "flex-start",
+      "justify-content": "flex-end"
+    },
+    "~topLeft": {
+      "align-items": "flex-start",
+      "justify-content": "flex-start"
+    },
+    "~topFull": {
+      "align-items": "flex-start",
+      "#body": {
+        "width": "100%"
+      }
+    },
+    "~right": {
+      "justify-content": "flex-end"
+    },
+    "~rightFull": {
+      "justify-content": "flex-end",
+      "#body": {
+        "top": "auto !important",
+        "height": "100%"
+      }
+    },
+    "~bottom": {
+      "align-items": "flex-end"
+    },
+    "~bottomRight": {
+      "align-items": "flex-end",
+      "justify-content": "flex-end"
+    },
+    "~bottomLeft": {
+      "align-items": "flex-end",
+      "justify-content": "flex-start"
+    },
+    "~bottomFull": {
+      "align-items": "flex-end",
+      "#body": {
+        "width": "100%"
+      }
+    },
+    "~left": {
+      "justify-content": "flex-start"
+    },
+    "~leftFull": {
+      "justify-content": "flex-start",
+      "#body": {
+        "top": "auto !important",
+        "height": "100%"
+      }
+    }
+  },
+  "~origin": {
+    "~center": {
+      "transform-origin": "center"
+    },
+    "~top": {
+      "transform-origin": "top center"
+    },
+    "~right": {
+      "transform-origin": "center \\#{ui.dirRight()}"
+    },
+    "~bottom": {
+      "transform-origin": "bottom center"
+    },
+    "~left": {
+      "transform-origin": "center \\#{ui.dirLeft()}"
+    },
+    "~topToBottom": {
+      "transform-preparation": "translateY(-64px)",
+      "transform-origin": "top center"
+    },
+    "~rightToLeft": {
+      "transform-preparation": "translateX(calc(64px * \\#{ui.isDir()}))",
+      "transform-origin": "center \\#{ui.dirRight()}"
+    },
+    "~bottomToTop": {
+      "transform-preparation": "translateY(64px)",
+      "transform-origin": "bottom center"
+    },
+    "~leftToRight": {
+      "transform-preparation": "translateX(calc(-64px * \\#{ui.isDir()}))",
+      "transform-origin": "center \\#{ui.dirLeft()}"
+    }
+  },
+  "~adaptive": {
+    "~menu": {
+      "menuSizeMultiplier": "0.5",
+      "content": "'--MENU--'",
+      "=sys-type-body": "'--MENU--'",
+      "position": "fixed",
+      "top": "{??sys.inset.y}",
+      "right": "auto",
+      "bottom": "auto",
+      "left": {
+        "value": "{??sys.inset.x}",
+        "_modification": false
+      },
+      "padding": {
+        "value": "0",
+        "_type": "property"
+      },
+      "height": "auto",
+      "background-opacity": "0",
+      "transform-preparation": "scale(.8)",
+      "transform-origin": "{??origin.x} {??origin.y}",
+      "body": {
+        "top": "auto",
+        "max-width": "100dvw - ({??padding} * 2)",
+        "max-height": "100dvh - ({??padding} * 2)"
+      },
+      "#teleport": {
+        "position": "static",
+        "after": {
+          "content": "none"
+        }
+      },
+      "~widthMatch": {
+        "#body": {
+          "min-width": "{??sys.control.width}"
+        }
+      }
+    },
+    "~menuWindow": {
+      "content": "'--MENU-WINDOW--'",
+      "=sys-type-body": "'--MENU-WINDOW--'"
+    },
+    "~modal": {},
+    "~modalDynamic": {
+      "align-items": "flex-start",
+      "body": {
+        "position": "relative",
+        "top": "{??sys.location}"
+      }
+    },
+    "~actionSheetRight": {
+      "link|dense": "{??dense}",
+      "link|alignment": "{??alignment.rightFull}",
+      "link|origin": "{??origin.rightToLeft}"
+    },
+    "~actionSheetBottom": {
+      "link|dense": "{??dense}",
+      "link|alignment": "{??alignment.bottomFull}",
+      "link|origin": "{??origin.bottomToTop}"
+    },
+    "~static": {
+      "content": "'--STATIC--'",
+      "=sys-type-body": "'--STATIC--'"
+    }
+  },
+  "~fullscreen": {
+    "link|dense": "{??dense}",
+    "#body": {
+      "width": "100%",
+      "height": "100%",
+      "max-width": "none",
+      "max-height": "none"
+    }
+  },
+  "~overscroll": {
+    "_default": true
+  },
+  "~closeMobileHide": {},
+  "~widthMatch": {}
+}

package/src/constructors/Window/props.ts

@@ -1,7 +1,9 @@
 import type { ElementOrString, NormalOrPromise } from '@dxtmisha/functional'
 
+import type { AriaByPropsInclude, AriaHaspopupPropsInclude, AriaRoleByPropsInclude } from '../../types/ariaTypes'
 import type { ImagePropsBasic, ImagePropsInclude } from '../Image'
 import type { ScrollbarPropsBasic, ScrollbarPropsInclude } from '../Scrollbar'
+import type { TextClosePropsInclude } from '../../types/textTypes'
 
 interface WindowPropsToken {
   // :type [!] System label / Системная метка
@@ -24,7 +26,12 @@ interface WindowPropsToken {
 export interface WindowPropsBasic<
   Scrollbar extends ScrollbarPropsBasic = ScrollbarPropsBasic,
   Image extends ImagePropsBasic = ImagePropsBasic
-> extends ScrollbarPropsInclude<Scrollbar>, ImagePropsInclude<Image> {
+> extends ScrollbarPropsInclude<Scrollbar>,
+  ImagePropsInclude<Image>,
+  AriaRoleByPropsInclude,
+  AriaByPropsInclude,
+  AriaHaspopupPropsInclude,
+  TextClosePropsInclude {
   // Status
   'open'?: boolean
   'disabled'?: boolean
@@ -78,6 +85,8 @@ export interface WindowProps extends WindowPropsBasic, WindowPropsToken {
  */
 export const defaultsWindow = {
   indent: 4,
+  ariaHaspopup: 'dialog',
+  role: 'dialog',
   ...{
     // :default [!] System label / Системная метка
     axis: 'y',

package/src/constructors/Window/style.scss

@@ -1,6 +1,8 @@
 @use "@dxtmisha/styles/properties" as ui;
 
 @mixin mixinWindow {
+  --sys-type-body: "--NONE--";
+
   @include ui.initByCustom('opacity', 0);
   @include ui.initByCustom('transform', none);
   @include ui.initByCustom('transformPreparation', scale(.8));
@@ -235,6 +237,15 @@
     @include ui.contentVisibility(visible);
   }
 
+  @include ui.mediaPrefersReducedMotion {
+    &,
+    &__body,
+    &__background {
+      transition-delay: 0.1ms !important;
+      transition-duration: 0.1ms !important;
+    }
+  }
+
   @at-root {
     body[data-scroll="scroll"] {
       &:has(>[data-window-teleport]>#{ui.c('??-overscroll')}:not([data-window-menu="menu"])[data-status="display"]),

package/src/constructors/Window/types.ts

@@ -1,4 +1,4 @@
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import type { ConstrClass } from '@dxtmisha/functional'
 
 import type { ScrollbarComponentsInclude, ScrollbarEmitsInclude } from '../Scrollbar'
@@ -54,7 +54,7 @@ export interface WindowExpose {
    * Control item data for window management/
    * Данные элемента управления для управления окном
    */
-  control: WindowControlItem
+  control: ComputedRef<WindowControlItem>
 
   /**
    * Sets window open state/

package/src/functions/{getClassTegAStatic.ts → getClassTagAStatic.ts}

@@ -5,4 +5,4 @@
  * @param design design system prefix/ префикс дизайн-системы
  * @returns CSS class string/ строка CSS класса
  */
-export const getClassTegAStatic = (design: string) => `${design}-a--static`
+export const getClassTagAStatic = (design: string) => `${design}-a--static`

package/src/library.ts

@@ -1,4 +1,5 @@
 // Classes
+export * from './classes/AriaStaticInclude'
 export * from './classes/CaptionInclude'
 export * from './classes/DescriptionInclude'
 export * from './classes/EnabledInclude'
@@ -7,13 +8,20 @@ export * from './classes/LabelHighlightInclude'
 export * from './classes/LabelInclude'
 export * from './classes/LabelNumberInclude'
 export * from './classes/ModelInclude'
+export * from './classes/ModelValueInclude'
 export * from './classes/PrefixInclude'
 export * from './classes/SuffixInclude'
+export * from './classes/TabIndexInclude'
+export * from './classes/TextInclude'
+export * from './classes/TouchEventInclude'
+export * from './classes/field/FieldArrowInclude'
 export * from './classes/field/FieldAttributesInclude'
 export * from './classes/field/FieldChangeInclude'
 export * from './classes/field/FieldCodeInclude'
 export * from './classes/field/FieldElementInclude'
+export * from './classes/field/FieldEventInclude'
 export * from './classes/field/FieldInputCheckInclude'
+export * from './classes/field/FieldInputModeInclude'
 export * from './classes/field/FieldMatchInclude'
 export * from './classes/field/FieldPatternInclude'
 export * from './classes/field/FieldTypeInclude'
@@ -22,9 +30,10 @@ export * from './classes/field/FieldValueInclude'
 export * from './classes/field/FieldVisibilityInclude'
 
 // Functions
-export * from './functions/getClassTegAStatic'
+export * from './functions/getClassTagAStatic'
 
 // Types
+export * from './types/ariaTypes'
 export * from './types/captionTypes'
 export * from './types/descriptionTypes'
 export * from './types/enabledTypes'
@@ -33,4 +42,7 @@ export * from './types/fieldTypes'
 export * from './types/labelTypes'
 export * from './types/modelTypes'
 export * from './types/prefixTypes'
+export * from './types/roleTypes'
 export * from './types/suffixTypes'
+export * from './types/textTypes'
+export * from './types/touchEventTypes'