@table-bro/native 0.0.0-stage → 1.2.0

package/styles/skin/shared/mixins/_toolbar.scss

@@ -0,0 +1,61 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+// The component and its shadow take the same corners: the shadow follows the rounded shape of the component
+@mixin toolbar_or_paginator-container($container-selector, $shadow-selector, $component-selector, $component-height, $component-z-index, $border-radius: null) {
+  #{$container-selector} {
+    width: $bro-table-width;
+
+    #{$shadow-selector} {
+      z-index: $bro-shadow-z-index;
+      left: var(--bro-shadow-size);
+
+      height: $component-height;
+
+      border-radius: $border-radius;
+    }
+
+    #{$component-selector} {
+      position: relative;
+      z-index: $component-z-index;
+      left: var(--bro-shadow-size);
+
+      border-radius: $border-radius;
+    }
+  }
+}
+
+
+@mixin skin_toolbar($toolbar-selector) {
+  #{$bro-table-toolbar_container} {
+    top: 0;
+
+    .bro-toolbar {
+      display: block;
+
+      height: $bro-toolbar-height;
+
+      > nav {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+
+  // The menus of the toolbar lie above the filter drawer next to the table (the scale of the layers, skin/shared/_variables.scss).
+  // The toolbar has the top corners of the table.
+  @include toolbar_or_paginator-container($bro-table-toolbar_container, $bro-table-toolbar_shadow, $toolbar-selector, $bro-toolbar-height, $bro-toolbar-z-index, var(--bro-corner-radius) var(--bro-corner-radius) 0 0);
+}
+
+@mixin skin_table-header() {
+  @include toolbar_or_paginator-container($bro-table-header_container, $bro-table-header_shadow, $bro-table-header, var(--bro-header-height), $bro-header-paginator-z-index);
+}
+
+@mixin skin_paginator($paginator-selector) {
+  #{$bro-paginator-container} {
+    top: calc(var(--bro-shadow-size) * -2);
+  }
+
+  // The paginator has the bottom corners of the table
+  @include toolbar_or_paginator-container($bro-paginator-container, $bro-paginator-shadow, $paginator-selector, $bro-paginator-height, $bro-header-paginator-z-index, 0 0 var(--bro-corner-radius) var(--bro-corner-radius));
+}

package/styles/skin/shared/table-bro/_details.scss

@@ -0,0 +1,11 @@
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  #{$bro-details_tr} {
+    > td > :first-child > * {
+      > div {
+        padding: calc(var(--bro-row-height) / 2);
+      }
+    }
+  }
+}

package/styles/skin/shared/table-bro/_filter-drawer.scss

@@ -0,0 +1,62 @@
+@use "../variables" as *;
+
+// The table with the filter drawer carries the class of the skin itself:
+// table-bro-filter-drawer-container#{&} is table-bro-filter-drawer-container.nv and the like
+@mixin styles {
+  // The drawer lies above a table that does not fit its narrowed regions, and the scrim of the modal drawer between them
+  @at-root table-bro-filter-drawer-container#{&} {
+    > .bro-filter-drawer-scrim {
+      z-index: $bro-filter-drawer-scrim-z-index;
+
+      background: $bro-scrim-color;
+    }
+
+    > .bro-filter-drawer-card {
+      z-index: $bro-filter-drawer-card-z-index;
+    }
+
+    > .bro-filter-drawer-header,
+    > [slot="filters"] {
+      z-index: $bro-filter-drawer-content-z-index;
+    }
+
+    // The modal drawer and its scrim lie over the whole table, its toolbar too
+    &[modal] {
+      > .bro-filter-drawer-scrim {
+        z-index: $bro-modal-filter-drawer-scrim-z-index;
+      }
+
+      > .bro-filter-drawer-card {
+        z-index: $bro-modal-filter-drawer-card-z-index;
+      }
+
+      > .bro-filter-drawer-header,
+      > [slot="filters"] {
+        z-index: $bro-modal-filter-drawer-content-z-index;
+      }
+    }
+
+    // The filters of the application under the header
+    > [slot="filters"] > * {
+      padding: $bro-row-horizontal-padding;
+    }
+  }
+
+  // The filters of the application under the header in the card of mat-drawer of the mat skin
+  .bro-filter-drawer-card > .bro-filter-drawer-header ~ * {
+    padding: $bro-row-horizontal-padding;
+  }
+
+  .bro-filter-drawer-header {
+    .bro-toolbar {
+      display: block;
+
+      height: $bro-toolbar-height;
+
+      > nav {
+        box-sizing: border-box;
+        height: 100%;
+      }
+    }
+  }
+}

package/styles/skin/shared/table-bro/_shadows.scss

@@ -0,0 +1,19 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  #{$bro-shadow} {
+    padding-right: var(--bro-shadow-size);
+    padding-left: var(--bro-shadow-size);
+  }
+
+  #{$bro-table-shadows} {
+    z-index: $bro-shadow-z-index;
+
+    width: calc(100% - var(--bro-shadow-size) * 2);
+
+    .bro-row {
+      height: var(--bro-row-height);
+    }
+  }
+}

package/styles/skin/shared/table-bro/_state.scss

@@ -0,0 +1,38 @@
+@use 'sass:math';
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+
+@mixin styles {
+  $bro-state-icon-rotate-offset: math.ceil(math.sqrt(2) * $bro-state-icon-size) - $bro-state-icon-size;
+
+  #{$bro-state-container}  {
+    padding-right: $bro-state-icon-rotate-offset;
+    padding-left: $bro-state-icon-rotate-offset;
+
+    font-size: $bro-state-message-font-size;
+    line-height: $bro-state-line-height;
+
+    .bro-state-icon {
+      top: $bro-state-line-height;
+
+      width: $bro-state-icon-size;
+      height: $bro-state-icon-size;
+
+      margin-right: $bro-state-icon-margin-right;
+
+      font-size: $bro-state-icon-size;
+      line-height: $bro-state-line-height;
+
+      & > svg {
+        width: $bro-state-icon-size;
+        height: $bro-state-icon-size;
+
+        vertical-align: top;
+      }
+    }
+
+    lottie-player {
+      height: $bro-state-icon-size * 3;
+    }
+  }
+}

package/styles/skin/shared/table-bro/_table.scss

@@ -0,0 +1,70 @@
+// The skin class is on the table element itself: table-bro#{&} is table-bro.nv and the like
+// The visible table starts one shadow size into the element and keeps its width, so a full width leaves room
+// for both shadows
+
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../mixins/toolbar" as *;
+
+@mixin styles {
+  @at-root table-bro#{&} {
+    @if $bro-table-width == 100% {
+      width: calc(100% - var(--bro-shadow-size) * 2);
+    } @else {
+      width: $bro-table-width;
+    }
+
+    // A narrower table would wrap its paginator; a narrow screen is for the adaptive layout of the next versions
+    min-width: var(--bro-table-min-width);
+  }
+
+  @at-root table-bro#{&} table {
+    th.bro-header-cell,
+    td.bro-cell {
+      box-sizing: border-box;
+
+      padding: 0 0 0 $bro-row-horizontal-padding;
+    }
+
+    // The last column keeps the same space at the right edge of the table, as Material gives it: a value at the right
+    // edge of its column does not touch the edge of the table
+    th.bro-header-cell:last-child,
+    td.bro-cell:last-child {
+      padding-right: $bro-row-horizontal-padding;
+    }
+  }
+
+
+  @include skin_table-header();
+
+
+  #{$bro-table-body_container} {
+    // The body runs on under the paginator by one shadow size, with the rows of the next page; the rounded bottom
+    // corners of the paginator would show them. Under the paginator the body ends above its corners, and beside it
+    // the shadow of the body keeps its size. An extension of the layout of the body that draws its own decorations of the
+    // rows hides the rows out of the window itself, so they stay whole
+    $cut: max(0px, var(--bro-shadow-size) + var(--bro-corner-radius) - #{$bro-paginator-height});
+
+    z-index: $bro-table-container-z-index;
+    top: calc(var(--bro-shadow-size) * -1);
+
+    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--bro-shadow-size)) 100%, calc(100% - var(--bro-shadow-size)) calc(100% - #{$cut}), var(--bro-shadow-size) calc(100% - #{$cut}), var(--bro-shadow-size) 100%, 0 100%);
+  }
+
+  #{$bro-table-body} {
+    z-index: $bro-table-container-z-index;
+
+    > .bro-table {
+      z-index: $bro-table-container-z-index;
+    }
+  }
+
+  #{$bro-table-body},
+  #{$bro-table-shadows} {
+    padding-top: var(--bro-shadow-size);
+  }
+
+  #{$bro-table-aux} {
+    top: var(--bro-shadow-size);
+  }
+}

package/styles/skin/shared/table-bro/_text-ellipsis.scss

@@ -0,0 +1,14 @@
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../../../mixins/text-ellipsis" as *;
+
+@mixin styles {
+  #{$bro-cell_text-ellipsis-container} {
+    line-height: 1.5;
+  }
+
+  // The width of the row counter column of the skin; the skin class is on the table element itself
+  @at-root table-bro#{&} {
+    @include bro-text-ellipsis-width('.bro-cell-number', $bro-cell-number-width);
+  }
+}

package/styles/skin/vanilla-js/native/_themes.scss

@@ -0,0 +1,45 @@
+@use "variables" as *;
+@use "../../shared/mixins/skin-colors" as *;
+
+$bro-border-color: #dee2e6;
+$bro-border-color-dark: #495057;
+
+@mixin styles {
+  // The table has the text and the color scheme of its theme: native controls follow the scheme, and a table with
+  // a theme of its own does not take the text of a page of the other theme
+  #{$bro-skin} {
+    color: #212529;
+
+    color-scheme: light;
+
+    @include bro-table-theme(
+        '.bro-table',
+        '.bro-toolbar',
+        #fff,
+        $bro-border-color,
+        #212529,
+        rgba(#212529, .75)
+    );
+  }
+
+  // Apply the dark theme only when the `.bro-dark-theme` CSS class is applied
+  // to an ancestor element of the components (such as `body`) or to the table host.
+  // A table with its own light theme, the class bro-light-theme, stays light under a dark ancestor
+  .bro-dark-theme {
+    #{$bro-skin}:not(.bro-light-theme),
+    &#{$bro-skin} {
+      color: #dee2e6;
+
+      color-scheme: dark;
+
+      @include bro-table-theme(
+          '.bro-table',
+          '.bro-toolbar',
+          #2b3035,
+          $bro-border-color-dark,
+          #dee2e6,
+          rgba(#dee2e6, .75)
+      );
+    }
+  }
+}

package/styles/skin/vanilla-js/native/_variables.scss

@@ -0,0 +1,54 @@
+// The values of the native skin for the variables every skin has (skin/shared/_variables.scss)
+@forward "../../shared/variables" with (
+  $bro-skin: '.nv',
+
+  $bro-table-width: 100% !default, // or px-value, or 100%;
+
+  $bro-table-header-height: 40px !default,
+  $bro-table-row-height: 40px !default,
+  $bro-row-horizontal-padding: 1.25rem !default,
+
+  $bro-table-shadow-size: 48px !default,
+
+  $bro-toolbar-height: 64px !default,
+  $bro-paginator-height: 56px !default,
+  $bro-table-min-width: 594px !default,
+
+  $bro-corner-radius: 12px !default, // the corner-medium of Material 3, as its cards
+
+  $bro-filter-drawer-width: 320px !default,
+  $bro-filter-drawer-corner-radius: 16px !default, // the corner-large of Material 3, as its side sheets
+  $bro-scrim-color: rgba(#000, .32) !default, // the scrim of Material 3
+
+
+  $bro-global-progress: 10px !default,
+  $bro-details-progress: 6px !default,
+
+
+  // Layers
+  $bro-table-container-z-index: 2 !default,
+  $bro-shadow-z-index: -1 !default,
+
+
+  // Read by the table script (skin/shared/mixins/_custom-properties.scss)
+  $bro-refresh-overlay-opacity: .5 !default,
+  $bro-refresh-overlay-opacity-dark: .5 !default,
+  $bro-column-width-duration: 500ms !default, // read by the CSS alone
+  $bro-details-duration: 350ms !default,
+  $bro-details-easing: cubic-bezier(.37, 0, .63, 1) !default, // the curve of easeInOutSine
+  $bro-filter-drawer-duration: 400ms !default,
+  $bro-kinetic-time-constant: 280ms !default, // the time constant of the exponential decay, not its duration
+  $bro-state-icon-duration: 500ms !default,
+  $bro-state-message-duration: 750ms !default,
+
+
+  // State
+  $bro-state-icon-size: 28px !default,
+  $bro-state-icon-margin-right: 16px !default,
+  $bro-state-line-height: 33px !default,
+  $bro-state-message-font-size: 28px !default,
+
+
+  // Table cells
+  $bro-cell-number-width: 45px !default
+);

package/styles/skin/vanilla-js/native/components/bootstrap-based/_paginator.scss

@@ -0,0 +1,50 @@
+@use "../../variables" as *;
+
+$bro-margin: 0.5rem;
+$bro-padding: $bro-margin;
+
+$bro-link-color: #00e;
+$bro-link-color-dark: #7dafff;
+
+@mixin styles {
+  .bro-pagination { // copies styles of bs `.pagination`
+    display: flex;
+
+    // The links have no padding of their own: the last one stands as far from the edge as the links of Bootstrap do
+    margin-right: 0.75rem;
+    margin-bottom: 0;
+    padding-left: 0;
+
+    list-style: none;
+
+    cursor: pointer;
+  }
+
+  .bro-page-link {
+    position: relative;
+
+    display: block;
+
+    color: $bro-link-color;
+  }
+
+  .bro-dark-theme #{$bro-skin}:not(.bro-light-theme),
+  #{$bro-skin}.bro-dark-theme {
+    .bro-page-link {
+      color: $bro-link-color-dark;
+    }
+  }
+
+  .bro-page-item {
+    &:not(:first-child) .bro-page-link {
+      margin-left: $bro-margin;
+    }
+
+    // The paginator gives the class disabled to the item of a page that does not exist; after the colors of the themes
+    &.disabled .bro-page-link {
+      color: GrayText;
+
+      pointer-events: none;
+    }
+  }
+}

package/styles/skin/vanilla-js/native/components/bootstrap-based/_toolbar.scss

@@ -0,0 +1,107 @@
+@use "../../variables" as *;
+@use "paginator" as *;
+@use "../../../shared/table-bro/toolbar" as *;
+
+$bro-margin: 0.5rem;
+$bro-padding: $bro-margin;
+
+
+/** Bootstrap-based (5.3) styles: */
+.bro-navbar {
+  position: relative;
+
+  display: flex;
+
+  padding: $bro-padding;
+
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
+}
+
+div.bro-toolbar-content { // styles of `.container-fluid`
+  display: flex;
+
+  width: 100%;
+
+  flex-wrap: inherit;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+.bro-navbar-brand {
+  margin-right: $bro-padding;
+  padding-top: $bro-padding;
+  padding-bottom: $bro-padding;
+
+  font-weight: bold;
+
+  white-space: nowrap;
+}
+
+ul.bro-navbar-nav {
+  display: flex;
+
+  // The links have no padding of their own: the last one stands as far from the edge as the links of Bootstrap do
+  margin-right: 0.75rem;
+  margin-bottom: 0;
+  padding-left: 0;
+
+  flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
+
+  list-style: none;
+}
+
+.bro-navbar-collapse {
+  flex-grow: 1;
+  flex-basis: 100%;
+
+  // For always expanded or extra full navbars, ensure content aligns itself
+  // properly vertically. Can be easily overridden with flex utilities.
+  align-items: center;
+}
+
+.bro-navbar-expand {
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+
+  .bro-navbar-nav {
+    flex-direction: row;
+  }
+
+  .bro-navbar-collapse {
+    display: flex;
+
+    flex-basis: auto;
+  }
+}
+
+
+/** Custom styles: */
+.bro-nav-item {
+  &:not(:first-child) .bro-nav-link {
+    margin-left: $bro-margin;
+  }
+
+  select {
+    width: 60px;
+
+    margin-left: $bro-margin;
+
+    // The native select of WebKit keeps a wider place for its arrow than the one of Chrome, and 60px cut its title to
+    // "Mo": there it takes the width of its title. Only WebKit knows the system font -apple-system-body
+    @supports (font: -apple-system-body) {
+      width: auto;
+
+      field-sizing: content;
+    }
+  }
+}
+
+@include toolbar-links('.bro-nav-link', $bro-link-color);
+
+.bro-dark-theme #{$bro-skin}:not(.bro-light-theme),
+#{$bro-skin}.bro-dark-theme {
+  @include toolbar-links('.bro-nav-link', $bro-link-color-dark);
+}

package/styles/skin/vanilla-js/native/table-bro/_button.scss

@@ -0,0 +1,36 @@
+@use "../components/bootstrap-based/paginator" as *;
+
+@mixin styles {
+  bro-button {
+    a {
+      color: $bro-link-color;
+    }
+
+    // A link with an icon is one box, so the outline of its focus is one rectangle around the title and the icon,
+    // not the box of the text with the taller box of the icon
+    a:has(> .bro-button-toggle) {
+      display: inline-block;
+
+      // The native outline of WebKit takes in the box of the turned icon of an open row, which reaches below the link,
+      // unless the link clips its overflow. It clips it across alone: a clip down the link moves its baseline in WebKit.
+      // Only WebKit knows the system font -apple-system-body; Chrome draws the text of a link that clips its overflow
+      // with other pixels. The icon paints in a layer of its own there, from the start: the layers around it change
+      // with the focus of the keyboard, as the cell of a row of Island Details takes one, and Safari kept an old icon
+      // in a layer that had painted it next to the new one. An icon in its own layer paints into no other layer
+      @supports (font: -apple-system-body) {
+        overflow-x: clip;
+
+        > .bro-button-toggle {
+          will-change: transform;
+        }
+      }
+    }
+  }
+
+  .bro-dark-theme &:not(.bro-light-theme),
+  &.bro-dark-theme {
+    a {
+      color: $bro-link-color-dark;
+    }
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_filter-drawer.scss

@@ -0,0 +1,10 @@
+@use "toolbar" as *;
+@use "../../shared/table-bro/filter-drawer" as *;
+
+@mixin styles {
+  .bro-filter-drawer-header .bro-nav-link {
+    text-decoration: none;
+  }
+
+  @include filter-drawer-header-content($bro-nav-link-padding);
+}

package/styles/skin/vanilla-js/native/table-bro/_progress-bar.scss

@@ -0,0 +1,45 @@
+@use "sass:math";
+@use "../variables" as *;
+@use "shared-selector-map" as *;
+@use "../../../shared/mixins/progress-bar" as *;
+
+@mixin styles {
+  @include table-header-progress-bar('bro-nv-progress-bar progress');
+  @include table-aux-progress-bar('bro-nv-progress-bar progress');
+
+  $bro-nv-global-progress-inner-vertical-space: 3px; // inner top/bottom space if height is 10px
+
+  #{$bro-table-header} {
+    bro-nv-progress-bar progress {
+      top: calc(var(--bro-header-height) - #{$bro-global-progress - $bro-nv-global-progress-inner-vertical-space});
+    }
+  }
+
+  $bro-nv-details-progress-inner-vertical-space: 2px; // inner top/bottom space if height is 6px
+
+  #{$bro-table-aux} {
+    bro-nv-progress-bar progress {
+      top: calc(var(--bro-row-height) - #{$bro-details-progress - $bro-nv-details-progress-inner-vertical-space});
+    }
+  }
+
+  // WebKit and Firefox draw their native bar over the height of the box, at most 8px and 6px, and Chrome draws it at
+  // half the height of the box, in its middle. In WebKit, which alone knows the system font -apple-system-body, and in
+  // Firefox, which alone knows ::-moz-progress-bar, the box takes the height and the place of the bar of Chrome, so
+  // their bars have them too.
+  @supports (font: -apple-system-body) or selector(::-moz-progress-bar) {
+    #{$bro-table-header} {
+      bro-nv-progress-bar progress {
+        height: math.div($bro-global-progress, 2);
+        margin-top: math.div($bro-global-progress, 4);
+      }
+    }
+
+    #{$bro-table-aux} {
+      bro-nv-progress-bar progress {
+        height: math.div($bro-details-progress, 2);
+        margin-top: math.div($bro-details-progress, 4);
+      }
+    }
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_table.scss

@@ -0,0 +1,16 @@
+@use "../themes" as *;
+
+@mixin styles {
+  @at-root table-bro#{&} table {
+    border-color: $bro-border-color;
+
+    > :not(caption) > * > * {
+      border-bottom-width: 1px;
+    }
+  }
+
+  @at-root .bro-dark-theme table-bro#{&}:not(.bro-light-theme) table,
+  table-bro#{&}.bro-dark-theme table {
+    border-color: $bro-border-color-dark;
+  }
+}

package/styles/skin/vanilla-js/native/table-bro/_toolbar-search.scss

@@ -0,0 +1,17 @@
+@use "toolbar" as *;
+@use "shared-selector-map" as *;
+@use "../../shared/table-bro/toolbar-search" as *;
+
+@mixin styles {
+  #{$bro-toolbar_content-search} {
+    input {
+      font-weight: bold;
+    }
+  }
+
+  .bro-toolbar-search .bro-nav-link {
+    text-decoration: none;
+  }
+
+  @include toolbar-search-content($bro-nav-link-padding);
+}