@vaadin/grid-pro 22.0.0-alpha7

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

@@ -0,0 +1,41 @@
+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/typography.js';
+
+const gridProEditor = css`
+  :host([theme~='grid-pro-editor']) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    will-change: transform;
+    font-size: inherit;
+    --lumo-text-field-size: 27px;
+    /* outline similar to what grid uses */
+    box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  :host([theme~='grid-pro-editor']) [part='input-field'] {
+    padding: 0;
+    border-radius: 0;
+    flex-grow: 1;
+    font-weight: 400;
+  }
+
+  /* reset outline inherited from text-field */
+  :host([theme~='grid-pro-editor'][focus-ring]) [part='input-field'] {
+    box-shadow: none;
+  }
+
+  :host([theme~='grid-pro-editor']) ::slotted(input) {
+    padding: 0 var(--lumo-space-m);
+    font-size: inherit;
+  }
+`;
+
+registerStyles('', gridProEditor, { moduleId: 'lumo-grid-pro-editor' });
+
+export { gridProEditor };

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

@@ -0,0 +1,19 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-lumo-styles/color.js';
+
+registerStyles(
+  'vaadin-grid-pro',
+  css`
+    :host([navigating]) [part~='cell']:active::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);
+    }
+  `,
+  { moduleId: 'lumo-grid-pro' }
+);

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

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/lumo/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-grid-pro.js';

package/theme/material/vaadin-grid-pro-edit-checkbox.js

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

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

@@ -0,0 +1,4 @@
+import './vaadin-grid-pro-edit-checkbox.js';
+import './vaadin-grid-pro-edit-select.js';
+import './vaadin-grid-pro-edit-text-field.js';
+import '../../src/vaadin-grid-pro-edit-column.js';

package/theme/material/vaadin-grid-pro-edit-select-styles.js

@@ -0,0 +1,17 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
+
+const gridProEditSelect = css`
+  :host([theme~='grid-pro-editor']) [part='input-field'] ::slotted([slot='value']) {
+    box-sizing: border-box;
+    font-size: inherit;
+    /* prevent selection on editor focus */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+`;
+
+registerStyles('vaadin-grid-pro-edit-select', [gridProEditor, gridProEditSelect], {
+  moduleId: 'material-grid-pro-edit-select'
+});

package/theme/material/vaadin-grid-pro-edit-select.js

@@ -0,0 +1,5 @@
+import '@vaadin/item/theme/material/vaadin-item.js';
+import '@vaadin/list-box/theme/material/vaadin-list-box.js';
+import '@vaadin/select/theme/material/vaadin-select.js';
+import './vaadin-grid-pro-edit-select-styles.js';
+import '../../src/vaadin-grid-pro-edit-select.js';

package/theme/material/vaadin-grid-pro-edit-text-field-styles.js

@@ -0,0 +1,6 @@
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import { gridProEditor } from './vaadin-grid-pro-editor-styles.js';
+
+registerStyles('vaadin-grid-pro-edit-text-field', gridProEditor, {
+  moduleId: 'material-grid-pro-edit-text-field'
+});

package/theme/material/vaadin-grid-pro-edit-text-field.js

@@ -0,0 +1,3 @@
+import '@vaadin/text-field/theme/material/vaadin-text-field.js';
+import './vaadin-grid-pro-edit-text-field-styles.js';
+import '../../src/vaadin-grid-pro-edit-text-field.js';

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

@@ -0,0 +1,21 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
+const gridProEditor = css`
+  :host([theme~='grid-pro-editor']) {
+    width: 100%;
+    margin: -6px 0 0;
+    padding: 0;
+    top: 6px;
+    will-change: transform;
+    font-size: inherit;
+  }
+
+  :host([theme~='grid-pro-editor']) ::slotted(input) {
+    box-sizing: border-box;
+    font-size: inherit;
+  }
+`;
+
+registerStyles('', gridProEditor, { moduleId: 'material-grid-pro-editor' });
+
+export { gridProEditor };

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

@@ -0,0 +1,13 @@
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/grid/theme/material/vaadin-grid-styles.js';
+
+registerStyles(
+  'vaadin-grid-pro',
+  css`
+    :host([navigating]) [part~='cell']:active {
+      box-shadow: inset 0 0 0 2px var(--material-primary-color);
+    }
+  `,
+  { moduleId: 'material-grid-pro' }
+);

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

@@ -0,0 +1,3 @@
+import '@vaadin/grid/theme/material/vaadin-grid-styles.js';
+import './vaadin-grid-pro-styles.js';
+import '../../src/vaadin-grid-pro.js';

package/vaadin-grid-pro-edit-column.d.ts

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

package/vaadin-grid-pro-edit-column.js

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

package/vaadin-grid-pro.d.ts

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

package/vaadin-grid-pro.js

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