@vaadin/crud 24.8.4 → 25.0.0-alpha10

package/src/vaadin-lit-crud-form.js

@@ -1,80 +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 '@vaadin/text-field/src/vaadin-lit-text-field.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { FormLayout } from '@vaadin/form-layout/src/vaadin-lit-form-layout.js';
-import { createField, createFields } from './vaadin-crud-helpers.js';
-import { IncludedMixin } from './vaadin-crud-include-mixin.js';
-
-/**
- * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
- *
- * @extends FormLayout
- * @mixes IncludedMixin
- * @private
- */
-class CrudForm extends IncludedMixin(FormLayout) {
-  static get is() {
-    return 'vaadin-crud-form';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * The item being edited.
-       * @type {unknown}
-       */
-      item: {
-        type: Object,
-        sync: true,
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__onItemChange(item)'];
-  }
-
-  /**
-   * Auto-generate form fields based on the JSON structure of the object provided.
-   *
-   * If not called, the method will be executed the first time an item is assigned.
-   * @param {unknown} object
-   * @protected
-   */
-  _configure(object) {
-    this.innerHTML = '';
-    this._fields = [];
-    this.__createFields(this, object);
-    this._updateLayout();
-  }
-
-  /** @private */
-  __onItemChange(item) {
-    if (!this._fields) {
-      this._configure(item);
-    }
-  }
-
-  /** @private */
-  __createField(parent, path) {
-    return createField(this, parent, path);
-  }
-
-  /** @private */
-  __createFields(parent, object, path) {
-    return createFields(this, parent, object, path);
-  }
-}
-
-defineCustomElement(CrudForm);
-
-export { CrudForm };

package/src/vaadin-lit-crud-grid.js

@@ -1,35 +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 '@vaadin/grid/src/vaadin-lit-grid-column-group.js';
-import '@vaadin/grid/src/vaadin-lit-grid-column.js';
-import '@vaadin/grid/src/vaadin-lit-grid-filter.js';
-import '@vaadin/grid/src/vaadin-lit-grid-sorter.js';
-import './vaadin-lit-crud-edit-column.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { Grid } from '@vaadin/grid/src/vaadin-lit-grid.js';
-import { CrudGridMixin } from './vaadin-crud-grid-mixin.js';
-
-/**
- * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
- *
- * @extends Grid
- * @mixes CrudGridMixin
- * @private
- */
-class CrudGrid extends CrudGridMixin(Grid) {
-  static get is() {
-    return 'vaadin-crud-grid';
-  }
-}
-
-defineCustomElement(CrudGrid);
-
-export { CrudGrid };

package/src/vaadin-lit-crud.js

@@ -1,121 +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 '@vaadin/button/src/vaadin-lit-button.js';
-import '@vaadin/confirm-dialog/src/vaadin-lit-confirm-dialog.js';
-import './vaadin-lit-crud-dialog.js';
-import './vaadin-lit-crud-grid.js';
-import './vaadin-lit-crud-form.js';
-import { html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { CrudMixin } from './vaadin-crud-mixin.js';
-import { crudStyles } from './vaadin-crud-styles.js';
-
-/**
- * LitElement based version of `<vaadin-crud>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- */
-class Crud extends CrudMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get styles() {
-    return crudStyles;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div id="container">
-        <div id="main">
-          <slot name="grid"></slot>
-
-          <div id="toolbar" part="toolbar">
-            <slot name="toolbar"></slot>
-            <slot name="new-button"></slot>
-          </div>
-        </div>
-
-        <div
-          part="editor"
-          id="editor"
-          role="group"
-          aria-labelledby="header"
-          ?hidden="${this.__computeEditorHidden(this.editorOpened, this._fullscreen, this.editorPosition)}"
-        >
-          <div part="scroller" id="scroller">
-            <div part="header" id="header">
-              <slot name="header"></slot>
-            </div>
-            <slot name="form"></slot>
-          </div>
-
-          <div part="footer" role="toolbar">
-            <slot name="save-button"></slot>
-            <slot name="cancel-button"></slot>
-            <slot name="delete-button"></slot>
-          </div>
-        </div>
-      </div>
-
-      <vaadin-crud-dialog
-        id="dialog"
-        .opened="${this.__computeDialogOpened(this.editorOpened, this._fullscreen, this.editorPosition)}"
-        .fullscreen="${this._fullscreen}"
-        .ariaLabel="${this.__dialogAriaLabel}"
-        .noCloseOnOutsideClick="${this.__isDirty}"
-        .noCloseOnEsc="${this.__isDirty}"
-        theme="${ifDefined(this._theme)}"
-        @opened-changed="${this.__onDialogOpened}"
-      ></vaadin-crud-dialog>
-
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmCancel"
-        @confirm="${this.__confirmCancel}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.cancel.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.cancel.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.cancel.title}"
-        .message="${this.__effectiveI18n.confirm.cancel.content}"
-        confirm-theme="primary"
-      ></vaadin-confirm-dialog>
-
-      <vaadin-confirm-dialog
-        theme="${ifDefined(this._theme)}"
-        id="confirmDelete"
-        @confirm="${this.__confirmDelete}"
-        cancel-button-visible
-        .confirmText="${this.__effectiveI18n.confirm.delete.button.confirm}"
-        .cancelText="${this.__effectiveI18n.confirm.delete.button.dismiss}"
-        .header="${this.__effectiveI18n.confirm.delete.title}"
-        .message="${this.__effectiveI18n.confirm.delete.content}"
-        confirm-theme="primary error"
-      ></vaadin-confirm-dialog>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-crud';
-  }
-
-  static get cvdlName() {
-    return 'vaadin-crud';
-  }
-}
-
-defineCustomElement(Crud);
-
-export { Crud };

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

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

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

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

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

@@ -1,2 +0,0 @@
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/color.js';

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

@@ -1,157 +0,0 @@
-import '@vaadin/vaadin-material-styles/typography.js';
-import '@vaadin/vaadin-material-styles/color.js';
-import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-crud-edit',
-  css`
-    :host {
-      display: block;
-      min-width: auto;
-      font-size: var(--material-button-font-size);
-      line-height: 1;
-      color: var(--material-text-color);
-      position: relative;
-      background-color: var(--material-secondary-background-color);
-      border-radius: 4px;
-      width: 2em;
-      height: 2em;
-      outline: none;
-      /* Reset button styles */
-      letter-spacing: normal;
-      -webkit-font-smoothing: auto;
-      -moz-font-smoothing: auto;
-    }
-
-    [part='icon']::before {
-      font-family: serif;
-      font-size: var(--material-button-font-size);
-      color: var(--material-primary-text-color);
-      content: '\\270E';
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      text-align: center;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  `,
-  { moduleId: 'material-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='footer'] {
-    background-color: var(--material-secondary-background-color);
-  }
-
-  :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(--material-font-family);
-      }
-
-      [part='scroller'] {
-        padding: 16px;
-        background: var(--material-background-color);
-      }
-
-      [part='editor'] {
-        position: relative;
-      }
-
-      [part='editor']:focus::before {
-        position: absolute;
-        inset: 0;
-        content: '';
-        box-shadow: inset 0 0 0 2px var(--material-primary-color);
-        pointer-events: none;
-      }
-
-      [part='toolbar'] {
-        padding: 8px;
-        background-color: var(--material-secondary-background-color);
-      }
-
-      [part='footer'] {
-        padding: 8px 4px;
-      }
-
-      [part='footer'] ::slotted(*) {
-        margin-left: 4px;
-        margin-right: 4px;
-      }
-
-      :host(:not([editor-position=''])) [part='editor']:not([hidden]) {
-        box-shadow: var(--material-shadow-elevation-12dp);
-      }
-
-      :host(:not([dir='rtl'])) [part='toolbar'] ::slotted(*:not(:first-child)) {
-        margin-left: 0.5em;
-      }
-
-      :host([dir='rtl']) [part='toolbar'] ::slotted(*:not(:first-child)) {
-        margin-right: 0.5em;
-      }
-    `,
-  ],
-  { moduleId: 'material-crud' },
-);
-
-registerStyles(
-  'vaadin-crud-dialog-overlay',
-  [
-    overlay,
-    dialogOverlay,
-    editorStyles,
-    css`
-      [part='overlay'] {
-        max-width: 54em;
-        min-width: 20em;
-      }
-
-      @keyframes material-overlay-dummy-animation {
-        0% {
-          opacity: 1;
-        }
-
-        100% {
-          opacity: 1;
-        }
-      }
-
-      :host([opening]),
-      :host([closing]) {
-        animation: 0.25s material-overlay-dummy-animation;
-      }
-
-      [part='header'] ::slotted(h3) {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-      }
-
-      [part='content'] {
-        padding: 0 16px 16px;
-      }
-    `,
-  ],
-  { moduleId: 'material-crud-dialog-overlay' },
-);

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

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

package/theme/material/vaadin-crud.js

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

package/theme/material/vaadin-lit-crud.d.ts

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

package/theme/material/vaadin-lit-crud.js

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

package/vaadin-lit-crud-edit .js

@@ -1 +0,0 @@
-export * from './src/vaadin-lit-crud-edit.js';

package/vaadin-lit-crud-edit-column.d.ts

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

package/vaadin-lit-crud-edit-column.js

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

package/vaadin-lit-crud-edit.d.ts

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

package/vaadin-lit-crud.d.ts

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

package/vaadin-lit-crud.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-crud.js';
-export * from './src/vaadin-lit-crud.js';