@dxtmisha/constructor 0.39.5 → 0.52.0

package/src/constructors/Field/properties.json

@@ -0,0 +1,92 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "space": {
+    "_type": "var"
+  },
+  "height": {
+    "_type": "var"
+  },
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "border-radius": {
+    "_type": "var"
+  },
+  "focusWithin": {
+    "_type": "var"
+  },
+  "validation": {
+    "_type": "var"
+  },
+  "#body": {
+    "#input": {},
+    "#title": {
+      "#label": {
+        "#text": {}
+      }
+    },
+    "#scoreboard": {
+      "#left": {},
+      "#right": {},
+      "#space": {},
+      "#input": {}
+    },
+    "#border": {}
+  },
+  "#required": {},
+  "focus": {},
+  "active": {},
+  "~selected": {},
+  "readonly": {},
+  "disabled": {},
+  "~block": {},
+  "~isValue": {},
+  "~basic": {
+    "_category": "style"
+  },
+  "~boxed": {
+    "_category": "style"
+  },
+  "~tonal": {
+    "_category": "style"
+  },
+  "~filled": {
+    "_category": "style"
+  },
+  "~outlined": {
+    "_category": "style"
+  },
+  "~classic": {
+    "_category": "style"
+  },
+  "~arrowCarousel": {},
+  "~arrowStepper": {},
+  "~arrowAlign": {
+    "~center": {},
+    "~right": {},
+    "~left": {},
+    "_default": "right"
+  },
+  "~cancel": {
+    "~auto": {},
+    "~always": {},
+    "~none": {},
+    "_default": "auto"
+  },
+  "~align": {
+    "~center": {},
+    "~right": {},
+    "~left": {}
+  },
+  "~width": {
+    "_style": true
+  }
+}

package/src/constructors/Field/style.scss

@@ -31,6 +31,8 @@
       border-left-width: ui.v('??sys.border.width', 0);
       @include ui.borderColor(ui.v('??sys.border.color'));
       @include ui.borderOpacity(ui.v('??sys.border.opacity', 1));
+
+      pointer-events: none;
     }
   }
 

package/src/constructors/FieldCounter/properties.json

@@ -0,0 +1,4 @@
+{
+  "white-space": "nowrap",
+  "#aria": {}
+}

package/src/constructors/FieldCounter/style.scss

@@ -1,4 +1,9 @@
 @use "@dxtmisha/styles/properties" as ui;
 
 @mixin mixinFieldCounter {
+  &__aria {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
 }

package/src/constructors/FieldLabel/properties.json

@@ -0,0 +1,4 @@
+{
+  "#label": {},
+  "#required": {}
+}

package/src/constructors/FieldMessage/properties.json

@@ -0,0 +1,10 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "#info": {},
+  "#error": {},
+  "~validation": {
+    "_prop": false
+  }
+}

package/src/constructors/Grid/properties.json

@@ -0,0 +1,6 @@
+{
+  "columns": {
+    "value": "12",
+    "_type": "var"
+  }
+}

package/src/constructors/Grid/style.scss

@@ -0,0 +1,8 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinGrid {
+  display: grid;
+  grid-template-columns: repeat(ui.v('??columns', 12), 1fr);
+  grid-template-rows: auto;
+  align-content: stretch;
+}

package/src/constructors/GridItem/properties.json

@@ -0,0 +1,40 @@
+{
+  "base": {
+    "1": {
+      "grid-column": "span 1"
+    },
+    "2": {
+      "grid-column": "span 2"
+    },
+    "3": {
+      "grid-column": "span 3"
+    },
+    "4": {
+      "grid-column": "span 4"
+    },
+    "5": {
+      "grid-column": "span 5"
+    },
+    "6": {
+      "grid-column": "span 6"
+    },
+    "7": {
+      "grid-column": "span 7"
+    },
+    "8": {
+      "grid-column": "span 8"
+    },
+    "9": {
+      "grid-column": "span 9"
+    },
+    "10": {
+      "grid-column": "span 10"
+    },
+    "11": {
+      "grid-column": "span 11"
+    },
+    "12": {
+      "grid-column": "span 12"
+    }
+  }
+}

package/src/constructors/GridItem/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinGridItem {
+
+}

package/src/constructors/Group/properties.json

@@ -0,0 +1,3 @@
+{
+  "link|block": "{d.block}"
+}

package/src/constructors/Group/style.scss

@@ -0,0 +1,6 @@
+@use "@dxtmisha/styles/properties" as ui;
+@use "../Block/style" as block;
+
+@mixin mixinGroup {
+    @include block.mixinBlock;
+}

package/src/constructors/HorizontalScroll/properties.json

@@ -0,0 +1,26 @@
+{
+  "marginLeft": {
+    "_type": "var"
+  },
+  "marginFlushX": {
+    "_type": "var"
+  },
+  "~flush": {
+    "_default": true
+  },
+  "~align": {
+    "block": {
+      "justify-content": "stretch"
+    },
+    "center": {
+      "justify-content": "center"
+    },
+    "left": {
+      "justify-content": "flex-start"
+    },
+    "right": {
+      "justify-content": "flex-end"
+    },
+    "_default": "stretch"
+  }
+}

package/src/constructors/HorizontalScroll/style.scss

@@ -0,0 +1,27 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinHorizontalScroll {
+  @include ui.initByCustom('marginLeft', 0);
+
+  display: grid;
+  grid-auto-flow: column;
+  align-items: stretch;
+
+  overflow-x: auto;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline-start: ui.v('??marginLeft');
+  overscroll-behavior-x: contain;
+
+  &__item {
+    scroll-snap-align: start;
+  }
+
+  &--flush {
+    @include ui.initByCustom('sys.flush', ui.v('??marginFlushX', ui.v('?grid.marginX')));
+
+    scroll-padding-inline-start: calc(#{ui.v('??marginLeft')} + #{ui.v('??sys.flush')});
+    @include ui.marginX(calc(#{ui.v('??sys.flush')} * -1));
+    @include ui.paddingX(ui.v('??sys.flush'));
+  }
+}

package/src/constructors/Icon/properties.json

@@ -0,0 +1,25 @@
+{
+  "width": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~asPalette": {},
+  "~dir": {},
+  "~overlay": {},
+  "~dynamic": {},
+  "~start": {
+    "_category": "order"
+  },
+  "~end": {
+    "_category": "order"
+  },
+  "~high": {},
+  "~animation-type": {
+    "~type1": {},
+    "~type2": {},
+    "_default": "type1"
+  },
+  "~animation-show": {}
+}

package/src/constructors/Image/properties.json

@@ -0,0 +1,17 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "~turn": {},
+  "~disabled": {},
+  "~hide": {},
+  "~adaptive": {},
+  "~size": {
+    "~auto": {},
+    "~contain": {},
+    "~cover": {}
+  }
+}

package/src/constructors/Input/properties.json

@@ -0,0 +1,2 @@
+{
+}

package/src/constructors/List/properties.json

@@ -0,0 +1,16 @@
+{
+  "#space": {},
+  "#line": {},
+  "#subtitle": {},
+  "#html": {},
+  "#management": {},
+  "#group": {},
+  "#menu": {},
+  "#menuGroup": {},
+  "~axis": {
+    "~x": {},
+    "~y": {},
+    "_default": "y"
+  },
+  "~divider": {}
+}

package/src/constructors/ListGroup/properties.json

@@ -0,0 +1,15 @@
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#list": {},
+  "~open": {},
+  "~divider": {}
+}

package/src/constructors/ListItem/properties.json

@@ -0,0 +1,52 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "shift": {
+    "_type": "var"
+  },
+  "height": {
+    "_type": "var"
+  },
+  "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}",
+  "#body": {},
+  "#context": {},
+  "#label": {},
+  "#highlight": {},
+  "#prefix": {},
+  "#caption": {},
+  "#description": {},
+  "#icon": {},
+  "#trailing": {},
+  "#badge": {},
+  "#input": {},
+  "~focus": {},
+  "~open": {},
+  "~selected": {},
+  "~selectedChild": {},
+  "~readonly": {},
+  "~disabled": {},
+  "~iconTop": {},
+  "~iconAlign": {
+    "~center": {},
+    "~edge": {},
+    "_default": "center"
+  },
+  "~fill": {
+    "_type": "state",
+    "_var": true,
+    "_style": true
+  },
+  "~divider": {}
+}

package/src/constructors/ListItem/style.scss

@@ -11,6 +11,8 @@
   --sys-height: #{ui.v('??height', 0)};
   min-height: ui.v('??height', 0);
 
+  border: none;
+  background-color: transparent;
   cursor: pointer;
 
   &__icon,

package/src/constructors/ListMenu/properties.json

@@ -0,0 +1,19 @@
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#list": {},
+  "~open": {},
+  "~axis": {
+    "x": {},
+    "y": {}
+  },
+  "~divider": {}
+}

package/src/constructors/Mask/properties.json

@@ -0,0 +1,30 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "caret-opacity": {
+    "_type": "var"
+  },
+  "#input": {},
+  "#character": {
+    "#item": {
+      "~placeholder": {}
+    }
+  },
+  "~visible": {
+    "_default": true
+  },
+  "~visiblePartly": {},
+  "~align": {
+    "~center": {},
+    "~left": {},
+    "~right": {}
+  },
+  "~dir": {
+    "~ltr": {},
+    "~rtl": {}
+  }
+}

package/src/constructors/Mask/style.scss

@@ -16,7 +16,6 @@
 
   &__input {
     box-sizing: border-box;
-    position: absolute;
     @include ui.inset(0);
     z-index: 4;
 
@@ -41,6 +40,10 @@
     }
   }
 
+  & &__input {
+    position: absolute;
+  }
+
   &__character {
     display: inline-flex;
     align-items: center;
@@ -81,6 +84,7 @@
   }
 
   &--align {
+
     &--right,
     &--end {
       @include ui.initByCustom('sys.align', ui.dirRight());
@@ -99,4 +103,4 @@
       }
     }
   }
-}
+}

package/src/constructors/Menu/properties.json

@@ -0,0 +1,17 @@
+{
+  "barsDisplay": {
+    "_type": "var"
+  },
+  "#bars": {},
+  "#list": {},
+  "~hideList": {},
+  "~barsAdaptive": {
+    "showAlways": {
+      "barsDisplay": "flex"
+    },
+    "group|show": {
+      "link|barsAdaptive-show": "{??barsAdaptive.showAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/Modal/properties.json

@@ -0,0 +1,17 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#body": {},
+  "#footer": {},
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  }
+}

package/src/constructors/MotionAxis/properties.json

@@ -0,0 +1,15 @@
+{
+  "#slide": {},
+  "~axis": {
+    "x": {},
+    "y": {},
+    "z": {},
+    "_default": "x"
+  },
+  "~direction": {
+    "next": {},
+    "back": {},
+    "auto": {},
+    "_default": "auto"
+  }
+}

package/src/constructors/MotionAxis/style.scss

@@ -0,0 +1,110 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinMotionAxis {
+  @include ui.initByCustom('transition-function', ui.v('d.ref.transitionFunction.e40i80'));
+  @include ui.initByCustom('transition-duration', ui.v('d.sys.transitionDuration.axis'));
+
+  position: relative;
+
+  &__slide {
+    @include ui.initByCustom('transform', calc(ui.v('??dimension', 128px) * ui.v('??direction', 0) * ui.v('??previous', +1)));
+    display: none;
+    position: relative;
+    opacity: 0;
+
+    &--previous,
+    &--preparation,
+    &--active {
+      display: block;
+    }
+
+    &--previous {
+      @include ui.initByCustom('scale', ui.v('??scalePrevious', 1));
+      @include ui.initByCustom('previous', -1);
+
+      position: absolute;
+      top: ui.v('??sys.top');
+      @include ui.left(ui.v('??sys.left'));
+
+      width: ui.v('??sys.width');
+      height: ui.v('??sys.height');
+      transition: opacity 90ms ui.v('d.ref.transitionFunction.e40i0'),
+      transform ui.v('??transition-duration') ui.v('??transition-function'),
+      translate ui.v('??transition-duration') ui.v('??transition-function'),
+      scale ui.v('??transition-duration') ui.v('??transition-function');
+    }
+
+    &--preparation {
+      @include ui.initByCustom('scale', ui.v('??scalePreparation', 1));
+    }
+
+    &--active {
+      @include ui.initByCustom('transform', 0px);
+      @include ui.initByCustom('scale', none);
+
+      z-index: 1;
+
+      opacity: 1;
+
+      transition: opacity 210ms ui.v('d.ref.transitionFunction.e0i80') 90ms,
+      transform ui.v('??transition-duration') ui.v('??transition-function'),
+      translate ui.v('??transition-duration') ui.v('??transition-function'),
+      scale ui.v('??transition-duration') ui.v('??transition-function');
+    }
+  }
+
+  &__scroll {
+    &--hidden {
+      overflow: hidden;
+    }
+  }
+
+  &--start {
+    height: ui.v('??sys.height', auto);
+  }
+
+  &--move {
+    height: ui.v('??sys.next.height', auto);
+    transition: height ui.v('??transition-duration') ui.v('??transition-function');
+  }
+
+  &--axis {
+    &--x {
+      > {
+        @include ui.subclass('slide') {
+          @include ui.translateX(ui.v('??transform'));
+        }
+      }
+    }
+
+    &--y {
+      > {
+        @include ui.subclass('slide') {
+          @include ui.translateY(ui.v('??transform'));
+        }
+      }
+    }
+
+    &--z {
+      > {
+        @include ui.subclass('slide') {
+          @include ui.scale(ui.v('??scale'));
+        }
+      }
+    }
+  }
+
+  &--direction {
+    &--next {
+      @include ui.initByCustom('direction', var(--d-dir));
+      @include ui.initByCustom('scalePreparation', .8);
+      @include ui.initByCustom('scalePrevious', 1.1);
+    }
+
+    &--back {
+      @include ui.initByCustom('direction', calc(var(--d-dir) * -1));
+      @include ui.initByCustom('scalePreparation', 1.1);
+      @include ui.initByCustom('scalePrevious', .8);
+    }
+  }
+}