@dxtmisha/constructor 0.23.0 → 0.39.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/constructor",
   "private": false,
-  "version": "0.23.0",
+  "version": "0.39.3",
   "type": "module",
   "description": "Vue component constructors for DXT UI design system - ready-to-use constructors with TypeScript support and SCSS styling",
   "keywords": [
@@ -36,67 +36,182 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "dxt-library": "dxt-library",
-    "dxt-constructor": "dxt-constructor mask"
+    "dxt-types": "dxt-types",
+    "dxt-constructor": "dxt-constructor",
+    "prepublishOnly": "npm run dxt-library && npm run build"
   },
   "files": [
-    "src/",
+    "dist/",
+    "src/library/style.scss",
+    "src/constructors/**/*.scss",
+    "ai-types.txt",
     "README.md",
     "package.json",
     "LICENSE"
   ],
-  "main": "./src/library.ts",
-  "module": "./src/library.ts",
-  "types": "./src/library.ts",
+  "main": "./dist/library.js",
+  "module": "./dist/library.js",
+  "types": "./dist/library.d.ts",
   "exports": {
-    ".": "./src/library.ts",
-    "./Badge": "./src/constructors/Badge/index.ts",
-    "./Badge/style": "./src/constructors/Badge/style.scss",
-    "./Bars": "./src/constructors/Bars/index.ts",
-    "./Bars/style": "./src/constructors/Bars/style.scss",
-    "./Button": "./src/constructors/Button/index.ts",
-    "./Button/style": "./src/constructors/Button/style.scss",
-    "./Cell": "./src/constructors/Cell/index.ts",
-    "./Cell/style": "./src/constructors/Cell/style.scss",
-    "./Chip": "./src/constructors/Chip/index.ts",
-    "./Chip/style": "./src/constructors/Chip/style.scss",
-    "./Field": "./src/constructors/Field/index.ts",
-    "./Field/style": "./src/constructors/Field/style.scss",
-    "./FieldCounter": "./src/constructors/FieldCounter/index.ts",
-    "./FieldCounter/style": "./src/constructors/FieldCounter/style.scss",
-    "./FieldLabel": "./src/constructors/FieldLabel/index.ts",
-    "./FieldLabel/style": "./src/constructors/FieldLabel/style.scss",
-    "./FieldMessage": "./src/constructors/FieldMessage/index.ts",
-    "./FieldMessage/style": "./src/constructors/FieldMessage/style.scss",
-    "./Icon": "./src/constructors/Icon/index.ts",
-    "./Icon/style": "./src/constructors/Icon/style.scss",
-    "./Image": "./src/constructors/Image/index.ts",
-    "./Image/style": "./src/constructors/Image/style.scss",
-    "./List": "./src/constructors/List/index.ts",
-    "./List/style": "./src/constructors/List/style.scss",
-    "./ListGroup": "./src/constructors/ListGroup/index.ts",
-    "./ListGroup/style": "./src/constructors/ListGroup/style.scss",
-    "./ListItem": "./src/constructors/ListItem/index.ts",
-    "./ListItem/style": "./src/constructors/ListItem/style.scss",
-    "./ListMenu": "./src/constructors/ListMenu/index.ts",
-    "./ListMenu/style": "./src/constructors/ListMenu/style.scss",
-    "./Mask": "./src/constructors/Mask/index.ts",
-    "./Mask/style": "./src/constructors/Mask/style.scss",
-    "./Menu": "./src/constructors/Menu/index.ts",
-    "./Menu/style": "./src/constructors/Menu/style.scss",
-    "./MotionTransform": "./src/constructors/MotionTransform/index.ts",
-    "./MotionTransform/style": "./src/constructors/MotionTransform/style.scss",
-    "./Motiontransform": "./src/constructors/Motiontransform/index.ts",
-    "./Motiontransform/style": "./src/constructors/Motiontransform/style.scss",
-    "./Progress": "./src/constructors/Progress/index.ts",
-    "./Progress/style": "./src/constructors/Progress/style.scss",
-    "./Ripple": "./src/constructors/Ripple/index.ts",
-    "./Ripple/style": "./src/constructors/Ripple/style.scss",
-    "./Scrollbar": "./src/constructors/Scrollbar/index.ts",
-    "./Scrollbar/style": "./src/constructors/Scrollbar/style.scss",
-    "./Skeleton": "./src/constructors/Skeleton/index.ts",
-    "./Skeleton/style": "./src/constructors/Skeleton/style.scss",
-    "./Window": "./src/constructors/Window/index.ts",
-    "./Window/style": "./src/constructors/Window/style.scss"
+    ".": "./dist/library.js",
+    "./Accordion": {
+      "import": "./dist/accordion.js",
+      "types": "./dist/constructors/Accordion/index.d.ts"
+    },
+    "./ActionSheet": {
+      "import": "./dist/actionSheet.js",
+      "types": "./dist/constructors/ActionSheet/index.d.ts"
+    },
+    "./Actions": {
+      "import": "./dist/actions.js",
+      "types": "./dist/constructors/Actions/index.d.ts"
+    },
+    "./Anchor": {
+      "import": "./dist/anchor.js",
+      "types": "./dist/constructors/Anchor/index.d.ts"
+    },
+    "./Arrow": {
+      "import": "./dist/arrow.js",
+      "types": "./dist/constructors/Arrow/index.d.ts"
+    },
+    "./Badge": {
+      "import": "./dist/badge.js",
+      "types": "./dist/constructors/Badge/index.d.ts"
+    },
+    "./Bars": {
+      "import": "./dist/bars.js",
+      "types": "./dist/constructors/Bars/index.d.ts"
+    },
+    "./Block": {
+      "import": "./dist/block.js",
+      "types": "./dist/constructors/Block/index.d.ts"
+    },
+    "./Button": {
+      "import": "./dist/button.js",
+      "types": "./dist/constructors/Button/index.d.ts"
+    },
+    "./Cell": {
+      "import": "./dist/cell.js",
+      "types": "./dist/constructors/Cell/index.d.ts"
+    },
+    "./Chip": {
+      "import": "./dist/chip.js",
+      "types": "./dist/constructors/Chip/index.d.ts"
+    },
+    "./ChipGroup": {
+      "import": "./dist/chipGroup.js",
+      "types": "./dist/constructors/ChipGroup/index.d.ts"
+    },
+    "./Dialog": {
+      "import": "./dist/dialog.js",
+      "types": "./dist/constructors/Dialog/index.d.ts"
+    },
+    "./Field": {
+      "import": "./dist/field.js",
+      "types": "./dist/constructors/Field/index.d.ts"
+    },
+    "./FieldCounter": {
+      "import": "./dist/fieldCounter.js",
+      "types": "./dist/constructors/FieldCounter/index.d.ts"
+    },
+    "./FieldLabel": {
+      "import": "./dist/fieldLabel.js",
+      "types": "./dist/constructors/FieldLabel/index.d.ts"
+    },
+    "./FieldMessage": {
+      "import": "./dist/fieldMessage.js",
+      "types": "./dist/constructors/FieldMessage/index.d.ts"
+    },
+    "./Icon": {
+      "import": "./dist/icon.js",
+      "types": "./dist/constructors/Icon/index.d.ts"
+    },
+    "./Image": {
+      "import": "./dist/image.js",
+      "types": "./dist/constructors/Image/index.d.ts"
+    },
+    "./Input": {
+      "import": "./dist/input.js",
+      "types": "./dist/constructors/Input/index.d.ts"
+    },
+    "./List": {
+      "import": "./dist/list.js",
+      "types": "./dist/constructors/List/index.d.ts"
+    },
+    "./ListGroup": {
+      "import": "./dist/listGroup.js",
+      "types": "./dist/constructors/ListGroup/index.d.ts"
+    },
+    "./ListItem": {
+      "import": "./dist/listItem.js",
+      "types": "./dist/constructors/ListItem/index.d.ts"
+    },
+    "./ListMenu": {
+      "import": "./dist/listMenu.js",
+      "types": "./dist/constructors/ListMenu/index.d.ts"
+    },
+    "./Mask": {
+      "import": "./dist/mask.js",
+      "types": "./dist/constructors/Mask/index.d.ts"
+    },
+    "./Menu": {
+      "import": "./dist/menu.js",
+      "types": "./dist/constructors/Menu/index.d.ts"
+    },
+    "./Modal": {
+      "import": "./dist/modal.js",
+      "types": "./dist/constructors/Modal/index.d.ts"
+    },
+    "./MotionTransform": {
+      "import": "./dist/motionTransform.js",
+      "types": "./dist/constructors/MotionTransform/index.d.ts"
+    },
+    "./Page": {
+      "import": "./dist/page.js",
+      "types": "./dist/constructors/Page/index.d.ts"
+    },
+    "./Progress": {
+      "import": "./dist/progress.js",
+      "types": "./dist/constructors/Progress/index.d.ts"
+    },
+    "./Ripple": {
+      "import": "./dist/ripple.js",
+      "types": "./dist/constructors/Ripple/index.d.ts"
+    },
+    "./Scrollbar": {
+      "import": "./dist/scrollbar.js",
+      "types": "./dist/constructors/Scrollbar/index.d.ts"
+    },
+    "./Section": {
+      "import": "./dist/section.js",
+      "types": "./dist/constructors/Section/index.d.ts"
+    },
+    "./Select": {
+      "import": "./dist/select.js",
+      "types": "./dist/constructors/Select/index.d.ts"
+    },
+    "./SelectValue": {
+      "import": "./dist/selectValue.js",
+      "types": "./dist/constructors/SelectValue/index.d.ts"
+    },
+    "./Skeleton": {
+      "import": "./dist/skeleton.js",
+      "types": "./dist/constructors/Skeleton/index.d.ts"
+    },
+    "./TextareaAutosize": {
+      "import": "./dist/textareaAutosize.js",
+      "types": "./dist/constructors/TextareaAutosize/index.d.ts"
+    },
+    "./Tooltip": {
+      "import": "./dist/tooltip.js",
+      "types": "./dist/constructors/Tooltip/index.d.ts"
+    },
+    "./Window": {
+      "import": "./dist/window.js",
+      "types": "./dist/constructors/Window/index.d.ts"
+    },
+    "./ai-types": "./ai-types.txt",
+    "./style.scss": "./src/library/style.scss"
   },
   "buildOptions": {
     "name": "@dxtmisha/constructor",
@@ -108,8 +223,8 @@
     "node": ">=18.0.0"
   },
   "peerDependencies": {
-    "@dxtmisha/functional": ">=1.0.3",
-    "vue": ">=3.0.0"
+    "@dxtmisha/functional": "*",
+    "vue": "*"
   },
   "peerDependenciesMeta": {
     "@dxtmisha/functional": {
@@ -121,4 +236,4 @@
   },
   "dependencies": {},
   "sideEffects": false
-}
+}

package/src/constructors/Accordion/style.scss

@@ -0,0 +1,12 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinAccordion {
+  @at-root {
+    &--divider + &--divider,
+    [data-divider="divider"] + &[data-divider="divider"] {
+      border-top-style: solid;
+      border-top-width: ui.v('??borderWidth');
+      @include ui.borderColor(ui.v('??borderColor'), ui.v('??borderOpacity'));
+    }
+  }
+}

package/src/constructors/ActionSheet/style.scss

@@ -0,0 +1,25 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Modal/style" as modal;
+
+@mixin mixinActionSheet {
+  @include modal.mixinModal;
+
+  top: var(--sys-touch-move-y, 0);
+
+  &__footer {
+    justify-content: center;
+  }
+
+  &__tab {
+    display: none;
+
+    @media (hover: none) and (pointer: coarse) {
+      display: block;
+      margin: auto;
+    }
+  }
+
+  &__touch {
+    touch-action: none;
+  }
+}

package/src/constructors/Actions/style.scss

@@ -0,0 +1,11 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinActions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  &__spacer {
+    @include ui.flexDynamic;
+  }
+}

package/src/constructors/Anchor/style.scss

@@ -0,0 +1,10 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinAnchor {
+  display: inline-flex;
+
+  color: inherit;
+  text-decoration: none;
+
+  cursor: pointer;
+}

package/src/constructors/Arrow/style.scss

@@ -0,0 +1,133 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinArrow {
+  @include ui.initByCustom('arrowWidth', 8px);
+  @include ui.initByCustom('arrowHeight', 8px);
+
+  @include ui.initByCustom('sys.url.markBorder', unset);
+  @include ui.initByCustom('sys.background', transparent);
+  @include ui.initByCustom('sys.borderWidth', 0px);
+  @include ui.initByCustom('sys.borderColor', transparent);
+  @include ui.initByCustom('sys.borderRadius', 0px);
+  @include ui.initByCustom('sys.clipPath', unset);
+
+  @include ui.initByCustom('sys.press', calc((#{ui.v('??arrowHeight')} * 2) + (#{ui.v('??sys.borderWidth')} * 2)));
+  @include ui.initByCustom('sys.main.increase', calc(100% + (#{ui.v('??sys.borderWidth')} * 2)));
+  @include ui.initByCustom('sys.area.increase', calc(100% + (#{ui.v('??arrowHeight')} * 2)));
+  @include ui.initByCustom('sys.arrow.translateX', 0px);
+  @include ui.initByCustom('sys.arrow.translateY', 0px);
+  @include ui.initByCustom('sys.arrow.translateShift', 50%);
+
+  @include ui.absolute(calc(#{ui.v('??sys.borderWidth')} * -1));
+  z-index: 8;
+
+  width: ui.v('??sys.main.increase');
+  height: ui.v('??sys.main.increase');
+
+  border-style: inherit;
+  border-radius: inherit;
+
+  pointer-events: none;
+
+  &__parent {
+    &[data-arrow="border"] {
+      border-color: transparent !important;
+    }
+  }
+
+  &__arrow,
+  &__arrowLine {
+    @include ui.translateX(ui.v('??sys.arrow.translateX'));
+    @include ui.translateY(ui.v('??sys.arrow.translateY'));
+  }
+
+  &__arrow {
+    fill: ui.v('??sys.background');
+    stroke: none;
+  }
+
+  &__arrowLine {
+    fill: none;
+    stroke: ui.v('??sys.borderColor');
+    stroke-width: ui.v('??sys.borderWidth');
+    stroke-linejoin: round;
+    stroke-linecap: round;
+  }
+
+  &__arrowArea {
+    @include ui.absolute(calc(#{ui.v('??arrowHeight')} * -1));
+
+    width: ui.v('??sys.area.increase');
+    height: ui.v('??sys.area.increase');
+  }
+
+  &__border {
+    @include ui.absolute;
+
+    border-width: ui.v('??sys.borderWidth');
+    border-color: ui.v('??sys.borderColor');
+    border-radius: inherit;
+
+    clip-path: ui.v('??sys.clipPath');
+  }
+
+  &__borderHidden {
+    width: ui.v('??arrowWidth');
+    height: ui.v('??arrowHeight');
+
+    @include ui.translateX(ui.v('??sys.arrow.translateX'));
+    @include ui.translateY(ui.v('??sys.arrow.translateY'));
+  }
+
+  &--direction {
+    &--top {
+      @include ui.initByCustom('sys.arrow.translateX', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowWidth')} / 2));
+      @include ui.initByCustom('sys.arrow.translateY', 0px);
+    }
+
+    &--bottom {
+      @include ui.initByCustom('sys.arrow.translateX', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowWidth')} / 2));
+      @include ui.initByCustom('sys.arrow.translateY', calc(100% - #{ui.v('??arrowHeight')}));
+    }
+
+    &--left {
+      @include ui.initByCustom('sys.arrow.translateX', 0px);
+      @include ui.initByCustom('sys.arrow.translateY', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowHeight')} / 2));
+    }
+
+    &--right {
+      @include ui.initByCustom('sys.arrow.translateX', calc(100% - #{ui.v('??arrowWidth')}));
+      @include ui.initByCustom('sys.arrow.translateY', calc(ui.v('??sys.arrow.translateShift') - #{ui.v('??arrowHeight')} / 2));
+    }
+
+    &--hide {
+      @include ui.subclass('arrowArea') {
+        display: none;
+      }
+    }
+  }
+
+  &--position {
+    &--auto {
+      @include ui.initByCustom('sys.arrow.translateShift.basic', #{calc(#{ui.v('??sys.shift')} + #{ui.v('??arrowWidth')})});
+      @include ui.initByCustom('sys.arrow.translateShift.max', max(#{ui.v('??sys.arrow.translateShift.basic')}, #{ui.v('??sys.borderRadius')}));
+      @include ui.initByCustom('sys.arrow.translateShift', ui.v('??sys.arrow.translateShift.basic'));
+
+      @include ui.state('direction') {
+        &--top,
+        &--bottom {
+          @include ui.subclass('borderHidden') {
+            @include ui.translateX(calc(#{ui.v('??sys.arrow.translateX')} - #{ui.v('??arrowHeight')}));
+          }
+        }
+
+        &--left,
+        &--right {
+          @include ui.subclass('borderHidden') {
+            @include ui.translateY(calc(#{ui.v('??sys.arrow.translateY')} - #{ui.v('??arrowHeight')}));
+          }
+        }
+      }
+    }
+  }
+}

package/src/constructors/Bars/style.scss

@@ -5,6 +5,10 @@
 
   transition: background-color ui.v('d.sys.transitionDuration.sm') linear;
 
+  @include ui.mediaPrefersReducedMotion {
+    transition: none;
+  }
+
   &__context,
   &__label {
     @include ui.flexDynamic;

package/src/constructors/Block/style.scss

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

package/src/constructors/Button/style.scss

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

package/src/constructors/Cell/style.scss

@@ -38,7 +38,7 @@
 
   &__body {
     flex-basis: 100%;
-    order: 12;
+    order: 1999999;
   }
 
   &:has(&__body) {

package/src/constructors/ChipGroup/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinChipGroup {
+  display: flex;
+  flex-wrap: wrap;
+}

package/src/constructors/Dialog/style.scss

@@ -0,0 +1,18 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Modal/style" as modal;
+
+@mixin mixinDialog {
+  @include modal.mixinModal;
+
+  &__information {
+    @include ui.flexY;
+    @include ui.paddingX(ui.v('??paddingX'));
+    @include ui.paddingY(ui.v('??paddingY'));
+
+    text-align: center;
+  }
+
+  &__footer {
+    justify-content: center;
+  }
+}

package/src/constructors/Field/style.scss

@@ -105,6 +105,7 @@
     max-width: 100%;
 
     border-radius: inherit;
+    outline: transparent solid 0;
 
     transition-timing-function: inherit;
     transition-duration: inherit;
@@ -124,7 +125,9 @@
       min-height: ui.v('??height');
 
       font: inherit;
-      line-height: calc((#{ui.v('??sys.half') - ui.v('??sys.title.half')}) * 2);
+      letter-spacing: inherit;
+      text-align: left;
+      line-height: calc(#{ui.v('??sys.title.half')} * 2);
 
       background-color: transparent;
       border: none;
@@ -146,6 +149,12 @@
       display: none;
     }
 
+    &__focus {
+      @include ui.absolute;
+      z-index: 8;
+      opacity: 0;
+    }
+
     &__title {
       display: flex;
       @include ui.absoluteTop;
@@ -355,6 +364,9 @@
 
   @include ui.focus($this) {
     @include ui.subclass('body') {
+      outline-width: ui.v('??focusWithin.outlineWidth');
+      @include ui.outlineColor(ui.v('??focusWithin.outlineColor'), ui.v('??focusWithin.outlineOpacity'));
+
       &__title {
         @include ui.color(ui.v('??focusWithin.color'), ui.v('??focusWithin.colorOpacity'));
       }
@@ -514,23 +526,37 @@
     width: 100%;
   }
 
-  &--right {
-    @include ui.subclass('body') {
-      &__scoreboard {
-        &__space {
-          @include ui.marginRight(0);
+  &--align {
+    &--right {
+      @include ui.subclass('body') {
+        &__input {
+          text-align: right;
+        }
+
+        &__scoreboard__space {
+          flex-direction: row-reverse;
         }
       }
+
+      @include ui.subclass('caption') {
+        @include ui.textAlign('right');
+      }
     }
 
-    @include ui.subclass('body') {
-      &__input {
-        text-align: right;
+    &--center {
+      @include ui.subclass('caption') {
+        display: none;
+      }
+
+      @include ui.subclass('body') {
+        &__input {
+          text-align: center;
+        }
       }
     }
   }
 
-  &--align {
+  &--arrowAlign {
     &--right {
       @include ui.subclass('previous') {
         order: 94;
@@ -542,15 +568,5 @@
         order: 6;
       }
     }
-
-    &--center {
-      @include ui.state('arrow') {
-        @include ui.subclass('body') {
-          &__input {
-            text-align: center;
-          }
-        }
-      }
-    }
   }
 }

package/src/constructors/FieldMessage/style.scss

@@ -6,8 +6,23 @@
 
   @include ui.paddingX(ui.v('??-padding', 0));
 
-  &__info {
+  &__info,
+  &__error {
     flex-grow: 1;
     flex-shrink: 1;
   }
+
+  &__error {
+    display: none;
+  }
+
+  &--validation {
+    @include ui.subclass('info') {
+      display: none;
+    }
+
+    @include ui.subclass('error') {
+      display: unset;
+    }
+  }
 }