@dxtmisha/constructor 0.39.5 → 0.52.0

package/src/constructors/MotionTransform/properties.json

@@ -0,0 +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": {
+      "=sys-type-body": "unset"
+    },
+    "group|plane": {
+      "link|plane": "{??adaptive.planeAlways}",
+      "_type": "media-group"
+    }
+  }
+}

package/src/constructors/Page/properties.json

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

package/src/constructors/Progress/properties.json

@@ -0,0 +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": {}
+}

package/src/constructors/Progress/style.scss

@@ -70,6 +70,8 @@
   }
 
   &--linear {
+    left: 0;
+    right: 0;
     @include ui.paddingX(0);
 
     width: 100%;

package/src/constructors/Ripple/properties.json

@@ -0,0 +1,9 @@
+{
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "#item": {}
+}

package/src/constructors/Scrollbar/properties.json

@@ -0,0 +1,33 @@
+{
+  "size": {
+    "_type": "var"
+  },
+  "background": {
+    "_type": "var"
+  },
+  "backgroundOpacity": {
+    "_type": "var"
+  },
+  "thumb": {
+    "background": {},
+    "opacity": {},
+    "rounded": {},
+    "hover": {
+      "opacity": {}
+    },
+    "_type": "var"
+  },
+  "outline": {
+    "width": {},
+    "color": {},
+    "opacity": {},
+    "_type": "var"
+  },
+  "~visible": {},
+  "~divider": {},
+  "~divider-top": {},
+  "~divider-bottom": {},
+  "~divider-hide": {},
+  "~inverse": {},
+  "~standard": {}
+}

package/src/constructors/Section/properties.json

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

package/src/constructors/Select/properties.json

@@ -0,0 +1,3 @@
+{
+  "#input": {}
+}

package/src/constructors/SelectValue/properties.json

@@ -0,0 +1,7 @@
+{
+  "#item": {},
+  "#trailing": {},
+  "~placeholder": {
+    "_prop": false
+  }
+}

package/src/constructors/Skeleton/properties.json

@@ -0,0 +1,24 @@
+{
+  "color": {
+    "_type": "var"
+  },
+  "color-opacity": {
+    "_type": "var"
+  },
+  "background-color": {
+    "_type": "var"
+  },
+  "background-opacity": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "opacity": {
+    "_type": "var"
+  },
+  "~active": {}
+}

package/src/constructors/Snackbar/properties.json

@@ -0,0 +1,95 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "transform-preparation": {
+    "_type": "var"
+  },
+  "transform-origin": {
+    "_type": "var"
+  },
+  "#item": {},
+  "#space": {},
+  "#priority": {},
+  "~full": {
+    "#space": {
+      "flex-grow": "1"
+    }
+  },
+  "~all": {
+    "& aside:nth-of-type(-n+4)": {
+      "display": "block"
+    }
+  },
+  "~limit": {
+    "~1": {
+      "& div:nth-of-type(n+2)": {
+        "display": "none"
+      }
+    },
+    "~2": {
+      "& div:nth-of-type(n+3)": {
+        "display": "none"
+      }
+    },
+    "~4": {
+      "& div:nth-of-type(n+5)": {
+        "display": "none"
+      }
+    },
+    "~6": {
+      "& div:nth-of-type(n+7)": {
+        "display": "none"
+      }
+    },
+    "~8": {
+      "& div:nth-of-type(n+9)": {
+        "display": "none"
+      }
+    }
+  },
+  "~vertical": {
+    "~top": {
+      "justify-content": "flex-start"
+    },
+    "~bottom": {
+      "justify-content": "flex-end"
+    }
+  },
+  "~horizontal": {
+    "~right": {
+      "align-items": "flex-end",
+      "right": "{??paddingX}"
+    },
+    "~left": {
+      "align-items": "flex-start",
+      "left": "{??paddingX}"
+    },
+    "~block": {
+      "align-items": "stretch",
+      "left": "{??paddingX}",
+      "right": "{??paddingX}"
+    }
+  },
+  "~origin": {
+    "~topToBottom": {
+      "transform-preparation": "translateY(-64px)",
+      "transform-origin": "top center"
+    },
+    "~bottomToTop": {
+      "transform-preparation": "translateY(64px)",
+      "transform-origin": "bottom center"
+    },
+    "~rightToLeft": {
+      "transform-preparation": "translateX(calc(64px * #{ui.isDir()}))",
+      "transform-origin": "center #{ui.dirRight()}"
+    },
+    "~leftToRight": {
+      "transform-preparation": "translateX(calc(-64px * #{ui.isDir()}))",
+      "transform-origin": "center #{ui.dirLeft()}"
+    }
+  }
+}

package/src/constructors/Snackbar/style.scss

@@ -0,0 +1,58 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSnackbar {
+  @include ui.flexY;
+  position: fixed;
+  z-index: 16384;
+
+  top: ui.v('??paddingY');
+  bottom: ui.v('??paddingY');
+
+  overflow: visible;
+
+  @include ui.scrollbarHide;
+
+  pointer-events: none;
+
+  &__item {
+    display: block;
+    opacity: 1;
+    pointer-events: visible;
+
+    transform-origin: ui.v('??transformOrigin', center);
+    transition: opacity #{ui.v('d.sys.transitionDuration.fade.exit')} linear;
+
+    animation: ui.n('??item-show') ui.v('d.sys.transitionDuration.fade.enter') ui.v('d.sys.transitionFunction.deceleration');
+
+    @include ui.state('hide') {
+      opacity: 0;
+    }
+  }
+
+  aside:nth-of-type(n+2) {
+    display: none;
+  }
+
+  &__priority {
+    order: 8;
+  }
+
+  &__space {
+    order: 4;
+  }
+
+  @keyframes #{ui.n('??item-show')} {
+    0% {
+      opacity: 0;
+      transform: ui.v('??transformPreparation', none);
+    }
+
+    30% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: none;
+    }
+  }
+}

package/src/constructors/SnackbarItem/properties.json

@@ -0,0 +1,12 @@
+{
+  "#tool": {},
+  "#icon": {},
+  "#trailing": {},
+  "#context": {},
+  "#label": {},
+  "#description": {},
+  "#body": {},
+  "#button": {},
+  "#close": {},
+  "#actions": {}
+}

package/src/constructors/SnackbarItem/style.scss

@@ -0,0 +1,30 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinSnackbarItem {
+  @include ui.flexStretchY;
+  position: relative;
+
+  max-width: 100%;
+
+  &__tool {
+    @include ui.flexX;
+    gap: inherit;
+  }
+
+  &__context {
+    @include ui.flexStretchY;
+    @include ui.flexDynamic;
+    gap: inherit;
+    order: 4;
+  }
+
+  &__button {
+    order: 1024;
+  }
+
+  &__close {
+    align-self: flex-start;
+    z-index: 48;
+    order: 1040;
+  }
+}

package/src/constructors/TabItem/properties.json

@@ -0,0 +1,49 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "indicator": {
+    "_type": "var"
+  },
+  "transition-property": "background-color, background-image, border, box-shadow",
+  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
+  "transition-function": "{d.sys.transitionFunction.standard}",
+  "#label": {},
+  "#icon": {},
+  "#badge": {},
+  "~focus": {},
+  "~open": {},
+  "~selected": {},
+  "~disabled": {},
+  "~adaptive": {
+    "~iconAlways": {
+      "& > *:not(.??__icon)": {
+        "display": "none"
+      }
+    },
+    "~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"
+    }
+  }
+}

package/src/constructors/TabItem/style.scss

@@ -0,0 +1,64 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTabItem {
+  flex-grow: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  padding: #{ui.v('??paddingY', 0px)} #{ui.v('??paddingX', 0px)};
+
+  text-wrap: nowrap;
+  white-space: nowrap;
+
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    top: ui.v('??indicator.top', auto);
+    bottom: 0;
+    left: calc(#{ui.v('??paddingX', 0px)} + #{ui.v('??sys.left')});
+    pointer-events: none;
+    opacity: 0;
+
+    width: calc(#{ui.v('??sys.width')} - (2 * #{ui.v('??paddingX', 0px)}));
+    height: ui.v('??indicator.height', auto);
+
+    content: " ";
+
+    transition-duration: ui.v('d.sys.transitionDuration.axis');
+    transition-property: none;
+    transition-timing-function: ui.v('d.ref.transitionFunction.e40i80');
+  }
+
+  &__label {
+    order: 4;
+  }
+
+  &__badge {
+    order: 12;
+  }
+
+  &__ripple {
+    order: 32;
+  }
+
+  &--readonly,
+  &--disabled,
+  &--loading {
+    cursor: default;
+  }
+
+  &--selected {
+    &::before {
+      left: ui.v('??paddingX', 0px);
+      opacity: 1;
+      width: calc(100% - (2 * #{ui.v('??paddingX', 0px)}));
+      transition-property: left, width;
+    }
+  }
+}

package/src/constructors/Tabs/properties.json

@@ -0,0 +1,3 @@
+{
+  "#slide": {}
+}

package/src/constructors/Tabs/style.scss

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

package/src/constructors/TabsNavigation/properties.json

@@ -0,0 +1,10 @@
+{
+  "~divider": {
+    "after": {
+      "position": "absolute",
+      "bottom": "0",
+      "left": "0",
+      "right": "0"
+    }
+  }
+}

package/src/constructors/TabsNavigation/style.scss

@@ -0,0 +1,5 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinTabsNavigation {
+  position: relative;
+}

package/src/constructors/Textarea/properties.json

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

package/src/constructors/Textarea/style.scss

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

package/src/constructors/TextareaAutosize/properties.json

@@ -0,0 +1,9 @@
+{
+  "min-height": {
+    "_type": "var"
+  },
+  "#clone": {},
+  "~autosize": {
+    "_default": true
+  }
+}

package/src/constructors/TextareaAutosize/style.scss

@@ -11,12 +11,6 @@
   resize: none;
 
   min-height: ui.v('?textarea.sys.height', ui.v('??minHeight')) !important;
-  field-sizing: content;
-
-  @supports not (field-sizing: content) {
-    --sys-field-sizing-none: '--YES--';
-    height: ui.v('?textarea.sys.height', ui.v('??minHeight'));
-  }
 
   &__clone {
     position: absolute;
@@ -28,4 +22,13 @@
     line-height: inherit;
     white-space: pre-wrap;
   }
+
+  &--autosize {
+    field-sizing: content;
+
+    @supports not (field-sizing: content) {
+      --sys-field-sizing-none: '--YES--';
+      height: ui.v('?textarea.sys.height', ui.v('??minHeight'));
+    }
+  }
 }

package/src/constructors/Tooltip/properties.json

@@ -0,0 +1,18 @@
+{
+  "arrowSize": {
+    "_type": "var"
+  },
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#label": {},
+  "#description": {},
+  "#body": {},
+  "~interactive": {
+    "_default": true
+  },
+  "~embedded": {}
+}

package/src/constructors/Tooltip/style.scss

@@ -25,6 +25,12 @@
     @include ui.initByCustom('origin', 150%);
   }
 
+  &--interactive {
+    @include ui.state('move') {
+      pointer-events: unset;
+    }
+  }
+
   &--preparation {
     transform: scale(0.4);
   }
@@ -37,7 +43,9 @@
     transform ui.v('d.sys.transitionDuration.sm') ui.v('d.sys.transitionFunction.deceleration');
   }
 
-  &--move {
-    pointer-events: unset;
+  &--embedded {
+    position: static;
+    top: auto;
+    left: auto;
   }
 }