@dxtmisha/constructor 0.39.5 → 0.52.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/constructor",
   "private": false,
-  "version": "0.39.5",
+  "version": "0.52.0",
   "type": "module",
   "description": "Vue component constructors for DXT UI design system - ready-to-use constructors with TypeScript support and SCSS styling",
   "keywords": [
@@ -38,12 +38,14 @@
     "dxt-library": "dxt-library",
     "dxt-types": "dxt-types",
     "dxt-constructor": "dxt-constructor",
-    "prepublishOnly": "npm run dxt-library && npm run build"
+    "prepublishOnly": "npm run dxt-library && npm run dxt-constructor && npm run build",
+    "publish": "npm publish --access public"
   },
   "files": [
     "dist/",
     "src/library/style.scss",
     "src/constructors/**/*.scss",
+    "src/constructors/**/*.json",
     "ai-types.txt",
     "README.md",
     "package.json",
@@ -218,7 +220,59 @@
       "types": "./dist/library/plugin.d.ts",
       "default": "./dist/plugin.js"
     },
-    "./style.scss": "./src/library/style.scss"
+    "./style.scss": "./src/library/style.scss",
+    "./Textarea": {
+      "types": "./dist/constructors/Textarea/index.d.ts",
+      "default": "./dist/textarea.js"
+    },
+    "./TabItem": {
+      "types": "./dist/constructors/TabItem/index.d.ts",
+      "default": "./dist/tabItem.js"
+    },
+    "./TabsNavigation": {
+      "types": "./dist/constructors/TabsNavigation/index.d.ts",
+      "default": "./dist/tabsNavigation.js"
+    },
+    "./HorizontalScroll": {
+      "types": "./dist/constructors/HorizontalScroll/index.d.ts",
+      "default": "./dist/horizontalScroll.js"
+    },
+    "./MotionAxis": {
+      "types": "./dist/constructors/MotionAxis/index.d.ts",
+      "default": "./dist/motionAxis.js"
+    },
+    "./Tabs": {
+      "types": "./dist/constructors/Tabs/index.d.ts",
+      "default": "./dist/tabs.js"
+    },
+    "./Checkbox": {
+      "types": "./dist/constructors/Checkbox/index.d.ts",
+      "default": "./dist/checkbox.js"
+    },
+    "./Grid": {
+      "types": "./dist/constructors/Grid/index.d.ts",
+      "default": "./dist/grid.js"
+    },
+    "./GridItem": {
+      "types": "./dist/constructors/GridItem/index.d.ts",
+      "default": "./dist/gridItem.js"
+    },
+    "./Dummy": {
+      "types": "./dist/constructors/Dummy/index.d.ts",
+      "default": "./dist/dummy.js"
+    },
+    "./Group": {
+      "types": "./dist/constructors/Group/index.d.ts",
+      "default": "./dist/group.js"
+    },
+    "./SnackbarItem": {
+      "types": "./dist/constructors/SnackbarItem/index.d.ts",
+      "default": "./dist/snackbarItem.js"
+    },
+    "./Snackbar": {
+      "types": "./dist/constructors/Snackbar/index.d.ts",
+      "default": "./dist/snackbar.js"
+    }
   },
   "buildOptions": {
     "name": "@dxtmisha/constructor",

package/src/constructors/Accordion/properties.json

@@ -0,0 +1,16 @@
+{
+  "border-width": {
+    "_type": "var"
+  },
+  "border-color": {
+    "_type": "var"
+  },
+  "border-opacity": {
+    "_type": "var"
+  },
+  "#head": {},
+  "#body": {},
+  "~divider": {
+    "_default": true
+  }
+}

package/src/constructors/ActionSheet/properties.json

@@ -0,0 +1,14 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#body": {},
+  "#footer": {},
+  "#touch": {},
+  "#tab": {}
+}

package/src/constructors/Actions/properties.json

@@ -0,0 +1,66 @@
+{
+  "#item": {},
+  "#list": {},
+  "#secondary": {},
+  "#spacer": {},
+  "~align": {
+    "~none": {},
+    "~center": {
+      "justify-content": "center",
+      "#secondary": {
+        "display": "none"
+      },
+      "#spacer": {
+        "display": "none"
+      }
+    },
+    "~left": {
+      "#secondary": {
+        "order": "8"
+      },
+      "#spacer": {
+        "order": "4"
+      }
+    },
+    "~right": {
+      "#list": {
+        "order": "8"
+      },
+      "#spacer": {
+        "order": "4"
+      }
+    },
+    "~block": {
+      "flex-direction": "column-reverse",
+      "align-items": "stretch",
+      "#secondary": {
+        "display": "none"
+      },
+      "#spacer": {
+        "display": "none"
+      }
+    },
+    "~auto": {
+      "link|center": "{??align.center}",
+      "#item": {
+        "flex-grow": "1",
+        "flex-shrink": "1",
+        "flex-basis": "auto"
+      }
+    },
+    "_default": "right"
+  },
+  "~flexible": {
+    "group|adaptive": {
+      "link|block": "{??align.block}",
+      "_type": "media-max-group"
+    },
+    "group|container": {
+      "link|block": "{??align.block}",
+      "_type": "container-max-group"
+    }
+  },
+  "~wrap": {
+    "flex-wrap": "wrap"
+  }
+}

package/src/constructors/Actions/style.scss

@@ -3,7 +3,6 @@
 @mixin mixinActions {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
 
   &__spacer {
     @include ui.flexDynamic;

package/src/constructors/Anchor/properties.json

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

package/src/constructors/Arrow/properties.json

@@ -0,0 +1,23 @@
+{
+  "arrowWidth": {
+    "_type": "var"
+  },
+  "arrowHeight": {
+    "_type": "var"
+  },
+  "#mask": {},
+  "#arrow": {},
+  "#arrowLine": {},
+  "#arrowArea": {},
+  "#border": {},
+  "#borderHidden": {},
+  "~position": {
+    "~auto": {},
+    "~top": {},
+    "~bottom": {},
+    "~left": {},
+    "~right": {},
+    "_default": "auto"
+  },
+  "~inverse": {}
+}

package/src/constructors/Badge/properties.json

@@ -0,0 +1,36 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "dotSize": {
+    "_type": "var"
+  },
+  "transition-property": "clip-path, mask-image, mask-size, opacity, transform, scale",
+  "transition-duration": "{d.sys.transitionDuration.lg.open}",
+  "transition-function": "{d.sys.transitionFunction.standard}",
+  "#label": {},
+  "#icon": {},
+  "selected": {},
+  "~hide": {
+    "transition-duration": "{d.sys.transitionDuration.lg.close}"
+  },
+  "~dot": {},
+  "~overlap": {
+    "~rectangular": {},
+    "~circular": {},
+    "~static": {},
+    "_default": "rectangular"
+  },
+  "~vertical": {
+    "~top": {},
+    "~center": {},
+    "~bottom": {},
+    "_default": "top"
+  },
+  "~horizontal": {
+    "~right": {},
+    "~center": {},
+    "~left": {},
+    "_default": "right"
+  }
+}

package/src/constructors/Bars/properties.json

@@ -0,0 +1,5 @@
+{
+  "#context": {},
+  "#label": {},
+  "#description": {}
+}

package/src/constructors/Bars/style.scss

@@ -3,6 +3,8 @@
 @mixin mixinBars {
   display: flex;
 
+  margin-right: ui.v('?window.sysMarginRight', 0);
+
   transition: background-color ui.v('d.sys.transitionDuration.sm') linear;
 
   @include ui.mediaPrefersReducedMotion {

package/src/constructors/Block/properties.json

@@ -0,0 +1,10 @@
+{
+  "#headline": {},
+  "#header": {},
+  "#label": {},
+  "#description": {},
+  "#caption": {},
+  "#icon": {},
+  "#space": {},
+  "#body": {}
+}

package/src/constructors/Button/properties.json

@@ -0,0 +1,84 @@
+{
+  "padding": {
+    "_type": "var"
+  },
+  "border-radius": "0",
+  "transition-property": "grid-template-columns, background-color, background-image, border, box-shadow",
+  "transition-duration": "{d.sys.transitionDuration.fade.enter}",
+  "transition-function": "{d.sys.transitionFunction.standard}",
+  "#label": {},
+  "#icon": {},
+  "#trailing": {},
+  "#loading": {
+    "color-opacity": {
+      "_type": "var"
+    }
+  },
+  "focus": {},
+  "hover": {
+    "transition-duration": "{d.sys.transitionDuration.sm}"
+  },
+  "active": {
+    "transition-duration": "{d.sys.transitionDuration.sm}"
+  },
+  "selected": {
+    "_type": "state"
+  },
+  "readonly": {
+    "_type": "state"
+  },
+  "disabled": {
+    "transition-duration": "{d.sys.transitionDuration.sm}"
+  },
+  "~adaptive": {
+    "~iconAlways": {
+      "justify-content": "flex-start",
+      "& > .??__icon": {
+        "padding": {
+          "value": "calc((var(--sys-height) - {?icon-_width}) / 2)",
+          "_important": true
+        }
+      },
+      "& > *:not(.??__icon)": {
+        "display": "none"
+      }
+    },
+    "~block": {
+      "width": "100%"
+    },
+    "~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"
+    }
+  },
+  "~inverse": {},
+  "~grid": {},
+  "~textAlign": {
+    "left": {
+      "justify-content": "flex-start",
+      "text-align": "left"
+    },
+    "center": {},
+    "right": {
+      "justify-content": "flex-end",
+      "text-align": "right"
+    }
+  }
+}

package/src/constructors/Cell/properties.json

@@ -0,0 +1,52 @@
+{
+  "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}",
+  "#context": {},
+  "#contextTrailing": {},
+  "#label": {},
+  "#description": {},
+  "#caption": {},
+  "#icon": {},
+  "#trailing": {},
+  "#body": {},
+  "#loading": {},
+  "~focus": {},
+  "~selected": {},
+  "~readonly": {},
+  "~disabled": {},
+  "~dynamic": {},
+  "~dynamicHover": {},
+  "~divider": {
+    "_default": true
+  },
+  "~dividerLabel": {
+    "~always": {
+      "#context": {
+        "border-bottom-style": "solid",
+        "border-bottom-width": "{??borderWidth}",
+        "border-color": "{'??borderColor}"
+      }
+    },
+    "group|adaptive": {
+      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
+      "_type": "media-max-group"
+    },
+    "group|container": {
+      "link|adaptive-dividerLabel": "{??dividerLabel.always}",
+      "_type": "container-max-group"
+    },
+    "none": {}
+  },
+  "~iconTop": {
+    "#icon": {
+      "align-self": "start"
+    }
+  }
+}

package/src/constructors/Cell/style.scss

@@ -14,8 +14,10 @@
   }
 
   &__label {
+    @include ui.flex;
     align-self: center;
     flex-basis: auto;
+    gap: inherit;
   }
 
   &__caption {
@@ -24,8 +26,10 @@
   }
 
   &__description {
+    @include ui.flex;
     grid-area: description;
     flex-basis: 100%;
+    gap: inherit;
   }
 
   &__contextTrailing {
@@ -70,11 +74,12 @@
   }
 
   @at-root {
-    [data-divider="active"] + &[data-divider="active"],
-    [data-divider="active"] + * > &[data-divider="active"] {
+
+    [data-divider="active"]+&[data-divider="active"],
+    [data-divider="active"]+*>&[data-divider="active"] {
       border-top-style: solid;
       border-top-width: ui.v('??borderWidth');
       @include ui.borderColor(ui.v('??borderColor'));
     }
   }
-}
+}

package/src/constructors/Checkbox/properties.json

@@ -0,0 +1,65 @@
+{
+  "#input": {},
+  "#body": {},
+  "#item": {},
+  "#icon": {},
+  "#loading": {},
+  "#info": {},
+  "#label": {},
+  "focus": {
+    "_type": "none"
+  },
+  "checked": {
+    "_type": "none"
+  },
+  "disabled": {
+    "_type": "none"
+  },
+  "~block": {
+    "display": "flex",
+    "#body": {
+      "flex-grow": "1"
+    },
+    "_default": true
+  },
+  "~adaptive": {
+    "~rightAlways": {
+      "#track": {
+        "order": "4"
+      },
+      "#item": {
+        "order": "4"
+      },
+      "#info": {
+        "order": "2"
+      }
+    },
+    "group|right": {
+      "link|adaptive-icon": "{??adaptive.rightAlways}",
+      "_type": "media-max-group"
+    }
+  },
+  "container": {
+    "group|right": {
+      "link|adaptive-icon": "{??adaptive.rightAlways}",
+      "_type": "container-max-group"
+    }
+  },
+  "~required": {
+    "color": {
+      "_type": "var"
+    }
+  },
+  "~itemCenter": {
+    "_default": true
+  },
+  "&__input:focus ~ *": {
+    "link:focus": "{??focus}"
+  },
+  "&__input:checked ~ *": {
+    "link:checked": "{??checked}"
+  },
+  "&__input:disabled ~ *": {
+    "link:disabled": "{??disabled}"
+  }
+}

package/src/constructors/Checkbox/style.scss

@@ -0,0 +1,99 @@
+@use "@dxtmisha/styles/properties" as ui;
+
+@mixin mixinCheckbox {
+  @include ui.initByCustom('iconOpacity', 0);
+  @include ui.initByCustom('iconClip', #{inset(0 100% 0 0)});
+  @include ui.initByCustom('iconScale', 1);
+
+  display: inline-flex;
+  position: relative;
+
+  &__input {
+    @include ui.absolute;
+    opacity: 0;
+    cursor: default;
+
+    &:not(:disabled)~* {
+      cursor: pointer;
+    }
+  }
+
+  &__body {
+    display: flex;
+    align-items: flex-start;
+
+    transition-timing-function: linear;
+    transition-duration: ui.v('d.sys.transitionDuration.sm');
+    transition-property: background-color, border-color, opacity;
+  }
+
+  &__item {
+    @include ui.flexCenter;
+    position: relative;
+
+    transition: inherit;
+  }
+
+  &__icon {
+    box-sizing: border-box;
+    @include ui.flexCenter;
+    position: relative;
+
+    transition: inherit;
+
+    >* {
+      opacity: ui.v('??iconOpacity');
+      clip-path: ui.v('??iconClip');
+      @include ui.scale(ui.v('??iconScale'));
+      transition: inherit;
+    }
+  }
+
+  &__info {
+    @include ui.flexDynamic;
+  }
+
+  &__label {
+    display: block;
+  }
+
+  &__loading#{'.'}#{ui.n('?progress--visible')}~&__item &__icon>* {
+    opacity: ui.v('??colorOpacity', 0);
+  }
+
+  @include ui.active() {
+    transition-duration: ui.v('d.sys.transitionDuration.sm');
+  }
+
+  input:checked~* {
+    @include ui.initByCustom('iconOpacity', 1);
+    @include ui.initByCustom('iconClip', #{inset(0 0 0 0)});
+    @include ui.initByCustom('iconScale', 1);
+    transition-property: background-color, border-color, clip-path;
+  }
+
+  &:has(input[readonly]) {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--required {
+    @include ui.subclass('label') {
+      &:after {
+        content: "*";
+        @include ui.color(ui.v('??required.color'));
+      }
+    }
+  }
+
+  &--itemCenter {
+    @include ui.subclass('body') {
+      align-items: center;
+
+      &>* {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+      }
+    }
+  }
+}

package/src/constructors/Chip/properties.json

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

package/src/constructors/ChipGroup/properties.json

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

package/src/constructors/Dialog/properties.json

@@ -0,0 +1,23 @@
+{
+  "paddingX": {
+    "_type": "var"
+  },
+  "paddingY": {
+    "_type": "var"
+  },
+  "#title": {},
+  "#header": {},
+  "#information": {},
+  "#icon": {},
+  "#label": {},
+  "#description": {},
+  "#body": {},
+  "#footer": {},
+  "~success": {},
+  "~error": {},
+  "~imagePosition": {
+    "~top": {},
+    "~left": {},
+    "_default": "top"
+  }
+}

package/src/constructors/Dummy/properties.json

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

package/src/constructors/Dummy/style.scss

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