@massimo-cassandro/minimo 1.33.0 → 1.33.1

package/src/web-components/json-table/json-table-component.module.css

@@ -13,8 +13,15 @@ json-table {
   position: relative;
   display: block;
   margin-block: var(--jt-wrapper-margin-block);
+
+  /* server-side request in progress */
+  &[aria-busy='true'] .table {
+    opacity: var(--jt-busy-opacity);
+  }
 }
 
+/* =>> info section */
+
 .infoOuter {
   padding-block-end: var(--jt-info-outer-padding-block-end);
 }
@@ -49,9 +56,192 @@ json-table {
   }
 }
 
+/* =>> table */
+
+/* table wrapper + footer bar */
+.tableOuter {
+  position: relative;
+}
+
+.tableWrapper {
+  position: relative;
+}
+
 .table {
   /* vertical spacing is handled by the wrapper */
   margin-block: 0;
+
+  /* the sort button fills the whole cell: the cell padding moves to the button */
+  th.sortable {
+    padding: 0;
+  }
+
+  /* cell shown when there are no rows */
+  .empty {
+    padding-block: var(--jt-empty-padding-block);
+    font-style: italic;
+    color: var(--jt-empty-color);
+    text-align: center;
+  }
+
+  /* boolean cells */
+  .boolCell {
+    text-align: center;
+
+    svg {
+      display: inline-block;
+      width: var(--jt-bool-icon-size);
+      height: auto;
+      aspect-ratio: 1;
+      vertical-align: -.15em;
+      fill: currentColor;
+    }
+  }
+
+  .boolTrue {
+    color: var(--jt-bool-true-color);
+  }
+
+  .boolFalse {
+    color: var(--jt-bool-false-color);
+  }
+}
+
+/* =>> footer bar: caption (start) + pagination (end) */
+
+.tableFooter {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--jt-info-gap);
+  align-items: center;
+  justify-content: space-between;
+  padding-block-start: var(--jt-table-footer-padding-block-start);
+}
+
+.caption {
+  flex: 1 1 auto;
+  font-size: var(--jt-caption-font-size);
+  color: var(--jt-caption-color);
+}
+
+.pagination {
+  margin-inline-start: auto;
+}
+
+.paginationList {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.paginationItem {
+  border: var(--jt-pagination-border-width) solid var(--jt-pagination-border-color);
+  border-inline-start-width: 0;
+
+  &:first-child {
+    border-inline-start-width: var(--jt-pagination-border-width);
+    border-start-start-radius: var(--jt-pagination-radius);
+    border-end-start-radius: var(--jt-pagination-radius);
+  }
+
+  &:last-child {
+    border-start-end-radius: var(--jt-pagination-radius);
+    border-end-end-radius: var(--jt-pagination-radius);
+  }
+}
+
+.paginationBtn,
+.paginationEllipsis {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--jt-pagination-btn-min-width);
+  height: 100%;
+  padding: var(--jt-pagination-btn-padding-block) var(--jt-pagination-btn-padding-inline);
+  font: inherit;
+  font-size: var(--jt-pagination-font-size);
+  line-height: var(--jt-pagination-line-height);
+  color: inherit;
+}
+
+.paginationBtn {
+  cursor: pointer;
+
+  &[disabled] {
+    cursor: default;
+    opacity: var(--jt-pagination-disabled-opacity);
+  }
+
+  &[aria-current='page'] {
+    font-weight: var(--jt-pagination-current-font-weight);
+    cursor: default;
+    background-color: var(--jt-pagination-current-background-color);
+  }
+
+  @media (hover: hover) {
+    &:hover:not([disabled], [aria-current='page']) {
+      background-color: var(--jt-pagination-hover-background-color);
+    }
+  }
+
+  svg {
+    width: var(--jt-pagination-icon-size);
+    aspect-ratio: 1;
+    fill: currentColor;
+  }
+}
+
+.paginationArrow {
+  padding-inline: calc(var(--jt-pagination-btn-padding-inline) / 2);
+}
+
+/* =>> sorting (thead) */
+
+.sortable {
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--jt-thead-hover-background-color);
+    }
+  }
+}
+
+.sortBtn {
+  display: flex;
+  gap: var(--jt-sort-icon-gap);
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: var(--jt-sort-btn-padding-block) var(--jt-sort-btn-padding-inline);
+  font: inherit;
+  line-height: var(--jt-sort-btn-line-height);
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.sortTitle {
+  flex: 1 1 auto;
+}
+
+.sortIcon {
+  display: inline-flex;
+  flex: none;
+  width: var(--jt-sort-icon-size);
+  aspect-ratio: 1;
+  opacity: var(--jt-sort-icon-none-opacity);
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  /* an active sort (aria-sort on the th) shows the icon at full opacity */
+  [aria-sort] & {
+    opacity: 1;
+  }
 }
 
 /* purgecss end ignore */

package/src/web-components/json-table/json-table.minimo.tokens.mjs

@@ -43,6 +43,201 @@ export default {
           $value: '20rem'
         }
       }
+    },
+
+    // sortable columns (thead)
+    thead: {
+      hover: {
+        background: {
+          color: {
+            $type: 'color',
+            $value: 'color-mix(in srgb, {table.thead.background.color} 90%, {accent})'
+          }
+        }
+      }
+    },
+
+    sort: {
+      // the sort button fills the whole th: same padding/line-height of minimo table cells
+      btn: {
+        padding: {
+          block: {
+            $type: 'dimension',
+            $value: '{table.cell.padding.block}'
+          },
+          inline: {
+            $type: 'dimension',
+            $value: '{table.cell.padding.inline}'
+          }
+        },
+        'line-height': {
+          $type: 'number',
+          $value: '{table.cell.line-height}'
+        }
+      },
+      icon: {
+        size: {
+          $type: 'dimension',
+          $value: '1em'
+        },
+        gap: {
+          $type: 'dimension',
+          $value: '.4em'
+        },
+        // opacity of the icon when no sort is active
+        none: {
+          opacity: {
+            $type: 'number',
+            $value: '.4'
+          }
+        }
+      }
+    },
+
+    // boolean cells
+    bool: {
+      icon: {
+        size: {
+          $type: 'dimension',
+          $value: '1.1em'
+        }
+      },
+      true: {
+        color: {
+          $type: 'color',
+          $value: '{status.success.color}'
+        }
+      },
+      false: {
+        color: {
+          $type: 'color',
+          $value: '{status.danger.color}'
+        }
+      }
+    },
+
+    // opacity of the table while a server-side request is in progress
+    busy: {
+      opacity: {
+        $type: 'number',
+        $value: '.5'
+      }
+    },
+
+    // footer bar below the table (caption + pagination)
+    'table-footer': {
+      padding: {
+        block: {
+          start: {
+            $type: 'dimension',
+            $value: '{size.xs}'
+          }
+        }
+      }
+    },
+
+    caption: {
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.sm}'
+        }
+      },
+      color: {
+        $type: 'color',
+        $value: '{text.muted}'
+      }
+    },
+
+    pagination: {
+      border: {
+        width: {
+          $type: 'dimension',
+          $value: '1px'
+        },
+        color: {
+          $type: 'color',
+          $value: '{table.border.color}'
+        }
+      },
+      radius: {
+        $type: 'dimension',
+        $value: '{radius.xxs}'
+      },
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.sm}'
+        }
+      },
+      'line-height': {
+        $type: 'number',
+        $value: '{table.cell.line-height}'
+      },
+      btn: {
+        'min-width': {
+          $type: 'dimension',
+          $value: '2.2em'
+        },
+        padding: {
+          block: {
+            $type: 'dimension',
+            $value: '{table.cell.padding.block}'
+          },
+          inline: {
+            $type: 'dimension',
+            $value: '{table.cell.padding.inline}'
+          }
+        }
+      },
+      icon: {
+        size: {
+          $type: 'dimension',
+          $value: '1em'
+        }
+      },
+      current: {
+        background: {
+          color: {
+            $type: 'color',
+            $value: '{table.thead.background.color}'
+          }
+        },
+        font: {
+          weight: {
+            $type: 'fontWeight',
+            $value: '{font.weight.semibold}'
+          }
+        }
+      },
+      hover: {
+        background: {
+          color: {
+            $type: 'color',
+            $value: '{table.body.tr.hover-bg-color}'
+          }
+        }
+      },
+      disabled: {
+        opacity: {
+          $type: 'number',
+          $value: '.5'
+        }
+      }
+    },
+
+    // "no rows" cell
+    empty: {
+      color: {
+        $type: 'color',
+        $value: '{text.muted}'
+      },
+      padding: {
+        block: {
+          $type: 'dimension',
+          $value: '{size.sm}'
+        }
+      }
     }
   }
 };