@vaadin/grid 22.0.0-alpha7

package/theme/lumo/all-imports.js

@@ -0,0 +1,11 @@
+import './vaadin-grid-column-group.js';
+import './vaadin-grid-column.js';
+import './vaadin-grid-filter.js';
+import './vaadin-grid-filter-column.js';
+import './vaadin-grid-selection-column.js';
+import './vaadin-grid-sorter.js';
+import './vaadin-grid-sort-column.js';
+import './vaadin-grid-tree-toggle.js';
+import './vaadin-grid-tree-column.js';
+import './vaadin-grid.js';
+import '../../src/all-imports.js';

package/theme/lumo/vaadin-grid-column-group.js

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column-group.js';

package/theme/lumo/vaadin-grid-column.js

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column.js';

package/theme/lumo/vaadin-grid-filter-column.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-filter.js';
+import '../../src/vaadin-grid-filter-column.js';

package/theme/lumo/vaadin-grid-filter.js

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
+import '../../src/vaadin-grid-filter.js';

package/theme/lumo/vaadin-grid-selection-column.js

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import '../../src/vaadin-grid-selection-column.js';

package/theme/lumo/vaadin-grid-sort-column.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter.js';
+import '../../src/vaadin-grid-sort-column.js';

package/theme/lumo/vaadin-grid-sorter-styles.js

@@ -0,0 +1,53 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+
+registerStyles(
+  'vaadin-grid-sorter',
+  css`
+    :host {
+      justify-content: flex-start;
+      align-items: baseline;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+      cursor: var(--lumo-clickable-cursor);
+    }
+
+    [part='content'] {
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    [part='indicators'] {
+      margin-left: var(--lumo-space-s);
+    }
+
+    [part='indicators']::before {
+      transform: scale(0.8);
+    }
+
+    :host(:not([direction]):not(:hover)) [part='indicators'] {
+      color: var(--lumo-tertiary-text-color);
+    }
+
+    :host([direction]) {
+      color: var(--lumo-primary-text-color);
+    }
+
+    [part='order'] {
+      font-size: var(--lumo-font-size-xxs);
+      line-height: 1;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) [part='indicators'] {
+      margin-right: var(--lumo-space-s);
+      margin-left: 0;
+    }
+  `,
+  { moduleId: 'lumo-grid-sorter' }
+);

package/theme/lumo/vaadin-grid-sorter.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter-styles.js';
+import '../../src/vaadin-grid-sorter.js';

package/theme/lumo/vaadin-grid-styles.js

@@ -0,0 +1,378 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+
+registerStyles(
+  'vaadin-grid',
+  css`
+    :host {
+      font-family: var(--lumo-font-family);
+      font-size: var(--lumo-font-size-m);
+      line-height: var(--lumo-line-height-s);
+      color: var(--lumo-body-text-color);
+      background-color: var(--lumo-base-color);
+      box-sizing: border-box;
+      -webkit-text-size-adjust: 100%;
+      -webkit-tap-highlight-color: transparent;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+
+      /* For internal use only */
+      --_lumo-grid-border-color: var(--lumo-contrast-20pct);
+      --_lumo-grid-secondary-border-color: var(--lumo-contrast-10pct);
+      --_lumo-grid-border-width: 1px;
+      --_lumo-grid-selected-row-color: var(--lumo-primary-color-10pct);
+    }
+
+    /* No (outer) border */
+
+    :host(:not([theme~='no-border'])) {
+      border: var(--_lumo-grid-border-width) solid var(--_lumo-grid-border-color);
+    }
+
+    /* Cell styles */
+
+    [part~='cell'] {
+      min-height: var(--lumo-size-m);
+      background-color: var(--lumo-base-color);
+    }
+
+    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      cursor: default;
+      padding: var(--lumo-space-xs) var(--lumo-space-m);
+    }
+
+    /* Apply row borders by default and introduce the "no-row-borders" variant */
+    :host(:not([theme~='no-row-borders'])) [part~='cell']:not([part~='details-cell']) {
+      border-top: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
+    }
+
+    /* Hide first body row top border */
+    :host(:not([theme~='no-row-borders'])) [part='row'][first] [part~='cell']:not([part~='details-cell']) {
+      border-top: 0;
+      min-height: calc(var(--lumo-size-m) - var(--_lumo-grid-border-width));
+    }
+
+    /* Focus-ring */
+
+    [part~='row']:focus,
+    [part~='cell']:focus {
+      outline: none;
+    }
+
+    :host([navigating]) [part~='row']:focus::before,
+    :host([navigating]) [part~='cell']:focus::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
+    :host([navigating]) [part~='row']:focus::before {
+      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
+      z-index: 3;
+    }
+
+    /* Drag and Drop styles */
+    :host([dragover])::after {
+      content: '';
+      position: absolute;
+      z-index: 100;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
+    [part~='row'][dragover] {
+      z-index: 100 !important;
+    }
+
+    [part~='row'][dragover] [part~='cell'] {
+      overflow: visible;
+    }
+
+    [part~='row'][dragover] [part~='cell']::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: calc(var(--_lumo-grid-border-width) + 2px);
+      pointer-events: none;
+      background: var(--lumo-primary-color-50pct);
+    }
+
+    [part~='row'][dragover] [part~='cell'][last-frozen]::after {
+      right: -1px;
+    }
+
+    :host([theme~='no-row-borders']) [dragover] [part~='cell']::after {
+      height: 2px;
+    }
+
+    [part~='row'][dragover='below'] [part~='cell']::after {
+      top: 100%;
+      bottom: auto;
+      margin-top: -1px;
+    }
+
+    [part~='row'][dragover='above'] [part~='cell']::after {
+      top: auto;
+      bottom: 100%;
+      margin-bottom: -1px;
+    }
+
+    [part~='row'][details-opened][dragover='below'] [part~='cell']:not([part~='details-cell'])::after,
+    [part~='row'][details-opened][dragover='above'] [part~='details-cell']::after {
+      display: none;
+    }
+
+    [part~='row'][dragover][dragover='on-top'] [part~='cell']::after {
+      height: 100%;
+      opacity: 0.5;
+    }
+
+    [part~='row'][dragstart] [part~='cell'] {
+      border: none !important;
+      box-shadow: none !important;
+    }
+
+    [part~='row'][dragstart] [part~='cell'][last-column] {
+      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
+    }
+
+    [part~='row'][dragstart] [part~='cell'][first-column] {
+      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
+    }
+
+    [ios] [part~='row'][dragstart] [part~='cell'] {
+      background: var(--lumo-primary-color-50pct);
+    }
+
+    #scroller:not([ios]) [part~='row'][dragstart]:not([dragstart=''])::after {
+      display: block;
+      position: absolute;
+      left: var(--_grid-drag-start-x);
+      top: var(--_grid-drag-start-y);
+      z-index: 100;
+      content: attr(dragstart);
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: calc(var(--lumo-space-xs) * 0.8);
+      color: var(--lumo-error-contrast-color);
+      background-color: var(--lumo-error-color);
+      border-radius: var(--lumo-border-radius-m);
+      font-family: var(--lumo-font-family);
+      font-size: var(--lumo-font-size-xxs);
+      line-height: 1;
+      font-weight: 500;
+      text-transform: initial;
+      letter-spacing: initial;
+      min-width: calc(var(--lumo-size-s) * 0.7);
+      text-align: center;
+    }
+
+    /* Headers and footers */
+
+    [part~='header-cell'] ::slotted(vaadin-grid-cell-content),
+    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content),
+    [part~='reorder-ghost'] {
+      font-size: var(--lumo-font-size-s);
+      font-weight: 500;
+    }
+
+    [part~='footer-cell'] ::slotted(vaadin-grid-cell-content) {
+      font-weight: 400;
+    }
+
+    [part='row']:only-child [part~='header-cell'] {
+      min-height: var(--lumo-size-xl);
+    }
+
+    /* Header borders */
+
+    /* Hide first header row top border */
+    :host(:not([theme~='no-row-borders'])) [part='row']:first-child [part~='header-cell'] {
+      border-top: 0;
+    }
+
+    [part='row']:last-child [part~='header-cell'] {
+      border-bottom: var(--_lumo-grid-border-width) solid transparent;
+    }
+
+    :host(:not([theme~='no-row-borders'])) [part='row']:last-child [part~='header-cell'] {
+      border-bottom-color: var(--_lumo-grid-secondary-border-color);
+    }
+
+    /* Overflow uses a stronger border color */
+    :host([overflow~='top']) [part='row']:last-child [part~='header-cell'] {
+      border-bottom-color: var(--_lumo-grid-border-color);
+    }
+
+    /* Footer borders */
+
+    [part='row']:first-child [part~='footer-cell'] {
+      border-top: var(--_lumo-grid-border-width) solid transparent;
+    }
+
+    :host(:not([theme~='no-row-borders'])) [part='row']:first-child [part~='footer-cell'] {
+      border-top-color: var(--_lumo-grid-secondary-border-color);
+    }
+
+    /* Overflow uses a stronger border color */
+    :host([overflow~='bottom']) [part='row']:first-child [part~='footer-cell'] {
+      border-top-color: var(--_lumo-grid-border-color);
+    }
+
+    /* Column reordering */
+
+    :host([reordering]) [part~='cell'] {
+      background: linear-gradient(var(--lumo-shade-20pct), var(--lumo-shade-20pct)) var(--lumo-base-color);
+    }
+
+    :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+      background: var(--lumo-base-color);
+    }
+
+    :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+      background: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct)) var(--lumo-base-color);
+    }
+
+    [part~='reorder-ghost'] {
+      opacity: 0.85;
+      box-shadow: var(--lumo-box-shadow-s);
+      /* TODO Use the same styles as for the cell element (reorder-ghost copies styles from the cell element) */
+      padding: var(--lumo-space-s) var(--lumo-space-m) !important;
+    }
+
+    /* Column resizing */
+
+    [part='resize-handle'] {
+      width: 3px;
+      background-color: var(--lumo-primary-color-50pct);
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+
+    :host(:not([reordering])) *:not([column-resizing]) [part~='cell']:hover [part='resize-handle'],
+    [part='resize-handle']:active {
+      opacity: 1;
+      transition-delay: 0.15s;
+    }
+
+    /* Column borders */
+
+    :host([theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+      border-right: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
+    }
+
+    /* Frozen columns */
+
+    [last-frozen] {
+      border-right: var(--_lumo-grid-border-width) solid transparent;
+      overflow: hidden;
+    }
+
+    :host([overflow~='left']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+      border-right-color: var(--_lumo-grid-border-color);
+    }
+
+    /* Row stripes */
+
+    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='body-cell'],
+    :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='details-cell'] {
+      background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+      background-repeat: repeat-x;
+    }
+
+    /* Selected row */
+
+    /* Raise the selected rows above unselected rows (so that box-shadow can cover unselected rows) */
+    :host(:not([reordering])) [part~='row'][selected] {
+      z-index: 1;
+    }
+
+    :host(:not([reordering])) [part~='row'][selected] [part~='body-cell']:not([part~='details-cell']) {
+      background-image: linear-gradient(var(--_lumo-grid-selected-row-color), var(--_lumo-grid-selected-row-color));
+      background-repeat: repeat;
+    }
+
+    /* Cover the border of an unselected row */
+    :host(:not([theme~='no-row-borders'])) [part~='row'][selected] [part~='cell']:not([part~='details-cell']) {
+      box-shadow: 0 var(--_lumo-grid-border-width) 0 0 var(--_lumo-grid-selected-row-color);
+    }
+
+    /* Compact */
+
+    :host([theme~='compact']) [part='row']:only-child [part~='header-cell'] {
+      min-height: var(--lumo-size-m);
+    }
+
+    :host([theme~='compact']) [part~='cell'] {
+      min-height: var(--lumo-size-s);
+    }
+
+    :host([theme~='compact']) [part='row'][first] [part~='cell']:not([part~='details-cell']) {
+      min-height: calc(var(--lumo-size-s) - var(--_lumo-grid-border-width));
+    }
+
+    :host([theme~='compact']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      padding: var(--lumo-space-xs) var(--lumo-space-s);
+    }
+
+    /* Wrap cell contents */
+
+    :host([theme~='wrap-cell-content']) [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      white-space: normal;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][last-column] {
+      border-radius: var(--lumo-border-radius-s) 0 0 var(--lumo-border-radius-s);
+    }
+
+    :host([dir='rtl']) [part~='row'][dragstart] [part~='cell'][first-column] {
+      border-radius: 0 var(--lumo-border-radius-s) var(--lumo-border-radius-s) 0;
+    }
+
+    :host([dir='rtl'][theme~='column-borders']) [part~='cell']:not([last-column]):not([part~='details-cell']) {
+      border-right: none;
+      border-left: var(--_lumo-grid-border-width) solid var(--_lumo-grid-secondary-border-color);
+    }
+
+    :host([dir='rtl']) [last-frozen] {
+      border-right: none;
+      border-left: var(--_lumo-grid-border-width) solid transparent;
+    }
+
+    :host([dir='rtl'][overflow~='right']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+      border-left-color: var(--_lumo-grid-border-color);
+    }
+  `,
+  { moduleId: 'lumo-grid' }
+);
+
+registerStyles(
+  'vaadin-checkbox',
+  css`
+    :host(.vaadin-grid-select-all-checkbox) {
+      font-size: var(--lumo-font-size-m);
+    }
+  `,
+  { moduleId: 'vaadin-grid-select-all-checkbox-lumo' }
+);

package/theme/lumo/vaadin-grid-tree-column.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle.js';
+import '../../src/vaadin-grid-tree-column.js';

package/theme/lumo/vaadin-grid-tree-toggle-styles.js

@@ -0,0 +1,112 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+
+registerStyles(
+  'vaadin-grid-tree-toggle',
+  css`
+    :host {
+      --vaadin-grid-tree-toggle-level-offset: 2em;
+      align-items: center;
+      vertical-align: middle;
+      margin-left: calc(var(--lumo-space-s) * -1);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    :host(:not([leaf])) {
+      cursor: default;
+    }
+
+    [part='toggle'] {
+      display: inline-block;
+      font-size: 1.5em;
+      line-height: 1;
+      width: 1em;
+      height: 1em;
+      text-align: center;
+      color: var(--lumo-contrast-50pct);
+      cursor: var(--lumo-clickable-cursor);
+      /* Increase touch target area */
+      padding: calc(1em / 3);
+      margin: calc(1em / -3);
+    }
+
+    :host(:not([dir='rtl'])) [part='toggle'] {
+      margin-right: 0;
+    }
+
+    @media (hover: hover) {
+      :host(:hover) [part='toggle'] {
+        color: var(--lumo-contrast-80pct);
+      }
+    }
+
+    [part='toggle']::before {
+      font-family: 'lumo-icons';
+      display: inline-block;
+      height: 100%;
+    }
+
+    :host(:not([expanded])) [part='toggle']::before {
+      content: var(--lumo-icons-angle-right);
+    }
+
+    :host([expanded]) [part='toggle']::before {
+      content: var(--lumo-icons-angle-right);
+      transform: rotate(90deg);
+    }
+
+    /* Experimental support for hierarchy connectors, using an unsupported selector */
+    :host([theme~='connectors']) #level-spacer {
+      position: relative;
+      z-index: -1;
+      font-size: 1em;
+      height: 1.5em;
+    }
+
+    :host([theme~='connectors']) #level-spacer::before {
+      display: block;
+      content: '';
+      margin-top: calc(var(--lumo-space-m) * -1);
+      height: calc(var(--lumo-space-m) + 3em);
+      background-image: linear-gradient(
+        to right,
+        transparent calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px),
+        var(--lumo-contrast-10pct) calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px)
+      );
+      background-size: var(--vaadin-grid-tree-toggle-level-offset) var(--vaadin-grid-tree-toggle-level-offset);
+      background-position: calc(var(--vaadin-grid-tree-toggle-level-offset) / 2 - 2px) 0;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) {
+      margin-left: 0;
+      margin-right: calc(var(--lumo-space-s) * -1);
+    }
+
+    :host([dir='rtl']) [part='toggle'] {
+      margin-left: 0;
+    }
+
+    :host([dir='rtl'][expanded]) [part='toggle']::before {
+      transform: rotate(-90deg);
+    }
+
+    :host([dir='rtl'][theme~='connectors']) #level-spacer::before {
+      background-image: linear-gradient(
+        to left,
+        transparent calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px),
+        var(--lumo-contrast-10pct) calc(var(--vaadin-grid-tree-toggle-level-offset) - 1px)
+      );
+      background-position: calc(100% - (var(--vaadin-grid-tree-toggle-level-offset) / 2 - 2px)) 0;
+    }
+
+    :host([dir='rtl']:not([expanded])) [part='toggle']::before,
+    :host([dir='rtl'][expanded]) [part='toggle']::before {
+      content: var(--lumo-icons-angle-left);
+    }
+  `,
+  { moduleId: 'lumo-grid-tree-toggle' }
+);

package/theme/lumo/vaadin-grid-tree-toggle.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-tree-toggle-styles.js';
+import '../../src/vaadin-grid-tree-toggle.js';

package/theme/lumo/vaadin-grid.js

@@ -0,0 +1,9 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/checkbox/theme/lumo/vaadin-checkbox.js';
+import './vaadin-grid-styles.js';
+import '../../src/vaadin-grid.js';

package/theme/material/all-imports.js

@@ -0,0 +1,11 @@
+import './vaadin-grid-column-group.js';
+import './vaadin-grid-column.js';
+import './vaadin-grid-filter.js';
+import './vaadin-grid-filter-column.js';
+import './vaadin-grid-selection-column.js';
+import './vaadin-grid-sorter.js';
+import './vaadin-grid-sort-column.js';
+import './vaadin-grid-tree-toggle.js';
+import './vaadin-grid-tree-column.js';
+import './vaadin-grid.js';
+import '../../src/all-imports.js';

package/theme/material/vaadin-grid-column-group.js

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column-group.js';

package/theme/material/vaadin-grid-column.js

@@ -0,0 +1 @@
+import '../../src/vaadin-grid-column.js';

package/theme/material/vaadin-grid-filter-column.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-filter.js';
+import '../../src/vaadin-grid-filter-column.js';

package/theme/material/vaadin-grid-filter.js

@@ -0,0 +1,2 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import '../../src/vaadin-grid-filter.js';

package/theme/material/vaadin-grid-selection-column.js

@@ -0,0 +1,2 @@
+import '@vaadin/checkbox/theme/material/vaadin-checkbox.js';
+import '../../src/vaadin-grid-selection-column.js';

package/theme/material/vaadin-grid-sort-column.js

@@ -0,0 +1,2 @@
+import './vaadin-grid-sorter.js';
+import '../../src/vaadin-grid-sort-column.js';