@vaadin/crud 24.8.0-alpha9 → 25.0.0-alpha1

package/src/vaadin-lit-crud-dialog.d.ts

@@ -1,11 +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.
- */
-export * from './vaadin-crud-dialog.js';

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

@@ -1,128 +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, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { dialogOverlay, resizableOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { crudDialogOverlayStyles } from './vaadin-crud-styles.js';
-
-/**
- * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
- * @private
- */
-class CrudDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-crud-dialog-overlay';
-  }
-
-  static get styles() {
-    return [overlayStyles, dialogOverlay, resizableOverlay, crudDialogOverlayStyles];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <section id="resizerContainer" class="resizer-container">
-          <header part="header"><slot name="header"></slot></header>
-          <div part="content" id="content">
-            <slot name="form"></slot>
-          </div>
-          <footer part="footer" role="toolbar">
-            <slot name="save-button"></slot>
-            <slot name="cancel-button"></slot>
-            <slot name="delete-button"></slot>
-          </footer>
-        </section>
-      </div>
-    `;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  ready() {
-    super.ready();
-
-    // CRUD has header and footer but does not use renderers
-    this.setAttribute('has-header', '');
-    this.setAttribute('has-footer', '');
-  }
-}
-
-defineCustomElement(CrudDialogOverlay);
-
-/**
- * An element used internally by `<vaadin-crud>`. Not intended to be used separately.
- * @private
- */
-class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-crud-dialog';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  static get properties() {
-    return {
-      ariaLabel: {
-        type: String,
-      },
-
-      fullscreen: {
-        type: Boolean,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-crud-dialog-overlay
-        id="overlay"
-        .opened="${this.opened}"
-        aria-label="${ifDefined(this.ariaLabel)}"
-        @opened-changed="${this._onOverlayOpened}"
-        @mousedown="${this._bringOverlayToFront}"
-        @touchstart="${this._bringOverlayToFront}"
-        theme="${ifDefined(this._theme)}"
-        .modeless="${this.modeless}"
-        .withBackdrop="${!this.modeless}"
-        ?fullscreen="${this.fullscreen}"
-        role="dialog"
-        focus-trap
-      ></vaadin-crud-dialog-overlay>
-    `;
-  }
-}
-
-defineCustomElement(CrudDialog);

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

@@ -1,11 +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.
- */
-export * from './vaadin-crud-edit-column.js';

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

@@ -1,70 +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-lit-crud-edit.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { GridColumn } from '@vaadin/grid/src/vaadin-lit-grid-column.js';
-import { editColumnDefaultRenderer } from './vaadin-crud-helpers.js';
-
-/**
- * LitElement based version of `<vaadin-crud-edit-column>` 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 CrudEditColumn extends GridColumn {
-  static get is() {
-    return 'vaadin-crud-edit-column';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Width of the cells for this column.
-       * @private
-       */
-      width: {
-        type: String,
-        value: '4rem',
-      },
-
-      /**
-       * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
-       * @private
-       */
-      flexGrow: {
-        type: Number,
-        value: 0,
-      },
-
-      /** The arial-label for the edit button */
-      ariaLabel: String,
-    };
-  }
-
-  static get observers() {
-    return ['_onRendererOrBindingChanged(_renderer, _cells, _bodyContentHidden, _cells.*, path, ariaLabel)'];
-  }
-
-  /**
-   * Renders the crud edit element to the body cell.
-   *
-   * @override
-   */
-  _defaultRenderer(root, column) {
-    editColumnDefaultRenderer(root, column);
-  }
-}
-
-defineCustomElement(CrudEditColumn);
-
-export { CrudEditColumn };

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

@@ -1,11 +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.
- */
-export * from './vaadin-crud-edit.js';

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

@@ -1,75 +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 { html } from 'lit';
-import { Button } from '@vaadin/button/src/vaadin-lit-button.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-crud-edit>` 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 CrudEdit extends Button {
-  static get is() {
-    return 'vaadin-crud-edit';
-  }
-
-  static get styles() {
-    return [
-      super.styles,
-      css`
-        :host {
-          display: block;
-        }
-      `,
-    ];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="icon"></div>
-      <slot name="tooltip"></slot>
-    `;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    this.addEventListener('click', this.__onClick);
-    this.setAttribute('aria-label', 'Edit');
-  }
-
-  /** @private */
-  __onClick(e) {
-    const tr = e.target.parentElement.assignedSlot.parentElement.parentElement;
-    tr.dispatchEvent(
-      new CustomEvent('edit', { detail: { item: tr._item, index: tr.index }, bubbles: true, composed: true }),
-    );
-  }
-
-  /**
-   * Fired when user on the icon.
-   *
-   * @event edit
-   * @param {Object} detail.item the item to edit
-   * @param {Object} detail.index the index of the item in the data set
-   */
-}
-
-defineCustomElement(CrudEdit);
-
-export { CrudEdit };

package/src/vaadin-lit-crud-form.d.ts

@@ -1,11 +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.
- */
-export * from './vaadin-crud-form.js';

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.d.ts

@@ -1,11 +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.
- */
-export * from './vaadin-crud-grid.js';

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,122 +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 { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.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 ControllerMixin(ElementMixin(ThemableMixin(CrudMixin(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';