@vaadin/grid 22.0.0-alpha7

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

@@ -0,0 +1,72 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+
+registerStyles(
+  'vaadin-grid-sorter',
+  css`
+    :host {
+      justify-content: flex-start;
+      height: 100%;
+      align-items: center;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
+
+    :host([direction]) {
+      color: var(--material-body-text-color);
+    }
+
+    [part='indicators'] {
+      order: -1;
+    }
+
+    [part='indicators']::before {
+      display: inline-block;
+      width: 24px;
+      font-family: 'material-icons';
+      font-size: 18px;
+      line-height: 18px;
+      transition: 0.1s opacity cubic-bezier(0.4, 0, 0.2, 0.1), 0.1s width cubic-bezier(0.4, 0, 0.2, 0.1);
+      opacity: 0.5;
+    }
+
+    :host(:not([direction])) [part='indicators']::before {
+      content: var(--material-icons-arrow-upward);
+      width: 0;
+      opacity: 0;
+    }
+
+    :host([direction]) [part='indicators']::before {
+      opacity: 1;
+    }
+
+    :host([direction='asc']) [part='indicators']::before {
+      content: var(--material-icons-arrow-upward);
+    }
+
+    :host([direction='desc']) [part='indicators']::before {
+      content: var(--material-icons-arrow-downward);
+    }
+
+    :host(:hover) [part='indicators']::before {
+      width: 24px;
+      opacity: 1;
+    }
+
+    [part='order'] {
+      right: 4px;
+      top: -8px;
+      font-size: 10px;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) [part='order'] {
+      left: 4px;
+      right: auto;
+    }
+  `,
+  { moduleId: 'material-grid-sorter' }
+);

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

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

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

@@ -0,0 +1,252 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+
+registerStyles(
+  'vaadin-grid',
+  css`
+    :host {
+      background-color: var(--material-background-color);
+      font-family: var(--material-font-family);
+      font-size: var(--material-small-font-size);
+      line-height: 20px;
+      color: var(--material-body-text-color);
+    }
+
+    [part~='cell'] {
+      min-height: 48px;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+      padding: 8px 16px;
+    }
+
+    [part~='details-cell'] ::slotted(vaadin-grid-cell-content) {
+      padding: 14px 16px;
+    }
+
+    [part~='header-cell'],
+    [part~='footer-cell'] {
+      background-color: var(--material-background-color);
+      color: var(--material-secondary-text-color);
+      font-size: var(--material-caption-font-size);
+      font-weight: 500;
+    }
+
+    /* Header and footer divider between body rows */
+
+    [part~='body-cell'],
+    [part~='details-cell'],
+    [part~='row']:last-child > [part~='header-cell'] {
+      border-bottom: 1px solid var(--material-divider-color);
+    }
+
+    [part~='row']:first-child > [part~='footer-cell'] {
+      border-top: 1px solid var(--material-divider-color);
+    }
+
+    /* Body rows/cells */
+
+    [part~='body-cell'] {
+      background-color: var(--material-background-color);
+    }
+
+    [part~='row']:hover > [part~='body-cell'] {
+      background: linear-gradient(
+          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04)),
+          var(--_material-grid-row-hover-background-color, rgba(0, 0, 0, 0.04))
+        )
+        var(--material-background-color);
+    }
+
+    @media (hover: none) {
+      [part~='row']:hover > [part~='body-cell'] {
+        background: var(--material-background-color);
+      }
+    }
+
+    /* Selected row */
+
+    [part~='body-cell']::before {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: var(--material-primary-color);
+      opacity: 0;
+      transition: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
+    }
+
+    :host(:not([reordering])) [part~='row'][selected] > [part~='body-cell']::before {
+      opacity: var(--_material-grid-row-selected-overlay-opacity, 0.08);
+    }
+
+    [part~='body-cell'] ::slotted(vaadin-grid-cell-content) {
+      /* NOTE(platosha): Raise cell content above background cell pseudo elements */
+      position: relative;
+    }
+
+    /* Column reordering */
+
+    :host([reordering]) [part~='cell'] {
+      background: var(--material-secondary-background-color);
+    }
+
+    :host([reordering]) [part~='cell'][reorder-status='allowed'] {
+      background: var(--material-background-color);
+    }
+
+    :host([reordering]) [part~='cell'][reorder-status='dragging'] {
+      background: var(--material-background-color);
+    }
+
+    /* Frozen columns */
+
+    [part~='cell'][last-frozen] {
+      border-right: 1px solid var(--material-divider-color);
+    }
+
+    /* Column resizing */
+
+    [part~='cell']:not([last-frozen]) [part='resize-handle'] {
+      border-right: 1px solid var(--material-divider-color);
+    }
+
+    /* Keyboard navigation */
+
+    [part~='row']:focus,
+    [part~='cell']:focus {
+      outline: none;
+    }
+
+    :host([navigating]) [part~='row']:focus::before,
+    :host([navigating]) [part~='cell']:focus {
+      box-shadow: inset 0 0 0 2px var(--material-primary-color);
+    }
+
+    :host([navigating]) [part~='row']:focus::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      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(--material-primary-color);
+    }
+
+    [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: 3px;
+      pointer-events: none;
+      background: var(--material-primary-color);
+    }
+
+    [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] {
+      /* Add bottom-space to the row so the drag number doesn't get clipped. Needed for IE/Edge */
+      border-bottom: 100px solid transparent;
+      z-index: 100 !important;
+      opacity: 0.9;
+    }
+
+    [part~='row'][dragstart] [part~='cell'] {
+      border: none !important;
+      box-shadow: none !important;
+    }
+
+    [ios] [part~='row'][dragstart] [part~='cell'] {
+      background: var(--material-primary-color);
+    }
+
+    #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: 4px;
+      color: var(--material-primary-contrast-color);
+      background-color: var(--material-error-color);
+      min-width: 24px;
+      border-radius: 2px;
+      font-size: var(--material-caption-font-size);
+      text-align: center;
+      line-height: 1;
+    }
+
+    /* RTL specific styles */
+
+    :host([dir='rtl']) [part~='cell'][last-frozen] {
+      border-right: none;
+      border-left: 1px solid var(--material-divider-color);
+    }
+
+    :host([dir='rtl']) [part~='cell']:not([last-frozen]) [part='resize-handle'] {
+      border-right: none;
+      border-left: 1px solid var(--material-divider-color);
+    }
+
+    :host([dir='rtl']) #scroller:not([ios]) [part~='row'][dragstart]:not([dragstart=''])::after {
+      left: auto;
+      right: var(--_grid-drag-start-x);
+    }
+  `,
+  { moduleId: 'material-grid' }
+);

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

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

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

@@ -0,0 +1,42 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/font-icons.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+
+registerStyles(
+  'vaadin-grid-tree-toggle',
+  css`
+    :host {
+      --_material-grid-tree-toggle-collapsed-icon-transform: rotate(0);
+    }
+
+    :host([dir='rtl']) {
+      --_material-grid-tree-toggle-collapsed-icon-transform: rotate(180deg);
+    }
+
+    [part='toggle'] {
+      width: calc(var(--material-icon-font-size) + 8px);
+      position: relative;
+      align-self: stretch; /* NOTE(platosha): helps to maintain baseline */
+    }
+
+    [part='toggle']::before {
+      font-family: 'material-icons';
+      font-size: var(--material-icon-font-size);
+      width: var(--material-icon-font-size);
+      position: absolute; /* NOTE(platosha): helps to maintain baseline */
+      transform: var(--_material-grid-tree-toggle-collapsed-icon-transform);
+      transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 0.1);
+    }
+
+    :host(:not([expanded])) [part='toggle']::before,
+    :host([expanded]) [part='toggle']::before {
+      content: var(--material-icons-chevron-right);
+    }
+
+    :host([expanded]) [part='toggle']::before {
+      transform: rotate(90deg);
+    }
+  `,
+  { moduleId: 'material-grid-tree-toggle' }
+);

package/theme/material/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/material/vaadin-grid.js

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

package/vaadin-grid-column-group.d.ts

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

package/vaadin-grid-column-group.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-column-group.js';
+
+export * from './src/vaadin-grid-column-group.js';

package/vaadin-grid-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-column.js';

package/vaadin-grid-column.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-column.js';
+
+export * from './src/vaadin-grid-column.js';

package/vaadin-grid-filter-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-filter-column.js';

package/vaadin-grid-filter-column.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-filter-column.js';
+
+export * from './src/vaadin-grid-filter-column.js';

package/vaadin-grid-filter.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-filter.js';

package/vaadin-grid-filter.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-filter.js';
+
+export * from './src/vaadin-grid-filter.js';

package/vaadin-grid-selection-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-selection-column.js';

package/vaadin-grid-selection-column.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-selection-column.js';
+
+export * from './src/vaadin-grid-selection-column.js';

package/vaadin-grid-sort-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-sort-column.js';

package/vaadin-grid-sort-column.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-sort-column.js';
+
+export * from './src/vaadin-grid-sort-column.js';

package/vaadin-grid-sorter.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-sorter.js';

package/vaadin-grid-sorter.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-sorter.js';
+
+export * from './src/vaadin-grid-sorter.js';

package/vaadin-grid-tree-column.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-tree-column.js';

package/vaadin-grid-tree-column.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-tree-column.js';
+
+export * from './src/vaadin-grid-tree-column.js';

package/vaadin-grid-tree-toggle.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-grid-tree-toggle.js';

package/vaadin-grid-tree-toggle.js

@@ -0,0 +1,3 @@
+import './theme/lumo/vaadin-grid-tree-toggle.js';
+
+export * from './src/vaadin-grid-tree-toggle.js';

package/vaadin-grid.d.ts

@@ -0,0 +1,3 @@
+export * from './src/vaadin-grid.js';
+export * from './src/vaadin-grid-column.js';
+export * from './src/interfaces';

package/vaadin-grid.js

@@ -0,0 +1,4 @@
+import './theme/lumo/vaadin-grid.js';
+
+export * from './src/vaadin-grid-column.js';
+export * from './src/vaadin-grid.js';