@genexus/mercury 0.21.2 → 0.21.5

package/dist/assets/scss/_helpers.scss

@@ -0,0 +1,201 @@
+// The following mixins, are helpers that Mercury expose publicly.
+// At the time of writting only tabular-grid helpers are being included.
+// Instead of bundling the actual stylesheets, these mixins have been
+// copied by hand, since scss-bundle does not works with @use, which is
+// the actual way for including sass modules, that Mercury is using.
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// copied from "src/base/_common.scss"
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin control-remove-border() {
+  // This resets the border applied
+  // (for controls inside the property grid)
+  --control__border-width: 0;
+  --control__border-color: transparent;
+  --control__border-radius: 0;
+}
+
+@mixin grid-cell-remove-padding() {
+  // we should redefine '--grid-cell__padding-inline' here because when a control
+  // is inside a a tabular-grid-cell the cell padding-inline value is required to
+  // be applied on the control padding-inline.
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+@mixin grid-cell-padding-inline-block() {
+  padding-block: var(--grid-cell__padding-block);
+  padding-inline: var(--grid-cell__padding-inline);
+}
+
+@mixin focus-outline() {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+@mixin focus-border() {
+  border-color: var(--borders-un-border-color__focused);
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+// copied from "src/components/tabular-grid/_helpers.scss"
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+// node type
+@mixin cell-node-type-text() {
+  @include grid-cell-padding-inline-block();
+}
+
+@mixin cell-node-type-element() {
+  @include control-remove-border();
+  @include grid-cell-remove-padding();
+  padding-block: 0;
+  padding-inline: 0;
+  --control__padding-inline: var(--grid-cell__padding-inline);
+  // to stretch the control
+  display: grid;
+  align-items: stretch;
+  justify-content: stretch;
+}
+
+@mixin cell-node-type-element--hover() {
+  outline: var(--focus__outline-width) var(--focus__outline-style)
+    var(--control__border-color--hover);
+  outline-offset: var(--focus__outline-offset);
+}
+
+// cell alignment block
+@mixin cell-alignment-block-start() {
+  align-items: start;
+}
+
+@mixin cell-alignment-block-center() {
+  align-items: center;
+}
+
+@mixin cell-alignment-block-end() {
+  align-items: end;
+}
+
+// cell alignment inline
+@mixin cell-alignment-inline-start() {
+  justify-content: start;
+}
+
+@mixin cell-alignment-inline-center() {
+  justify-content: center;
+}
+
+@mixin cell-alignment-inline-end() {
+  justify-content: center;
+}
+
+// cell with ellipsis
+@mixin cell-ellipsis() {
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/// @group Grid
+/// @param {String} $tabular-grid-selector [".tabular-grid"] -
+/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] -
+/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] -
+/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] -
+/// @param {List} $tabular-grid-affected-columns-nth-list [null] -
+
+@mixin tabular-grid-cell-layout(
+  $tabular-grid-selector: ".tabular-grid",
+  $tabular-grid-cell-node-type: "text",
+  $tabular-grid-cell-block-alignment: "start",
+  $tabular-grid-cell-inline-alignment: "start",
+  $tabular-grid-cell-apply-ellipsis: false,
+  $tabular-grid-affected-columns-nth-list: null
+) {
+  $selector: null;
+  $cell-tag-name: "ch-tabular-grid-cell";
+  $where-pseudo-class: ":is";
+  $where-selector: ();
+  // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not.
+  // if it is null, all cells should be affected.
+  @if $tabular-grid-affected-columns-nth-list != null {
+    @each $nth in $tabular-grid-affected-columns-nth-list {
+      $where-selector: append($where-selector, ":nth-child(#{$nth})", comma);
+    }
+    $selector: #{$tabular-grid-selector}
+      #{$cell-tag-name}#{$where-pseudo-class
+      }(#{$where-selector});
+  } @else {
+    // if no $editable-columns-nth was provided, apply to all cells
+    $selector: #{$tabular-grid-selector} #{$cell-tag-name};
+  }
+  #{$selector} {
+    // node type
+    @if $tabular-grid-cell-node-type == "text" {
+      @include cell-node-type-text();
+    }
+    @if $tabular-grid-cell-node-type == "element" {
+      @include cell-node-type-element();
+    }
+    &:hover {
+      @if $tabular-grid-cell-node-type == "element" {
+        @include cell-node-type-element--hover();
+      }
+    }
+    // block alignment (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "start"
+    {
+      @include cell-alignment-block-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "center"
+    {
+      @include cell-alignment-block-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-block-alignment ==
+      "end"
+    {
+      @include cell-alignment-block-end();
+    }
+    // inline alignment
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "start"
+    {
+      @include cell-alignment-inline-start();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "center"
+    {
+      @include cell-alignment-inline-center();
+    }
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-inline-alignment ==
+      "end"
+    {
+      @include cell-alignment-inline-end();
+    }
+    // ellipsis (only should apply if $tabular-grid-cell-node-type == "text"
+    @if $tabular-grid-cell-node-type ==
+      "text" and
+      $tabular-grid-cell-apply-ellipsis ==
+      true
+    {
+      @include cell-ellipsis();
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genexus/mercury",
-  "version": "0.21.2",
+  "version": "0.21.5",
   "description": "Mercury Design System is a robust and scalable solution designed to improve product development.",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -54,6 +54,7 @@
     "build.scss.bundles": "node dist/cli/bundle.js",
     "build.scss.watch": "tsc && yarn build.scss.base && yarn copy-tasks && yarn build.scss.bundles --watch -i=/assets/icons/ -f=/assets/fonts/ --outDir=../showcase/.mercury/ --avoid-hash=base/base",
     "start": "vite --port 5200 --open showcase/button.html",
+    "build.scss.helpers": "scss-bundle -e ./src/assets/scss/_helpers.scss -o ./src/assets/scss/helpers-bundled.scss --logLevel=info",
     "validate.ci": "yarn build-no-svg && yarn test",
     "icons-svg": "ssg-svg --srcDir=src/icons/svg-source --outDir=src/assets/icons/_generated/ --configFilePath=src/icons/svg-source/.config/color-states.json --showcaseDir=showcase/icons/ --showcaseBaseHref=../assets/icons/ --logDir=./log --objectFilePath=src/assets/MERCURY_ASSETS.ts --defaultColorType=on-surface",
     "process-icons": "ssg --configPath=./src/config/icons.js",