@vaadin/crud 25.0.0-alpha1 → 25.0.0-alpha11

package/src/vaadin-crud-styles.js

@@ -1,125 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- *
- * This program is available under Vaadin Commercial License and Service Terms.
- *
- *
- * See https://vaadin.com/commercial-license-and-service-terms for the full
- * license.
- */
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-export const crudStyles = css`
-  :host {
-    width: 100%;
-    height: 400px;
-    --vaadin-crud-editor-max-height: 40%;
-    --vaadin-crud-editor-max-width: 40%;
-  }
-
-  :host,
-  #main {
-    display: flex;
-    flex-direction: column;
-    align-self: stretch;
-    position: relative;
-    overflow: hidden;
-  }
-
-  #main {
-    flex: 1 1 100%;
-    height: 100%;
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
-  }
-
-  [part='toolbar'] {
-    display: flex;
-    flex-shrink: 0;
-    align-items: baseline;
-    justify-content: flex-end;
-  }
-
-  :host([no-toolbar]) [part='toolbar'] {
-    display: none;
-  }
-
-  #container {
-    display: flex;
-    height: 100%;
-  }
-
-  :host([editor-position='bottom']) #container {
-    flex-direction: column;
-  }
-
-  [part='editor'] {
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    outline: none;
-  }
-
-  :host(:not([editor-position=''])[editor-opened]:not([fullscreen])) [part='editor'] {
-    flex: 1 0 100%;
-  }
-
-  :host([editor-position='bottom'][editor-opened]:not([fullscreen])) [part='editor'] {
-    max-height: var(--vaadin-crud-editor-max-height);
-  }
-
-  :host([editor-position='aside'][editor-opened]:not([fullscreen])) [part='editor'] {
-    min-width: 300px;
-    max-width: var(--vaadin-crud-editor-max-width);
-  }
-
-  [part='scroller'] {
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    flex: auto;
-  }
-
-  [part='footer'] {
-    display: flex;
-    flex: none;
-    flex-direction: row-reverse;
-  }
-`;
-
-export const crudDialogOverlayStyles = css`
-  [part='overlay'] {
-    max-width: 54em;
-    min-width: 20em;
-  }
-
-  [part='footer'] {
-    justify-content: flex-start;
-    flex-direction: row-reverse;
-  }
-
-  /* Make buttons clickable */
-  [part='footer'] ::slotted(:not([disabled])) {
-    pointer-events: all;
-  }
-
-  :host([fullscreen]) {
-    inset: 0;
-    padding: 0;
-  }
-
-  :host([fullscreen]) [part='overlay'] {
-    height: 100vh;
-    width: 100vw;
-    border-radius: 0 !important;
-  }
-
-  :host([fullscreen]) [part='content'] {
-    flex: 1;
-  }
-`;

package/theme/lumo/vaadin-crud-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/style.js';

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

@@ -1,155 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import '@vaadin/vaadin-lumo-styles/style.js';
-import { dialogOverlay } from '@vaadin/dialog/theme/lumo/vaadin-dialog-styles.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      min-width: auto;
-      margin: 0;
-      font-family: 'lumo-icons', var(--lumo-font-family);
-      font-size: var(--lumo-icon-size-m);
-      line-height: 1;
-      position: relative;
-      width: var(--lumo-size-s);
-      height: var(--lumo-size-s);
-      outline: none;
-    }
-
-    [part='icon']::before {
-      content: var(--lumo-icons-edit);
-      width: var(--lumo-size-m);
-      height: var(--lumo-size-m);
-      line-height: var(--lumo-size-m);
-      text-align: center;
-      position: absolute;
-      top: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
-      left: calc((var(--lumo-size-m) - var(--lumo-size-s)) / -2);
-    }
-  `,
-  { moduleId: 'lumo-crud-grid-edit' },
-);
-
-/**
- * Shared styles used for the CRUD editor content and buttons regardless of `editorPosition`.
- * They are applied to both `vaadin-crud` and `vaadin-crud-dialog-overlay` components.
- */
-const editorStyles = css`
-  [part='header'] ::slotted(h3) {
-    margin-top: 0 !important;
-  }
-
-  :host(:not([dir='rtl'])) ::slotted([slot='delete-button']) {
-    margin-right: auto;
-  }
-
-  :host([dir='rtl']) ::slotted([slot='delete-button']) {
-    margin-left: auto;
-  }
-`;
-
-registerStyles(
-  'vaadin-crud',
-  [
-    editorStyles,
-    css`
-      :host {
-        font-family: var(--lumo-font-family);
-        --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-        --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-      }
-
-      [part='scroller'] {
-        padding: var(--lumo-space-l);
-      }
-
-      [part='toolbar'] {
-        padding: var(--lumo-space-s) var(--lumo-space-m);
-        background-color: var(--lumo-contrast-5pct);
-        border: 1px solid var(--lumo-contrast-10pct);
-        border-top: none;
-      }
-
-      :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
-        margin-left: var(--lumo-space-s);
-      }
-
-      :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
-        margin-right: var(--lumo-space-s);
-      }
-
-      :host([theme~='no-border']) [part='toolbar'] {
-        border: 0;
-      }
-
-      [part='footer'] {
-        background-color: var(--lumo-contrast-5pct);
-        padding: var(--lumo-space-s);
-      }
-
-      [part='footer'] ::slotted(*) {
-        margin-left: var(--lumo-space-s);
-        margin-right: var(--lumo-space-s);
-      }
-
-      [part='editor'] {
-        background: var(--lumo-base-color);
-        box-sizing: border-box;
-        position: relative;
-      }
-
-      [part='editor']:focus::before {
-        position: absolute;
-        inset: 0;
-        content: '';
-        box-shadow: inset 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-        pointer-events: none;
-      }
-
-      :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
-        box-shadow: var(--lumo-box-shadow-m);
-      }
-
-      :host(:not([theme~='no-border']):not([editor-position=''])) [part='editor']:not([hidden]) {
-        border: 1px solid var(--lumo-contrast-20pct);
-      }
-
-      :host(:not([theme~='no-border'])[editor-position='bottom']) [part='editor']:not([hidden]) {
-        border-top: 0;
-      }
-
-      :host(:not([dir='rtl'])[editor-position='aside']) [part='editor']:not([hidden]) {
-        border-left: 0;
-      }
-
-      :host([dir='rtl']:not([theme~='no-border'])[editor-position='aside']) [part='editor']:not([hidden]) {
-        border-right: 0;
-      }
-    `,
-  ],
-  { moduleId: 'lumo-crud' },
-);
-
-registerStyles(
-  'vaadin-crud-dialog-overlay',
-  [
-    overlay,
-    dialogOverlay,
-    editorStyles,
-    css`
-      [part='header'] ::slotted(h3) {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        margin-inline-start: var(--lumo-space-s);
-      }
-    `,
-  ],
-  {
-    moduleId: 'lumo-crud-dialog-overlay',
-  },
-);

package/theme/lumo/vaadin-crud.d.ts

@@ -1,8 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
-import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import './vaadin-crud-styles.js';
-import '../../src/vaadin-crud.js';

package/theme/lumo/vaadin-crud.js

@@ -1,8 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
-import '@vaadin/form-layout/theme/lumo/vaadin-form-layout.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid.js';
-import '@vaadin/grid/theme/lumo/vaadin-grid-sorter.js';
-import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
-import './vaadin-crud-styles.js';
-import '../../src/vaadin-crud.js';